@rabex-kit/rabex-ui 0.1.19 → 0.1.21

package/dist/rabex-ui.esm.js

@@ -3806,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
@@ -3825,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
         }
       };
     },
@@ -3848,7 +3847,8 @@ var components$3 = {
         '&::.placeholder': {
           opacity: 1,
           color: isLight ? palette.textColor.A40 : palette.textColor.A30
-        }
+        },
+        '&:-webkit-autofill': {}
       };
     }
   },
@@ -3860,6 +3860,7 @@ var components$3 = {
       var theme = _ref3.theme;
       return {
         fontSize: '14px',
+        lineHeight: '24px',
         padding: theme.spacing(1, 3)
       };
     }
@@ -3871,6 +3872,7 @@ var components$3 = {
       var theme = _ref4.theme;
       return {
         fontSize: '14px',
+        lineHeight: '24px',
         padding: theme.spacing(2, 3)
       };
     }
@@ -3882,6 +3884,7 @@ var components$3 = {
       var theme = _ref5.theme;
       return {
         fontSize: '14px',
+        lineHeight: '24px',
         padding: theme.spacing(3)
       };
     }
@@ -3893,6 +3896,7 @@ var components$3 = {
       var theme = _ref6.theme;
       return {
         fontSize: '16px',
+        lineHeight: '24px',
         padding: theme.spacing(3)
       };
     }
@@ -3902,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: {
@@ -4505,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',
@@ -4533,8 +4539,25 @@ 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)
+        }),
         '& > div.MuiInputBase-root > input.MuiInputBase-input': {
           color: isLight ? palette.textColor.A80 : palette.textColor.A0,
           padding: spacing(0),
@@ -4547,7 +4570,55 @@ var components$6 = {
         }
       };
     }
-  }
+  },
+  variants: [{
+    props: {
+      fill: true
+    },
+    style: function style(_ref2) {
+      var theme = _ref2.theme;
+      console.log('fill included');
+      var isLight = theme.palette.mode === 'light';
+      return {
+        '& > div.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 {
+        '& > div.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
@@ -4770,7 +4841,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';
  *  ```
  *
  *
@@ -5001,7 +5072,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';
  *  ```
  *
  *
@@ -5011,7 +5082,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 !['fill', 'success', 'titleProps', 'helperText', 'helperTextIcon', 'helperTextProps', 'helperTextEndAdornment', 'helperTextEndAdornmentProps', 'valueFormat', 'valueFormatOption'].includes(prop);
   }
 })(function () {
   return {};
@@ -5051,7 +5122,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,
@@ -5059,7 +5130,7 @@ var TextField = function TextField(props) {
   })), helperText && React.createElement(Stack, {
     flexDirection: "row",
     justifyContent: "space-between"
-  }, React.createElement(Typography, Object.assign({}, helperTextProps, props.size === 'small' && {
+  }, React.createElement(Typography, Object.assign({}, helperTextProps, {
     variant: 'body3'
   }, {
     color: _handleHelperColor$1(props, 'helperTextProps')
@@ -5069,7 +5140,7 @@ var TextField = function TextField(props) {
       alignItems: 'center',
       gap: 1
     }
-  }), helperTextIcon && helperTextIcon, helperText), helperTextEndAdornment && React.createElement(Typography, Object.assign({}, helperTextEndAdornmentProps, props.size === 'small' && {
+  }), helperTextIcon && helperTextIcon, helperText), helperTextEndAdornment && React.createElement(Typography, Object.assign({}, helperTextEndAdornmentProps, {
     variant: 'body3'
   }, {
     color: _handleHelperColor$1(props, 'helperTextEndAdornmentProps')
@@ -5077,18 +5148,19 @@ var TextField = function TextField(props) {
 };
 TextField.defaultProps = {
   success: false,
-  size: 'medium',
+  fill: false,
+  size: 'md',
   titleProps: {
     variant: 'body2',
     weight: 'bold',
     color: 'textColor.A80'
   },
   helperTextProps: {
-    variant: 'body2',
+    variant: 'body3',
     color: 'textColor.A60'
   },
   helperTextEndAdornmentProps: {
-    variant: 'body2',
+    variant: 'body3',
     color: 'textColor.A60'
   }
 };
@@ -5615,7 +5687,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';
  *  ```
  *
  *