@rabex-kit/rabex-ui 0.0.3 → 0.0.6

package/dist/rabex-ui.esm.js

@@ -898,6 +898,13 @@ var Checkbox = function Checkbox(_ref) {
   }));
 };
 
+var _excluded$4 = ["label", "size", "mode"];
+var getTypography = function getTypography(size, mode) {
+  return {
+    variant: size === 'sm' ? 'body3' : 'body4',
+    weight: size === 'xs' ? 'regular' : mode === 'normal' ? 'regular' : 'semiBold'
+  };
+};
 /**
  * Chip component of Material is somthing like Badge ,
  * Material Ui Chip is wrapper for content that has
@@ -905,26 +912,43 @@ var Checkbox = function Checkbox(_ref) {
  * you can see Chip Documentation api that I mentioned below [here](https://mui.com/material-ui/api/chip)
  *
  * ```typescript
- *  import { Chip } from '@rabex-kit/core';
+ *  import { Chip } from '@rabex-kit/rabex-ui';
  *  ```
  *
  *
  * @param props
  * @returns
  */
-var Chip = /*#__PURE__*/styled(MuiChip, {
+var StyledChip = /*#__PURE__*/styled(MuiChip, {
   name: 'MuiChip',
   shouldForwardProp: function shouldForwardProp(prop) {
-    return !['hasBullet', 'bulletColor', 'labelColor'].includes(prop);
+    return !['hasBullet', 'bulletColor', 'labelColor', 'iconPosition', 'leadingIcon', 'trailingIcon'].includes(prop);
   }
 })(function () {
   return {};
 });
+var Chip = function Chip(props) {
+  var label = props.label,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'sm' : _props$size,
+    _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'normal' : _props$mode,
+    other = _objectWithoutPropertiesLoose(props, _excluded$4);
+  return React.createElement(StyledChip, Object.assign({
+    label: React.createElement(Typography, {
+      variant: getTypography(size, mode).variant,
+      weight: getTypography(size, mode).weight
+    }, label),
+    size: size,
+    mode: mode
+  }, other));
+};
 Chip.defaultProps = {
   hasBullet: false,
   mode: 'normal',
-  size: 'medium',
-  color: 'default'
+  size: 'sm',
+  color: 'default',
+  variant: 'filled'
 };
 
 /**
@@ -1026,7 +1050,7 @@ var Drawer = function Drawer(props) {
   return React.createElement(MuiDrawer, Object.assign({}, props));
 };
 
-var _excluded$4 = ["widthPercent", "bgColor", "align"];
+var _excluded$5 = ["widthPercent", "bgColor", "align"];
 /**
  *
  * DynamicBackground is a wrapper for adding background
@@ -1040,7 +1064,7 @@ var DynamicBackground = function DynamicBackground(_ref) {
     widthPercent = _ref$widthPercent === void 0 ? 0 : _ref$widthPercent,
     bgColor = _ref.bgColor,
     align = _ref.align,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   var calcPercent = widthPercent < 100 ? widthPercent : 100;
   return React.createElement(Box, Object.assign({
     width: calcPercent + "%",
@@ -1083,10 +1107,10 @@ var Stack = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, props));
 });
 
-var _excluded$5 = ["sx"];
+var _excluded$6 = ["sx"];
 var DynamicBackgroundContainer = function DynamicBackgroundContainer(_ref) {
   var sx = _ref.sx,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   return React.createElement(Stack, Object.assign({
     sx: _extends({
       position: 'relative',
@@ -1115,7 +1139,7 @@ var FormControl = function FormControl(_ref) {
   return React.createElement(MuiFormControl, Object.assign({}, props));
 };
 
-var _excluded$6 = ["error"];
+var _excluded$7 = ["error"];
 /**
  * The name MuiFormControlLabel can be used when providing default props or style overrides in the theme.
  * Drop-in replacement of the Radio, Switch and Checkbox component. Use this component if you want to display an extra label.
@@ -1133,7 +1157,7 @@ var _excluded$6 = ["error"];
  */
 var FormControlLabel = function FormControlLabel(_ref) {
   var error = _ref.error,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   return React.createElement(MuiFormControlLabel, Object.assign({}, props, {
     classes: {
       root: CN({
@@ -1625,7 +1649,7 @@ Paper.defaultProps = {
   elevation: 1
 };
 
-var _excluded$7 = ["error"];
+var _excluded$8 = ["error"];
 /**
  * Radio buttons allow the user to select one option from a set.
  *
@@ -1642,7 +1666,7 @@ var _excluded$7 = ["error"];
  */
 var Radio = function Radio(_ref) {
   var error = _ref.error,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   return React.createElement(MuiRadio, Object.assign({}, props, {
     classes: {
       root: CN({
@@ -1760,7 +1784,7 @@ Slider.defaultProps = {
   size: 'medium'
 };
 
-var _excluded$8 = ["sx"],
+var _excluded$9 = ["sx"],
   _excluded2 = ["sx", "className"];
 /**
  * SliderComponent is displayed in minimized way.
@@ -1847,7 +1871,7 @@ var SliderContent = function SliderContent(_ref) {
   };
   var _ref2 = containerProps || {},
     containerSx = _ref2.sx,
-    otherContainer = _objectWithoutPropertiesLoose(_ref2, _excluded$8);
+    otherContainer = _objectWithoutPropertiesLoose(_ref2, _excluded$9);
   var _ref3 = itemsProps || {},
     itemSx = _ref3.sx,
     itemClassName = _ref3.className,
@@ -1936,10 +1960,10 @@ var SvgIcon = function SvgIcon(_ref) {
   return React.createElement(MuiSvgIcon, Object.assign({}, props));
 };
 
-var _excluded$9 = ["size"];
+var _excluded$a = ["size"];
 var Tab = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var size = _ref.size,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   return React.createElement(MuiTab, Object.assign({
     ref: ref,
     classes: {
@@ -2091,7 +2115,7 @@ var TableSortLabel = function TableSortLabel(props) {
   return React.createElement(MuiTableSortLabel, Object.assign({}, props));
 };
 
-var _excluded$a = ["theme"],
+var _excluded$b = ["theme"],
   _excluded2$1 = ["variant", "border", "sx"];
 var Wrapper = /*#__PURE__*/styled(Stack, {
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -2099,7 +2123,7 @@ var Wrapper = /*#__PURE__*/styled(Stack, {
   }
 })(function (_ref) {
   var theme = _ref.theme,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   return {
     '&>.table-row': {
       display: 'grid',
@@ -2148,7 +2172,7 @@ RTable.defaultProps = {
   variant: 'default'
 };
 
-var _excluded$b = ["className"];
+var _excluded$c = ["className"];
 /**
  * API documentation for the React TableHead component. Learn about the available props and the CSS API.
  *
@@ -2162,7 +2186,7 @@ var _excluded$b = ["className"];
  */
 var RTableHead = function RTableHead(_ref) {
   var className = _ref.className,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   return React.createElement(Stack, Object.assign({
     p: 4,
     className: "table-row " + className
@@ -2174,7 +2198,7 @@ RTableHead.defaultProps = {
   className: ''
 };
 
-var _excluded$c = ["className"];
+var _excluded$d = ["className"];
 /**
  * API documentation for the React TableRow component. Learn about the available props and the CSS API.
  *
@@ -2188,7 +2212,7 @@ var _excluded$c = ["className"];
  */
 var RTableRow = function RTableRow(_ref) {
   var className = _ref.className,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   return React.createElement(Stack, Object.assign({
     p: 4,
     className: "table-row " + className
@@ -2218,13 +2242,13 @@ var TabPanel = function TabPanel(_ref) {
  * You can read Material-UI Tabs Documentation [here](https://mui.com/material-ui/api/tabs/).
  *
  * ```typescript
- *  import { Tabs } from '@rabex-kit/core';
+ *  import { Tabs } from '@rabex-kit/rabex-ui';
  *  ```
  *
  * Also you can read Material-UI Tab Documentation [here](https://mui.com/material-ui/api/tab/).
  *
  * ```typescript
- *  import { Tab } from '@rabex-kit/core';
+ *  import { Tab } from '@rabex-kit/rabex-ui';
  *  ```
  *
  *
@@ -2298,7 +2322,9 @@ var RabexTypography = {
         smallButton: 'span',
         helperText: 'span',
         inputLabel2: 'span',
-        body4: 'span'
+        body4: 'span',
+        body5: 'span',
+        paragraph: 'span'
       }
     }
   },
@@ -2396,6 +2422,16 @@ var RabexTypography = {
       fontSize: '10px',
       lineHeight: '16px',
       fontFamily: 'Yekan, Arial'
+    },
+    body5: {
+      fontSize: '12px',
+      lineHeight: '24px',
+      fontFamily: 'Yekan, Arial'
+    },
+    paragraph: {
+      fontSize: '12px',
+      lineHeight: '24px',
+      fontFamily: 'Yekan, Arial'
     }
   }
 };
@@ -2737,6 +2773,7 @@ var RabexLightPalette = /*#__PURE__*/_extends({}, base, {
     50: '#FCFEFF'
   },
   backgroundColor: {
+    main: '#16181F',
     950: '#16181F',
     900: '#333640',
     800: '#3A3A3D',
@@ -2766,7 +2803,7 @@ var RabexLightPalette = /*#__PURE__*/_extends({}, base, {
   warning: {
     400: '#E8A700',
     300: '#FFD200',
-    200: '#FFD200',
+    200: '#FCE7A4',
     100: '#FCF3D6',
     50: '#FFF9E5',
     contrastText: '#FFF',
@@ -2796,7 +2833,7 @@ var RabexLightPalette = /*#__PURE__*/_extends({}, base, {
     300: '#848EF5',
     200: '#9CA4FF',
     100: '#D9DCFF',
-    50: '#FFEBEC',
+    50: '#EDEFFF',
     contrastText: '#FFF',
     main: '#717BEB',
     A100: '#717BEB',
@@ -2829,6 +2866,16 @@ var RabexLightPalette = /*#__PURE__*/_extends({}, base, {
     A0: '#FFFFFF'
   },
   base: {
+    900: '#333640',
+    800: '#3A3A3D',
+    700: '#666666',
+    600: '#58667E',
+    500: '#808A9D',
+    400: '#A6B0C3',
+    300: '#CFD6E4',
+    200: '#EFF2F5',
+    100: '#F8FAFD',
+    50: '#FFFFFF',
     main: '#222531',
     A100: '#222531',
     A80: '#333640',
@@ -2934,6 +2981,33 @@ var RabexDarkPalette = /*#__PURE__*/_extends({}, base, {
     A20: '#A7A8AD',
     A10: '#ADAEB5',
     A0: '#FFFFFF'
+  },
+  neutral: {
+    950: '#10164A',
+    900: '#273073',
+    800: '#455099',
+    700: '#6B78BF',
+    600: '#9CA8E6',
+    500: '#BFCAFF',
+    400: '#D4E0FF',
+    300: '#E6F0FF',
+    200: '#F0F7FF',
+    100: '#FAFDFF',
+    50: '#FCFEFF'
+  },
+  backgroundColor: {
+    main: '#16181F',
+    950: '#16181F',
+    900: '#333640',
+    800: '#3A3A3D',
+    700: '#666666',
+    600: '#58667E',
+    500: '#808A9D',
+    400: '#A6B0C3',
+    300: '#CFD6E4',
+    200: '#EFF2F5',
+    100: '#F8FAFD',
+    50: '#FFFFFF'
   }
 });
 
@@ -3063,119 +3137,203 @@ var RabexTab = {
   }
 };
 
-var _excluded$d = ["theme", "ownerState"],
+var _excluded$e = ["theme", "ownerState"],
   _excluded2$2 = ["theme"],
   _excluded3 = ["theme"],
   _excluded4 = ["theme"],
   _excluded5 = ["theme"],
   _excluded6 = ["theme"],
   _excluded7 = ["theme"],
-  _excluded8 = ["theme"],
-  _excluded9 = ["theme"],
-  _excluded10 = ["theme"],
-  _excluded11 = ["theme"],
-  _excluded12 = ["theme", "ownerState"];
-var ReduxChip = {
-  components: {
-    styleOverrides: {
-      root: function root(_ref) {
-        var theme = _ref.theme;
-        return {
-          display: 'inline-flex',
-          gap: theme.spacing(1.5),
-          borderRadius: 6,
-          fontWeight: 600,
-          fontSize: 14
-        };
+  _excluded8 = ["theme", "ownerState"];
+var colorModeConfig = function colorModeConfig(theme) {
+  return {
+    "default": {
+      normal: {
+        color: theme.palette.textColor[50],
+        backgroundColor: theme.palette.backgroundColor[900]
       },
-      label: function label(_ref2) {
-        var theme = _ref2.theme;
-        return {
-          overflow: 'visible',
-          position: 'relative',
-          padding: theme.spacing(0)
-        };
+      light: {
+        color: theme.palette.backgroundColor[900],
+        backgroundColor: theme.palette.backgroundColor[200]
       }
     },
-    variants: [{
-      props: {
-        variant: 'default'
+    warning: {
+      normal: {
+        color: theme.palette.textColor[900],
+        backgroundColor: theme.palette.warning[200]
       },
-      style: function style(_ref3) {
-        var theme = _ref3.theme,
-          ownerState = _ref3.ownerState,
-          rest = _objectWithoutPropertiesLoose(_ref3, _excluded$d);
-        return {
-          border: 'unset',
-          backgroundColor: 'unset',
-          color: ownerState !== null && ownerState !== void 0 && ownerState.labelColor ? ownerState === null || ownerState === void 0 ? void 0 : ownerState.labelColor : theme.palette.textColor.A60
-        };
+      light: {
+        color: theme.palette.textColor[900],
+        backgroundColor: theme.palette.warning[50],
+        border: "1px solid " + theme.palette.warning[200]
       }
-    }, {
-      props: {
-        variant: 'filled',
-        mode: 'normal'
+    },
+    info: {
+      normal: {
+        color: theme.palette.textColor[50],
+        backgroundColor: theme.palette.primary[500]
       },
-      style: function style(_ref4) {
-        var _theme$palette$ownerS;
-        var theme = _ref4.theme,
-          ownerState = _objectWithoutPropertiesLoose(_ref4, _excluded2$2);
-        return {
-          color: ownerState !== null && ownerState !== void 0 && ownerState.labelColor ? ownerState === null || ownerState === void 0 ? void 0 : ownerState.labelColor : theme.palette.base.A0,
-          backgroundColor: (_theme$palette$ownerS = theme.palette[ownerState === null || ownerState === void 0 ? void 0 : ownerState.color]) === null || _theme$palette$ownerS === void 0 ? void 0 : _theme$palette$ownerS.A100
-        };
+      light: {
+        color: theme.palette.primary[500],
+        backgroundColor: theme.palette.info[50],
+        border: "1px solid " + theme.palette.info[200]
       }
-    }, {
-      props: {
-        variant: 'filled',
-        mode: 'normal',
-        color: 'secondary'
+    },
+    primary: {
+      normal: {
+        color: theme.palette.textColor[50],
+        backgroundColor: theme.palette.primary[500]
       },
-      style: function style(_ref5) {
-        var _theme$palette$base;
-        var theme = _ref5.theme,
-          ownerState = _objectWithoutPropertiesLoose(_ref5, _excluded3);
+      light: {
+        color: theme.palette.primary[500],
+        backgroundColor: theme.palette.info[50],
+        border: "1px solid " + theme.palette.info[200]
+      }
+    },
+    error: {
+      normal: {
+        color: theme.palette.textColor[50],
+        backgroundColor: theme.palette.error[400]
+      },
+      light: {
+        color: theme.palette.error[400],
+        backgroundColor: theme.palette.error[50],
+        border: "1px solid " + theme.palette.error[200]
+      }
+    },
+    success: {
+      normal: {
+        color: theme.palette.textColor[50],
+        backgroundColor: theme.palette.success[400]
+      },
+      light: {
+        color: theme.palette.success[400],
+        backgroundColor: theme.palette.success[50],
+        border: "1px solid " + theme.palette.success[200]
+      }
+    }
+  };
+};
+var chipStyles = function chipStyles(theme, ownerState) {
+  var _theme$palette$ownerS;
+  var baseStyles = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+    borderRadius: theme.spacing(1)
+  };
+  var sizeStyles = {
+    sm: {
+      height: theme.spacing(6),
+      padding: theme.spacing(1, 2)
+    },
+    xs: {
+      height: theme.spacing(4),
+      padding: theme.spacing(0, 1)
+    }
+  };
+  var variantStyles = {
+    filled: {
+      backgroundColor: ownerState !== null && ownerState !== void 0 && ownerState.color ? colorModeConfig(theme)[(ownerState === null || ownerState === void 0 ? void 0 : ownerState.color) || 'default'][(ownerState === null || ownerState === void 0 ? void 0 : ownerState.mode) || 'normal'].backgroundColor : theme.palette.primary.main,
+      color: ownerState !== null && ownerState !== void 0 && ownerState.labelColor ? ownerState === null || ownerState === void 0 ? void 0 : ownerState.labelColor : colorModeConfig(theme)[(ownerState === null || ownerState === void 0 ? void 0 : ownerState.color) || 'default'][(ownerState === null || ownerState === void 0 ? void 0 : ownerState.mode) || 'normal'].color
+    },
+    outlined: {
+      border: "2px solid " + ((_theme$palette$ownerS = theme.palette[ownerState === null || ownerState === void 0 ? void 0 : ownerState.color]) === null || _theme$palette$ownerS === void 0 ? void 0 : _theme$palette$ownerS.main),
+      color: (ownerState === null || ownerState === void 0 ? void 0 : ownerState.labelColor) || theme.palette.textColor[900]
+    }
+  };
+  return _extends({}, baseStyles, (ownerState === null || ownerState === void 0 ? void 0 : ownerState.size) && sizeStyles[ownerState.size], (ownerState === null || ownerState === void 0 ? void 0 : ownerState.variant) && variantStyles[ownerState.variant]);
+};
+var RabexChip = {
+  components: {
+    // defaultProps: {
+    //   size: 'sm',  // You can change this to 'xs' or 'sm' as the default
+    // },
+    styleOverrides: {
+      root: function root(_ref) {
+        var theme = _ref.theme,
+          ownerState = _ref.ownerState,
+          rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+        return _extends({}, chipStyles(theme, ownerState));
+      },
+      icon: function icon(_ref2) {
+        var theme = _ref2.theme,
+          ownerState = _ref2.ownerState;
         return {
-          color: ownerState !== null && ownerState !== void 0 && ownerState.labelColor ? ownerState === null || ownerState === void 0 ? void 0 : ownerState.labelColor : theme.palette.base.A0,
-          backgroundColor: (_theme$palette$base = theme.palette.base) === null || _theme$palette$base === void 0 ? void 0 : _theme$palette$base.A100
+          margin: 0,
+          fontSize: (ownerState === null || ownerState === void 0 ? void 0 : ownerState.size) === 'xs' ? theme.spacing(3) : theme.spacing(4)
         };
-      }
-    }, {
-      props: {
-        variant: 'filled',
-        mode: 'light'
       },
-      style: function style(_ref6) {
-        var theme = _ref6.theme,
-          other = _objectWithoutPropertiesLoose(_ref6, _excluded4);
-        var ownerState = other.as ? other.ownerState : other;
+      deleteIcon: function deleteIcon(_ref3) {
+        var theme = _ref3.theme,
+          ownerState = _ref3.ownerState;
         return {
-          color: ownerState !== null && ownerState !== void 0 && ownerState.labelColor ? ownerState === null || ownerState === void 0 ? void 0 : ownerState.labelColor : theme.palette.textColor.A60,
-          backgroundColor: theme.palette.mode === 'light' ? theme.palette[ownerState === null || ownerState === void 0 ? void 0 : ownerState.color].A20 : alpha(theme.palette[ownerState === null || ownerState === void 0 ? void 0 : ownerState.color].A100, 0.1)
+          margin: 0,
+          fontSize: (ownerState === null || ownerState === void 0 ? void 0 : ownerState.size) === 'xs' ? theme.spacing(3) : theme.spacing(4)
         };
-      }
-    }, {
-      props: {
-        variant: 'filled',
-        mode: 'light',
-        color: 'secondary'
       },
-      style: function style(_ref7) {
-        var theme = _ref7.theme,
-          ownerState = _objectWithoutPropertiesLoose(_ref7, _excluded5);
+      label: function label(_ref4) {
+        var theme = _ref4.theme;
         return {
-          color: ownerState !== null && ownerState !== void 0 && ownerState.labelColor ? ownerState === null || ownerState === void 0 ? void 0 : ownerState.labelColor : theme.palette.mode === 'light' ? theme.palette.textColor.A40 : theme.palette.grayBackground.A20,
-          backgroundColor: theme.palette.mode === 'light' ? alpha(theme.palette.grayBackground.A80, 0.1) : alpha(theme.palette.grayBackground.A20, 0.1)
+          overflow: 'visible',
+          position: 'relative',
+          padding: theme.spacing(0)
         };
       }
-    }, {
+    },
+    variants: [
+    // {
+    //   props: { variant: 'default' } as ChipProps,
+    //   style: ({ theme, ownerState }: any) => {
+    //     return {
+    //       border: 'unset',
+    //       backgroundColor: 'unset',
+    //       color: ownerState?.labelColor
+    //         ? ownerState?.labelColor
+    //         : theme.palette.textColor.A60,
+    //     };
+    //   },
+    // },
+    // {
+    //   props: { variant: 'filled' } as ChipProps,
+    //   style: ({ theme, ...ownerState }: any) => {
+    //     console.log(theme, ...ownerState);
+    //     return {
+    //       backgroundColor: ownerState?.color
+    //           ? colorModeConfig(theme)[ownerState?.color || 'default'][ownerState?.mode || 'normal'].backgroundColor
+    //           : theme.palette.primary.main,
+    //       color: ownerState?.labelColor
+    //           ? colorModeConfig(theme)[ownerState?.color || 'default'][ownerState?.mode || 'normal'].color
+    //           : theme.palette.textColor[50],
+    //     };
+    //   },
+    // },
+    // {
+    //   props: { size: 'sm' } as ChipProps,
+    //   style: ({ theme, ownerState }: any) => {
+    //     return {
+    //       height: theme.spacing(6),
+    //       paddingX: theme.spacing(2),
+    //     };
+    //   },
+    // },
+    // {
+    //   props: { size: 'xs' } as ChipProps,
+    //   style: ({ theme, ownerState }: any) => {
+    //     return {
+    //       height: theme.spacing(4),
+    //       paddingX: theme.spacing(1),
+    //     };
+    //   },
+    // },
+    {
       props: {
         variant: 'outlined'
       },
-      style: function style(_ref8) {
+      style: function style(_ref5) {
         var _theme$palette$ownerS2;
-        var theme = _ref8.theme,
-          ownerState = _objectWithoutPropertiesLoose(_ref8, _excluded6);
+        var theme = _ref5.theme,
+          ownerState = _objectWithoutPropertiesLoose(_ref5, _excluded2$2);
         return {
           color: ownerState !== null && ownerState !== void 0 && ownerState.labelColor ? ownerState === null || ownerState === void 0 ? void 0 : ownerState.labelColor : theme.palette.textColor.A60,
           border: "2px solid " + ((_theme$palette$ownerS2 = theme.palette[ownerState === null || ownerState === void 0 ? void 0 : ownerState.color]) === null || _theme$palette$ownerS2 === void 0 ? void 0 : _theme$palette$ownerS2.A60)
@@ -3187,13 +3345,13 @@ var ReduxChip = {
         color: 'secondary',
         mode: 'normal'
       },
-      style: function style(_ref9) {
-        var _theme$palette$base2;
-        var theme = _ref9.theme,
-          ownerState = _objectWithoutPropertiesLoose(_ref9, _excluded7);
+      style: function style(_ref6) {
+        var _theme$palette$base;
+        var theme = _ref6.theme,
+          ownerState = _objectWithoutPropertiesLoose(_ref6, _excluded3);
         return {
           color: ownerState !== null && ownerState !== void 0 && ownerState.labelColor ? ownerState === null || ownerState === void 0 ? void 0 : ownerState.labelColor : theme.palette.textColor.A60,
-          border: "2px solid " + ((_theme$palette$base2 = theme.palette.base) === null || _theme$palette$base2 === void 0 ? void 0 : _theme$palette$base2.A100)
+          border: "2px solid " + ((_theme$palette$base = theme.palette.base) === null || _theme$palette$base === void 0 ? void 0 : _theme$palette$base.A100)
         };
       }
     }, {
@@ -3202,10 +3360,10 @@ var ReduxChip = {
         color: 'secondary',
         mode: 'light'
       },
-      style: function style(_ref10) {
+      style: function style(_ref7) {
         var _theme$palette$second;
-        var theme = _ref10.theme,
-          ownerState = _objectWithoutPropertiesLoose(_ref10, _excluded8);
+        var theme = _ref7.theme,
+          ownerState = _objectWithoutPropertiesLoose(_ref7, _excluded4);
         return {
           color: ownerState !== null && ownerState !== void 0 && ownerState.labelColor ? ownerState === null || ownerState === void 0 ? void 0 : ownerState.labelColor : theme.palette.textColor.A60,
           border: "2px solid " + ((_theme$palette$second = theme.palette.secondary) === null || _theme$palette$second === void 0 ? void 0 : _theme$palette$second.A100)
@@ -3213,11 +3371,11 @@ var ReduxChip = {
       }
     }, {
       props: {
-        size: 'small',
+        size: 'xs',
         hasBullet: true
       },
-      style: function style(_ref11) {
-        var theme = _ref11.theme;
+      style: function style(_ref8) {
+        var theme = _ref8.theme;
         return {
           height: 24,
           padding: theme.spacing(0.5, 2, 0.5, 4.5),
@@ -3226,77 +3384,42 @@ var ReduxChip = {
       }
     }, {
       props: {
-        size: 'medium',
+        size: 'sm',
         hasBullet: true
       },
-      style: function style(_ref12) {
-        var theme = _ref12.theme;
+      style: function style(_ref9) {
+        var theme = _ref9.theme;
         return {
           height: 28,
           padding: theme.spacing(0.5, 2, 0.5, 4.5),
           fontSize: 14
         };
       }
-    }, {
-      props: {
-        size: 'large',
-        hasBullet: true
-      },
-      style: function style(_ref13) {
-        var theme = _ref13.theme;
-        return {
-          height: 32,
-          padding: theme.spacing(1, 2, 1, 4.5),
-          fontSize: 14
-        };
-      }
-    }, {
-      props: {
-        size: 'small',
-        hasBullet: false
-      },
-      style: function style(_ref14) {
-        var theme = _ref14.theme;
-        return {
-          height: 24,
-          padding: theme.spacing(0.5, 2),
-          fontSize: 12
-        };
-      }
-    }, {
-      props: {
-        size: 'medium',
-        hasBullet: false
-      },
-      style: function style(_ref15) {
-        var theme = _ref15.theme;
-        return {
-          height: 28,
-          padding: theme.spacing(0.5, 2),
-          fontSize: 14
-        };
-      }
-    }, {
-      props: {
-        size: 'large',
-        hasBullet: false
-      },
-      style: function style(_ref16) {
-        var theme = _ref16.theme;
-        return {
-          height: 32,
-          padding: theme.spacing(1, 2),
-          fontSize: 14
-        };
-      }
-    }, {
+    },
+    // {
+    //   props: { size: 'xs', hasBullet: false } as ChipProps,
+    //   style: ({ theme }) => ({
+    //     height: 24,
+    //     padding: theme.spacing(0.5, 2),
+    //     fontSize: 12,
+    //   }),
+    // },
+    // {
+    //   props: { size: 'sm', hasBullet: false } as ChipProps,
+    //   style: ({ theme }) => ({
+    //     height: 28,
+    //     padding: theme.spacing(0.5, 2),
+    //     fontSize: 14,
+    //   }),
+    // },
+    {
       props: {
         hasBullet: true
       },
-      style: function style(_ref17) {
+      style: function style(_ref10) {
         var _theme$palette$ownerS3;
-        var theme = _ref17.theme,
-          ownerState = _objectWithoutPropertiesLoose(_ref17, _excluded9);
+        var theme = _ref10.theme,
+          ownerState = _objectWithoutPropertiesLoose(_ref10, _excluded5);
         return {
           '& > .MuiChip-label	': {
             '&::before': {
@@ -3330,9 +3453,9 @@ var ReduxChip = {
         variant: 'filled',
         mode: 'normal'
       },
-      style: function style(_ref18) {
-        var theme = _ref18.theme,
-          ownerState = _objectWithoutPropertiesLoose(_ref18, _excluded10);
+      style: function style(_ref11) {
+        var theme = _ref11.theme,
+          ownerState = _objectWithoutPropertiesLoose(_ref11, _excluded6);
         return {
           '& > .MuiChip-label	': {
             '&::before': {
@@ -3348,14 +3471,14 @@ var ReduxChip = {
         mode: 'light',
         color: 'secondary'
       },
-      style: function style(_ref19) {
-        var _theme$palette$base3;
-        var theme = _ref19.theme,
-          ownerState = _objectWithoutPropertiesLoose(_ref19, _excluded11);
+      style: function style(_ref12) {
+        var _theme$palette$base2;
+        var theme = _ref12.theme,
+          ownerState = _objectWithoutPropertiesLoose(_ref12, _excluded7);
         return {
           '& > .MuiChip-label	': {
             '&::before': {
-              backgroundColor: ownerState !== null && ownerState !== void 0 && ownerState.bulletColor ? ownerState === null || ownerState === void 0 ? void 0 : ownerState.bulletColor : (_theme$palette$base3 = theme.palette.base) === null || _theme$palette$base3 === void 0 ? void 0 : _theme$palette$base3.A100
+              backgroundColor: ownerState !== null && ownerState !== void 0 && ownerState.bulletColor ? ownerState === null || ownerState === void 0 ? void 0 : ownerState.bulletColor : (_theme$palette$base2 = theme.palette.base) === null || _theme$palette$base2 === void 0 ? void 0 : _theme$palette$base2.A100
             }
           }
         };
@@ -3364,8 +3487,8 @@ var ReduxChip = {
       props: {
         clickable: true
       },
-      style: function style(_ref20) {
-        var rest = _objectWithoutPropertiesLoose(_ref20, _excluded12);
+      style: function style(_ref13) {
+        var rest = _objectWithoutPropertiesLoose(_ref13, _excluded8);
         return {
           '& .MuiChip-icon': {
             margin: 0
@@ -3377,10 +3500,10 @@ var ReduxChip = {
         clickable: true,
         mode: 'light'
       },
-      style: function style(_ref21) {
+      style: function style(_ref14) {
         var _theme$palette$ownerS4;
-        var theme = _ref21.theme,
-          ownerState = _ref21.ownerState;
+        var theme = _ref14.theme,
+          ownerState = _ref14.ownerState;
         return ownerState ? {
           '&:hover': {
             backgroundColor: alpha("" + ((_theme$palette$ownerS4 = theme.palette[ownerState.color]) === null || _theme$palette$ownerS4 === void 0 ? void 0 : _theme$palette$ownerS4.A100), 0.1)
@@ -4255,7 +4378,7 @@ var getDesignTokens = function getDesignTokens(_ref) {
       MuiTypography: RabexTypography.components,
       MuiTabs: RabexTabs.components,
       MuiTab: RabexTab.components,
-      MuiChip: ReduxChip.components,
+      MuiChip: RabexChip.components,
       MuiPaper: RabexPaper.components,
       MuiDivider: RabexDivider.components,
       MuiTooltip: RabexTooltip.components,
@@ -4343,7 +4466,7 @@ var ToggleButtonGroup = function ToggleButtonGroup(_ref) {
 };
 
 var _styled;
-var _excluded$e = ["className"];
+var _excluded$f = ["className"];
 /**
  *
  * Tooltips display informative text when users hover over, focus on, or tap an element.
@@ -4368,7 +4491,7 @@ var MuiTooltipStyled = /*#__PURE__*/styled(MuiTooltip, {
 // tooltip popper hasn't permission for wrap text
 var NoMaxWidthTooltip = /*#__PURE__*/styled$1(function (_ref) {
   var className = _ref.className,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
   return React.createElement(MuiTooltipStyled, Object.assign({}, props, {
     classes: {
       popper: className
@@ -4555,7 +4678,7 @@ var Fade = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, props));
 });
 
-var _excluded$f = ["name"];
+var _excluded$g = ["name"];
 /**
  * Formik Input let users enter and edit text.
  *
@@ -4567,7 +4690,7 @@ var _excluded$f = ["name"];
  */
 var FormikInput = function FormikInput(_ref) {
   var name = _ref.name,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
   var _useField = useField(name),
     field = _useField[0],
     meta = _useField[1];
@@ -4578,7 +4701,7 @@ var FormikInput = function FormikInput(_ref) {
   }));
 };
 
-var _excluded$g = ["helperText", "name"];
+var _excluded$h = ["helperText", "name"];
 /**
  * Formik Select let users enter and edit text.
  *
@@ -4591,7 +4714,7 @@ var _excluded$g = ["helperText", "name"];
 var FormikSelect = function FormikSelect(_ref) {
   var helperText = _ref.helperText,
     name = _ref.name,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
   var _useField = useField(name),
     field = _useField[0],
     meta = _useField[1];
@@ -4609,7 +4732,7 @@ var FormikSelect = function FormikSelect(_ref) {
   }, text));
 };
 
-var _excluded$h = ["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"];
 function _handleHelperColor$1(props, key) {
   var _props$key;
   if (props.error) return 'error.A100';
@@ -4650,7 +4773,7 @@ var TextField = function TextField(props) {
     onChange = _ref.onChange,
     valueFormat = _ref.valueFormat,
     valueFormatOption = _ref.valueFormatOption,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+    other = _objectWithoutPropertiesLoose(_ref, _excluded$i);
   if (!valueFormat && !!valueFormatOption) {
     console.warn("'valueFormatOption' Only Work With known 'valueFormat's...");
   }
@@ -4714,7 +4837,7 @@ TextField.defaultProps = {
   }
 };
 
-var _excluded$i = ["name"];
+var _excluded$j = ["name"];
 /**
  * Formik TextField let users enter and edit text.
  *
@@ -4726,7 +4849,7 @@ var _excluded$i = ["name"];
  */
 var FormikTextField = function FormikTextField(_ref) {
   var name = _ref.name,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
   var _useField = useField(name),
     field = _useField[0],
     meta = _useField[1];
@@ -4840,7 +4963,7 @@ var Modal = function Modal(_ref) {
   return React.createElement(MuiModal, Object.assign({}, props));
 };
 
-var _excluded$j = ["hasCloseButton", "iconCloseProps", "closeButtonProps", "headerProps"],
+var _excluded$k = ["hasCloseButton", "iconCloseProps", "closeButtonProps", "headerProps"],
   _excluded2$3 = ["sx"],
   _excluded3$1 = ["sx"],
   _excluded4$1 = ["sx"];
@@ -4854,7 +4977,7 @@ var ModalContent = function ModalContent(_ref) {
     iconCloseProps = _ref.iconCloseProps,
     closeButtonProps = _ref.closeButtonProps,
     headerProps = _ref.headerProps,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
   var _ref2 = props || {},
     rootSx = _ref2.sx,
     root = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
@@ -5228,7 +5351,7 @@ SeeMore.defaultProps = {
   height: '56%'
 };
 
-var _excluded$k = ["inputProps", "children"];
+var _excluded$l = ["inputProps", "children"];
 /**
  * This is a custom wrapper component made of Material-UI Button.
  * Props of the Button component are also available.
@@ -5246,7 +5369,7 @@ var _excluded$k = ["inputProps", "children"];
 var UploadButton = function UploadButton(_ref) {
   var inputProps = _ref.inputProps,
     children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
   return React.createElement(Button, Object.assign({}, props), children, React.createElement("input", Object.assign({
     hidden: true,
     type: "file",
@@ -5275,5 +5398,135 @@ var Zoom = function Zoom(_ref) {
   return React.createElement(MuiZoom, Object.assign({}, props));
 };
 
-export { Accordion, AccordionActions, AccordionDetails, AccordionSummary, Alert, AlertAction, AlertTimer, AlertTitle, Autocomplete, Avatar, Backdrop, Box, Breadcrumbs, Button, Checkbox, Chip, CircularProgress, ClickAwayListener, Collapse, Container, CurrencyPairsTitle, Dialog, DialogActions, DialogContent, DialogTitle, Divider, Drawer, DynamicBackground, DynamicBackgroundContainer, Fade, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel, FormikInput, FormikSelect, FormikTextField, Grid, Grow, IconButton, Input, InputAdornment, InputLabel, LinearProgress, Link, List, ListItem, ListItemAvatar, ListItemButton, ListItemIcon, ListItemSecondaryAction, listItemText as ListItemText, ListSubHeader, LoadingButton, Menu, MenuItem, MenuList, MobileStepper, Modal, ModalContent, NoSsr, Pagination, PaginationItem, Paper, Popover, Popper, RTable, RTableHead, RTableRow, Radio, RadioGroup, SeeMore, Select, SelectItem, Skeleton, Slide, Slider, SliderContent, Snackbar, SnackbarContent, Stack, Step, StepButton, StepConnector, StepContent, StepIcon, StepLabel, Stepper, SvgIcon, SwipeableDrawer, Tab, TabContext, TabList, TabPanel, Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel, Tabs, TextField, ToggleButton, ToggleButtonGroup, Tooltip, Typography, UploadButton, Zoom, numberUtils, handleSearch as searchUtils, theme, useCopyToClipboard, useOnScreen, useResponsive, useTime, useWindowSize };
+var _excluded$m = ["theme"];
+/**
+ * SegmentedControl component for switching between views.
+ *
+ * This component is built on top of Material-UI Tabs and supports additional props
+ * for customizing size, border, and separation of tabs.
+ *
+ * @param props
+ * @returns JSX.Element
+ */
+var SegmentedControl = /*#__PURE__*/styled(MuiTabs, {
+  name: 'SegmentedControl',
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !['size', 'isSeparate', 'hasBorder'].includes(prop);
+  }
+})(function (_ref) {
+  var theme = _ref.theme,
+    ownerState = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+  return _extends({
+    minHeight: 'unset',
+    display: 'flex',
+    backgroundColor: theme.palette.backgroundColor[200],
+    '& .MuiTabs-flexContainer': {
+      gap: theme.spacing(1)
+    }
+  }, ownerState.size === 'sm' && {
+    height: theme.spacing(8),
+    borderRadius: theme.spacing(2),
+    '&.MuiTab-root': {
+      borderRadius: theme.spacing(1),
+      height: theme.spacing(6),
+      padding: theme.spacing(0, 3)
+    },
+    '&.MuiTab-root.Mui-selected': {
+      color: 'inherit',
+      borderRadius: theme.spacing(1)
+    }
+  }, ownerState.size === 'md' && {
+    height: theme.spacing(12),
+    borderRadius: theme.spacing(3),
+    '& .MuiTab-root': {
+      borderRadius: theme.spacing(2),
+      height: theme.spacing(10),
+      padding: theme.spacing(2, 3)
+    },
+    '& .MuiTab-root.Mui-selected': {
+      color: 'inherit',
+      borderRadius: theme.spacing(2)
+    }
+  }, ownerState.size === 'lg' && {
+    height: theme.spacing(14),
+    borderRadius: theme.spacing(3),
+    '& .MuiTab-root': {
+      borderRadius: theme.spacing(2),
+      height: theme.spacing(12),
+      padding: theme.spacing(3, 4)
+    },
+    '& .MuiTab-root.Mui-selected': {
+      color: 'inherit',
+      borderRadius: theme.spacing(2)
+    }
+  }, ownerState.isSeparate && {
+    '& .MuiTabs-flexContainer': {
+      gap: theme.spacing(1),
+      padding: theme.spacing(1)
+    },
+    '& .MuiTab-root': {
+      borderRadius: theme.spacing(1),
+      padding: theme.spacing(2, 3)
+    }
+  }, ownerState.hasBorder && {
+    border: "2px dotted " + theme.palette.divider,
+    '& .MuiTab-root': {
+      borderRadius: theme.spacing(1),
+      border: "2px dotted " + theme.palette.divider,
+      lineHeight: theme.spacing(2)
+    }
+  }, ownerState.variant === 'fullWidth' && {
+    width: '100%'
+  }, {
+    // Remove indicator
+    '& .MuiTabs-indicator': {
+      display: 'none'
+    }
+  });
+});
+SegmentedControl.defaultProps = {
+  variant: 'fullWidth',
+  size: 'sm',
+  isSeparate: false,
+  hasBorder: false
+};
+
+// Custom SegmentedControlTab with styled applied based on size
+var SegmentedControlTab = /*#__PURE__*/styled(function (props) {
+  return React.createElement(MuiTab, Object.assign({}, props, {
+    label:
+    // Render custom Typography for the label
+    React.createElement(Typography, {
+      variant: "body2",
+      weight: "semiBold"
+    }, props.label)
+  }));
+})(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    minWidth: 80,
+    color: theme.palette.mode === 'light' ? theme.palette.textColor[900] : theme.palette.textColor.A40,
+    position: 'relative',
+    minHeight: 24,
+    borderRadius: 'unset',
+    '&::after': {
+      content: 'unset',
+      display: 'none'
+    },
+    '&.MuiTab-root.Mui-selected': {
+      backgroundColor: theme.palette.mode === 'light' ? theme.palette.base[50] : theme.palette.secondary.A80,
+      color: theme.palette.textColor[900]
+    },
+    '&.Mui-disabled': {
+      cursor: 'not-allowed',
+      color: theme.palette.mode === 'light' ? theme.palette.textColor.A40 : theme.palette.textColor.A60
+    },
+    '& .MuiTab-iconWrapper': {
+      fontSize: '14px'
+    }
+  };
+});
+SegmentedControlTab.defaultProps = {};
+
+export { Accordion, AccordionActions, AccordionDetails, AccordionSummary, Alert, AlertAction, AlertTimer, AlertTitle, Autocomplete, Avatar, Backdrop, Box, Breadcrumbs, Button, Checkbox, Chip, CircularProgress, ClickAwayListener, Collapse, Container, CurrencyPairsTitle, Dialog, DialogActions, DialogContent, DialogTitle, Divider, Drawer, DynamicBackground, DynamicBackgroundContainer, Fade, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel, FormikInput, FormikSelect, FormikTextField, Grid, Grow, IconButton, Input, InputAdornment, InputLabel, LinearProgress, Link, List, ListItem, ListItemAvatar, ListItemButton, ListItemIcon, ListItemSecondaryAction, listItemText as ListItemText, ListSubHeader, LoadingButton, Menu, MenuItem, MenuList, MobileStepper, Modal, ModalContent, NoSsr, Pagination, PaginationItem, Paper, Popover, Popper, RTable, RTableHead, RTableRow, Radio, RadioGroup, SeeMore, SegmentedControl, SegmentedControlTab, Select, SelectItem, Skeleton, Slide, Slider, SliderContent, Snackbar, SnackbarContent, Stack, Step, StepButton, StepConnector, StepContent, StepIcon, StepLabel, Stepper, SvgIcon, SwipeableDrawer, Tab, TabContext, TabList, TabPanel, Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel, Tabs, TextField, ToggleButton, ToggleButtonGroup, Tooltip, Typography, UploadButton, Zoom, numberUtils, handleSearch as searchUtils, theme, useCopyToClipboard, useOnScreen, useResponsive, useTime, useWindowSize };
 //# sourceMappingURL=rabex-ui.esm.js.map