@widergy/energy-ui 3.22.2 → 3.22.4

package/dist/components/UTConsumptionBar/index.js

@@ -55,23 +55,23 @@ const UTConsumptionBar = _ref => {
       nextBarPosition = getLeftPosition(elements[index + 1].kwh);
     }
     const width = (nextBarPosition - barPosition) / 2;
-    const tippyContent = Number.isInteger(range[1]) ? `${range[0]} - ${range[1]} kWh` : `${range[0]}+ kWh`;
+    const tippyContent = Number.isInteger(range[1]) ? "".concat(range[0], " - ").concat(range[1], " kWh") : "".concat(range[0], "+ kWh");
     return /*#__PURE__*/_react.default.createElement("div", {
       key: category,
       className: _stylesModule.default.categoryLineContainer,
       style: {
-        left: `calc(${getLeftPosition(kwh)}%)`,
-        width: `calc(${width}% + 7px)`
+        left: "calc(".concat(getLeftPosition(kwh), "%)"),
+        width: "calc(".concat(width, "% + 7px)")
       }
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: _stylesModule.default.lineContainer
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: _stylesModule.default.line
     })), /*#__PURE__*/_react.default.createElement(_react2.default, {
-      content: `Categoría ${name}: ${tippyContent}`,
+      content: "Categor\xEDa ".concat(name, ": ").concat(tippyContent),
       arrow: true
     }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-      className: `${_stylesModule.default.categoryLineText} ${classes?.categoryLineText}`,
+      className: "".concat(_stylesModule.default.categoryLineText, " ").concat(classes === null || classes === void 0 ? void 0 : classes.categoryLineText),
       colorTheme: "information",
       variant: "xsmall",
       weight: "bold"
@@ -80,9 +80,9 @@ const UTConsumptionBar = _ref => {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.estimatedContainer
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: `${_stylesModule.default.container} ${classes?.container}`
+    className: "".concat(_stylesModule.default.container, " ").concat(classes === null || classes === void 0 ? void 0 : classes.container)
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: `${_stylesModule.default.bar} ${downIndicators.length > 0 && _stylesModule.default.colorizedBar}`,
+    className: "".concat(_stylesModule.default.bar, " ").concat(downIndicators.length > 0 && _stylesModule.default.colorizedBar),
     ref: widthRef
   }), upIndicators.map(indicator => /*#__PURE__*/_react.default.createElement(_ConsumptionBarIndicatorTop.default, {
     classes: classes,
@@ -100,7 +100,7 @@ const UTConsumptionBar = _ref => {
     unit: indicator.title,
     value: indicator.value
   }))), /*#__PURE__*/_react.default.createElement("div", {
-    className: `${_stylesModule.default.finishLine1} ${downIndicators.length > 0 && _stylesModule.default.colorizedLine}`
+    className: "".concat(_stylesModule.default.finishLine1, " ").concat(downIndicators.length > 0 && _stylesModule.default.colorizedLine)
   }));
 };
 UTConsumptionBar.propTypes = {

package/dist/components/UTCuit/theme.js

@@ -20,22 +20,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/UTDatePicker/components/Day/index.js

@@ -23,11 +23,7 @@ const Day = _ref => {
   } = _ref;
   const todaySelected = (0, _utils.isSelected)(date, pickedDate);
   return /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-    className: `
-      ${classes.day} 
-      ${!dayInCurrentMonth && classes.otherMonthDay} 
-      ${todaySelected && classes.selectedDay}
-      `
+    className: "\n      ".concat(classes.day, " \n      ").concat(!dayInCurrentMonth && classes.otherMonthDay, " \n      ").concat(todaySelected && classes.selectedDay, "\n      ")
   }, /*#__PURE__*/_react.default.createElement("span", null, " ", (0, _dayjs.default)(date).format(dayFormat || _constants.DAY_NUMBER_FORMAT), " "));
 };
 Day.propTypes = {

package/dist/components/UTDatePicker/index.js

@@ -54,6 +54,7 @@ class CustomUtils extends _dayjs.default {
   }
 }
 const UTDatePicker = _ref => {
+  var _field$configuration, _field$configuration2;
   let {
     classes: themeClasses,
     classNames,
@@ -77,8 +78,8 @@ const UTDatePicker = _ref => {
     withUpperTitle
   } = _ref;
   const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(themeClasses, classNames), [classNames]);
-  const configMask = field?.configuration?.date_mask || _constants.OUTPUT_LABEL_MASK;
-  const onlyPastMonth = field.configuration?.customDateValidations?.onlyPastMonth?.active || false;
+  const configMask = (field === null || field === void 0 || (_field$configuration = field.configuration) === null || _field$configuration === void 0 ? void 0 : _field$configuration.date_mask) || _constants.OUTPUT_LABEL_MASK;
+  const onlyPastMonth = ((_field$configuration2 = field.configuration) === null || _field$configuration2 === void 0 || (_field$configuration2 = _field$configuration2.customDateValidations) === null || _field$configuration2 === void 0 || (_field$configuration2 = _field$configuration2.onlyPastMonth) === null || _field$configuration2 === void 0 ? void 0 : _field$configuration2.active) || false;
   const pastMonthDates = (0, _utils.getPastMonthDates)(onlyPastMonth);
   const {
     minDate,
@@ -92,7 +93,7 @@ const UTDatePicker = _ref => {
     if (newValue.isValid()) input.onChange(newValue.format(configMask));else input.onChange('');
   };
   (0, _react.useEffect)(() => {
-    if (!input.value && pickedDate?.isValid()) setPickedDate(null);else if ((0, _utils.dateMatchesFormat)(input.value, configMask)) setPickedDate((0, _dayjs2.default)(input.value, configMask));
+    if (!input.value && pickedDate !== null && pickedDate !== void 0 && pickedDate.isValid()) setPickedDate(null);else if ((0, _utils.dateMatchesFormat)(input.value, configMask)) setPickedDate((0, _dayjs2.default)(input.value, configMask));
   }, [input.value]);
   const renderDay = (date, _, dayInCurrentMonth) => /*#__PURE__*/_react.default.createElement(_Day.default, {
     classes: classes,
@@ -115,7 +116,7 @@ const UTDatePicker = _ref => {
   }, /*#__PURE__*/_react.default.createElement(_pickers.KeyboardDatePicker, _extends({
     disabled: disabled,
     value: pickedDate,
-    label: inputVariant === 'standard' && field?.title,
+    label: inputVariant === 'standard' && (field === null || field === void 0 ? void 0 : field.title),
     error: (0, _form.shouldShowErrors)(meta),
     helperText: errorMessage ? /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
       className: classes.errorLabel,
@@ -136,7 +137,7 @@ const UTDatePicker = _ref => {
         root: classes.input,
         notchedOutline: classes.notchedOutline
       },
-      placeholder: inputVariant === 'outlined' && (placeholder || field?.placeholder) || undefined,
+      placeholder: inputVariant === 'outlined' && (placeholder || (field === null || field === void 0 ? void 0 : field.placeholder)) || undefined,
       ...inputProps
     },
     invalidDateMessage: invalidDateMessage || _constants.WRONG_DATE_FORMAT,

package/dist/components/UTDatePicker/theme.js

@@ -53,179 +53,182 @@ const retrieveStyle = _ref => {
   };
 };
 exports.retrieveStyle = retrieveStyle;
-const materialTheme = theme => (0, _styles.createTheme)({
-  typography: {
-    fontFamily: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'fontFamily'])
-  },
-  overrides: {
-    MuiTypography: {
-      body1: {
-        fontFamily: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'input', 'fontFamily'], (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'fontFamily']))
-      }
-    },
-    MuiToolbar: {
-      regular: {
-        minHeight: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'toolbar', 'minHeight'], '0px !important')
-      }
-    },
-    MuiPickersToolbar: {
-      toolbar: {
-        height: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'toolbar', 'height'], 'fit-content'),
-        padding: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'toolbar', 'padding'], '8px 12px 8px 12px'),
-        borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'toolbar', 'borderRadious'], '4px'),
-        margin: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'toolbar', 'margin'], '16px 16px 0px 16px'),
-        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'toolbar', 'backgroundColor'], _colorsModule.default.gray3)
-      }
-    },
-    MuiPickersToolbarButton: {
-      toolbarBtn: {
-        alignSelf: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'toolbar', 'alignSelf'], 'center'),
-        '&:not(:first-child)': {
-          display: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'toolbar', 'displayDate'], 'none')
+const materialTheme = theme => {
+  var _theme$UTDatePicker, _theme$UTDatePicker2, _theme$UTDatePicker3, _theme$UTDatePicker4;
+  return (0, _styles.createTheme)({
+    typography: {
+      fontFamily: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'fontFamily'])
+    },
+    overrides: {
+      MuiTypography: {
+        body1: {
+          fontFamily: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'input', 'fontFamily'], (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'fontFamily']))
         }
