@rabex-kit/rabex-ui 0.1.18 → 0.1.20

package/dist/rabex-ui.esm.js

@@ -5,7 +5,6 @@ import MuiAccordionSummary from '@mui/material/AccordionSummary/AccordionSummary
 import MuiAlert from '@mui/material/Alert/Alert.js';
 import Stack$1 from '@mui/material/Stack/Stack.js';
 import MuiTypography from '@mui/material/Typography/Typography.js';
-import useTheme from '@mui/material/styles/useTheme.js';
 import useMediaQuery from '@mui/material/useMediaQuery/useMediaQuery.js';
 export { default as useMediaQuery } from '@mui/material/useMediaQuery/useMediaQuery.js';
 export { default as useScrollTrigger } from '@mui/material/useScrollTrigger/useScrollTrigger.js';
@@ -36,6 +35,7 @@ import MuiFormLabel from '@mui/material/FormLabel/FormLabel.js';
 import MuiGrid from '@mui/material/Unstable_Grid2';
 import MuiIconButton from '@mui/material/IconButton/IconButton.js';
 import MuiInput from '@mui/material/Input/Input.js';
+import useTheme from '@mui/material/styles/useTheme.js';
 import MuiInputAdornment from '@mui/material/InputAdornment/InputAdornment.js';
 import MuiInputLabel from '@mui/material/InputLabel/InputLabel.js';
 import MuiLinearProgress from '@mui/material/LinearProgress/LinearProgress.js';
@@ -260,7 +260,7 @@ var AlertAction = function AlertAction(_ref) {
   })));
 };
 
-var _excluded$1 = ["weight", "sx", "color"];
+var _excluded$1 = ["weight", "sx"];
 var fontWeight = {
   bold: '700',
   semiBold: '600',
@@ -285,15 +285,12 @@ var fontWeight = {
 var Typography = function Typography(_ref) {
   var weight = _ref.weight,
     sx = _ref.sx,
-    color = _ref.color,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-  var _useTheme = useTheme(),
-    palette = _useTheme.palette;
+  // const { palette } = useTheme();
   return React.createElement(MuiTypography, Object.assign({
     sx: _extends({}, sx, {
       fontWeight: weight ? fontWeight[weight] : 'regular'
-    }),
-    color: color || palette.textColor[900]
+    })
   }, props));
 };
 Typography.defaultProps = {
@@ -1571,7 +1568,7 @@ var ListSubHeader = function ListSubHeader(props) {
  * You can read Material-UI LoadingButton Documentation [here](https://mui.com/material-ui/api/loading-button/).
  *
  * ```typescript
- *  import { LoadingButton } from '@rabex-kit/core';
+ *  import { LoadingButton } from '@rabex-kit/rabex-ui';
  *  ```
  *
  *
@@ -3809,16 +3806,15 @@ var components$3 = {
         transition: 'all 0.2s',
         padding: spacing(2.5, 3),
         border: isLight ? "1px solid " + palette.base[300] : "1px solid " + palette.secondary.A100,
-        backgroundColor: isLight
+        backgroundColor: isLight ?
         // ? palette.grayBackground.A20
-        ? 'transparent' : palette.secondary.A100,
+        'transparent' : palette.secondary.A100,
         '&:hover': {
-          border: isLight
-          // ? `1px solid ${palette.textColor.A20}`
-          ? "1px solid " + palette.base[600] : "1px solid " + palette.base.A60,
-          backgroundColor: isLight
+          border: isLight ? // ? `1px solid ${palette.textColor.A20}`
+          "1px solid " + palette.base[600] : "1px solid " + palette.base.A60,
+          backgroundColor: isLight ?
           // ? palette.grayBackground.A20
-          ? 'transparent' : palette.base.A60
+          'transparent' : palette.base.A60
         },
         '&.Mui-focused': {
           border: isLight ? "1.5px solid " + palette.primary[500] : "1px solid " + palette.primary.A80
@@ -3828,12 +3824,12 @@ var components$3 = {
           backgroundColor: isLight ? palette.base.A0 : alpha(palette.error.A100 || '', 0.1)
         },
         '&.Mui-disabled': {
-          borderColor: isLight
+          borderColor: isLight ?
           // ? palette.grayBackground.A40
-          ? palette.base[300] : palette.secondary.A100,
-          backgroundColor: isLight
+          palette.base[300] : palette.secondary.A100,
+          backgroundColor: isLight ?
           // ? palette.grayBackground.A10
-          ? 'transparent' : palette.secondary.A100
+          'transparent' : palette.secondary.A100
         }
       };
     },
@@ -3851,7 +3847,8 @@ var components$3 = {
         '&::.placeholder': {
           opacity: 1,
           color: isLight ? palette.textColor.A40 : palette.textColor.A30
-        }
+        },
+        '&:-webkit-autofill': {}
       };
     }
   },
