techsbcn-storybook 0.5.0 → 0.6.0

package/dist/components/layouts/DrawerLayout/DrawerSidebar/DrawerSidebar.d.ts

@@ -3,6 +3,8 @@ import './DrawerSidebar.scss';
 interface DrawerSidebarProps {
     onHide?: () => void;
     open?: boolean;
+    headerComponents?: React.ReactNode;
+    footerComponents?: React.ReactNode;
 }
 export declare const DrawerSidebar: React.FC<DrawerSidebarProps>;
 export {};

package/dist/components/layouts/Standard/AppSidebar/AppSidebar.d.ts

@@ -3,6 +3,8 @@ import './AppSidebar.scss';
 interface AppSidebarProps {
     onHide?: () => void;
     open?: boolean;
+    headerComponents?: React.ReactNode;
+    footerComponents?: React.ReactNode;
 }
 export declare const AppSidebar: React.FC<AppSidebarProps>;
 export {};

package/dist/components/tables/{SearchComponent.d.ts → SearchComponent/SearchComponent.d.ts}

@@ -1,5 +1,6 @@
 import React from 'react';
-interface SearchComponentProps {
+import './SearchComponent.scss';
+export interface SearchComponentProps {
     className?: string;
     title?: string;
     searchBar?: React.ReactNode;
@@ -17,5 +18,5 @@ interface DoubleFilter {
     secondFilter: any;
 }
 declare const DoubleFilter: (filters: DoubleFilter) => JSX.Element;
-declare const SearchComponent: React.FC<SearchComponentProps>;
-export default SearchComponent;
+export declare const SearchComponent: React.FC<SearchComponentProps>;
+export {};

package/dist/components/wrappers/MainWrapperComponent/MainWrapperComponent.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { SearchComponentProps } from '../../tables/SearchComponent/SearchComponent';
+import './MainWrapperComponent.scss';
+interface MainWrapperComponentProps {
+    loading?: boolean;
+    headerProps: SearchComponentProps;
+    divider?: boolean;
+}
+export declare const MainWrapperComponent: React.FC<MainWrapperComponentProps>;
+export {};

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 export * from './components/wrappers/PublicFormWrapper/PublicFormWrapper';
+export * from './components/wrappers/MainWrapperComponent/MainWrapperComponent';
+export * from './components/tables/SearchComponent/SearchComponent';
 export * from './components/layouts/MainLayoutSimple/MainLayoutSimple';
 export * from './components/navigation/VerticalNav/VerticalNav';
 export * from './components/layouts/Standard/AppSidebar/AppSidebar';

package/dist/stories/MainWrapper/MainWrapper.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta, Story } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+export declare const Default: Story<import("@storybook/react").Args>;

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

@@ -8,8 +8,8 @@ var React = require('react');
 var React__default = _interopDefault(React);
 var material = require('@mui/material');
 var _ = require('@mui/material/');
-var reactRouterDom = require('react-router-dom');
 var iconsMaterial = require('@mui/icons-material');
+var reactRouterDom = require('react-router-dom');
 var MenuIcon = _interopDefault(require('@mui/icons-material/Menu'));
 var yup = require('yup');
 var reactHookForm = require('react-hook-form');
@@ -60,9 +60,198 @@ var PublicFormWrapper = function PublicFormWrapper(props) {
   }, props.children)));
 };
 
-var css_248z$1 = ".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}";
+var css_248z$1 = ".search-component .title {\n  color: #000;\n  font-size: calc(21px + (23 - 21) * calc(100vw - 300px)/1300) !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 .btn-action {\n  cursor: pointer;\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 !important;\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 !important;\n}";
 styleInject(css_248z$1);
 
