@widergy/energy-ui 3.22.3 → 3.22.4

package/dist/components/UTTable/index.js

@@ -162,7 +162,10 @@ const UTTable = _ref => {
   };
   const showPagination = !disablePagination && !loading && !(0, _array.isEmpty)(currentRows);
   const rowStyles = (0, _react.useMemo)(() => (0, _utils.createRowStyles)(rowPadding, rowSpacing, headerPadding, isResponsive), [rowPadding, rowSpacing, headerPadding, isResponsive]);
-  const tableWidth = (0, _react.useMemo)(() => entry?.target?.clientWidth || '100%', [entry]);
+  const tableWidth = (0, _react.useMemo)(() => {
+    var _entry$target;
+    return (entry === null || entry === void 0 || (_entry$target = entry.target) === null || _entry$target === void 0 ? void 0 : _entry$target.clientWidth) || '100%';
+  }, [entry]);
   const handleScrollbarSync = ps => {
     setTimeout(() => {
       ps.update();
@@ -172,7 +175,8 @@ const UTTable = _ref => {
   const CellComponent = isResponsive ? _ResponsiveCell.default : _Cell.default;
   const totalRowLabel = isResponsive ? '' : totalRowsLabel || (data.length === 1 ? _constants.TOTAL_ROW_LABEL : _constants.TOTAL_ROWS_LABEL);
   const handleSinchronizeContent = event => {
-    if (contentRef.current && stickyHeader) contentRef.current.scrollTo(event?.target?.scrollLeft, 0);
+    var _event$target;
+    if (contentRef.current && stickyHeader) contentRef.current.scrollTo(event === null || event === void 0 || (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.scrollLeft, 0);
   };
   const columnSizes = (0, _react.useMemo)(() => (0, _utils.getColumnsSizes)({
     columns,
@@ -181,16 +185,16 @@ const UTTable = _ref => {
   }), [columns, fitColumnsWidth, selectable]);
   const Content = /*#__PURE__*/_react.default.createElement("div", {
     ref: contentRef,
-    className: `${(0, _array.isEmpty)(currentRows) && _stylesModule.default.preventScrolling}`,
+    className: "".concat((0, _array.isEmpty)(currentRows) && _stylesModule.default.preventScrolling),
     style: {
       overflow: !isResponsive && stickyHeader && 'hidden',
       width: tableWidth
     }
   }, /*#__PURE__*/_react.default.createElement(_UTLoading.default, {
     loading: loading,
-    className: `${_stylesModule.default.tableLoading} ${classes.tableLoading}`
+    className: "".concat(_stylesModule.default.tableLoading, " ").concat(classes.tableLoading)
   }, (0, _array.isEmpty)(currentRows) ? /*#__PURE__*/_react.default.createElement("div", {
-    className: `${_stylesModule.default.noResultsContainer} ${classes.noResultsContainer}`,
+    className: "".concat(_stylesModule.default.noResultsContainer, " ").concat(classes.noResultsContainer),
     style: {
       width: tableWidth
     }
@@ -202,7 +206,7 @@ const UTTable = _ref => {
     const isRowClickable = onRowClick && (!clickableRowValidation || clickableRowValidation(row));
     const handleRowClick = isRowClickable ? event => onRowClick(event, row) : undefined;
     return /*#__PURE__*/_react.default.createElement(_TableRow.default, {
-      key: row[rowKey] && `row_${row[rowKey]}`,
+      key: row[rowKey] && "row_".concat(row[rowKey]),
       CellComponent: CellComponent,
       cellProps: {
         defaultNullValue,
@@ -212,11 +216,7 @@ const UTTable = _ref => {
       },
       checkBoxOnChange: () => selectRow(row),
       checkBoxSelected: isSelected,
-      className: `
-                  ${isResponsive && _stylesModule.default.responsiveRow}
-                  ${isRowClickable && classes.rowContainerClickable}
-                  ${getRowClassName(row)}
-                `,
+      className: "\n                  ".concat(isResponsive && _stylesModule.default.responsiveRow, "\n                  ").concat(isRowClickable && classes.rowContainerClickable, "\n                  ").concat(getRowClassName(row), "\n                "),
       columnsDefinition: columnsDefinition,
       columnSizes: columnSizes,
       containerStyle: {
@@ -225,11 +225,11 @@ const UTTable = _ref => {
       },
       isResponsive: isResponsive,
       exclusiveSelection: exclusiveSelection,
-      fixedRowsLeftClassName: `${classes.fixedRowLeft} ${selectedClassNames} ${isFirstRow(index) && classes.firstFixedRowLeft} ${isLastRow(index) && classes.lastFixedRowLeft}`,
-      fixedRowsRightClassName: `${classes.fixedRowRight} ${selectedClassNames} ${isFirstRow(index) && classes.firstFixedRowRight} ${isLastRow(index) && classes.lastFixedRowRight}`,
+      fixedRowsLeftClassName: "".concat(classes.fixedRowLeft, " ").concat(selectedClassNames, " ").concat(isFirstRow(index) && classes.firstFixedRowLeft, " ").concat(isLastRow(index) && classes.lastFixedRowLeft),
+      fixedRowsRightClassName: "".concat(classes.fixedRowRight, " ").concat(selectedClassNames, " ").concat(isFirstRow(index) && classes.firstFixedRowRight, " ").concat(isLastRow(index) && classes.lastFixedRowRight),
       handleRowClick: handleRowClick,
       removeFixedRowsDivisors: removeFixedRowsDivisors,
-      rowClassName: `${classes.row} ${selectedClassNames} ${isLastRow(index) && classes.lastRow} ${isFirstRow(index) && classes.firstRow}`,
+      rowClassName: "".concat(classes.row, " ").concat(selectedClassNames, " ").concat(isLastRow(index) && classes.lastRow, " ").concat(isFirstRow(index) && classes.firstRow),
       rowKey: rowKey,
       rowStyles: rowStyles,
       selectable: selectable,
@@ -250,9 +250,9 @@ const UTTable = _ref => {
       removeDefaultOrderIcon
     },
     checkBoxOnChange: selectAllRows,
-    checkBoxClassName: `${exclusiveSelection && _stylesModule.default.hideCheckBox}`,
+    checkBoxClassName: "".concat(exclusiveSelection && _stylesModule.default.hideCheckBox),
     checkBoxSelected: selectedAll,
-    className: `${(0, _array.isEmpty)(currentRows) && _stylesModule.default.disableHeader}`,
+    className: "".concat((0, _array.isEmpty)(currentRows) && _stylesModule.default.disableHeader),
     columnsDefinition: columnsDefinition,
     columnSizes: columnSizes,
     containerStyle: {
@@ -274,7 +274,7 @@ const UTTable = _ref => {
   });
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
-    className: `${_stylesModule.default.table} ${classes.table}`
+    className: "".concat(_stylesModule.default.table, " ").concat(classes.table)
   }, (tableTitle || GeneralActions) && /*#__PURE__*/_react.default.createElement(_TableHeader.default, {
     classes: classes,
     title: tableTitle,
@@ -282,15 +282,12 @@ const UTTable = _ref => {
     GeneralActions: GeneralActions,
     disabled: disableReloadRows
   }), Filters, !isResponsive && /*#__PURE__*/_react.default.createElement("div", {
-    className: stickyHeader && `${_stylesModule.default.stickyHeader} ${classes.stickyHeader || ''}`
+    className: stickyHeader && "".concat(_stylesModule.default.stickyHeader, " ").concat(classes.stickyHeader || '')
   }, /*#__PURE__*/_react.default.createElement(_reactPerfectScrollbar.default, {
     containerRef: el => scrollRef.current = el,
     onSync: handleScrollbarSync,
     onScroll: handleSinchronizeContent,
-    className: `
-                ${_stylesModule.default.scrollbar}
-                ${classes.scrollbar}
-                ${loading && _stylesModule.default.disableHeader}`,
+    className: "\n                ".concat(_stylesModule.default.scrollbar, "\n                ").concat(classes.scrollbar, "\n                ").concat(loading && _stylesModule.default.disableHeader),
     options: {
       suppressScrollY: true,
       suppressScrollX: fitColumnsWidth

package/dist/components/UTTable/theme.js

@@ -9,6 +9,7 @@ var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.
 var _classesUtils = require("../../utils/classesUtils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const retrieveStyle = _ref => {
+  var _theme$UTTable, _theme$UTTable2, _theme$UTTable3, _theme$UTTable4, _theme$UTTable5, _theme$UTTable6, _theme$UTTable7, _theme$UTTable8, _theme$UTTable9, _theme$UTTable10, _theme$UTTable11, _theme$UTTable12, _theme$UTTable13, _theme$UTTable14, _theme$UTTable15, _theme$UTTable16, _theme$UTTable17, _theme$UTTable18, _theme$UTTable19, _theme$UTTable20, _theme$UTTable21, _theme$UTTable22, _theme$UTTable23, _theme$UTTable24, _theme$UTTable25, _theme$UTTable26, _theme$UTTable27, _theme$Palette$action, _theme$Palette$action2, _theme$Palette$action3;
   let {
     theme
   } = _ref;
@@ -52,15 +53,15 @@ const retrieveStyle = _ref => {
       }
     },
     headerCellCategoryName: {
-      color: (0, _classesUtils.withImportant)(theme?.UTTable?.headerCellCategoryName?.color),
-      fontSize: (0, _classesUtils.withImportant)(theme?.UTTable?.headerCellCategoryName?.fontSize || '12px'),
-      fontWeight: (0, _classesUtils.withImportant)(theme?.UTTable?.headerCellCategoryName?.fontWeight),
+      color: (0, _classesUtils.withImportant)(theme === null || theme === void 0 || (_theme$UTTable = theme.UTTable) === null || _theme$UTTable === void 0 || (_theme$UTTable = _theme$UTTable.headerCellCategoryName) === null || _theme$UTTable === void 0 ? void 0 : _theme$UTTable.color),
+      fontSize: (0, _classesUtils.withImportant)((theme === null || theme === void 0 || (_theme$UTTable2 = theme.UTTable) === null || _theme$UTTable2 === void 0 || (_theme$UTTable2 = _theme$UTTable2.headerCellCategoryName) === null || _theme$UTTable2 === void 0 ? void 0 : _theme$UTTable2.fontSize) || '12px'),
+      fontWeight: (0, _classesUtils.withImportant)(theme === null || theme === void 0 || (_theme$UTTable3 = theme.UTTable) === null || _theme$UTTable3 === void 0 || (_theme$UTTable3 = _theme$UTTable3.headerCellCategoryName) === null || _theme$UTTable3 === void 0 ? void 0 : _theme$UTTable3.fontWeight),
       marginBottom: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'headerCellCategoryName', 'marginBottom'], 5)
     },
     headerCellUnit: {
-      color: (0, _classesUtils.withImportant)(theme?.UTTable?.headerCellUnit?.color),
-      fontSize: (0, _classesUtils.withImportant)(theme?.UTTable?.headerCellUnit?.fontSize || '14px'),
-      fontWeight: (0, _classesUtils.withImportant)(theme?.UTTable?.headerCellUnit?.fontWeight)
+      color: (0, _classesUtils.withImportant)(theme === null || theme === void 0 || (_theme$UTTable4 = theme.UTTable) === null || _theme$UTTable4 === void 0 || (_theme$UTTable4 = _theme$UTTable4.headerCellUnit) === null || _theme$UTTable4 === void 0 ? void 0 : _theme$UTTable4.color),
+      fontSize: (0, _classesUtils.withImportant)((theme === null || theme === void 0 || (_theme$UTTable5 = theme.UTTable) === null || _theme$UTTable5 === void 0 || (_theme$UTTable5 = _theme$UTTable5.headerCellUnit) === null || _theme$UTTable5 === void 0 ? void 0 : _theme$UTTable5.fontSize) || '14px'),
+      fontWeight: (0, _classesUtils.withImportant)(theme === null || theme === void 0 || (_theme$UTTable6 = theme.UTTable) === null || _theme$UTTable6 === void 0 || (_theme$UTTable6 = _theme$UTTable6.headerCellUnit) === null || _theme$UTTable6 === void 0 ? void 0 : _theme$UTTable6.fontWeight)
     },
     orderIcon: {
       color: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'orderIcon', 'color'])
@@ -106,12 +107,12 @@ const retrieveStyle = _ref => {
       borderStyle: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'row', 'borderStyle'], 'solid')
     },
     firstRow: {
-      borderTopLeftRadius: (0, _classesUtils.withImportant)(theme?.UTTable?.table?.borderRadius),
-      borderTopRightRadius: (0, _classesUtils.withImportant)(theme?.UTTable?.table?.borderRadius)
+      borderTopLeftRadius: (0, _classesUtils.withImportant)(theme === null || theme === void 0 || (_theme$UTTable7 = theme.UTTable) === null || _theme$UTTable7 === void 0 || (_theme$UTTable7 = _theme$UTTable7.table) === null || _theme$UTTable7 === void 0 ? void 0 : _theme$UTTable7.borderRadius),
+      borderTopRightRadius: (0, _classesUtils.withImportant)(theme === null || theme === void 0 || (_theme$UTTable8 = theme.UTTable) === null || _theme$UTTable8 === void 0 || (_theme$UTTable8 = _theme$UTTable8.table) === null || _theme$UTTable8 === void 0 ? void 0 : _theme$UTTable8.borderRadius)
     },
     lastRow: {
-      borderBottomRightRadius: (0, _classesUtils.withImportant)(theme?.UTTable?.table?.borderRadius),
-      borderBottomLeftRadius: (0, _classesUtils.withImportant)(theme?.UTTable?.table?.borderRadius)
+      borderBottomRightRadius: (0, _classesUtils.withImportant)(theme === null || theme === void 0 || (_theme$UTTable9 = theme.UTTable) === null || _theme$UTTable9 === void 0 || (_theme$UTTable9 = _theme$UTTable9.table) === null || _theme$UTTable9 === void 0 ? void 0 : _theme$UTTable9.borderRadius),
+      borderBottomLeftRadius: (0, _classesUtils.withImportant)(theme === null || theme === void 0 || (_theme$UTTable10 = theme.UTTable) === null || _theme$UTTable10 === void 0 || (_theme$UTTable10 = _theme$UTTable10.table) === null || _theme$UTTable10 === void 0 ? void 0 : _theme$UTTable10.borderRadius)
     },
     rowCell: {
       color: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'rowCell', 'color']),
@@ -130,8 +131,8 @@ const retrieveStyle = _ref => {
         fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'rowCell', 'tabletMobile', 'fontWeight'])
       },
       '&:first-child': {
-        borderTopLeftRadius: (0, _classesUtils.withImportant)(theme?.UTTable?.responsiveRow?.borderRadius),
-        borderTopRightRadius: (0, _classesUtils.withImportant)(theme?.UTTable?.responsiveRow?.borderRadius)
+        borderTopLeftRadius: (0, _classesUtils.withImportant)(theme === null || theme === void 0 || (_theme$UTTable11 = theme.UTTable) === null || _theme$UTTable11 === void 0 || (_theme$UTTable11 = _theme$UTTable11.responsiveRow) === null || _theme$UTTable11 === void 0 ? void 0 : _theme$UTTable11.borderRadius),
+        borderTopRightRadius: (0, _classesUtils.withImportant)(theme === null || theme === void 0 || (_theme$UTTable12 = theme.UTTable) === null || _theme$UTTable12 === void 0 || (_theme$UTTable12 = _theme$UTTable12.responsiveRow) === null || _theme$UTTable12 === void 0 ? void 0 : _theme$UTTable12.borderRadius)
       }
     },
     lastCellContainer: {
@@ -172,7 +173,7 @@ const retrieveStyle = _ref => {
       fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'actionCell', 'fontWeight']),
       borderColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'rowCell', 'borderColor']),
       borderStyle: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'rowCell', 'borderStyle'], 'solid'),
-      borderWidth: (0, _classesUtils.withImportant)(theme?.UTTable?.rowCell?.borderWidth || '1px')
+      borderWidth: (0, _classesUtils.withImportant)((theme === null || theme === void 0 || (_theme$UTTable13 = theme.UTTable) === null || _theme$UTTable13 === void 0 || (_theme$UTTable13 = _theme$UTTable13.rowCell) === null || _theme$UTTable13 === void 0 ? void 0 : _theme$UTTable13.borderWidth) || '1px')
     },
     categoryNameCell: {
       backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'categoryNameCell', 'backgroundColor'], _colorsModule.default.white),
@@ -180,10 +181,10 @@ const retrieveStyle = _ref => {
       fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'categoryNameCell', 'fontWeight'])
     },
     firstFixedRowLeft: {
-      borderTopLeftRadius: (0, _classesUtils.withImportant)(`${theme?.UTTable?.table?.borderRadius}px`)
+      borderTopLeftRadius: (0, _classesUtils.withImportant)("".concat(theme === null || theme === void 0 || (_theme$UTTable14 = theme.UTTable) === null || _theme$UTTable14 === void 0 || (_theme$UTTable14 = _theme$UTTable14.table) === null || _theme$UTTable14 === void 0 ? void 0 : _theme$UTTable14.borderRadius, "px"))
     },
     lastFixedRowLeft: {
-      borderBottomLeftRadius: (0, _classesUtils.withImportant)(`${theme?.UTTable?.table?.borderRadius}px`)
+      borderBottomLeftRadius: (0, _classesUtils.withImportant)("".concat(theme === null || theme === void 0 || (_theme$UTTable15 = theme.UTTable) === null || _theme$UTTable15 === void 0 || (_theme$UTTable15 = _theme$UTTable15.table) === null || _theme$UTTable15 === void 0 ? void 0 : _theme$UTTable15.borderRadius, "px"))
     },
     fixedRowLeft: {
       backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'fixedRowLeft', 'backgroundColor'], (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'row', 'backgroundColor'], _colorsModule.default.white)),
