@rabex-kit/rabex-ui 0.2.24 → 0.2.27

package/dist/rabex-ui.esm.js

@@ -3266,14 +3266,24 @@ var RabexTabs = {
           },
           backgroundColor: 'unset'
         } : {
-          '& .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)
+            gap: theme.spacing(2),
+            '& .MuiTab-root': {
+              borderRadius: theme.spacing(2),
+              backgroundColor: theme.palette.secondary[500],
+              color: theme.palette.textColor[900],
+              '&:hover': {
+                backgroundColor: theme.palette.primary[600],
+                color: theme.palette.textColor[50]
+              }
+            },
+            '& .MuiTab-root.Mui-selected': {
+              borderRadius: theme.spacing(2),
+              backgroundColor: theme.palette.primary[500],
+              color: theme.palette.textColor[50]
+            }
           },
-          backgroundColor: theme.palette.mode === 'light' ? theme.palette.secondary.A100 : theme.palette.secondary.A100
+          backgroundColor: 'transparent'
         };
         // Size-specific styles
         var sizeMap = mode === 'underline' ? {
@@ -3312,28 +3322,22 @@ var RabexTabs = {
           }
         } : {
           sm: {
-            '& .MuiTabs-fixed': {
-              padding: theme.spacing(1, 2),
-              marginBottom: theme.spacing(2)
-            },
-            height: theme.spacing(8),
-            borderRadius: theme.spacing(2)
+            '& .MuiTab-root': {
+              height: theme.spacing(8),
+              padding: theme.spacing(1, 3)
+            }
           },
           md: {
-            '& .MuiTabs-fixed': {
-              padding: theme.spacing(2, 4),
-              marginBottom: theme.spacing(2)
-            },
-            height: theme.spacing(10),
-            borderRadius: theme.spacing(2)
+            '& .MuiTab-root': {
+              height: theme.spacing(10),
+              padding: theme.spacing(2, 4)
+            }
           },
           lg: {
-            '& .MuiTabs-fixed': {
-              padding: theme.spacing(3, 4),
-              marginBottom: theme.spacing(3)
-            },
-            height: theme.spacing(12),
-            borderRadius: theme.spacing(3)
+            '& .MuiTab-root': {
+              height: theme.spacing(12),
+              padding: theme.spacing(3, 4)
+            }
           }
         };
         var sizeStyles = sizeMap[size || 'sm'] || sizeMap.sm;
@@ -3359,7 +3363,7 @@ var RabexTabs = {
           border: "2px dotted " + theme.palette.base.A40
         } : {};
         // Return combined styles
-        return _extends({}, baseStyles, modeStyles, sizeStyles, variantStyles, orientationStyles, borderStyles);
+        return _extends({}, baseStyles, modeStyles, variantStyles, sizeStyles, orientationStyles, borderStyles);
       },
       indicator: function indicator(_ref3) {
         var ownerState = _ref3.ownerState;
@@ -5933,7 +5937,7 @@ var Stepper = function Stepper(props) {
  * You can read Material-UI SwipeableDrawer Documentation [here](https://mui.com/material-ui/api/swipeable-drawer/).
  *
  * ```typescript
- *  import { SwipeableDrawer } from '@rabex-kit/core';
+ *  import { SwipeableDrawer } from '@rabex-kit/rabex-ui';
  *  ```
  * @param props
  * @returns
@@ -6105,30 +6109,32 @@ var SegmentedControl = /*#__PURE__*/styled(MuiTabs, {
     minHeight: 'unset',
     display: 'flex',
     backgroundColor: theme.palette.backgroundColor[200],
-    // padding: theme.spacing(1),
-    // '& .MuiTabs-root': {
-    //   padding: theme.spacing(1),
-    // },
+    padding: theme.spacing(0),
     '& .MuiTabs-fixed': {
-      padding: theme.spacing(0)
+      padding: theme.spacing(1)
     },
     '& .MuiTabs-flexContainer': {
-      gap: theme.spacing(1)
+      gap: theme.spacing(1),
+      '& .MuiTab-root.Mui-selected': {
+        backgroundColor: theme.palette.base[50],
+        color: theme.palette.textColor[900]
+      }
     }
   }, ownerState.size === 'sm' && {
     height: theme.spacing(8),
     borderRadius: theme.spacing(2),
-    '&.MuiTab-root': {
+    // padding: theme.spacing(1),
+    '& .MuiTab-root': {
       borderRadius: theme.spacing(1),
       height: theme.spacing(6),
       padding: theme.spacing(0, 3)
     },
-    '&.MuiTab-root.Mui-selected': {
-      color: 'inherit',
+    '& .MuiTab-root.Mui-selected': {
       borderRadius: theme.spacing(1),
       height: theme.spacing(6)
     }
   }, ownerState.size === 'md' && {
+    // padding: theme.spacing(1),
     height: theme.spacing(12),
     borderRadius: theme.spacing(3),
     '& .MuiTab-root': {
@@ -6137,11 +6143,13 @@ var SegmentedControl = /*#__PURE__*/styled(MuiTabs, {
       padding: theme.spacing(2, 3)
     },
     '& .MuiTab-root.Mui-selected': {
-      color: 'inherit',
+      // backgroundColor: theme.palette.base[50],
+      // color: theme.palette.textColor[900],
       borderRadius: theme.spacing(2),
       height: theme.spacing(10)
     }
   }, ownerState.size === 'lg' && {
+    // padding: theme.spacing(1),
     height: theme.spacing(14),
     borderRadius: theme.spacing(3),
     '& .MuiTab-root': {
@@ -6150,7 +6158,8 @@ var SegmentedControl = /*#__PURE__*/styled(MuiTabs, {
       padding: theme.spacing(3, 4)
     },
     '& .MuiTab-root.Mui-selected': {
-      color: 'inherit',
+      // backgroundColor: theme.palette.base[50],
+      // color: theme.palette.textColor[900],
       borderRadius: theme.spacing(2),
       height: theme.spacing(12)
     }