+var ActionsList = function ActionsList(actions) {
+  return React__default.createElement(material.Box, {
+    ml: "auto",
+    justifyContent: "start",
+    display: "flex",
+    alignItems: "center",
+    flexDirection: "row"
+  }, actions && actions.map(function (action, i) {
+    return React__default.createElement(material.Box, {
+      ml: 2,
+      key: i,
+      className: "btn-action main-color"
+    }, action.children);
+  }));
+};
+
+var DoubleFilter = function DoubleFilter(filters) {
+  return React__default.createElement(material.Grid, {
+    container: true,
+    alignItems: "center",
+    spacing: 1
+  }, filters.label && React__default.createElement(material.Grid, {
+    item: true,
+    xs: 12,
+    md: 3
+  }, React__default.createElement(material.Box, null, filters.label)), React__default.createElement(material.Grid, {
+    item: true,
+    xs: 12,
+    md: filters.label ? 9 : 12
+  }, React__default.createElement(material.Grid, {
+    container: true,
+    spacing: 1
+  }, React__default.createElement(material.Grid, {
+    item: true,
+    xs: 6
+  }, filters.firstFilter), React__default.createElement(material.Grid, {
+    item: true,
+    xs: 6
+  }, filters.secondFilter))));
+};
+
+var SearchComponent = function SearchComponent(props) {
+  var _useState = React.useState(false),
+      isOpen = _useState[0],
+      setIsOpen = _useState[1];
+
+  var _useState2 = React.useState(null),
+      anchorEl = _useState2[0],
+      setAnchorEl = _useState2[1];
+
+  var open = Boolean(anchorEl);
+
+  var handleClick = function handleClick(event) {
+    setAnchorEl(event.currentTarget);
+  };
+
+  var handleClose = function handleClose() {
+    setAnchorEl(null);
+  };
+
+  var randId = Math.random().toString(36).substring(7);
+  return React__default.createElement(material.Box, {
+    className: "search-component " + props.className
+  }, React__default.createElement(material.Grid, {
+    container: true,
+    spacing: 2,
+    alignItems: "center"
+  }, React__default.createElement(material.Grid, {
+    item: true,
+    xs: 4
+  }, React__default.createElement(material.Box, {
+    pl: 1,
+    className: "title main-background-color-after"
+  }, props.title)), props.actions && React__default.createElement(material.Grid, {
+    item: true,
+    xs: 8,
+    sx: {
+      display: {
+        xs: 'block',
+        md: 'none'
+      }
+    }
+  }, React__default.createElement(material.Box, {
+    sx: {
+      display: {
+        xs: 'none',
+        sm: 'flex'
+      }
+    }
+  }, ActionsList(props.actions)), React__default.createElement(material.Box, {
+    sx: {
+      display: {
+        xs: 'flex',
+        sm: 'none'
+      }
+    }
+  }, props.actions.length > 1 ? React__default.createElement(material.Box, {
+    ml: "auto"
+  }, React__default.createElement(material.IconButton, {
+    "aria-label": "more",
+    id: "long-button-" + randId,
+    "aria-controls": "long-button-" + randId,
+    "aria-expanded": open ? 'true' : undefined,
+    "aria-haspopup": "true",
+    onClick: handleClick
+  }, React__default.createElement(iconsMaterial.MoreVert, null)), React__default.createElement(material.Menu, {
+    id: "long-button-" + randId,
+    MenuListProps: {
+      'aria-labelledby': "long-button-" + randId
+    },
+    anchorEl: anchorEl,
+    open: open,
+    onClose: handleClose,
+    className: "search-menu-actions"
+  }, props.actions.map(function (action, i) {
+    return React__default.createElement(material.MenuItem, {
+      key: i,
+      className: "wrapper-actions"
+    }, React__default.createElement(material.Box, {
+      className: "btn-action main-color"
+    }, action.children));
+  }))) : React__default.createElement(material.Box, {
+    ml: "auto",
+    className: "wrapper-actions"
+  }, ActionsList(props.actions)))), React__default.createElement(material.Grid, {
+    item: true,
+    xs: 12,
+    md: props.actions ? 8 : 7
+  }, React__default.createElement(material.Box, {
+    display: "flex",
+    alignItems: "center"
+  }, React__default.createElement(material.Box, {
+    ml: "auto",
+    display: "flex",
+    width: "100%"
+  }, props.searchBar, props.filters && React__default.createElement(material.Box, {
+    onClick: function onClick() {
+      return setIsOpen(!isOpen);
+    },
+    className: "tune-btn main-background-color"
+  }, React__default.createElement(iconsMaterial.Tune, null))), props.actions && React__default.createElement(material.Box, {
+    sx: {
+      display: {
+        xs: 'none',
+        md: 'block'
+      }
+    },
+    className: "wrapper-actions"
+  }, ActionsList(props.actions))))), React__default.createElement(material.Collapse, {
+    "in": isOpen
+  }, React__default.createElement(material.Box, {
+    className: "filters",
+    my: 2
+  }, React__default.createElement(material.Grid, {
+    container: true,
+    spacing: 3
+  }, props.filters && props.filters.map(function (filter, i) {
+    return React__default.createElement(material.Grid, {
+      item: true,
+      key: i,
+      xs: 12,
+      sm: 6,
+      xl: 4
+    }, filter.doubleFilter ? DoubleFilter(filter.doubleFilter) : filter.singleFilter);
+  })))));
+};
+
+var css_248z$2 = ".main-wrapper-component {\n  background-color: white;\n  box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08);\n}\n.main-wrapper-component .title {\n  color: #000;\n  font-size: calc(21px + (23 - 21) * calc(100vw - 300px)/1300) !important;\n  font-weight: 400;\n  position: relative;\n}\n.main-wrapper-component .title:after {\n  content: \"\";\n  position: absolute;\n  left: -17px;\n  top: 0;\n  width: 4px;\n  height: 30px;\n}\n.main-wrapper-component .wrapper-actions .btn-action {\n  cursor: pointer;\n}\n.main-wrapper-component .wrapper-actions .btn-action .MuiButton-root {\n  width: max-content;\n}\n.main-wrapper-component .wrapper-actions .btn-action svg {\n  font-size: 40px !important;\n}";
+styleInject(css_248z$2);
+
+var MainWrapperComponent = function MainWrapperComponent(props) {
+  return React__default.createElement(_.Box, {
+    className: "main-wrapper-component",
+    py: 2
+  }, React__default.createElement(_.Box, {
+    mb: 1,
+    px: 2
+  }, React__default.createElement(SearchComponent, Object.assign({}, props.headerProps))), props.divider && React__default.createElement(_.Divider, null), props.children && !props.loading ? React__default.createElement(_.Box, {
+    px: 2
+  }, props.children) : props.loading ? React__default.createElement(_.Box, {
+    display: "flex",
+    alignItems: "center",
+    px: 2
+  }, React__default.createElement(_.CircularProgress, null)) : React__default.createElement(React__default.Fragment, null));
+};
+
+var css_248z$3 = ".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$3);
+
 var MainLayoutSimple = function MainLayoutSimple(props) {
   return React__default.createElement(_.Box, {
     display: "flex",
@@ -105,12 +294,14 @@ var VerticalNavItem = function VerticalNavItem(props) {
 
   return React__default.createElement(reactRouterDom.NavLink, {
     to: props.item.route || '',
-    className: "nav-link-item",
+    className: "nav-link-item " + (reactRouterDom.matchPath({
+      path: props.item.route + "/*" || ''
+    }, pathname) ? 'active' : ''),
     onClick: props.onHide
   }, React__default.createElement(material.Box, {
     p: 2,
     className: "nav-item " + (reactRouterDom.matchPath({
-      path: props.item.route || ''
+      path: props.item.route + "/*" || ''
     }, pathname) ? 'main-background-color' : '')
   }, React__default.createElement(material.Box, {
     className: "nav-item-text"
@@ -213,8 +404,8 @@ var VerticalNavItemCollapse = function VerticalNavItemCollapse(props) {
 
 var VerticalNavItemCollapse$1 = /*#__PURE__*/React__default.memo(VerticalNavItemCollapse);
 
-var css_248z$2 = ".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: #04a9f5;\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$2);
+var css_248z$4 = ".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: #04a9f5;\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$4);
 
 (function (NavigationType) {
   NavigationType[NavigationType["Item"] = 0] = "Item";
@@ -244,8 +435,8 @@ var VerticalNav = function VerticalNav(props) {
   }));
 };
 
-var css_248z$3 = ".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$3);
+var css_248z$5 = ".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$5);
 
 var AppSidebar = function AppSidebar(props) {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.Drawer, {
@@ -262,7 +453,19 @@ var AppSidebar = function AppSidebar(props) {
   }, React__default.createElement(material.Box, {
     height: "100%",
     className: "app-sidebar"
-  }, props.children)), React__default.createElement(material.Box, {
+  }, React__default.createElement(material.Box, {
+    display: "flex",
+    flexDirection: "column",
+    height: "100vh"
+  }, props.headerComponents && React__default.createElement(material.Box, {
+    p: 2,
+    flexShrink: 0
+  }, props.headerComponents), React__default.createElement(material.Box, {
+    overflow: "auto"
+  }, props.children), props.footerComponents && React__default.createElement(material.Box, {
+    mt: "auto",
+    flexShrink: 0
+  }, props.footerComponents)))), React__default.createElement(material.Box, {
     sx: {
       display: {
         xs: 'none',
@@ -275,11 +478,23 @@ var AppSidebar = function AppSidebar(props) {
   }, React__default.createElement(material.Box, {
     position: "sticky",
     top: "0"
-  }, props.children))));
+  }, React__default.createElement(material.Box, {
+    display: "flex",
+    flexDirection: "column",
+    height: "100vh"
+  }, props.headerComponents && React__default.createElement(material.Box, {
+    p: 2,
+    flexShrink: 0
+  }, props.headerComponents), React__default.createElement(material.Box, {
+    overflow: "auto"
+  }, props.children), props.footerComponents && React__default.createElement(material.Box, {
+    mt: "auto",
+    flexShrink: 0
+  }, props.footerComponents))))));
 };
 
-var css_248z$4 = ".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$4);
+var css_248z$6 = ".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$6);
 
 var DrawerSidebar = function DrawerSidebar(props) {
   return React__default.createElement(material.Drawer, {
@@ -290,16 +505,28 @@ var DrawerSidebar = function DrawerSidebar(props) {
   }, React__default.createElement(material.Box, {
     height: "100%",
     className: "drawer-sidebar"
-  }, props.children));
+  }, React__default.createElement(material.Box, {
+    display: "flex",
+    flexDirection: "column",
+    height: "100vh"
+  }, props.headerComponents && React__default.createElement(material.Box, {
+    p: 2,
+    flexShrink: 0
+  }, props.headerComponents), React__default.createElement(material.Box, {
+    overflow: "auto"
+  }, props.children), props.footerComponents && React__default.createElement(material.Box, {
+    mt: "auto",
+    flexShrink: 0
+  }, props.footerComponents))));
 };
 
-var css_248z$5 = ".app-bar {\n  background-color: white !important;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.12);\n  color: black !important;\n}";
-styleInject(css_248z$5);
+var css_248z$7 = ".app-bar {\n  background-color: white !important;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.12);\n  color: black !important;\n}";
+styleInject(css_248z$7);
 
 var AppHeader = function AppHeader(props) {
   return React__default.createElement(material.AppBar, {
     position: "sticky",
-    className: "app-bar main-backgound-body"
+    className: "app-bar main-background-body"
   }, React__default.createElement(material.Toolbar, {
     className: "app-toolbar"
   }, React__default.createElement(material.IconButton, {
@@ -316,8 +543,8 @@ var AppHeader = function AppHeader(props) {
   }, React__default.createElement(MenuIcon, null)), props.children));
 };
 
-var css_248z$6 = ".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}\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}";
-styleInject(css_248z$6);
+var css_248z$8 = ".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}\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}";
+styleInject(css_248z$8);
 
 var ButtonComponent = function ButtonComponent(props) {
   return React__default.createElement(_.Button, {
@@ -334,8 +561,8 @@ var ButtonComponent = function ButtonComponent(props) {
   }) : props.label);
 };
 
-var css_248z$7 = ".text-field-component .MuiFormLabel-root + .MuiInputBase-formControl {\n  margin-top: 22px !important;\n}\n.text-field-component .MuiInputBase-root {\n  color: grey !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 grey;\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}";
-styleInject(css_248z$7);
+var css_248z$9 = ".text-field-component .MuiFormLabel-root + .MuiInputBase-formControl {\n  margin-top: 22px !important;\n}\n.text-field-component .MuiInputBase-root {\n  color: grey !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 grey;\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}";
+styleInject(css_248z$9);
 
 var TextFieldComponent = function TextFieldComponent(props) {
   return React__default.createElement(_.Box, {
@@ -706,9 +933,11 @@ exports.ChangePasswordForm = ChangePasswordForm;
 exports.DrawerSidebar = DrawerSidebar;
 exports.LoginForm = LoginForm;
 exports.MainLayoutSimple = MainLayoutSimple;
+exports.MainWrapperComponent = MainWrapperComponent;
 exports.ModalComponent = ModalComponent;
 exports.PublicFormWrapper = PublicFormWrapper;
 exports.ResetPasswordForm = ResetPasswordForm;
+exports.SearchComponent = SearchComponent;
 exports.TextFieldComponent = TextFieldComponent;
 exports.VerticalNav = VerticalNav;
 //# sourceMappingURL=techsbcn-storybook.cjs.development.js.map