@@ -198,10 +199,10 @@ const retrieveStyle = _ref => {
       boxShadow: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'fixedRowLeft', 'boxShadow'])
     },
     firstFixedRowRight: {
-      borderTopRightRadius: (0, _classesUtils.withImportant)(`${theme?.UTTable?.table?.borderRadius}px`)
+      borderTopRightRadius: (0, _classesUtils.withImportant)("".concat(theme === null || theme === void 0 || (_theme$UTTable16 = theme.UTTable) === null || _theme$UTTable16 === void 0 || (_theme$UTTable16 = _theme$UTTable16.table) === null || _theme$UTTable16 === void 0 ? void 0 : _theme$UTTable16.borderRadius, "px"))
     },
     lastFixedRowRight: {
-      borderTopRightRadius: (0, _classesUtils.withImportant)(`${theme?.UTTable?.table?.borderRadius}px`)
+      borderTopRightRadius: (0, _classesUtils.withImportant)("".concat(theme === null || theme === void 0 || (_theme$UTTable17 = theme.UTTable) === null || _theme$UTTable17 === void 0 || (_theme$UTTable17 = _theme$UTTable17.table) === null || _theme$UTTable17 === void 0 ? void 0 : _theme$UTTable17.borderRadius, "px"))
     },
     fixedRowRight: {
       backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'fixedRowRight', 'backgroundColor'], (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'row', 'backgroundColor'], _colorsModule.default.white)),
