@rabex-kit/rabex-ui 0.2.50 → 0.2.51

package/dist/rabex-ui.esm.js

@@ -3866,22 +3866,22 @@ var RabexDarkPalette = /*#__PURE__*/_extends({}, base, {
   primary: {
     950: '#B8C1FB',
     900: '#0D2087',
-    800: '#1730AD',
-    700: '#1E3ABA',
+    800: '#1730AC',
+    700: '#2141D0',
     600: '#4363E3',
-    500: '#5176FC',
+    500: '#5176FB',
     400: '#72A0FC',
     300: '#04326A',
-    200: '#002649',
-    100: '#171717',
+    200: '#323546',
+    100: '#323546',
     50: '#121212',
     contrastText: '#000',
-    main: '#5176FC',
-    A100: '#5176FC',
+    main: '#5176FB',
+    A100: '#5176FB',
     A80: '#72A0FC',
-    A60: '#72A0FC',
-    A40: '#002649',
-    A20: '#171717',
+    A60: '#04326A',
+    A40: '#323546',
+    A20: '#323546',
     A10: '#121212'
   },
   secondary: {
@@ -3890,16 +3890,16 @@ var RabexDarkPalette = /*#__PURE__*/_extends({}, base, {
     800: '#577094',
     700: '#869CB8',
     600: '#2D3E4E',
-    500: '#1A1A1A',
+    500: '#242E40',
     400: '#161616',
-    300: '#131313',
+    300: '#171D26',
     200: '#101010',
     100: '#0D0D0D',
     50: '#0D0D0D',
     contrastText: '#000',
-    main: '#1A1A1A',
-    A100: '#1A1A1A',
-    A80: '#131313',
+    main: '#242E40',
+    A100: '#242E40',
+    A80: '#171D26',
     A60: '#101010'
   },
   neutral: {
@@ -3918,30 +3918,30 @@ var RabexDarkPalette = /*#__PURE__*/_extends({}, base, {
   backgroundColor: {
     main: '#E0E2E9',
     950: '#E0E2E9',
-    900: '#333640',
+    900: '#323546',
     800: '#3A3A3D',
     700: '#666666',
     600: '#58667E',
     500: '#808A9D',
     400: '#A6B0C3',
-    300: '#242E40',
-    200: '#1A1A1A',
-    100: '#111111',
-    50: '#0D0D0D'
+    300: '#2E3238',
+    200: '#0D1421',
+    100: '#1F293C',
+    50: '#1A2232'
   },
   success: {
-    400: '#19DE92',
+    400: '#2EBD85',
     300: '#42DFA3',
     200: '#93EDCB',
     100: '#115D41',
     50: '#053322',
     contrastText: '#000',
-    main: '#19DE92',
-    A100: '#19DE92',
+    main: '#2EBD85',
+    A100: '#2EBD85',
     A80: '#42DFA3',
-    A60: '#42DFA3',
-    A40: '#93EDCB',
-    A20: '#115D41'
+    A60: '#93EDCB',
+    A40: '#115D41',
+    A20: '#053322'
   },
   warning: {
     400: '#FFB703',
@@ -3958,14 +3958,14 @@ var RabexDarkPalette = /*#__PURE__*/_extends({}, base, {
     A20: '#1A1A1A'
   },
   error: {
-    400: '#EC5058',
+    400: '#F6465D',
     300: '#F0686F',
     200: '#FF8F94',
     100: '#470005',
     50: '#171717',
     contrastText: '#000',
-    main: '#EC5058',
-    A100: '#EC5058',
+    main: '#F6465D',
+    A100: '#F6465D',
     A80: '#F0686F',
     A60: '#FF8F94',
     A40: '#470005',
@@ -3986,13 +3986,13 @@ var RabexDarkPalette = /*#__PURE__*/_extends({}, base, {
     A20: '#161616'
   },
   textColor: {
-    950: '#FFFFFF',
+    950: '#EAECEF',
     900: '#CED1DD',
     800: '#31343E',
     700: '#333640',
     600: '#3A3A3D',
     500: '#333333',
-    400: '#58667E',
+    400: '#A0A2A4',
     300: '#808A9D',
     200: '#A6B0C3',
     100: '#242E40',
@@ -4003,30 +4003,30 @@ var RabexDarkPalette = /*#__PURE__*/_extends({}, base, {
     A60: '#333640',
     A50: '#3A3A3D',
     A40: '#333333',
-    A30: '#58667E',
+    A30: '#A0A2A4',
     A20: '#808A9D',
     A10: '#242E40',
     A0: '#0D0D0D'
   },
   base: {
     950: '#E0E2E9',
-    900: '#333640',
+    900: '#323546',
     800: '#3A3A3D',
     700: '#666666',
     600: '#58667E',
     500: '#808A9D',
     400: '#A6B0C3',
-    300: '#242E40',
-    200: '#1A1A1A',
-    100: '#111111',
-    50: '#0D0D0D',
-    main: '#17181B',
-    A100: '#17181B',
-    A80: '#E0E2E9',
-    A60: '#333640',
-    A40: '#3A3A3D',
-    A20: '#666666',
-    A0: '#0D0D0D'
+    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',
@@ -4196,7 +4196,7 @@ var RabexTab = {
         return _extends({
           minWidth: 80,
           fontWeight: '600',
-          color: theme.palette.textColor.A60,
+          color: theme.palette.textColor[900],
           padding: theme.spacing(0, 2),
           '&': {
             position: 'relative'
@@ -4236,11 +4236,11 @@ var RabexTab = {
             display: 'none'
           },
           '&.Mui-selected': {
-            backgroundColor: theme.palette.base.A0
+            backgroundColor: 'transparent'
           },
           '&.Mui-disabled': {
             cursor: 'not-allowed',
-            color: theme.palette.textColor.A40
+            color: theme.palette.textColor[200]
           },
           '& .MuiTab-iconWrapper': {
             fontSize: '14px'
@@ -4801,10 +4801,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]
           }
         };
       }
@@ -4815,9 +4815,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.primary.A10
+            backgroundColor: theme.palette.primary[100]
           }
         };
       }
@@ -4828,9 +4828,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.secondary.A10
+            backgroundColor: theme.palette.secondary[400]
           }
         };
       }
@@ -4841,9 +4841,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.error.A10
+            backgroundColor: theme.palette.error[50]
           }
         };
       }
@@ -4854,9 +4854,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.success.A10
+            backgroundColor: theme.palette.success[50]
           }
         };
       }
@@ -5595,14 +5595,14 @@ var components$6 = {
           }
         },
         '& .MuiInputBase-input': {
-          color: palette.textColor.A80,
+          color: palette.textColor[900],
           padding: spacing(0),
           '&.Mui-disabled': {
-            WebkitTextFillColor: palette.textColor.A40
+            WebkitTextFillColor: palette.textColor[200]
           },
           '&::placeholder': {
             opacity: 1,
-            color: palette.textColor.A40
+            color: palette.textColor[200]
           }
         }
       };
@@ -6296,12 +6296,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.
@@ -6332,6 +6332,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,
@@ -6346,7 +6349,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...");
   }
