@rabex-kit/rabex-ui 0.1.41 → 0.1.47

package/dist/rabex-ui.esm.js

@@ -1262,15 +1262,14 @@ var Grid = function Grid(_ref) {
 var IconButton = /*#__PURE__*/styled(MuiIconButton, {
   name: 'MuiIconButton',
   shouldForwardProp: function shouldForwardProp(prop) {
-    return !['hasBg', 'disableOpacity'].includes(prop.toString());
+    return prop !== 'hasBg';
   }
 })(function () {
   return {};
 });
 IconButton.defaultProps = {
   variant: 'circular',
-  hasBg: false,
-  disableOpacity: false
+  hasBg: false
 };
 
 function _handleHelperColor(props, key) {
@@ -3882,105 +3881,6 @@ var RabexIconButton = {
           }
         };
       }
-    }, {
-      props: {
-        disableOpacity: true
-      },
-      style: function style() {
-        return {
-          color: 'inherit'
-        };
-      }
-    }, {
-      props: {
-        size: 'xs'
-      },
-      style: function style(_ref3) {
-        var theme = _ref3.theme;
-        return {
-          '& svg': {
-            fontSize: '16px',
-            width: '16px',
-            height: '16px'
-          },
-          height: '24px',
-          width: '24px',
-          padding: theme.spacing(1),
-          borderRadius: theme.spacing(1)
-        };
-      }
-    }, {
-      props: {
-        size: 'sm'
-      },
-      style: function style(_ref4) {
-        var theme = _ref4.theme;
-        return {
-          '& svg': {
-            fontSize: '16px',
-            width: '16px',
-            height: '16px'
-          },
-          height: '32',
-          width: '32',
-          padding: theme.spacing(2),
-          borderRadius: theme.spacing(2)
-        };
-      }
-    }, {
-      props: {
-        size: 'md'
-      },
-      style: function style(_ref5) {
-        var theme = _ref5.theme;
-        return {
-          '& svg': {
-            fontSize: '24px',
-            width: '24px',
-            height: '24px'
-          },
-          height: '40px',
-          width: '40px',
-          padding: theme.spacing(2),
-          borderRadius: theme.spacing(2)
-        };
-      }
-    }, {
-      props: {
-        size: 'lg'
-      },
-      style: function style(_ref6) {
-        var theme = _ref6.theme;
-        return {
-          '& svg': {
-            fontSize: '24px',
-            width: '24px',
-            height: '24px'
-          },
-          height: '48px',
-          width: '48px',
-          padding: theme.spacing(3),
-          borderRadius: theme.spacing(2)
-        };
-      }
-    }, {
-      props: {
-        size: 'xl'
-      },
-      style: function style(_ref7) {
-        var theme = _ref7.theme;
-        return {
-          '& svg': {
-            fontSize: '24px',
-            width: '24px',
-            height: '24px'
-          },
-          height: '56px',
-          width: '56px',
-          borderRadius: theme.spacing(2),
-          padding: theme.spacing(4)
-        };
-      }
     }]
   }
 };