@@ -291,17 +292,17 @@ const retrieveStyle = _ref => {
       pointerEvents: 'none'
     },
     tableTitle: {
-      color: (0, _classesUtils.withImportant)(theme?.UTTable?.tableTitle?.color),
-      fontSize: (0, _classesUtils.withImportant)(theme?.UTTable?.tableTitle?.fontSize),
-      fontWeight: (0, _classesUtils.withImportant)(theme?.UTTable?.tableTitle?.fontWeight)
+      color: (0, _classesUtils.withImportant)(theme === null || theme === void 0 || (_theme$UTTable18 = theme.UTTable) === null || _theme$UTTable18 === void 0 || (_theme$UTTable18 = _theme$UTTable18.tableTitle) === null || _theme$UTTable18 === void 0 ? void 0 : _theme$UTTable18.color),
+      fontSize: (0, _classesUtils.withImportant)(theme === null || theme === void 0 || (_theme$UTTable19 = theme.UTTable) === null || _theme$UTTable19 === void 0 || (_theme$UTTable19 = _theme$UTTable19.tableTitle) === null || _theme$UTTable19 === void 0 ? void 0 : _theme$UTTable19.fontSize),
+      fontWeight: (0, _classesUtils.withImportant)(theme === null || theme === void 0 || (_theme$UTTable20 = theme.UTTable) === null || _theme$UTTable20 === void 0 || (_theme$UTTable20 = _theme$UTTable20.tableTitle) === null || _theme$UTTable20 === void 0 ? void 0 : _theme$UTTable20.fontWeight)
     },
     headerContainer: {
       margin: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'headerContainer', 'margin'])
     },
     totalRowsLabel: {
-      color: (0, _classesUtils.withImportant)(theme?.UTTable?.tableTitle?.color),
-      fontSize: (0, _classesUtils.withImportant)(theme?.UTTable?.tableTitle?.fontSize || '14px'),
-      fontWeight: (0, _classesUtils.withImportant)(theme?.UTTable?.tableTitle?.fontWeight)
+      color: (0, _classesUtils.withImportant)(theme === null || theme === void 0 || (_theme$UTTable21 = theme.UTTable) === null || _theme$UTTable21 === void 0 || (_theme$UTTable21 = _theme$UTTable21.tableTitle) === null || _theme$UTTable21 === void 0 ? void 0 : _theme$UTTable21.color),
+      fontSize: (0, _classesUtils.withImportant)((theme === null || theme === void 0 || (_theme$UTTable22 = theme.UTTable) === null || _theme$UTTable22 === void 0 || (_theme$UTTable22 = _theme$UTTable22.tableTitle) === null || _theme$UTTable22 === void 0 ? void 0 : _theme$UTTable22.fontSize) || '14px'),
+      fontWeight: (0, _classesUtils.withImportant)(theme === null || theme === void 0 || (_theme$UTTable23 = theme.UTTable) === null || _theme$UTTable23 === void 0 || (_theme$UTTable23 = _theme$UTTable23.tableTitle) === null || _theme$UTTable23 === void 0 ? void 0 : _theme$UTTable23.fontWeight)
     },
     pageSizeSelect: {
       fontFamily: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'fontFamily']),
