@widergy/energy-ui 3.22.3 → 3.22.4

package/dist/components/UTMenu/theme.js

@@ -6,55 +6,59 @@ Object.defineProperty(exports, "__esModule", {
 exports.retrieveStyle = exports.retrieveMuiTheme = void 0;
 var _styles = require("@material-ui/core/styles");
 const retrieveStyle = _ref => {
+  var _theme$UTMenu, _theme$UTMenu2, _theme$UTMenu3, _theme$UTMenu4, _theme$UTMenu5, _theme$UTMenu6, _theme$UTMenu7, _theme$UTMenu8, _theme$UTMenu9, _theme$UTMenu10, _theme$UTMenu11, _theme$UTMenu12, _theme$UTMenu13, _theme$UTMenu14, _theme$UTMenu15, _theme$UTMenu16, _theme$UTMenu17, _theme$UTMenu18, _theme$UTMenu19;
   let {
     theme
   } = _ref;
   return {
     paper: {
-      padding: theme?.UTMenu?.paper?.padding,
-      borderRadius: theme?.UTMenu?.paper?.borderRadius,
-      boxShadow: theme?.UTMenu?.paper?.boxShadow
+      padding: theme === null || theme === void 0 || (_theme$UTMenu = theme.UTMenu) === null || _theme$UTMenu === void 0 || (_theme$UTMenu = _theme$UTMenu.paper) === null || _theme$UTMenu === void 0 ? void 0 : _theme$UTMenu.padding,
+      borderRadius: theme === null || theme === void 0 || (_theme$UTMenu2 = theme.UTMenu) === null || _theme$UTMenu2 === void 0 || (_theme$UTMenu2 = _theme$UTMenu2.paper) === null || _theme$UTMenu2 === void 0 ? void 0 : _theme$UTMenu2.borderRadius,
+      boxShadow: theme === null || theme === void 0 || (_theme$UTMenu3 = theme.UTMenu) === null || _theme$UTMenu3 === void 0 || (_theme$UTMenu3 = _theme$UTMenu3.paper) === null || _theme$UTMenu3 === void 0 ? void 0 : _theme$UTMenu3.boxShadow
     },
     menuList: {
-      borderRadius: theme?.UTMenu?.menuList?.borderRadius,
-      padding: theme?.UTMenu?.menuList?.padding,
-      outline: theme?.UTMenu?.menuList?.outline,
-      width: theme?.UTMenu?.menuList?.width
+      borderRadius: theme === null || theme === void 0 || (_theme$UTMenu4 = theme.UTMenu) === null || _theme$UTMenu4 === void 0 || (_theme$UTMenu4 = _theme$UTMenu4.menuList) === null || _theme$UTMenu4 === void 0 ? void 0 : _theme$UTMenu4.borderRadius,
+      padding: theme === null || theme === void 0 || (_theme$UTMenu5 = theme.UTMenu) === null || _theme$UTMenu5 === void 0 || (_theme$UTMenu5 = _theme$UTMenu5.menuList) === null || _theme$UTMenu5 === void 0 ? void 0 : _theme$UTMenu5.padding,
+      outline: theme === null || theme === void 0 || (_theme$UTMenu6 = theme.UTMenu) === null || _theme$UTMenu6 === void 0 || (_theme$UTMenu6 = _theme$UTMenu6.menuList) === null || _theme$UTMenu6 === void 0 ? void 0 : _theme$UTMenu6.outline,
+      width: theme === null || theme === void 0 || (_theme$UTMenu7 = theme.UTMenu) === null || _theme$UTMenu7 === void 0 || (_theme$UTMenu7 = _theme$UTMenu7.menuList) === null || _theme$UTMenu7 === void 0 ? void 0 : _theme$UTMenu7.width
     },
     menuItem: {
-      fontSize: theme?.UTMenu?.menuItem?.fontSize,
-      color: theme?.UTMenu?.menuItem?.color,
-      backgroundColor: theme?.UTMenu?.menuItem?.backgroundColor
+      fontSize: theme === null || theme === void 0 || (_theme$UTMenu8 = theme.UTMenu) === null || _theme$UTMenu8 === void 0 || (_theme$UTMenu8 = _theme$UTMenu8.menuItem) === null || _theme$UTMenu8 === void 0 ? void 0 : _theme$UTMenu8.fontSize,
+      color: theme === null || theme === void 0 || (_theme$UTMenu9 = theme.UTMenu) === null || _theme$UTMenu9 === void 0 || (_theme$UTMenu9 = _theme$UTMenu9.menuItem) === null || _theme$UTMenu9 === void 0 ? void 0 : _theme$UTMenu9.color,
+      backgroundColor: theme === null || theme === void 0 || (_theme$UTMenu10 = theme.UTMenu) === null || _theme$UTMenu10 === void 0 || (_theme$UTMenu10 = _theme$UTMenu10.menuItem) === null || _theme$UTMenu10 === void 0 ? void 0 : _theme$UTMenu10.backgroundColor
     },
     popper: {
       zIndex: 9999,
-      margin: theme?.UTMenu?.popper?.margin
+      margin: theme === null || theme === void 0 || (_theme$UTMenu11 = theme.UTMenu) === null || _theme$UTMenu11 === void 0 || (_theme$UTMenu11 = _theme$UTMenu11.popper) === null || _theme$UTMenu11 === void 0 ? void 0 : _theme$UTMenu11.margin
     },
     menuItemIcon: {
-      height: theme?.UTMenu?.menuItemIcon?.height,
-      color: theme?.UTMenu?.menuItemIcon?.color,
-      fontSize: theme?.UTMenu?.menuItemIcon?.fontSize,
-      margin: theme?.UTMenu?.menuItemIcon?.margin,
-      width: theme?.UTMenu?.menuItemIcon?.width
+      height: theme === null || theme === void 0 || (_theme$UTMenu12 = theme.UTMenu) === null || _theme$UTMenu12 === void 0 || (_theme$UTMenu12 = _theme$UTMenu12.menuItemIcon) === null || _theme$UTMenu12 === void 0 ? void 0 : _theme$UTMenu12.height,
+      color: theme === null || theme === void 0 || (_theme$UTMenu13 = theme.UTMenu) === null || _theme$UTMenu13 === void 0 || (_theme$UTMenu13 = _theme$UTMenu13.menuItemIcon) === null || _theme$UTMenu13 === void 0 ? void 0 : _theme$UTMenu13.color,
+      fontSize: theme === null || theme === void 0 || (_theme$UTMenu14 = theme.UTMenu) === null || _theme$UTMenu14 === void 0 || (_theme$UTMenu14 = _theme$UTMenu14.menuItemIcon) === null || _theme$UTMenu14 === void 0 ? void 0 : _theme$UTMenu14.fontSize,
+      margin: theme === null || theme === void 0 || (_theme$UTMenu15 = theme.UTMenu) === null || _theme$UTMenu15 === void 0 || (_theme$UTMenu15 = _theme$UTMenu15.menuItemIcon) === null || _theme$UTMenu15 === void 0 ? void 0 : _theme$UTMenu15.margin,
+      width: theme === null || theme === void 0 || (_theme$UTMenu16 = theme.UTMenu) === null || _theme$UTMenu16 === void 0 || (_theme$UTMenu16 = _theme$UTMenu16.menuItemIcon) === null || _theme$UTMenu16 === void 0 ? void 0 : _theme$UTMenu16.width
     },
     menuItemContainer: {
-      padding: theme?.UTMenu?.menuItemContainer?.padding,
-      position: theme?.UTMenu?.menuItemContainer?.position
+      padding: theme === null || theme === void 0 || (_theme$UTMenu17 = theme.UTMenu) === null || _theme$UTMenu17 === void 0 || (_theme$UTMenu17 = _theme$UTMenu17.menuItemContainer) === null || _theme$UTMenu17 === void 0 ? void 0 : _theme$UTMenu17.padding,
+      position: theme === null || theme === void 0 || (_theme$UTMenu18 = theme.UTMenu) === null || _theme$UTMenu18 === void 0 || (_theme$UTMenu18 = _theme$UTMenu18.menuItemContainer) === null || _theme$UTMenu18 === void 0 ? void 0 : _theme$UTMenu18.position
     },
     scrollBar: {
-      maxHeight: theme?.UTMenu?.scrollBar?.maxHeight
+      maxHeight: theme === null || theme === void 0 || (_theme$UTMenu19 = theme.UTMenu) === null || _theme$UTMenu19 === void 0 || (_theme$UTMenu19 = _theme$UTMenu19.scrollBar) === null || _theme$UTMenu19 === void 0 ? void 0 : _theme$UTMenu19.maxHeight
     }
   };
 };
 exports.retrieveStyle = retrieveStyle;
-const retrieveMuiTheme = theme => (0, _styles.createTheme)({
-  overrides: {
-    MuiListItem: {
-      divider: {
-        borderBottomColor: theme?.UTMenu?.divider?.color,
-        borderBottomWidth: theme?.UTMenu?.divider?.width
+const retrieveMuiTheme = theme => {
+  var _theme$UTMenu20, _theme$UTMenu21;
+  return (0, _styles.createTheme)({
+    overrides: {
+      MuiListItem: {
+        divider: {
+          borderBottomColor: theme === null || theme === void 0 || (_theme$UTMenu20 = theme.UTMenu) === null || _theme$UTMenu20 === void 0 || (_theme$UTMenu20 = _theme$UTMenu20.divider) === null || _theme$UTMenu20 === void 0 ? void 0 : _theme$UTMenu20.color,
+          borderBottomWidth: theme === null || theme === void 0 || (_theme$UTMenu21 = theme.UTMenu) === null || _theme$UTMenu21 === void 0 || (_theme$UTMenu21 = _theme$UTMenu21.divider) === null || _theme$UTMenu21 === void 0 ? void 0 : _theme$UTMenu21.width
+        }
       }
     }
-  }
-});
+  });
+};
 exports.retrieveMuiTheme = retrieveMuiTheme;

package/dist/components/UTMenu/utils.js

@@ -13,7 +13,7 @@ const getScrollbarWidth = () => document.body && document.body.clientWidth && wi
 exports.getScrollbarWidth = getScrollbarWidth;
 const lockScreen = (blocker, lock) => {
   const body = document.getElementsByTagName('body')[0];
-  body.style.paddingRight = lock && (0, _browser.isDesktop)(1024) && bodyHasScroll() ? `${getScrollbarWidth()}px` : '';
+  body.style.paddingRight = lock && (0, _browser.isDesktop)(1024) && bodyHasScroll() ? "".concat(getScrollbarWidth(), "px") : '';
   body.style.overflow = lock ? 'hidden' : '';
   blocker.current.style.display = lock ? 'initial' : '';
 };

package/dist/components/UTModal/index.js

@@ -45,13 +45,13 @@ const UTModal = _ref => {
   const StatusIcon = _constants.STATUS_ICONS[status];
   const withSecondaryActions = !(0, _object.objectIsEmpty)(secondaryAction) || SecondaryActionComponent;
   return /*#__PURE__*/_react.default.createElement("dialog", {
-    className: `${_stylesModule.default.container} ${classes.container} ${size ? _stylesModule.default[`container${(0, _componentUtils.capitalize)(size)}`] : _stylesModule.default.containerM}`,
+    className: "".concat(_stylesModule.default.container, " ").concat(classes.container, " ").concat(size ? _stylesModule.default["container".concat((0, _componentUtils.capitalize)(size))] : _stylesModule.default.containerM),
     onClick: onClickDialog,
     ref: dialogRef
   }, /*#__PURE__*/_react.default.createElement("div", null, StatusIcon && /*#__PURE__*/_react.default.createElement("div", {
-    className: `${_stylesModule.default.status} ${classes[`status${(0, _componentUtils.capitalize)(status)}`]}`
+    className: "".concat(_stylesModule.default.status, " ").concat(classes["status".concat((0, _componentUtils.capitalize)(status))])
   }, /*#__PURE__*/_react.default.createElement(StatusIcon, {
-    className: `${_stylesModule.default.icon} ${classes[`icon${(0, _componentUtils.capitalize)(status)}`]}`
+    className: "".concat(_stylesModule.default.icon, " ").concat(classes["icon".concat((0, _componentUtils.capitalize)(status))])
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.header
   }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
@@ -60,13 +60,9 @@ const UTModal = _ref => {
   }, title), description && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     colorTheme: "gray"
   }, description)), children && /*#__PURE__*/_react.default.createElement("div", {
-    className: `${_stylesModule.default.body} ${!removeBodyPadding && _stylesModule.default.bodyPadding}`
+    className: "".concat(_stylesModule.default.body, " ").concat(!removeBodyPadding && _stylesModule.default.bodyPadding)
   }, children), /*#__PURE__*/_react.default.createElement("div", {
-    className: `
-            ${_stylesModule.default.actions}
-            ${classes.actions}
-            ${withSecondaryActions && _stylesModule.default.withSecondaryActions}
-          `
+    className: "\n            ".concat(_stylesModule.default.actions, "\n            ").concat(classes.actions, "\n            ").concat(withSecondaryActions && _stylesModule.default.withSecondaryActions, "\n          ")
   }, withSecondaryActions && /*#__PURE__*/_react.default.createElement("div", null, SecondaryActionComponent ? /*#__PURE__*/_react.default.createElement(SecondaryActionComponent, null) : /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
     colorTheme: "secondary",
     variant: "semitransparent"

package/dist/components/UTModal/theme.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.retrieveStyle = void 0;
 var _shadowUtils = require("../../utils/shadowUtils");
 const retrieveStyle = _ref => {
+  var _theme$Palette$shadow;
   let {
     theme
   } = _ref;
@@ -13,7 +14,7 @@ const retrieveStyle = _ref => {
     container: {
       backgroundColor: theme.Palette.light['01'],
       boxShadow: (0, _shadowUtils.getShadow)({
-        color: theme.Palette.shadows?.grayscale,
+        color: (_theme$Palette$shadow = theme.Palette.shadows) === null || _theme$Palette$shadow === void 0 ? void 0 : _theme$Palette$shadow.grayscale,
         level: 2
       }),
       '&::backdrop': {

package/dist/components/UTOnboarding/index.js

@@ -18,6 +18,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const UTOnboarding = _ref => {
+  var _steps$currentStep$is, _steps$currentStep, _steps$currentStep$hi, _steps$currentStep2, _steps$currentStep3, _steps$currentStep4;
   let {
     classes: themeClasses,
     classNames,
@@ -31,8 +32,8 @@ const UTOnboarding = _ref => {
   const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(themeClasses, classNames), [themeClasses, classNames]) || {};
   const [currentStep, setCurrentStep] = (0, _react.useState)(0);
   const [loading, setLoading] = (0, _react.useState)(true);
-  const currentStepIsSuggestion = steps[currentStep]?.isSuggestion ?? false;
-  const hideFooter = steps[currentStep]?.hideFooter ?? false;
+  const currentStepIsSuggestion = (_steps$currentStep$is = (_steps$currentStep = steps[currentStep]) === null || _steps$currentStep === void 0 ? void 0 : _steps$currentStep.isSuggestion) !== null && _steps$currentStep$is !== void 0 ? _steps$currentStep$is : false;
+  const hideFooter = (_steps$currentStep$hi = (_steps$currentStep2 = steps[currentStep]) === null || _steps$currentStep2 === void 0 ? void 0 : _steps$currentStep2.hideFooter) !== null && _steps$currentStep$hi !== void 0 ? _steps$currentStep$hi : false;
   const totalSteps = steps.length;
   (0, _react.useEffect)(() => {
     setLoading(false);
@@ -40,15 +41,19 @@ const UTOnboarding = _ref => {
   (0, _react.useEffect)(() => {
     const referenceLayer = document.querySelector('.introjs-tooltipReferenceLayer');
     if (currentStepIsSuggestion) {
-      referenceLayer?.classList?.add(_stylesModule.default.suggestionReference);
+      var _referenceLayer$class;
+      referenceLayer === null || referenceLayer === void 0 || (_referenceLayer$class = referenceLayer.classList) === null || _referenceLayer$class === void 0 || _referenceLayer$class.add(_stylesModule.default.suggestionReference);
     } else {
-      referenceLayer?.classList?.remove(_stylesModule.default.suggestionReference);
+      var _referenceLayer$class2;
+      referenceLayer === null || referenceLayer === void 0 || (_referenceLayer$class2 = referenceLayer.classList) === null || _referenceLayer$class2 === void 0 || _referenceLayer$class2.remove(_stylesModule.default.suggestionReference);
     }
     const footer = document.querySelector('.introjs-tooltipbuttons');
     if (hideFooter) {
-      footer?.classList?.add(_stylesModule.default.displayNone);
+      var _footer$classList;
+      footer === null || footer === void 0 || (_footer$classList = footer.classList) === null || _footer$classList === void 0 || _footer$classList.add(_stylesModule.default.displayNone);
     } else {
-      footer?.classList?.remove(_stylesModule.default.displayNone);
+      var _footer$classList2;
+      footer === null || footer === void 0 || (_footer$classList2 = footer.classList) === null || _footer$classList2 === void 0 || _footer$classList2.remove(_stylesModule.default.displayNone);
     }
   });
   return loading ? null : /*#__PURE__*/_react.default.createElement(_intro.Steps, {
@@ -61,26 +66,29 @@ const UTOnboarding = _ref => {
         currentStep: index,
         totalSteps: totalSteps,
         classes: classes,
-        hideFooter: step?.hideFooter,
-        buttonPreviousTitle: step?.buttonPreviousTitle,
-        nextStep: step?.nextStep,
+        hideFooter: step === null || step === void 0 ? void 0 : step.hideFooter,
+        buttonPreviousTitle: step === null || step === void 0 ? void 0 : step.buttonPreviousTitle,
+        nextStep: step === null || step === void 0 ? void 0 : step.nextStep,
         variant: variant
       }) : step.intro
     })),
     initialStep: 0,
     onExit: handleOnClose,
     onBeforeChange: nextStep => {
+      var _steps$nextStep;
       const overlay = document.querySelector('.introjs-overlay');
       setCurrentStep(nextStep);
-      if (steps[nextStep]?.isSuggestion) {
-        overlay?.classList?.add(_stylesModule.default.suggestionOverlay);
+      if ((_steps$nextStep = steps[nextStep]) !== null && _steps$nextStep !== void 0 && _steps$nextStep.isSuggestion) {
+        var _overlay$classList;
+        overlay === null || overlay === void 0 || (_overlay$classList = overlay.classList) === null || _overlay$classList === void 0 || _overlay$classList.add(_stylesModule.default.suggestionOverlay);
       } else {
-        overlay?.classList?.remove(_stylesModule.default.suggestionOverlay);
+        var _overlay$classList2;
+        overlay === null || overlay === void 0 || (_overlay$classList2 = overlay.classList) === null || _overlay$classList2 === void 0 || _overlay$classList2.remove(_stylesModule.default.suggestionOverlay);
       }
     },
     onComplete: handleComplete || {},
     options: {
-      buttonClass: `${_stylesModule.default.button} ${classes.buttons}`,
+      buttonClass: "".concat(_stylesModule.default.button, " ").concat(classes.buttons),
       doneLabel: _constants.DONE_LABEL,
       exitOnEsc: false,
       exitOnOverlayClick: false,
@@ -90,9 +98,9 @@ const UTOnboarding = _ref => {
       prevLabel: _constants.PREV_LABEL,
       showBullets: false,
       showProgress: false,
-      tooltipClass: `${_stylesModule.default.tooltipContainer} ${classes.onboardingContainer}`,
-      highlightClass: steps[currentStep]?.isSuggestion ? _stylesModule.default.suggestionHighlight : _stylesModule.default.highlight,
-      ...(steps[currentStep]?.hideFooter ? {
+      tooltipClass: "".concat(_stylesModule.default.tooltipContainer, " ").concat(classes.onboardingContainer),
+      highlightClass: (_steps$currentStep3 = steps[currentStep]) !== null && _steps$currentStep3 !== void 0 && _steps$currentStep3.isSuggestion ? _stylesModule.default.suggestionHighlight : _stylesModule.default.highlight,
+      ...((_steps$currentStep4 = steps[currentStep]) !== null && _steps$currentStep4 !== void 0 && _steps$currentStep4.hideFooter ? {
         hidePrev: true,
         hideNext: true,
         showProgress: false,

package/dist/components/UTOnboarding/theme.js

@@ -24,17 +24,19 @@ const getLabelTheme = _ref2 => {
   }[variant];
 };
 const getButtonTheme = _ref3 => {
+  var _theme$Palette$action, _theme$Palette$action2, _theme$Palette$action3;
   let {
     theme,
     variant
   } = _ref3;
   return {
-    [_constants.VARIANTS.dark]: theme.Palette.actions?.negative['04'] || theme.Palette.negative['04'],
-    [_constants.VARIANTS.information]: theme.Palette.actions?.negative['04'] || theme.Palette.negative['04'],
-    [_constants.VARIANTS.light]: theme.Palette.actions?.accent['04'] || theme.Palette.accent['04']
+    [_constants.VARIANTS.dark]: ((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action.negative['04']) || theme.Palette.negative['04'],
+    [_constants.VARIANTS.information]: ((_theme$Palette$action2 = theme.Palette.actions) === null || _theme$Palette$action2 === void 0 ? void 0 : _theme$Palette$action2.negative['04']) || theme.Palette.negative['04'],
+    [_constants.VARIANTS.light]: ((_theme$Palette$action3 = theme.Palette.actions) === null || _theme$Palette$action3 === void 0 ? void 0 : _theme$Palette$action3.accent['04']) || theme.Palette.accent['04']
   }[variant];
 };
 const getButtonNextTextTheme = _ref4 => {
+  var _theme$Palette$action4;
   let {
     theme,
     variant
@@ -42,7 +44,7 @@ const getButtonNextTextTheme = _ref4 => {
   return {
     [_constants.VARIANTS.dark]: theme.Palette.dark['05'],
     [_constants.VARIANTS.information]: theme.Palette.dark['05'],
-    [_constants.VARIANTS.light]: theme.Palette.actions?.negative['05'] || theme.Palette.negative['05']
+    [_constants.VARIANTS.light]: ((_theme$Palette$action4 = theme.Palette.actions) === null || _theme$Palette$action4 === void 0 ? void 0 : _theme$Palette$action4.negative['05']) || theme.Palette.negative['05']
   }[variant];
 };
 const validateProps = _ref5 => {
@@ -61,12 +63,12 @@ const retrieveStyle = _ref6 => {
   } = _ref6;
   return {
     onboardingContainer: {
-      backgroundColor: ` ${getBackgroundColor({
+      backgroundColor: " ".concat(getBackgroundColor({
         theme,
         ...validateProps({
           variant
         })
-      })} !important`,
+      }), " !important"),
       color: getLabelTheme({
         theme,
         ...validateProps({
@@ -82,26 +84,26 @@ const retrieveStyle = _ref6 => {
         })
       },
       '& .introjs-nextbutton': {
-        backgroundColor: `${getButtonTheme({
+        backgroundColor: "".concat(getButtonTheme({
           theme,
           ...validateProps({
             variant
           })
-        })} !important`,
-        color: `${getButtonNextTextTheme({
+        }), " !important"),
+        color: "".concat(getButtonNextTextTheme({
           theme,
           ...validateProps({
             variant
           })
-        })} !important`
+        }), " !important")
       },
       '& .introjs-tooltip': {
-        backgroundColor: ` ${getBackgroundColor({
+        backgroundColor: " ".concat(getBackgroundColor({
           theme,
           ...validateProps({
             variant
           })
-        })} !important`
+        }), " !important")
       }
     }
   };

package/dist/components/UTPagination/components/PageSizeSelector/index.js

@@ -37,13 +37,13 @@ const PageSizeSelector = _ref => {
     disableFirstOption: true,
     variant: "outlined",
     selectProps: {
-      className: `${_stylesModule.default.pageSizeSelectContainer} ${classes.pageSizeSelectContainer}`,
+      className: "".concat(_stylesModule.default.pageSizeSelectContainer, " ").concat(classes.pageSizeSelectContainer),
       classes: {
         select: classes.pageSizeSelect
       }
     }
   })), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    className: `${_stylesModule.default.label} ${classes.totalRowsLabel}`,
+    className: "".concat(_stylesModule.default.label, " ").concat(classes.totalRowsLabel),
     colorTheme: colorThemes.totalRows || 'gray'
   }, label));
 };

package/dist/components/UTPagination/components/Pagination/components/NavigationButton/index.js

@@ -22,10 +22,7 @@ const NavigationButton = _ref => {
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_UTButton.default, {
     classNames: {
-      root: `
-        ${className}
-        ${_stylesModule.default.navigationButton}
-      `
+      root: "\n        ".concat(className, "\n        ").concat(_stylesModule.default.navigationButton, "\n      ")
     },
     colorTheme: colorTheme,
     disabled: disabled,

package/dist/components/UTPagination/components/Pagination/index.js

@@ -83,7 +83,7 @@ const Pagination = _ref => {
   const pageList = (0, _utils.getPageNumbers)(totalPages, currentPage, isResponsive);
   const navigationButtonColorTheme = colorThemes.navigationButton || 'secondary';
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: `${_stylesModule.default.pagination} ${classes.pagination}`
+    className: "".concat(_stylesModule.default.pagination, " ").concat(classes.pagination)
   }, totalPages > _constants.PAGINATION_LIMIT_DOUBLE_ARROWS && !isResponsive && /*#__PURE__*/_react.default.createElement(_NavigationButton.default, {
     className: _stylesModule.default.invertNavigationLabel,
     colorTheme: navigationButtonColorTheme,
@@ -97,10 +97,10 @@ const Pagination = _ref => {
     disabled: currentPage === 0,
     onClick: () => onChangePage(currentPage - 1)
   }), pageList.map(page => /*#__PURE__*/_react.default.createElement(_UTButton.default, {
-    key: `page_${page}`,
+    key: "page_".concat(page),
     classNames: {
       childrenContainer: _stylesModule.default.pageButtonChildrenContainer,
-      root: `${_stylesModule.default.pageButton} ${currentPage === page && _stylesModule.default.pageButtondisabled}`
+      root: "".concat(_stylesModule.default.pageButton, " ").concat(currentPage === page && _stylesModule.default.pageButtondisabled)
     },
     colorTheme: colorThemes.pageButton || currentPage === page ? 'primary' : 'secondary',
     onClick: () => onChangePage(page),

package/dist/components/UTPagination/index.js

@@ -30,11 +30,11 @@ const UTPagination = _ref => {
     totalRowsLabel
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: `${_stylesModule.default.paginationContainer} ${classes.paginationContainer}`
+    className: "".concat(_stylesModule.default.paginationContainer, " ").concat(classes.paginationContainer)
   }, /*#__PURE__*/_react.default.createElement(_PageSizeSelector.default, {
     classes: classes,
     colorThemes: colorThemes,
-    label: `${_constants.PREPOSITION} ${totalRows} ${totalRowsLabel}`,
+    label: "".concat(_constants.PREPOSITION, " ").concat(totalRows, " ").concat(totalRowsLabel),
     onChangeRowPerPage: onChangeRowPerPage,
     options: rowsPerPageOptions,
     rowsPerPage: rowsPerPage,

package/dist/components/UTPagination/theme.js

@@ -7,30 +7,31 @@ 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$UTPagination, _theme$UTPagination2, _theme$Fonts, _theme$UTPagination3, _theme$UTPagination4, _theme$UTPagination5, _theme$UTPagination6, _theme$UTPagination7, _theme$UTPagination8;
   let {
     theme
   } = _ref;
   return {
     paginationContainer: {
-      marginTop: theme?.UTPagination?.paginationContainer?.marginTop || 32
+      marginTop: (theme === null || theme === void 0 || (_theme$UTPagination = theme.UTPagination) === null || _theme$UTPagination === void 0 || (_theme$UTPagination = _theme$UTPagination.paginationContainer) === null || _theme$UTPagination === void 0 ? void 0 : _theme$UTPagination.marginTop) || 32
     },
     pageSizeSelect: {
-      background: theme?.UTPagination?.pageSizeSelect?.background,
-      fontFamily: theme?.Fonts?.fontFamily,
-      fontSize: theme?.UTPagination?.pageSizeSelect?.fontSize,
-      padding: theme?.UTPagination?.pageSizeSelect?.padding || 6,
-      textAlign: theme?.UTPagination?.pageSizeSelect?.textAlign
+      background: theme === null || theme === void 0 || (_theme$UTPagination2 = theme.UTPagination) === null || _theme$UTPagination2 === void 0 || (_theme$UTPagination2 = _theme$UTPagination2.pageSizeSelect) === null || _theme$UTPagination2 === void 0 ? void 0 : _theme$UTPagination2.background,
+      fontFamily: theme === null || theme === void 0 || (_theme$Fonts = theme.Fonts) === null || _theme$Fonts === void 0 ? void 0 : _theme$Fonts.fontFamily,
+      fontSize: theme === null || theme === void 0 || (_theme$UTPagination3 = theme.UTPagination) === null || _theme$UTPagination3 === void 0 || (_theme$UTPagination3 = _theme$UTPagination3.pageSizeSelect) === null || _theme$UTPagination3 === void 0 ? void 0 : _theme$UTPagination3.fontSize,
+      padding: (theme === null || theme === void 0 || (_theme$UTPagination4 = theme.UTPagination) === null || _theme$UTPagination4 === void 0 || (_theme$UTPagination4 = _theme$UTPagination4.pageSizeSelect) === null || _theme$UTPagination4 === void 0 ? void 0 : _theme$UTPagination4.padding) || 6,
+      textAlign: theme === null || theme === void 0 || (_theme$UTPagination5 = theme.UTPagination) === null || _theme$UTPagination5 === void 0 || (_theme$UTPagination5 = _theme$UTPagination5.pageSizeSelect) === null || _theme$UTPagination5 === void 0 ? void 0 : _theme$UTPagination5.textAlign
     },
     pageSizeSelectContainer: {
       '& fieldset': {
-        border: theme?.UTPagination?.pageSizeSelect?.border || `1px solid ${_colorsModule.default.gray3}`
+        border: (theme === null || theme === void 0 || (_theme$UTPagination6 = theme.UTPagination) === null || _theme$UTPagination6 === void 0 || (_theme$UTPagination6 = _theme$UTPagination6.pageSizeSelect) === null || _theme$UTPagination6 === void 0 ? void 0 : _theme$UTPagination6.border) || "1px solid ".concat(_colorsModule.default.gray3)
       },
       '&:hover fieldset': {
-        border: theme?.UTPagination?.pageSizeSelect?.hover?.border || `1px solid ${_colorsModule.default.gray2}`
+        border: (theme === null || theme === void 0 || (_theme$UTPagination7 = theme.UTPagination) === null || _theme$UTPagination7 === void 0 || (_theme$UTPagination7 = _theme$UTPagination7.pageSizeSelect) === null || _theme$UTPagination7 === void 0 || (_theme$UTPagination7 = _theme$UTPagination7.hover) === null || _theme$UTPagination7 === void 0 ? void 0 : _theme$UTPagination7.border) || "1px solid ".concat(_colorsModule.default.gray2)
       }
     },
     pagination: {
-      gridGap: theme?.UTPagination?.pagination?.gridGap || '16px'
+      gridGap: (theme === null || theme === void 0 || (_theme$UTPagination8 = theme.UTPagination) === null || _theme$UTPagination8 === void 0 || (_theme$UTPagination8 = _theme$UTPagination8.pagination) === null || _theme$UTPagination8 === void 0 ? void 0 : _theme$UTPagination8.gridGap) || '16px'
     }
   };
 };

package/dist/components/UTPanel/versions/V0/index.js

@@ -57,15 +57,15 @@ const UTPanel = _ref => {
     },
     classes: {
       ...drawerClasses,
-      paper: `${_stylesModule.default.paper} ${drawerClasses.paper}`,
-      root: `${containerRef && _stylesModule.default.root} ${drawerClasses.root}`
+      paper: "".concat(_stylesModule.default.paper, " ").concat(drawerClasses.paper),
+      root: "".concat(containerRef && _stylesModule.default.root, " ").concat(drawerClasses.root)
     }
   }, props), /*#__PURE__*/_react.default.createElement("div", {
-    className: `${_stylesModule.default.titleContainer} ${titleContainerClass}`
+    className: "".concat(_stylesModule.default.titleContainer, " ").concat(titleContainerClass)
   }, TitleComponent || /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.iconTitleContainer
   }, TitleIcon && /*#__PURE__*/_react.default.createElement(TitleIcon, {
-    className: `${_stylesModule.default.titleIcon} ${titleIconClass}`
+    className: "".concat(_stylesModule.default.titleIcon, " ").concat(titleIconClass)
   }), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     weight: "semibold",
     className: classes.title
@@ -79,7 +79,7 @@ const UTPanel = _ref => {
     variant: "text"
   })), disableScrollbar ? children : /*#__PURE__*/_react.default.createElement(_reactPerfectScrollbar.default, {
     onYReachEnd: onEndReachedCallback,
-    className: `${_stylesModule.default.perfectScrollbar} ${perfectScrollbarClass}`,
+    className: "".concat(_stylesModule.default.perfectScrollbar, " ").concat(perfectScrollbarClass),
     options: {
       suppressScrollX: true,
       ...perfectScrollbarOptions

package/dist/components/UTPanel/versions/V1/components/DataItem/index.js

@@ -19,7 +19,7 @@ const DataItem = _ref => {
     title
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: `${_stylesModule.default.container} ${_stylesModule.default[_constants.SIZES[size]]}`
+    className: "".concat(_stylesModule.default.container, " ").concat(_stylesModule.default[_constants.SIZES[size]])
   }, /*#__PURE__*/_react.default.createElement(_UTIcon.default, {
     className: _stylesModule.default.icon,
     colorTheme: "gray",

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

@@ -69,7 +69,7 @@ const UTPanel = _ref => {
     anchor: panelSide,
     classes: {
       ...drawerClasses,
-      paper: `${_stylesModule.default.paper} ${drawerClasses.paper} ${_stylesModule.default[_constants.SIZES[size]]}`,
+      paper: "".concat(_stylesModule.default.paper, " ").concat(drawerClasses.paper, " ").concat(_stylesModule.default[_constants.SIZES[size]]),
       root: drawerClasses.root
     },
     disableSwipeToOpen: true,
@@ -100,7 +100,7 @@ const UTPanel = _ref => {
     },
     value: currentStep * 100 / stepsCount
   })), !hideHeader && /*#__PURE__*/_react.default.createElement("div", {
-    className: `${_stylesModule.default.headerContainer} ${headerContainerClass}`
+    className: "".concat(_stylesModule.default.headerContainer, " ").concat(headerContainerClass)
   }, HeaderComponent || /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.headerArea
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -131,13 +131,11 @@ const UTPanel = _ref => {
     onClick: headerMainActionButton.callBack,
     variant: headerMainActionButton.variant || 'filled'
   }, headerMainActionButton.text)))), !(0, _isEmpty.default)(headerItems) && /*#__PURE__*/_react.default.createElement("div", {
-    className: `${_stylesModule.default.headerItemsContainer} 
-          ${collapseHeader ? _stylesModule.default.expandedContainer : _stylesModule.default.collapsedContainer} 
-          ${singleHeaderItemsColumn && _stylesModule.default.singleHeaderItemsColumn || ''}`
+    className: "".concat(_stylesModule.default.headerItemsContainer, " \n          ").concat(collapseHeader ? _stylesModule.default.expandedContainer : _stylesModule.default.collapsedContainer, " \n          ").concat(singleHeaderItemsColumn && _stylesModule.default.singleHeaderItemsColumn || '')
   }, headerItems.map(_DataItem.default)), /*#__PURE__*/_react.default.createElement("div", {
-    className: `${_stylesModule.default.bodyContainer} ${classes.bodyContainer}`
+    className: "".concat(_stylesModule.default.bodyContainer, " ").concat(classes.bodyContainer)
   }, disableScrollbar ? children : /*#__PURE__*/_react.default.createElement(_reactPerfectScrollbar.default, {
-    className: `${_stylesModule.default.perfectScrollbar} ${perfectScrollbarClass}`,
+    className: "".concat(_stylesModule.default.perfectScrollbar, " ").concat(perfectScrollbarClass),
     onYReachEnd: onEndReachedCallback,
     options: {
       suppressScrollX: true,
@@ -148,7 +146,7 @@ const UTPanel = _ref => {
       root: _stylesModule.default.mainButton
     },
     size: "large"
-  }, mainButton), mainButton?.text || _constants.ACCEPT_BUTTON_TEXT));
+  }, mainButton), (mainButton === null || mainButton === void 0 ? void 0 : mainButton.text) || _constants.ACCEPT_BUTTON_TEXT));
 };
 UTPanel.propTypes = {
   classes: (0, _propTypes.objectOf)(_propTypes.string),

package/dist/components/UTPanel/versions/V1/theme.js

@@ -14,7 +14,7 @@ const retrieveStyle = _ref => {
       background: (0, _seamlessImmutable.getIn)(theme, ['UTPanel', 'progressBar', 'barColorPrimary', 'background'], 'linear-gradient(90deg, #25E0A6 0%, #20BBFC 100%) !important')
     },
     colorPrimary: {
-      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTPanel', 'progressBar', 'colorPrimary', 'backgroundColor'], `${theme.Palette.light['04']} !important`)
+      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTPanel', 'progressBar', 'colorPrimary', 'backgroundColor'], "".concat(theme.Palette.light['04'], " !important"))
     }
   };
 };

package/dist/components/UTPasswordField/components/PasswordValidations/components/Error/index.js

@@ -25,7 +25,7 @@ const ErrorMessage = _ref => {
   return !assertion && /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.container
   }, /*#__PURE__*/_react.default.createElement(Icon, {
-    className: `${iconStyle} ${failedIconStyle}`
+    className: "".concat(iconStyle, " ").concat(failedIconStyle)
   }), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     className: _stylesModule.default.label,
     colorTheme: "error",

package/dist/components/UTPasswordField/components/PasswordValidations/components/Validation/index.js

@@ -36,9 +36,9 @@ const Validation = _ref => {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.container
   }, value || shouldShowError && !disabled ? assertion ? /*#__PURE__*/_react.default.createElement(PassedIcon, {
-    className: `${_stylesModule.default.passedIcon} ${iconStyle} ${passedIconStyle}`
+    className: "".concat(_stylesModule.default.passedIcon, " ").concat(iconStyle, " ").concat(passedIconStyle)
   }) : /*#__PURE__*/_react.default.createElement(FailedIcon, {
-    className: `${_stylesModule.default.failedIcon} ${iconStyle} ${failedIconStyle}`
+    className: "".concat(_stylesModule.default.failedIcon, " ").concat(iconStyle, " ").concat(failedIconStyle)
   }) : /*#__PURE__*/_react.default.createElement(NoValue, {
     className: iconStyle
   }), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {

package/dist/components/UTPasswordField/components/PasswordValidations/index.js

@@ -67,12 +67,12 @@ const PasswordValidations = _ref => {
       assertion,
       error
     } = _ref6;
-    return !assertion && !passwordValidationsWarning?.some(_ref7 => {
+    return !assertion && !(passwordValidationsWarning !== null && passwordValidationsWarning !== void 0 && passwordValidationsWarning.some(_ref7 => {
       let {
         error: warningError
       } = _ref7;
       return error === warningError;
-    });
+    }));
   });
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, validations.map(_ref8 => {
     let {

package/dist/components/UTPasswordField/theme.js

@@ -6,14 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.retrieveStyle = void 0;
 var _classesUtils = require("../../utils/classesUtils");
 const retrieveStyle = _ref => {
+  var _theme$UTPasswordFiel, _theme$UTPasswordFiel2, _theme$UTPasswordFiel3, _theme$UTPasswordFiel4;
   let {
     theme
   } = _ref;
   return {
     iconStyle: {
-      height: theme?.UTPasswordField?.icon?.size || '1rem',
-      width: theme?.UTPasswordField?.icon?.size || '1rem',
-      borderRadius: theme?.UTPasswordField?.icon?.borderRadius || '50%'
+      height: (theme === null || theme === void 0 || (_theme$UTPasswordFiel = theme.UTPasswordField) === null || _theme$UTPasswordFiel === void 0 || (_theme$UTPasswordFiel = _theme$UTPasswordFiel.icon) === null || _theme$UTPasswordFiel === void 0 ? void 0 : _theme$UTPasswordFiel.size) || '1rem',
+      width: (theme === null || theme === void 0 || (_theme$UTPasswordFiel2 = theme.UTPasswordField) === null || _theme$UTPasswordFiel2 === void 0 || (_theme$UTPasswordFiel2 = _theme$UTPasswordFiel2.icon) === null || _theme$UTPasswordFiel2 === void 0 ? void 0 : _theme$UTPasswordFiel2.size) || '1rem',
+      borderRadius: (theme === null || theme === void 0 || (_theme$UTPasswordFiel3 = theme.UTPasswordField) === null || _theme$UTPasswordFiel3 === void 0 || (_theme$UTPasswordFiel3 = _theme$UTPasswordFiel3.icon) === null || _theme$UTPasswordFiel3 === void 0 ? void 0 : _theme$UTPasswordFiel3.borderRadius) || '50%'
     },
     passedIconStyle: {
       fill: theme.Palette.success['05']
@@ -22,14 +23,14 @@ const retrieveStyle = _ref => {
       fill: theme.Palette.error['05']
     },
     errorsContainerStyle: {
-      borderTop: `1px solid ${theme.Palette.error['05']}`,
+      borderTop: "1px solid ".concat(theme.Palette.error['05']),
       marginTop: 7
     },
     warningDivider: {
       backgroundColor: (0, _classesUtils.withImportant)(theme.Palette.warning['05'])
     },
     validationContainer: {
-      margin: (0, _classesUtils.withImportant)(theme?.UTPasswordField?.validationContainer?.margin)
+      margin: (0, _classesUtils.withImportant)(theme === null || theme === void 0 || (_theme$UTPasswordFiel4 = theme.UTPasswordField) === null || _theme$UTPasswordFiel4 === void 0 || (_theme$UTPasswordFiel4 = _theme$UTPasswordFiel4.validationContainer) === null || _theme$UTPasswordFiel4 === void 0 ? void 0 : _theme$UTPasswordFiel4.margin)
     }
   };
 };