@widergy/energy-ui 3.22.3 → 3.22.4

package/dist/components/UTPhoneInput/index.js

@@ -102,13 +102,13 @@ class UTPhoneInput extends _react.PureComponent {
         this.setState({
           areaCode
         }, () => {
-          this.handleChange(`${this.state.areaCode}${this.state.phoneNumber}`);
+          this.handleChange("".concat(this.state.areaCode).concat(this.state.phoneNumber));
         });
       } else {
         this.setState({
           areaCode
         }, () => {
-          this.handleChange(`${this.state.areaCode}-${this.state.phoneNumber}`);
+          this.handleChange("".concat(this.state.areaCode, "-").concat(this.state.phoneNumber));
         });
       }
       this.handleCleanPhoneNumber();
@@ -119,7 +119,7 @@ class UTPhoneInput extends _react.PureComponent {
       this.setState({
         phoneNumber
       }, () => {
-        this.handleChange(`${this.state.areaCode}-${this.state.phoneNumber}`);
+        this.handleChange("".concat(this.state.areaCode, "-").concat(this.state.phoneNumber));
       });
       this.handleValidatePhoneNumber(phoneNumber);
     });
@@ -172,6 +172,7 @@ class UTPhoneInput extends _react.PureComponent {
     }
   }
   render() {
+    var _field$configuration, _field$configuration2;
     const {
       areaCodeFieldProps,
       phoneNumberFieldProps,
@@ -194,16 +195,16 @@ class UTPhoneInput extends _react.PureComponent {
     } = this.state;
     const classes = (0, _classesUtils.mergeClasses)(themeClasses, classNames);
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: `${_stylesModule.default.container} ${this.props.style}`
+      className: "".concat(_stylesModule.default.container, " ").concat(this.props.style)
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: _stylesModule.default.inputContainer
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: `${_stylesModule.default.areaCode} ${_stylesModule.default[`${variant}AreaCode`]} ${classes.areaCodeContainer}`
+      className: "".concat(_stylesModule.default.areaCode, " ").concat(_stylesModule.default["".concat(variant, "AreaCode")], " ").concat(classes.areaCodeContainer)
     }, /*#__PURE__*/_react.default.createElement(_TextField.default, _extends({
       name: "area_code",
       type: "tel",
-      label: field.configuration?.area_code_label || _constants.AREA_CODE_LABEL,
-      placeholder: field.configuration?.area_code_placeholder || _constants.AREA_CODE_PLACEHOLDER,
+      label: ((_field$configuration = field.configuration) === null || _field$configuration === void 0 ? void 0 : _field$configuration.area_code_label) || _constants.AREA_CODE_LABEL,
+      placeholder: ((_field$configuration2 = field.configuration) === null || _field$configuration2 === void 0 ? void 0 : _field$configuration2.area_code_placeholder) || _constants.AREA_CODE_PLACEHOLDER,
       autoComplete: "off",
       fullWidth: true,
       margin: "none",
@@ -224,12 +225,12 @@ class UTPhoneInput extends _react.PureComponent {
       stringContentClassName: classes.tooltip,
       content: city || ' '
     }, /*#__PURE__*/_react.default.createElement("span", {
-      className: `${_stylesModule.default.icon}  ${_stylesModule.default[`${variant}Icon`]} ${city && _stylesModule.default.showCheckedIcon}`
+      className: "".concat(_stylesModule.default.icon, "  ").concat(_stylesModule.default["".concat(variant, "Icon")], " ").concat(city && _stylesModule.default.showCheckedIcon)
     }, /*#__PURE__*/_react.default.createElement(_CheckCircleOutline.default, {
       tabIndex: "-1",
-      className: `${_stylesModule.default.checkedIcon} ${classes.areaCodeIcon}`
+      className: "".concat(_stylesModule.default.checkedIcon, " ").concat(classes.areaCodeIcon)
     })))), /*#__PURE__*/_react.default.createElement("div", {
-      className: `${_stylesModule.default.phoneNumber} ${classes.phoneNumberContainer}`
+      className: "".concat(_stylesModule.default.phoneNumber, " ").concat(classes.phoneNumberContainer)
     }, /*#__PURE__*/_react.default.createElement(_TextField.default, _extends({
       name: "phone_number",
       type: "tel",

package/dist/components/UTPhoneInput/theme.js

@@ -67,20 +67,20 @@ const retrieveMuiTheme = theme => (0, _styles.createTheme)({
       },
       root: {
         '&:hover:not($disabled):not($focused):not($error) $notchedOutline': {
-          border: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'notchedOutline', 'hover', 'border'], `1px solid ${_colorsModule.default.gray}`),
+          border: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'notchedOutline', 'hover', 'border'], "1px solid ".concat(_colorsModule.default.gray)),
           borderColor: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'notchedOutline', 'hover', 'borderColor'], 'none')
         },
         '&$focused $notchedOutline': {
-          border: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'notchedOutline', 'focused', 'border'], `2px solid ${_colorsModule.default.primary}`),
+          border: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'notchedOutline', 'focused', 'border'], "2px solid ".concat(_colorsModule.default.primary)),
           borderColor: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'notchedOutline', 'hover', 'borderColor'], 'none')
         },
         '&$disabled $notchedOutline': {
-          border: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'notchedOutline', 'disabled', 'border'], `1px solid ${_colorsModule.default.gray}`),
+          border: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'notchedOutline', 'disabled', 'border'], "1px solid ".concat(_colorsModule.default.gray)),
           borderColor: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'notchedOutline', 'hover', 'borderColor'], 'none')
         }
       },
       notchedOutline: {
-        border: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'notchedOutline', 'unfocused', 'border'], `1px solid ${theme.Palette.error['05']}`),
+        border: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'notchedOutline', 'unfocused', 'border'], "1px solid ".concat(theme.Palette.error['05'])),
         borderColor: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'notchedOutline', 'hover', 'borderColor'], 'none')
       }
     },
