techsbcn-storybook 0.12.0 → 0.12.1

package/dist/components/tables/SimpleTableComponent/SimpleTableComponent.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ObjectKey } from '../../../interfaces';
 import './SimpleTableComponent.scss';
+import { InputType } from '../../fields/TextFieldComponent/TextFieldComponent';
 interface SimpleTableComponentProps {
     rows: any[];
     values: ObjectKey;
@@ -47,11 +48,21 @@ interface ColumnProps {
         disabledIcon: any;
         onClickId: (id: number) => void;
     };
+    isEditableTableCell?: EditableCellProps;
 }
 interface ActionProps {
     children: React.ReactNode;
     onClick?: (row: any) => void;
     onClickId?: (id: number) => void;
 }
+interface EditableCellProps {
+    isTextField?: {
+        type?: InputType;
+        onCellValueChange: (data: any) => void;
+    };
+    isSelectField?: {
+        onCellValueChange: (data: any) => void;
+    };
+}
 export declare const SimpleTableComponent: React.FunctionComponent<SimpleTableComponentProps>;
 export {};

package/dist/components/tables/TableComponent/TableComponent.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { SearchFilters, ObjectKey } from '../../../interfaces';
 import './TableComponent.scss';
+import { InputType } from '../../fields/TextFieldComponent/TextFieldComponent';
 interface TableComponentProps {
     rows: any[];
     values: ObjectKey;
@@ -50,11 +51,21 @@ interface ColumnProps {
         disabledIcon: any;
         onClickId: (id: number) => void;
     };
+    isEditableTableCell?: EditableCellProps;
 }
 interface ActionProps {
     children: React.ReactNode;
     onClick?: (row: any) => void;
     onClickId?: (id: number) => void;
 }
+interface EditableCellProps {
+    isTextField?: {
+        type?: InputType;
+        onCellValueChange: (data: any) => void;
+    };
+    isSelectField?: {
+        onCellValueChange: (data: any) => void;
+    };
+}
 export declare const TableComponent: React.FunctionComponent<TableComponentProps>;
 export {};

package/dist/techsbcn-storybook.cjs.development.js

@@ -9,6 +9,7 @@ var React__default = _interopDefault(React);
 var material = require('@mui/material');
 var _ = require('@mui/material/');
 var iconsMaterial = require('@mui/icons-material');
+var lodash = require('lodash');
 var reactRouterDom = require('react-router-dom');
 var MenuIcon = _interopDefault(require('@mui/icons-material/Menu'));
 var Select = _interopDefault(require('react-select'));
