@widergy/energy-ui 3.22.3 → 3.22.4

package/dist/components/UTEmojiPicker/theme.js

@@ -7,46 +7,47 @@ 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$UTEmojiPicker, _theme$UTEmojiPicker2, _theme$UTEmojiPicker3, _theme$UTEmojiPicker4, _theme$UTEmojiPicker5, _theme$UTEmojiPicker6, _theme$UTEmojiPicker7, _theme$UTEmojiPicker8, _theme$UTEmojiPicker9, _theme$UTEmojiPicker10, _theme$UTEmojiPicker11, _theme$UTEmojiPicker12, _theme$UTEmojiPicker13, _theme$UTEmojiPicker14, _theme$UTEmojiPicker15, _theme$UTEmojiPicker16, _theme$UTEmojiPicker17, _theme$UTEmojiPicker18, _theme$UTEmojiPicker19, _theme$UTEmojiPicker20, _theme$UTEmojiPicker21, _theme$UTEmojiPicker22, _theme$UTEmojiPicker23;
   let {
     theme
   } = _ref;
   return {
     container: {
-      backgroundColor: theme?.UTEmojiPicker?.container?.backgroundColor || _colorsModule.default.white,
-      borderRadius: theme?.UTEmojiPicker?.container?.borderRadius,
-      bottom: theme?.UTEmojiPicker?.container?.bottom,
-      boxShadow: theme?.UTEmojiPicker?.container?.boxShadow || '0px 3px 6px #E4E6EA',
-      left: theme?.UTEmojiPicker?.container?.left,
-      right: theme?.UTEmojiPicker?.container?.right,
-      top: theme?.UTEmojiPicker?.container?.top
+      backgroundColor: (theme === null || theme === void 0 || (_theme$UTEmojiPicker = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker === void 0 || (_theme$UTEmojiPicker = _theme$UTEmojiPicker.container) === null || _theme$UTEmojiPicker === void 0 ? void 0 : _theme$UTEmojiPicker.backgroundColor) || _colorsModule.default.white,
+      borderRadius: theme === null || theme === void 0 || (_theme$UTEmojiPicker2 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker2 === void 0 || (_theme$UTEmojiPicker2 = _theme$UTEmojiPicker2.container) === null || _theme$UTEmojiPicker2 === void 0 ? void 0 : _theme$UTEmojiPicker2.borderRadius,
+      bottom: theme === null || theme === void 0 || (_theme$UTEmojiPicker3 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker3 === void 0 || (_theme$UTEmojiPicker3 = _theme$UTEmojiPicker3.container) === null || _theme$UTEmojiPicker3 === void 0 ? void 0 : _theme$UTEmojiPicker3.bottom,
+      boxShadow: (theme === null || theme === void 0 || (_theme$UTEmojiPicker4 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker4 === void 0 || (_theme$UTEmojiPicker4 = _theme$UTEmojiPicker4.container) === null || _theme$UTEmojiPicker4 === void 0 ? void 0 : _theme$UTEmojiPicker4.boxShadow) || '0px 3px 6px #E4E6EA',
+      left: theme === null || theme === void 0 || (_theme$UTEmojiPicker5 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker5 === void 0 || (_theme$UTEmojiPicker5 = _theme$UTEmojiPicker5.container) === null || _theme$UTEmojiPicker5 === void 0 ? void 0 : _theme$UTEmojiPicker5.left,
+      right: theme === null || theme === void 0 || (_theme$UTEmojiPicker6 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker6 === void 0 || (_theme$UTEmojiPicker6 = _theme$UTEmojiPicker6.container) === null || _theme$UTEmojiPicker6 === void 0 ? void 0 : _theme$UTEmojiPicker6.right,
+      top: theme === null || theme === void 0 || (_theme$UTEmojiPicker7 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker7 === void 0 || (_theme$UTEmojiPicker7 = _theme$UTEmojiPicker7.container) === null || _theme$UTEmojiPicker7 === void 0 ? void 0 : _theme$UTEmojiPicker7.top
     },
     listContainer: {
-      height: theme?.UTEmojiPicker?.listContainer?.height || 216,
-      width: theme?.UTEmojiPicker?.listContainer?.width || 336
+      height: (theme === null || theme === void 0 || (_theme$UTEmojiPicker8 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker8 === void 0 || (_theme$UTEmojiPicker8 = _theme$UTEmojiPicker8.listContainer) === null || _theme$UTEmojiPicker8 === void 0 ? void 0 : _theme$UTEmojiPicker8.height) || 216,
+      width: (theme === null || theme === void 0 || (_theme$UTEmojiPicker9 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker9 === void 0 || (_theme$UTEmojiPicker9 = _theme$UTEmojiPicker9.listContainer) === null || _theme$UTEmojiPicker9 === void 0 ? void 0 : _theme$UTEmojiPicker9.width) || 336
     },
     emoji: {
-      borderRadius: theme?.UTEmojiPicker?.emoji?.borderRadius || 4,
-      fontSize: theme?.UTEmojiPicker?.emoji?.fontSize || 20,
-      height: theme?.UTEmojiPicker?.emoji?.height || 32,
-      margin: theme?.UTEmojiPicker?.emoji?.margin || 4,
-      width: theme?.UTEmojiPicker?.emoji?.width || 32,
+      borderRadius: (theme === null || theme === void 0 || (_theme$UTEmojiPicker10 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker10 === void 0 || (_theme$UTEmojiPicker10 = _theme$UTEmojiPicker10.emoji) === null || _theme$UTEmojiPicker10 === void 0 ? void 0 : _theme$UTEmojiPicker10.borderRadius) || 4,
+      fontSize: (theme === null || theme === void 0 || (_theme$UTEmojiPicker11 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker11 === void 0 || (_theme$UTEmojiPicker11 = _theme$UTEmojiPicker11.emoji) === null || _theme$UTEmojiPicker11 === void 0 ? void 0 : _theme$UTEmojiPicker11.fontSize) || 20,
+      height: (theme === null || theme === void 0 || (_theme$UTEmojiPicker12 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker12 === void 0 || (_theme$UTEmojiPicker12 = _theme$UTEmojiPicker12.emoji) === null || _theme$UTEmojiPicker12 === void 0 ? void 0 : _theme$UTEmojiPicker12.height) || 32,
+      margin: (theme === null || theme === void 0 || (_theme$UTEmojiPicker13 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker13 === void 0 || (_theme$UTEmojiPicker13 = _theme$UTEmojiPicker13.emoji) === null || _theme$UTEmojiPicker13 === void 0 ? void 0 : _theme$UTEmojiPicker13.margin) || 4,
+      width: (theme === null || theme === void 0 || (_theme$UTEmojiPicker14 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker14 === void 0 || (_theme$UTEmojiPicker14 = _theme$UTEmojiPicker14.emoji) === null || _theme$UTEmojiPicker14 === void 0 ? void 0 : _theme$UTEmojiPicker14.width) || 32,
       '&:hover': {
-        backgroundColor: theme?.UTEmojiPicker?.emoji?.hover?.backgroundColor || '#E9F0FD'
+        backgroundColor: (theme === null || theme === void 0 || (_theme$UTEmojiPicker15 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker15 === void 0 || (_theme$UTEmojiPicker15 = _theme$UTEmojiPicker15.emoji) === null || _theme$UTEmojiPicker15 === void 0 || (_theme$UTEmojiPicker15 = _theme$UTEmojiPicker15.hover) === null || _theme$UTEmojiPicker15 === void 0 ? void 0 : _theme$UTEmojiPicker15.backgroundColor) || '#E9F0FD'
       }
     },
     groupItem: {
-      height: theme?.UTEmojiPicker?.groupItem?.height || 40,
-      fill: theme?.UTEmojiPicker?.groupItem?.color || '#677489',
-      stroke: theme?.UTEmojiPicker?.groupItem?.color || '#677489'
+      height: (theme === null || theme === void 0 || (_theme$UTEmojiPicker16 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker16 === void 0 || (_theme$UTEmojiPicker16 = _theme$UTEmojiPicker16.groupItem) === null || _theme$UTEmojiPicker16 === void 0 ? void 0 : _theme$UTEmojiPicker16.height) || 40,
+      fill: (theme === null || theme === void 0 || (_theme$UTEmojiPicker17 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker17 === void 0 || (_theme$UTEmojiPicker17 = _theme$UTEmojiPicker17.groupItem) === null || _theme$UTEmojiPicker17 === void 0 ? void 0 : _theme$UTEmojiPicker17.color) || '#677489',
+      stroke: (theme === null || theme === void 0 || (_theme$UTEmojiPicker18 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker18 === void 0 || (_theme$UTEmojiPicker18 = _theme$UTEmojiPicker18.groupItem) === null || _theme$UTEmojiPicker18 === void 0 ? void 0 : _theme$UTEmojiPicker18.color) || '#677489'
     },
     activeIcon: {
-      backgroundColor: theme?.UTEmojiPicker?.groupItem?.active?.backgroundColor || '#E9F0FD',
-      borderRadius: theme?.UTEmojiPicker?.groupItem?.active?.borderRadius || 5,
-      stroke: theme?.UTEmojiPicker?.groupItem?.active?.color || '#2b70fb'
+      backgroundColor: (theme === null || theme === void 0 || (_theme$UTEmojiPicker19 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker19 === void 0 || (_theme$UTEmojiPicker19 = _theme$UTEmojiPicker19.groupItem) === null || _theme$UTEmojiPicker19 === void 0 || (_theme$UTEmojiPicker19 = _theme$UTEmojiPicker19.active) === null || _theme$UTEmojiPicker19 === void 0 ? void 0 : _theme$UTEmojiPicker19.backgroundColor) || '#E9F0FD',
+      borderRadius: (theme === null || theme === void 0 || (_theme$UTEmojiPicker20 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker20 === void 0 || (_theme$UTEmojiPicker20 = _theme$UTEmojiPicker20.groupItem) === null || _theme$UTEmojiPicker20 === void 0 || (_theme$UTEmojiPicker20 = _theme$UTEmojiPicker20.active) === null || _theme$UTEmojiPicker20 === void 0 ? void 0 : _theme$UTEmojiPicker20.borderRadius) || 5,
+      stroke: (theme === null || theme === void 0 || (_theme$UTEmojiPicker21 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker21 === void 0 || (_theme$UTEmojiPicker21 = _theme$UTEmojiPicker21.groupItem) === null || _theme$UTEmojiPicker21 === void 0 || (_theme$UTEmojiPicker21 = _theme$UTEmojiPicker21.active) === null || _theme$UTEmojiPicker21 === void 0 ? void 0 : _theme$UTEmojiPicker21.color) || '#2b70fb'
     },
     groups: {
-      borderBottom: theme?.UTEmojiPicker?.groups?.borderBottom || '1px solid #E4E6EA',
-      padding: theme?.UTEmojiPicker?.groups?.padding || 8
+      borderBottom: (theme === null || theme === void 0 || (_theme$UTEmojiPicker22 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker22 === void 0 || (_theme$UTEmojiPicker22 = _theme$UTEmojiPicker22.groups) === null || _theme$UTEmojiPicker22 === void 0 ? void 0 : _theme$UTEmojiPicker22.borderBottom) || '1px solid #E4E6EA',
+      padding: (theme === null || theme === void 0 || (_theme$UTEmojiPicker23 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker23 === void 0 || (_theme$UTEmojiPicker23 = _theme$UTEmojiPicker23.groups) === null || _theme$UTEmojiPicker23 === void 0 ? void 0 : _theme$UTEmojiPicker23.padding) || 8
     }
   };
 };

package/dist/components/UTExternalLink/index.js

@@ -21,7 +21,7 @@ const UTExternalLink = _ref => {
     href: url,
     target: "_blank",
     rel: "noopener noreferrer",
-    className: `${classes.root} ${className}`,
+    className: "".concat(classes.root, " ").concat(className),
     onClick: openProps && (event => {
       event.preventDefault();
       const {

package/dist/components/UTExternalLink/theme.js

@@ -7,8 +7,9 @@ exports.variantsColorTheme = exports.retrieveStyle = void 0;
 var _classesUtils = require("../../utils/classesUtils");
 var _constants = require("./constants");
 const variantsColorTheme = (colorTheme, theme) => {
+  var _theme$Palette$action;
   const actionColorName = _constants.COLORS_MAPPER[colorTheme] || _constants.COLORS_MAPPER[_constants.DEFAULT_PROPS.colorTheme];
-  const actionTheme = theme.Palette.actions?.[actionColorName] || theme.Palette[actionColorName];
+  const actionTheme = ((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action[actionColorName]) || theme.Palette[actionColorName];
   return actionTheme['05'];
 };
 exports.variantsColorTheme = variantsColorTheme;

package/dist/components/UTFileInput/layout.js

@@ -68,30 +68,24 @@ class UTFileInput extends _react.PureComponent {
     } = this.props;
     const UploadImage = uploadIcon;
     return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-      className: `
-            ${_stylesModule.default.inputContainer}
-            ${this.state.hasDrag && _stylesModule.default.inputContainerDrag}
-            ${loading && _stylesModule.default.inputContainerLoading}
-            ${classes.container}
-            ${containerClassname}
-          `,
+      className: "\n            ".concat(_stylesModule.default.inputContainer, "\n            ").concat(this.state.hasDrag && _stylesModule.default.inputContainerDrag, "\n            ").concat(loading && _stylesModule.default.inputContainerLoading, "\n            ").concat(classes.container, "\n            ").concat(containerClassname, "\n          "),
       onDragLeave: this.handleDragLeave,
       onDragOver: this.handleDragOver,
       onDrop: this.handleOnDrop
     }, loading ? /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
       colorTheme: "gray",
-      className: `${_stylesModule.default.loadingLabel} ${loadingTextClassname}`
+      className: "".concat(_stylesModule.default.loadingLabel, " ").concat(loadingTextClassname)
     }, uploadingText), /*#__PURE__*/_react.default.createElement("div", {
       className: _stylesModule.default.loading
     })) : /*#__PURE__*/_react.default.createElement("div", {
       className: _stylesModule.default.insideContainer
     }, Icon || /*#__PURE__*/_react.default.createElement(UploadImage, {
-      className: `${_stylesModule.default.icon} ${classes.icon}`
+      className: "".concat(_stylesModule.default.icon, " ").concat(classes.icon)
     }), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
       variant: "small",
-      className: `${_stylesModule.default.label} ${classes.fileInputLabel}`
+      className: "".concat(_stylesModule.default.label, " ").concat(classes.fileInputLabel)
     }, label)), /*#__PURE__*/_react.default.createElement("input", {
-      className: `${_stylesModule.default.input} ${inputClassname}`,
+      className: "".concat(_stylesModule.default.input, " ").concat(inputClassname),
       accept: fileType,
       type: "file",
       onChange: onChange,

package/dist/components/UTGoogleAutocomplete/theme.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.retrieveStyle = void 0;
 const retrieveStyle = _ref => {
+  var _theme$Palette$action;
   let {
     theme
   } = _ref;
@@ -43,7 +44,7 @@ const retrieveStyle = _ref => {
       padding: '12px 0'
     },
     resultIcon: {
-      color: theme.Palette.actions?.neutral['05'] || theme.Palette.neutral['05'],
+      color: ((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action.neutral['05']) || theme.Palette.neutral['05'],
       minWidth: '20px'
     }
   };

package/dist/components/UTHeader/index.js

@@ -61,7 +61,7 @@ const UTHeader = _ref => {
   const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(themeClasses, classNames), [classNames]);
   const mainAction = actions.find(action => action.main);
   const moreActions = actions.filter((_action, index) => index !== actions.indexOf(mainAction));
-  const MainIcon = mainAction?.Icon || Edit;
+  const MainIcon = (mainAction === null || mainAction === void 0 ? void 0 : mainAction.Icon) || Edit;
   const hasHeader = tagline || title || subtitle || requiredFieldInfo || helpText || banner;
   const [menuAnchor, setMenuAnchor] = (0, _react.useState)();
   const openMenu = event => setMenuAnchor(event.target);
@@ -98,11 +98,11 @@ const UTHeader = _ref => {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes.outerContainer
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: `${_stylesModule.default.container} ${!hasHeader && _stylesModule.default.containerMargin} `
+    className: "".concat(_stylesModule.default.container, " ").concat(!hasHeader && _stylesModule.default.containerMargin, " ")
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: `${_stylesModule.default.header} ${banner?.text && _stylesModule.default.bottomPadding}`
+    className: "".concat(_stylesModule.default.header, " ").concat((banner === null || banner === void 0 ? void 0 : banner.text) && _stylesModule.default.bottomPadding)
   }, tagline && !isLastStep && Tagline, /*#__PURE__*/_react.default.createElement("div", {
-    className: `${_stylesModule.default.titles} ${classes.titles}`
+    className: "".concat(_stylesModule.default.titles, " ").concat(classes.titles)
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.titleAndActionsContainer
   }, TitleIcon && /*#__PURE__*/_react.default.createElement(TitleIcon, {
@@ -133,7 +133,7 @@ const UTHeader = _ref => {
     }),
     menuPlacement: "bottom-end",
     onClose: closeMenu
-  })))), subtitle && Subtitle), requiredFieldInfo && RequiredFieldInfo, helpText && HelpText), banner?.text && /*#__PURE__*/_react.default.createElement(_UTBanner.default, {
+  })))), subtitle && Subtitle), requiredFieldInfo && RequiredFieldInfo, helpText && HelpText), (banner === null || banner === void 0 ? void 0 : banner.text) && /*#__PURE__*/_react.default.createElement(_UTBanner.default, {
     Icon: banner.Icon,
     iconProps: {
       height: BANNER_ICON_SIZE,

package/dist/components/UTHeader/theme.js

@@ -5,15 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.retrieveStyle = void 0;
 const retrieveStyle = _ref => {
+  var _theme$UTWorkflowCont, _theme$Palette$action;
   let {
     theme
   } = _ref;
   return {
     titleIcon: {
-      color: theme.UTWorkflowContainer?.titleIcon?.color
+      color: (_theme$UTWorkflowCont = theme.UTWorkflowContainer) === null || _theme$UTWorkflowCont === void 0 || (_theme$UTWorkflowCont = _theme$UTWorkflowCont.titleIcon) === null || _theme$UTWorkflowCont === void 0 ? void 0 : _theme$UTWorkflowCont.color
     },
     mainAction: {
-      fill: theme.Palette.actions?.accent['04']
+      fill: (_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action.accent['04']
     }
   };
 };

package/dist/components/UTIcon/theme.js

@@ -9,12 +9,13 @@ var _constants = require("./constants");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const retrieveColor = _ref => {
+  var _theme$Palette$action;
   let {
     colorTheme,
     shade,
     theme
   } = _ref;
-  const colorThemeDefinition = theme.Palette[colorTheme] || theme.Palette.actions?.[colorTheme] || theme.Palette[_constants.DEFAULT_COLOR_THEME];
+  const colorThemeDefinition = theme.Palette[colorTheme] || ((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action[colorTheme]) || theme.Palette[_constants.DEFAULT_COLOR_THEME];
   const colorShade = shade || (0, _componentUtils.getDefaultColorShade)(colorTheme);
   return colorThemeDefinition[colorShade];
 };
@@ -82,11 +83,12 @@ const getClassNames = _ref3 => {
     size,
     variant
   } = _ref3;
-  const variantStyle = VARIANT_STYLE_MAPPER(classes)[`${colorTheme || color}${(0, _componentUtils.capitalize)(variant)}`];
-  return `${className} ${_stylesModule.default.icon} ${area && `${_stylesModule.default.withArea} ${variantStyle} ${_stylesModule.default[`size${size}`]}`}`;
+  const variantStyle = VARIANT_STYLE_MAPPER(classes)["".concat(colorTheme || color).concat((0, _componentUtils.capitalize)(variant))];
+  return "".concat(className, " ").concat(_stylesModule.default.icon, " ").concat(area && "".concat(_stylesModule.default.withArea, " ").concat(variantStyle, " ").concat(_stylesModule.default["size".concat(size)]));
 };
 exports.getClassNames = getClassNames;
 const retrieveStyle = _ref4 => {
+  var _theme$Palette$action2, _theme$Palette$action3, _theme$Palette$action4;
   let {
     color,
     colorTheme,
@@ -98,24 +100,24 @@ const retrieveStyle = _ref4 => {
     theme,
     shade
   });
-  const border = `2px solid ${borderColor}`;
+  const border = "2px solid ".concat(borderColor);
   const defaultBackgrounds = {
-    accent: theme.Palette.actions?.accent['01'] || theme.Palette.accent['01'],
+    accent: ((_theme$Palette$action2 = theme.Palette.actions) === null || _theme$Palette$action2 === void 0 ? void 0 : _theme$Palette$action2.accent['01']) || theme.Palette.accent['01'],
     dark: theme.Palette.light['03'],
     error: theme.Palette.error['01'],
     gray: theme.Palette.light['03'],
     information: theme.Palette.information['01'],
     light: theme.Palette.light['03'],
-    negative: theme.Palette.actions?.negative['01'] || theme.Palette.negative['01'],
-    neutral: theme.Palette.actions?.neutral['01'] || theme.Palette.neutral['01'],
+    negative: ((_theme$Palette$action3 = theme.Palette.actions) === null || _theme$Palette$action3 === void 0 ? void 0 : _theme$Palette$action3.negative['01']) || theme.Palette.negative['01'],
+    neutral: ((_theme$Palette$action4 = theme.Palette.actions) === null || _theme$Palette$action4 === void 0 ? void 0 : _theme$Palette$action4.neutral['01']) || theme.Palette.neutral['01'],
     success: theme.Palette.success['01'],
     warning: theme.Palette.warning['01']
   };
   const variantStyles = Object.keys(defaultBackgrounds).reduce((acc, type) => {
-    acc[`${type}Default`] = {
+    acc["".concat(type, "Default")] = {
       backgroundColor: defaultBackgrounds[type]
     };
-    acc[`${type}Outlined`] = {
+    acc["".concat(type, "Outlined")] = {
       border
     };
     return acc;

package/dist/components/UTIconButton/index.js

@@ -38,7 +38,7 @@ class UTIconButton extends _react.Component {
     const size = small ? 'small' : large ? 'large' : 'medium';
     const classNames = (0, _style.retrieveClassNamesFromProps)(variants, classes, this.props);
     return loading ? /*#__PURE__*/_react.default.createElement("div", {
-      className: `${_stylesModule.default.loadingContainer} ${loadingClassName}`
+      className: "".concat(_stylesModule.default.loadingContainer, " ").concat(loadingClassName)
     }, /*#__PURE__*/_react.default.createElement(_CircularProgress.default, {
       size: 24,
       className: classes.loading
@@ -58,7 +58,7 @@ class UTIconButton extends _react.Component {
       autoFocus: autoFocus,
       style: style,
       classes: {
-        root: `${classNames} ${small ? classes.small : large && classes.large} ${className}`
+        root: "".concat(classNames, " ").concat(small ? classes.small : large && classes.large, " ").concat(className)
       }
     }, children);
   }

package/dist/components/UTImageRadio/components/ImageRadioCard/index.js

@@ -52,17 +52,17 @@ const ImageRadioCard = _ref => {
     src: imageUrl
   }), [imageUrl, selectedImageUrl]);
   const Content = () => /*#__PURE__*/_react.default.createElement(_UTTouchableWithoutFeedback.default, {
-    className: `${_stylesModule.default.container} ${classes.containerCard} ${isSelected && `${_stylesModule.default.isSelected} ${classes.isSelected}`} ${oneColumn && _stylesModule.default.oneColumn} ${compact && _stylesModule.default.compact} ${disabled && _stylesModule.default.disabled} ${transparent && _stylesModule.default.transparent} ${vertical && classes.vertical} ${tooltip && _stylesModule.default.contentWithTooltip} `,
+    className: "".concat(_stylesModule.default.container, " ").concat(classes.containerCard, " ").concat(isSelected && "".concat(_stylesModule.default.isSelected, " ").concat(classes.isSelected), " ").concat(oneColumn && _stylesModule.default.oneColumn, " ").concat(compact && _stylesModule.default.compact, " ").concat(disabled && _stylesModule.default.disabled, " ").concat(transparent && _stylesModule.default.transparent, " ").concat(vertical && classes.vertical, " ").concat(tooltip && _stylesModule.default.contentWithTooltip, " "),
     onClick: handleOnChange
   }, (imageUrl || ImageComponent) && /*#__PURE__*/_react.default.createElement("div", {
-    className: `${classes.image} ${_stylesModule.default.image}`
+    className: "".concat(classes.image, " ").concat(_stylesModule.default.image)
   }, imageUrl && renderImage(isSelected), ImageComponent && /*#__PURE__*/_react.default.createElement(ImageComponent, null)), /*#__PURE__*/_react.default.createElement("div", {
-    className: `${_stylesModule.default.containerText} ${classes.containerText}`
+    className: "".concat(_stylesModule.default.containerText, " ").concat(classes.containerText)
   }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    className: `${classes.name} ${_stylesModule.default.text} ${isSelected && !transparent && classes.selectedText}`
+    className: "".concat(classes.name, " ").concat(_stylesModule.default.text, " ").concat(isSelected && !transparent && classes.selectedText)
   }, name), description && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     weight: "light",
-    className: `${classes.description} ${_stylesModule.default.text} ${isSelected && _stylesModule.default.selectedText}`
+    className: "".concat(classes.description, " ").concat(_stylesModule.default.text, " ").concat(isSelected && _stylesModule.default.selectedText)
   }, description)));
   return tooltip ? /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
     content: tooltip,
@@ -70,7 +70,7 @@ const ImageRadioCard = _ref => {
       hideOnClick: true
     }
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: `${_stylesModule.default.contentContainer} ${oneColumn ? _stylesModule.default.oneColumn : _stylesModule.default.twoColumns} `
+    className: "".concat(_stylesModule.default.contentContainer, " ").concat(oneColumn ? _stylesModule.default.oneColumn : _stylesModule.default.twoColumns, " ")
   }, /*#__PURE__*/_react.default.createElement(Content, null))) : /*#__PURE__*/_react.default.createElement(Content, null);
 };
 ImageRadioCard.propTypes = {

package/dist/components/UTImageRadio/index.js

@@ -44,15 +44,15 @@ const UTImageRadio = _ref => {
     ref: containerRef,
     width: containerWidth
   } = (0, _energyHooks.useComponentDimensions)();
-  const alignToLeft = leftAligned || field?.configuration.left_aligned;
+  const alignToLeft = leftAligned || (field === null || field === void 0 ? void 0 : field.configuration.left_aligned);
   const classes = (0, _classesUtils.mergeClasses)(themeClasses, classNames);
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     ref: containerRef,
-    className: `${_stylesModule.default.container} ${classes.container} ${alignToLeft && _stylesModule.default.leftAligned}`
+    className: "".concat(_stylesModule.default.container, " ").concat(classes.container, " ").concat(alignToLeft && _stylesModule.default.leftAligned)
   }, mutableOptions.sort(_utils.sortOptions).map(item => /*#__PURE__*/_react.default.createElement(_ImageRadioCard.default, {
     key: item.value,
     option: item,
-    variant: field?.configuration,
+    variant: field === null || field === void 0 ? void 0 : field.configuration,
     compact: compact,
     disabled: disabled,
     oneColumn: oneColumn || containerWidth < oneColumnBreakpoint,

package/dist/components/UTImageRadio/theme.js

@@ -11,6 +11,7 @@ var _constants = require("./constants");
 var _utils = require("./utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const retrieveStyle = _ref => {
+  var _theme$UTImageRadio, _theme$UTImageRadio2, _theme$UTImageRadio3, _theme$UTImageRadio4, _theme$UTImageRadio5, _theme$UTImageRadio6, _theme$UTImageRadio7, _theme$UTImageRadio8, _theme$UTImageRadio9, _theme$UTImageRadio10, _theme$UTImageRadio11;
   let {
     theme
   } = _ref;
@@ -18,10 +19,10 @@ const retrieveStyle = _ref => {
   return {
     containerCard: {
       backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTImageRadio', 'containerCard', 'backgroundColor'], _colorsModule.default.imageRadioBackground),
-      gap: (0, _seamlessImmutable.getIn)(theme, ['UTImageRadio', 'containerCard', 'gap'], `${_constants.defaultGridGap}px`),
+      gap: (0, _seamlessImmutable.getIn)(theme, ['UTImageRadio', 'containerCard', 'gap'], "".concat(_constants.defaultGridGap, "px")),
       padding: (0, _utils.standarizePadding)((0, _seamlessImmutable.getIn)(theme, ['UTImageRadio', 'containerCard', 'padding'], '24px')),
       height: (0, _seamlessImmutable.getIn)(theme, ['UTImageRadio', 'containerCard', 'height'], 'fit-content'),
-      width: (0, _seamlessImmutable.getIn)(theme, ['UTImageRadio', 'containerCard', 'width'], `calc(50% - 2 * ${_constants.defaultGridGap}px)`),
+      width: (0, _seamlessImmutable.getIn)(theme, ['UTImageRadio', 'containerCard', 'width'], "calc(50% - 2 * ".concat(_constants.defaultGridGap, "px)")),
       '&:hover': {
         backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTImageRadio', 'containerCard', 'hover', 'backgroundColor']),
         filter: (0, _seamlessImmutable.getIn)(theme, ['UTImageRadio', 'containerCard', 'hover', 'filter'], 'brightness(0.95)')
@@ -33,7 +34,7 @@ const retrieveStyle = _ref => {
       pointerEvents: (0, _seamlessImmutable.getIn)(theme, ['UTImageRadio', 'isSelected', 'pointerEvents'], 'none')
     },
     containerText: {
-      width: (0, _classesUtils.withImportant)(theme?.UTImageRadio?.containerText?.width || '100%'),
+      width: (0, _classesUtils.withImportant)((theme === null || theme === void 0 || (_theme$UTImageRadio = theme.UTImageRadio) === null || _theme$UTImageRadio === void 0 || (_theme$UTImageRadio = _theme$UTImageRadio.containerText) === null || _theme$UTImageRadio === void 0 ? void 0 : _theme$UTImageRadio.width) || '100%'),
       [tabletMobile]: {
         width: '100%'
       }
@@ -45,27 +46,27 @@ const retrieveStyle = _ref => {
     vertical: {
       flexDirection: (0, _seamlessImmutable.getIn)(theme, ['UTImageRadio', 'vertical', 'flexDirection'], 'column'),
       border: (0, _seamlessImmutable.getIn)(theme, ['UTImageRadio', 'vertical', 'border'], '2px solid transparent'),
-      borderWidth: (0, _classesUtils.withImportant)(theme?.UTImageRadio?.vertical?.borderWidth || '2px'),
+      borderWidth: (0, _classesUtils.withImportant)((theme === null || theme === void 0 || (_theme$UTImageRadio2 = theme.UTImageRadio) === null || _theme$UTImageRadio2 === void 0 || (_theme$UTImageRadio2 = _theme$UTImageRadio2.vertical) === null || _theme$UTImageRadio2 === void 0 ? void 0 : _theme$UTImageRadio2.borderWidth) || '2px'),
       alignItems: (0, _seamlessImmutable.getIn)(theme, ['UTImageRadio', 'vertical', 'alignItems'], 'center'),
       textAlign: (0, _seamlessImmutable.getIn)(theme, ['UTImageRadio', 'vertical', 'textAlign'], 'center'),
-      width: (0, _classesUtils.withImportant)(theme?.UTImageRadio?.vertical?.width || 'fit-content'),
+      width: (0, _classesUtils.withImportant)((theme === null || theme === void 0 || (_theme$UTImageRadio3 = theme.UTImageRadio) === null || _theme$UTImageRadio3 === void 0 || (_theme$UTImageRadio3 = _theme$UTImageRadio3.vertical) === null || _theme$UTImageRadio3 === void 0 ? void 0 : _theme$UTImageRadio3.width) || 'fit-content'),
       pointerEvents: (0, _seamlessImmutable.getIn)(theme, ['UTImageRadio', 'vertical', 'pointerEvents'], 'auto'),
       '&:hover': {
-        border: (0, _classesUtils.withImportant)(theme?.UTImageRadio?.vertical?.border || `2px solid ${_colorsModule.default.imageRadioBackground}`)
+        border: (0, _classesUtils.withImportant)((theme === null || theme === void 0 || (_theme$UTImageRadio4 = theme.UTImageRadio) === null || _theme$UTImageRadio4 === void 0 || (_theme$UTImageRadio4 = _theme$UTImageRadio4.vertical) === null || _theme$UTImageRadio4 === void 0 ? void 0 : _theme$UTImageRadio4.border) || "2px solid ".concat(_colorsModule.default.imageRadioBackground))
       }
     },
     description: {
-      color: (0, _classesUtils.withImportant)(theme?.UTImageRadio?.description?.color || _colorsModule.default.black),
-      fontSize: (0, _classesUtils.withImportant)(`${theme?.UTImageRadio?.description?.fontSize || 14}px`),
-      fontWeight: (0, _classesUtils.withImportant)(theme?.UTImageRadio?.description?.fontWeight || 400)
+      color: (0, _classesUtils.withImportant)((theme === null || theme === void 0 || (_theme$UTImageRadio5 = theme.UTImageRadio) === null || _theme$UTImageRadio5 === void 0 || (_theme$UTImageRadio5 = _theme$UTImageRadio5.description) === null || _theme$UTImageRadio5 === void 0 ? void 0 : _theme$UTImageRadio5.color) || _colorsModule.default.black),
+      fontSize: (0, _classesUtils.withImportant)("".concat((theme === null || theme === void 0 || (_theme$UTImageRadio6 = theme.UTImageRadio) === null || _theme$UTImageRadio6 === void 0 || (_theme$UTImageRadio6 = _theme$UTImageRadio6.description) === null || _theme$UTImageRadio6 === void 0 ? void 0 : _theme$UTImageRadio6.fontSize) || 14, "px")),
+      fontWeight: (0, _classesUtils.withImportant)((theme === null || theme === void 0 || (_theme$UTImageRadio7 = theme.UTImageRadio) === null || _theme$UTImageRadio7 === void 0 || (_theme$UTImageRadio7 = _theme$UTImageRadio7.description) === null || _theme$UTImageRadio7 === void 0 ? void 0 : _theme$UTImageRadio7.fontWeight) || 400)
     },
     name: {
-      color: (0, _classesUtils.withImportant)(theme?.UTImageRadio?.name?.color || _colorsModule.default.black),
-      fontSize: (0, _classesUtils.withImportant)(`${theme?.UTImageRadio?.name?.fontSize || 18}px`),
-      fontWeight: (0, _classesUtils.withImportant)(theme?.UTImageRadio?.name?.fontWeight || 600)
+      color: (0, _classesUtils.withImportant)((theme === null || theme === void 0 || (_theme$UTImageRadio8 = theme.UTImageRadio) === null || _theme$UTImageRadio8 === void 0 || (_theme$UTImageRadio8 = _theme$UTImageRadio8.name) === null || _theme$UTImageRadio8 === void 0 ? void 0 : _theme$UTImageRadio8.color) || _colorsModule.default.black),
+      fontSize: (0, _classesUtils.withImportant)("".concat((theme === null || theme === void 0 || (_theme$UTImageRadio9 = theme.UTImageRadio) === null || _theme$UTImageRadio9 === void 0 || (_theme$UTImageRadio9 = _theme$UTImageRadio9.name) === null || _theme$UTImageRadio9 === void 0 ? void 0 : _theme$UTImageRadio9.fontSize) || 18, "px")),
+      fontWeight: (0, _classesUtils.withImportant)((theme === null || theme === void 0 || (_theme$UTImageRadio10 = theme.UTImageRadio) === null || _theme$UTImageRadio10 === void 0 || (_theme$UTImageRadio10 = _theme$UTImageRadio10.name) === null || _theme$UTImageRadio10 === void 0 ? void 0 : _theme$UTImageRadio10.fontWeight) || 600)
     },
     selectedText: {
-      color: (0, _classesUtils.withImportant)(theme?.UTImageRadio?.selectedText?.color || _colorsModule.default.white)
+      color: (0, _classesUtils.withImportant)((theme === null || theme === void 0 || (_theme$UTImageRadio11 = theme.UTImageRadio) === null || _theme$UTImageRadio11 === void 0 || (_theme$UTImageRadio11 = _theme$UTImageRadio11.selectedText) === null || _theme$UTImageRadio11 === void 0 ? void 0 : _theme$UTImageRadio11.color) || _colorsModule.default.white)
     }
   };
 };

package/dist/components/UTLabel/index.js

@@ -35,7 +35,7 @@ const UTLabel = _ref => {
     className
   }), [theme, className]);
   return /*#__PURE__*/_react.default.createElement(_UTSkeleton.default, null, /*#__PURE__*/_react.default.createElement(Component, {
-    className: `${classes.root} ${classes.className}`.trim(),
+    className: "".concat(classes.root, " ").concat(classes.className).trim(),
     title: title
   }, withMarkdown && /*#__PURE__*/_react.default.createElement(_reactMarkdown.default, {
     children: children,

package/dist/components/UTLabel/theme.js

@@ -10,7 +10,8 @@ var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.
 var _constants = require("./constants");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const variantsColorTheme = (colorTheme, shade, theme) => {
-  const colorThemeDefinition = theme.Palette[colorTheme] || theme.Palette.actions?.[colorTheme] || theme.Palette[_constants.DEFAULT_PROPS.colorTheme];
+  var _theme$Palette$action;
+  const colorThemeDefinition = theme.Palette[colorTheme] || ((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action[colorTheme]) || theme.Palette[_constants.DEFAULT_PROPS.colorTheme];
   const colorShade = Object.values(_Palette.COLOR_SHADES).includes(shade) ? shade : (0, _componentUtils.getDefaultColorShade)(colorTheme);
   return colorThemeDefinition[colorShade] || _colorsModule.default.black;
 };
@@ -20,6 +21,7 @@ const linkColor = (theme, colorTheme) => {
   return color;
 };
 const retrieveStyle = _ref => {
+  var _field$configuration$, _field$configuration, _field$configuration$2, _field$configuration2, _theme$Fonts, _field$configuration$3, _field$configuration3, _field$configuration$4, _field$configuration4, _field$configuration$5, _field$configuration5;
   let {
     colorTheme,
     field,
@@ -30,11 +32,11 @@ const retrieveStyle = _ref => {
   } = _ref;
   return {
     root: {
-      color: variantsColorTheme(field?.configuration?.colorTheme ?? colorTheme, field?.configuration?.shade ?? shade, theme),
-      fontFamily: theme?.Fonts?.fontFamily,
-      fontSize: _constants.VARIANTS_SIZES[field?.configuration?.variant ?? variant] || _constants.VARIANTS_SIZES[_constants.DEFAULT_PROPS.variant],
-      fontWeight: _constants.WEIGHTS[field?.configuration?.weight ?? weight] || _constants.WEIGHTS[_constants.DEFAULT_PROPS.weight],
-      lineHeight: _constants.VARIANTS_LINE_HEIGHT[field?.configuration?.variant ?? variant] || _constants.VARIANTS_LINE_HEIGHT[_constants.DEFAULT_PROPS.variant],
+      color: variantsColorTheme((_field$configuration$ = field === null || field === void 0 || (_field$configuration = field.configuration) === null || _field$configuration === void 0 ? void 0 : _field$configuration.colorTheme) !== null && _field$configuration$ !== void 0 ? _field$configuration$ : colorTheme, (_field$configuration$2 = field === null || field === void 0 || (_field$configuration2 = field.configuration) === null || _field$configuration2 === void 0 ? void 0 : _field$configuration2.shade) !== null && _field$configuration$2 !== void 0 ? _field$configuration$2 : shade, theme),
+      fontFamily: theme === null || theme === void 0 || (_theme$Fonts = theme.Fonts) === null || _theme$Fonts === void 0 ? void 0 : _theme$Fonts.fontFamily,
+      fontSize: _constants.VARIANTS_SIZES[(_field$configuration$3 = field === null || field === void 0 || (_field$configuration3 = field.configuration) === null || _field$configuration3 === void 0 ? void 0 : _field$configuration3.variant) !== null && _field$configuration$3 !== void 0 ? _field$configuration$3 : variant] || _constants.VARIANTS_SIZES[_constants.DEFAULT_PROPS.variant],
+      fontWeight: _constants.WEIGHTS[(_field$configuration$4 = field === null || field === void 0 || (_field$configuration4 = field.configuration) === null || _field$configuration4 === void 0 ? void 0 : _field$configuration4.weight) !== null && _field$configuration$4 !== void 0 ? _field$configuration$4 : weight] || _constants.WEIGHTS[_constants.DEFAULT_PROPS.weight],
+      lineHeight: _constants.VARIANTS_LINE_HEIGHT[(_field$configuration$5 = field === null || field === void 0 || (_field$configuration5 = field.configuration) === null || _field$configuration5 === void 0 ? void 0 : _field$configuration5.variant) !== null && _field$configuration$5 !== void 0 ? _field$configuration$5 : variant] || _constants.VARIANTS_LINE_HEIGHT[_constants.DEFAULT_PROPS.variant],
       margin: 0,
       '& > a': {
         color: linkColor(theme, colorTheme)

package/dist/components/UTList/index.js

@@ -10,7 +10,7 @@ var _WithTouch = _interopRequireDefault(require("../WithTouch"));
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const renderItem = Component => (item, i) => /*#__PURE__*/_react.default.createElement(Component, {
-  key: `listItem${i}_${Math.random()}`,
+  key: "listItem".concat(i, "_").concat(Math.random()),
   item: item
 });
 const UTList = props => {

package/dist/components/UTMap/components/GoogleMaps/styles.js

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _default = exports.default = {
   searchBox: {
-    border: `1px solid rgba(0,0,0,0.24)`,
+    border: "1px solid rgba(0,0,0,0.24)",
     boxSizing: 'border-box',
     width: '75%',
     maxWidth: '75%',
     height: 30,
     margin: 10,
     borderRadius: 1,
-    boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
+    boxShadow: "0 2px 6px rgba(0, 0, 0, 0.3)",
     outline: 'none',
     padding: '0px 10px',
     textOverflow: 'ellipses',

package/dist/components/UTMenu/index.js

@@ -112,13 +112,13 @@ const UTMenu = _ref => {
     }, menuListProps), /*#__PURE__*/_react.default.createElement(_reactPerfectScrollbar.default, _extends({
       onSync: handleScrollbarSync,
       className: classes.scrollBar
-    }, scrollBarProps), items?.map((item, index) => {
+    }, scrollBarProps), items === null || items === void 0 ? void 0 : items.map((item, index) => {
       const handleClick = event => {
         if (item.onClick) item.onClick(event, contextData);else if (onClickItem) onClickItem(event, contextData);
         if (contextData.clickCallback) contextData.clickCallback();
       };
       return ItemComponent ? withMenuItem ? /*#__PURE__*/_react.default.createElement(_MenuItem.default, _extends({
-        className: `${classes.menuItemContainer} ${item.menuItemClassName}`,
+        className: "".concat(classes.menuItemContainer, " ").concat(item.menuItemClassName),
         disabled: item.disabled,
         divider: withDivider && index < lastItem,
         key: item.key,
@@ -128,7 +128,7 @@ const UTMenu = _ref => {
       }, itemProps, item))) : /*#__PURE__*/_react.default.createElement(ItemComponent, _extends({
         className: classes.menuItem
       }, itemProps, item)) : /*#__PURE__*/_react.default.createElement(_MenuItem.default, _extends({
-        className: `${classes.menuItemContainer} ${item.menuItemClassName}`,
+        className: "".concat(classes.menuItemContainer, " ").concat(item.menuItemClassName),
         disabled: item.disabled,
         divider: withDivider && index < lastItem,
         key: item.key,