@@ -311,10 +312,10 @@ const retrieveStyle = _ref => {
     },
     pageSizeSelectContainer: {
       '& fieldset': {
-        border: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'pageSizeSelect', 'border'], `1px solid ${_colorsModule.default.gray3}`)
+        border: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'pageSizeSelect', 'border'], "1px solid ".concat(_colorsModule.default.gray3))
       },
       '&:hover fieldset': {
-        border: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'pageSizeSelect', 'hover', 'border'], `1px solid ${_colorsModule.default.gray2}`)
+        border: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'pageSizeSelect', 'hover', 'border'], "1px solid ".concat(_colorsModule.default.gray2))
       }
     },
     noResultsContainer: {
@@ -324,15 +325,15 @@ const retrieveStyle = _ref => {
       height: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'noResultsContainer', 'height'], 200)
     },
     noResultsLabel: {
-      color: (0, _classesUtils.withImportant)(theme?.UTTable?.noResultsLabel?.color),
-      fontSize: (0, _classesUtils.withImportant)(theme?.UTTable?.noResultsLabel?.fontSize || '14px'),
-      fontWeight: (0, _classesUtils.withImportant)(theme?.UTTable?.noResultsLabel?.fontWeight)
+      color: (0, _classesUtils.withImportant)(theme === null || theme === void 0 || (_theme$UTTable24 = theme.UTTable) === null || _theme$UTTable24 === void 0 || (_theme$UTTable24 = _theme$UTTable24.noResultsLabel) === null || _theme$UTTable24 === void 0 ? void 0 : _theme$UTTable24.color),
+      fontSize: (0, _classesUtils.withImportant)((theme === null || theme === void 0 || (_theme$UTTable25 = theme.UTTable) === null || _theme$UTTable25 === void 0 || (_theme$UTTable25 = _theme$UTTable25.noResultsLabel) === null || _theme$UTTable25 === void 0 ? void 0 : _theme$UTTable25.fontSize) || '14px'),
+      fontWeight: (0, _classesUtils.withImportant)(theme === null || theme === void 0 || (_theme$UTTable26 = theme.UTTable) === null || _theme$UTTable26 === void 0 || (_theme$UTTable26 = _theme$UTTable26.noResultsLabel) === null || _theme$UTTable26 === void 0 ? void 0 : _theme$UTTable26.fontWeight)
     },
     checkBoxRoot: {
       color: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'checkbox', 'root', 'color'])
     },
     checkboxColorChecked: {
-      color: (0, _classesUtils.withImportant)(theme?.UTTable?.checkbox?.selected?.color)
+      color: (0, _classesUtils.withImportant)(theme === null || theme === void 0 || (_theme$UTTable27 = theme.UTTable) === null || _theme$UTTable27 === void 0 || (_theme$UTTable27 = _theme$UTTable27.checkbox) === null || _theme$UTTable27 === void 0 || (_theme$UTTable27 = _theme$UTTable27.selected) === null || _theme$UTTable27 === void 0 ? void 0 : _theme$UTTable27.color)
     },
     tableLoading: {
       backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'checkbox', 'backgroundColor'], (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'header', 'backgroundColor'], _colorsModule.default.white))