@@ -91,22 +91,22 @@ const retrieveMuiTheme = theme => (0, _styles.createTheme)({
       },
       underline: {
         '&:hover:not($disabled):not($focused):not($error):before': {
-          borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'underline', 'hover', 'borderBottom'], `1px solid ${_colorsModule.default.gray}`)
+          borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'underline', 'hover', 'borderBottom'], "1px solid ".concat(_colorsModule.default.gray))
         },
         '&$disabled:before': {
-          borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'underline', 'disabled', 'borderBottom'], `1px solid ${_colorsModule.default.gray}`)
+          borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'underline', 'disabled', 'borderBottom'], "1px solid ".concat(_colorsModule.default.gray))
         },
         '&:before': {
-          borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'underline', 'unfocused', 'borderBottom'], `1px solid ${_colorsModule.default.gray}`)
+          borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'underline', 'unfocused', 'borderBottom'], "1px solid ".concat(_colorsModule.default.gray))
         },
         '&$focused:after': {
-          borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'underline', 'focused', 'borderBottom'], `2px solid ${_colorsModule.default.primary}`)
+          borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'underline', 'focused', 'borderBottom'], "2px solid ".concat(_colorsModule.default.primary))
         },
         '&:after': {
-          borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'underline', 'base', 'borderBottom'], `2px solid ${_colorsModule.default.primary}`)
+          borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'underline', 'base', 'borderBottom'], "2px solid ".concat(_colorsModule.default.primary))
         },
         '&$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/UTPieChart/components/ArrowLabel/index.js