-      }
-    },
-    MuiPickersToolbarText: {
-      toolbarTxt: {
-        fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'toolbar', 'text', 'fontWeight'], '500'),
-        fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'toolbar', 'text', 'fontSize'], '16px'),
-        lineHeight: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'toolbar', 'text', 'lineHeight'], '22px'),
-        color: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'toolbar', 'text', 'textColor'], _colorsModule.default.black)
       },
-      toolbarBtnSelected: {
-        color: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'toolbar', 'text', 'textColor'], _colorsModule.default.black)
-      }
-    },
-    MuiPickersYear: {
-      yearSelected: {
-        color: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'toolbar', 'text', 'textColor'], _colorsModule.default.black),
-        marginLeft: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'year', 'marginLeft'], '10px')
+      MuiToolbar: {
+        regular: {
+          minHeight: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'toolbar', 'minHeight'], '0px !important')
+        }
       },
-      root: {
-        color: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'year', 'color'], _colorsModule.default.black),
-        marginLeft: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'year', 'marginLeft'], '10px')
-      }
-    },
-    MuiPickersCalendarHeader: {
-      switchHeader: {
-        color: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'switchHeader', 'color'], _colorsModule.default.gray4),
-        textTransform: (0, _classesUtils.withImportant)(theme?.UTDatePicker?.switchHeader?.textTransform || 'capitalize'),
-        fontWeight: (0, _classesUtils.withImportant)(theme?.UTDatePicker?.switchHeader?.fontWeight || 500),
-        margin: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'switchHeader', 'margin'], '8px 17px'),
-        padding: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'switchHeader', 'padding'], '15px 0 0')
+      MuiPickersToolbar: {
+        toolbar: {
+          height: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'toolbar', 'height'], 'fit-content'),
+          padding: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'toolbar', 'padding'], '8px 12px 8px 12px'),
+          borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'toolbar', 'borderRadious'], '4px'),
+          margin: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'toolbar', 'margin'], '16px 16px 0px 16px'),
+          backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'toolbar', 'backgroundColor'], _colorsModule.default.gray3)
+        }
       },