@@ -4703,89 +4603,126 @@ var components$6 = {
     root: function root(_ref) {
       var _ref$theme = _ref.theme,
         palette = _ref$theme.palette,
-        spacing = _ref$theme.spacing,
-        _ref$ownerState = _ref.ownerState,
-        size = _ref$ownerState.size;
+        spacing = _ref$theme.spacing;
       var isLight = palette.mode === 'light';
       return {
-        '& > div.MuiInputBase-root > fieldset': {
-          border: 0
+        '& .MuiOutlinedInput-notchedOutline': {
+          border: 'none'
         },
-        '& > div.MuiInputBase-root': _extends({
+        '& .MuiInputBase-root': {
           borderRadius: '8px',
           gap: spacing(1),
           transition: 'all 0.2s',
           padding: spacing(2.5, 3),
-          border: isLight ? "1px solid " + palette.grayBackground.A40 : "1px solid " + palette.secondary.A100,
-          backgroundColor: isLight ? palette.base.A0 : palette.secondary.A100,
+          border: isLight ? "1px solid " + palette.base[300] : "1px solid " + palette.secondary.A100,
+          backgroundColor: isLight ? 'transparent' : palette.secondary.A100,
           '&:hover': {
-            border: isLight ? "1px solid " + palette.grayBackground.A40 : "1px solid " + palette.base.A60,
-            backgroundColor: isLight ? palette.base.A0 : palette.base.A60
+            border: isLight ? "1px solid " + palette.base[600] : "1px solid " + palette.base.A60,
+            backgroundColor: isLight ? 'transparent' : palette.base.A60
           },
           '&.Mui-focused': {
-            border: isLight ? "1px solid " + palette.primary.A100 : "1px solid " + palette.primary.A80,
-            backgroundColor: isLight ? palette.base.A0 : palette.base.A60
+            border: isLight ? "1.5px solid " + palette.primary[500] : "1px solid " + palette.primary.A80
           },
           '&.Mui-error': {
-            border: isLight ? "1px solid " + palette.error.A100 : "1px solid " + palette.error.A60,
-            backgroundColor: isLight ? palette.error.A20 : alpha(palette.error.A100 || '', 0.1)
+            border: isLight ? "1.5px solid " + palette.error[400] : "1px solid " + palette.error.A60,
+            backgroundColor: isLight ? palette.base.A0 : alpha(palette.error.A100 || '', 0.1)
           },
           '&.Mui-disabled': {
-            borderColor: isLight ? palette.grayBackground.A40 : palette.secondary.A100,
-            backgroundColor: isLight ? palette.grayBackground.A10 : palette.secondary.A100
+            borderColor: isLight ? palette.base[300] : palette.secondary.A100,
+            backgroundColor: isLight ? 'transparent' : palette.secondary.A100
+          }
+        },
+        '& .MuiInputBase-input': {
+          color: isLight ? palette.textColor.A80 : palette.textColor.A0,
+          padding: spacing(0),
+          '&.Mui-disabled': {
+            WebkitTextFillColor: isLight ? palette.textColor.A40 : palette.textColor.A50
           },
-          '&:-webkit-autofill': {}
-        }, size === 'sm' && {
+          '&::placeholder': {
+            opacity: 1,
+            color: isLight ? palette.textColor.A40 : palette.textColor.A30
+          }
+        }
+      };
+    }
+  },
+  variants: [{
+    props: {
+      size: 'sm'
+    },
+    style: function style(_ref2) {
+      var theme = _ref2.theme;
+      return {
+        '& .MuiInputBase-root': {
+          height: '32px',
           fontSize: '14px',
           lineHeight: '24px',
-          padding: spacing(1, 3)
-        }, size === 'md' && {
+          padding: theme.spacing(1, 3)
+        }
+      };
+    }
+  }, {
+    props: {
+      size: 'md'
+    },
+    style: function style(_ref3) {
+      var theme = _ref3.theme;
+      return {
+        '& .MuiInputBase-root': {
+          height: '40px',
           fontSize: '14px',
           lineHeight: '24px',
-          padding: spacing(2, 3)
-        }, size === 'lg' && {
+          padding: theme.spacing(2, 3)
+        }
+      };
+    }
+  }, {
+    props: {
+      size: 'lg'
+    },
+    style: function style(_ref4) {
+      var theme = _ref4.theme;
+      return {
+        '& .MuiInputBase-root': {
+          height: '48px',
           fontSize: '14px',
           lineHeight: '24px',
-          padding: spacing(3)
-        }, size === 'xl' && {
+          padding: theme.spacing(3)
+        }
+      };
+    }
+  }, {
+    props: {
+      size: 'xl'
+    },
+    style: function style(_ref5) {
+      var theme = _ref5.theme;
+      return {
+        '& .MuiInputBase-root': {
+          height: '48px',
           fontSize: '16px',
           lineHeight: '24px',
-          padding: spacing(3)
-        }),
-        '& > div.MuiInputBase-root > input.MuiInputBase-input': {
-          color: isLight ? palette.textColor.A80 : palette.textColor.A0,
-          padding: spacing(0),
-          '&.Mui-disabled': {
-            textFillColor: isLight ? palette.textColor.A40 : palette.textColor.A50
-          }
-        },
-        '& > div.MuiInputBase-root > input.MuiInputBase-input.Mui-disabled': {
-          textFillColor: isLight ? palette.textColor.A40 : palette.textColor.A50
+          padding: theme.spacing(3)
         }
       };
     }
-  },
-  variants: [{
+  }, {
     props: {
       fill: true
     },
-    style: function style(_ref2) {
-      var theme = _ref2.theme;
+    style: function style(_ref6) {
+      var theme = _ref6.theme;
       var isLight = theme.palette.mode === 'light';
       return {
-        '& > div.MuiInputBase-root': {
-          // border: `1px solid ${theme.palette.base[600]}`,
+        '& .MuiInputBase-root': {
           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
+            border: isLight ? "1px solid " + theme.palette.base[600] : "1px solid " + theme.palette.base.A60,
+            backgroundColor: isLight ? 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,
@@ -4802,15 +4739,41 @@ var components$6 = {
     props: {
       success: true
     },
-    style: function style(_ref3) {
-      var palette = _ref3.theme.palette;
+    style: function style(_ref7) {
+      var palette = _ref7.theme.palette;
       return {
-        '& > div.MuiInputBase-root': {
+        '& .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)
         }
       };
     }
+  }, {
+    props: {
+      size: 'small'
+    },
+    style: function style(_ref8) {
+      var theme = _ref8.theme;
+      return {
+        '& .MuiInputBase-root': {
+          fontSize: '14px',
+          padding: theme.spacing(1, 3)
+        }
+      };
+    }
+  }, {
+    props: {
+      size: 'medium'
+    },
+    style: function style(_ref9) {
+      var theme = _ref9.theme;
+      return {
+        '& .MuiInputBase-root': {
+          fontSize: '16px',
+          padding: theme.spacing(3)
+        }
+      };
+    }
   }]
 };
 var RabexTextField = {
@@ -5252,7 +5215,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", "fullWidth"];
 function _handleHelperColor$1(props, key) {
   var _props$key;
   if (props.error) return 'error.A100';
@@ -5262,11 +5225,18 @@ function _handleHelperColor$1(props, key) {
 /**
  * The TextField let users enter and edit text.
  *
- * you can see TextField Documentation api that I mentioned below [here](https://mui.com/material-ui/api/text-field/)
+ * This is a custom wrapper component made of Material-UI TextField.
  *
- * ```typescript
+ * TextField includes all the functionality of Input but adds integrated labels,
+ * built-in validation states, and multiline support.
+ *
+ * You can read Material-UI TextField Documentation [here](https://mui.com/material-ui/api/text-field/)
+ *
+ *
+typescript
  *  import { TextField } from '@rabex-kit/rabex-ui';
- *  ```
+ *
+
  *
  *
  * @param props
@@ -5293,6 +5263,7 @@ var TextField = function TextField(props) {
     onChange = _ref.onChange,
     valueFormat = _ref.valueFormat,
     valueFormatOption = _ref.valueFormatOption,
+    fullWidth = _ref.fullWidth,
     other = _objectWithoutPropertiesLoose(_ref, _excluded$i);
   if (!valueFormat && !!valueFormatOption) {
     console.warn("'valueFormatOption' Only Work With known 'valueFormat's...");
@@ -5316,14 +5287,16 @@ var TextField = function TextField(props) {
   return React.createElement(Stack, {
     flexDirection: "column",
     gap: props.size === 'sm' ? 1 : 2,
-    flexGrow: 1
-  }, title && React.createElement(Typography, Object.assign({}, titleProps), title), React.createElement(MuiTextFieldStyled, Object.assign({}, other, {
+    width: fullWidth ? '100%' : 'unset'
+  }, title && React.createElement(Typography, Object.assign({
+    color: other.disabled ? 'textColor.A40' : 'textColor.A80'
+  }, titleProps), title), React.createElement(MuiTextFieldStyled, Object.assign({}, other, {
     value: valueFormat ? _valueFormatHandler(value) : value,
     onChange: valueFormat ? _onChangeFormatHandler : onChange
   })), helperText && React.createElement(Stack, {
     flexDirection: "row",
     justifyContent: "space-between"
-  }, React.createElement(Typography, Object.assign({}, helperTextProps, {
+  }, React.createElement(Typography, Object.assign({}, helperTextProps, props.size === 'sm' && {
     variant: 'body3'
   }, {
     color: _handleHelperColor$1(props, 'helperTextProps')
@@ -5333,7 +5306,7 @@ var TextField = function TextField(props) {
       alignItems: 'center',
       gap: 1
     }
-  }), helperTextIcon && helperTextIcon, helperText), helperTextEndAdornment && React.createElement(Typography, Object.assign({}, helperTextEndAdornmentProps, {
+  }), helperTextIcon && helperTextIcon, helperText), helperTextEndAdornment && React.createElement(Typography, Object.assign({}, helperTextEndAdornmentProps, props.size === 'sm' && {
     variant: 'body3'
   }, {
     color: _handleHelperColor$1(props, 'helperTextEndAdornmentProps')
@@ -5343,10 +5316,10 @@ TextField.defaultProps = {
   success: false,
   fill: false,
   size: 'md',
+  variant: 'outlined',
   titleProps: {
     variant: 'body2',
-    weight: 'bold',
-    color: 'textColor.A80'
+    weight: 'regular'
   },
   helperTextProps: {
     variant: 'body3',