@@ -32,7 +32,7 @@ const ArrowLabel = _ref => {
   const valueX = segment2X + sign * _constants.TEXT_OFFSET;
   const valueY = segment2Y + _constants.TEXT_OFFSET;
   return /*#__PURE__*/_react.default.createElement("g", null, /*#__PURE__*/_react.default.createElement("path", {
-    d: `M${startX},${startY}L${segment1X},${segment1Y}L${segment2X},${segment2Y}`,
+    d: "M".concat(startX, ",").concat(startY, "L").concat(segment1X, ",").concat(segment1Y, "L").concat(segment2X, ",").concat(segment2Y),
     stroke: color,
     fill: "none"
   }), /*#__PURE__*/_react.default.createElement("circle", {
@@ -51,7 +51,7 @@ const ArrowLabel = _ref => {
     y: valueY,
     fontSize: "12px",
     textAnchor: textAnchor
-  }, `${(value * 100).toFixed(2)}%`));
+  }, "".concat((value * 100).toFixed(2), "%")));
 };
 ArrowLabel.propTypes = {
   midAngle: _propTypes.number,

package/dist/components/UTPieChart/components/Legend/index.js

@@ -32,7 +32,7 @@ const Legend = _ref => {
     legendItem
   } = classes;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: `${_stylesModule.default.container} ${_stylesModule.default[position]} ${legendsContainer}`
+    className: "".concat(_stylesModule.default.container, " ").concat(_stylesModule.default[position], " ").concat(legendsContainer)
   }, data.map(_ref2 => {
     let {
       label,
@@ -40,9 +40,9 @@ const Legend = _ref => {
       value
     } = _ref2;
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: `${_stylesModule.default.item} ${legendItem}`
+      className: "".concat(_stylesModule.default.item, " ").concat(legendItem)
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: `${_stylesModule.default.indicator} ${_stylesModule.default[type]}`,
+      className: "".concat(_stylesModule.default.indicator, " ").concat(_stylesModule.default[type]),
       style: {
         backgroundColor: color,
         width: indicatorWidth,
@@ -52,7 +52,7 @@ const Legend = _ref => {
       className: legendLabel
     }, label), showPercentage && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
       className: legendValueLabel
-    }, `${(value / totalConsumption * 100).toFixed(2)}%`)));
+    }, "".concat((value / totalConsumption * 100).toFixed(2), "%"))));
   }));
 };
 Legend.propTypes = {

package/dist/components/UTPieChart/index.js

@@ -85,9 +85,9 @@ const UTPieChart = _ref => {
       width,
       height
     },
-    className: `${_stylesModule.default.container} ${className} ${_stylesModule.default[`${position.split('-')[0]}Container`]}`
+    className: "".concat(_stylesModule.default.container, " ").concat(className, " ").concat(_stylesModule.default["".concat(position.split('-')[0], "Container")])
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: `${_stylesModule.default[`${position.split('-')[0]}LegendWrapper`]} ${_stylesModule.default[position]}`
+    className: "".concat(_stylesModule.default["".concat(position.split('-')[0], "LegendWrapper")], " ").concat(_stylesModule.default[position])
   }, withLegend && /*#__PURE__*/_react.default.createElement(_Legend.default, {
     classes: classes,
     data: data,
@@ -95,13 +95,13 @@ const UTPieChart = _ref => {
     showPercentage: showPercentageInLegend,
     totalConsumption: totalSum
   })), /*#__PURE__*/_react.default.createElement("div", {
-    className: `${_stylesModule.default[`${position.split('-')[0]}PieWrapper`]} ${classNames.chartContainer}`,
+    className: "".concat(_stylesModule.default["".concat(position.split('-')[0], "PieWrapper")], " ").concat(classNames.chartContainer),
     ref: ref
   }, /*#__PURE__*/_react.default.createElement("svg", {
-    viewBox: `${-containerWidth / 2} ${-containerHeight / 2} ${containerWidth} ${containerHeight}`,
+    viewBox: "".concat(-containerWidth / 2, " ").concat(-containerHeight / 2, " ").concat(containerWidth, " ").concat(containerHeight),
     width: containerWidth,
     height: containerHeight
-  }, gradientGenerator?.(), pie.map(slice => /*#__PURE__*/_react.default.createElement("path", {
+  }, gradientGenerator === null || gradientGenerator === void 0 ? void 0 : gradientGenerator(), pie.map(slice => /*#__PURE__*/_react.default.createElement("path", {
     d: arcGenerator(slice),
     fill: slice.data.color
   })), outlined && pie.map(slice => /*#__PURE__*/_react.default.createElement("path", {

package/dist/components/UTProductItem/index.js

@@ -58,13 +58,13 @@ const UTProductItem = _ref => {
   }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     colorTheme: "light",
     variant: discountSize
-  }, `${discount}% OFF`)), !!previousAmount && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+  }, "".concat(discount, "% OFF"))), !!previousAmount && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     colorTheme: "gray",
     className: classes.previousAmount
-  }, `$ ${previousAmount}`)), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+  }, "$ ".concat(previousAmount))), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     weight: "medium",
     variant: "subtitle1"