@@ -275,6 +276,71 @@ var MainWrapperComponent = function MainWrapperComponent(props) {
 var css_248z$3 = ".table-component .paper-container {\n  box-shadow: none;\n  background-color: transparent !important;\n}\n.table-component .paper-container .checkbox-cell .MuiCheckbox-root {\n  padding: 0 !important;\n}\n.table-component .paper-container .checkbox-cell .MuiCheckbox-root:hover {\n  background-color: transparent !important;\n}\n.table-component .paper-container .checkbox-cell .Mui-checked {\n  color: rgba(0, 0, 0, 0.54) !important;\n}\n.table-component .paper-container .checkbox-cell .MuiCheckbox-indeterminate {\n  color: #212529 !important;\n}\n.table-component .paper-container .table-container {\n  max-height: 68vh;\n  border-bottom: 1px solid black;\n}\n.table-component .paper-container .table-container .table-column:first-child {\n  border-radius: 5px 0 0 5px;\n}\n.table-component .paper-container .table-container .table-column:last-child {\n  border-right: none !important;\n  border-radius: 0 5px 5px 0;\n}\n.table-component .paper-container .table-container .table-column {\n  font-weight: bold;\n  font-size: 1rem !important;\n  padding: 10px !important;\n  border-top: 1px solid #e0e0e0;\n  border-right: 1px solid #e0e0e0;\n  border-bottom: 2px solid #e0e0e0;\n}\n.table-component .paper-container .table-container .table-column .table-header-cell {\n  color: black;\n  padding: 0px 10px 0px 10px !important;\n}\n.table-component .paper-container .table-container .table-rows.row-click {\n  cursor: pointer;\n}\n.table-component .paper-container .table-container .table-rows.row-click:hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.table-component .paper-container .table-container .table-rows .MuiTableCell-root {\n  padding: 6px !important;\n  overflow: hidden;\n}\n.table-component .paper-container .table-container .table-rows .img-table {\n  width: 100%;\n  height: 110px;\n}\n.table-component .paper-container .table-container .table-rows .img-table img {\n  object-fit: contain;\n}\n.table-component .paper-container .table-container .table-rows .actions {\n  float: right;\n}\n.table-component .paper-container .table-container .table-rows .btn-action {\n  color: rgba(0, 0, 0, 0.54);\n  display: inline-block;\n  text-decoration: none;\n  font-size: 1.6em !important;\n  padding: 0px 7px;\n  cursor: pointer;\n}\n.table-component .paper-container .MuiTable-root.loading {\n  opacity: 0.5;\n}\n.table-component .paper-container .MuiTable-root.loading .MuiCircularProgress-root {\n  width: 80px !important;\n  height: 80px !important;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 5px;\n  margin: auto;\n  color: grey;\n}\n.table-component .paper-container .MuiTablePagination-root {\n  overflow: unset;\n}\n.table-component .paper-container .MuiTablePagination-root .MuiToolbar-root {\n  justify-content: center !important;\n  flex-wrap: wrap;\n  padding: 0px !important;\n}\n.table-component .paper-container .MuiTablePagination-root .MuiTablePagination-spacer {\n  flex: 0 !important;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination .MuiPaginationItem-page {\n  border-radius: 0px;\n  margin: 1px;\n  color: white !important;\n  background-color: #3f4d67;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination .MuiPaginationItem-page.Mui-selected {\n  background-color: #3299C7;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination li button {\n  padding: 14px;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination li:nth-child(2) .MuiPaginationItem-page {\n  border-radius: 5px 0 0 5px !important;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination li:nth-last-child(2) .MuiPaginationItem-page {\n  border-radius: 0 5px 5px 0 !important;\n}\n@media (max-width: 992px) {\n  .table-component .paper-container .table-container {\n    max-height: 60vh;\n    border-top: 1px solid #cccccc;\n  }\n  .table-component .paper-container .table-container .MuiTable-root {\n    border-collapse: collapse !important;\n  }\n  .table-component .paper-container .table-container .MuiTableHead-root {\n    display: none !important;\n  }\n  .table-component .paper-container .table-container .table-rows {\n    border-bottom: 2px solid #cccccc;\n  }\n  .table-component .paper-container .table-container .table-rows .MuiTableCell-root {\n    width: 100%;\n    border-bottom: none !important;\n  }\n  .table-component .paper-container .table-container .table-rows .MuiTableCell-root .label-cell {\n    font-size: 1rem;\n    vertical-align: top;\n    width: 50%;\n    height: auto;\n  }\n  .table-component .paper-container .table-container .table-rows .MuiTableCell-root .label-cell + div {\n    display: inline-block;\n  }\n  .table-component .paper-container .table-container .table-rows .table-cell {\n    display: inline-block !important;\n  }\n  .table-component .paper-container .table-container .table-rows .format-value {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n    width: 50%;\n    max-width: 300px;\n  }\n}";
 styleInject(css_248z$3);
 
+var css_248z$4 = ".text-field-component .MuiFormLabel-root {\n  color: #666666 !important;\n  font-size: calc(12pt + (14 - 12) * calc(100vw - 300px)/1300) !important;\n  transform: translate(0, 0.5px) scale(0.85);\n  transform-origin: top left;\n  text-overflow: initial !important;\n}\n.text-field-component .MuiFormLabel-root + .MuiInputBase-formControl {\n  margin-top: 25px !important;\n}\n.text-field-component .MuiInputBase-root.no-border {\n  border: none !important;\n  padding: 0 !important;\n  width: fit-content !important;\n}\n.text-field-component .MuiInputBase-root {\n  color: #666666 !important;\n  border: 1px solid grey;\n  padding: 0.43rem 0.87rem;\n  background-color: white !important;\n  border-radius: 3px !important;\n}\n.text-field-component .MuiInputBase-root.Mui-error {\n  border: 1px solid #F24726 !important;\n}\n.text-field-component .MuiInputBase-root:not(.Mui-disabled):hover {\n  border: 1px solid grey;\n}\n.text-field-component .MuiInputBase-root.Mui-focused {\n  border: 1px solid #3299C7;\n}\n.text-field-component .MuiInputBase-root .MuiInputBase-input {\n  color: #666666 !important;\n  background-color: white !important;\n}\n.text-field-component .MuiInputBase-root .MuiInputBase-input::placeholder {\n  text-overflow: ellipsis !important;\n  color: #666666 !important;\n  opacity: 1;\n}\n.text-field-component .MuiInputBase-root .Mui-disabled {\n  -webkit-text-fill-color: #666666 !important;\n}\n.text-field-component .MuiFormHelperText-root {\n  padding: 0 !important;\n  font-size: 0.85rem !important;\n  color: #666666;\n}";
+styleInject(css_248z$4);
+
+var TextFieldComponent = function TextFieldComponent(props) {
+  var _React$useState = React__default.useState(false),
+      hover = _React$useState[0],
+      setHover = _React$useState[1];
+
+  return React__default.createElement(_.Box, {
+    className: "text-field-component",
+    width: "100%"
+  }, React__default.createElement(_.TextField, {
+    onMouseEnter: function onMouseEnter() {
+      return setHover(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setHover(false);
+    },
+    name: props.name,
+    error: props.error,
+    id: props.id,
+    label: props.label,
+    value: props.value,
+    defaultValue: props.defaultValue,
+    className: props.className,
+    required: props.required,
+    disabled: props.disabled,
+    type: props.type,
+    placeholder: props.placeholder,
+    autoComplete: props.autoComplete,
+    variant: "standard",
+    ref: props.inputRef,
+    InputProps: {
+      className: (props.noBorders ? 'no-border' : '') + " " + (!props.disabled && hover ? 'main-border-color' : ''),
+      disableUnderline: true,
+      startAdornment: props.startIcon,
+      endAdornment: props.endIcon,
+      inputProps: {
+        max: props.maxNumber,
+        min: props.minNumber,
+        step: props.step
+      }
+    },
+    InputLabelProps: {
+      shrink: true
+    },
+    helperText: props.helperText,
+    fullWidth: props.fullWidth,
+    multiline: props.multiline,
+    rows: props.rows,
+    onChange: props.onChange,
+    onKeyUp: props.onKeyUp,
+    inputProps: {
+      maxLength: props.maxLength,
+      step: props.step,
+      max: props.maxNumber,
+      min: props.minNumber
+    }
+  }));
+};
+TextFieldComponent.defaultProps = {
+  fullWidth: true,
+  type: 'text'
+};
+
 var TableComponent = function TableComponent(props) {
   var _props$isCheckTable7, _props$isCheckTable8, _props$isCheckTable9;
 
@@ -416,6 +482,32 @@ var TableComponent = function TableComponent(props) {
     return o;
   };
 
+  var EditableTableCell = function EditableTableCell(row, value, fieldName, editableCell) {
+    var rowEdit = JSON.parse(JSON.stringify(row));
+
+    if (editableCell.isTextField) {
+      var setUpdate = lodash.debounce(function () {
+        var _editableCell$isTextF, _editableCell$isTextF2;
+
+        ((_editableCell$isTextF = editableCell.isTextField) == null ? void 0 : _editableCell$isTextF.onCellValueChange) && ((_editableCell$isTextF2 = editableCell.isTextField) == null ? void 0 : _editableCell$isTextF2.onCellValueChange(rowEdit));
+      }, 1000);
+
+      var handleTextFieldChange = function handleTextFieldChange(e) {
+        rowEdit[fieldName] = e.target.value;
+        setUpdate();
+      };
+
+      return React__default.createElement(TextFieldComponent, {
+        type: editableCell.isTextField.type,
+        onChange: handleTextFieldChange,
+        name: fieldName,
+        defaultValue: value
+      });
+    } else {
+      return value;
+    }
+  };
+
   return React__default.createElement(_.Box, {
     className: "table-component"
   }, React__default.createElement(_.Paper, {
@@ -546,7 +638,7 @@ var TableComponent = function TableComponent(props) {
         onChange: function onChange(event) {
           return onCheckAction(event, row.id);
         }
-      })) : React__default.createElement(_.Box, {
+      })) : column.isEditableTableCell ? EditableTableCell(row, value, column.id, column.isEditableTableCell) : React__default.createElement(_.Box, {
         className: ((_column$enumColumn5 = column.enumColumn) != null && _column$enumColumn5.hasColor ? value.toLowerCase() + "-type-color" : '') + " format-value"
       }, formatValue(value, column)));
     }));
