@widergy/energy-ui 3.22.3 → 3.22.4

package/dist/components/UTTextInput/theme.js

@@ -30,7 +30,7 @@ const retrieveStyle = _ref => {
     labelIcon: {
       height: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'inputIcon', 'height'], '12px'),
       width: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'inputIcon', 'width'], 'auto'),
-      fill: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'inputIcon', 'fill'], `${_colorsModule.default.gray}`),
+      fill: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'inputIcon', 'fill'], "".concat(_colorsModule.default.gray)),
       padding: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'inputIcon', 'padding'], '0px 5px 0px 0px')
     },
     labelContainer: {
@@ -54,20 +54,20 @@ const retrieveMuiTheme = (theme, muiTheme) => {
         },
         root: {
           '&:hover:not($disabled):not($focused):not($error) $notchedOutline': {
-            border: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'notchedOutline', 'hover', 'border'], `1px solid ${_colorsModule.default.gray}`),
+            border: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'notchedOutline', 'hover', 'border'], "1px solid ".concat(_colorsModule.default.gray)),
             borderColor: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'notchedOutline', 'hover', 'borderColor'], 'none')
           },
           '&$focused $notchedOutline': {
-            border: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'notchedOutline', 'focused', 'border'], `2px solid ${_colorsModule.default.primary}`),
+            border: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'notchedOutline', 'focused', 'border'], "2px solid ".concat(_colorsModule.default.primary)),
             borderColor: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'notchedOutline', 'hover', 'borderColor'], 'none')
           },
           '&$disabled $notchedOutline': {
-            border: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'notchedOutline', 'disabled', 'border'], `1px solid ${_colorsModule.default.gray}`),
+            border: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'notchedOutline', 'disabled', 'border'], "1px solid ".concat(_colorsModule.default.gray)),
             borderColor: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'notchedOutline', 'hover', 'borderColor'], 'none')
           }
         },
         notchedOutline: {
-          border: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'notchedOutline', 'unfocused', 'border'], `1px solid ${theme.Palette.error['05']}`),
+          border: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'notchedOutline', 'unfocused', 'border'], "1px solid ".concat(theme.Palette.error['05'])),
           borderColor: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'notchedOutline', 'hover', 'borderColor'], 'none')
         }
       },
@@ -81,25 +81,25 @@ const retrieveMuiTheme = (theme, muiTheme) => {
         },
         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))
           },
           '&:hover:not($disabled):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/UTToggle/components/ToggleOption/index.js