-      dayLabel: {
-        color: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'dayLabel', 'color'], _colorsModule.default.gray4),
-        width: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'dayLabel', 'width'], '33px'),
-        fontWeight: (0, _classesUtils.withImportant)(theme?.UTDatePicker?.dayLabel?.fontWeight || 500),
-        fontFamily: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'dayLabel', 'fontFamily'], (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'fontFamily']))
+      MuiPickersToolbarButton: {
+        toolbarBtn: {
+          alignSelf: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'toolbar', 'alignSelf'], 'center'),
+          '&:not(:first-child)': {
+            display: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'toolbar', 'displayDate'], 'none')
+          }
+        }
       },
-      daysHeader: {
-        marginTop: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'daysHeader', 'marginTop'], '15px')
-      }
-    },
-    MuiOutlinedInput: {
-      root: {
-        fontFamily: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'outlinedInput', 'root', 'fontFamily'], (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'fontFamily'])),
-        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'outlinedInput', 'root', 'backgroundColor'], _colorsModule.default.white),
-        fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'outlinedInput', 'root', 'fontWeight'], 500),
-        fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'outlinedInput', 'root', 'fontSize'], '14px'),
-        borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'outlinedInput', 'root', 'borderRadius'], '30px'),
-        height: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'outlinedInput', 'root', 'height'], '40px'),
-        width: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'outlinedInput', 'root', 'width'], '250px'),
-        color: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'outlinedInput', 'root', 'color'], _colorsModule.default.gray4),
-        paddingLeft: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'outlinedInput', 'root', 'paddingLeft'], '6px'),
-        paddingRight: (0, _classesUtils.withImportant)(theme?.UTDatePicker?.outlinedInput?.root?.paddingRight || '12px'),
-        '&:hover:not($disabled):not($focused):not($error) $notchedOutline': {
-          borderColor: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'outlinedInput', 'notchedOutline', 'hover', 'borderColor'], _colorsModule.default.gray3)
+      MuiPickersToolbarText: {
+        toolbarTxt: {
+          fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'toolbar', 'text', 'fontWeight'], '500'),
+          fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'toolbar', 'text', 'fontSize'], '16px'),
+          lineHeight: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'toolbar', 'text', 'lineHeight'], '22px'),
+          color: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'toolbar', 'text', 'textColor'], _colorsModule.default.black)
         },