@@ -592,8 +684,8 @@ TableComponent.defaultProps = {
   showTotalCount: true
 };
 
-var css_248z$4 = ".main-layout-simple {\n  width: 100%;\n}\n.main-layout-simple .main-wrapper {\n  width: 100%;\n  min-height: 100vh;\n  height: fit-content;\n  position: relative;\n}";
-styleInject(css_248z$4);
+var css_248z$5 = ".main-layout-simple {\n  width: 100%;\n}\n.main-layout-simple .main-wrapper {\n  width: 100%;\n  min-height: 100vh;\n  height: fit-content;\n  position: relative;\n}";
+styleInject(css_248z$5);
 
 var MainLayoutSimple = function MainLayoutSimple(props) {
   return React__default.createElement(_.Box, {
@@ -759,8 +851,8 @@ var VerticalNavItemCollapse = function VerticalNavItemCollapse(props) {
 
 var VerticalNavItemCollapse$1 = /*#__PURE__*/React__default.memo(VerticalNavItemCollapse);
 
-var css_248z$5 = ".vertical-navigation {\n  background: transparent;\n  color: white;\n}\n.vertical-navigation .nav-item {\n  cursor: pointer;\n}\n.vertical-navigation .nav-item svg {\n  font-size: 28px;\n}\n.vertical-navigation .nav-item {\n  padding: 12px;\n}\n.vertical-navigation .nav-item:hover {\n  background-color: #333f54;\n}\n.vertical-navigation .active .nav-item {\n  background-color: #3299C7;\n  border-radius: 0 25px 25px 0;\n  margin-right: 16px;\n}\n.vertical-navigation .active .nav-item .nav-item-text {\n  color: white !important;\n}\n.vertical-navigation .active .nav-item:hover {\n  color: white !important;\n}\n.vertical-navigation .active .nav-item:hover .nav-item-text {\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .active {\n  background-color: #333f54;\n}\n.vertical-navigation .nav-item-collapse .active .nav-item-text {\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .active:hover {\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .active:hover .nav-item-text {\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .open {\n  background-color: #333f54;\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .open .nav-item-text {\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .collapse-children {\n  background-color: #39465e;\n}\n.vertical-navigation .nav-item-collapse .collapse-children .nav-item-text {\n  padding-left: 16px;\n  padding-right: 16px;\n}";
-styleInject(css_248z$5);
+var css_248z$6 = ".vertical-navigation {\n  background: transparent;\n  color: white;\n}\n.vertical-navigation .nav-item {\n  cursor: pointer;\n}\n.vertical-navigation .nav-item svg {\n  font-size: 28px;\n}\n.vertical-navigation .nav-item {\n  padding: 12px;\n}\n.vertical-navigation .nav-item:hover {\n  background-color: #333f54;\n}\n.vertical-navigation .active .nav-item {\n  background-color: #3299C7;\n  border-radius: 0 25px 25px 0;\n  margin-right: 16px;\n}\n.vertical-navigation .active .nav-item .nav-item-text {\n  color: white !important;\n}\n.vertical-navigation .active .nav-item:hover {\n  color: white !important;\n}\n.vertical-navigation .active .nav-item:hover .nav-item-text {\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .active {\n  background-color: #333f54;\n}\n.vertical-navigation .nav-item-collapse .active .nav-item-text {\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .active:hover {\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .active:hover .nav-item-text {\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .open {\n  background-color: #333f54;\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .open .nav-item-text {\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .collapse-children {\n  background-color: #39465e;\n}\n.vertical-navigation .nav-item-collapse .collapse-children .nav-item-text {\n  padding-left: 16px;\n  padding-right: 16px;\n}";
+styleInject(css_248z$6);
 
 (function (NavigationType) {
   NavigationType[NavigationType["Item"] = 0] = "Item";
@@ -790,8 +882,8 @@ var VerticalNav = function VerticalNav(props) {
   }));
 };
 
-var css_248z$6 = ".user-info svg {\n  font-size: 28px !important;\n}";
-styleInject(css_248z$6);
+var css_248z$7 = ".user-info svg {\n  font-size: 28px !important;\n}";
+styleInject(css_248z$7);
 
 var UserInfo = function UserInfo(props) {
   var _React$useState = React__default.useState(null),
@@ -843,8 +935,8 @@ var UserInfo = function UserInfo(props) {
   }))))));
 };
 