@@ -351,12 +352,12 @@ const retrieveStyle = _ref => {
       color: (0, _seamlessImmutable.getIn)(theme, ['Loading', 'base', 'color'], _colorsModule.default.loadingBase)
     },
     actionIcon: {
-      color: theme.Palette.actions?.neutral['05'] || theme.Palette.neutral['05'],
-      fill: 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'],
+      fill: ((_theme$Palette$action2 = theme.Palette.actions) === null || _theme$Palette$action2 === void 0 ? void 0 : _theme$Palette$action2.neutral['05']) || theme.Palette.neutral['05']
     },
     actionIconButton: {
       '&:hover': {
-        backgroundColor: theme.Palette.actions?.neutral['01'] || theme.Palette.neutral['01']
+        backgroundColor: ((_theme$Palette$action3 = theme.Palette.actions) === null || _theme$Palette$action3 === void 0 ? void 0 : _theme$Palette$action3.neutral['01']) || theme.Palette.neutral['01']
       }
     }
   };

package/dist/components/UTTable/utils.js

@@ -75,26 +75,26 @@ const createRowStyles = (rowPadding, rowSpacing, headerPadding, isResponsive) =>
   return {
     fixedRowsLeft: {
       borderRadius,
-      borderWidth: `${_constants.ROWS_BORDER_SIZE}px`,
+      borderWidth: "".concat(_constants.ROWS_BORDER_SIZE, "px"),
       paddingLeft: _constants.CELL_SIDE_PADDING
     },
     fixedRowsRight: {
       borderRadius,
-      borderWidth: `${_constants.ROWS_BORDER_SIZE}px`,
+      borderWidth: "".concat(_constants.ROWS_BORDER_SIZE, "px"),
       paddingRight: _constants.CELL_SIDE_PADDING
     },
     rowBorderTop: {
-      borderTopWidth: `${_constants.ROWS_BORDER_SIZE}px`,
+      borderTopWidth: "".concat(_constants.ROWS_BORDER_SIZE, "px"),
       left: _constants.ROW_SIDE_PADDING,
       marginTop: margin,
-      marginBottom: `-${_constants.ROWS_BORDER_SIZE}px`,
-      width: `calc(100% - ${_constants.ROW_SIDE_PADDING * 2}px)`
+      marginBottom: "-".concat(_constants.ROWS_BORDER_SIZE, "px"),
+      width: "calc(100% - ".concat(_constants.ROW_SIDE_PADDING * 2, "px)")
     },
     rowBorderBottom: {
-      borderTopWidth: `${_constants.ROWS_BORDER_SIZE}px`,
+      borderTopWidth: "".concat(_constants.ROWS_BORDER_SIZE, "px"),
       left: _constants.ROW_SIDE_PADDING,
-      marginTop: `-${_constants.ROWS_BORDER_SIZE}px`,
-      width: `calc(100% - ${_constants.ROW_SIDE_PADDING * 2}px)`
+      marginTop: "-".concat(_constants.ROWS_BORDER_SIZE, "px"),
+      width: "calc(100% - ".concat(_constants.ROW_SIDE_PADDING * 2, "px)")
     },
     cell: {
       paddingBottom: paddingValue,
@@ -110,8 +110,8 @@ const createRowStyles = (rowPadding, rowSpacing, headerPadding, isResponsive) =>
     },
     rowBackground: {
       borderRadius,
-      borderBottomWidth: `${_constants.ROWS_BORDER_SIZE}px`,
-      borderTopWidth: `${_constants.ROWS_BORDER_SIZE}px`,
+      borderBottomWidth: "".concat(_constants.ROWS_BORDER_SIZE, "px"),
+      borderTopWidth: "".concat(_constants.ROWS_BORDER_SIZE, "px"),
       borderLeftWidth: 0,
       borderRightWidth: 0
     },
@@ -178,11 +178,11 @@ const getColumnsSizes = _ref3 => {
       } = _ref5;
       const columnSize = _constants.COLUMN_SIZES[size] || _constants.COLUMN_SIZES.medium;
       const finalSize = columnSize * 100 / (position === _constants.COLUMN_POSITION.LEFT ? leftColumnsSize : position === _constants.COLUMN_POSITION.RIGHT ? rightColumnsSize : secondaryColumnsSize);
-      columnSizes[key] = `${finalSize}%`;
+      columnSizes[key] = "".concat(finalSize, "%");
     });
