techsbcn-storybook 0.11.1 → 0.12.2

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

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

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

@@ -10,6 +10,7 @@ interface TextSimpleComponentProps {
     helperText?: string;
     noBorders?: boolean;
     fullWidth?: boolean;
+    noMargin?: boolean;
 }
 export declare const TextSimpleComponent: React.FC<TextSimpleComponentProps>;
 export {};

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

@@ -0,0 +1,74 @@
+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;
+        enumSuffix?: string;
+    };
+    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;
+    isBoolean?: {
+        enumType?: any;
+        hasColor?: boolean;
+        enumSuffix?: string;
+    };
+}
+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;
@@ -31,9 +32,10 @@ interface ColumnProps {
     isUnique?: boolean;
     isDate?: boolean;
     enumColumn?: {
-        isEnum?: boolean;
+        isEnum: boolean;
         enumType?: any;
         hasColor?: boolean;
+        enumSuffix?: string;
     };
     isCheck?: boolean;
     noSort?: boolean;
@@ -50,11 +52,26 @@ interface ColumnProps {
         disabledIcon: any;
         onClickId: (id: number) => void;
     };
+    isEditableTableCell?: EditableCellProps;
+    isBoolean?: {
+        enumType?: any;
+        hasColor?: boolean;
+        enumSuffix?: string;
+    };
 }
 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,8 @@ interface UserList {
     website: string;
     charge: number;
     topic: string;
-    extraInfo: BasicEntity;
+    extraInfo?: BasicEntity;
+    active: boolean;
 }
 export declare const UserList: UserList[];
 export {};

package/dist/data/_globalization/es.d.ts

@@ -110,5 +110,12 @@ declare var _default: {
     image: string;
     skills: string;
     information: string;
+    enable: string;
+    disable: string;
+    enable_suffix: string;
+    disable_suffix: string;
+    boolean: string;
+    true_suffix: string;
+    false_suffix: string;
 };
 export default _default;

package/dist/data/enums/ActiveStatus.d.ts

@@ -0,0 +1,4 @@
+export declare enum ActiveStatus {
+    true = "ENABLE",
+    false = "DISABLE"
+}

package/dist/data/index.d.ts

@@ -2,3 +2,4 @@ export * from './SelectMock';
 export * from './UserList';
 export * from './Values';
 export * from './enums/scopes';
+export * from './enums/ActiveStatus';

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

@@ -2,8 +2,11 @@ import { Meta, Story } from '@storybook/react';
 declare const meta: Meta;
 export default meta;
 export declare const Default: Story<import("@storybook/react").Args>;
+export declare const ReverseColor: Story<import("@storybook/react").Args>;
+export declare const ReverseColorLoading: Story<import("@storybook/react").Args>;
 export declare const LoginButton: Story<import("@storybook/react").Args>;
 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;
 
@@ -352,22 +418,39 @@ var TableComponent = function TableComponent(props) {
     var _column$enumColumn;
 
     if ((_column$enumColumn = column.enumColumn) != null && _column$enumColumn.isEnum) {
-      var _column$enumColumn2;
+      var _column$enumColumn2, _column$enumColumn9;
 
       if ((_column$enumColumn2 = column.enumColumn) != null && _column$enumColumn2.enumType) {
-        var _column$enumColumn4;
+        var _column$enumColumn5, _column$enumColumn8;
+
+        var result = [];
 
         if (value === null) {
           return value;
         } else if (value.split(',').length > 1) {
-          var result = [];
           value.split(',').forEach(function (v) {
             var _column$enumColumn3;
 
             result.push(props.values[(_column$enumColumn3 = column.enumColumn) == null ? void 0 : _column$enumColumn3.enumType[v.replace(/ /g, '')].toUpperCase()]);
           });
           return result.join();
-        } else return props.values[(_column$enumColumn4 = column.enumColumn) == null ? void 0 : _column$enumColumn4.enumType[value].toUpperCase()];
+        } else if (Array.isArray(value)) {
+          var split = value.toString().split(',');
+          split.forEach(function (v) {
+            var _column$enumColumn4;
+
+            if (!isNaN(parseInt(v))) result.push(props.values[(_column$enumColumn4 = column.enumColumn) == null ? void 0 : _column$enumColumn4.enumType[v.replace(/ /g, '')].toUpperCase()]);else result.push(props.values[v.toUpperCase()]);
+          });
+          return result.join();
+        } else if ((_column$enumColumn5 = column.enumColumn) != null && _column$enumColumn5.enumSuffix) {
+          var _column$enumColumn6, _column$enumColumn7;
+
+          return props.values[((_column$enumColumn6 = column.enumColumn) == null ? void 0 : _column$enumColumn6.enumType[value].toUpperCase()) + "_" + ((_column$enumColumn7 = column.enumColumn) == null ? void 0 : _column$enumColumn7.enumSuffix.toUpperCase())];
+        } else return props.values[(_column$enumColumn8 = column.enumColumn) == null ? void 0 : _column$enumColumn8.enumType[value].toUpperCase()];
+      } else if ((_column$enumColumn9 = column.enumColumn) != null && _column$enumColumn9.enumSuffix) {
+        var _column$enumColumn10;
+
+        return props.values[value.toUpperCase() + "_" + ((_column$enumColumn10 = column.enumColumn) == null ? void 0 : _column$enumColumn10.enumSuffix.toUpperCase())];
       } else return props.values[value.toUpperCase()];
     }
 