-        '&$focused $notchedOutline': {
-          borderColor: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'outlinedInput', 'notchedOutline', 'focused', 'borderColor'], _colorsModule.default.gray3),
-          borderWidth: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'outlinedInput', 'notchedOutline', 'focused', 'borderWidth'], 1)
+        toolbarBtnSelected: {
+          color: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'toolbar', 'text', 'textColor'], _colorsModule.default.black)
         }
       },
-      notchedOutline: {
-        borderColor: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'outlinedInput', 'notchedOutline', 'borderColor'], _colorsModule.default.gray3)
-      }
-    },
-    MuiInput: {
-      input: {
-        border: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'standardInput', 'input', 'border']),
-        borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'input', 'borderRadius']),
-        fontFamily: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'standardInput', 'input', 'fontFamily'], (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'fontFamily'])),
-        fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'standardInput', 'input', 'fontSize'], (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'medium'], 14)),
-        color: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'standardInput', 'input', 'color']),
-        padding: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'standardInput', 'input', 'padding'])
-      },
-      underline: {
-        '&:hover:not($disabled):not($focused):not($error):before': {
-          borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'standardInput', 'underline', 'hover', 'borderBottom'], `1px solid ${_colorsModule.default.gray}`)
+      MuiPickersYear: {
+        yearSelected: {
+          color: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'toolbar', 'text', 'textColor'], _colorsModule.default.black),
+          marginLeft: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'year', 'marginLeft'], '10px')
         },
