@rabex-kit/rabex-ui 0.0.2 → 0.0.5

package/dist/rabex-ui.cjs.development.js

@@ -903,6 +903,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
@@ -910,26 +917,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__default.createElement(StyledChip, Object.assign({
+    label: React__default.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'
 };
 
 /**
@@ -1031,7 +1055,7 @@ var Drawer = function Drawer(props) {
   return React__default.createElement(MuiDrawer, Object.assign({}, props));
 };
 
-var _excluded$4 = ["widthPercent", "bgColor", "align"];
+var _excluded$5 = ["widthPercent", "bgColor", "align"];
 /**
  *
  * DynamicBackground is a wrapper for adding background
@@ -1045,7 +1069,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__default.createElement(Box, Object.assign({
     width: calcPercent + "%",
@@ -1088,10 +1112,10 @@ var Stack = /*#__PURE__*/React__default.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__default.createElement(Stack, Object.assign({
     sx: _extends({
       position: 'relative',
@@ -1120,7 +1144,7 @@ var FormControl = function FormControl(_ref) {
   return React__default.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.
@@ -1138,7 +1162,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__default.createElement(MuiFormControlLabel, Object.assign({}, props, {
     classes: {
       root: CN({
@@ -1630,7 +1654,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.
  *
@@ -1647,7 +1671,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__default.createElement(MuiRadio, Object.assign({}, props, {
     classes: {
       root: CN({
@@ -1765,7 +1789,7 @@ Slider.defaultProps = {
   size: 'medium'
 };
 
-var _excluded$8 = ["sx"],
+var _excluded$9 = ["sx"],
   _excluded2 = ["sx", "className"];
 /**
  * SliderComponent is displayed in minimized way.
@@ -1852,7 +1876,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,
@@ -1941,10 +1965,10 @@ var SvgIcon = function SvgIcon(_ref) {
   return React__default.createElement(MuiSvgIcon, Object.assign({}, props));
 };
 
-var _excluded$9 = ["size"];
+var _excluded$a = ["size"];
 var Tab = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var size = _ref.size,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   return React__default.createElement(MuiTab, Object.assign({
     ref: ref,
     classes: {
@@ -2096,7 +2120,7 @@ var TableSortLabel = function TableSortLabel(props) {
   return React__default.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) {
@@ -2104,7 +2128,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',
@@ -2153,7 +2177,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.
  *
@@ -2167,7 +2191,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__default.createElement(Stack, Object.assign({
     p: 4,
     className: "table-row " + className
@@ -2179,7 +2203,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.
  *
@@ -2193,7 +2217,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__default.createElement(Stack, Object.assign({
     p: 4,
     className: "table-row " + className
@@ -2223,13 +2247,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';
  *  ```
  *
  *
@@ -2742,6 +2766,7 @@ var RabexLightPalette = /*#__PURE__*/_extends({}, base, {
     50: '#FCFEFF'
   },
   backgroundColor: {
+    main: '#16181F',
     950: '#16181F',
     900: '#333640',
     800: '#3A3A3D',
@@ -2771,7 +2796,7 @@ var RabexLightPalette = /*#__PURE__*/_extends({}, base, {
   warning: {
     400: '#E8A700',
     300: '#FFD200',
-    200: '#FFD200',
+    200: '#FCE7A4',
     100: '#FCF3D6',
     50: '#FFF9E5',
     contrastText: '#FFF',
@@ -2801,7 +2826,7 @@ var RabexLightPalette = /*#__PURE__*/_extends({}, base, {
     300: '#848EF5',
     200: '#9CA4FF',
     100: '#D9DCFF',
-    50: '#FFEBEC',
+    50: '#EDEFFF',
     contrastText: '#FFF',
     main: '#717BEB',
     A100: '#717BEB',
@@ -2834,6 +2859,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',
@@ -2939,6 +2974,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'
   }
 });
 
@@ -3068,119 +3130,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 : colorManipulator_js.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' ? colorManipulator_js.alpha(theme.palette.grayBackground.A80, 0.1) : colorManipulator_js.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)
@@ -3192,13 +3338,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)
         };
       }
     }, {
@@ -3207,10 +3353,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)
@@ -3218,11 +3364,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),
@@ -3231,77 +3377,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': {
@@ -3335,9 +3446,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': {
@@ -3353,14 +3464,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
             }
           }
         };
@@ -3369,8 +3480,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
@@ -3382,10 +3493,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: colorManipulator_js.alpha("" + ((_theme$palette$ownerS4 = theme.palette[ownerState.color]) === null || _theme$palette$ownerS4 === void 0 ? void 0 : _theme$palette$ownerS4.A100), 0.1)
@@ -4260,7 +4371,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,
@@ -4348,7 +4459,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.
@@ -4373,7 +4484,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__default.createElement(MuiTooltipStyled, Object.assign({}, props, {
     classes: {
       popper: className
@@ -4560,7 +4671,7 @@ var Fade = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   }, props));
 });
 
-var _excluded$f = ["name"];
+var _excluded$g = ["name"];
 /**
  * Formik Input let users enter and edit text.
  *
@@ -4572,7 +4683,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 = formik.useField(name),
     field = _useField[0],
     meta = _useField[1];
@@ -4583,7 +4694,7 @@ var FormikInput = function FormikInput(_ref) {
   }));
 };
 
-var _excluded$g = ["helperText", "name"];
+var _excluded$h = ["helperText", "name"];
 /**
  * Formik Select let users enter and edit text.
  *
@@ -4596,7 +4707,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 = formik.useField(name),
     field = _useField[0],
     meta = _useField[1];
@@ -4614,7 +4725,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';
@@ -4655,7 +4766,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...");
   }
@@ -4719,7 +4830,7 @@ TextField.defaultProps = {
   }
 };
 
-var _excluded$i = ["name"];
+var _excluded$j = ["name"];
 /**
  * Formik TextField let users enter and edit text.
  *
@@ -4731,7 +4842,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 = formik.useField(name),
     field = _useField[0],
     meta = _useField[1];
@@ -4845,7 +4956,7 @@ var Modal = function Modal(_ref) {
   return React__default.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"];
@@ -4859,7 +4970,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);
@@ -5233,7 +5344,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.
@@ -5251,7 +5362,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__default.createElement(Button, Object.assign({}, props), children, React__default.createElement("input", Object.assign({
     hidden: true,
     type: "file",
@@ -5280,6 +5391,136 @@ var Zoom = function Zoom(_ref) {
   return React__default.createElement(MuiZoom, Object.assign({}, props));
 };
 
+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__default.createElement(MuiTab, Object.assign({}, props, {
+    label:
+    // Render custom Typography for the label
+    React__default.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 = {};
+
 exports.useMediaQuery = useMediaQuery;
 exports.useScrollTrigger = useScrollTrigger_js;
 exports.useTheme = useTheme;
@@ -5359,6 +5600,8 @@ exports.RTableRow = RTableRow;
 exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
 exports.SeeMore = SeeMore;
+exports.SegmentedControl = SegmentedControl;
+exports.SegmentedControlTab = SegmentedControlTab;
 exports.Select = Select;
 exports.SelectItem = SelectItem;
 exports.Skeleton = Skeleton;