-  }, `$ ${amount}`))), /*#__PURE__*/_react.default.createElement("div", {
+  }, "$ ".concat(amount)))), /*#__PURE__*/_react.default.createElement("div", {
     className: classes.rightSection
   }, !!selectedQuantity && /*#__PURE__*/_react.default.createElement("div", {
     className: classes.selectedQuantity

package/dist/components/UTProductItem/theme.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.retrieveStyle = void 0;
 const retrieveStyle = _ref => {
+  var _theme$Palette$action, _theme$Palette$action2;
   let {
     theme
   } = _ref;
@@ -19,14 +20,14 @@ const retrieveStyle = _ref => {
       width: '16px'
     },
     container: {
-      borderBottom: `1px solid ${theme.Palette.light['04']}`,
+      borderBottom: "1px solid ".concat(theme.Palette.light['04']),
       display: 'flex',
       gridGap: '12px',
       justifyContent: 'space-between',
       paddingBottom: '24px'
     },
     discountChip: {
-      backgroundColor: theme.Palette.actions?.accent['04'] || theme.Palette.accent['04'],
+      backgroundColor: ((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action.accent['04']) || theme.Palette.accent['04'],
       borderRadius: '4px',
       padding: '4px 8px'
     },
@@ -55,7 +56,7 @@ const retrieveStyle = _ref => {
       gridGap: '12px'
     },
     selectedQuantity: {
-      backgroundColor: theme.Palette.actions?.neutral['04'] || theme.Palette.neutral['04'],
+      backgroundColor: ((_theme$Palette$action2 = theme.Palette.actions) === null || _theme$Palette$action2 === void 0 ? void 0 : _theme$Palette$action2.neutral['04']) || theme.Palette.neutral['04'],
       borderRadius: '4px',
       padding: '4px 8px'
     }

package/dist/components/UTProgressBar/index.js

@@ -42,7 +42,7 @@ const UTProgressBar = _ref => {
     className: classes.label
   }, /*#__PURE__*/_react.default.createElement("span", {
     style: customLabelStyle
-  }, customLabel || `${clampedValue}%`)));
+  }, customLabel || "".concat(clampedValue, "%"))));
 };
 UTProgressBar.defaultProps = {
   classes: {},

package/dist/components/UTProgressBar/theme.js

@@ -7,6 +7,7 @@ exports.retrieveStyle = void 0;
 var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const retrieveStyle = _ref => {
+  var _theme$UTProgressBar, _theme$UTProgressBar2, _theme$UTProgressBar3, _theme$UTProgressBar4, _theme$UTProgressBar5, _theme$UTProgressBar6, _theme$UTProgressBar7, _theme$UTProgressBar8, _theme$UTProgressBar9, _theme$UTProgressBar10, _theme$UTProgressBar11, _theme$UTProgressBar12;
   let {
     theme
   } = _ref;
@@ -14,25 +15,25 @@ const retrieveStyle = _ref => {
     container: {
       alignItems: 'center',
       display: 'flex',
-      width: theme?.UTProgressBar?.width
+      width: theme === null || theme === void 0 || (_theme$UTProgressBar = theme.UTProgressBar) === null || _theme$UTProgressBar === void 0 ? void 0 : _theme$UTProgressBar.width
     },
     root: {
-      border: theme?.UTProgressBar?.border,
-      borderRadius: theme?.UTProgressBar?.borderRadius,
-      height: theme?.UTProgressBar?.height,
-      width: theme?.UTProgressBar?.width || '100%'
+      border: theme === null || theme === void 0 || (_theme$UTProgressBar2 = theme.UTProgressBar) === null || _theme$UTProgressBar2 === void 0 ? void 0 : _theme$UTProgressBar2.border,
+      borderRadius: theme === null || theme === void 0 || (_theme$UTProgressBar3 = theme.UTProgressBar) === null || _theme$UTProgressBar3 === void 0 ? void 0 : _theme$UTProgressBar3.borderRadius,
+      height: theme === null || theme === void 0 || (_theme$UTProgressBar4 = theme.UTProgressBar) === null || _theme$UTProgressBar4 === void 0 ? void 0 : _theme$UTProgressBar4.height,
+      width: (theme === null || theme === void 0 || (_theme$UTProgressBar5 = theme.UTProgressBar) === null || _theme$UTProgressBar5 === void 0 ? void 0 : _theme$UTProgressBar5.width) || '100%'
     },
     colorPrimary: {
-      backgroundColor: theme?.UTProgressBar?.colorPrimary?.backgroundColor || _colorsModule.default.white,
-      borderRadius: theme?.UTProgressBar?.colorPrimary?.borderRadius
+      backgroundColor: (theme === null || theme === void 0 || (_theme$UTProgressBar6 = theme.UTProgressBar) === null || _theme$UTProgressBar6 === void 0 || (_theme$UTProgressBar6 = _theme$UTProgressBar6.colorPrimary) === null || _theme$UTProgressBar6 === void 0 ? void 0 : _theme$UTProgressBar6.backgroundColor) || _colorsModule.default.white,
+      borderRadius: theme === null || theme === void 0 || (_theme$UTProgressBar7 = theme.UTProgressBar) === null || _theme$UTProgressBar7 === void 0 || (_theme$UTProgressBar7 = _theme$UTProgressBar7.colorPrimary) === null || _theme$UTProgressBar7 === void 0 ? void 0 : _theme$UTProgressBar7.borderRadius
     },
     barColorPrimary: {
-      background: theme?.UTProgressBar?.barColorPrimary?.background || theme?.UTProgressBar?.barColorPrimary?.backgroundColor || _colorsModule.default.blue,
-      borderRadius: theme?.UTProgressBar?.barColorPrimary?.borderRadius,
-      transition: theme?.UTProgressBar?.barColorPrimary?.transition
+      background: (theme === null || theme === void 0 || (_theme$UTProgressBar8 = theme.UTProgressBar) === null || _theme$UTProgressBar8 === void 0 || (_theme$UTProgressBar8 = _theme$UTProgressBar8.barColorPrimary) === null || _theme$UTProgressBar8 === void 0 ? void 0 : _theme$UTProgressBar8.background) || (theme === null || theme === void 0 || (_theme$UTProgressBar9 = theme.UTProgressBar) === null || _theme$UTProgressBar9 === void 0 || (_theme$UTProgressBar9 = _theme$UTProgressBar9.barColorPrimary) === null || _theme$UTProgressBar9 === void 0 ? void 0 : _theme$UTProgressBar9.backgroundColor) || _colorsModule.default.blue,
+      borderRadius: theme === null || theme === void 0 || (_theme$UTProgressBar10 = theme.UTProgressBar) === null || _theme$UTProgressBar10 === void 0 || (_theme$UTProgressBar10 = _theme$UTProgressBar10.barColorPrimary) === null || _theme$UTProgressBar10 === void 0 ? void 0 : _theme$UTProgressBar10.borderRadius,
+      transition: theme === null || theme === void 0 || (_theme$UTProgressBar11 = theme.UTProgressBar) === null || _theme$UTProgressBar11 === void 0 || (_theme$UTProgressBar11 = _theme$UTProgressBar11.barColorPrimary) === null || _theme$UTProgressBar11 === void 0 ? void 0 : _theme$UTProgressBar11.transition
     },
     label: {
-      margin: theme?.UTProgressBar?.label?.margin || '0 0 0 10px'
+      margin: (theme === null || theme === void 0 || (_theme$UTProgressBar12 = theme.UTProgressBar) === null || _theme$UTProgressBar12 === void 0 || (_theme$UTProgressBar12 = _theme$UTProgressBar12.label) === null || _theme$UTProgressBar12 === void 0 ? void 0 : _theme$UTProgressBar12.margin) || '0 0 0 10px'
     }
   };
 };

package/dist/components/UTRadioGroup/index.js

@@ -46,11 +46,7 @@ class UTRadioGroup extends _react.PureComponent {
         value: option[valueKey],
         checked: isChecked,
         classes: {
-          root: `
-            ${classes.root}
-            ${isChecked && classes.checkedRoot}
-            ${option.disabled && classes.disabledRoot}
-          `,
+          root: "\n            ".concat(classes.root, "\n            ").concat(isChecked && classes.checkedRoot, "\n            ").concat(option.disabled && classes.disabledRoot, "\n          "),
           label: classes.label
         },
         disabled: disabled || option.disabled,
@@ -62,17 +58,15 @@ class UTRadioGroup extends _react.PureComponent {
           disableRipple: disableRipple,
           classes: {
             root: classes.iconRoot,
-            checked: `${classes.checked} ${classes.checkedIconRoot}`
+            checked: "".concat(classes.checked, " ").concat(classes.checkedIconRoot)
           }
         }),
-        className: `${classes.formControlLabel} 
-              ${this.props.divider && index === 0 && classes.topDivider} 
-              ${this.props.divider && classes.divider}
-              ${className}`
+        className: "".concat(classes.formControlLabel, " \n              ").concat(this.props.divider && index === 0 && classes.topDivider, " \n              ").concat(this.props.divider && classes.divider, "\n              ").concat(className)
       });
     });
   }
   render() {
+    var _field$configuration;
     const {
       classNames = {},
       classes: themeClasses,
@@ -83,7 +77,7 @@ class UTRadioGroup extends _react.PureComponent {
       titleProps,
       withUpperTitle
     } = this.props;
-    const shouldShowUpperTitle = field?.configuration?.ignore_title && withUpperTitle;
+    const shouldShowUpperTitle = (field === null || field === void 0 || (_field$configuration = field.configuration) === null || _field$configuration === void 0 ? void 0 : _field$configuration.ignore_title) && withUpperTitle;
     const classes = (0, _classesUtils.mergeClasses)(themeClasses, classNames);
     return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, shouldShowUpperTitle && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
       className: classes.title

package/dist/components/UTRadioGroup/theme.js

@@ -15,31 +15,31 @@ const retrieveStyle = _ref => {
   return {
     formControlLabel: {
       backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'formControlLabel', 'backgroundColor'], 'transparent'),
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'formControlLabel', 'color'], `${_colorsModule.default.gray}`),
+      color: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'formControlLabel', 'color'], "".concat(_colorsModule.default.gray)),
       height: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'formControlLabel', 'height'], 36),