-        '&:hover:not($disabled):before': {
-          borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'standardInput', 'underline', 'hover', 'borderBottom'], `1px solid ${_colorsModule.default.gray}`)
-        },
-        '&$disabled:before': {
-          borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'standardInput', 'underline', 'disabled', 'borderBottom'], `1px solid ${_colorsModule.default.gray}`)
-        },
-        '&:before': {
-          borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'standardInput', 'underline', 'unfocused', 'borderBottom'], `1px solid ${_colorsModule.default.gray}`)
+        root: {
+          color: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'year', 'color'], _colorsModule.default.black),
+          marginLeft: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'year', 'marginLeft'], '10px')
+        }
+      },
+      MuiPickersCalendarHeader: {
+        switchHeader: {
+          color: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'switchHeader', 'color'], _colorsModule.default.gray4),
+          textTransform: (0, _classesUtils.withImportant)((theme === null || theme === void 0 || (_theme$UTDatePicker = theme.UTDatePicker) === null || _theme$UTDatePicker === void 0 || (_theme$UTDatePicker = _theme$UTDatePicker.switchHeader) === null || _theme$UTDatePicker === void 0 ? void 0 : _theme$UTDatePicker.textTransform) || 'capitalize'),
+          fontWeight: (0, _classesUtils.withImportant)((theme === null || theme === void 0 || (_theme$UTDatePicker2 = theme.UTDatePicker) === null || _theme$UTDatePicker2 === void 0 || (_theme$UTDatePicker2 = _theme$UTDatePicker2.switchHeader) === null || _theme$UTDatePicker2 === void 0 ? void 0 : _theme$UTDatePicker2.fontWeight) || 500),
+          margin: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'switchHeader', 'margin'], '8px 17px'),
+          padding: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'switchHeader', 'padding'], '15px 0 0')
         },
-        '&$focused:after': {
-          borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'standardInput', 'underline', 'focused', 'borderBottom'], `2px solid ${_colorsModule.default.primary}`)
+        dayLabel: {
+          color: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'dayLabel', 'color'], _colorsModule.default.gray4),
+          width: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'dayLabel', 'width'], '33px'),
+          fontWeight: (0, _classesUtils.withImportant)((theme === null || theme === void 0 || (_theme$UTDatePicker3 = theme.UTDatePicker) === null || _theme$UTDatePicker3 === void 0 || (_theme$UTDatePicker3 = _theme$UTDatePicker3.dayLabel) === null || _theme$UTDatePicker3 === void 0 ? void 0 : _theme$UTDatePicker3.fontWeight) || 500),
+          fontFamily: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'dayLabel', 'fontFamily'], (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'fontFamily']))
         },
-        '&:after': {
-          borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'standardInput', 'underline', 'base', 'borderBottom'], `2px solid ${_colorsModule.default.primary}`)
+        daysHeader: {
+          marginTop: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'daysHeader', 'marginTop'], '15px')
+        }
+      },
+      MuiOutlinedInput: {
+        root: {
+          fontFamily: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'outlinedInput', 'root', 'fontFamily'], (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'fontFamily'])),
+          backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'outlinedInput', 'root', 'backgroundColor'], _colorsModule.default.white),
+          fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'outlinedInput', 'root', 'fontWeight'], 500),
+          fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'outlinedInput', 'root', 'fontSize'], '14px'),
+          borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'outlinedInput', 'root', 'borderRadius'], '30px'),
+          height: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'outlinedInput', 'root', 'height'], '40px'),
+          width: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'outlinedInput', 'root', 'width'], '250px'),
+          color: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'outlinedInput', 'root', 'color'], _colorsModule.default.gray4),
+          paddingLeft: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'outlinedInput', 'root', 'paddingLeft'], '6px'),
+          paddingRight: (0, _classesUtils.withImportant)((theme === null || theme === void 0 || (_theme$UTDatePicker4 = theme.UTDatePicker) === null || _theme$UTDatePicker4 === void 0 || (_theme$UTDatePicker4 = _theme$UTDatePicker4.outlinedInput) === null || _theme$UTDatePicker4 === void 0 || (_theme$UTDatePicker4 = _theme$UTDatePicker4.root) === null || _theme$UTDatePicker4 === void 0 ? void 0 : _theme$UTDatePicker4.paddingRight) || '12px'),
+          '&:hover:not($disabled):not($focused):not($error) $notchedOutline': {
+            borderColor: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'outlinedInput', 'notchedOutline', 'hover', 'borderColor'], _colorsModule.default.gray3)
+          },
+          '&$focused $notchedOutline': {
+            borderColor: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'outlinedInput', 'notchedOutline', 'focused', 'borderColor'], _colorsModule.default.gray3),
+            borderWidth: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'outlinedInput', 'notchedOutline', 'focused', 'borderWidth'], 1)
+          }
         },
