@rabex-kit/rabex-ui 0.1.22 → 0.1.23

package/dist/rabex-ui.esm.js

@@ -4,6 +4,7 @@ import MuiAccordionActions from '@mui/material/AccordionActions/AccordionActions
 import MuiAccordionSummary from '@mui/material/AccordionSummary/AccordionSummary.js';
 import MuiAlert from '@mui/material/Alert/Alert.js';
 import Stack$1 from '@mui/material/Stack/Stack.js';
+import useTheme from '@mui/material/styles/useTheme.js';
 import MuiTypography from '@mui/material/Typography/Typography.js';
 import useMediaQuery from '@mui/material/useMediaQuery/useMediaQuery.js';
 export { default as useMediaQuery } from '@mui/material/useMediaQuery/useMediaQuery.js';
@@ -35,7 +36,6 @@ 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';
@@ -218,7 +218,7 @@ function _objectWithoutPropertiesLoose(r, e) {
  * you can see Alert Documentation api that I mentioned below [here](https://mui.com/material-ui/api/alert/)
  *
  * ```typescript
- *  import { Alert } from '@rabex-kit/core';
+ *  import { Alert } from '@rabex-kit/rabex-ui';
  *  ```
  *
  *
@@ -531,7 +531,7 @@ var calculateTime = function calculateTime(time) {
 /**
  * this hook used for checking an element that is onScreen or not
  *
- * import { useOnScreen } from @rabex-kit/core/hooks'
+ * import { useOnScreen } from @rabex-kit/rabex-ui/hooks'
  *
  * @param ref
  * @returns
@@ -650,10 +650,13 @@ var AlertTimer = function AlertTimer(_ref) {
     timestamp = _ref.timestamp,
     onComplete = _ref.onComplete,
     _ref$isStart = _ref.isStart,
-    isStart = _ref$isStart === void 0 ? true : _ref$isStart;
+    isStart = _ref$isStart === void 0 ? true : _ref$isStart,
+    sx = _ref.sx;
   var _useTime = useTime(timestamp, isStart),
     time = _useTime.time,
     isComplete = _useTime.isComplete;
+  var _useTheme = useTheme(),
+    palette = _useTheme.palette;
   useEffect(function () {
     if (isComplete && onComplete) {
       onComplete();
@@ -665,25 +668,27 @@ var AlertTimer = function AlertTimer(_ref) {
     justifyContent: "space-between",
     mt: 1,
     width: "100%",
-    gap: 7
-  }, React.createElement(Typography, {
+    gap: 7,
+    sx: sx
+  }, children && React.createElement(Typography, {
     variant: 'body3',
-    weight: 'bold',
+    weight: 'semiBold',
     color: "textColor.A80"
   }, children), React.createElement(Stack$1, {
     flexDirection: "row",
     alignItems: "center",
-    height: 20,
+    py: 1,
+    height: 24,
     width: 76,
-    borderRadius: 3,
-    bgcolor: "base.A0",
+    borderRadius: 2,
+    bgcolor: palette.warning[200],
     pr: 3,
     gap: 1.5,
     justifyContent: "end",
     boxSizing: "border-box"
   }, React.createElement(Typography, {
     variant: 'body3',
-    weight: 'bold',
+    weight: 'semiBold',
     color: "textColor.A80",
     mt: 0.5
   }, time.minutes, ":", time.seconds), React.createElement(Stack$1, {
@@ -714,7 +719,7 @@ var AlertTimer = function AlertTimer(_ref) {
  * you can see AlertTitle Documentation api that I mentioned below [here](https://mui.com/material-ui/api/alert-title/)
  *
  * ```typescript
- *  import { AlertTitle } from '@rabex-kit/core';
+ *  import { AlertTitle } from '@rabex-kit/rabex-ui';
  *  ```
  *
  *
@@ -3105,21 +3110,14 @@ var RabexTabs = {
         return _extends({
           borderRadius: 8,
           minHeight: 'unset',
-          color: theme.palette.base.A10,
-          '& .MuiTab-root.Mui-selected': {
-            borderRadius: 4,
-            color: theme.palette.mode === 'light' ? theme.palette.textColor.A60 : theme.palette.textColor.A0
-          },
-          '& .MuiTabs-flexContainer': {
-            padding: theme.spacing(1)
-          }
+          color: theme.palette.base.A10
         }, ownerState.mode === 'underline' && {
           '& .MuiTab-root.Mui-selected': {
             borderRadius: 4,
             color: theme.palette.mode === 'light' ? theme.palette.textColor.A60 : theme.palette.textColor.A0
           },
           '& .MuiTabs-flexContainer': {
-            padding: theme.spacing(1)
+            // padding: theme.spacing(1)
           },
           backgroundColor: 'unset'
         }, ownerState.mode === 'pill' && {
@@ -3182,8 +3180,9 @@ var RabexTab = {
   components: {
     styleOverrides: {
       root: function root(_ref) {
-        var theme = _ref.theme;
-        return {
+        var theme = _ref.theme,
+          ownerState = _ref.ownerState;
+        return _extends({
           minWidth: 80,
           fontWeight: '600',
           color: theme.palette.mode === 'light' ? theme.palette.textColor.A60 : theme.palette.textColor.A40,
@@ -3191,6 +3190,17 @@ var RabexTab = {
           '&': {
             position: 'relative'
           },
+          minHeight: 'unset'
+        }, ownerState.size === 'sm' && {
+          fontSize: '12px',
+          minHeight: theme.spacing(3)
+        }, ownerState.size === 'md' && {
+          fontSize: '14px',
+          minHeight: theme.spacing(4)
+        }, ownerState.size === 'lg' && {
+          fontSize: '16px',
+          minHeight: theme.spacing(5)
+        }, {
           // '&.normal': {
           //   lineHeight: '20px',
           //   fontSize: '12px',
@@ -3224,7 +3234,7 @@ var RabexTab = {
           '& .MuiTab-iconWrapper': {
             fontSize: '14px'
           }
-        };
+        });
       }
     }
   }
@@ -4508,10 +4518,7 @@ var components$6 = {
         palette = _ref$theme.palette,
         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);
+        size = _ref$ownerState.size;
       var isLight = palette.mode === 'light';
       return {
         '& > div.MuiInputBase-root > fieldset': {
@@ -4577,7 +4584,6 @@ var components$6 = {
     },
     style: function style(_ref2) {
       var theme = _ref2.theme;
-      console.log('fill included');
       var isLight = theme.palette.mode === 'light';
       return {
         '& > div.MuiInputBase-root': {