-    columnSizes.leftColumnsSize = `${leftColumnsSize * 100 / columnsFullSize}%`;
-    columnSizes.secondaryColumnsSize = `${secondaryColumnsSize * 100 / columnsFullSize}%`;
-    columnSizes.rightColumnsSize = `${rightColumnsSize * 100 / columnsFullSize}%`;
+    columnSizes.leftColumnsSize = "".concat(leftColumnsSize * 100 / columnsFullSize, "%");
+    columnSizes.secondaryColumnsSize = "".concat(secondaryColumnsSize * 100 / columnsFullSize, "%");
+    columnSizes.rightColumnsSize = "".concat(rightColumnsSize * 100 / columnsFullSize, "%");
   } else {
     columns.forEach(_ref6 => {
       let {

package/dist/components/UTTabs/components/TooltipTab/index.js

@@ -36,7 +36,7 @@ const TooltipTab = _ref => {
     content: tooltip,
     tippyProps: tippyProps
   }, /*#__PURE__*/_react.default.createElement("button", _extends({
-    className: `${className} ${_stylesModule.default.button}`,
+    className: "".concat(className, " ").concat(_stylesModule.default.button),
     ref: buttonRef,
     onClick: handleClick
   }, props), children));

package/dist/components/UTTabs/index.js

@@ -45,11 +45,11 @@ class UTTabs extends _react.PureComponent {
       value: this.props.value,
       onChange: this.handleChange,
       classes: {
-        root: `${styles.tabsRoot} ${classes.tabsRoot}`,
+        root: "".concat(styles.tabsRoot, " ").concat(classes.tabsRoot),
         flexContainer: classes.flexContainer
       },
       TabIndicatorProps: {
-        className: `${styles.indicator} ${classes.indicator}`,
+        className: "".concat(styles.indicator, " ").concat(classes.indicator),
         children: /*#__PURE__*/_react.default.createElement("div", null)
       }
     }, tabsProps), options.map(opt => {
@@ -61,10 +61,10 @@ class UTTabs extends _react.PureComponent {
       }))) : _constants.DEFAULT_TAB_COMPONENT;
       return /*#__PURE__*/_react.default.createElement(_Tab.default, _extends({
         classes: {
-          root: `${styles.tabRoot} ${classes.tabRoot}`,
-          selected: `${styles.selected} ${classes.selected}`,
-          textColorPrimary: `${styles.textColorPrimary} ${classes.textColorPrimary}`,
-          wrapper: `${styles.label} ${classes.label}`
+          root: "".concat(styles.tabRoot, " ").concat(classes.tabRoot),
+          selected: "".concat(styles.selected, " ").concat(classes.selected),
+          textColorPrimary: "".concat(styles.textColorPrimary, " ").concat(classes.textColorPrimary),
+          wrapper: "".concat(styles.label, " ").concat(classes.label)
         },
         key: opt.value,
         value: opt.value,
@@ -74,7 +74,7 @@ class UTTabs extends _react.PureComponent {
         component: tabComponent
       }, tabProps));
     }), !(0, _array.isEmpty)(badges) && badges.map(badge => /*#__PURE__*/_react.default.createElement("div", {
-      className: `${badge.styles} ${!badge.show && _stylesModule.default.hiddenBadge}`
+      className: "".concat(badge.styles, " ").concat(!badge.show && _stylesModule.default.hiddenBadge)
     })));
   }
 }

package/dist/components/UTTabs/theme.js

@@ -39,7 +39,7 @@ const retrieveStyle = _ref => {
       backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'backgroundColor'], 'transparent'),
       borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'borderRadius'], 0),
       opacity: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'opacity']),
-      transition: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'transition'], `all 350ms cubic-bezier(0.4, 0, 0.2, 1) 0ms`),
+      transition: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'transition'], "all 350ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"),
       willChange: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'willChange']),
       '&:hover:not($baseSelected)': {
         backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', '&:hover:not($baseSelected)', 'backgroundColor'], 'transparent'),
@@ -63,7 +63,7 @@ const retrieveStyle = _ref => {
       backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'backgroundColor'], 'transparent'),
       borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'borderRadius'], 0),
       opacity: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'opacity']),