-        '&$error:after': {
-          borderBottom: `2px solid ${theme.Palette.error['05']}`,
-          borderBottomColor: theme.Palette.error['05']
+        notchedOutline: {
+          borderColor: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'outlinedInput', 'notchedOutline', 'borderColor'], _colorsModule.default.gray3)
         }
-      }
-    },
-    MuiFormLabel: {
-      root: {
-        color: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'standardInput', 'formLabel', 'color']),
-        '&$error': {
-          color: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'standardInput', 'formLabel', 'errorColor'], theme.Palette.error['05'])
+      },
+      MuiInput: {
+        input: {
+          border: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'standardInput', 'input', 'border']),
+          borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'input', 'borderRadius']),
+          fontFamily: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'standardInput', 'input', 'fontFamily'], (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'fontFamily'])),
+          fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'standardInput', 'input', 'fontSize'], (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'medium'], 14)),
+          color: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'standardInput', 'input', 'color']),
+          padding: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'standardInput', 'input', 'padding'])
         },
-        '&$focused': {
-          color: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'standardInput', 'formLabel', 'focusedColor'], _colorsModule.default.primary),
-          '&$error': {
-            color: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'standardInput', 'formLabel', 'focusedErrorColor'], theme.Palette.error['05'])
+        underline: {
+          '&:hover:not($disabled):not($focused):not($error):before': {
+            borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'standardInput', 'underline', 'hover', 'borderBottom'], "1px solid ".concat(_colorsModule.default.gray))
+          },
+          '&:hover:not($disabled):before': {
+            borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'standardInput', 'underline', 'hover', 'borderBottom'], "1px solid ".concat(_colorsModule.default.gray))
+          },
+          '&$disabled:before': {
+            borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'standardInput', 'underline', 'disabled', 'borderBottom'], "1px solid ".concat(_colorsModule.default.gray))
+          },
+          '&:before': {
+            borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'standardInput', 'underline', 'unfocused', 'borderBottom'], "1px solid ".concat(_colorsModule.default.gray))
+          },
+          '&$focused:after': {
+            borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'standardInput', 'underline', 'focused', 'borderBottom'], "2px solid ".concat(_colorsModule.default.primary))
+          },
+          '&:after': {
+            borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'standardInput', 'underline', 'base', 'borderBottom'], "2px solid ".concat(_colorsModule.default.primary))
+          },
+          '&$error:after': {
+            borderBottom: "2px solid ".concat(theme.Palette.error['05']),
+            borderBottomColor: theme.Palette.error['05']
           }
-        },
-        fontFamily: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'fontFamily']),
-        fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'standardInput', 'fontSize'], (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'medium'], 14)),
-        fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'standardInput', 'formLabel', 'fontWeight'])
-      }
-    },
-    MuiPopover: {
-      paper: {
-        borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'calendarPaper', 'borderRadius'], '10px'),
-        boxShadow: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'calendarPaper', 'boxShadow'], 'none'),
-        border: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'calendarPaper', 'border'], `1px solid ${_colorsModule.default.gray3}`),
-        color: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'calendarPaper', 'color'], _colorsModule.default.gray3)
-      }
-    },
-    MuiIconButton: {
-      root: {
-        padding: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'openerIcon', 'padding'], '5px')
-      }
-    },
-    MuiPickersBasePicker: {
-      pickerView: {
-        minWidth: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'pickerView', 'minWidth'], '290px')
-      }
-    },
-    MuiFormHelperText: {
-      root: {
-        fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'helperText', 'fontSize'], 12),
-        color: theme.Palette.error['05']
+        }
       },
