@rabex-kit/rabex-ui 0.2.49 → 0.2.51

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

@@ -3364,11 +3364,8 @@ var components = {
           boxShadow: '0px 0px 0px 4px #0000000D'
         },
         '&.Mui-disabled': {
-          color: palette.mode === 'light' ? textColor : palette.textColor.A90,
+          color: textColor,
           backgroundColor: disableBackgroundColor
-          // palette.mode === 'light'
-          //   ? disableBackgroundColor
-          //   : darken(palette[color].A100 as string, 0.1),
         }
       };
     },
@@ -3378,22 +3375,22 @@ var components = {
       var textColor = palette.textColor[900] || palette.textColor.A80;
       var hoverColor = palette.secondary[400] || colorManipulator_js.darken(palette.secondary.A100, 0.05);
       return {
-        backgroundColor: palette.mode === 'light' ? secondaryColor : palette.secondary.A60,
-        color: palette.mode === 'light' ? textColor : palette.textColor.A0,
+        backgroundColor: secondaryColor,
+        color: textColor,
         '&:hover': {
-          backgroundColor: palette.mode === 'light' ? hoverColor : palette.secondary.A60
+          backgroundColor: hoverColor
         },
         '&:active': {
-          backgroundColor: palette.mode === 'light' ? palette.secondary[400] || colorManipulator_js.darken(palette.secondary.A100, 0.05) : palette.secondary.A60,
+          backgroundColor: palette.secondary[400] || colorManipulator_js.darken(palette.secondary.A100, 0.05),
           boxShadow: '0px 0px 0px 4px #0000000D'
         },
         '&:focused': {
-          backgroundColor: palette.mode === 'light' ? palette.secondary[400] || colorManipulator_js.darken(palette.secondary.A100, 0.05) : palette.secondary.A60,
+          backgroundColor: palette.secondary[400] || colorManipulator_js.darken(palette.secondary.A100, 0.05),
           boxShadow: '0px 0px 0px 4px #0000000D'
         },
         '&.Mui-disabled': {
           color: palette.textColor[100] || palette.textColor.A40,
-          backgroundColor: palette.mode === 'light' ? palette.secondary[400] : palette.secondary.A60
+          backgroundColor: palette.secondary[400]
         }
       };
     },