-      transition: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'transition'], `all 350ms cubic-bezier(0.4, 0, 0.2, 1) 0ms`),
+      transition: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'transition'], "all 350ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"),
       willChange: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'willChange']),
       '&:hover:not($secondarySelected)': {
         backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', '&:hover:not($secondarySelected)', 'backgroundColor'], 'transparent'),

package/dist/components/UTTextArea/index.js

@@ -42,7 +42,7 @@ const UTTextArea = _ref => {
   } = classNames;
   const {
     character_count_limit: characterCountLimit
-  } = field?.configuration || {};
+  } = (field === null || field === void 0 ? void 0 : field.configuration) || {};
   const handleOnChange = _ref2 => {
     let {
       target
@@ -54,14 +54,14 @@ const UTTextArea = _ref => {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.titleContainer
   }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    className: `${label} ${_stylesModule.default.label}`,
+    className: "".concat(label, " ").concat(_stylesModule.default.label),
     withMarkdown: true
   }, title)), /*#__PURE__*/_react.default.createElement("div", {
-    className: `${_stylesModule.default.textAreaContainer} ${textAreaContainer}`
+    className: "".concat(_stylesModule.default.textAreaContainer, " ").concat(textAreaContainer)
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.componentWrapper
   }, /*#__PURE__*/_react.default.createElement("textarea", _extends({}, inputProps, {
-    className: `${_stylesModule.default.textarea} ${textarea} ${classes.textarea}`,
+    className: "".concat(_stylesModule.default.textarea, " ").concat(textarea, " ").concat(classes.textarea),
     onChange: handleOnChange,
     onBlur: onBlur,
     onFocus: onFocus,
@@ -71,11 +71,11 @@ const UTTextArea = _ref => {
   })), characterCountLimit && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     className: _stylesModule.default.characterCount,
     colorTheme: value.length === characterCountLimit ? 'error' : value.length >= characterCountLimit * _constants.LIMIT_WARNING_FACTOR ? 'warning' : 'dark'
-  }, `${value.length}/${characterCountLimit}`)), tooltip && /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
+  }, "".concat(value.length, "/").concat(characterCountLimit))), tooltip && /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
     content: tooltip,
     tippyProps: _constants.tippyProps
   }, /*#__PURE__*/_react.default.createElement("div", null, HelpIcon || /*#__PURE__*/_react.default.createElement(_HelpOutline.default, {
-    className: `${icon} ${classes.icon}`
+    className: "".concat(icon, " ").concat(classes.icon)
   })))));
 };
 UTTextArea.propTypes = {

package/dist/components/UTTextArea/theme.js

@@ -7,40 +7,41 @@ 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$UTTextArea, _theme$UTTextArea2, _theme$UTTextArea3, _theme$UTTextArea4, _theme$Fonts, _theme$UTTextArea5, _theme$UTTextArea6, _theme$UTTextArea7, _theme$UTTextArea8, _theme$UTTextArea9, _theme$UTTextArea10, _theme$UTTextArea11, _theme$UTTextArea12, _theme$UTTextArea13, _theme$UTTextArea14, _theme$UTTextArea15, _theme$UTTextArea16, _theme$UTTextArea17, _theme$UTTextArea18, _theme$UTTextArea19, _theme$UTTextArea20;
   let {
     theme
   } = _ref;
   return {
     textarea: {
-      background: theme?.UTTextArea?.textarea?.background,
-      border: theme?.UTTextArea?.textarea?.border,
-      borderRadius: theme?.UTTextArea?.textarea?.borderRadius,
-      color: theme?.UTTextArea?.textarea?.color || _colorsModule.default.black,
-      fontFamily: theme?.Fonts?.fontFamily,
-      fontSize: theme?.UTTextArea?.textarea?.fontSize || 14,
-      fontWeight: theme?.UTTextArea?.textarea?.fontWeight,
-      height: theme?.UTTextArea?.textarea?.height,
-      padding: theme?.UTTextArea?.textarea?.padding,
-      resize: theme?.UTTextArea?.textarea?.resize || 'vertical',
+      background: theme === null || theme === void 0 || (_theme$UTTextArea = theme.UTTextArea) === null || _theme$UTTextArea === void 0 || (_theme$UTTextArea = _theme$UTTextArea.textarea) === null || _theme$UTTextArea === void 0 ? void 0 : _theme$UTTextArea.background,
+      border: theme === null || theme === void 0 || (_theme$UTTextArea2 = theme.UTTextArea) === null || _theme$UTTextArea2 === void 0 || (_theme$UTTextArea2 = _theme$UTTextArea2.textarea) === null || _theme$UTTextArea2 === void 0 ? void 0 : _theme$UTTextArea2.border,
+      borderRadius: theme === null || theme === void 0 || (_theme$UTTextArea3 = theme.UTTextArea) === null || _theme$UTTextArea3 === void 0 || (_theme$UTTextArea3 = _theme$UTTextArea3.textarea) === null || _theme$UTTextArea3 === void 0 ? void 0 : _theme$UTTextArea3.borderRadius,
+      color: (theme === null || theme === void 0 || (_theme$UTTextArea4 = theme.UTTextArea) === null || _theme$UTTextArea4 === void 0 || (_theme$UTTextArea4 = _theme$UTTextArea4.textarea) === null || _theme$UTTextArea4 === void 0 ? void 0 : _theme$UTTextArea4.color) || _colorsModule.default.black,
+      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$UTTextArea5 = theme.UTTextArea) === null || _theme$UTTextArea5 === void 0 || (_theme$UTTextArea5 = _theme$UTTextArea5.textarea) === null || _theme$UTTextArea5 === void 0 ? void 0 : _theme$UTTextArea5.fontSize) || 14,
+      fontWeight: theme === null || theme === void 0 || (_theme$UTTextArea6 = theme.UTTextArea) === null || _theme$UTTextArea6 === void 0 || (_theme$UTTextArea6 = _theme$UTTextArea6.textarea) === null || _theme$UTTextArea6 === void 0 ? void 0 : _theme$UTTextArea6.fontWeight,
+      height: theme === null || theme === void 0 || (_theme$UTTextArea7 = theme.UTTextArea) === null || _theme$UTTextArea7 === void 0 || (_theme$UTTextArea7 = _theme$UTTextArea7.textarea) === null || _theme$UTTextArea7 === void 0 ? void 0 : _theme$UTTextArea7.height,
+      padding: theme === null || theme === void 0 || (_theme$UTTextArea8 = theme.UTTextArea) === null || _theme$UTTextArea8 === void 0 || (_theme$UTTextArea8 = _theme$UTTextArea8.textarea) === null || _theme$UTTextArea8 === void 0 ? void 0 : _theme$UTTextArea8.padding,
+      resize: (theme === null || theme === void 0 || (_theme$UTTextArea9 = theme.UTTextArea) === null || _theme$UTTextArea9 === void 0 || (_theme$UTTextArea9 = _theme$UTTextArea9.textarea) === null || _theme$UTTextArea9 === void 0 ? void 0 : _theme$UTTextArea9.resize) || 'vertical',
       '&:hover': {
-        background: theme?.UTTextArea?.textarea?.hover?.background,
-        border: theme?.UTTextArea?.textarea?.hover?.border,
-        color: theme?.UTTextArea?.textarea?.hover?.color
+        background: theme === null || theme === void 0 || (_theme$UTTextArea10 = theme.UTTextArea) === null || _theme$UTTextArea10 === void 0 || (_theme$UTTextArea10 = _theme$UTTextArea10.textarea) === null || _theme$UTTextArea10 === void 0 || (_theme$UTTextArea10 = _theme$UTTextArea10.hover) === null || _theme$UTTextArea10 === void 0 ? void 0 : _theme$UTTextArea10.background,
+        border: theme === null || theme === void 0 || (_theme$UTTextArea11 = theme.UTTextArea) === null || _theme$UTTextArea11 === void 0 || (_theme$UTTextArea11 = _theme$UTTextArea11.textarea) === null || _theme$UTTextArea11 === void 0 || (_theme$UTTextArea11 = _theme$UTTextArea11.hover) === null || _theme$UTTextArea11 === void 0 ? void 0 : _theme$UTTextArea11.border,
+        color: theme === null || theme === void 0 || (_theme$UTTextArea12 = theme.UTTextArea) === null || _theme$UTTextArea12 === void 0 || (_theme$UTTextArea12 = _theme$UTTextArea12.textarea) === null || _theme$UTTextArea12 === void 0 || (_theme$UTTextArea12 = _theme$UTTextArea12.hover) === null || _theme$UTTextArea12 === void 0 ? void 0 : _theme$UTTextArea12.color
       },
       '&:focus, &focus-visible': {
-        background: theme?.UTTextArea?.textarea?.focus?.background,
-        border: theme?.UTTextArea?.textarea?.focus?.border,
-        color: theme?.UTTextArea?.textarea?.focus?.color,
-        outline: theme?.UTTextArea?.textarea?.focus?.outline
+        background: theme === null || theme === void 0 || (_theme$UTTextArea13 = theme.UTTextArea) === null || _theme$UTTextArea13 === void 0 || (_theme$UTTextArea13 = _theme$UTTextArea13.textarea) === null || _theme$UTTextArea13 === void 0 || (_theme$UTTextArea13 = _theme$UTTextArea13.focus) === null || _theme$UTTextArea13 === void 0 ? void 0 : _theme$UTTextArea13.background,
+        border: theme === null || theme === void 0 || (_theme$UTTextArea14 = theme.UTTextArea) === null || _theme$UTTextArea14 === void 0 || (_theme$UTTextArea14 = _theme$UTTextArea14.textarea) === null || _theme$UTTextArea14 === void 0 || (_theme$UTTextArea14 = _theme$UTTextArea14.focus) === null || _theme$UTTextArea14 === void 0 ? void 0 : _theme$UTTextArea14.border,
+        color: theme === null || theme === void 0 || (_theme$UTTextArea15 = theme.UTTextArea) === null || _theme$UTTextArea15 === void 0 || (_theme$UTTextArea15 = _theme$UTTextArea15.textarea) === null || _theme$UTTextArea15 === void 0 || (_theme$UTTextArea15 = _theme$UTTextArea15.focus) === null || _theme$UTTextArea15 === void 0 ? void 0 : _theme$UTTextArea15.color,
+        outline: theme === null || theme === void 0 || (_theme$UTTextArea16 = theme.UTTextArea) === null || _theme$UTTextArea16 === void 0 || (_theme$UTTextArea16 = _theme$UTTextArea16.textarea) === null || _theme$UTTextArea16 === void 0 || (_theme$UTTextArea16 = _theme$UTTextArea16.focus) === null || _theme$UTTextArea16 === void 0 ? void 0 : _theme$UTTextArea16.outline
       },
       '&:disabled': {
-        background: theme?.UTTextArea?.textarea?.disabled?.background,
-        border: theme?.UTTextArea?.textarea?.disabled?.border,
-        color: theme?.UTTextArea?.textarea?.disabled?.color
+        background: theme === null || theme === void 0 || (_theme$UTTextArea17 = theme.UTTextArea) === null || _theme$UTTextArea17 === void 0 || (_theme$UTTextArea17 = _theme$UTTextArea17.textarea) === null || _theme$UTTextArea17 === void 0 || (_theme$UTTextArea17 = _theme$UTTextArea17.disabled) === null || _theme$UTTextArea17 === void 0 ? void 0 : _theme$UTTextArea17.background,
+        border: theme === null || theme === void 0 || (_theme$UTTextArea18 = theme.UTTextArea) === null || _theme$UTTextArea18 === void 0 || (_theme$UTTextArea18 = _theme$UTTextArea18.textarea) === null || _theme$UTTextArea18 === void 0 || (_theme$UTTextArea18 = _theme$UTTextArea18.disabled) === null || _theme$UTTextArea18 === void 0 ? void 0 : _theme$UTTextArea18.border,
+        color: theme === null || theme === void 0 || (_theme$UTTextArea19 = theme.UTTextArea) === null || _theme$UTTextArea19 === void 0 || (_theme$UTTextArea19 = _theme$UTTextArea19.textarea) === null || _theme$UTTextArea19 === void 0 || (_theme$UTTextArea19 = _theme$UTTextArea19.disabled) === null || _theme$UTTextArea19 === void 0 ? void 0 : _theme$UTTextArea19.color
       }
     },
     icon: {
-      color: theme?.UTTextArea?.icon?.color
+      color: theme === null || theme === void 0 || (_theme$UTTextArea20 = theme.UTTextArea) === null || _theme$UTTextArea20 === void 0 || (_theme$UTTextArea20 = _theme$UTTextArea20.icon) === null || _theme$UTTextArea20 === void 0 ? void 0 : _theme$UTTextArea20.color
     }
   };
 };