@@ -6371,10 +6376,11 @@ var TextField = function TextField(props) {
     gap: size === 'sm' ? 1 : 2,
     width: fullWidth ? '100%' : 'unset'
   }, title && React.createElement(Typography, Object.assign({
-    color: other.disabled ? 'textColor.A40' : 'textColor.A80'
+    color: other.disabled ? palette.textColor[200] : palette.textColor[900]
   }, titleProps), title), React.createElement(MuiTextFieldStyled, Object.assign({
     size: size
   }, other, {
+    fill: effectiveFill,
     value: valueFormat ? _valueFormatHandler(value) : value,
     onChange: valueFormat ? _onChangeFormatHandler : onChange
   })), helperText && React.createElement(Stack, {
@@ -6383,7 +6389,7 @@ var TextField = function TextField(props) {
   }, React.createElement(Typography, Object.assign({}, helperTextProps, size === 'sm' && {
     variant: 'body3'
   }, {
-    color: _handleHelperColor$1(props, 'helperTextProps')
+    color: _handleHelperColor$1(theme, props, 'helperTextProps')
   }, helperTextIcon && {
     sx: {
       display: 'flex',
@@ -6393,7 +6399,7 @@ var TextField = function TextField(props) {
   }), helperTextIcon && helperTextIcon, helperText), helperTextEndAdornment && React.createElement(Typography, Object.assign({}, helperTextEndAdornmentProps, size === 'sm' && {
     variant: 'body3'
   }, {
-    color: _handleHelperColor$1(props, 'helperTextEndAdornmentProps')
+    color: _handleHelperColor$1(theme, props, 'helperTextEndAdornmentProps')
   }), helperTextEndAdornment)));
 };
 TextField.defaultProps = {
@@ -6407,7 +6413,7 @@ TextField.defaultProps = {
   },
   helperTextProps: {
     variant: 'body3',
-    color: 'textColor.A60'
+    color: 'textColor.A50'
   },
   helperTextEndAdornmentProps: {
     variant: 'body3',