@@ -3407,7 +3404,7 @@ var components = {
         border: '1.5px solid',
         borderColor: color === 'primary' ? palette.primary[500] || palette[color].A100 : palette[color].A100,
         '&:hover': {
-          backgroundColor: palette.mode === 'light' ? color === 'primary' ? palette.primary[500] || palette[color].A100 : palette.secondary.A60 : 'transparent',
+          backgroundColor: color === 'primary' ? palette.primary[500] || palette[color].A100 : 'transparent',
           border: '1px solid',
           borderColor: color === 'primary' ? palette.primary[600] || palette[color].A100 : palette[color].A100,
           color: palette.textColor[50] || palette[color].A0
@@ -3419,21 +3416,19 @@ var components = {
           color: palette.textColor[50] || palette[color].A0
         },
         '&.Mui-disabled': {
-          borderColor: palette.mode === 'light' ? color === 'primary' ? palette.primary[400] || palette[color].A60 : palette[color].A60 : colorManipulator_js.alpha(palette[color].A100, 0.3),
-          color: palette.mode === 'light' ? color === 'primary' ? palette.primary[400] || palette[color].A60 : palette[color].A60 : colorManipulator_js.alpha(palette[color].A100, 0.3)
+          borderColor: color === 'primary' ? palette.primary[400] || palette[color].A60 : palette[color].A60,
+          color: color === 'primary' ? palette.primary[400] || palette[color].A60 : palette[color].A60
         }
       };
     },
     text: function text(_ref5) {
-      var palette = _ref5.theme.palette,
-        ownerState = _ref5.ownerState;
-      var color = (ownerState === null || ownerState === void 0 ? void 0 : ownerState.color) || 'primary';
+      var palette = _ref5.theme.palette;
       return {
         backgroundColor: 'transparent',
-        color: palette.mode === 'light' ? palette.textColor[900] || palette.textColor.A80 : palette[color].A100,
+        color: palette.textColor[900] || palette.textColor.A80,
         border: 'none',
         '&:hover': {
-          backgroundColor: palette.mode === 'light' ? palette.secondary.A80 : colorManipulator_js.alpha(palette.secondary.A100, 0.7)
+          backgroundColor: palette.secondary.A80
         },
         '&: hover': {
           backgroundColor: 'transparent'
@@ -3447,7 +3442,7 @@ var components = {
         '&.Mui-disabled': {
           backgroundColor: 'transparent',
           borderColor: 'none',
-          color: palette.mode === 'light' ? palette.textColor[100] || palette.textColor.A40 : colorManipulator_js.alpha(palette[color].A100, 0.3)
+          color: palette.textColor[100] || palette.textColor.A40
         }
       };
     }
@@ -3873,66 +3868,169 @@ var RabexLightPalette = /*#__PURE__*/_extends({}, base, {
 var RabexDarkPalette = /*#__PURE__*/_extends({}, base, {
   mode: 'dark',
   primary: {
-    contrastText: '#FFF',
-    main: '#6188FF',
-    A100: '#6188FF',
-    A80: '#9CB0FD',
-    A60: '#B8C3FF',
-    A40: '#D9DFFF',
-    A20: '#E8ECFF',
-    A10: '#F5F7FF'
+    950: '#B8C1FB',
+    900: '#0D2087',
+    800: '#1730AC',
+    700: '#2141D0',
+    600: '#4363E3',
+    500: '#5176FB',
+    400: '#72A0FC',
+    300: '#04326A',
+    200: '#323546',
+    100: '#323546',
+    50: '#121212',
+    contrastText: '#000',
+    main: '#5176FB',
+    A100: '#5176FB',
+    A80: '#72A0FC',
+    A60: '#04326A',
+    A40: '#323546',
+    A20: '#323546',
+    A10: '#121212'
   },
   secondary: {
-    contrastText: '#FFF',
-    main: '#323546',
-    A100: '#323546',
-    A80: '#58667E',
-    A60: '#636C7F'
+    950: '#B8C8EB',
+    900: '#385280',
+    800: '#577094',
+    700: '#869CB8',
+    600: '#2D3E4E',
+    500: '#242E40',
+    400: '#161616',
+    300: '#171D26',
+    200: '#101010',
+    100: '#0D0D0D',
+    50: '#0D0D0D',
+    contrastText: '#000',
+    main: '#242E40',
+    A100: '#242E40',
+    A80: '#171D26',
+    A60: '#101010'
+  },
+  neutral: {
+    950: '#B5BBEF',
+    900: '#2D3886',
+    800: '#4D59AB',
+    700: '#7D88C7',
+    600: '#9CA8E6',
+    500: '#000F59',
+    400: '#001344',
+    300: '#191919',
+    200: '#141414',
+    100: '#0F0F0F',
+    50: '#0E0E0E'
+  },
+  backgroundColor: {
+    main: '#E0E2E9',
+    950: '#E0E2E9',
+    900: '#323546',
+    800: '#3A3A3D',
+    700: '#666666',
+    600: '#58667E',
+    500: '#808A9D',
+    400: '#A6B0C3',
+    300: '#2E3238',
+    200: '#0D1421',
+    100: '#1F293C',
+    50: '#1A2232'
   },
   success: {
-    contrastText: '#FFF',
-    main: '#16C784',
-    A100: '#16C784',
-    A80: '#2CDB99',
-    A60: '#2CDB99',
-    A40: '#93EDCB',
-    A20: '#B8F2DD'
+    400: '#2EBD85',
+    300: '#42DFA3',
+    200: '#93EDCB',
+    100: '#115D41',
+    50: '#053322',
+    contrastText: '#000',
+    main: '#2EBD85',
+    A100: '#2EBD85',
+    A80: '#42DFA3',
+    A60: '#93EDCB',
+    A40: '#115D41',
+    A20: '#053322'
   },
   warning: {
-    contrastText: '#FFF',
-    main: '#B05400',
-    A100: '#B05400',
-    A80: '#CB6000',
-    A60: '#FF8F28',
-    A40: '#FFAA33',
-    A20: '#FFC16A'
+    400: '#FFB703',
+    300: '#FFD51A',
+    200: '#745A04',
+    100: '#413305',
+    50: '#1A1A1A',
+    contrastText: '#000',
+    main: '#FFB703',
+    A100: '#FFB703',
+    A80: '#FFD51A',
+    A60: '#745A04',
+    A40: '#413305',
+    A20: '#1A1A1A'
   },
   error: {
-    contrastText: '#FFF',
-    main: '#EA3943',
-    A100: '#EA3943',
-    A80: '#ED5159',
-    A60: '#FF8F95',
-    A40: '#FFD1D4',
-    A20: '#FFEBEC'
+    400: '#F6465D',
+    300: '#F0686F',
+    200: '#FF8F94',
+    100: '#470005',
+    50: '#171717',
+    contrastText: '#000',
+    main: '#F6465D',
+    A100: '#F6465D',
+    A80: '#F0686F',
+    A60: '#FF8F94',
+    A40: '#470005',
+    A20: '#171717'
   },
   info: {
-    contrastText: '#FFF',
-    main: '#717BEB',
-    A100: '#717BEB',
+    400: '#878FEE',
+    300: '#848EF5',
+    200: '#000A7D',
+    100: '#000540',
+    50: '#161616',
+    contrastText: '#000',
+    main: '#878FEE',
+    A100: '#878FEE',
     A80: '#848EF5',
-    A60: '#9CA4FF',
-    A40: '#D9DCFF',
-    A20: '#EDEFFF'
+    A60: '#000A7D',
+    A40: '#000540',
+    A20: '#161616'
+  },
+  textColor: {
+    950: '#EAECEF',
+    900: '#CED1DD',
+    800: '#31343E',
+    700: '#333640',
+    600: '#3A3A3D',
+    500: '#333333',
+    400: '#A0A2A4',
+    300: '#808A9D',
+    200: '#A6B0C3',
+    100: '#242E40',
+    50: '#0D0D0D',
+    main: '#CED1DD',
+    A80: '#CED1DD',
+    A70: '#31343E',
+    A60: '#333640',
+    A50: '#3A3A3D',
+    A40: '#333333',
+    A30: '#A0A2A4',
+    A20: '#808A9D',
+    A10: '#242E40',
+    A0: '#0D0D0D'
   },
   base: {
-    main: '#17181B',
-    A100: '#17181B',
-    A80: '#17171A',
-    A60: '#171924',
-    A40: '#222531',
-    A20: '#272B32',
-    A0: '#30353D'
+    950: '#E0E2E9',
+    900: '#323546',
+    800: '#3A3A3D',
+    700: '#666666',
+    600: '#58667E',
+    500: '#808A9D',
+    400: '#A6B0C3',
+    300: '#2E3238',
+    200: '#0D1421',
+    100: '#1F293C',
+    50: '#1A2232',
+    main: '#E0E2E9',
+    A100: '#E0E2E9',
+    A80: '#323546',
+    A60: '#666666',
+    A40: '#808A9D',
+    A20: '#2E3238',
+    A0: '#1A2232'
   },
   grayBackground: {
     main: '#646B80',
@@ -3942,45 +4040,6 @@ var RabexDarkPalette = /*#__PURE__*/_extends({}, base, {
     A40: '#A1A7BB',
     A20: '#A6B0C3',
     A10: '#EFF2F5'
-  },
-  textColor: {
-    main: '#6188FF',
-    A80: '#222531',
-    A70: '#666666',
-    A60: '#58667E',
-    A50: '#646B80',
-    A40: '#858CA2',
-    A30: '#A1A7BB',
-    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'
   }
 });
 
@@ -4141,7 +4200,7 @@ var RabexTab = {
         return _extends({
           minWidth: 80,
           fontWeight: '600',
-          color: theme.palette.mode === 'light' ? theme.palette.textColor.A60 : theme.palette.textColor.A40,
+          color: theme.palette.textColor[900],
           padding: theme.spacing(0, 2),
           '&': {
             position: 'relative'
@@ -4181,11 +4240,11 @@ var RabexTab = {
             display: 'none'
           },
           '&.Mui-selected': {
-            backgroundColor: theme.palette.mode === 'light' ? theme.palette.base.A0 : theme.palette.secondary.A80
+            backgroundColor: 'transparent'
           },
           '&.Mui-disabled': {
             cursor: 'not-allowed',
-            color: theme.palette.mode === 'light' ? theme.palette.textColor.A40 : theme.palette.textColor.A60
+            color: theme.palette.textColor[200]
           },
           '& .MuiTab-iconWrapper': {
             fontSize: '14px'
@@ -4746,10 +4805,10 @@ var RabexIconButton = {
         var bgColor = _ref2.bgColor,
           theme = _ref2.theme;
         return {
-          backgroundColor: bgColor || theme.palette.secondary.A100,
+          backgroundColor: bgColor || theme.palette.secondary[500],
           '&:hover': {
             backgroundColor: bgColor ? bgColor + "CC" // Add opacity to custom color
-            : theme.palette.secondary.A60
+            : theme.palette.secondary[400]
           }
         };
       }
@@ -4760,9 +4819,9 @@ var RabexIconButton = {
       style: function style(_ref3) {
         var theme = _ref3.theme;
         return {
-          color: theme.palette.primary.A100,
+          color: theme.palette.primary[500],
           '&:hover': {
-            backgroundColor: theme.palette.mode === 'light' ? theme.palette.primary.A10 : theme.palette.primary.A60
+            backgroundColor: theme.palette.primary[100]
           }
         };
       }
@@ -4773,9 +4832,9 @@ var RabexIconButton = {
       style: function style(_ref4) {
         var theme = _ref4.theme;
         return {
-          color: theme.palette.secondary.A100,
+          color: theme.palette.secondary[500],
           '&:hover': {
-            backgroundColor: theme.palette.mode === 'light' ? theme.palette.secondary.A10 : theme.palette.secondary.A60
+            backgroundColor: theme.palette.secondary[400]
           }
         };
       }
@@ -4786,9 +4845,9 @@ var RabexIconButton = {
       style: function style(_ref5) {
         var theme = _ref5.theme;
         return {
-          color: theme.palette.error.A100,
+          color: theme.palette.error[400],
           '&:hover': {
-            backgroundColor: theme.palette.mode === 'light' ? theme.palette.error.A10 : theme.palette.error.A60
+            backgroundColor: theme.palette.error[50]
           }
         };
       }
@@ -4799,9 +4858,9 @@ var RabexIconButton = {
       style: function style(_ref6) {
         var theme = _ref6.theme;
         return {
-          color: theme.palette.success.A100,
+          color: theme.palette.success[400],
           '&:hover': {
-            backgroundColor: theme.palette.mode === 'light' ? theme.palette.success.A10 : theme.palette.success.A60
+            backgroundColor: theme.palette.success[50]
           }
         };
       }
@@ -4815,37 +4874,27 @@ var components$3 = {
       var _ref$theme = _ref.theme,
         palette = _ref$theme.palette,
         spacing = _ref$theme.spacing;
-      var isLight = palette.mode === 'light';
       return {
         borderRadius: '8px',
         gap: spacing(1),
         transition: 'all 0.2s',
         padding: spacing(2.5, 3),
-        border: isLight ? "1px solid " + palette.base[300] : "1px solid " + palette.secondary.A100,
-        backgroundColor: isLight ?
-        // ? palette.grayBackground.A20
-        'transparent' : palette.secondary.A100,
+        border: "1px solid " + palette.base[300],
+        backgroundColor: 'transparent',
         '&:hover': {
-          border: isLight ? // ? `1px solid ${palette.textColor.A20}`
-          "1px solid " + palette.base[600] : "1px solid " + palette.base.A60,
-          backgroundColor: isLight ?
-          // ? palette.grayBackground.A20
-          'transparent' : palette.base.A60
+          border: "1px solid " + palette.base[600],
+          backgroundColor: 'transparent'
         },
         '&.Mui-focused': {
-          border: isLight ? "1.5px solid " + palette.primary[500] : "1px solid " + palette.primary.A80
+          border: "1.5px solid " + palette.primary[500]
         },
         '&.Mui-error': {
-          border: isLight ? "1.5px solid " + palette.error[400] : "1px solid " + palette.error.A60,
-          backgroundColor: isLight ? palette.base.A0 : colorManipulator_js.alpha(palette.error.A100 || '', 0.1)
+          border: "1.5px solid " + palette.error[400],
+          backgroundColor: palette.base.A0
         },
         '&.Mui-disabled': {
-          borderColor: isLight ?
-          // ? palette.grayBackground.A40
-          palette.base[300] : palette.secondary.A100,
-          backgroundColor: isLight ?
-          // ? palette.grayBackground.A10
-          'transparent' : palette.secondary.A100
+          borderColor: palette.base[300],
+          backgroundColor: 'transparent'
         }
       };
     },
@@ -4853,16 +4902,15 @@ var components$3 = {
       var _ref2$theme = _ref2.theme,
         palette = _ref2$theme.palette,
         spacing = _ref2$theme.spacing;
-      var isLight = palette.mode === 'light';
       return {
-        color: isLight ? palette.textColor.A80 : palette.textColor.A0,
+        color: palette.textColor.A80,
         padding: spacing(0),
         '&.Mui-disabled': {
-          textFillColor: isLight ? palette.textColor.A40 : palette.textColor.A50
+          textFillColor: palette.textColor.A40
         },
         '&::.placeholder': {
           opacity: 1,
-          color: isLight ? palette.textColor.A40 : palette.textColor.A30
+          color: palette.textColor.A40
         },
         '&:-webkit-autofill': {}
       };
@@ -4926,28 +4974,24 @@ var components$3 = {
     },
     style: function style(_ref7) {
       var theme = _ref7.theme;
-      var isLight = theme.palette.mode === 'light';
       return {
         // border: `1px solid ${theme.palette.base[600]}`,
         border: 'transparent',
         background: theme.palette.base[200],
         '&.Mui-disabled': {
-          background: isLight ? theme.palette.base[100] : theme.palette.secondary.A100
+          background: theme.palette.base[100]
         },
         '&:hover': {
-          border: isLight ? // ? `1px solid ${palette.textColor.A20}`
-          "1px solid " + theme.palette.base[600] : "1px solid " + theme.palette.base.A60,
-          backgroundColor: isLight ?
-          // ? palette.grayBackground.A20
-          theme.palette.base[200] : theme.palette.base.A60
+          border: "1px solid " + theme.palette.base[600],
+          backgroundColor: theme.palette.base[200]
         },
         '&.Mui-focused': {
-          border: isLight ? "1.5px solid " + theme.palette.primary[500] : "1px solid " + theme.palette.primary.A80,
-          backgroundColor: isLight ? theme.palette.base[200] : theme.palette.base.A60
+          border: "1.5px solid " + theme.palette.primary[500],
+          backgroundColor: theme.palette.base[200]
         },
         '&.Mui-error': {
-          border: isLight ? "1.5px solid " + theme.palette.error[400] : "1px solid " + theme.palette.error.A60,
-          backgroundColor: isLight ? theme.palette.base[200] : colorManipulator_js.alpha(theme.palette.error.A100 || '', 0.1)
+          border: "1.5px solid " + theme.palette.error[400],
+          backgroundColor: theme.palette.base[200]
         }
       };
     }
@@ -4958,8 +5002,8 @@ var components$3 = {
     style: function style(_ref8) {
       var palette = _ref8.theme.palette;
       return {
-        border: palette.mode === 'light' ? "1px solid " + palette.success.A100 : "1px solid " + palette.success.A40,
-        backgroundColor: palette.mode === 'light' ? palette.base.A0 : colorManipulator_js.alpha(palette.success.A100, 0.1)
+        border: "1px solid " + palette.success.A100,
+        backgroundColor: palette.base.A0
       };
     }
   }, {
@@ -5004,8 +5048,8 @@ var components$3 = {
     style: function style(_ref12) {
       var palette = _ref12.theme.palette;
       return {
-        border: palette.mode === 'light' ? "1px solid " + palette.success.A100 : "1px solid " + palette.success.A40,
-        backgroundColor: palette.mode === 'light' ? palette.base.A0 : colorManipulator_js.alpha(palette.success.A100, 0.1)
+        border: "1px solid " + palette.success.A100,
+        backgroundColor: palette.base.A0
       };
     }
   },
@@ -5052,8 +5096,8 @@ var components$3 = {
     style: function style(_ref16) {
       var palette = _ref16.theme.palette;
       return {
-        border: palette.mode === 'light' ? "1px solid " + palette.success.A100 : "1px solid " + palette.success.A40,
-        backgroundColor: palette.mode === 'light' ? palette.base.A0 : colorManipulator_js.alpha(palette.success.A100, 0.1)
+        border: "1px solid " + palette.success.A100,
+        backgroundColor: palette.base.A0
       };
     }
   }]
@@ -5376,7 +5420,7 @@ var components$5 = {
         borderRadius: 8,
         padding: spacing(3),
         '& .MuiAlert-icon': ownerState !== null && ownerState !== void 0 && ownerState.color ? {
-          color: palette[ownerState.color][palette.mode === 'dark' ? 'A60' : 'A100']
+          color: palette[ownerState.color].A100
         } : {},
         '& .MuiAlert-action': {
           paddingTop: 0,
@@ -5394,11 +5438,10 @@ var components$5 = {
       };
     },
     message: function message(_ref2) {
-      var _palette, _ref3;
+      var _ref3;
       var _ref2$theme = _ref2.theme,
         palette = _ref2$theme.palette,
-        breakpoints = _ref2$theme.breakpoints,
-        ownerState = _ref2.ownerState;
+        breakpoints = _ref2$theme.breakpoints;
       return _ref3 = {
         fontSize: 12,
         fontWeight: 400,
@@ -5406,7 +5449,7 @@ var components$5 = {
         overflow: 'hidden',
         padding: 0,
         width: '100%',
-        color: palette.mode === 'light' ? palette.textColor.A80 : (_palette = palette[(ownerState === null || ownerState === void 0 ? void 0 : ownerState.color) || 'info']) === null || _palette === void 0 ? void 0 : _palette.A20
+        color: palette.textColor.A80
       }, _ref3[breakpoints.down('lg')] = {
         lineHeight: '20px'
       }, _ref3;
@@ -5424,14 +5467,14 @@ var components$5 = {
       var palette = _ref5.theme.palette,
         ownerState = _ref5.ownerState;
       return {
-        backgroundColor: palette.mode === 'light' ? (_palette$ownerState$c = palette[ownerState.color]) === null || _palette$ownerState$c === void 0 ? void 0 : _palette$ownerState$c.A20 : colorManipulator_js.darken(colorManipulator_js.alpha(palette[ownerState.color].A100, 0.1), 0.1)
+        backgroundColor: (_palette$ownerState$c = palette[ownerState.color]) === null || _palette$ownerState$c === void 0 ? void 0 : _palette$ownerState$c.A20
       };
     },
     outlined: function outlined(_ref6) {
       var theme = _ref6.theme,
         ownerState = _ref6.ownerState;
       return {
-        border: "1px solid " + theme.palette[(ownerState === null || ownerState === void 0 ? void 0 : ownerState.color) || 'info'][theme.palette.mode === 'dark' ? 'A60' : 'A100']
+        border: "1px solid " + theme.palette[(ownerState === null || ownerState === void 0 ? void 0 : ownerState.color) || 'info'].A100
       };
     },
     standard: {
@@ -5528,7 +5571,6 @@ var components$6 = {
       var _ref$theme = _ref.theme,
         palette = _ref$theme.palette,
         spacing = _ref$theme.spacing;
-      var isLight = palette.mode === 'light';
       return {
         '& .MuiOutlinedInput-notchedOutline': {
           border: 'none'
@@ -5538,33 +5580,33 @@ var components$6 = {
           gap: spacing(1),
           transition: 'all 0.2s',
           padding: spacing(2.5, 3),
-          border: isLight ? "1px solid " + palette.base[300] : "1px solid " + palette.secondary.A100,
-          backgroundColor: isLight ? 'transparent' : palette.secondary.A100,
+          border: "1px solid " + palette.base[300],
+          backgroundColor: 'transparent',
           '&:hover': {
-            border: isLight ? "1px solid " + palette.base[600] : "1px solid " + palette.base.A60,
-            backgroundColor: isLight ? 'transparent' : palette.base.A60
+            border: "1px solid " + palette.base[600],
+            backgroundColor: 'transparent'
           },
           '&.Mui-focused': {
-            border: isLight ? "1.5px solid " + palette.primary[500] : "1px solid " + palette.primary.A80
+            border: "1.5px solid " + palette.primary[500]
           },
           '&.Mui-error': {
-            border: isLight ? "1.5px solid " + palette.error[400] : "1px solid " + palette.error.A60,
-            backgroundColor: isLight ? palette.base.A0 : colorManipulator_js.alpha(palette.error.A100 || '', 0.1)
+            border: "1.5px solid " + palette.error[400],
+            backgroundColor: palette.base.A0
           },
           '&.Mui-disabled': {
-            borderColor: isLight ? palette.base[300] : palette.secondary.A100,
-            backgroundColor: isLight ? 'transparent' : palette.secondary.A100
+            borderColor: palette.base[300],
+            backgroundColor: 'transparent'
           }
         },
         '& .MuiInputBase-input': {
-          color: isLight ? palette.textColor.A80 : palette.textColor.A0,
+          color: palette.textColor[900],
           padding: spacing(0),
           '&.Mui-disabled': {
-            WebkitTextFillColor: isLight ? palette.textColor.A40 : palette.textColor.A50
+            WebkitTextFillColor: palette.textColor[200]
           },
           '&::placeholder': {
             opacity: 1,
-            color: isLight ? palette.textColor.A40 : palette.textColor.A30
+            color: palette.textColor[200]
           }
         }
       };
@@ -5636,25 +5678,24 @@ var components$6 = {
     },
     style: function style(_ref6) {
       var theme = _ref6.theme;
-      var isLight = theme.palette.mode === 'light';
       return {
         '& .MuiInputBase-root': {
           border: 'transparent',
           background: theme.palette.base[200],
           '&.Mui-disabled': {
-            background: isLight ? theme.palette.base[100] : theme.palette.secondary.A100
+            background: theme.palette.base[100]
           },
           '&:hover': {
-            border: isLight ? "1px solid " + theme.palette.base[600] : "1px solid " + theme.palette.base.A60,
-            backgroundColor: isLight ? theme.palette.base[200] : theme.palette.base.A60
+            border: "1px solid " + theme.palette.base[600],
+            backgroundColor: theme.palette.base[200]
           },
           '&.Mui-focused': {
-            border: isLight ? "1.5px solid " + theme.palette.primary[500] : "1px solid " + theme.palette.primary.A80,
-            backgroundColor: isLight ? theme.palette.base[200] : theme.palette.base.A60
+            border: "1.5px solid " + theme.palette.primary[500],
+            backgroundColor: theme.palette.base[200]
           },
           '&.Mui-error': {
-            border: isLight ? "1.5px solid " + theme.palette.error[400] : "1px solid " + theme.palette.error.A60,
-            backgroundColor: isLight ? theme.palette.base[200] : colorManipulator_js.alpha(theme.palette.error.A100 || '', 0.1)
+            border: "1.5px solid " + theme.palette.error[400],
+            backgroundColor: theme.palette.base[200]
           }
         }
       };
@@ -5667,8 +5708,8 @@ var components$6 = {
       var palette = _ref7.theme.palette;
       return {
         '& .MuiInputBase-root': {
-          border: palette.mode === 'light' ? "1px solid " + palette.success.A100 : "1px solid " + palette.success.A40,
-          backgroundColor: palette.mode === 'light' ? palette.base.A0 : colorManipulator_js.alpha(palette.success.A100, 0.1)
+          border: "1px solid " + palette.success.A100,
+          backgroundColor: palette.base.A0
         }
       };
     }
@@ -6259,12 +6300,12 @@ var FormikSelect = function FormikSelect(_ref) {
   }, text));
 };
 
-var _excluded$i = ["title", "helperTextEndAdornment", "helperTextEndAdornmentProps", "titleProps", "helperText", "helperTextIcon", "helperTextProps", "value", "onChange", "valueFormat", "valueFormatOption", "fullWidth", "size"];
-function _handleHelperColor$1(props, key) {
+var _excluded$i = ["title", "helperTextEndAdornment", "helperTextEndAdornmentProps", "titleProps", "helperText", "helperTextIcon", "helperTextProps", "value", "onChange", "valueFormat", "valueFormatOption", "fullWidth", "size", "fill"];
+function _handleHelperColor$1(theme, props, key) {
   var _props$key;
-  if (props.error) return 'error.A100';
-  if (props.success) return 'success.A100';
-  return ((_props$key = props[key]) === null || _props$key === void 0 ? void 0 : _props$key.color) || 'textColor.A60';
+  if (props.error) return theme.palette.error[400];
+  if (props.success) return theme.palette.success[400];
+  return ((_props$key = props[key]) === null || _props$key === void 0 ? void 0 : _props$key.color) || theme.palette.textColor[300];
 }
 /**
  * The TextField let users enter and edit text.
@@ -6295,6 +6336,9 @@ var MuiTextFieldStyled = /*#__PURE__*/styled(MuiTextField, {
   return {};
 });
 var TextField = function TextField(props) {
+  var theme = useTheme();
+  var isDark = theme.palette.mode === 'dark';
+  var palette = theme.palette;
   var _ref = props || {},
     title = _ref.title,
     helperTextEndAdornment = _ref.helperTextEndAdornment,
@@ -6309,7 +6353,9 @@ var TextField = function TextField(props) {
     valueFormatOption = _ref.valueFormatOption,
     fullWidth = _ref.fullWidth,
     size = _ref.size,
+    fill = _ref.fill,
     other = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+  var effectiveFill = isDark ? false : fill;
   if (!valueFormat && !!valueFormatOption) {
     console.warn("'valueFormatOption' Only Work With known 'valueFormat's...");
   }
@@ -6334,10 +6380,11 @@ var TextField = function TextField(props) {
     gap: size === 'sm' ? 1 : 2,
     width: fullWidth ? '100%' : 'unset'
   }, title && React__default.createElement(Typography, Object.assign({
-    color: other.disabled ? 'textColor.A40' : 'textColor.A80'
+    color: other.disabled ? palette.textColor[200] : palette.textColor[900]
   }, titleProps), title), React__default.createElement(MuiTextFieldStyled, Object.assign({
     size: size
   }, other, {
+    fill: effectiveFill,
     value: valueFormat ? _valueFormatHandler(value) : value,
     onChange: valueFormat ? _onChangeFormatHandler : onChange
   })), helperText && React__default.createElement(Stack, {
@@ -6346,7 +6393,7 @@ var TextField = function TextField(props) {
   }, React__default.createElement(Typography, Object.assign({}, helperTextProps, size === 'sm' && {
     variant: 'body3'
   }, {
-    color: _handleHelperColor$1(props, 'helperTextProps')
+    color: _handleHelperColor$1(theme, props, 'helperTextProps')
   }, helperTextIcon && {
     sx: {
       display: 'flex',
@@ -6356,7 +6403,7 @@ var TextField = function TextField(props) {
   }), helperTextIcon && helperTextIcon, helperText), helperTextEndAdornment && React__default.createElement(Typography, Object.assign({}, helperTextEndAdornmentProps, size === 'sm' && {
     variant: 'body3'
   }, {
-    color: _handleHelperColor$1(props, 'helperTextEndAdornmentProps')
+    color: _handleHelperColor$1(theme, props, 'helperTextEndAdornmentProps')
   }), helperTextEndAdornment)));
 };
 TextField.defaultProps = {
@@ -6370,7 +6417,7 @@ TextField.defaultProps = {
   },
   helperTextProps: {
     variant: 'body3',
-    color: 'textColor.A60'
+    color: 'textColor.A50'
   },
   helperTextEndAdornmentProps: {
     variant: 'body3',
@@ -7054,7 +7101,7 @@ var SegmentedControlTab = /*#__PURE__*/styled(function (props) {
   return {
     minWidth: 80,
     fontWeight: 600,
-    color: theme.palette.mode === 'light' ? theme.palette.textColor.A60 : theme.palette.textColor.A40,
+    color: theme.palette.textColor.A60,
     padding: theme.spacing(0, 2),
     position: 'relative',
     minHeight: 24,
@@ -7073,7 +7120,7 @@ var SegmentedControlTab = /*#__PURE__*/styled(function (props) {
       display: 'none'
     },
     '&.Mui-selected': {
-      backgroundColor: theme.palette.mode === 'light' ? theme.palette.base.A0 : theme.palette.secondary.A80,
+      backgroundColor: theme.palette.base.A0,
       color: theme.palette.textColor[900]
     },
     '&.Mui-disabled': {