@xelto.npm/xc2-lib 0.1.13 → 0.1.15

package/dist/index.cjs.js

@@ -36512,8 +36512,12 @@ var StyledIconWrapper$1 = styled$1(Box$1, {
       }
     },
     'svg': {
-      width: '26px',
-      height: '26px',
+      width: '18px',
+      height: '18px',
+      '@media(min-width: 480px)': {
+        width: '26px',
+        height: '26px'
+      },
       '@media(min-width: 720px)': {
         width: '45px',
         height: '45px'
@@ -36683,20 +36687,20 @@ var StyledAutocomplete$1 = styled$1(Autocomplete$1)(function (_ref) {
       transform: 'translate(20px,15px) scale(1)',
       '&.Mui-focused, &[data-shrink="true"]': {
         color: theme.mainPallete.primary.blue,
-        transform: 'translate(15px,-10px) scale(0.75)'
+        transform: 'translate(15px, -7px) scale(0.75)'
       },
       '&.Mui-disabled': {
         color: theme.mainPallete.primary.placeholderText
       }
     },
     '& label, .MuiOutlinedInput-root': {
-      fontSize: 21,
+      fontSize: 13,
       fontWeight: theme.fontWeight.regular,
       fontFamily: theme.fontFamily
     },
     '.MuiOutlinedInput-root': {
       color: theme.mainPallete.primary.blue,
-      padding: '7.5px 75px 7.5px 20px !important',
+      padding: '7.5px 75px 7.5px 9px !important',
       borderRadius: 7,
       '&.Mui-focused': {
         '.MuiOutlinedInput-notchedOutline': {
@@ -36715,7 +36719,7 @@ var StyledAutocomplete$1 = styled$1(Autocomplete$1)(function (_ref) {
       }
     },
     'div.MuiAutocomplete-endAdornment': {
-      top: 'calc(50% - 17px)',
+      top: 'calc(50% - 11px)',
       right: '20px !important',
       'button': {
         padding: 0,
@@ -36729,8 +36733,32 @@ var StyledAutocomplete$1 = styled$1(Autocomplete$1)(function (_ref) {
         color: theme.mainPallete.primary.blue
       },
       'svg': {
-        width: 26,
-        height: 26
+        width: 18,
+        height: 18
+      }
+    },
+    '@media(min-width: 480px)': {
+      '& label': {
+        transform: 'translate(20px,15px) scale(1)',
+        '&.Mui-focused, &[data-shrink="true"]': {
+          transform: 'translate(15px,-10px) scale(0.75)'
+        }
+      },
+      '& label, .MuiOutlinedInput-root': {
+        fontSize: 21
+      },
+      '.MuiOutlinedInput-root': {
+        padding: '7.5px 75px 7.5px 15px !important'
+      },
+      'div.MuiAutocomplete-endAdornment': {
+        top: 'calc(50% - 17px)',
+        '.MuiAutocomplete-clearIndicator': {
+          marginRight: '4px !important'
+        },
+        'svg': {
+          width: 26,
+          height: 26
+        }
       }
     },
     '@media(min-width: 720px)': {
@@ -36744,7 +36772,7 @@ var StyledAutocomplete$1 = styled$1(Autocomplete$1)(function (_ref) {
         fontSize: 26
       },
       '.MuiOutlinedInput-root': {
-        padding: '11.5px 75px 11.5px 20px !important'
+        padding: '11.5px 75px 11.5px 15px !important'
       },
       'div.MuiAutocomplete-endAdornment': {
         top: 'calc(50% - 22px)',
@@ -36808,13 +36836,20 @@ var StyledPaper$1 = styled$1(Paper$2)(function (_ref3) {
     borderRadius: '7px !important',
     translate: '0 -1.5px',
     '.MuiAutocomplete-listbox': {
-      fontSize: 21,
-      margin: '16px 8px !important',
+      fontSize: 13,
+      margin: '8px 8px !important',
       fontWeight: theme.fontWeight.regular,
       fontFamily: theme.fontFamily,
       color: theme.mainPallete.primary.blue,
       padding: '0 !important',
+      li: {
+        minHeight: 'auto !important'
+      },
       '&::-webkit-scrollbar': _objectSpread2({}, theme.scrollbar),
+      '@media(min-width: 480px)': {
+        fontSize: 21,
+        margin: '16px 8px !important'
+      },
       '@media(min-width: 720px)': {
         fontSize: 26
       },
@@ -36941,20 +36976,20 @@ var StyledAutocomplete = styled$1(Autocomplete$1, {
       transform: 'translate(20px,15px) scale(1)',
       '&.Mui-focused, &[data-shrink="true"]': {
         color: theme.mainPallete.primary.blue,
-        transform: 'translate(15px,-10px) scale(0.75)'
+        transform: 'translate(15px,-7px) scale(0.75)'
       },
       '&.Mui-disabled': {
         color: theme.mainPallete.primary.placeholderText
       }
     },
     '& label, .MuiOutlinedInput-root': {
-      fontSize: 21,
+      fontSize: 13,
       fontWeight: theme.fontWeight.regular,
       fontFamily: theme.fontFamily
     },
     '.MuiOutlinedInput-root': {
       color: theme.mainPallete.primary.blue,
-      padding: '7.5px 0 7.5px 20px ',
+      padding: '7.5px 0 7.5px 9px ',
       borderRadius: 7,
       '&.Mui-focused': {
         '.MuiOutlinedInput-notchedOutline': {
@@ -36969,7 +37004,7 @@ var StyledAutocomplete = styled$1(Autocomplete$1, {
       }
     },
     'div.MuiAutocomplete-endAdornment': {
-      top: 'calc(50% - 17px)',
+      top: 'calc(50% - 11px)',
       right: '20px !important',
       'button': {
         padding: 0,
@@ -36979,13 +37014,16 @@ var StyledAutocomplete = styled$1(Autocomplete$1, {
         }
       },
       'svg': {
-        width: 26,
-        height: 26
+        width: 18,
+        height: 18
       }
     },
     '.MuiChip-root': {
       backgroundColor: '#E7EAF3',
       color: theme.mainPallete.primary.blue,
+      fontSize: 11,
+      height: 28,
+      borderRadius: 16,
       'svg': {
         '&:hover': {
           'path': {
@@ -37004,6 +37042,32 @@ var StyledAutocomplete = styled$1(Autocomplete$1, {
         maxWidth: '70%'
       }
     },
+    '@media(min-width: 480px)': {
+      '& label': {
+        transform: 'translate(20px,17px) scale(1)',
+        '&.Mui-focused, &[data-shrink="true"]': {
+          transform: 'translate(14px,-10px) scale(0.75)'
+        }
+      },
+      '& label, .MuiOutlinedInput-root': {
+        fontSize: 21
+      },
+      '.MuiOutlinedInput-root': {
+        padding: '11.5px 0 11.5px 20px'
+      },
+      'div.MuiAutocomplete-endAdornment': {
+        top: 'calc(50% - 17px)',
+        'svg': {
+          width: 30,
+          height: 30
+        }
+      },
+      '.MuiChip-root': {
+        fontSize: 14,
+        height: 30,
+        borderRadius: 16
+      }
+    },
     '@media(min-width: 720px)': {
       '& label': {
         transform: 'translate(20px,17px) scale(1)',
@@ -37061,13 +37125,17 @@ var StyledAutocomplete = styled$1(Autocomplete$1, {
 var StyledCheckbox$1 = styled$1(Checkbox$2)(function () {
   return {
     'div': {
-      width: 16,
-      height: 16
+      width: 15,
+      height: 15
     },
-    '@media (min-width: 720px) and (max-width: 1019px)': {
-      'svg': {
-        width: 21,
-        height: 21
+    'svg': {
+      width: 'inherit !important',
+      height: 'inherit !important'
+    },
+    '@media(min-width: 720px) and (max-width: 1023px) ': {
+      'div': {
+        width: 18,
+        height: 18
       }
     }
   };
@@ -37078,13 +37146,22 @@ var StyledPaper = styled$1(Paper$2)(function () {
     borderRadius: '7px !important',
     translate: '0 -1.5px',
     '.MuiAutocomplete-listbox': {
-      fontSize: 21,
+      fontSize: 13,
       margin: '16px 8px !important',
       fontWeight: theme.fontWeight.regular,
       fontFamily: theme.fontFamily,
       color: theme.mainPallete.primary.blue,
       padding: '0 !important',
+      li: {
+        minHeight: '30px !important',
+        '.MuiCheckbox-root': {
+          padding: 0
+        }
+      },
       '&::-webkit-scrollbar': _objectSpread2({}, theme.scrollbar),
+      '@media(min-width: 480px)': {
+        fontSize: 21
+      },
       '@media(min-width: 720px)': {
         fontSize: 24
       },
@@ -53333,14 +53410,14 @@ var StyledDatePicker = styled$1(DatePicker$1, {
       transform: 'translate(20px,15px) scale(1)',
       '&.Mui-focused, &[data-shrink="true"]': {
         color: theme.mainPallete.primary.blue,
-        transform: 'translate(15px,-10px) scale(0.75)'
+        transform: 'translate(15px,-7px) scale(0.75)'
       },
       '&.Mui-disabled': {
         color: theme.mainPallete.primary.placeholderText
       }
     },
     '& label, .MuiOutlinedInput-root': {
-      fontSize: 21,
+      fontSize: 13,
       fontWeight: theme.fontWeight.regular,
       fontFamily: theme.fontFamily
     },
@@ -53363,6 +53440,23 @@ var StyledDatePicker = styled$1(DatePicker$1, {
         borderColor: theme.mainPallete.primary.placeholderText
       }
     },
+    '@media(min-width: 480px)': {
+      width: fluid ? '100%' : 'min(100%, 468px)',
+      '& label': {
+        transform: 'translate(20px,17px) scale(1)',
+        '&.Mui-focused, &.MuiFormLabel-filled': {
+          transform: 'translate(14px,-14px) scale(0.75)'
+        }
+      },
+      '& label, .MuiOutlinedInput-root': {
+        fontSize: 21
+      },
+      '.MuiOutlinedInput-root': {
+        input: {
+          padding: '19px 0 19px 20px'
+        }
+      }
+    },
     '@media(min-width: 720px)': {
       width: fluid ? '100%' : 'min(100%, 468px)',
       '& label': {
@@ -53407,6 +53501,15 @@ var pickerStyles = function pickerStyles() {
       translate: '0 -1px',
       border: "2px solid ".concat(theme.mainPallete.primary.blue)
     },
+    '.MuiPickersToolbar-root': {
+      padding: '8px 24px'
+    },
+    '.MuiPickersDay-root, .MuiDayPicker-weekDayLabel': {
+      width: 32
+    },
+    '.PrivatePickersSlideTransition-root': {
+      minHeight: 240
+    },
     '.MuiBackdrop-root': {
       backgroundColor: theme.mainPallete.primary.blue,
       opacity: '0.6 !important'
@@ -53425,7 +53528,7 @@ var pickerStyles = function pickerStyles() {
       }
     },
     '.MuiPickersCalendarHeader-labelContainer ': {
-      fontSize: 16,
+      fontSize: 13,
       color: theme.mainPallete.primary.placeholderText
     },
     '.MuiDialogContent-root': {
@@ -53446,10 +53549,10 @@ var pickerStyles = function pickerStyles() {
       '&::-webkit-scrollbar': _objectSpread2({}, theme.scrollbar)
     },
     '.MuiTypography-root, .MuiPickersDay-root': {
-      fontSize: 14,
+      fontSize: 13,
       color: theme.mainPallete.primary.blue,
       '&.MuiTypography-h4': {
-        fontSize: 32
+        fontSize: 26
       },
       '&.Mui-selected': {
         backgroundColor: theme.mainPallete.primary.blue + '!important',
@@ -53479,7 +53582,8 @@ var pickerStyles = function pickerStyles() {
     },
     '@media (max-width: 1019px)': {
       '&.MuiPaper-root, .MuiPaper-root': {
-        maxWidth: 316
+        maxWidth: 316,
+        minWidth: 300
       },
       '.MuiPickersCalendarHeader-root': {
         paddingLeft: '12px',
@@ -53625,7 +53729,7 @@ var StyledTextField = styled$1(MuiTextField, {
       transform: small ? 'translate(20px,7px) scale(1)' : 'translate(20px,15px) scale(1)',
       '&.Mui-focused, &.MuiFormLabel-filled': {
         color: theme.mainPallete.primary.blue,
-        transform: 'translate(15px,-10px) scale(0.75)'
+        transform: 'translate(15px,-7px) scale(0.75)'
       },
       '&.Mui-error': {
         color: theme.mainPallete.primary.blue
@@ -53642,6 +53746,9 @@ var StyledTextField = styled$1(MuiTextField, {
     },
     'div.MuiInputAdornment-root': {
       // zIndex: 10,
+      p: {
+        paddingRight: 0
+      },
       svg: {
         pointerEvents: 'none'
       }
@@ -73707,7 +73814,10 @@ var StyledLogoWrapper = styled$1(Box$1, {
   _objectDestructuringEmpty(_ref);
   return {
     'svg': {
-      width: '103px',
+      width: '80px',
+      '@media (min-width:480px)': {
+        width: '103px'
+      },
       '@media (min-width:720px)': {
         width: '154px'
       },
@@ -73839,17 +73949,20 @@ function uuid() {
 
 var uuid_1 = uuid;
 
-var _excluded$5 = ["buttons"];
+var _excluded$5 = ["buttons", "children"];
 var StyledBottomBarWrapper = styled$1(Box$1)(function (_ref) {
   _objectDestructuringEmpty(_ref);
   return {
     boxSizing: 'border-box',
     width: '100%',
-    height: '53px',
+    // height: '53px',
+    minHeight: '53px',
     backgroundColor: theme.mainPallete.primary.white,
     boxShadow: '0 -3px 6px rgba(0,0,0,0.1)',
     display: 'flex',
-    justifyContent: 'space-between',
+    flexDirection: 'column-reverse',
+    // justifyContent: 'space-between',
+    justifyContent: 'center',
     alignItems: 'center',
     padding: '0 18px',
     position: 'fixed',
@@ -73857,7 +73970,8 @@ var StyledBottomBarWrapper = styled$1(Box$1)(function (_ref) {
     left: 0,
     zIndex: 5,
     '@media(min-width: 480px)': {
-      height: '80px'
+      // height: '80px',
+      minHeight: '80px'
     },
     'button': {
       marginLeft: 10,
@@ -73867,10 +73981,45 @@ var StyledBottomBarWrapper = styled$1(Box$1)(function (_ref) {
     }
   };
 });
-var BottomBarComponent = function BottomBarComponent(_ref2) {
-  var buttons = _ref2.buttons,
-    props = _objectWithoutProperties$1(_ref2, _excluded$5);
-  return /*#__PURE__*/React.createElement(StyledBottomBarWrapper, props, buttons.map(function (item) {
+var StyledLeftRightComponentsWrapper = styled$1(Box$1)(function (_ref2) {
+  var isAnyAdditionalComponent = _ref2.isAnyAdditionalComponent;
+  return {
+    boxSizing: 'border-box',
+    width: '100%',
+    display: isAnyAdditionalComponent ? 'flex' : 'none',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: '10px 0 0',
+    zIndex: 5,
+    color: '#293072',
+    fontSize: 13,
+    fontWeight: 500,
+    '@media(min-width: 480px)': {
+      fontSize: 16
+    },
+    'p': {
+      margin: 0
+    }
+  };
+});
+var StyledButtonsWrapper$1 = styled$1(Box$1)(function (_ref3) {
+  _objectDestructuringEmpty(_ref3);
+  return {
+    boxSizing: 'border-box',
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: '10px 0',
+    zIndex: 5
+  };
+});
+var BottomBarComponent = function BottomBarComponent(_ref4) {
+  var buttons = _ref4.buttons,
+    children = _ref4.children,
+    props = _objectWithoutProperties$1(_ref4, _excluded$5);
+  var isAnyAdditionalComponent = children !== null && children !== undefined;
+  return /*#__PURE__*/React.createElement(StyledBottomBarWrapper, props, /*#__PURE__*/React.createElement(StyledButtonsWrapper$1, null, buttons.map(function (item) {
     var disabled = (item === null || item === void 0 ? void 0 : item.disabled) || false;
     var fluid = (item === null || item === void 0 ? void 0 : item.fluid) || true;
     var onClick = (item === null || item === void 0 ? void 0 : item.onClick) || '';
@@ -73888,7 +74037,9 @@ var BottomBarComponent = function BottomBarComponent(_ref2) {
       color: color,
       size: size
     });
-  }));
+  })), /*#__PURE__*/React.createElement(StyledLeftRightComponentsWrapper, {
+    isAnyAdditionalComponent: isAnyAdditionalComponent
+  }, typeof children !== 'undefined' && typeof children !== "string" && children ? children : typeof children === 'string' ? /*#__PURE__*/React.createElement("p", null, children) : /*#__PURE__*/React.createElement(React.Fragment, null)));
 };
 BottomBarComponent.propTypes = {
   buttons: propTypesExports.arrayOf(propTypesExports.shape({
@@ -97632,7 +97783,9 @@ var StyledCustomTable = styled$1(Box$1)(function (_ref) {
             }
           },
           '&:hover': {
-            backgroundColor: 'rgba(22, 199, 165,0.11)'
+            '@media(min-width:1024px)': {
+              backgroundColor: 'rgba(22, 199, 165,0.11)'
+            }
           }
         }
       }
@@ -98467,7 +98620,10 @@ var StyledMenu = styled$1('div', {
         display: 'none'
       }
     },
-    '@media (max-width: 719px)': {
+    '@media (max-width: 479px)': {
+      paddingTop: 65
+    },
+    '@media (min-width: 480px) and (max-width: 719px)': {
       paddingTop: 90
     },
     '@media (min-width: 720px) and (max-width: 1019px)': {
@@ -98497,7 +98653,7 @@ var StyledMenu = styled$1('div', {
 });
 var StyledUserDataWrapper = styled$1('div')(function () {
   return {
-    padding: '0 30px',
+    padding: '0 30px 45px 30px',
     fontSize: 18,
     zIndex: 'inherit',
     lineHeight: '24px',
@@ -98505,7 +98661,13 @@ var StyledUserDataWrapper = styled$1('div')(function () {
       fontSize: 16,
       color: theme.mainPallete.primary.placeholderText
     },
-    paddingBottom: 45
+    '@media (max-width: 479px)': {
+      padding: '0 15px 45px 15px',
+      fontSize: 16,
+      'div:nth-of-type(2)': {
+        fontSize: 12
+      }
+    }
   };
 });
 var StyledMenuDataWrapper = styled$1('div')(function () {
@@ -98518,6 +98680,9 @@ var StyledMenuDataWrapper = styled$1('div')(function () {
     div: {
       position: 'relative'
     },
+    '@media (max-width: 479px)': {
+      fontSize: 24
+    },
     '@media (min-width: 1020px)': {
       fontSize: 14,
       rowGap: 10
@@ -98541,7 +98706,10 @@ var StyledMenuDataWrapper = styled$1('div')(function () {
         cursor: 'pointer',
         margin: '0 30px',
         display: 'flex',
-        justifyContent: 'space-between'
+        justifyContent: 'space-between',
+        '@media (max-width: 479px)': {
+          margin: '0 15pxv'
+        }
       }
     }
   };
@@ -98702,7 +98870,7 @@ var StyledTopbar = styled$1('div', {
     position: fixedTop === true ? 'fixed' : 'relative',
     display: 'flex',
     width: '100%',
-    minHeight: 60,
+    minHeight: 53,
     alignItems: 'center',
     fontFamily: theme.fontFamily,
     backgroundColor: variant === 'white' ? theme.mainPallete.primary.white : noBreadcrumb && noMenu ? theme.mainPallete.primary.blue : theme.mainPallete.primary.white,
@@ -98714,6 +98882,9 @@ var StyledTopbar = styled$1('div', {
       gridTemplateColumns: noBreadcrumb || menuOpen ? '1fr 1fr' : '1fr auto 1fr',
       backgroundColor: variant === 'white' ? theme.mainPallete.primary.white : theme.mainPallete.primary.blue
     },
+    '@media (min-width: 480px)': {
+      minHeight: 60
+    },
     '@media (min-width: 720px) and (max-width: 1019px)': {
       minHeight: 75
     },

package/dist/index.esm.js

@@ -36492,8 +36492,12 @@ var StyledIconWrapper$1 = styled$1(Box$1, {
       }
     },
     'svg': {
-      width: '26px',
-      height: '26px',
+      width: '18px',
+      height: '18px',
+      '@media(min-width: 480px)': {
+        width: '26px',
+        height: '26px'
+      },
       '@media(min-width: 720px)': {
         width: '45px',
         height: '45px'
@@ -36663,20 +36667,20 @@ var StyledAutocomplete$1 = styled$1(Autocomplete$1)(function (_ref) {
       transform: 'translate(20px,15px) scale(1)',
       '&.Mui-focused, &[data-shrink="true"]': {
         color: theme.mainPallete.primary.blue,
-        transform: 'translate(15px,-10px) scale(0.75)'
+        transform: 'translate(15px, -7px) scale(0.75)'
       },
       '&.Mui-disabled': {
         color: theme.mainPallete.primary.placeholderText
       }
     },
     '& label, .MuiOutlinedInput-root': {
-      fontSize: 21,
+      fontSize: 13,
       fontWeight: theme.fontWeight.regular,
       fontFamily: theme.fontFamily
     },
     '.MuiOutlinedInput-root': {
       color: theme.mainPallete.primary.blue,
-      padding: '7.5px 75px 7.5px 20px !important',
+      padding: '7.5px 75px 7.5px 9px !important',
       borderRadius: 7,
       '&.Mui-focused': {
         '.MuiOutlinedInput-notchedOutline': {
@@ -36695,7 +36699,7 @@ var StyledAutocomplete$1 = styled$1(Autocomplete$1)(function (_ref) {
       }
     },
     'div.MuiAutocomplete-endAdornment': {
-      top: 'calc(50% - 17px)',
+      top: 'calc(50% - 11px)',
       right: '20px !important',
       'button': {
         padding: 0,
@@ -36709,8 +36713,32 @@ var StyledAutocomplete$1 = styled$1(Autocomplete$1)(function (_ref) {
         color: theme.mainPallete.primary.blue
       },
       'svg': {
-        width: 26,
-        height: 26
+        width: 18,
+        height: 18
+      }
+    },
+    '@media(min-width: 480px)': {
+      '& label': {
+        transform: 'translate(20px,15px) scale(1)',
+        '&.Mui-focused, &[data-shrink="true"]': {
+          transform: 'translate(15px,-10px) scale(0.75)'
+        }
+      },
+      '& label, .MuiOutlinedInput-root': {
+        fontSize: 21
+      },
+      '.MuiOutlinedInput-root': {
+        padding: '7.5px 75px 7.5px 15px !important'
+      },
+      'div.MuiAutocomplete-endAdornment': {
+        top: 'calc(50% - 17px)',
+        '.MuiAutocomplete-clearIndicator': {
+          marginRight: '4px !important'
+        },
+        'svg': {
+          width: 26,
+          height: 26
+        }
       }
     },
     '@media(min-width: 720px)': {
@@ -36724,7 +36752,7 @@ var StyledAutocomplete$1 = styled$1(Autocomplete$1)(function (_ref) {
         fontSize: 26
       },
       '.MuiOutlinedInput-root': {
-        padding: '11.5px 75px 11.5px 20px !important'
+        padding: '11.5px 75px 11.5px 15px !important'
       },
       'div.MuiAutocomplete-endAdornment': {
         top: 'calc(50% - 22px)',
@@ -36788,13 +36816,20 @@ var StyledPaper$1 = styled$1(Paper$2)(function (_ref3) {
     borderRadius: '7px !important',
     translate: '0 -1.5px',
     '.MuiAutocomplete-listbox': {
-      fontSize: 21,
-      margin: '16px 8px !important',
+      fontSize: 13,
+      margin: '8px 8px !important',
       fontWeight: theme.fontWeight.regular,
       fontFamily: theme.fontFamily,
       color: theme.mainPallete.primary.blue,
       padding: '0 !important',
+      li: {
+        minHeight: 'auto !important'
+      },
       '&::-webkit-scrollbar': _objectSpread2({}, theme.scrollbar),
+      '@media(min-width: 480px)': {
+        fontSize: 21,
+        margin: '16px 8px !important'
+      },
       '@media(min-width: 720px)': {
         fontSize: 26
       },
@@ -36921,20 +36956,20 @@ var StyledAutocomplete = styled$1(Autocomplete$1, {
       transform: 'translate(20px,15px) scale(1)',
       '&.Mui-focused, &[data-shrink="true"]': {
         color: theme.mainPallete.primary.blue,
-        transform: 'translate(15px,-10px) scale(0.75)'
+        transform: 'translate(15px,-7px) scale(0.75)'
       },
       '&.Mui-disabled': {
         color: theme.mainPallete.primary.placeholderText
       }
     },
     '& label, .MuiOutlinedInput-root': {
-      fontSize: 21,
+      fontSize: 13,
       fontWeight: theme.fontWeight.regular,
       fontFamily: theme.fontFamily
     },
     '.MuiOutlinedInput-root': {
       color: theme.mainPallete.primary.blue,
-      padding: '7.5px 0 7.5px 20px ',
+      padding: '7.5px 0 7.5px 9px ',
       borderRadius: 7,
       '&.Mui-focused': {
         '.MuiOutlinedInput-notchedOutline': {
@@ -36949,7 +36984,7 @@ var StyledAutocomplete = styled$1(Autocomplete$1, {
       }
     },
     'div.MuiAutocomplete-endAdornment': {
-      top: 'calc(50% - 17px)',
+      top: 'calc(50% - 11px)',
       right: '20px !important',
       'button': {
         padding: 0,
@@ -36959,13 +36994,16 @@ var StyledAutocomplete = styled$1(Autocomplete$1, {
         }
       },
       'svg': {
-        width: 26,
-        height: 26
+        width: 18,
+        height: 18
       }
     },
     '.MuiChip-root': {
       backgroundColor: '#E7EAF3',
       color: theme.mainPallete.primary.blue,
+      fontSize: 11,
+      height: 28,
+      borderRadius: 16,
       'svg': {
         '&:hover': {
           'path': {
@@ -36984,6 +37022,32 @@ var StyledAutocomplete = styled$1(Autocomplete$1, {
         maxWidth: '70%'
       }
     },
+    '@media(min-width: 480px)': {
+      '& label': {
+        transform: 'translate(20px,17px) scale(1)',
+        '&.Mui-focused, &[data-shrink="true"]': {
+          transform: 'translate(14px,-10px) scale(0.75)'
+        }
+      },
+      '& label, .MuiOutlinedInput-root': {
+        fontSize: 21
+      },
+      '.MuiOutlinedInput-root': {
+        padding: '11.5px 0 11.5px 20px'
+      },
+      'div.MuiAutocomplete-endAdornment': {
+        top: 'calc(50% - 17px)',
+        'svg': {
+          width: 30,
+          height: 30
+        }
+      },
+      '.MuiChip-root': {
+        fontSize: 14,
+        height: 30,
+        borderRadius: 16
+      }
+    },
     '@media(min-width: 720px)': {
       '& label': {
         transform: 'translate(20px,17px) scale(1)',
@@ -37041,13 +37105,17 @@ var StyledAutocomplete = styled$1(Autocomplete$1, {
 var StyledCheckbox$1 = styled$1(Checkbox$2)(function () {
   return {
     'div': {
-      width: 16,
-      height: 16
+      width: 15,
+      height: 15
     },
-    '@media (min-width: 720px) and (max-width: 1019px)': {
-      'svg': {
-        width: 21,
-        height: 21
+    'svg': {
+      width: 'inherit !important',
+      height: 'inherit !important'
+    },
+    '@media(min-width: 720px) and (max-width: 1023px) ': {
+      'div': {
+        width: 18,
+        height: 18
       }
     }
   };
@@ -37058,13 +37126,22 @@ var StyledPaper = styled$1(Paper$2)(function () {
     borderRadius: '7px !important',
     translate: '0 -1.5px',
     '.MuiAutocomplete-listbox': {
-      fontSize: 21,
+      fontSize: 13,
       margin: '16px 8px !important',
       fontWeight: theme.fontWeight.regular,
       fontFamily: theme.fontFamily,
       color: theme.mainPallete.primary.blue,
       padding: '0 !important',
+      li: {
+        minHeight: '30px !important',
+        '.MuiCheckbox-root': {
+          padding: 0
+        }
+      },
       '&::-webkit-scrollbar': _objectSpread2({}, theme.scrollbar),
+      '@media(min-width: 480px)': {
+        fontSize: 21
+      },
       '@media(min-width: 720px)': {
         fontSize: 24
       },
@@ -53313,14 +53390,14 @@ var StyledDatePicker = styled$1(DatePicker$1, {
       transform: 'translate(20px,15px) scale(1)',
       '&.Mui-focused, &[data-shrink="true"]': {
         color: theme.mainPallete.primary.blue,
-        transform: 'translate(15px,-10px) scale(0.75)'
+        transform: 'translate(15px,-7px) scale(0.75)'
       },
       '&.Mui-disabled': {
         color: theme.mainPallete.primary.placeholderText
       }
     },
     '& label, .MuiOutlinedInput-root': {
-      fontSize: 21,
+      fontSize: 13,
       fontWeight: theme.fontWeight.regular,
       fontFamily: theme.fontFamily
     },
@@ -53343,6 +53420,23 @@ var StyledDatePicker = styled$1(DatePicker$1, {
         borderColor: theme.mainPallete.primary.placeholderText
       }
     },
+    '@media(min-width: 480px)': {
+      width: fluid ? '100%' : 'min(100%, 468px)',
+      '& label': {
+        transform: 'translate(20px,17px) scale(1)',
+        '&.Mui-focused, &.MuiFormLabel-filled': {
+          transform: 'translate(14px,-14px) scale(0.75)'
+        }
+      },
+      '& label, .MuiOutlinedInput-root': {
+        fontSize: 21
+      },
+      '.MuiOutlinedInput-root': {
+        input: {
+          padding: '19px 0 19px 20px'
+        }
+      }
+    },
     '@media(min-width: 720px)': {
       width: fluid ? '100%' : 'min(100%, 468px)',
       '& label': {
@@ -53387,6 +53481,15 @@ var pickerStyles = function pickerStyles() {
       translate: '0 -1px',
       border: "2px solid ".concat(theme.mainPallete.primary.blue)
     },
+    '.MuiPickersToolbar-root': {
+      padding: '8px 24px'
+    },
+    '.MuiPickersDay-root, .MuiDayPicker-weekDayLabel': {
+      width: 32
+    },
+    '.PrivatePickersSlideTransition-root': {
+      minHeight: 240
+    },
     '.MuiBackdrop-root': {
       backgroundColor: theme.mainPallete.primary.blue,
       opacity: '0.6 !important'
@@ -53405,7 +53508,7 @@ var pickerStyles = function pickerStyles() {
       }
     },
     '.MuiPickersCalendarHeader-labelContainer ': {
-      fontSize: 16,
+      fontSize: 13,
       color: theme.mainPallete.primary.placeholderText
     },
     '.MuiDialogContent-root': {
@@ -53426,10 +53529,10 @@ var pickerStyles = function pickerStyles() {
       '&::-webkit-scrollbar': _objectSpread2({}, theme.scrollbar)
     },
     '.MuiTypography-root, .MuiPickersDay-root': {
-      fontSize: 14,
+      fontSize: 13,
       color: theme.mainPallete.primary.blue,
       '&.MuiTypography-h4': {
-        fontSize: 32
+        fontSize: 26
       },
       '&.Mui-selected': {
         backgroundColor: theme.mainPallete.primary.blue + '!important',
@@ -53459,7 +53562,8 @@ var pickerStyles = function pickerStyles() {
     },
     '@media (max-width: 1019px)': {
       '&.MuiPaper-root, .MuiPaper-root': {
-        maxWidth: 316
+        maxWidth: 316,
+        minWidth: 300
       },
       '.MuiPickersCalendarHeader-root': {
         paddingLeft: '12px',
@@ -53605,7 +53709,7 @@ var StyledTextField = styled$1(MuiTextField, {
       transform: small ? 'translate(20px,7px) scale(1)' : 'translate(20px,15px) scale(1)',
       '&.Mui-focused, &.MuiFormLabel-filled': {
         color: theme.mainPallete.primary.blue,
-        transform: 'translate(15px,-10px) scale(0.75)'
+        transform: 'translate(15px,-7px) scale(0.75)'
       },
       '&.Mui-error': {
         color: theme.mainPallete.primary.blue
@@ -53622,6 +53726,9 @@ var StyledTextField = styled$1(MuiTextField, {
     },
     'div.MuiInputAdornment-root': {
       // zIndex: 10,
+      p: {
+        paddingRight: 0
+      },
       svg: {
         pointerEvents: 'none'
       }
@@ -73687,7 +73794,10 @@ var StyledLogoWrapper = styled$1(Box$1, {
   _objectDestructuringEmpty(_ref);
   return {
     'svg': {
-      width: '103px',
+      width: '80px',
+      '@media (min-width:480px)': {
+        width: '103px'
+      },
       '@media (min-width:720px)': {
         width: '154px'
       },
@@ -73819,17 +73929,20 @@ function uuid() {
 
 var uuid_1 = uuid;
 
-var _excluded$5 = ["buttons"];
+var _excluded$5 = ["buttons", "children"];
 var StyledBottomBarWrapper = styled$1(Box$1)(function (_ref) {
   _objectDestructuringEmpty(_ref);
   return {
     boxSizing: 'border-box',
     width: '100%',
-    height: '53px',
+    // height: '53px',
+    minHeight: '53px',
     backgroundColor: theme.mainPallete.primary.white,
     boxShadow: '0 -3px 6px rgba(0,0,0,0.1)',
     display: 'flex',
-    justifyContent: 'space-between',
+    flexDirection: 'column-reverse',
+    // justifyContent: 'space-between',
+    justifyContent: 'center',
     alignItems: 'center',
     padding: '0 18px',
     position: 'fixed',
@@ -73837,7 +73950,8 @@ var StyledBottomBarWrapper = styled$1(Box$1)(function (_ref) {
     left: 0,
     zIndex: 5,
     '@media(min-width: 480px)': {
-      height: '80px'
+      // height: '80px',
+      minHeight: '80px'
     },
     'button': {
       marginLeft: 10,
@@ -73847,10 +73961,45 @@ var StyledBottomBarWrapper = styled$1(Box$1)(function (_ref) {
     }
   };
 });
-var BottomBarComponent = function BottomBarComponent(_ref2) {
-  var buttons = _ref2.buttons,
-    props = _objectWithoutProperties$1(_ref2, _excluded$5);
-  return /*#__PURE__*/React__default.createElement(StyledBottomBarWrapper, props, buttons.map(function (item) {
+var StyledLeftRightComponentsWrapper = styled$1(Box$1)(function (_ref2) {
+  var isAnyAdditionalComponent = _ref2.isAnyAdditionalComponent;
+  return {
+    boxSizing: 'border-box',
+    width: '100%',
+    display: isAnyAdditionalComponent ? 'flex' : 'none',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: '10px 0 0',
+    zIndex: 5,
+    color: '#293072',
+    fontSize: 13,
+    fontWeight: 500,
+    '@media(min-width: 480px)': {
+      fontSize: 16
+    },
+    'p': {
+      margin: 0
+    }
+  };
+});
+var StyledButtonsWrapper$1 = styled$1(Box$1)(function (_ref3) {
+  _objectDestructuringEmpty(_ref3);
+  return {
+    boxSizing: 'border-box',
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: '10px 0',
+    zIndex: 5
+  };
+});
+var BottomBarComponent = function BottomBarComponent(_ref4) {
+  var buttons = _ref4.buttons,
+    children = _ref4.children,
+    props = _objectWithoutProperties$1(_ref4, _excluded$5);
+  var isAnyAdditionalComponent = children !== null && children !== undefined;
+  return /*#__PURE__*/React__default.createElement(StyledBottomBarWrapper, props, /*#__PURE__*/React__default.createElement(StyledButtonsWrapper$1, null, buttons.map(function (item) {
     var disabled = (item === null || item === void 0 ? void 0 : item.disabled) || false;
     var fluid = (item === null || item === void 0 ? void 0 : item.fluid) || true;
     var onClick = (item === null || item === void 0 ? void 0 : item.onClick) || '';
@@ -73868,7 +74017,9 @@ var BottomBarComponent = function BottomBarComponent(_ref2) {
       color: color,
       size: size
     });
-  }));
+  })), /*#__PURE__*/React__default.createElement(StyledLeftRightComponentsWrapper, {
+    isAnyAdditionalComponent: isAnyAdditionalComponent
+  }, typeof children !== 'undefined' && typeof children !== "string" && children ? children : typeof children === 'string' ? /*#__PURE__*/React__default.createElement("p", null, children) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null)));
 };
 BottomBarComponent.propTypes = {
   buttons: propTypesExports.arrayOf(propTypesExports.shape({
@@ -97612,7 +97763,9 @@ var StyledCustomTable = styled$1(Box$1)(function (_ref) {
             }
           },
           '&:hover': {
-            backgroundColor: 'rgba(22, 199, 165,0.11)'
+            '@media(min-width:1024px)': {
+              backgroundColor: 'rgba(22, 199, 165,0.11)'
+            }
           }
         }
       }
@@ -98447,7 +98600,10 @@ var StyledMenu = styled$1('div', {
         display: 'none'
       }
     },
-    '@media (max-width: 719px)': {
+    '@media (max-width: 479px)': {
+      paddingTop: 65
+    },
+    '@media (min-width: 480px) and (max-width: 719px)': {
       paddingTop: 90
     },
     '@media (min-width: 720px) and (max-width: 1019px)': {
@@ -98477,7 +98633,7 @@ var StyledMenu = styled$1('div', {
 });
 var StyledUserDataWrapper = styled$1('div')(function () {
   return {
-    padding: '0 30px',
+    padding: '0 30px 45px 30px',
     fontSize: 18,
     zIndex: 'inherit',
     lineHeight: '24px',
@@ -98485,7 +98641,13 @@ var StyledUserDataWrapper = styled$1('div')(function () {
       fontSize: 16,
       color: theme.mainPallete.primary.placeholderText
     },
-    paddingBottom: 45
+    '@media (max-width: 479px)': {
+      padding: '0 15px 45px 15px',
+      fontSize: 16,
+      'div:nth-of-type(2)': {
+        fontSize: 12
+      }
+    }
   };
 });
 var StyledMenuDataWrapper = styled$1('div')(function () {
@@ -98498,6 +98660,9 @@ var StyledMenuDataWrapper = styled$1('div')(function () {
     div: {
       position: 'relative'
     },
+    '@media (max-width: 479px)': {
+      fontSize: 24
+    },
     '@media (min-width: 1020px)': {
       fontSize: 14,
       rowGap: 10
@@ -98521,7 +98686,10 @@ var StyledMenuDataWrapper = styled$1('div')(function () {
         cursor: 'pointer',
         margin: '0 30px',
         display: 'flex',
-        justifyContent: 'space-between'
+        justifyContent: 'space-between',
+        '@media (max-width: 479px)': {
+          margin: '0 15pxv'
+        }
       }
     }
   };
@@ -98682,7 +98850,7 @@ var StyledTopbar = styled$1('div', {
     position: fixedTop === true ? 'fixed' : 'relative',
     display: 'flex',
     width: '100%',
-    minHeight: 60,
+    minHeight: 53,
     alignItems: 'center',
     fontFamily: theme.fontFamily,
     backgroundColor: variant === 'white' ? theme.mainPallete.primary.white : noBreadcrumb && noMenu ? theme.mainPallete.primary.blue : theme.mainPallete.primary.white,
@@ -98694,6 +98862,9 @@ var StyledTopbar = styled$1('div', {
       gridTemplateColumns: noBreadcrumb || menuOpen ? '1fr 1fr' : '1fr auto 1fr',
       backgroundColor: variant === 'white' ? theme.mainPallete.primary.white : theme.mainPallete.primary.blue
     },
+    '@media (min-width: 480px)': {
+      minHeight: 60
+    },
     '@media (min-width: 720px) and (max-width: 1019px)': {
       minHeight: 75
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xelto.npm/xc2-lib",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "author": "XELTO",
   "description": "React component library based on MUI",
   "license": "ISC",