techsbcn-storybook 0.11.0 → 0.12.1

package/dist/components/fields/ButtonComponent/ButtonComponent.d.ts

@@ -10,5 +10,6 @@ export interface ButtonComponentProps {
     form?: string;
     type?: 'button' | 'submit' | 'reset';
     disabled?: boolean;
+    component?: any;
 }
 export declare const ButtonComponent: React.FC<ButtonComponentProps>;

package/dist/components/fields/TextFieldComponent/TextFieldComponent.d.ts

@@ -24,7 +24,7 @@ interface TextFieldComponentProps {
     multiline?: boolean;
     rows?: number;
     maxLength?: number;
-    defaultValue?: string;
+    defaultValue?: string | number;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     step?: number | string;

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import { ObjectKey } from '../../../interfaces';
+import './SimpleTableComponent.scss';
+import { InputType } from '../../fields/TextFieldComponent/TextFieldComponent';
+interface SimpleTableComponentProps {
+    rows: any[];
+    values: ObjectKey;
+    className?: string;
+    columns: ColumnProps[];
+    rowsColorColumn?: {
+        columnName: string;
+        columnValue: string;
+    };
+    loading?: boolean;
+    onClickRow?: (id: number) => void;
+    isCheckTable?: {
+        rowsChecked?: number[];
+        onCheckedAction?: (ids: number[]) => void;
+        onCheckedSingleAction?: (id: number) => void;
+    };
+}
+interface ColumnProps {
+    id?: string;
+    label?: string;
+    minWidth?: number;
+    maxWidth?: number;
+    align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
+    alignCell?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
+    action?: ActionProps[];
+    isUnique?: boolean;
+    isDate?: boolean;
+    enumColumn?: {
+        isEnum?: boolean;
+        enumType?: any;
+        hasColor?: boolean;
+    };
+    isCheck?: boolean;
+    isPrice?: boolean;
+    isImage?: {
+        isUrl?: boolean;
+        isGuid?: {
+            guid: boolean;
+            action: (guid: string) => string;
+        };
+    };
+    isActiveFunction?: {
+        activeIcon: any;
+        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/data/UserList.d.ts

@@ -10,7 +10,7 @@ interface UserList {
     website: string;
     charge: number;
     topic: string;
-    extraInfo: BasicEntity;
+    extraInfo?: BasicEntity;
 }
 export declare const UserList: UserList[];
 export {};

package/dist/interfaces/search/BasicEntity.d.ts

@@ -1,5 +1,5 @@
 import { ObjectKey } from '../../interfaces';
 export interface BasicEntity extends ObjectKey {
-    id: number;
-    name: string;
+    id?: number;
+    name?: string;
 }

package/dist/stories/Tables/Tables.stories.d.ts

@@ -1,4 +1,5 @@
 import { Meta, Story } from '@storybook/react';
 declare const meta: Meta;
 export default meta;
-export declare const TableSimple: Story;
+export declare const Table: Story;
+export declare const SimpleTable: Story;

package/dist/stories/button/Button.stories.d.ts

@@ -7,3 +7,4 @@ export declare const ModalCancel: Story<import("@storybook/react").Args>;
 export declare const Loading: Story<import("@storybook/react").Args>;
 export declare const StartIcon: Story<import("@storybook/react").Args>;
 export declare const EndIcon: Story<import("@storybook/react").Args>;
+export declare const Span: Story<import("@storybook/react").Args>;

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;
 
@@ -402,16 +468,46 @@ var TableComponent = function TableComponent(props) {
     for (var i = 0, n = a.length; i < n; ++i) {
       var k = a[i];
 
-      if (k in o) {
-        o = o[k];
-      } else {
-        return;
+      try {
+        if (k in o) {
+          o = o[k];
+        } else {
+          return undefined;
+        }
+      } catch (_error) {
+        return undefined;
       }
     }
 
     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, {
@@ -542,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)));
     }));
@@ -588,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, {
@@ -755,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";
@@ -786,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),
@@ -839,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, {
@@ -897,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, {
@@ -924,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, {
@@ -947,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, {
@@ -959,75 +1055,14 @@ var ButtonComponent = function ButtonComponent(props) {
     startIcon: !props.loading && props.startIcon,
     endIcon: !props.loading && props.endIcon,
     onClick: props.onClick,
-    disabled: !props.loading && props.disabled
+    disabled: !props.loading && props.disabled,
+    component: props.component
   }, props.loading ? React__default.createElement(_.CircularProgress, {
     size: 25
   }) : props.label);
 };
-
-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'
+ButtonComponent.defaultProps = {
+  component: 'button'
 };
 
 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}";