@@ -392,6 +475,28 @@ var TableComponent = function TableComponent(props) {
       return value.join(', ');
     }
 
+    if (column.isBoolean) {
+      var booleanStr = value ? 'true' : 'false';
+
+      if (column.isBoolean.enumType) {
+        var _column$isBoolean3;
+
+        if (column.isBoolean.enumSuffix) {
+          var _column$isBoolean, _column$isBoolean2;
+
+          return props.values[((_column$isBoolean = column.isBoolean) == null ? void 0 : _column$isBoolean.enumType[booleanStr].toUpperCase()) + "_" + ((_column$isBoolean2 = column.isBoolean) == null ? void 0 : _column$isBoolean2.enumSuffix.toUpperCase())];
+        } else return props.values[(_column$isBoolean3 = column.isBoolean) == null ? void 0 : _column$isBoolean3.enumType[booleanStr].toUpperCase()];
+      } else if (column.isBoolean.enumSuffix) {
+        var _column$isBoolean4;
+
+        return props.values[booleanStr.toUpperCase() + "_" + ((_column$isBoolean4 = column.isBoolean) == null ? void 0 : _column$isBoolean4.enumSuffix.toUpperCase())];
+      }
+    }
+
+    if (typeof value === 'boolean') {
+      return String(value);
+    }
+
     return value;
   };
 
@@ -402,16 +507,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, {
@@ -487,8 +622,6 @@ var TableComponent = function TableComponent(props) {
       tabIndex: -1,
       key: row.id || index
     }, props.columns.map(function (column) {
-      var _column$enumColumn5;
-
       var value = ObjectbyString(row, column.id);
       var isItemSelected = column.isCheck && isSelected(row.id);
       return React__default.createElement(_.TableCell, {
@@ -542,8 +675,12 @@ var TableComponent = function TableComponent(props) {
         onChange: function onChange(event) {
           return onCheckAction(event, row.id);
         }
-      })) : React__default.createElement(_.Box, {
-        className: ((_column$enumColumn5 = column.enumColumn) != null && _column$enumColumn5.hasColor ? value.toLowerCase() + "-type-color" : '') + " format-value"
+      })) : column.isEditableTableCell ? EditableTableCell(row, value, column.id, column.isEditableTableCell) : column.enumColumn ? React__default.createElement(_.Box, {
+        className: (column.enumColumn.hasColor ? (column.enumColumn.enumSuffix ? value.toLowerCase() + "-" + column.enumColumn.enumSuffix.toLowerCase() : value.toString().toLowerCase()) + "-type-color" : '') + " format-value"
+      }, formatValue(value, column)) : column.isBoolean ? React__default.createElement(_.Box, {
+        className: (column.isBoolean.hasColor ? (column.isBoolean.enumSuffix ? value.toString().toLowerCase() + "-" + column.isBoolean.enumSuffix.toLowerCase() : value.toString().toLowerCase()) + "-boolean-color" : '') + " format-value"
+      }, formatValue(value, column)) : React__default.createElement(_.Box, {
+        className: "format-value"
       }, formatValue(value, column)));
     }));
   }) : !props.loading ? React__default.createElement(_.TableRow, null, React__default.createElement(_.TableCell, {
@@ -588,8 +725,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 +892,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 +923,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 +976,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 +1034,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 +1061,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,90 +1084,30 @@ 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-reverse-color {\n  border: 1px solid #3299C7;\n  color: #3299C7;\n  background-color: white !important;\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;\n}\n.MuiButton-root .MuiButton-label .MuiCircularProgress-root {\n  color: white;\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, {
     type: props.type && props.type,
     variant: "contained",
     form: props.form && props.form,
-    className: "main-background-color " + (props.className ? props.className : ''),
+    className: (props.reverseColors ? 'btn-reverse-color main-color main-border-color' : 'main-background-color') + "  " + (props.className ? props.className : ''),
     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
+    className: "" + (props.reverseColors ? 'circular-progress-main-color' : ''),
+    size: 20
   }) : 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}";
+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: 16px !important;\n}\n.text-simple-component .MuiFormLabel-root + .text-simple-box.no-margin.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);
 
 var TextSimpleComponent = function TextSimpleComponent(props) {
@@ -1041,7 +1118,7 @@ var TextSimpleComponent = function TextSimpleComponent(props) {
   }, props.label && React__default.createElement(_.FormLabel, null, props.label), React__default.createElement(_.Box, {
     display: "flex",
     alignItems: "center",
-    className: "text-simple-box " + (props.className ? props.className : '') + " " + (props.noBorders ? 'no-border' : '') + " " + (props.error ? 'has-error-border' : ''),
+    className: "text-simple-box " + (props.className ? props.className : '') + " " + (props.noMargin ? 'no-margin' : '') + " " + (props.noBorders ? 'no-border' : '') + " " + (props.error ? 'has-error-border' : ''),
     width: "" + (props.fullWidth ? 'auto' : 'fit-content')
   }, props.startIcon && React__default.createElement(_.Box, {
     mr: 1