package/dist/components/UTTextInput/index.js

@@ -88,7 +88,7 @@ class UTTextInput extends _react.PureComponent {
       outsideIcon,
       adornment,
       helperText
-    } = field?.configuration || {};
+    } = (field === null || field === void 0 ? void 0 : field.configuration) || {};
 
     // TODO. These props were forwarded to the inner dom element and they were
     // causing errors and warnings. I quit them from the  "..." spread to TextField.
@@ -110,7 +110,7 @@ class UTTextInput extends _react.PureComponent {
     }) : adornment;
     const value = inputObjectKey ? input.value[inputObjectKey] : input.value;
     const errorMessage = (0, _form.shouldShowErrors)(meta) && meta.error || captionLabel || '';
-    const fieldId = id || field?.id ? `${id || field.id}` : undefined;
+    const fieldId = id || field !== null && field !== void 0 && field.id ? "".concat(id || field.id) : undefined;
     const TextInput = /*#__PURE__*/_react.default.createElement(_TextField.default, _extends({
       id: fieldId,
       placeholder: placeholder,
@@ -143,15 +143,11 @@ class UTTextInput extends _react.PureComponent {
         id: fieldId,
         endAdornment: endAction && /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
           position: "end",
-          className: `${adornmentInside && _stylesModule.default.adornmentInside}`
+          className: "".concat(adornmentInside && _stylesModule.default.adornmentInside)
         }, endAction),
         type: type === _constants.INPUT_TYPES.PASSWORD ? !this.state.visible ? _constants.INPUT_TYPES.PASSWORD : _constants.INPUT_TYPES.TEXT : type || _constants.INPUT_TYPES.TEXT,
         classes: {
-          input: `
-              ${bigInput && classes.bigInput}
-              ${type === _constants.INPUT_TYPES.NUMBER && _stylesModule.default.numberType}
-              ${inputClassName}
-            `
+          input: "\n              ".concat(bigInput && classes.bigInput, "\n              ").concat(type === _constants.INPUT_TYPES.NUMBER && _stylesModule.default.numberType, "\n              ").concat(inputClassName, "\n            ")
         }
       },
       InputLabelProps: {
@@ -162,14 +158,14 @@ class UTTextInput extends _react.PureComponent {
       }
     }, textFieldPropsToForward));
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: `${classes.container} ${containerClassName} ${tooltip && _stylesModule.default.containerWithTooltip}`
+      className: "".concat(classes.container, " ").concat(containerClassName, " ").concat(tooltip && _stylesModule.default.containerWithTooltip)
     }, tooltip ? /*#__PURE__*/_react.default.createElement(_react.Fragment, null, TextInput, /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
       tippyProps: tippyProps,
       content: tooltip
     }, /*#__PURE__*/_react.default.createElement("span", {
       className: _stylesModule.default.tooltipIconContainer
     }, /*#__PURE__*/_react.default.createElement(_HelpOutline.default, {
-      className: `${classes.tooltipIcon} ${_stylesModule.default.tooltipIcon}`
+      className: "".concat(classes.tooltipIcon, " ").concat(_stylesModule.default.tooltipIcon)
     })))) : /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/(0, _react.isValidElement)(outsideIcon) && /*#__PURE__*/_react.default.createElement("div", {
       className: _stylesModule.default.iconContainer
     }, outsideIcon), TextInput));