-var css_248z$7 = ".app-sidebar {\n  width: 17rem;\n  background-color: #3f4d67;\n  box-shadow: 1px 0 20px 0 #3f4d67;\n  z-index: 1029;\n  color: white;\n}";
-styleInject(css_248z$7);
+var css_248z$8 = ".app-sidebar {\n  width: 17rem;\n  background-color: #3f4d67;\n  box-shadow: 1px 0 20px 0 #3f4d67;\n  z-index: 1029;\n  color: white;\n}";
+styleInject(css_248z$8);
 
 var AppSidebar = function AppSidebar(props) {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.Drawer, {
@@ -901,8 +993,8 @@ var AppSidebar = function AppSidebar(props) {
   }, props.footerComponents))))));
 };
 
-var css_248z$8 = ".drawer-sidebar {\n  width: 17rem;\n  background-color: #3f4d67;\n  box-shadow: 1px 0 20px 0 #3f4d67;\n  z-index: 1029;\n  color: white;\n}";
-styleInject(css_248z$8);
+var css_248z$9 = ".drawer-sidebar {\n  width: 17rem;\n  background-color: #3f4d67;\n  box-shadow: 1px 0 20px 0 #3f4d67;\n  z-index: 1029;\n  color: white;\n}";
+styleInject(css_248z$9);
 
 var DrawerSidebar = function DrawerSidebar(props) {
   return React__default.createElement(material.Drawer, {
@@ -928,8 +1020,8 @@ var DrawerSidebar = function DrawerSidebar(props) {
   }, props.footerComponents))));
 };
 