@@ -24,13 +24,13 @@ const ToggleOption = _ref => {
   } = _ref;
   const onHandleClick = () => onChange(value);
   const IconComponent = Icon && (SelectedIcon && isSelected ? /*#__PURE__*/_react.default.createElement(SelectedIcon, {
-    className: `${classes.icon} ${iconClassName}`
+    className: "".concat(classes.icon, " ").concat(iconClassName)
   }) : /*#__PURE__*/_react.default.createElement(Icon, {
-    className: `${classes.icon} ${isSelected ? classes.selectedIcon : classes.unselectedIcon} ${iconClassName}`
+    className: "".concat(classes.icon, " ").concat(isSelected ? classes.selectedIcon : classes.unselectedIcon, " ").concat(iconClassName)
   }));
   return /*#__PURE__*/_react.default.createElement(_UTTouchableWithoutFeedback.default, {
     onClick: onHandleClick,
-    className: `${classes.option} ${isSelected && classes.selectedOption} ${className}`,
+    className: "".concat(classes.option, " ").concat(isSelected && classes.selectedOption, " ").concat(className),
     keyName: keyName
   }, Icon ? IconComponent : /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     variant: "small",

package/dist/components/UTToggle/index.js

@@ -20,7 +20,7 @@ const UTToggle = _ref => {
     orientation,
     classes
   } = _ref;
-  const containerStyle = `${classes.container} ${orientation === 'horizontal' ? classes.horizontalContainer : classes.verticalContainer} ${className} `;
+  const containerStyle = "".concat(classes.container, " ").concat(orientation === 'horizontal' ? classes.horizontalContainer : classes.verticalContainer, " ").concat(className, " ");
   return /*#__PURE__*/_react.default.createElement("div", {
     className: containerStyle
   }, options.map(option => /*#__PURE__*/_react.default.createElement(_ToggleOption.default, {
@@ -31,7 +31,7 @@ const UTToggle = _ref => {
     SelectedIcon: option.SelectedIcon,
     isSelected: option.value === selectedOption,
     onChange: onChangeOption,
-    keyName: `toggle-option-${option.value}`,
+    keyName: "toggle-option-".concat(option.value),
     className: optionClassName,
     iconClassName: option.iconClassName,
     classes: classes

package/dist/components/UTToggle/theme.js

@@ -42,7 +42,7 @@ const retrieveStyle = _ref => {
       pointerEvents: (0, _seamlessImmutable.getIn)(theme, ['UTToggle', 'selectedOption', 'pointerEvents'], 'none')
     },
     selectedLabel: {
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTToggle', 'selectedLabel', 'color'], `${_colorsModule.default.white}`)
+      color: (0, _seamlessImmutable.getIn)(theme, ['UTToggle', 'selectedLabel', 'color'], "".concat(_colorsModule.default.white))
     },
     unSelectedLabel: {
       color: (0, _seamlessImmutable.getIn)(theme, ['UTToggle', 'unSelectedLabel', 'color'])
@@ -55,7 +55,7 @@ const retrieveStyle = _ref => {
       fill: (0, _seamlessImmutable.getIn)(theme, ['UTToggle', 'unselectedIcon', 'fill'])
     },
     selectedIcon: {
-      fill: (0, _seamlessImmutable.getIn)(theme, ['UTToggle', 'selectedIcon', 'fill'], `${_colorsModule.default.white}`)
+      fill: (0, _seamlessImmutable.getIn)(theme, ['UTToggle', 'selectedIcon', 'fill'], "".concat(_colorsModule.default.white))
     }
   };
 };

package/dist/components/UTTooltip/index.js

@@ -45,11 +45,11 @@ const UTTooltip = _ref => {
     duration: duration,
     arrow: arrow,
     hideOnClick: hideOnClick,
-    className: `${theme.container} ${forceArrow && _stylesModule.default.arrow}`,
+    className: "".concat(theme.container, " ").concat(forceArrow && _stylesModule.default.arrow),
     interactive: interactive
   }, tippyProps, {
     content: /*#__PURE__*/_react.default.isValidElement(content) ? content : /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
-      className: `${_stylesModule.default.baseContent} ${stringContentClassName}`,
+      className: "".concat(_stylesModule.default.baseContent, " ").concat(stringContentClassName),
       colorTheme: "light",
       variant: "xsmall",
       withMarkdown: true

package/dist/components/UTTooltip/theme.js

@@ -5,24 +5,25 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.retrieveStyle = void 0;
 const retrieveStyle = _ref => {
+  var _theme$UTTooltip, _theme$UTTooltip2, _theme$UTTooltip3, _theme$UTTooltip4, _theme$UTTooltip5, _theme$UTTooltip6, _theme$UTTooltip7, _theme$UTTooltip8, _theme$UTTooltip9;
   let {
     theme
   } = _ref;
   return {
     container: {
-      backgroundColor: theme?.UTTooltip?.container?.backgroundColor,
-      borderRadius: theme?.UTTooltip?.container?.borderRadius,
-      boxShadow: theme?.UTTooltip?.container?.boxShadow,
-      padding: theme?.UTTooltip?.container?.padding,
+      backgroundColor: theme === null || theme === void 0 || (_theme$UTTooltip = theme.UTTooltip) === null || _theme$UTTooltip === void 0 || (_theme$UTTooltip = _theme$UTTooltip.container) === null || _theme$UTTooltip === void 0 ? void 0 : _theme$UTTooltip.backgroundColor,
+      borderRadius: theme === null || theme === void 0 || (_theme$UTTooltip2 = theme.UTTooltip) === null || _theme$UTTooltip2 === void 0 || (_theme$UTTooltip2 = _theme$UTTooltip2.container) === null || _theme$UTTooltip2 === void 0 ? void 0 : _theme$UTTooltip2.borderRadius,
+      boxShadow: theme === null || theme === void 0 || (_theme$UTTooltip3 = theme.UTTooltip) === null || _theme$UTTooltip3 === void 0 || (_theme$UTTooltip3 = _theme$UTTooltip3.container) === null || _theme$UTTooltip3 === void 0 ? void 0 : _theme$UTTooltip3.boxShadow,
+      padding: theme === null || theme === void 0 || (_theme$UTTooltip4 = theme.UTTooltip) === null || _theme$UTTooltip4 === void 0 || (_theme$UTTooltip4 = _theme$UTTooltip4.container) === null || _theme$UTTooltip4 === void 0 ? void 0 : _theme$UTTooltip4.padding,
       '& > .tippy-arrow': {
-        display: theme?.UTTooltip?.arrow?.display
+        display: theme === null || theme === void 0 || (_theme$UTTooltip5 = theme.UTTooltip) === null || _theme$UTTooltip5 === void 0 || (_theme$UTTooltip5 = _theme$UTTooltip5.arrow) === null || _theme$UTTooltip5 === void 0 ? void 0 : _theme$UTTooltip5.display
       }
     },
     stringContent: {
-      fontSize: theme?.UTTooltip?.stringContent?.fontSize,
-      fontWeight: theme?.UTTooltip?.stringContent?.fontWeight,
-      lineHeight: theme?.UTTooltip?.stringContent?.lineHeight,
-      color: theme?.UTTooltip?.stringContent?.color
+      fontSize: theme === null || theme === void 0 || (_theme$UTTooltip6 = theme.UTTooltip) === null || _theme$UTTooltip6 === void 0 || (_theme$UTTooltip6 = _theme$UTTooltip6.stringContent) === null || _theme$UTTooltip6 === void 0 ? void 0 : _theme$UTTooltip6.fontSize,
+      fontWeight: theme === null || theme === void 0 || (_theme$UTTooltip7 = theme.UTTooltip) === null || _theme$UTTooltip7 === void 0 || (_theme$UTTooltip7 = _theme$UTTooltip7.stringContent) === null || _theme$UTTooltip7 === void 0 ? void 0 : _theme$UTTooltip7.fontWeight,
+      lineHeight: theme === null || theme === void 0 || (_theme$UTTooltip8 = theme.UTTooltip) === null || _theme$UTTooltip8 === void 0 || (_theme$UTTooltip8 = _theme$UTTooltip8.stringContent) === null || _theme$UTTooltip8 === void 0 ? void 0 : _theme$UTTooltip8.lineHeight,
+      color: theme === null || theme === void 0 || (_theme$UTTooltip9 = theme.UTTooltip) === null || _theme$UTTooltip9 === void 0 || (_theme$UTTooltip9 = _theme$UTTooltip9.stringContent) === null || _theme$UTTooltip9 === void 0 ? void 0 : _theme$UTTooltip9.color
     }
   };
 };

package/dist/components/UTTopbar/components/Notifications/index.js

@@ -22,7 +22,7 @@ const Notifications = _ref => {
   } = _ref;
   const IconComponent = (0, _array.isEmpty)(notifications) ? IconActive : IconInactive;
   return /*#__PURE__*/_react.default.createElement(IconComponent, {
-    className: `${_stylesModule.default.notificationsIcon} ${classes.notificationsIcon}`
+    className: "".concat(_stylesModule.default.notificationsIcon, " ").concat(classes.notificationsIcon)
   });
 };
 Notifications.propTypes = {

package/dist/components/UTTopbar/components/UserMenu/index.js

@@ -28,20 +28,16 @@ const UserMenu = _ref => {
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_UTTouchableWithoutFeedback.default, {
     onClick: handleClick,
-    className: `${justAvatar ? _stylesModule.default.justAvatarUserMenu : _stylesModule.default.userMenu} ${classes.userMenu} ${!handleClick && _stylesModule.default.disableMenu}`
+    className: "".concat(justAvatar ? _stylesModule.default.justAvatarUserMenu : _stylesModule.default.userMenu, " ").concat(classes.userMenu, " ").concat(!handleClick && _stylesModule.default.disableMenu)
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: `${_stylesModule.default.userMenuAvatar} ${classes.userMenuAvatar}`
+    className: "".concat(_stylesModule.default.userMenuAvatar, " ").concat(classes.userMenuAvatar)
   }, avatar), !justAvatar && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.labelWithArrow
   }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    className: `${classes.userMenuTitle} ${_stylesModule.default.userMenuTitle}`,
+    className: "".concat(classes.userMenuTitle, " ").concat(_stylesModule.default.userMenuTitle),
     withMarkdown: true
   }, title), handleClick && MenuComponent && /*#__PURE__*/_react.default.createElement(Arrow, {
-    className: `
-                ${classes.userMenuArrow}
-                ${_stylesModule.default.userMenuArrow}
-                ${!!menuOpened && _stylesModule.default.opened}
-              `
+    className: "\n                ".concat(classes.userMenuArrow, "\n                ").concat(_stylesModule.default.userMenuArrow, "\n                ").concat(!!menuOpened && _stylesModule.default.opened, "\n              ")
   })), subtitle)), MenuComponent);
 };
 UserMenu.propTypes = {

package/dist/components/UTTopbar/index.js

@@ -50,12 +50,12 @@ const UTTopbar = _ref => {
   const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(themeClasses, classNames), [classNames]);
   const showSideBarMenu = handleMenu && (isMobileSize || isMobileOrTablet);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: `${_stylesModule.default.container} ${showSideBarMenu && _stylesModule.default.containerWithMenu} ${classes.container}`
+    className: "".concat(_stylesModule.default.container, " ").concat(showSideBarMenu && _stylesModule.default.containerWithMenu, " ").concat(classes.container)
   }, showSideBarMenu && /*#__PURE__*/_react.default.createElement(_Menu.default, {
     onClick: handleMenu,
     className: classes.menuIcon
   }), (0, _array.isEmpty)(breadcrumbs) ? /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