-      width: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'formControlLabel', 'width'], `100%`),
-      margin: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'formControlLabel', 'margin'], `0px 0px 0px 0px`)
+      width: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'formControlLabel', 'width'], "100%"),
+      margin: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'formControlLabel', 'margin'], "0px 0px 0px 0px")
     },
     topDivider: {
-      borderTop: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'topDivider', 'borderTop'], `solid 1px ${_colorsModule.default.dividerBase}`)
+      borderTop: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'topDivider', 'borderTop'], "solid 1px ".concat(_colorsModule.default.dividerBase))
     },
     divider: {
-      borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'divider', 'borderBottom'], `solid 1px ${_colorsModule.default.dividerBase}`)
+      borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'divider', 'borderBottom'], "solid 1px ".concat(_colorsModule.default.dividerBase))
     },
     root: {
-      fontFamily: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'root', 'fontFamiliy'], `Roboto, Helvetica, sans-serif`),
-      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'root', 'backgroundColor'], `${_colorsModule.default.white}`),
+      fontFamily: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'root', 'fontFamiliy'], "Roboto, Helvetica, sans-serif"),
+      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'root', 'backgroundColor'], "".concat(_colorsModule.default.white)),
       height: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'root', 'height'], 38),
-      margin: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'root', 'margin'], `0px 0px 10px 0px`),
+      margin: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'root', 'margin'], "0px 0px 10px 0px"),
       width: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'root', 'width'], '100%'),
