techsbcn-storybook 0.22.5 → 0.22.7

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

@@ -5,7 +5,7 @@ export interface SearchComponentProps {
     title?: string;
     searchBar?: any;
     actions?: {
-        children: any;
+        action: any;
     }[];
     filters?: {
         singleFilter?: any;
@@ -14,6 +14,7 @@ export interface SearchComponentProps {
     filtersSize?: number;
     enableAfter?: boolean;
     fixedOpen?: boolean;
+    divider?: boolean;
 }
 interface DoubleFilter {
     label?: string;

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

@@ -70,7 +70,7 @@ var PublicFormWrapper = function PublicFormWrapper(props) {
   }, props.children)));
 };
 
-var css_248z$1 = ".search-component .title {\n  color: #000;\n  font-size: 17px !important;\n  font-weight: 400;\n  position: relative;\n}\n.search-component .tune-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 50px;\n  cursor: pointer;\n  color: white;\n}\n.search-component .tune-btn: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.search-component .wrapper-actions.min-action-width .btn-action .MuiButton-root {\n  max-width: 100%;\n  width: auto;\n}\n.search-component .wrapper-actions.min-action-width .btn-action .btn {\n  max-width: 100%;\n  width: auto;\n}\n.search-component .wrapper-actions .btn-action {\n  cursor: pointer;\n}\n.search-component .wrapper-actions .btn-action .MuiButton-root {\n  width: max-content;\n}\n.search-component .wrapper-actions .btn-action .btn {\n  width: max-content;\n}\n.search-component .wrapper-actions .btn-action svg {\n  font-size: 40px;\n}\n\n.search-menu-actions .wrapper-actions .btn-action {\n  cursor: pointer;\n}\n.search-menu-actions .wrapper-actions .btn-action .btn {\n  width: max-content;\n}\n.search-menu-actions .wrapper-actions .btn-action svg {\n  font-size: 40px;\n}";
+var css_248z$1 = ".search-component .title {\n  color: #000;\n  font-size: 18px !important;\n  font-weight: 400;\n  position: relative;\n}\n.search-component .tune-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 50px;\n  cursor: pointer;\n  color: white;\n}\n.search-component .tune-btn: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.search-component .wrapper-actions.min-action-width .btn-action .MuiButton-root {\n  max-width: 100%;\n  width: auto;\n}\n.search-component .wrapper-actions.min-action-width .btn-action .btn {\n  max-width: 100%;\n  width: auto;\n}\n.search-component .wrapper-actions .btn-action {\n  cursor: pointer;\n}\n.search-component .wrapper-actions .btn-action .MuiButton-root {\n  width: max-content;\n}\n.search-component .wrapper-actions .btn-action .btn {\n  width: max-content;\n}\n.search-component .wrapper-actions .btn-action svg {\n  font-size: 40px;\n}\n\n.search-menu-actions .wrapper-actions .btn-action {\n  cursor: pointer;\n}\n.search-menu-actions .wrapper-actions .btn-action .btn {\n  width: max-content;\n}\n.search-menu-actions .wrapper-actions .btn-action svg {\n  font-size: 40px;\n}";
 styleInject(css_248z$1);
 
 var ActionsList = function ActionsList(actions) {
@@ -85,7 +85,7 @@ var ActionsList = function ActionsList(actions) {
       ml: 2,
       key: i,
       className: "btn-action main-color"
-    }, action.children);
+    }, action.action);
   }));
 };
 