-    className: `${isMobileSize && _stylesModule.default.mobileTitle}`
+    className: "".concat(isMobileSize && _stylesModule.default.mobileTitle)
   }, titleProps), title) : isMobileSize ? /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.showLastBreadcrumbContainer
   }, breadcrumbs.length > 1 && UTMenu, breadcrumbs.length > 1 && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
@@ -70,7 +70,7 @@ const UTTopbar = _ref => {
   }, breadcrumbs[breadcrumbs.length - 1].label)) : /*#__PURE__*/_react.default.createElement(_UTBreadcrumbs.default, _extends({
     breadcrumbs: breadcrumbs
   }, breadcrumbsProps)), /*#__PURE__*/_react.default.createElement("div", {
-    className: `${_stylesModule.default.rightSection} ${showSideBarMenu && _stylesModule.default.rightSectionWithMenu}`
+    className: "".concat(_stylesModule.default.rightSection, " ").concat(showSideBarMenu && _stylesModule.default.rightSectionWithMenu)
   }, children, enableNotifications && /*#__PURE__*/_react.default.createElement(_Notifications.default, {
     classes: classes,
     IconActive: notificationIconActive,

package/dist/components/UTTopbar/theme.js

@@ -7,69 +7,70 @@ 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$UTTopbar, _theme$UTTopbar2, _theme$UTTopbar3, _theme$UTTopbar4, _theme$UTTopbar5, _theme$UTTopbar6, _theme$UTTopbar7, _theme$UTTopbar8, _theme$UTTopbar9, _theme$UTTopbar10, _theme$UTTopbar11, _theme$UTTopbar12, _theme$UTTopbar13, _theme$UTTopbar14, _theme$UTTopbar15, _theme$UTTopbar16, _theme$UTTopbar17, _theme$UTTopbar18, _theme$UTTopbar19, _theme$UTTopbar20, _theme$UTTopbar21, _theme$UTTopbar22, _theme$UTTopbar23, _theme$UTTopbar24, _theme$UTTopbar25, _theme$UTTopbar26, _theme$UTTopbar27, _theme$UTTopbar28, _theme$UTTopbar29, _theme$UTTopbar30, _theme$UTTopbar31, _theme$UTTopbar32, _theme$UTTopbar33, _theme$UTTopbar34, _theme$UTTopbar35, _theme$UTTopbar36, _theme$UTTopbar37, _theme$UTTopbar38, _theme$UTTopbar39, _theme$UTTopbar40;
   let {
     theme
   } = _ref;
   return {
     container: {
-      background: theme?.UTTopbar?.container?.background || _colorsModule.default.white,
-      borderBottom: theme?.UTTopbar?.container?.borderBottom,
-      height: theme?.UTTopbar?.container?.height,
-      padding: theme?.UTTopbar?.container?.padding || '10px 20px',
-      position: theme?.UTTopbar?.container?.position,
-      top: theme?.UTTopbar?.container?.top,
-      zIndex: theme?.UTTopbar?.container?.zIndex
+      background: (theme === null || theme === void 0 || (_theme$UTTopbar = theme.UTTopbar) === null || _theme$UTTopbar === void 0 || (_theme$UTTopbar = _theme$UTTopbar.container) === null || _theme$UTTopbar === void 0 ? void 0 : _theme$UTTopbar.background) || _colorsModule.default.white,
+      borderBottom: theme === null || theme === void 0 || (_theme$UTTopbar2 = theme.UTTopbar) === null || _theme$UTTopbar2 === void 0 || (_theme$UTTopbar2 = _theme$UTTopbar2.container) === null || _theme$UTTopbar2 === void 0 ? void 0 : _theme$UTTopbar2.borderBottom,
+      height: theme === null || theme === void 0 || (_theme$UTTopbar3 = theme.UTTopbar) === null || _theme$UTTopbar3 === void 0 || (_theme$UTTopbar3 = _theme$UTTopbar3.container) === null || _theme$UTTopbar3 === void 0 ? void 0 : _theme$UTTopbar3.height,
+      padding: (theme === null || theme === void 0 || (_theme$UTTopbar4 = theme.UTTopbar) === null || _theme$UTTopbar4 === void 0 || (_theme$UTTopbar4 = _theme$UTTopbar4.container) === null || _theme$UTTopbar4 === void 0 ? void 0 : _theme$UTTopbar4.padding) || '10px 20px',
+      position: theme === null || theme === void 0 || (_theme$UTTopbar5 = theme.UTTopbar) === null || _theme$UTTopbar5 === void 0 || (_theme$UTTopbar5 = _theme$UTTopbar5.container) === null || _theme$UTTopbar5 === void 0 ? void 0 : _theme$UTTopbar5.position,
+      top: theme === null || theme === void 0 || (_theme$UTTopbar6 = theme.UTTopbar) === null || _theme$UTTopbar6 === void 0 || (_theme$UTTopbar6 = _theme$UTTopbar6.container) === null || _theme$UTTopbar6 === void 0 ? void 0 : _theme$UTTopbar6.top,
+      zIndex: theme === null || theme === void 0 || (_theme$UTTopbar7 = theme.UTTopbar) === null || _theme$UTTopbar7 === void 0 || (_theme$UTTopbar7 = _theme$UTTopbar7.container) === null || _theme$UTTopbar7 === void 0 ? void 0 : _theme$UTTopbar7.zIndex
     },
     breadCrumb: {
       '&:hover': {
-        backgroundColor: theme?.UTTopbar?.breadCrumb?.hover?.backgroundColor,
-        textDecoration: theme?.UTTopbar?.breadCrumb?.hover?.textDecoration,
-        cursor: theme?.UTTopbar?.breadCrumb?.hover?.cursor
+        backgroundColor: theme === null || theme === void 0 || (_theme$UTTopbar8 = theme.UTTopbar) === null || _theme$UTTopbar8 === void 0 || (_theme$UTTopbar8 = _theme$UTTopbar8.breadCrumb) === null || _theme$UTTopbar8 === void 0 || (_theme$UTTopbar8 = _theme$UTTopbar8.hover) === null || _theme$UTTopbar8 === void 0 ? void 0 : _theme$UTTopbar8.backgroundColor,
+        textDecoration: theme === null || theme === void 0 || (_theme$UTTopbar9 = theme.UTTopbar) === null || _theme$UTTopbar9 === void 0 || (_theme$UTTopbar9 = _theme$UTTopbar9.breadCrumb) === null || _theme$UTTopbar9 === void 0 || (_theme$UTTopbar9 = _theme$UTTopbar9.hover) === null || _theme$UTTopbar9 === void 0 ? void 0 : _theme$UTTopbar9.textDecoration,
+        cursor: theme === null || theme === void 0 || (_theme$UTTopbar10 = theme.UTTopbar) === null || _theme$UTTopbar10 === void 0 || (_theme$UTTopbar10 = _theme$UTTopbar10.breadCrumb) === null || _theme$UTTopbar10 === void 0 || (_theme$UTTopbar10 = _theme$UTTopbar10.hover) === null || _theme$UTTopbar10 === void 0 ? void 0 : _theme$UTTopbar10.cursor
       }
     },
     userMenu: {
-      borderLeft: theme?.UTTopbar?.userMenu?.borderLeft,
-      margin: theme?.UTTopbar?.userMenu?.margin || '0 0 0 20px',
-      minWidth: theme?.UTTopbar?.userMenu?.minWidth,
-      padding: theme?.UTTopbar?.userMenu?.padding || '0 0 0 20px',
-      justifyContent: theme?.UTTopbar?.userMenu?.justifyContent
+      borderLeft: theme === null || theme === void 0 || (_theme$UTTopbar11 = theme.UTTopbar) === null || _theme$UTTopbar11 === void 0 || (_theme$UTTopbar11 = _theme$UTTopbar11.userMenu) === null || _theme$UTTopbar11 === void 0 ? void 0 : _theme$UTTopbar11.borderLeft,
+      margin: (theme === null || theme === void 0 || (_theme$UTTopbar12 = theme.UTTopbar) === null || _theme$UTTopbar12 === void 0 || (_theme$UTTopbar12 = _theme$UTTopbar12.userMenu) === null || _theme$UTTopbar12 === void 0 ? void 0 : _theme$UTTopbar12.margin) || '0 0 0 20px',
+      minWidth: theme === null || theme === void 0 || (_theme$UTTopbar13 = theme.UTTopbar) === null || _theme$UTTopbar13 === void 0 || (_theme$UTTopbar13 = _theme$UTTopbar13.userMenu) === null || _theme$UTTopbar13 === void 0 ? void 0 : _theme$UTTopbar13.minWidth,
+      padding: (theme === null || theme === void 0 || (_theme$UTTopbar14 = theme.UTTopbar) === null || _theme$UTTopbar14 === void 0 || (_theme$UTTopbar14 = _theme$UTTopbar14.userMenu) === null || _theme$UTTopbar14 === void 0 ? void 0 : _theme$UTTopbar14.padding) || '0 0 0 20px',
+      justifyContent: theme === null || theme === void 0 || (_theme$UTTopbar15 = theme.UTTopbar) === null || _theme$UTTopbar15 === void 0 || (_theme$UTTopbar15 = _theme$UTTopbar15.userMenu) === null || _theme$UTTopbar15 === void 0 ? void 0 : _theme$UTTopbar15.justifyContent
     },
     userMenuAvatar: {
-      background: theme?.UTTopbar?.userMenuAvatar?.background,
-      border: theme?.UTTopbar?.userMenuAvatar?.border,
-      borderRadius: theme?.UTTopbar?.userMenuAvatar?.borderRadius || '50%',
-      color: theme?.UTTopbar?.userMenuAvatar?.color,
-      fontSize: theme?.UTTopbar?.userMenuAvatar?.fontSize || 24,
-      fontWeight: theme?.UTTopbar?.userMenuAvatar?.fontWeight || 500,
-      height: theme?.UTTopbar?.userMenuAvatar?.height || 40,
-      margin: theme?.UTTopbar?.userMenuAvatar?.margin || '0 10px 0 0',
-      width: theme?.UTTopbar?.userMenuAvatar?.width || 40
+      background: theme === null || theme === void 0 || (_theme$UTTopbar16 = theme.UTTopbar) === null || _theme$UTTopbar16 === void 0 || (_theme$UTTopbar16 = _theme$UTTopbar16.userMenuAvatar) === null || _theme$UTTopbar16 === void 0 ? void 0 : _theme$UTTopbar16.background,
+      border: theme === null || theme === void 0 || (_theme$UTTopbar17 = theme.UTTopbar) === null || _theme$UTTopbar17 === void 0 || (_theme$UTTopbar17 = _theme$UTTopbar17.userMenuAvatar) === null || _theme$UTTopbar17 === void 0 ? void 0 : _theme$UTTopbar17.border,
+      borderRadius: (theme === null || theme === void 0 || (_theme$UTTopbar18 = theme.UTTopbar) === null || _theme$UTTopbar18 === void 0 || (_theme$UTTopbar18 = _theme$UTTopbar18.userMenuAvatar) === null || _theme$UTTopbar18 === void 0 ? void 0 : _theme$UTTopbar18.borderRadius) || '50%',
+      color: theme === null || theme === void 0 || (_theme$UTTopbar19 = theme.UTTopbar) === null || _theme$UTTopbar19 === void 0 || (_theme$UTTopbar19 = _theme$UTTopbar19.userMenuAvatar) === null || _theme$UTTopbar19 === void 0 ? void 0 : _theme$UTTopbar19.color,
+      fontSize: (theme === null || theme === void 0 || (_theme$UTTopbar20 = theme.UTTopbar) === null || _theme$UTTopbar20 === void 0 || (_theme$UTTopbar20 = _theme$UTTopbar20.userMenuAvatar) === null || _theme$UTTopbar20 === void 0 ? void 0 : _theme$UTTopbar20.fontSize) || 24,
+      fontWeight: (theme === null || theme === void 0 || (_theme$UTTopbar21 = theme.UTTopbar) === null || _theme$UTTopbar21 === void 0 || (_theme$UTTopbar21 = _theme$UTTopbar21.userMenuAvatar) === null || _theme$UTTopbar21 === void 0 ? void 0 : _theme$UTTopbar21.fontWeight) || 500,
+      height: (theme === null || theme === void 0 || (_theme$UTTopbar22 = theme.UTTopbar) === null || _theme$UTTopbar22 === void 0 || (_theme$UTTopbar22 = _theme$UTTopbar22.userMenuAvatar) === null || _theme$UTTopbar22 === void 0 ? void 0 : _theme$UTTopbar22.height) || 40,
+      margin: (theme === null || theme === void 0 || (_theme$UTTopbar23 = theme.UTTopbar) === null || _theme$UTTopbar23 === void 0 || (_theme$UTTopbar23 = _theme$UTTopbar23.userMenuAvatar) === null || _theme$UTTopbar23 === void 0 ? void 0 : _theme$UTTopbar23.margin) || '0 10px 0 0',
+      width: (theme === null || theme === void 0 || (_theme$UTTopbar24 = theme.UTTopbar) === null || _theme$UTTopbar24 === void 0 || (_theme$UTTopbar24 = _theme$UTTopbar24.userMenuAvatar) === null || _theme$UTTopbar24 === void 0 ? void 0 : _theme$UTTopbar24.width) || 40
     },
     userMenuArrow: {
-      alignSelf: theme?.UTTopbar?.userMenuArrow?.alignSelf,
-      color: theme?.UTTopbar?.userMenuArrow?.color,
-      fontSize: theme?.UTTopbar?.userMenuArrow?.fontSize,
-      height: theme?.UTTopbar?.userMenuArrow?.height || 20,
-      margin: theme?.UTTopbar?.userMenuArrow?.margin || '0 0 0 6px',
-      width: theme?.UTTopbar?.userMenuArrow?.width || 'auto'
+      alignSelf: theme === null || theme === void 0 || (_theme$UTTopbar25 = theme.UTTopbar) === null || _theme$UTTopbar25 === void 0 || (_theme$UTTopbar25 = _theme$UTTopbar25.userMenuArrow) === null || _theme$UTTopbar25 === void 0 ? void 0 : _theme$UTTopbar25.alignSelf,
+      color: theme === null || theme === void 0 || (_theme$UTTopbar26 = theme.UTTopbar) === null || _theme$UTTopbar26 === void 0 || (_theme$UTTopbar26 = _theme$UTTopbar26.userMenuArrow) === null || _theme$UTTopbar26 === void 0 ? void 0 : _theme$UTTopbar26.color,
+      fontSize: theme === null || theme === void 0 || (_theme$UTTopbar27 = theme.UTTopbar) === null || _theme$UTTopbar27 === void 0 || (_theme$UTTopbar27 = _theme$UTTopbar27.userMenuArrow) === null || _theme$UTTopbar27 === void 0 ? void 0 : _theme$UTTopbar27.fontSize,
+      height: (theme === null || theme === void 0 || (_theme$UTTopbar28 = theme.UTTopbar) === null || _theme$UTTopbar28 === void 0 || (_theme$UTTopbar28 = _theme$UTTopbar28.userMenuArrow) === null || _theme$UTTopbar28 === void 0 ? void 0 : _theme$UTTopbar28.height) || 20,
+      margin: (theme === null || theme === void 0 || (_theme$UTTopbar29 = theme.UTTopbar) === null || _theme$UTTopbar29 === void 0 || (_theme$UTTopbar29 = _theme$UTTopbar29.userMenuArrow) === null || _theme$UTTopbar29 === void 0 ? void 0 : _theme$UTTopbar29.margin) || '0 0 0 6px',
+      width: (theme === null || theme === void 0 || (_theme$UTTopbar30 = theme.UTTopbar) === null || _theme$UTTopbar30 === void 0 || (_theme$UTTopbar30 = _theme$UTTopbar30.userMenuArrow) === null || _theme$UTTopbar30 === void 0 ? void 0 : _theme$UTTopbar30.width) || 'auto'
     },
     userMenuTitle: {
-      color: theme?.UTTopbar?.userMenuTitle?.color,
-      fontSize: theme?.UTTopbar?.userMenuTitle?.fontSize,
-      fontWeight: theme?.UTTopbar?.userMenuTitle?.fontWeight || 500,
-      margin: theme?.UTTopbar?.userMenuTitle?.margin
+      color: theme === null || theme === void 0 || (_theme$UTTopbar31 = theme.UTTopbar) === null || _theme$UTTopbar31 === void 0 || (_theme$UTTopbar31 = _theme$UTTopbar31.userMenuTitle) === null || _theme$UTTopbar31 === void 0 ? void 0 : _theme$UTTopbar31.color,
+      fontSize: theme === null || theme === void 0 || (_theme$UTTopbar32 = theme.UTTopbar) === null || _theme$UTTopbar32 === void 0 || (_theme$UTTopbar32 = _theme$UTTopbar32.userMenuTitle) === null || _theme$UTTopbar32 === void 0 ? void 0 : _theme$UTTopbar32.fontSize,
+      fontWeight: (theme === null || theme === void 0 || (_theme$UTTopbar33 = theme.UTTopbar) === null || _theme$UTTopbar33 === void 0 || (_theme$UTTopbar33 = _theme$UTTopbar33.userMenuTitle) === null || _theme$UTTopbar33 === void 0 ? void 0 : _theme$UTTopbar33.fontWeight) || 500,
+      margin: theme === null || theme === void 0 || (_theme$UTTopbar34 = theme.UTTopbar) === null || _theme$UTTopbar34 === void 0 || (_theme$UTTopbar34 = _theme$UTTopbar34.userMenuTitle) === null || _theme$UTTopbar34 === void 0 ? void 0 : _theme$UTTopbar34.margin
     },
     notifications: {
-      padding: theme?.UTTopbar?.notifications?.padding || '0 20px'
+      padding: (theme === null || theme === void 0 || (_theme$UTTopbar35 = theme.UTTopbar) === null || _theme$UTTopbar35 === void 0 || (_theme$UTTopbar35 = _theme$UTTopbar35.notifications) === null || _theme$UTTopbar35 === void 0 ? void 0 : _theme$UTTopbar35.padding) || '0 20px'
     },
     notificationsIcon: {
-      height: theme?.UTTopbar?.notificationsIcon?.height || 32,
-      fontSize: theme?.UTTopbar?.notificationsIcon?.fontSize || 30,
-      padding: theme?.UTTopbar?.notificationsIcon?.padding
+      height: (theme === null || theme === void 0 || (_theme$UTTopbar36 = theme.UTTopbar) === null || _theme$UTTopbar36 === void 0 || (_theme$UTTopbar36 = _theme$UTTopbar36.notificationsIcon) === null || _theme$UTTopbar36 === void 0 ? void 0 : _theme$UTTopbar36.height) || 32,
+      fontSize: (theme === null || theme === void 0 || (_theme$UTTopbar37 = theme.UTTopbar) === null || _theme$UTTopbar37 === void 0 || (_theme$UTTopbar37 = _theme$UTTopbar37.notificationsIcon) === null || _theme$UTTopbar37 === void 0 ? void 0 : _theme$UTTopbar37.fontSize) || 30,
+      padding: theme === null || theme === void 0 || (_theme$UTTopbar38 = theme.UTTopbar) === null || _theme$UTTopbar38 === void 0 || (_theme$UTTopbar38 = _theme$UTTopbar38.notificationsIcon) === null || _theme$UTTopbar38 === void 0 ? void 0 : _theme$UTTopbar38.padding
     },
     menuIcon: {
-      color: theme?.UTTopbar?.menuIcon?.color,
-      fontSize: theme?.UTTopbar?.menuIcon?.fontSize || 25
+      color: theme === null || theme === void 0 || (_theme$UTTopbar39 = theme.UTTopbar) === null || _theme$UTTopbar39 === void 0 || (_theme$UTTopbar39 = _theme$UTTopbar39.menuIcon) === null || _theme$UTTopbar39 === void 0 ? void 0 : _theme$UTTopbar39.color,
+      fontSize: (theme === null || theme === void 0 || (_theme$UTTopbar40 = theme.UTTopbar) === null || _theme$UTTopbar40 === void 0 || (_theme$UTTopbar40 = _theme$UTTopbar40.menuIcon) === null || _theme$UTTopbar40 === void 0 ? void 0 : _theme$UTTopbar40.fontSize) || 25
     }
   };
 };

package/dist/components/UTTouchableWithoutFeedback/index.js

@@ -30,7 +30,7 @@ const UTTouchableWithoutFeedback = _ref => {
   return /*#__PURE__*/_react.default.createElement("div", _extends({}, props, {
     role: "button",
     onClick: onClick,
-    className: `${_stylesModule.default.container} ${className}`,
+    className: "".concat(_stylesModule.default.container, " ").concat(className),
     key: keyName,
     ref: setRef
   }), children, /*#__PURE__*/_react.default.createElement(_UTRipple.default, {

package/dist/components/UTTracker/components/Step/index.js

@@ -28,43 +28,27 @@ const Step = _ref => {
   const stepActive = isActive(step.id);
   const themedStyles = (0, _classesUtils.mergeClasses)(classes, _stylesModule.default);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: `
-     ${themedStyles.outerContainer}
-      ${stepActive && themedStyles.activeOuterContainer}
-      ${first && _stylesModule.default.stepMargin}
-    `
+    className: "\n     ".concat(themedStyles.outerContainer, "\n      ").concat(stepActive && themedStyles.activeOuterContainer, "\n      ").concat(first && _stylesModule.default.stepMargin, "\n    ")
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: themedStyles.containerStep
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: `
-        ${themedStyles.container}
-        ${classes.containerStep}
-        ${stepCompleted && classes.completedLight}
-        ${stepActive && classes.activeContainer}
-        ${stepActive && variant === _constants.ERROR && classes.fullContainer}
-      `
+    className: "\n        ".concat(themedStyles.container, "\n        ").concat(classes.containerStep, "\n        ").concat(stepCompleted && classes.completedLight, "\n        ").concat(stepActive && classes.activeContainer, "\n        ").concat(stepActive && variant === _constants.ERROR && classes.fullContainer, "\n      ")
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: `
-          ${themedStyles.innerContainer}
-          ${classes.innerContainer}
-          ${stepCompleted && classes.completedInnerContainer}
-          ${stepActive && classes.activeInnerContainer}
-          ${stepCompleted && themedStyles.completedOuterContainer}
-        `
+    className: "\n          ".concat(themedStyles.innerContainer, "\n          ").concat(classes.innerContainer, "\n          ").concat(stepCompleted && classes.completedInnerContainer, "\n          ").concat(stepActive && classes.activeInnerContainer, "\n          ").concat(stepCompleted && themedStyles.completedOuterContainer, "\n        ")
   }, stepActive && variant === _constants.ERROR && /*#__PURE__*/_react.default.createElement(_UTIcon.default, {
     colorTheme: "light",
     name: "IconX",
     size: ERROR_ICON_SIZE,
     className: themedStyles.icon
   })))), /*#__PURE__*/_react.default.createElement("div", {
-    className: `${themedStyles.textContainer} ${stepCompleted && themedStyles.completedOuterContainer}`
+    className: "".concat(themedStyles.textContainer, " ").concat(stepCompleted && themedStyles.completedOuterContainer)
   }, step.title && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    className: `${stepCompleted ? themedStyles.completedTitleColor : stepActive ? themedStyles.activeTitleColor : themedStyles.titleColor}`,
+    className: "".concat(stepCompleted ? themedStyles.completedTitleColor : stepActive ? themedStyles.activeTitleColor : themedStyles.titleColor),
     colorTheme: stepActive ? (0, _utils.getLabelTheme)(variant) : 'dark',
     variant: "small",
     weight: "medium"
   }, step.title), step.subtitle && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    className: `${themedStyles.subtitleColor} ${themedStyles.subtitle}`
+    className: "".concat(themedStyles.subtitleColor, " ").concat(themedStyles.subtitle)
   }, step.subtitle), step.description && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     variant: "small",
     colorTheme: "gray",