-      transition: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'root', 'transition'], `all 350ms cubic-bezier(0.4, 0, 0.2, 1) 0ms`),
+      transition: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'root', 'transition'], "all 350ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"),
       willChange: 'left, width',
       '&:hover:not($checkedRoot)': {
-        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'root', 'hover', 'backgroundColor'], `transparent`),
+        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'root', 'hover', 'backgroundColor'], "transparent"),
         transition: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'root', 'hoverTransition', 'transition'], 'background-color 0.75s ease')
       },
       '&$checkedRoot': {
-        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'root', 'selectedColor', 'backgroundColor'], `transparent`)
+        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'root', 'selectedColor', 'backgroundColor'], "transparent")
       }
     },
     disabledRoot: {
@@ -47,7 +47,7 @@ const retrieveStyle = _ref => {
     },
     textColorPrimary: {
       '&$checkedRoot': {
-        color: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'textColorPrimary', 'color'], `${_colorsModule.default.white}`)
+        color: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'textColorPrimary', 'color'], "".concat(_colorsModule.default.white))
       }
     },
     checkedRoot: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'selected'], {})
@@ -62,19 +62,19 @@ const retrieveMuiTheme = theme => (0, _styles.createTheme)({
     MuiTypography: {
       body1: {
         fontFamily: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'fontFamily'], 'Roboto'),
-        fontSize: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'fontSize'], `14px`),
-        color: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'color'], `currentColor`),
+        fontSize: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'fontSize'], "14px"),
+        color: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'color'], "currentColor"),
         width: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'root', 'width'])
       }
     },
     MuiRadio: {
       colorSecondary: {
-        color: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'root', 'color'], `${_colorsModule.default.gray}`),
+        color: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'root', 'color'], "".concat(_colorsModule.default.gray)),
         '&$checked': {
-          color: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'selected', 'color'], `${_colorsModule.default.inputPrimary}`)
+          color: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'selected', 'color'], "".concat(_colorsModule.default.inputPrimary))
         },
         '&$disabled': {
-          color: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'disabled', 'color'], `${_colorsModule.default.disabledGray}`)
+          color: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'disabled', 'color'], "".concat(_colorsModule.default.disabledGray))
         }
       }
     },