@@ -3863,6 +3860,7 @@ var components$3 = {
       var theme = _ref3.theme;
       return {
         fontSize: '14px',
+        lineHeight: '24px',
         padding: theme.spacing(1, 3)
       };
     }
@@ -3874,6 +3872,7 @@ var components$3 = {
       var theme = _ref4.theme;
       return {
         fontSize: '14px',
+        lineHeight: '24px',
         padding: theme.spacing(2, 3)
       };
     }
@@ -3885,6 +3884,7 @@ var components$3 = {
       var theme = _ref5.theme;
       return {
         fontSize: '14px',
+        lineHeight: '24px',
         padding: theme.spacing(3)
       };
     }
@@ -3896,6 +3896,7 @@ var components$3 = {
       var theme = _ref6.theme;
       return {
         fontSize: '16px',
+        lineHeight: '24px',
         padding: theme.spacing(3)
       };
     }
@@ -3905,33 +3906,30 @@ var components$3 = {
     },
     style: function style(_ref7) {
       var theme = _ref7.theme;
-      if (theme.palette.mode === 'light') {
-        var isLight = theme.palette.mode === 'light';
-        return {
-          // border: `1px solid ${theme.palette.base[600]}`,
-          border: 'transparent',
-          background: theme.palette.base[200],
-          '&.Mui-disabled': {
-            background: isLight ? theme.palette.base[100] : theme.palette.secondary.A100
-          },
-          '&:hover': {
-            border: isLight
-            // ? `1px solid ${palette.textColor.A20}`
-            ? "1px solid " + theme.palette.base[600] : "1px solid " + theme.palette.base.A60,
-            backgroundColor: isLight
-            // ? palette.grayBackground.A20
-            ? theme.palette.base[200] : theme.palette.base.A60
-          },
-          '&.Mui-focused': {
-            border: isLight ? "1.5px solid " + theme.palette.primary[500] : "1px solid " + theme.palette.primary.A80,
-            backgroundColor: isLight ? theme.palette.base[200] : theme.palette.base.A60
-          },
-          '&.Mui-error': {
-            border: isLight ? "1.5px solid " + theme.palette.error[400] : "1px solid " + theme.palette.error.A60,
-            backgroundColor: isLight ? theme.palette.base[200] : alpha(theme.palette.error.A100 || '', 0.1)
-          }
-        };
-      } else return {};
+      var isLight = theme.palette.mode === 'light';
+      return {
+        // border: `1px solid ${theme.palette.base[600]}`,
+        border: 'transparent',
+        background: theme.palette.base[200],
+        '&.Mui-disabled': {
+          background: isLight ? theme.palette.base[100] : theme.palette.secondary.A100
+        },
+        '&:hover': {
+          border: isLight ? // ? `1px solid ${palette.textColor.A20}`
+          "1px solid " + theme.palette.base[600] : "1px solid " + theme.palette.base.A60,
+          backgroundColor: isLight ?
+          // ? palette.grayBackground.A20
+          theme.palette.base[200] : theme.palette.base.A60
+        },
+        '&.Mui-focused': {
+          border: isLight ? "1.5px solid " + theme.palette.primary[500] : "1px solid " + theme.palette.primary.A80,
+          backgroundColor: isLight ? theme.palette.base[200] : theme.palette.base.A60
+        },
+        '&.Mui-error': {
+          border: isLight ? "1.5px solid " + theme.palette.error[400] : "1px solid " + theme.palette.error.A60,
+          backgroundColor: isLight ? theme.palette.base[200] : alpha(theme.palette.error.A100 || '', 0.1)
+        }
+      };
     }
   }, {
     props: {
@@ -4508,13 +4506,18 @@ var components$6 = {
     root: function root(_ref) {
       var _ref$theme = _ref.theme,
         palette = _ref$theme.palette,
-        spacing = _ref$theme.spacing;
+        spacing = _ref$theme.spacing,
+        _ref$ownerState = _ref.ownerState,
+        size = _ref$ownerState.size,
+        fill = _ref$ownerState.fill,
+        success = _ref$ownerState.success;
+      console.log(size, fill, success);
       var isLight = palette.mode === 'light';
       return {
         '& > div.MuiInputBase-root > fieldset': {
           border: 0
         },
-        '& > div.MuiInputBase-root': {
+        '& > div.MuiInputBase-root': _extends({
           borderRadius: '8px',
           gap: spacing(1),
           transition: 'all 0.2s',
@@ -4536,8 +4539,46 @@ var components$6 = {
           '&.Mui-disabled': {
             borderColor: isLight ? palette.grayBackground.A40 : palette.secondary.A100,
             backgroundColor: isLight ? palette.grayBackground.A10 : palette.secondary.A100
+          },
+          '&:-webkit-autofill': {}
+        }, size === 'sm' && {
+          fontSize: '14px',
+          lineHeight: '24px',
+          padding: spacing(1, 3)
+        }, size === 'md' && {
+          fontSize: '14px',
+          lineHeight: '24px',
+          padding: spacing(2, 3)
+        }, size === 'lg' && {
+          fontSize: '14px',
+          lineHeight: '24px',
+          padding: spacing(3)
+        }, size === 'xl' && {
+          fontSize: '16px',
+          lineHeight: '24px',
+          padding: spacing(3)
+        }, fill === true && {
+          border: 'transparent',
+          background: isLight ? palette.base[200] : undefined,
+          '&.Mui-disabled': {
+            background: isLight ? palette.base[100] : palette.secondary.A100
+          },
+          '&:hover': {
+            border: isLight ? "1px solid " + palette.base[600] : "1px solid " + palette.base.A60,
+            backgroundColor: isLight ? palette.base[200] : palette.base.A60
+          },
+          '&.Mui-focused': {
+            border: isLight ? "1.5px solid " + palette.primary[500] : "1px solid " + palette.primary.A80,
+            backgroundColor: isLight ? palette.base[200] : palette.base.A60
+          },
+          '&.Mui-error': {
+            border: isLight ? "1.5px solid " + palette.error[400] : "1px solid " + palette.error.A60,
+            backgroundColor: isLight ? palette.base[200] : alpha(palette.error.A100 || '', 0.1)
           }
-        },
+        }, success === true && {
+          border: isLight ? "1px solid " + palette.success.A100 : "1px solid " + palette.success.A40,
+          backgroundColor: isLight ? palette.base.A0 : alpha(palette.success.A100, 0.1)
+        }),
         '& > div.MuiInputBase-root > input.MuiInputBase-input': {
           color: isLight ? palette.textColor.A80 : palette.textColor.A0,
           padding: spacing(0),
@@ -4550,7 +4591,54 @@ var components$6 = {
         }
       };
     }
-  }
+  },
+  variants: [{
+    props: {
+      fill: true
+    },
+    style: function style(_ref2) {
+      var theme = _ref2.theme;
+      var isLight = theme.palette.mode === 'light';
+      return {
+        '& .MuiInputBase-root': {
+          // border: `1px solid ${theme.palette.base[600]}`,
+          border: 'transparent',
+          background: theme.palette.base[200],
+          '&.Mui-disabled': {
+            background: isLight ? theme.palette.base[100] : theme.palette.secondary.A100
+          },
+          '&:hover': {
+            border: isLight ? // ? `1px solid ${palette.textColor.A20}`
+            "1px solid " + theme.palette.base[600] : "1px solid " + theme.palette.base.A60,
+            backgroundColor: isLight ?
+            // ? palette.grayBackground.A20
+            theme.palette.base[200] : theme.palette.base.A60
+          },
+          '&.Mui-focused': {
+            border: isLight ? "1.5px solid " + theme.palette.primary[500] : "1px solid " + theme.palette.primary.A80,
+            backgroundColor: isLight ? theme.palette.base[200] : theme.palette.base.A60
+          },
+          '&.Mui-error': {
+            border: isLight ? "1.5px solid " + theme.palette.error[400] : "1px solid " + theme.palette.error.A60,
+            backgroundColor: isLight ? theme.palette.base[200] : alpha(theme.palette.error.A100 || '', 0.1)
+          }
+        }
+      };
+    }
+  }, {
+    props: {
+      success: true
+    },
+    style: function style(_ref3) {
+      var palette = _ref3.theme.palette;
+      return {
+        '& .MuiInputBase-root': {
+          border: palette.mode === 'light' ? "1px solid " + palette.success.A100 : "1px solid " + palette.success.A40,
+          backgroundColor: palette.mode === 'light' ? palette.base.A0 : alpha(palette.success.A100, 0.1)
+        }
+      };
+    }
+  }]
 };
 var RabexTextField = {
   components: components$6
@@ -4773,7 +4861,7 @@ Tooltip.defaultProps = {
  * you can see Autocomplete Documentation api that I mentioned below [here](https://mui.com/material-ui/react-autocomplete/)
  *
  * ```typescript
- *  import { Autocomplete } from '@rabex-kit/core';
+ *  import { Autocomplete } from '@rabex-kit/rabex-ui';
  *  ```
  *
  *
@@ -4991,7 +5079,7 @@ var FormikSelect = function FormikSelect(_ref) {
   }, text));
 };
 
-var _excluded$i = ["title", "helperTextEndAdornment", "helperTextEndAdornmentProps", "titleProps", "helperText", "helperTextIcon", "helperTextProps", "value", "onChange", "valueFormat", "valueFormatOption"];
+var _excluded$i = ["title", "helperTextEndAdornment", "helperTextEndAdornmentProps", "titleProps", "helperText", "helperTextIcon", "helperTextProps", "value", "onChange", "valueFormat", "valueFormatOption", "fill", "success"];
 function _handleHelperColor$1(props, key) {
   var _props$key;
   if (props.error) return 'error.A100';
@@ -5004,7 +5092,7 @@ function _handleHelperColor$1(props, key) {
  * you can see TextField Documentation api that I mentioned below [here](https://mui.com/material-ui/api/text-field/)
  *
  * ```typescript
- *  import { TextField } from '@rabex-kit/core';
+ *  import { TextField } from '@rabex-kit/rabex-ui';
  *  ```
  *
  *
@@ -5014,7 +5102,7 @@ function _handleHelperColor$1(props, key) {
 var MuiTextFieldStyled = /*#__PURE__*/styled(MuiTextField, {
   name: 'MuiTextField',
   shouldForwardProp: function shouldForwardProp(prop) {
-    return !['titleProps', 'helperText', 'helperTextIcon', 'helperTextProps', 'helperTextEndAdornment', 'helperTextEndAdornmentProps', 'success', 'valueFormat', 'valueFormatOption'].includes(prop);
+    return !['titleProps', 'helperText', 'helperTextIcon', 'helperTextProps', 'helperTextEndAdornment', 'helperTextEndAdornmentProps', 'success', 'valueFormat', 'valueFormatOption', 'fill'].includes(prop);
   }
 })(function () {
   return {};
@@ -5054,7 +5142,7 @@ var TextField = function TextField(props) {
   };
   return React.createElement(Stack, {
     flexDirection: "column",
-    gap: 2,
+    gap: props.size === 'sm' ? 1 : 2,
     flexGrow: 1
   }, title && React.createElement(Typography, Object.assign({}, titleProps), title), React.createElement(MuiTextFieldStyled, Object.assign({}, other, {
     value: valueFormat ? _valueFormatHandler(value) : value,
@@ -5080,7 +5168,8 @@ var TextField = function TextField(props) {
 };
 TextField.defaultProps = {
   success: false,
-  size: 'medium',
+  fill: false,
+  size: 'md',
   titleProps: {
     variant: 'body2',
     weight: 'bold',
@@ -5618,7 +5707,7 @@ var _excluded$l = ["inputProps", "children"];
  * You can read Material-UI Button Documentation [here](https://mui.com/material-ui/api/Button/).
  *
  * ```typescript
- *  import { UploadButton } from '@rabex-kit/core';
+ *  import { UploadButton } from '@rabex-kit/rabex-ui';
  *  ```
  *
  *