@rabex-kit/rabex-ui 0.0.7 → 0.0.9

package/dist/rabex-ui.esm.js

@@ -125,7 +125,7 @@ import MuiZoom from '@mui/material/Zoom/Zoom.js';
  * you can see Accordion Documentation api that I mentioned below [here](https://mui.com/material-ui/api/accordion/)
  *
  * ```typescript
- *  import { Accordion } from '@rabex-kit/core';
+ *  import { Accordion } from '@rabex-kit/rabex-ui';
  *  ```
  *
  *
@@ -136,7 +136,7 @@ var Accordion = function Accordion(props) {
   return React.createElement(MuiAccordion, Object.assign({}, props));
 };
 Accordion.defaultProps = {
-  elevation: 1
+  elevation: 0
 };
 
 /**
@@ -1327,7 +1327,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
   return React.createElement(Stack, {
     flexDirection: "column",
-    gap: 2
+    gap: props.size === 'sm' ? 1 : 2
   }, title && React.createElement(Typography, Object.assign({
     color: mode === 'light' ? 'textColor.A80' : 'textColor.A30'
   }, titleProps), title), React.createElement(MuiInputStyled, Object.assign({
@@ -1338,7 +1338,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   })), helperText && React.createElement(Stack, {
     flexDirection: "row",
     justifyContent: "space-between"
-  }, React.createElement(Typography, Object.assign({}, helperTextProps, props.size === 'small' && {
+  }, React.createElement(Typography, Object.assign({}, helperTextProps, props.size === 'sm' && {
     variant: 'body3'
   }, {
     color: _handleHelperColor(props, 'helperTextProps')
@@ -1348,7 +1348,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       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, props.size === 'sm' && {
     variant: 'body3'
   }, {
     color: _handleHelperColor(props, 'helperTextEndAdornmentProps')
@@ -1357,7 +1357,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 Input.defaultProps = {
   success: false,
   hasBg: false,
-  size: 'medium',
+  size: 'md',
   disableUnderline: true,
   titleProps: {
     variant: 'body2',
@@ -3712,23 +3712,32 @@ var components$3 = {
         gap: spacing(1),
         transition: 'all 0.2s',
         padding: spacing(2.5, 3),
-        border: isLight ? "1px solid " + palette.textColor.A20 : "1px solid " + palette.secondary.A100,
-        backgroundColor: isLight ? palette.grayBackground.A20 : palette.secondary.A100,
+        border: isLight ? "1px solid " + palette.base[300] : "1px solid " + palette.secondary.A100,
+        backgroundColor: isLight
+        // ? palette.grayBackground.A20
+        ? 'transparent' : palette.secondary.A100,
         '&:hover': {
-          border: isLight ? "1px solid " + palette.textColor.A20 : "1px solid " + palette.base.A60,
-          backgroundColor: isLight ? palette.grayBackground.A20 : palette.base.A60
+          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
         },
         '&.Mui-focused': {
-          border: isLight ? "1px solid " + palette.primary.main : "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,
+          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.grayBackground.A40
+          ? palette.base[300] : palette.secondary.A100,
+          backgroundColor: isLight
+          // ? palette.grayBackground.A10
+          ? 'transparent' : palette.secondary.A100
         }
       };
     },
@@ -3752,36 +3761,79 @@ var components$3 = {
   },
   variants: [{
     props: {
-      size: 'small'
+      size: 'sm'
     },
     style: function style(_ref3) {
       var theme = _ref3.theme;
       return {
         fontSize: '14px',
-        padding: theme.spacing(1, 3)
+        padding: theme.spacing(1, 2)
       };
     }
   }, {
     props: {
-      size: 'large'
+      size: 'md'
     },
     style: function style(_ref4) {
       var theme = _ref4.theme;
       return {
-        fontSize: '16px',
-        padding: theme.spacing(3)
+        fontSize: '14px',
+        padding: theme.spacing(2)
       };
     }
   }, {
     props: {
-      hasBg: true
+      size: 'lg'
     },
     style: function style(_ref5) {
       var theme = _ref5.theme;
+      return {
+        fontSize: '14px',
+        padding: theme.spacing(3, 2)
+      };
+    }
+  }, {
+    props: {
+      size: 'xl'
+    },
+    style: function style(_ref6) {
+      var theme = _ref6.theme;
+      return {
+        fontSize: '16px',
+        padding: theme.spacing(3, 2)
+      };
+    }
+  }, {
+    props: {
+      hasBg: true
+    },
+    style: function style(_ref7) {
+      var theme = _ref7.theme;
       if (theme.palette.mode === 'light') {
+        var isLight = theme.palette.mode === 'light';
         return {
-          border: '1px solid transparent',
-          background: theme.palette.secondary.A80
+          // 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 {};
     }
@@ -3789,8 +3841,8 @@ var components$3 = {
     props: {
       success: true
     },
-    style: function style(_ref6) {
-      var palette = _ref6.theme.palette;
+    style: function style(_ref8) {
+      var palette = _ref8.theme.palette;
       return {
         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)
@@ -4038,21 +4090,37 @@ var RabexShadows = ['none', '0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 3px rg
 var RabexAccordion = {
   components: {
     styleOverrides: {
-      root: {
-        borderRadius: 12,
-        paddingX: 16,
-        paddingY: 12,
-        '&::before': {
-          display: 'none'
-        },
-        '&:first-of-type': {
-          borderTopRightRadius: 12,
-          borderTopLeftRadius: 12
-        },
-        '&:last-of-type': {
-          borderBottomRightRadius: 12,
-          borderBottomLeftRadius: 12
-        }
+      root: function root(_ref) {
+        var theme = _ref.theme;
+        return {
+          backgroundColor: theme.palette.base[100],
+          borderRadius: 12,
+          padding: theme.spacing(3.5, 4),
+          '&::before': {
+            display: 'none'
+          },
+          '&:first-of-type': {
+            borderTopRightRadius: 12,
+            borderTopLeftRadius: 12
+          },
+          '&:last-of-type': {
+            borderBottomRightRadius: 12,
+            borderBottomLeftRadius: 12
+          },
+          '& .MuiSvgIcon-root': {
+            height: 20,
+            width: 20,
+            '& path': {
+              fill: 'none'
+            }
+          },
+          '& .MuiAccordionSummary-root': {
+            minHeight: 16
+          },
+          '& .MuiAccordionSummary-content': {
+            margin: 0
+          }
+        };
       }
     }
   }