-      contained: {
-        marginLeft: 0
+      MuiFormLabel: {
+        root: {
+          color: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'standardInput', 'formLabel', 'color']),
+          '&$error': {
+            color: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'standardInput', 'formLabel', 'errorColor'], theme.Palette.error['05'])
+          },
+          '&$focused': {
+            color: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'standardInput', 'formLabel', 'focusedColor'], _colorsModule.default.primary),
+            '&$error': {
+              color: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'standardInput', 'formLabel', 'focusedErrorColor'], theme.Palette.error['05'])
+            }
+          },
+          fontFamily: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'fontFamily']),
+          fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'standardInput', 'fontSize'], (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'medium'], 14)),
+          fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'standardInput', 'formLabel', 'fontWeight'])
+        }
+      },
+      MuiPopover: {
+        paper: {
+          borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'calendarPaper', 'borderRadius'], '10px'),
+          boxShadow: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'calendarPaper', 'boxShadow'], 'none'),
+          border: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'calendarPaper', 'border'], "1px solid ".concat(_colorsModule.default.gray3)),
+          color: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'calendarPaper', 'color'], _colorsModule.default.gray3)
+        }
+      },
+      MuiIconButton: {
+        root: {
+          padding: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'openerIcon', 'padding'], '5px')
+        }
+      },
+      MuiPickersBasePicker: {
+        pickerView: {
+          minWidth: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'pickerView', 'minWidth'], '290px')
+        }
+      },
+      MuiFormHelperText: {
+        root: {
+          fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'helperText', 'fontSize'], 12),
+          color: theme.Palette.error['05']
+        },
+        contained: {
+          marginLeft: 0
+        }
       }
     }
-  }
-});
+  });
+};
 exports.materialTheme = materialTheme;

package/dist/components/UTDialog/index.js