package/dist/components/UTRating/components/Circle/index.js

@@ -39,8 +39,8 @@ const Circle = _ref => {
       showLabel: isFirst || isLast
     },
     [_constants.BOTTOM_TEXT]: {
-      containerClass: `${_stylesModule.default.withTextBottom} ${classes.circleWithTextBottom}`,
-      labelClass: `${isFirst ? _stylesModule.default.labelBottomFirst : isLast && _stylesModule.default.labelBottomLast} ${classes.label} ${isFirst ? classes.labelBottomFirst : isLast && classes.labelBottomLast}`,
+      containerClass: "".concat(_stylesModule.default.withTextBottom, " ").concat(classes.circleWithTextBottom),
+      labelClass: "".concat(isFirst ? _stylesModule.default.labelBottomFirst : isLast && _stylesModule.default.labelBottomLast, " ").concat(classes.label, " ").concat(isFirst ? classes.labelBottomFirst : isLast && classes.labelBottomLast),
       showLabel: isFirst || isLast
     },
     [_constants.NO_TEXT]: {
@@ -59,7 +59,7 @@ const Circle = _ref => {
     borderColor: color
   };
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: `${_stylesModule.default.container} ${textVariantToUse.containerClass}`
+    className: "".concat(_stylesModule.default.container, " ").concat(textVariantToUse.containerClass)
   }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     onFocus: onFocus,
     onClick: handleClick,
@@ -68,9 +68,9 @@ const Circle = _ref => {
     className: _stylesModule.default.icon
   }, /*#__PURE__*/_react.default.createElement(_Avatar.default, {
     style: color && (showPropColor ? avatarSelectedStyle : avatarStyle),
-    className: `${_stylesModule.default.avatar} ${classes.avatar} ${showPropColor && _stylesModule.default.selectedAvatar}`
+    className: "".concat(_stylesModule.default.avatar, " ").concat(classes.avatar, " ").concat(showPropColor && _stylesModule.default.selectedAvatar)
   }, value)), textVariantToUse.showLabel && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    className: `${_stylesModule.default.text} ${textVariantToUse.labelClass}`