-var css_248z$9 = ".app-bar {\n  background-color: white !important;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.12);\n  color: black !important;\n}\n.app-bar .header-logo {\n  max-height: 59px;\n  height: 100%;\n  min-height: 56px;\n  width: 100%;\n}\n.app-bar img {\n  max-height: 59px;\n  height: 100%;\n  min-height: 56px;\n  width: 100%;\n}";
-styleInject(css_248z$9);
+var css_248z$a = ".app-bar {\n  background-color: white !important;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.12);\n  color: black !important;\n}\n.app-bar .header-logo {\n  max-height: 59px;\n  height: 100%;\n  min-height: 56px;\n  width: 100%;\n}\n.app-bar img {\n  max-height: 59px;\n  height: 100%;\n  min-height: 56px;\n  width: 100%;\n}";
+styleInject(css_248z$a);
 
 var AppHeader = function AppHeader(props) {
   return React__default.createElement(material.AppBar, {
@@ -951,8 +1043,8 @@ var AppHeader = function AppHeader(props) {
   }, React__default.createElement(MenuIcon, null)), props.children));
 };
 
-var css_248z$a = ".MuiButton-root {\n  width: auto;\n  padding: 0.8rem 1rem !important;\n  text-transform: inherit !important;\n  line-height: inherit !important;\n  box-shadow: none !important;\n  font-size: 1rem !important;\n  background-color: #3299C7;\n}\n.MuiButton-root.btn-login {\n  width: 100%;\n}\n.MuiButton-root.btn-modal-cancel {\n  background-color: #666666 !important;\n}\n.MuiButton-root.btn-modal-cancel.Mui-disabled {\n  background-color: #666666c4 !important;\n  color: #030303b4 !important;\n}\n.MuiButton-root:hover {\n  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important;\n}\n.MuiButton-root .MuiCircularProgress-root {\n  color: white !important;\n}\n.MuiButton-root .MuiButton-label .MuiCircularProgress-root {\n  color: white !important;\n}\n.MuiButton-root .MuiButton-startIcon svg {\n  font-size: 20px !important;\n}\n.MuiButton-root .MuiButton-endIcon svg {\n  font-size: 20px !important;\n}";
-styleInject(css_248z$a);
+var css_248z$b = ".MuiButton-root {\n  width: auto;\n  padding: 0.8rem 1rem !important;\n  text-transform: inherit !important;\n  line-height: inherit !important;\n  box-shadow: none !important;\n  font-size: 1rem !important;\n  background-color: #3299C7;\n}\n.MuiButton-root.btn-login {\n  width: 100%;\n}\n.MuiButton-root.btn-modal-cancel {\n  background-color: #666666 !important;\n}\n.MuiButton-root.btn-modal-cancel.Mui-disabled {\n  background-color: #666666c4 !important;\n  color: #030303b4 !important;\n}\n.MuiButton-root:hover {\n  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important;\n}\n.MuiButton-root .MuiCircularProgress-root {\n  color: white !important;\n}\n.MuiButton-root .MuiButton-label .MuiCircularProgress-root {\n  color: white !important;\n}\n.MuiButton-root .MuiButton-startIcon svg {\n  font-size: 20px !important;\n}\n.MuiButton-root .MuiButton-endIcon svg {\n  font-size: 20px !important;\n}";
+styleInject(css_248z$b);
 
 var ButtonComponent = function ButtonComponent(props) {
   return React__default.createElement(_.Button, {
@@ -973,71 +1065,6 @@ ButtonComponent.defaultProps = {
   component: 'button'
 };
 
-var css_248z$b = ".text-field-component .MuiFormLabel-root {\n  color: #666666 !important;\n  font-size: calc(12pt + (14 - 12) * calc(100vw - 300px)/1300) !important;\n  transform: translate(0, 0.5px) scale(0.85);\n  transform-origin: top left;\n  text-overflow: initial !important;\n}\n.text-field-component .MuiFormLabel-root + .MuiInputBase-formControl {\n  margin-top: 25px !important;\n}\n.text-field-component .MuiInputBase-root.no-border {\n  border: none !important;\n  padding: 0 !important;\n  width: fit-content !important;\n}\n.text-field-component .MuiInputBase-root {\n  color: #666666 !important;\n  border: 1px solid grey;\n  padding: 0.43rem 0.87rem;\n  background-color: white !important;\n  border-radius: 3px !important;\n}\n.text-field-component .MuiInputBase-root.Mui-error {\n  border: 1px solid #F24726 !important;\n}\n.text-field-component .MuiInputBase-root:not(.Mui-disabled):hover {\n  border: 1px solid grey;\n}\n.text-field-component .MuiInputBase-root.Mui-focused {\n  border: 1px solid #3299C7;\n}\n.text-field-component .MuiInputBase-root .MuiInputBase-input {\n  color: #666666 !important;\n  background-color: white !important;\n}\n.text-field-component .MuiInputBase-root .MuiInputBase-input::placeholder {\n  text-overflow: ellipsis !important;\n  color: #666666 !important;\n  opacity: 1;\n}\n.text-field-component .MuiInputBase-root .Mui-disabled {\n  -webkit-text-fill-color: #666666 !important;\n}\n.text-field-component .MuiFormHelperText-root {\n  padding: 0 !important;\n  font-size: 0.85rem !important;\n  color: #666666;\n}";
-styleInject(css_248z$b);
-
-var TextFieldComponent = function TextFieldComponent(props) {
-  var _React$useState = React__default.useState(false),
-      hover = _React$useState[0],
-      setHover = _React$useState[1];
-
-  return React__default.createElement(_.Box, {
-    className: "text-field-component",
-    width: "100%"
-  }, React__default.createElement(_.TextField, {
-    onMouseEnter: function onMouseEnter() {
-      return setHover(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return setHover(false);
-    },
-    name: props.name,
-    error: props.error,
-    id: props.id,
-    label: props.label,
-    value: props.value,
-    defaultValue: props.defaultValue,
-    className: props.className,
-    required: props.required,
-    disabled: props.disabled,
-    type: props.type,
-    placeholder: props.placeholder,
-    autoComplete: props.autoComplete,
-    variant: "standard",
-    ref: props.inputRef,
-    InputProps: {
-      className: (props.noBorders ? 'no-border' : '') + " " + (!props.disabled && hover ? 'main-border-color' : ''),
-      disableUnderline: true,
-      startAdornment: props.startIcon,
-      endAdornment: props.endIcon,
-      inputProps: {
-        max: props.maxNumber,
-        min: props.minNumber,
-        step: props.step
-      }
-    },
-    InputLabelProps: {
-      shrink: true
-    },
-    helperText: props.helperText,
-    fullWidth: props.fullWidth,
-    multiline: props.multiline,
-    rows: props.rows,
-    onChange: props.onChange,
-    onKeyUp: props.onKeyUp,
-    inputProps: {
-      maxLength: props.maxLength,
-      step: props.step,
-      max: props.maxNumber,
-      min: props.minNumber
-    }
-  }));
-};
-TextFieldComponent.defaultProps = {
-  fullWidth: true,
-  type: 'text'
-};
-
 var css_248z$c = ".text-simple-component .MuiFormLabel-root {\n  color: #666666 !important;\n  font-size: calc(12pt + (14 - 12) * calc(100vw - 300px)/1300) !important;\n  transform: translate(0, 0.5px) scale(0.85);\n  transform-origin: top left;\n  text-overflow: initial !important;\n}\n.text-simple-component .MuiFormLabel-root + .text-simple-box.no-border {\n  margin-top: 7px !important;\n}\n.text-simple-component .text-simple-box.no-border {\n  border: none !important;\n  padding: 0 !important;\n}\n.text-simple-component .text-simple-box {\n  color: #666666 !important;\n  font-size: 1rem;\n  border: 1px solid grey;\n  padding: 0.868rem;\n  border-radius: 3px !important;\n}\n.text-simple-component .helper-text {\n  font-size: 0.85rem !important;\n  padding: 0 !important;\n  margin-top: 3px;\n  line-height: 1.66;\n  color: #666666 !important;\n  letter-spacing: 0.03333em;\n}\n.text-simple-component .has-error-border {\n  border-color: #F24726 !important;\n}\n.text-simple-component .has-error {\n  color: #F24726 !important;\n}";
 styleInject(css_248z$c);