@@ -62,8 +62,8 @@ const UTDialog = _ref => {
     "aria-labelledby": "alert-dialog-title",
     "aria-describedby": "alert-dialog-description",
     classes: {
-      paper: `${classes.container} ${container}`,
-      root: `${classes.root} ${root}`
+      paper: "".concat(classes.container, " ").concat(container),
+      root: "".concat(classes.root, " ").concat(root)
     },
     PaperProps: {
       elevation
@@ -73,23 +73,23 @@ const UTDialog = _ref => {
     TransitionProps: TransitionProps
   }, dialogProps), title && /*#__PURE__*/_react.default.createElement(_DialogTitle.default, {
     disableTypography: disableTypography,
-    className: `${classes.mainTitle} ${whiteTitle && classes.whiteTitle} ${mainTitle}`,
+    className: "".concat(classes.mainTitle, " ").concat(whiteTitle && classes.whiteTitle, " ").concat(mainTitle),
     id: "alert-dialog-title"
   }, title, withCloseButton && /*#__PURE__*/_react.default.createElement(_UTButton.default, {
     classNames: {
-      icon: `${classes.closeIcon} ${closeIcon}`,
-      root: `${classes.closeButton} ${whiteTitle && classes.whiteCloseButton} ${closeButton}`
+      icon: "".concat(classes.closeIcon, " ").concat(closeIcon),
+      root: "".concat(classes.closeButton, " ").concat(whiteTitle && classes.whiteCloseButton, " ").concat(closeButton)
     },
     Icon: CloseIcon,
     onClick: onRequestClose,
     variant: "text"
   })), /*#__PURE__*/_react.default.createElement(_DialogContent.default, {
     name: contentName,
-    className: `${classes.content} ${content}`
+    className: "".concat(classes.content, " ").concat(content)
   }, children), warningAlert && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({}, alertConfig, {
-    className: `${classes.warning} ${warning}`
+    className: "".concat(classes.warning, " ").concat(warning)
   }), warningAlert), (cancelButton || acceptButton) && /*#__PURE__*/_react.default.createElement(_DialogActions.default, {
-    className: `${classes.dialogActions} ${dialogActions}`
+    className: "".concat(classes.dialogActions, " ").concat(dialogActions)
   }, FooterComponents, cancelButton && /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
     colorTheme: "secondary",
     variant: "text"

package/dist/components/UTDialog/theme.js

@@ -9,6 +9,7 @@ var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.
 var _classesUtils = require("../../utils/classesUtils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const retrieveStyle = _ref => {
+  var _theme$UTDialog;
   let {
     theme
   } = _ref;
@@ -65,7 +66,7 @@ const retrieveStyle = _ref => {
     },
     closeButton: {
       padding: (0, _seamlessImmutable.getIn)(theme, ['UTDialog', 'closeButton', 'padding']),
-      position: (0, _classesUtils.withImportant)(theme?.UTDialog?.closeButton?.position || 'absolute'),
+      position: (0, _classesUtils.withImportant)((theme === null || theme === void 0 || (_theme$UTDialog = theme.UTDialog) === null || _theme$UTDialog === void 0 || (_theme$UTDialog = _theme$UTDialog.closeButton) === null || _theme$UTDialog === void 0 ? void 0 : _theme$UTDialog.position) || 'absolute'),
       right: (0, _seamlessImmutable.getIn)(theme, ['UTDialog', 'closeButton', 'right'], '5px'),
       top: (0, _seamlessImmutable.getIn)(theme, ['UTDialog', 'closeButton', 'top'], '5px')
     },

package/dist/components/UTEmojiPicker/index.js

@@ -49,7 +49,7 @@ const UTEmojiPicker = _ref => {
       if (closeOnPick) setIsOpen(false);
       handlePick(emojiData);
     },
-    className: `${_stylesModule.default.emoji} ${classes.emoji}`
+    className: "".concat(_stylesModule.default.emoji, " ").concat(classes.emoji)
   }, (0, _utils.getEmoji)(emojiData)), [handlePick]);
   const groupEmojiRenderer = (0, _react.useCallback)(_ref2 => {
     let {
@@ -58,13 +58,13 @@ const UTEmojiPicker = _ref => {
     } = _ref2;
     const isActive = key === activeGroup;
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: `${_stylesModule.default.groupItem} ${classes.groupItem}`,
+      className: "".concat(_stylesModule.default.groupItem, " ").concat(classes.groupItem),
       key: key,
       onClick: () => setActiveGroup(isActive ? null : key),
       role: "button",
       "aria-label": "group"
     }, /*#__PURE__*/_react.default.createElement(Icon, {
-      className: isActive ? `${_stylesModule.default.activeIcon} ${classes.activeIcon}` : ''
+      className: isActive ? "".concat(_stylesModule.default.activeIcon, " ").concat(classes.activeIcon) : ''
     }));
   }, [activeGroup]);
   return /*#__PURE__*/_react.default.createElement(_ClickAwayListener.default, {
@@ -75,16 +75,11 @@ const UTEmojiPicker = _ref => {
     className: classes.emojiButton,
     onClick: toggleOpen
   }, buttonEmoji), /*#__PURE__*/_react.default.createElement("div", {
-    className: `
-            ${_stylesModule.default.container}
-            ${classes.container}
-            ${_stylesModule.default[popperPosition]}
-            ${!isOpen && _stylesModule.default.hiddenPicker}
-          `
+    className: "\n            ".concat(_stylesModule.default.container, "\n            ").concat(classes.container, "\n            ").concat(_stylesModule.default[popperPosition], "\n            ").concat(!isOpen && _stylesModule.default.hiddenPicker, "\n          ")
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: `${_stylesModule.default.groups} ${classes.groups}`
+    className: "".concat(_stylesModule.default.groups, " ").concat(classes.groups)
   }, groups.map(groupEmojiRenderer)), /*#__PURE__*/_react.default.createElement("div", {
-    className: `${_stylesModule.default.listContainer} ${classes.listContainer}`
+    className: "".concat(_stylesModule.default.listContainer, " ").concat(classes.listContainer)
   }, /*#__PURE__*/_react.default.createElement(_.UTVirtualizedList, _extends({
     data: activeGroup ? groups.find(_ref3 => {
       let {