package/dist/components/UTTracker/index.js

@@ -38,10 +38,10 @@ const UTTracker = _ref => {
   const isCompleted = stepNumber => stepNumber < currentStep;
   const isActive = stepNumber => stepNumber === currentStep;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: `${classes.outerContainer}`
+    className: "".concat(classes.outerContainer)
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: `${classes.container} ${mode !== _constants.FLAT ? _stylesModule.default.container : _stylesModule.default.containerFlat} ${!detailsTab && _stylesModule.default.roundedBorders}`
-  }, title && (mode === _constants.FLAT && detailsTab?.enabled ? /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    className: "".concat(classes.container, " ").concat(mode !== _constants.FLAT ? _stylesModule.default.container : _stylesModule.default.containerFlat, " ").concat(!detailsTab && _stylesModule.default.roundedBorders)
+  }, title && (mode === _constants.FLAT && detailsTab !== null && detailsTab !== void 0 && detailsTab.enabled ? /*#__PURE__*/_react.default.createElement(_UTButton.default, {
     onClick: () => setIsCollapsed(!isCollapsed),
     classNames: {
       childrenContainer: _stylesModule.default.button,
@@ -58,28 +58,31 @@ const UTTracker = _ref => {
     style: {
       height
     },
-    className: `${title && _stylesModule.default.connectorTitle} ${isCollapsed ? _stylesModule.default.connectorCollapsed : _stylesModule.default.connector} ${classes.connector}`
+    className: "".concat(title && _stylesModule.default.connectorTitle, " ").concat(isCollapsed ? _stylesModule.default.connectorCollapsed : _stylesModule.default.connector, " ").concat(classes.connector)
   }), steps && /*#__PURE__*/_react.default.createElement("div", {
     ref: el => {
       if (!el) return;
       setHeight(el.getBoundingClientRect().height - 45);
     }
-  }, steps?.map((step, index) => /*#__PURE__*/_react.default.createElement("div", {
-    key: step.id
-  }, /*#__PURE__*/_react.default.createElement(_Step.default, {
-    first: index === 0,
-    index,
-    isActive,
-    isCompleted,
-    step,
-    variant,
-    classes: classes
-  }), isCollapsed && /*#__PURE__*/_react.default.createElement("div", null, !(0, _isEmpty.default)(step.subSteps) && step.subSteps?.map(subStep => /*#__PURE__*/_react.default.createElement(_SubStep.default, _extends({
-    key: subStep.id
-  }, subStep, {
-    className: classes.subStep
-  }))))))))), detailsTab?.enabled && mode === _constants.CARD && /*#__PURE__*/_react.default.createElement("div", {
-    className: `${_stylesModule.default.detailButtonContainer} ${classes.detailButtonContainer}`
+  }, steps === null || steps === void 0 ? void 0 : steps.map((step, index) => {
+    var _step$subSteps;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: step.id
+    }, /*#__PURE__*/_react.default.createElement(_Step.default, {
+      first: index === 0,
+      index,
+      isActive,
+      isCompleted,
+      step,
+      variant,
+      classes: classes
+    }), isCollapsed && /*#__PURE__*/_react.default.createElement("div", null, !(0, _isEmpty.default)(step.subSteps) && ((_step$subSteps = step.subSteps) === null || _step$subSteps === void 0 ? void 0 : _step$subSteps.map(subStep => /*#__PURE__*/_react.default.createElement(_SubStep.default, _extends({
+      key: subStep.id
+    }, subStep, {
+      className: classes.subStep
+    }))))));
+  })))), (detailsTab === null || detailsTab === void 0 ? void 0 : detailsTab.enabled) && mode === _constants.CARD && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.detailButtonContainer, " ").concat(classes.detailButtonContainer)
   }, /*#__PURE__*/_react.default.createElement(_UTButton.default, {
     classNames: {
       childrenContainer: _stylesModule.default.button,

package/dist/components/UTTracker/theme.js

@@ -7,18 +7,20 @@ exports.retrieveStyle = void 0;
 var _constants = require("./constants");
 var _utils = require("./utils");
 const getBorderColor = _ref => {
+  var _theme$Palette$action, _theme$Palette$accent;
   let {
     theme,
     variant
   } = _ref;
-  return variant === _constants.VARIANTS.error ? `${theme.Palette.error['04']} !important` : `${theme.Palette.actions?.accent['04'] || theme.Palette.accent?.['04']} !important`;
+  return variant === _constants.VARIANTS.error ? "".concat(theme.Palette.error['04'], " !important") : "".concat(((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action.accent['04']) || ((_theme$Palette$accent = theme.Palette.accent) === null || _theme$Palette$accent === void 0 ? void 0 : _theme$Palette$accent['04']), " !important");
 };
 const getBorderLightColor = _ref2 => {
+  var _theme$Palette$action2, _theme$Palette$accent2;
   let {
     theme,
     variant
   } = _ref2;
-  return variant === _constants.VARIANTS.error ? `${theme.Palette.error['04']} !important` : `${theme.Palette.actions?.accent['04'] || theme.Palette.accent?.['04']} !important`;
+  return variant === _constants.VARIANTS.error ? "".concat(theme.Palette.error['04'], " !important") : "".concat(((_theme$Palette$action2 = theme.Palette.actions) === null || _theme$Palette$action2 === void 0 ? void 0 : _theme$Palette$action2.accent['04']) || ((_theme$Palette$accent2 = theme.Palette.accent) === null || _theme$Palette$accent2 === void 0 ? void 0 : _theme$Palette$accent2['04']), " !important");
 };
 const retrieveStyle = _ref3 => {
   let {
@@ -64,11 +66,11 @@ const retrieveStyle = _ref3 => {
       backgroundColor: theme.Palette.light['01']
     },
     connector: {
-      borderLeft: `2px dashed ${theme.Palette.gray['04']}`
+      borderLeft: "2px dashed ".concat(theme.Palette.gray['04'])
     },
     detailButtonContainer: {
       backgroundColor: theme.Palette.light['01'],
-      borderTop: `1px solid ${theme.Palette.light['04']}`
+      borderTop: "1px solid ".concat(theme.Palette.light['04'])
     },
     containerStep: {
       backgroundColor: theme.Palette.light['01'],

package/dist/components/UTVirtualizedList/components/VirtualizedData/components/ListRow/index.js

@@ -13,6 +13,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 /* eslint-disable react/no-array-index-key */
 
 const ListRow = _ref => {
+  var _ledgerRef$current$el, _ledgerRef$current;
   let {
     row,
     index,
@@ -21,7 +22,7 @@ const ListRow = _ref => {
     updateLedger,
     ledgerRef
   } = _ref;
-  const elementKey = `${_constants.KEY}${index}`;
+  const elementKey = "".concat(_constants.KEY).concat(index);
   const {
     setRef
   } = (0, _energyHooks.useResizeEvent)(element => {
@@ -38,13 +39,13 @@ const ListRow = _ref => {
   const width = elementWidth - itemPadding;
   return /*#__PURE__*/_react.default.createElement("div", {
     key: elementKey,
-    className: `${_stylesModule.default.row} ${_stylesModule.default[effect]}`,
+    className: "".concat(_stylesModule.default.row, " ").concat(_stylesModule.default[effect]),
     style: {
-      top: ledgerRef.current?.[elementKey]?.offset ?? 0
+      top: (_ledgerRef$current$el = (_ledgerRef$current = ledgerRef.current) === null || _ledgerRef$current === void 0 || (_ledgerRef$current = _ledgerRef$current[elementKey]) === null || _ledgerRef$current === void 0 ? void 0 : _ledgerRef$current.offset) !== null && _ledgerRef$current$el !== void 0 ? _ledgerRef$current$el : 0
     },
     ref: setRef
   }, row.map((item, itemIndex) => item && /*#__PURE__*/_react.default.createElement("div", {
-    key: `${_constants.SUB_KEY}${itemIndex}`,
+    key: "".concat(_constants.SUB_KEY).concat(itemIndex),
     style: {
       padding: itemPadding / 2,
       width,

package/dist/components/UTVirtualizedList/components/VirtualizedData/components/ListRow/utils.js

@@ -5,9 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getDynamicPosition = void 0;
 const getDynamicPosition = (ref, position, setPosition) => {
-  const sibling = ref.current?.previousSibling;
-  const height = sibling?.clientHeight ?? 0;
-  const offsetTop = sibling?.offsetTop ?? 0;
+  var _ref$current, _sibling$clientHeight, _sibling$offsetTop;
+  const sibling = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.previousSibling;
+  const height = (_sibling$clientHeight = sibling === null || sibling === void 0 ? void 0 : sibling.clientHeight) !== null && _sibling$clientHeight !== void 0 ? _sibling$clientHeight : 0;
+  const offsetTop = (_sibling$offsetTop = sibling === null || sibling === void 0 ? void 0 : sibling.offsetTop) !== null && _sibling$offsetTop !== void 0 ? _sibling$offsetTop : 0;
   if (position !== offsetTop + height) setPosition(sibling ? offsetTop + height : 0);
 };
 exports.getDynamicPosition = getDynamicPosition;

package/dist/components/UTVirtualizedList/components/VirtualizedData/hooks/use-ledger.js

@@ -13,7 +13,7 @@ const useLedger = data => {
   const resetLedger = () => {
     const newLedger = {};
     data.forEach((_, index) => {
-      newLedger[`${_constants.KEY}${index}`] = {
+      newLedger["".concat(_constants.KEY).concat(index)] = {
         height: 0,
         offset: 0
       };