+    className: "".concat(_stylesModule.default.text, " ").concat(textVariantToUse.labelClass)
   }, name));
 };
 Circle.propTypes = {

package/dist/components/UTRating/components/Faces/index.js

@@ -34,7 +34,7 @@ const Faces = _ref => {
       showLabel: isFirst || isLast
     },
     [_constants.BOTTOM_TEXT]: {
-      containerClass: `${_stylesModule.default.withTextBottom} ${classes.facesWithTextBottom}`,
+      containerClass: "".concat(_stylesModule.default.withTextBottom, " ").concat(classes.facesWithTextBottom),
       labelClass: classes.label,
       showLabel: true
     },
@@ -48,14 +48,10 @@ const Faces = _ref => {
   const Icon = _constants2.FACES_ICONS[order - 1];
   const IconSelected = _constants2.FACES_ICONS_SELECTED[order - 1];
   return Icon && IconSelected && /*#__PURE__*/_react.default.createElement("div", {
-    className: `${_stylesModule.default.container} ${textVariantToUse.containerClass}`
+    className: "".concat(_stylesModule.default.container, " ").concat(textVariantToUse.containerClass)
   }, /*#__PURE__*/_react.default.createElement(_UTButton.default, {
     classNames: {
-      root: `
-              ${_stylesModule.default.faceButton}
-              ${classes[_constants2.FACES_CLASSES[order - 1]]}
-              ${selected && `${classes.faceButtonSelected} ${_stylesModule.default.faceButtonSelected}`}
-            `
+      root: "\n              ".concat(_stylesModule.default.faceButton, "\n              ").concat(classes[_constants2.FACES_CLASSES[order - 1]], "\n              ").concat(selected && "".concat(classes.faceButtonSelected, " ").concat(_stylesModule.default.faceButtonSelected), "\n            ")
     },
     Icon: () => /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(Icon, {
       className: _stylesModule.default.faceIcon
@@ -65,7 +61,7 @@ const Faces = _ref => {
     onClick: handleClick,
     variant: "text"
   }), textVariantToUse.showLabel && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    className: `${_stylesModule.default.text} ${textVariantToUse.labelClass}`,
+    className: "".concat(_stylesModule.default.text, " ").concat(textVariantToUse.labelClass),
     colorTheme: "gray",
     weight: "semibold"
   }, name));

package/dist/components/UTRating/components/Star/index.js

@@ -48,7 +48,7 @@ const Star = _ref => {
   };
   const textVariantToUse = textVariants[textVariant] || textVariants[_constants.SIDE_TEXT];
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: `${_stylesModule.default.container} ${textVariantToUse.containerClass}`
+    className: "".concat(_stylesModule.default.container, " ").concat(textVariantToUse.containerClass)
   }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     onFocus: onFocus,
     onMouseOver: handleHover,
@@ -57,11 +57,11 @@ const Star = _ref => {
     style: showPropColor ? {
       color
     } : {},
-    className: `${_stylesModule.default.starButton} ${hovered && _stylesModule.default.starHovered} ${selected && _stylesModule.default.starsPainted}`
+    className: "".concat(_stylesModule.default.starButton, " ").concat(hovered && _stylesModule.default.starHovered, " ").concat(selected && _stylesModule.default.starsPainted)
   }, /*#__PURE__*/_react.default.createElement(_StarRate.default, {
     className: _stylesModule.default.starSize
   })), textVariantToUse.showLabel && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    className: `${_stylesModule.default.text} ${classes.label}`,
+    className: "".concat(_stylesModule.default.text, " ").concat(classes.label),
     colorTheme: "gray"
   }, name));
 };

package/dist/components/UTRating/index.js

@@ -83,11 +83,11 @@ const UTRatingContainer = _ref => {
     }, defaultProps));
   };
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, shouldShowUpperTitle && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
-    className: `${classes.title}`
+    className: "".concat(classes.title)
   }, titleProps, {
     withMarkdown: true
   }), field.title), /*#__PURE__*/_react.default.createElement("div", {
-    className: `${_stylesModule.default.container} ${classes.container}`
+    className: "".concat(_stylesModule.default.container, " ").concat(classes.container)
   }, options.map(handleMapOptions)));
 };
 UTRatingContainer.propTypes = {