@xelto.npm/xc2-lib 1.0.34 → 1.0.36

package/dist/index.cjs.js

@@ -55181,100 +55181,100 @@ process.env.NODE_ENV !== "production" ? MobileTimePicker.propTypes = {
   views: propTypesExports.arrayOf(propTypesExports.oneOf(['hours', 'minutes', 'seconds']).isRequired)
 } : void 0;
 
-var _excluded$c = ["value", "onChange", "label", "fluid", "disabled", "forwardedRef", "icon", "locale", "inputFormat"];
+var _excluded$c = ["value", "onChange", "label", "fluid", "disabled", "forwardedRef", "icon", "locale", "inputFormat", "clearable"];
 var StyledDatePicker = styled$1(DatePicker$1, {
   shouldForwardProp: function shouldForwardProp(prop) {
-    return prop !== 'fluid';
+    return prop !== "fluid";
   }
 })(function (_ref) {
   var fluid = _ref.fluid;
   return {
     zIndex: 1,
-    width: fluid ? '100%' : 'min(100%, 368px)',
+    width: fluid ? "100%" : "min(100%, 368px)",
     color: theme.mainPallete.primary.blue,
     label: {
       zIndex: 0,
       color: theme.mainPallete.primary.placeholderText,
-      transform: 'translate(20px,13.5px) scale(1)',
+      transform: "translate(20px,13.5px) scale(1)",
       '&.Mui-focused, &[data-shrink="true"]': {
         color: theme.mainPallete.primary.blue,
-        transform: 'translate(15px,-7px) scale(0.75)'
+        transform: "translate(15px,-7px) scale(0.75)"
       },
-      '&.Mui-disabled': {
+      "&.Mui-disabled": {
         color: theme.mainPallete.primary.placeholderText
       }
     },
-    '& label, .MuiOutlinedInput-root': {
+    "& label, .MuiOutlinedInput-root": {
       fontSize: 15,
       fontWeight: theme.fontWeight.regular,
       fontFamily: theme.fontFamily
     },
-    '& .MuiOutlinedInput-root': {
+    "& .MuiOutlinedInput-root": {
       fontWeight: theme.fontWeight.medium
     },
-    '.MuiOutlinedInput-root': {
+    ".MuiOutlinedInput-root": {
       borderRadius: 7,
       color: theme.mainPallete.primary.blue,
       paddingRight: 15,
       input: {
-        padding: '13.5px 0 13.5px 20px'
+        padding: "13.5px 0 13.5px 20px"
       },
-      '&.Mui-focused': {
-        '.MuiOutlinedInput-notchedOutline': {
+      "&.Mui-focused": {
+        ".MuiOutlinedInput-notchedOutline": {
           borderColor: theme.mainPallete.primary.blue
         }
       },
-      '.MuiOutlinedInput-notchedOutline': {
+      ".MuiOutlinedInput-notchedOutline": {
         borderColor: theme.mainPallete.primary.blue
       },
-      '&.Mui-disabled fieldset': {
+      "&.Mui-disabled fieldset": {
         borderColor: theme.mainPallete.primary.placeholderText
       }
     },
-    '@media(min-width: 480px)': {
-      width: fluid ? '100%' : 'min(100%, 368px)',
-      '& label': {
-        transform: 'translate(20px,17px) scale(1)',
-        '&.Mui-focused, &.MuiFormLabel-filled': {
-          transform: 'translate(14px,-14px) scale(0.75)'
+    "@media(min-width: 480px)": {
+      width: fluid ? "100%" : "min(100%, 368px)",
+      "& label": {
+        transform: "translate(20px,17px) scale(1)",
+        "&.Mui-focused, &.MuiFormLabel-filled": {
+          transform: "translate(14px,-14px) scale(0.75)"
         }
       },
-      '& label, .MuiOutlinedInput-root': {
+      "& label, .MuiOutlinedInput-root": {
         fontSize: 21
       }
     },
-    '@media(min-width: 720px)': {
-      width: fluid ? '100%' : 'min(100%, 468px)',
-      '& label': {
-        transform: 'translate(20px,17px) scale(1)',
-        '&.Mui-focused, &.MuiFormLabel-filled': {
-          transform: 'translate(14px,-14px) scale(0.75)'
+    "@media(min-width: 720px)": {
+      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': {
+      "& label, .MuiOutlinedInput-root": {
         fontSize: 26
       },
-      '.MuiOutlinedInput-root': {
+      ".MuiOutlinedInput-root": {
         input: {
-          padding: '19px 0 19px 20px'
+          padding: "19px 0 19px 20px"
         }
       }
     },
-    '@media(min-width: 1020px)': {
-      width: fluid ? '100%' : 'min(100%, 268px)',
-      '& label': {
-        transform: 'translate(20px,10px) scale(1)',
-        '&.Mui-focused, &.MuiFormLabel-filled': {
-          transform: 'translate(15px,-9px) scale(0.75)'
+    "@media(min-width: 1020px)": {
+      width: fluid ? "100%" : "min(100%, 268px)",
+      "& label": {
+        transform: "translate(20px,10px) scale(1)",
+        "&.Mui-focused, &.MuiFormLabel-filled": {
+          transform: "translate(15px,-9px) scale(0.75)"
         }
       },
-      '& label, .MuiOutlinedInput-root': {
+      "& label, .MuiOutlinedInput-root": {
         fontSize: 16
       },
-      '.MuiOutlinedInput-root': {
+      ".MuiOutlinedInput-root": {
         paddingRight: 20,
         input: {
-          padding: '11px 0 11px 20px'
+          padding: "11px 0 11px 20px"
         }
       }
     }
@@ -55282,135 +55282,135 @@ var StyledDatePicker = styled$1(DatePicker$1, {
 });
 var pickerStyles$1 = function pickerStyles() {
   return {
-    '.MuiDialog-root, .MuiModal-root': {
-      zIndex: '1501 !important'
+    ".MuiDialog-root, .MuiModal-root": {
+      zIndex: "1501 !important"
     },
-    '&.MuiPaper-root, .MuiPaper-root': {
+    "&.MuiPaper-root, .MuiPaper-root": {
       borderRadius: 2,
-      boxShadow: '0 3px 6px #252A674D',
-      translate: '0 -1px',
+      boxShadow: "0 3px 6px #252A674D",
+      translate: "0 -1px",
       border: "2px solid ".concat(theme.mainPallete.primary.blue)
     },
-    '.MuiPickersToolbar-root': {
-      padding: '8px 24px'
+    ".MuiPickersToolbar-root": {
+      padding: "8px 24px"
     },
-    '.MuiPickersDay-root, .MuiDayPicker-weekDayLabel': {
+    ".MuiPickersDay-root, .MuiDayPicker-weekDayLabel": {
       width: 32
     },
-    '.PrivatePickersSlideTransition-root': {
+    ".PrivatePickersSlideTransition-root": {
       minHeight: 240
     },
-    '.MuiBackdrop-root': {
+    ".MuiBackdrop-root": {
       backgroundColor: theme.mainPallete.primary.blue,
-      opacity: '0.6 !important'
+      opacity: "0.6 !important"
     },
-    '.MuiButtonBase-root, .MuiTypography-root, .MuiPickersDay-root, .MuiPickersCalendarHeader-labelContainer': {
+    ".MuiButtonBase-root, .MuiTypography-root, .MuiPickersDay-root, .MuiPickersCalendarHeader-labelContainer": {
       fontFamily: theme.fontFamily,
       fontWeight: theme.fontWeight.regular
     },
-    '.MuiDialogActions-root': {
-      '.MuiButtonBase-root': {
+    ".MuiDialogActions-root": {
+      ".MuiButtonBase-root": {
         fontWeight: theme.fontWeight.bold,
         color: theme.mainPallete.primary.blue,
-        '&:first-of-type': {
+        "&:first-of-type": {
           color: theme.mainPallete.primary.red
         }
       }
     },
-    '.MuiPickersCalendarHeader-labelContainer ': {
+    ".MuiPickersCalendarHeader-labelContainer ": {
       fontSize: 13,
       color: theme.mainPallete.primary.placeholderText
     },
-    '.MuiDialogContent-root': {
-      marginTop: '4px'
+    ".MuiDialogContent-root": {
+      marginTop: "4px"
     },
-    '.MuiCalendarOrClockPicker-root': {
-      '>div:nth-of-type(2)': {
-        overflowY: 'hidden'
+    ".MuiCalendarOrClockPicker-root": {
+      ">div:nth-of-type(2)": {
+        overflowY: "hidden"
         //fucking motherfucker scrollbar hide
       }
     },
 
-    '.MuiDayPicker-slideTransition': {
+    ".MuiDayPicker-slideTransition": {
       minHeight: null
     },
-    '.MuiDialogContent-root, .MuiYearPicker-root': {
-      marginRight: '4px',
-      '&::-webkit-scrollbar': _objectSpread2({}, theme.scrollbar)
+    ".MuiDialogContent-root, .MuiYearPicker-root": {
+      marginRight: "4px",
+      "&::-webkit-scrollbar": _objectSpread2({}, theme.scrollbar)
     },
-    '.MuiTypography-root, .MuiPickersDay-root': {
+    ".MuiTypography-root, .MuiPickersDay-root": {
       fontSize: 13,
       color: theme.mainPallete.primary.blue,
-      '&.MuiTypography-h4': {
+      "&.MuiTypography-h4": {
         fontSize: 26
       },
-      '&.Mui-selected': {
-        backgroundColor: theme.mainPallete.primary.blue + '!important',
+      "&.Mui-selected": {
+        backgroundColor: theme.mainPallete.primary.blue + "!important",
         color: theme.mainPallete.primary.white
       },
-      '&:not(.Mui-selected) ': {
+      "&:not(.Mui-selected) ": {
         '&[aria-current="date"]': {
           border: "solid 2px ".concat(theme.mainPallete.primary.blue)
         }
       }
     },
-    ' .MuiIconButton-root': {
+    " .MuiIconButton-root": {
       color: theme.mainPallete.primary.blue
     },
-    '.MuiYearPicker-root': {
-      '.PrivatePickersYear-root': {
-        '.PrivatePickersYear-yearButton': {
+    ".MuiYearPicker-root": {
+      ".PrivatePickersYear-root": {
+        ".PrivatePickersYear-yearButton": {
           fontFamily: theme.fontFamily,
           fontWeight: theme.fontWeight.regular,
           color: theme.mainPallete.primary.blue,
-          '&.Mui-selected': {
-            backgroundColor: theme.mainPallete.primary.blue + '!important',
+          "&.Mui-selected": {
+            backgroundColor: theme.mainPallete.primary.blue + "!important",
             color: theme.mainPallete.primary.white
           }
         }
       }
     },
-    '@media (max-width: 1019px)': {
-      '&.MuiPaper-root, .MuiPaper-root': {
+    "@media (max-width: 1019px)": {
+      "&.MuiPaper-root, .MuiPaper-root": {
         maxWidth: 316,
         minWidth: 300
       },
-      '.MuiPickersCalendarHeader-root': {
-        paddingLeft: '12px',
+      ".MuiPickersCalendarHeader-root": {
+        paddingLeft: "12px",
         paddingRight: 0,
         marginTop: 0
       },
-      '.MuiCalendarOrClockPicker-root': {
-        '>div:nth-of-type(2)': {
-          width: 'auto',
-          margin: '0 16px'
+      ".MuiCalendarOrClockPicker-root": {
+        ">div:nth-of-type(2)": {
+          width: "auto",
+          margin: "0 16px"
         },
-        '.MuiCalendarPicker-root': {
-          width: 'auto'
+        ".MuiCalendarPicker-root": {
+          width: "auto"
         }
       },
-      '.MuiDayPicker-slideTransition': {
+      ".MuiDayPicker-slideTransition": {
         minHeight: null
       },
-      '.MuiYearPicker-root': {
+      ".MuiYearPicker-root": {
         maxHeight: 216
       }
     }
   };
 };
 var locales = {
-  'en-us': undefined,
-  'en-gb': enGB,
-  'zh-cn': zhCN,
+  "en-us": undefined,
+  "en-gb": enGB,
+  "zh-cn": zhCN,
   de: de
 };
 var DatePicker = function DatePicker(_ref2) {
   var _ref2$value = _ref2.value,
-    value = _ref2$value === void 0 ? '' : _ref2$value,
+    value = _ref2$value === void 0 ? "" : _ref2$value,
     _ref2$onChange = _ref2.onChange,
     onChange = _ref2$onChange === void 0 ? function () {} : _ref2$onChange,
     _ref2$label = _ref2.label,
-    label = _ref2$label === void 0 ? 'Date Picker' : _ref2$label,
+    label = _ref2$label === void 0 ? "Date Picker" : _ref2$label,
     _ref2$fluid = _ref2.fluid,
     fluid = _ref2$fluid === void 0 ? false : _ref2$fluid,
     _ref2$disabled = _ref2.disabled,
@@ -55418,16 +55418,21 @@ var DatePicker = function DatePicker(_ref2) {
     _ref2$forwardedRef = _ref2.forwardedRef,
     forwardedRef = _ref2$forwardedRef === void 0 ? function () {} : _ref2$forwardedRef,
     _ref2$icon = _ref2.icon,
-    icon = _ref2$icon === void 0 ? 'icon_wf_calendar' : _ref2$icon,
+    icon = _ref2$icon === void 0 ? "icon_wf_calendar" : _ref2$icon,
     _ref2$locale = _ref2.locale,
-    locale = _ref2$locale === void 0 ? 'en-gb' : _ref2$locale,
+    locale = _ref2$locale === void 0 ? "en-gb" : _ref2$locale,
     _ref2$inputFormat = _ref2.inputFormat,
-    inputFormat = _ref2$inputFormat === void 0 ? 'dd/MM/yyyy' : _ref2$inputFormat;
+    inputFormat = _ref2$inputFormat === void 0 ? "dd/MM/yyyy" : _ref2$inputFormat,
+    _ref2$clearable = _ref2.clearable,
+    clearable = _ref2$clearable === void 0 ? true : _ref2$clearable;
     _objectWithoutProperties$1(_ref2, _excluded$c);
   var _React$useState = React__namespace.useState(false),
     _React$useState2 = _slicedToArray$a(_React$useState, 2),
     open = _React$useState2[0],
     setOpen = _React$useState2[1];
+  var handleClear = function handleClear() {
+    onChange(null);
+  };
   return /*#__PURE__*/React__namespace.createElement(ThemeProvider, {
     theme: muiTheme
   }, /*#__PURE__*/React__namespace.createElement(LocalizationProvider, {
@@ -55436,7 +55441,7 @@ var DatePicker = function DatePicker(_ref2) {
   }, /*#__PURE__*/React__namespace.createElement(StyledDatePicker, {
     label: label,
     value: value,
-    desktopModeMediaQuery: '@media (min-width: 1020px)',
+    desktopModeMediaQuery: "@media (min-width: 1020px)",
     disabled: disabled,
     inputRef: forwardedRef,
     fluid: fluid,
@@ -55457,12 +55462,32 @@ var DatePicker = function DatePicker(_ref2) {
     renderInput: function renderInput(params) {
       return /*#__PURE__*/React__namespace.createElement(TextField$3, _extends$1k({}, params, {
         InputProps: {
-          endAdornment: /*#__PURE__*/React__namespace.createElement(Icon, {
+          endAdornment: clearable && value ? /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Icon, {
+            iconName: "icon_ui_close",
+            style: {
+              cursor: "pointer",
+              marginRight: "4px"
+            },
+            onClick: function onClick(event) {
+              event.stopPropagation();
+              handleClear();
+            }
+          }), /*#__PURE__*/React__namespace.createElement(Icon, {
             iconName: icon,
-            color: disabled ? 'disabled' : 'red-navy',
+            color: disabled ? "disabled" : "red-navy",
             style: {
-              display: 'flex',
-              cursor: 'pointer'
+              cursor: "pointer"
+            },
+            onClick: function onClick() {
+              return setOpen(function (prevState) {
+                return !prevState;
+              });
+            }
+          })) : /*#__PURE__*/React__namespace.createElement(Icon, {
+            iconName: icon,
+            color: disabled ? "disabled" : "red-navy",
+            style: {
+              cursor: "pointer"
             },
             onClick: function onClick() {
               return setOpen(function (prevState) {
@@ -55487,10 +55512,11 @@ DatePicker.propTypes = {
   views: propTypesExports.arrayOf(propTypesExports.string),
   forwardedRef: propTypesExports.oneOfType([propTypesExports.func, propTypesExports.shape({
     current: propTypesExports.any
-  })])
+  })]),
+  clearable: propTypesExports.bool // PropType for clearable option
 };
 
-var _excluded$b = ["label", "error", "icon", "disabled", "fluid", "type", "min", "max", "small", "helperText", "value", "onChange", "onClick", "onBlur", "forwardedRef", "inputRef", "isFocused", "endAdornment"];
+var _excluded$b = ["label", "error", "icon", "disabled", "fluid", "type", "min", "max", "small", "helperText", "value", "onChange", "onClick", "onBlur", "forwardedRef", "inputRef", "isFocused", "endAdornment", "hasLargeErrorMessage"];
 var StyledTextField = styled$1(TextField$3, {
   shouldForwardProp: function shouldForwardProp(prop) {
     switch (prop) {
@@ -55507,7 +55533,8 @@ var StyledTextField = styled$1(TextField$3, {
 })(function (_ref) {
   var fluid = _ref.fluid,
     small = _ref.small,
-    isFocused = _ref.isFocused;
+    isFocused = _ref.isFocused,
+    hasLargeErrorMessage = _ref.hasLargeErrorMessage;
   return {
     width: fluid ? '100%' : 'min(100%, 368px)',
     zIndex: 1,
@@ -55589,15 +55616,22 @@ var StyledTextField = styled$1(TextField$3, {
         appearance: 'textfield'
       }
     },
-    '& .MuiFormHelperText-root': {
-      padding: '0 6px',
-      backgroundImage: 'linear-gradient(#FFF3F3 0% 58%, transparent 58% 100%)',
-      position: 'absolute',
-      right: 0,
-      bottom: -10,
+    '& .MuiFormHelperText-root': _objectSpread2(_objectSpread2(_objectSpread2({
+      padding: hasLargeErrorMessage ? '0 6px 0 0' : '0 6px',
+      backgroundImage: hasLargeErrorMessage ? 'linear-gradient(#FFF3F3 0% 28%, transparent 28% 100%)' : 'linear-gradient(#FFF3F3 0% 58%, transparent 58% 100%)',
+      position: hasLargeErrorMessage ? 'relative' : 'absolute',
+      zIndex: 10,
+      right: 0
+    }, hasLargeErrorMessage && {
+      textAlign: 'right'
+    }), hasLargeErrorMessage ? {
+      marginTop: -10
+    } : {
+      bottom: -10
+    }), {}, {
       pointerEvents: 'none',
       fontSize: 14
-    },
+    }),
     '@media(min-width: 480px)': {
       '& label': {
         color: theme.mainPallete.primary.placeholderText,
@@ -55638,15 +55672,22 @@ var StyledTextField = styled$1(TextField$3, {
           appearance: 'textfield'
         }
       },
-      '& .MuiFormHelperText-root': {
-        padding: '0 6px',
-        backgroundImage: 'linear-gradient(#FFF3F3 0% 58%, transparent 58% 100%)',
-        position: 'absolute',
-        right: 0,
-        bottom: -10,
+      '& .MuiFormHelperText-root': _objectSpread2(_objectSpread2(_objectSpread2({
+        padding: hasLargeErrorMessage ? '0 6px 0 0' : '0 6px',
+        backgroundImage: hasLargeErrorMessage ? 'linear-gradient(#FFF3F3 0% 28%, transparent 28% 100%)' : 'linear-gradient(#FFF3F3 0% 58%, transparent 58% 100%)',
+        position: hasLargeErrorMessage ? 'relative' : 'absolute',
+        zIndex: 10,
+        right: 0
+      }, hasLargeErrorMessage && {
+        textAlign: 'right'
+      }), hasLargeErrorMessage ? {
+        marginTop: -10
+      } : {
+        bottom: -10
+      }), {}, {
         pointerEvents: 'none',
         fontSize: 14
-      }
+      })
     },
     '@media(min-width: 720px)': {
       width: fluid ? '100%' : 'min(100%, 468px)',
@@ -55663,10 +55704,11 @@ var StyledTextField = styled$1(TextField$3, {
         padding: small ? '7.5px 0 7.5px 20px' : '19px 0 19px 20px',
         transform: isFocused ? 'translateX(-22px)' : 'translateX(0)'
       },
-      '& .MuiFormHelperText-root': {
-        bottom: -11,
+      '& .MuiFormHelperText-root': _objectSpread2(_objectSpread2({}, !hasLargeErrorMessage && {
+        bottom: -11
+      }), {}, {
         fontSize: 16
-      }
+      })
     },
     '@media(min-width: 1024px)': {
       width: fluid ? '100%' : 'min(100%, 268px)',
@@ -55683,10 +55725,11 @@ var StyledTextField = styled$1(TextField$3, {
         padding: small ? '7px 0 7px 20px' : '11px 0 11px 20px',
         transform: isFocused ? 'translateX(-15px)' : 'translateX(0)'
       },
-      '& .MuiFormHelperText-root': {
-        bottom: -8,
+      '& .MuiFormHelperText-root': _objectSpread2(_objectSpread2({}, !hasLargeErrorMessage && {
+        bottom: -8
+      }), {}, {
         fontSize: 11
-      }
+      })
     }
   };
 });
@@ -55760,6 +55803,8 @@ var TextField = function TextField(_ref2) {
     isFocused = _ref2.isFocused,
     _ref2$endAdornment = _ref2.endAdornment,
     endAdornment = _ref2$endAdornment === void 0 ? '' : _ref2$endAdornment,
+    _ref2$hasLargeErrorMe = _ref2.hasLargeErrorMessage,
+    hasLargeErrorMessage = _ref2$hasLargeErrorMe === void 0 ? false : _ref2$hasLargeErrorMe,
     props = _objectWithoutProperties$1(_ref2, _excluded$b);
   // const parsedValue = type === 'number' ? parseFloat(value) || 0 : value;
   var parsedValue = React.useMemo(function () {
@@ -55781,6 +55826,7 @@ var TextField = function TextField(_ref2) {
     isFocused: isFocused,
     ref: forwardedRef,
     small: small,
+    hasLargeErrorMessage: hasLargeErrorMessage,
     InputProps: {
       inputProps: {
         min: min,
@@ -55810,6 +55856,7 @@ TextField.propTypes = {
   min: propTypesExports.string,
   max: propTypesExports.string,
   small: propTypesExports.bool,
+  hasLargeErrorMessage: propTypesExports.bool,
   helperText: propTypesExports.string,
   value: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.number]),
   onChange: propTypesExports.func,
@@ -74938,250 +74985,250 @@ AppTileComponent.propTypes = {
 var _excluded$9 = ["type", "text", "size", "fluid", "color", "onClick", "disabled", "submit", "forwardedRef"];
 var CustomButton = styled$1(Button$2, {
   shouldForwardProp: function shouldForwardProp(prop) {
-    return prop !== 'fluid';
+    return prop !== "fluid";
   }
 })(function (_ref) {
   var fluid = _ref.fluid;
   return {
-    width: fluid ? '100%' : 'auto',
-    borderRadius: '24px',
-    fontWeight: 'bold',
-    boxShadow: 'none',
-    border: '2px solid #293072',
+    width: fluid ? "100%" : "auto",
+    borderRadius: "24px",
+    fontWeight: "bold",
+    boxShadow: "none",
+    border: "2px solid #293072",
     backgroundColor: theme.mainPallete.primary.white,
     color: theme.mainPallete.primary.blue,
-    textTransform: 'capitalize!important',
+    textTransform: "capitalize!important",
     fontFamily: ['"Barlow", sans-serif'],
-    '&:hover': {
-      boxShadow: 'none'
+    "&:hover": {
+      boxShadow: "none"
     },
-    '&.primary': {
-      '&.navy-blue': {
+    "&.primary": {
+      "&.navy-blue": {
         backgroundColor: theme.mainPallete.primary.blue,
         borderColor: theme.mainPallete.primary.blue,
         color: theme.mainPallete.primary.white,
-        '&:hover': {
-          borderColor: '#3A44A7',
+        "&:hover": {
+          borderColor: "#3A44A7",
           color: theme.mainPallete.primary.white,
-          backgroundColor: '#3A44A7'
+          backgroundColor: "#3A44A7"
         }
       },
-      '&.red': {
+      "&.red": {
         backgroundColor: theme.mainPallete.primary.red,
         borderColor: theme.mainPallete.primary.red,
         color: theme.mainPallete.primary.white,
-        '&:hover': {
-          borderColor: '#FA676B',
+        "&:hover": {
+          borderColor: "#FA676B",
           color: theme.mainPallete.primary.white,
-          backgroundColor: '#FA676B'
+          backgroundColor: "#FA676B"
         }
       },
-      '&.black': {
-        backgroundColor: '#000',
-        borderColor: '#000',
+      "&.black": {
+        backgroundColor: "#000",
+        borderColor: "#000",
         color: theme.mainPallete.primary.white,
-        '&:hover': {
-          borderColor: '#707070',
+        "&:hover": {
+          borderColor: "#707070",
           color: theme.mainPallete.primary.white,
-          backgroundColor: '#707070'
+          backgroundColor: "#707070"
         }
       },
-      '&.grey': {
-        backgroundColor: '#F5F7F9',
-        borderColor: '#F5F7F9',
+      "&.grey": {
+        backgroundColor: "#F5F7F9",
+        borderColor: "#F5F7F9",
         color: theme.mainPallete.primary.placeholderText,
-        '&:hover': {
-          borderColor: '#FAFAFA',
+        "&:hover": {
+          borderColor: "#FAFAFA",
           color: theme.mainPallete.primary.placeholderText,
-          backgroundColor: '#FAFAFA'
+          backgroundColor: "#FAFAFA"
         }
       },
-      '&.special-green': {
+      "&.special-green": {
         backgroundColor: theme.mainPallete.secondary.specialGreen,
         borderColor: theme.mainPallete.secondary.specialGreen,
         color: theme.mainPallete.primary.white,
-        '&:hover': {
-          borderColor: '#87DB87',
-          backgroundColor: '#87DB87',
+        "&:hover": {
+          borderColor: "#87DB87",
+          backgroundColor: "#87DB87",
           color: theme.mainPallete.primary.white
         }
       }
     },
-    '&.secondary': {
-      '&.navy-blue': {
+    "&.secondary": {
+      "&.navy-blue": {
         backgroundColor: theme.mainPallete.primary.white,
         borderColor: theme.mainPallete.primary.blue,
         color: theme.mainPallete.primary.blue,
-        '&:hover': {
-          borderColor: '#3A44A7',
-          color: '#3A44A7'
+        "&:hover": {
+          borderColor: "#3A44A7",
+          color: "#3A44A7"
         }
       },
-      '&.red': {
+      "&.red": {
         backgroundColor: theme.mainPallete.primary.white,
         borderColor: theme.mainPallete.primary.red,
         color: theme.mainPallete.primary.red,
-        '&:hover': {
-          borderColor: '#FA676B',
-          color: '#FA676B'
+        "&:hover": {
+          borderColor: "#FA676B",
+          color: "#FA676B"
         }
       },
-      '&.black': {
+      "&.black": {
         backgroundColor: theme.mainPallete.primary.white,
-        borderColor: '#000',
-        color: '#000',
-        '&:hover': {
-          borderColor: '#707070',
-          color: '#707070'
+        borderColor: "#000",
+        color: "#000",
+        "&:hover": {
+          borderColor: "#707070",
+          color: "#707070"
         }
       },
-      '&.grey': {
+      "&.grey": {
         backgroundColor: theme.mainPallete.primary.white,
         borderColor: theme.mainPallete.primary.placeholderText,
         color: theme.mainPallete.primary.placeholderText,
-        '&:hover': {
-          borderColor: '#F3F6F8',
+        "&:hover": {
+          borderColor: "#F3F6F8",
           color: theme.mainPallete.primary.placeholderText
         }
       },
-      '&.special-green': {
+      "&.special-green": {
         backgroundColor: theme.mainPallete.primary.white,
         borderColor: theme.mainPallete.secondary.specialGreen,
         color: theme.mainPallete.secondary.specialGreen,
-        '&:hover': {
-          borderColor: '#87DB87',
-          color: '#87DB87'
+        "&:hover": {
+          borderColor: "#87DB87",
+          color: "#87DB87"
         }
       }
     },
-    '&.ghost': {
-      border: 'none',
+    "&.ghost": {
+      border: "none",
       borderRadius: 0,
       backgroundColor: theme.mainPallete.primary.white,
       color: theme.mainPallete.primary.blue,
-      textTransform: 'none',
-      '&.white': {
-        backgroundColor: 'transparent',
+      textTransform: "none",
+      "&.white": {
+        backgroundColor: "transparent",
         color: theme.mainPallete.primary.white,
-        '&:hover': {
+        "&:hover": {
           color: theme.mainPallete.primary.white,
-          backgroundColor: 'transparent'
+          backgroundColor: "transparent"
         }
       },
-      '&.navy-blue': {
-        backgroundColor: 'transparent',
+      "&.navy-blue": {
+        backgroundColor: "transparent",
         borderColor: theme.mainPallete.primary.blue,
         color: theme.mainPallete.primary.blue,
-        '&:hover': {
-          borderColor: '#3A44A7',
-          color: '#3A44A7',
-          backgroundColor: 'transparent'
+        "&:hover": {
+          borderColor: "#3A44A7",
+          color: "#3A44A7",
+          backgroundColor: "transparent"
         }
       },
-      '&.red': {
-        backgroundColor: 'transparent',
+      "&.red": {
+        backgroundColor: "transparent",
         borderColor: theme.mainPallete.primary.red,
         color: theme.mainPallete.primary.red,
-        '&:hover': {
-          borderColor: '#FA676B',
-          color: '#FA676B',
-          backgroundColor: 'transparent'
+        "&:hover": {
+          borderColor: "#FA676B",
+          color: "#FA676B",
+          backgroundColor: "transparent"
         }
       },
-      '&.black': {
-        backgroundColor: 'transparent',
-        borderColor: '#000',
-        color: '#000',
-        '&:hover': {
-          borderColor: '#707070',
-          color: '#707070',
-          backgroundColor: 'transparent'
+      "&.black": {
+        backgroundColor: "transparent",
+        borderColor: "#000",
+        color: "#000",
+        "&:hover": {
+          borderColor: "#707070",
+          color: "#707070",
+          backgroundColor: "transparent"
         }
       },
-      '&.grey': {
-        backgroundColor: 'transparent',
+      "&.grey": {
+        backgroundColor: "transparent",
         borderColor: theme.mainPallete.primary.placeholderText,
         color: theme.mainPallete.primary.placeholderText,
-        '&:hover': {
-          borderColor: '#F3F6F8',
+        "&:hover": {
+          borderColor: "#F3F6F8",
           color: theme.mainPallete.primary.placeholderText,
-          backgroundColor: 'transparent'
+          backgroundColor: "transparent"
         }
       },
-      '&.special-green': {
-        backgroundColor: 'transparent',
+      "&.special-green": {
+        backgroundColor: "transparent",
         borderColor: theme.mainPallete.secondary.specialGreen,
         color: theme.mainPallete.secondary.specialGreen,
-        '&:hover': {
-          borderColor: '#87DB87',
-          color: '#87DB87',
-          backgroundColor: 'transparent'
+        "&:hover": {
+          borderColor: "#87DB87",
+          color: "#87DB87",
+          backgroundColor: "transparent"
         }
       }
     },
-    '&.big': {
-      padding: '6px 17px',
-      fontSize: '14px',
-      lineHeight: '15px',
-      borderRadius: '30px',
-      fontWeight: 'bold',
-      '@media(min-width: 480px)': {
-        padding: '21px',
-        fontSize: '16px',
-        lineHeight: '15px',
-        borderRadius: '31px'
+    "&.big": {
+      padding: "6px 17px",
+      fontSize: "14px",
+      lineHeight: "15px",
+      borderRadius: "30px",
+      fontWeight: "bold",
+      "@media(min-width: 480px)": {
+        padding: "21px",
+        fontSize: "16px",
+        lineHeight: "15px",
+        borderRadius: "31px"
       },
-      '@media(min-width: 720px)': {
-        padding: '34px 30px',
-        fontSize: '24px',
-        lineHeight: '25px',
-        borderRadius: '49px'
+      "@media(min-width: 720px)": {
+        padding: "34px 30px",
+        fontSize: "24px",
+        lineHeight: "25px",
+        borderRadius: "49px"
       },
-      '@media(min-width: 1024px)': {
-        padding: '9px 25px 10px 25px',
-        fontSize: '12px',
-        lineHeight: '16px',
-        borderRadius: '31px'
+      "@media(min-width: 1024px)": {
+        padding: "9px 25px 10px 25px",
+        fontSize: "12px",
+        lineHeight: "16px",
+        borderRadius: "31px"
       }
     },
-    '&.small': {
-      padding: '6px 17px',
-      fontSize: '14px',
-      lineHeight: '15px',
-      borderRadius: '24px',
-      fontWeight: 'bold',
-      '@media(min-width: 480px)': {
-        padding: '14px 21px',
-        fontSize: '16px',
-        lineHeight: '15px',
-        borderRadius: '24px'
+    "&.small": {
+      padding: "6px 17px",
+      fontSize: "14px",
+      lineHeight: "15px",
+      borderRadius: "24px",
+      fontWeight: "bold",
+      "@media(min-width: 480px)": {
+        padding: "14px 21px",
+        fontSize: "16px",
+        lineHeight: "15px",
+        borderRadius: "24px"
       },
-      '@media(min-width: 720px)': {
-        padding: '19px 30px',
-        fontSize: '24px',
-        lineHeight: '25px',
-        borderRadius: '34px'
+      "@media(min-width: 720px)": {
+        padding: "19px 30px",
+        fontSize: "24px",
+        lineHeight: "25px",
+        borderRadius: "34px"
       },
-      '@media(min-width: 1024px)': {
-        padding: '3px 25px 4px 25px',
-        fontSize: '12px',
-        lineHeight: '16px',
-        borderRadius: '24px'
+      "@media(min-width: 1024px)": {
+        padding: "3px 25px 4px 25px",
+        fontSize: "12px",
+        lineHeight: "16px",
+        borderRadius: "24px"
       }
     }
   };
 });
 var CustomButtonComponent = function CustomButtonComponent(_ref2) {
   var _ref2$type = _ref2.type,
-    type = _ref2$type === void 0 ? 'primary' : _ref2$type,
+    type = _ref2$type === void 0 ? "primary" : _ref2$type,
     _ref2$text = _ref2.text,
     text = _ref2$text === void 0 ? "" : _ref2$text,
     _ref2$size = _ref2.size,
-    size = _ref2$size === void 0 ? 'big' : _ref2$size,
+    size = _ref2$size === void 0 ? "big" : _ref2$size,
     _ref2$fluid = _ref2.fluid,
     fluid = _ref2$fluid === void 0 ? false : _ref2$fluid,
     _ref2$color = _ref2.color,
-    color = _ref2$color === void 0 ? 'navy-blue' : _ref2$color,
+    color = _ref2$color === void 0 ? "navy-blue" : _ref2$color,
     _ref2$onClick = _ref2.onClick,
     onClick = _ref2$onClick === void 0 ? function () {} : _ref2$onClick,
     _ref2$disabled = _ref2.disabled,
@@ -75190,15 +75237,15 @@ var CustomButtonComponent = function CustomButtonComponent(_ref2) {
     submit = _ref2$submit === void 0 ? false : _ref2$submit,
     forwardedRef = _ref2.forwardedRef,
     props = _objectWithoutProperties$1(_ref2, _excluded$9);
-  var className = "".concat(type, " ").concat(disabled ? 'grey' : color, " ").concat(size);
+  var className = "".concat(type, " ").concat(disabled ? "grey" : color, " ").concat(size);
   return /*#__PURE__*/React__namespace.createElement(CustomButton, _extends$1k({
     disabled: disabled,
-    onClick: typeof onClick === 'function' ? onClick : null,
+    onClick: typeof onClick === "function" ? onClick : null,
     className: className,
     fluid: fluid,
     variant: "contained",
     disableRipple: true,
-    type: submit ? 'submit' : 'button',
+    type: submit ? "submit" : "button",
     ref: forwardedRef
   }, props), text);
 };