@@ -136,13 +136,16 @@ var SearchComponent = function SearchComponent(props) {
   var randId = Math.random().toString(36).substring(7);
   return React__default.createElement(material.Box, {
     className: "search-component " + props.className
+  }, React__default.createElement(material.Box, {
+    mb: props.divider ? 2 : 0,
+    px: 2
   }, React__default.createElement(material.Grid, {
     container: true,
     alignItems: "center"
   }, React__default.createElement(material.Grid, {
     item: true,
     xs: props.actions ? 8 : 12,
-    md: props.actions && props.searchBar ? 4 : props.searchBar ? 8 : props.actions ? 6 : 12
+    md: props.actions && props.searchBar ? 4 : props.searchBar ? 7 : props.actions ? 6 : 12
   }, React__default.createElement(material.Box, {
     pr: 1,
     className: (props.enableAfter ? 'main-background-color-after' : '') + " title"
@@ -193,14 +196,14 @@ var SearchComponent = function SearchComponent(props) {
       className: "wrapper-actions"
     }, React__default.createElement(material.Box, {
       className: "btn-action main-color"
-    }, action.children));
+    }, action.action));
   }))) : React__default.createElement(material.Box, {
     ml: "auto",
     className: "wrapper-actions " + (props.title ? 'min-action-width' : '')
   }, ActionsList(props.actions)))), (props.searchBar || props.filters || props.actions) && React__default.createElement(material.Grid, {
     item: true,
     xs: 12,
-    md: props.actions && props.searchBar ? 8 : props.actions ? 6 : 4
+    md: props.actions && props.searchBar ? 8 : props.actions ? 6 : 5
   }, React__default.createElement(material.Box, {
     display: "flex",
     alignItems: "center"
@@ -227,11 +230,13 @@ var SearchComponent = function SearchComponent(props) {
       }
     },
     className: "wrapper-actions"
-  }, ActionsList(props.actions))))), React__default.createElement(material.Collapse, {
+  }, ActionsList(props.actions)))))), props.divider && React__default.createElement(material.Divider, null), React__default.createElement(material.Collapse, {
     "in": isOpen
   }, React__default.createElement(material.Box, {
     className: "filters",
-    my: 2
+    px: 2,
+    mt: 2,
+    mb: props.divider ? 0 : 1
   }, React__default.createElement(material.Grid, {
     container: true,
     spacing: 3,
@@ -284,8 +289,7 @@ var MainWrapperComponent = function MainWrapperComponent(props) {
   }, React__default.createElement(_.CircularProgress, {
     className: "circular-progress-main-color"
   })) : React__default.createElement(React__default.Fragment, null, props.headerProps && React__default.createElement(_.Box, {
-    mb: props.divider ? 1 : 0,
-    px: 2
+    mb: props.divider ? 1.5 : 0
   }, React__default.createElement(SearchComponent, Object.assign({}, props.headerProps, {
     enableAfter: true
   }))), props.divider && React__default.createElement(_.Divider, null), props.children && !props.loadingChildren ? React__default.createElement(_.Box, {
@@ -306,7 +310,7 @@ var MainWrapperComponent = function MainWrapperComponent(props) {
 var css_248z$4 = ".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.with-scroll {\n  max-height: 68vh;\n}\n.table-component .paper-container .table-container .table-column {\n  font-weight: bold;\n  font-size: calc(9pt + (11 - 9) * calc(100vw - 300px)/1300) !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  font-weight: bold;\n  padding: 0px 10px 0px 10px !important;\n}\n.table-component .paper-container .table-container.table-simple {\n  border-bottom: 1px solid black;\n}\n.table-component .paper-container .table-container.table-simple .table-column:first-child {\n  border-radius: 5px 0 0 5px;\n}\n.table-component .paper-container .table-container.table-simple .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-bordered .table-column {\n  border-bottom: 1px solid #eaeaea !important;\n  border-top: 1px solid #eaeaea !important;\n  border-right: 1px solid #eaeaea !important;\n  border-bottom: 1px solid #eaeaea !important;\n  color: #7a7a7a !important;\n}\n.table-component .paper-container .table-container.table-bordered .table-column .table-header-cell {\n  color: #7a7a7a !important;\n}\n.table-component .paper-container .table-container.table-bordered .table-column:first-child {\n  border-left: 1px solid #eaeaea;\n}\n.table-component .paper-container .table-container.table-bordered .table-rows .table-cell {\n  border-right: 1px solid #eaeaea;\n  color: #505050 !important;\n}\n.table-component .paper-container .table-container.table-bordered .table-rows .table-cell:first-child {\n  border-left: 1px solid #eaeaea;\n}\n.table-component .paper-container .table-container .table-rows.table-striped td {\n  background-color: rgba(255, 255, 255, 0.95);\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.row-click:hover.table-striped {\n  background-color: transparent !important;\n}\n.table-component .paper-container .table-container .table-rows.row-click:hover.table-striped td {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.table-component .paper-container .table-container .table-rows.Mui-selected {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.table-component .paper-container .table-container .table-rows.Mui-selected.table-striped {\n  background-color: transparent !important;\n}\n.table-component .paper-container .table-container .table-rows.Mui-selected.table-striped td {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.table-component .paper-container .table-container .table-rows .Mui-selected {\n  background-color: transparent !important;\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 .table-container .table-rows .format-value {\n  font-size: calc(9pt + (11 - 9) * calc(100vw - 300px)/1300) !important;\n}\n.table-component .paper-container .table-container .table-rows .format-value .MuiTypography-root {\n  font-size: calc(9pt + (11 - 9) * calc(100vw - 300px)/1300);\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.table-bordered {\n  color: #7a7a7a !important;\n}\n.table-component .paper-container .MuiTablePagination-root.table-bordered .pagination {\n  margin-left: auto;\n}\n.table-component .paper-container .MuiTablePagination-root.table-bordered .pagination li button {\n  border-color: #dee2e6 !important;\n  margin: 0px;\n  border-radius: 0px !important;\n  color: #7a7a7a !important;\n  border-top: 1px solid;\n  border-bottom: 1px solid;\n  border-left: 0px solid;\n  border-right: 1px solid;\n}\n.table-component .paper-container .MuiTablePagination-root.table-bordered .pagination li:nth-child(1) .MuiPaginationItem-root {\n  border-radius: 5px 0 0 5px !important;\n  border-left: 1px solid;\n}\n.table-component .paper-container .MuiTablePagination-root.table-bordered .pagination li:nth-last-child(1) .MuiPaginationItem-root {\n  border-radius: 0 5px 5px 0 !important;\n}\n.table-component .paper-container .MuiTablePagination-root.table-bordered .pagination .MuiPaginationItem-icon {\n  color: #7a7a7a !important;\n}\n.table-component .paper-container .MuiTablePagination-root.table-simple .pagination .MuiPaginationItem-page {\n  background-color: #3f4d67;\n  color: white !important;\n}\n.table-component .paper-container .MuiTablePagination-root.table-simple .pagination li:nth-child(2) .MuiPaginationItem-page {\n  border-radius: 5px 0 0 5px !important;\n}\n.table-component .paper-container .MuiTablePagination-root.table-simple .pagination li:nth-last-child(2) .MuiPaginationItem-page {\n  border-radius: 0 5px 5px 0 !important;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination .MuiPaginationItem-page {\n  border-radius: 0px;\n  margin: 1px;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination .MuiPaginationItem-page.Mui-selected {\n  color: white !important;\n  background-color: #3299C7;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination li button {\n  padding: 14px;\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: auto;\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: 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: 299px;\n  }\n  .table-component .MuiTablePagination-root.table-bordered .pagination {\n    margin-left: 0;\n  }\n}";
 styleInject(css_248z$4);
 
-var css_248z$5 = ".text-field-component .MuiFormLabel-root {\n  color: #666666 !important;\n  font-size: 1rem !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  font-size: 14px !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}";
+var css_248z$5 = ".text-field-component .MuiFormLabel-root {\n  color: #666666 !important;\n  font-size: 1rem !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.33rem 0.87rem;\n  background-color: white !important;\n  border-radius: 3px !important;\n  font-size: 14px !important;\n}\n.text-field-component .MuiInputBase-root.end-icon-padding {\n  padding: 0.1769rem 0.87rem;\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$5);
 
 var TextFieldComponent = function TextFieldComponent(props) {
@@ -339,7 +343,7 @@ var TextFieldComponent = function TextFieldComponent(props) {
     variant: "standard",
     ref: props.inputRef,
     InputProps: {
-      className: (props.noBorders ? 'no-border' : '') + " " + (!props.disabled && hover ? 'main-border-color' : ''),
+      className: (props.noBorders ? 'no-border' : '') + " " + (!props.disabled && hover ? 'main-border-color' : '') + " \n          " + (props.endIcon ? 'end-icon-padding' : ''),
       disableUnderline: true,
       startAdornment: props.startIcon,
       endAdornment: props.endIcon,
@@ -1618,7 +1622,7 @@ ButtonComponent.defaultProps = {
   component: 'button'
 };
 
-var css_248z$e = ".text-simple-component .MuiFormLabel-root {\n  color: #666666;\n  font-size: 1rem !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;\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$e = ".text-simple-component .MuiFormLabel-root {\n  color: #666666;\n  font-size: 1rem !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;\n  font-size: 14px;\n  border: 1px solid grey;\n  border-radius: 3px !important;\n  padding: 0.611rem 0.87rem;\n  line-height: 1.4375em;\n  letter-spacing: 0.00938em;\n}\n.text-simple-component .text-simple-box.icon-padding {\n  padding: 0.49rem 0.87rem;\n}\n.text-simple-component .text-simple-box.end-icon-padding {\n  padding: 0.177rem 0.87rem;\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$e);
 
 var TextSimpleComponent = function TextSimpleComponent(props) {
@@ -1651,15 +1655,19 @@ var TextSimpleComponent = function TextSimpleComponent(props) {
   }, props.labelBoxProps), props.label) : React__default.createElement(React__default.Fragment, null), React__default.createElement(_.Box, Object.assign({
     display: "" + (props.skeletonValue && props.skeletonValue.useSkeleton ? 'block' : props.startIcon || props.endIcon ? 'flex' : 'block'),
     alignItems: "center",
-    className: "text-simple-box " + ((_props$className = props.className) != null ? _props$className : '') + " " + (props.noMargin ? 'no-margin' : '') + " " + (props.noBorders || props.skeletonValue && props.skeletonValue.useSkeleton ? 'no-border' : '') + " " + (props.error ? 'has-error-border' : ''),
+    className: "text-simple-box " + ((_props$className = props.className) != null ? _props$className : '') + " " + (props.noMargin ? 'no-margin' : '') + " " + (props.noBorders || props.skeletonValue && props.skeletonValue.useSkeleton ? 'no-border' : '') + " " + (props.error ? 'has-error-border' : '') + " " + (props.startIcon ? 'icon-padding' : props.endIcon ? 'end-icon-padding' : ''),
     width: "" + (props.fullWidth ? 'auto' : 'fit-content')
   }, props.valueBoxProps), props.skeletonValue && props.skeletonValue.useSkeleton ? React__default.createElement(SkeletonCompleteDefault, Object.assign({}, props.skeletonValue)) : React__default.createElement(React__default.Fragment, null, props.startIcon && React__default.createElement(_.Box, {
-    mr: 1
+    mr: 1,
+    display: 'flex'
   }, props.startIcon), props.isLoading ? React__default.createElement(_.CircularProgress, {
     className: "circular-progress-main-color",
     size: 20
-  }) : props.value, props.endIcon && React__default.createElement(_.Box, {
-    ml: "" + (props.fullWidth ? 'auto' : 1)
+  }) : React__default.createElement(_.Box, {
+    width: "" + (props.fullWidth ? '100%' : 'auto')
+  }, props.value), props.endIcon && React__default.createElement(_.Box, {
+    ml: "" + (props.fullWidth ? 'auto' : 1),
+    display: 'flex'
   }, props.endIcon))), props.helperText && React__default.createElement(_.Box, Object.assign({
     className: "helper-text " + (props.error ? 'has-error' : '')
   }, props.helperBoxProps), props.skeletonValue && props.skeletonValue.useSkeleton ? React__default.createElement(_.Skeleton, {
@@ -1672,7 +1680,7 @@ TextSimpleComponent.defaultProps = {
   isFormLabel: true
 };
 
-var css_248z$f = ".select-field .MuiFormLabel-root {\n  color: #666666 !important;\n  font-size: 1rem !important;\n  transform: translate(0, 0.5px) scale(0.85);\n  transform-origin: top left;\n  text-overflow: initial !important;\n}\n.select-field .select {\n  font-size: 1rem;\n}\n.select-field .select__menu {\n  z-index: 3 !important;\n  background-color: white;\n}\n.select-field .select__control {\n  cursor: pointer;\n  border: 1px solid grey;\n  border-radius: 5px !important;\n  padding: 0.23rem 0.2rem;\n  font-size: 14px;\n  color: grey !important;\n  background-color: transparent;\n}\n.select-field .select__option {\n  cursor: pointer;\n  color: #666666 !important;\n  background-color: white !important;\n}\n.select-field .select__option--is-focused {\n  background-color: rgba(0, 0, 0, 0.04) !important;\n  color: #666666 !important;\n}\n.select-field .select__option--is-selected {\n  color: white !important;\n}\n.select-field .select__indicator {\n  color: grey !important;\n}\n.select-field .select__indicator:hover {\n  color: black !important;\n}\n.select-field .select__placeholder {\n  text-overflow: ellipsis !important;\n  color: #666666 !important;\n  opacity: 1;\n}\n.select-field .select__single-value {\n  color: #666666 !important;\n}\n.select-field .select__multi-value__label {\n  color: #666666 !important;\n  font-size: 14px;\n}\n.select-field .select__control--is-focused {\n  border-color: grey !important;\n  box-shadow: none !important;\n}\n.select-field .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.select-field .has-error {\n  color: #F24726 !important;\n}\n.select-field .has-error .select__control {\n  border: 1px #F24726 solid !important;\n}\n.select-field .has-error .select__control--is-focused {\n  border-color: #F24726 !important;\n  box-shadow: 0 0 0 1px #F24726;\n}";
+var css_248z$f = ".select-field .MuiFormLabel-root {\n  color: #666666 !important;\n  font-size: 1rem !important;\n  transform: translate(0, 0.5px) scale(0.85);\n  transform-origin: top left;\n  text-overflow: initial !important;\n}\n.select-field .select {\n  font-size: 1rem;\n}\n.select-field .select__menu {\n  z-index: 3 !important;\n  background-color: white;\n}\n.select-field .select__control {\n  cursor: pointer;\n  border: 1px solid grey;\n  border-radius: 3px !important;\n  padding: 0.12rem 0.2rem;\n  font-size: 14px;\n  color: grey !important;\n  background-color: transparent;\n}\n.select-field .select__option {\n  cursor: pointer;\n  color: #666666 !important;\n  background-color: white !important;\n}\n.select-field .select__option--is-focused {\n  background-color: rgba(0, 0, 0, 0.04) !important;\n  color: #666666 !important;\n}\n.select-field .select__option--is-selected {\n  color: white !important;\n}\n.select-field .select__indicator {\n  color: grey !important;\n}\n.select-field .select__indicator:hover {\n  color: black !important;\n}\n.select-field .select__placeholder {\n  text-overflow: ellipsis !important;\n  color: #666666 !important;\n  opacity: 1;\n}\n.select-field .select__single-value {\n  color: #666666 !important;\n}\n.select-field .select__multi-value__label {\n  color: #666666 !important;\n  font-size: 14px;\n}\n.select-field .select__control--is-focused {\n  border-color: grey !important;\n  box-shadow: none !important;\n}\n.select-field .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.select-field .has-error {\n  color: #F24726 !important;\n}\n.select-field .has-error .select__control {\n  border: 1px #F24726 solid !important;\n}\n.select-field .has-error .select__control--is-focused {\n  border-color: #F24726 !important;\n  box-shadow: 0 0 0 1px #F24726;\n}";
 styleInject(css_248z$f);
 
 var SelectField = function SelectField(props) {
@@ -3147,7 +3155,7 @@ var TabsComponent = function TabsComponent(props) {
   }))));
 };
 
-var css_248z$h = ".data-picker-component .MuiFormLabel-root {\n  color: #666666 !important;\n  font-size: 1rem !important;\n  transform: translate(0, 0.5px) scale(0.85);\n  transform-origin: top left;\n  text-overflow: initial !important;\n}\n.data-picker-component .MuiFormLabel-root + .MuiInputBase-formControl {\n  margin-top: 25px !important;\n}\n.data-picker-component .MuiInputBase-root.no-border {\n  border: none !important;\n  padding: 0 !important;\n  width: fit-content !important;\n}\n.data-picker-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  font-size: 14px !important;\n}\n.data-picker-component .MuiInputBase-root.Mui-error {\n  border: 1px solid #F24726 !important;\n}\n.data-picker-component .MuiInputBase-root:not(.Mui-disabled):hover {\n  border: 1px solid grey;\n}\n.data-picker-component .MuiInputBase-root.Mui-focused {\n  border: 1px solid #3299C7;\n}\n.data-picker-component .MuiInputBase-root .MuiInputBase-input {\n  color: #666666 !important;\n  background-color: white !important;\n}\n.data-picker-component .MuiInputBase-root .MuiInputBase-input::placeholder {\n  text-overflow: ellipsis !important;\n  color: #666666 !important;\n  opacity: 1;\n}\n.data-picker-component .MuiInputBase-root .Mui-disabled {\n  -webkit-text-fill-color: #666666 !important;\n}\n.data-picker-component .MuiFormHelperText-root {\n  padding: 0 !important;\n  font-size: 0.85rem !important;\n  color: #666666;\n}";
+var css_248z$h = ".data-picker-component .MuiFormLabel-root {\n  color: #666666 !important;\n  font-size: 1rem !important;\n  transform: translate(0, 0.5px) scale(0.85);\n  transform-origin: top left;\n  text-overflow: initial !important;\n}\n.data-picker-component .MuiFormLabel-root + .MuiInputBase-formControl {\n  margin-top: 25px !important;\n}\n.data-picker-component .MuiInputBase-root.no-border {\n  border: none !important;\n  padding: 0 !important;\n  width: fit-content !important;\n}\n.data-picker-component .MuiInputBase-root {\n  color: #666666 !important;\n  border: 1px solid grey;\n  padding: 0.33rem 0.87rem;\n  background-color: white !important;\n  border-radius: 3px !important;\n  font-size: 14px !important;\n}\n.data-picker-component .MuiInputBase-root.Mui-error {\n  border: 1px solid #F24726 !important;\n}\n.data-picker-component .MuiInputBase-root:not(.Mui-disabled):hover {\n  border: 1px solid grey;\n}\n.data-picker-component .MuiInputBase-root.Mui-focused {\n  border: 1px solid #3299C7;\n}\n.data-picker-component .MuiInputBase-root .MuiInputBase-input {\n  color: #666666 !important;\n  background-color: white !important;\n}\n.data-picker-component .MuiInputBase-root .MuiInputBase-input::placeholder {\n  text-overflow: ellipsis !important;\n  color: #666666 !important;\n  opacity: 1;\n}\n.data-picker-component .MuiInputBase-root .Mui-disabled {\n  -webkit-text-fill-color: #666666 !important;\n}\n.data-picker-component .MuiFormHelperText-root {\n  padding: 0 !important;\n  font-size: 0.85rem !important;\n  color: #666666;\n}";
 styleInject(css_248z$h);
 
 var DatePickerComponent = function DatePickerComponent(props) {