@superdispatch/ui 0.34.0 → 0.35.1

package/dist-src/avatar/AvatarOverrides.js

@@ -13,7 +13,7 @@ export function overrideAvatar(theme) {
     }),
     colorDefault: {
       color: ColorDynamic.Dark300,
-      backgroundColor: ColorDynamic.Silver300
+      backgroundColor: ColorDynamic.Silver400
     }
   };
 }

package/dist-src/card-button/CardButton.js

@@ -22,16 +22,19 @@ var useStyles = /*#__PURE__*/makeStyles(theme => ({
     transition: theme.transitions.create(['color', 'box-shadow', 'border-color', 'background-color'])
   },
   disabled: {
-    color: ColorDynamic.Dark200,
+    color: ColorDynamic.Dark100,
     borderColor: ColorDynamic.Silver500,
-    backgroundColor: ColorDynamic.Silver100
+    backgroundColor: ColorDynamic.Silver400Alpha30,
+    '& $hint': {
+      color: ColorDynamic.Dark100
+    }
   },
   error: {
     color: ColorDynamic.Red500,
     borderColor: ColorDynamic.Red500,
     backgroundColor: ColorDynamic.Red50,
     '&:focus': {
-      backgroundColor: ColorDynamic.Red75
+      backgroundColor: ColorDynamic.Red300Aplha20
     }
   },
   primary: {

package/dist-src/checkbox/CheckboxOverrides.js

@@ -1,5 +1,5 @@
 import { SvgIcon } from '@material-ui/core';
-import { ColorDynamic } from "../theme/Color.js";
+import { Color, ColorDynamic } from "../theme/Color.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function overrideCheckbox(theme) {
   theme.props.MuiCheckbox = {
@@ -24,7 +24,7 @@ export function overrideCheckbox(theme) {
         fill: "currentColor",
         rx: "2"
       }), /*#__PURE__*/_jsx("path", {
-        fill: ColorDynamic.White,
+        fill: Color.White,
         d: "M15.73 8l-.63.63c-1.43 1.43-2.94 3.05-4.37 4.5l-1.9-1.57-.7-.57L7 12.38l.7.57 2.53 2.09.63.52.58-.58c1.6-1.62 3.35-3.5 4.93-5.08l.63-.63L15.73 8z"
       })]
     }),

package/dist-src/radio/RadioOverrides.js

@@ -1,5 +1,5 @@
 import { SvgIcon } from '@material-ui/core';
-import { ColorDynamic } from "../theme/Color.js";
+import { Color, ColorDynamic } from "../theme/Color.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function overrideRadio(theme) {
   theme.props.MuiRadio = {
@@ -24,7 +24,7 @@ export function overrideRadio(theme) {
         cx: "12",
         cy: "12",
         r: "4",
-        fill: ColorDynamic.White
+        fill: Color.White
       })]
     })
   };

package/dist-src/switch/SwitchOverrides.js

@@ -1,4 +1,4 @@
-import { ColorDynamic } from "../theme/Color.js";
+import { Color, ColorDynamic } from "../theme/Color.js";
 export function overrideSwitch(theme) {
   var sm = theme.breakpoints.up('sm');
   theme.props.MuiSwitch = {
@@ -29,7 +29,7 @@ export function overrideSwitch(theme) {
       }
     },
     thumb: {
-      color: ColorDynamic.White,
+      color: Color.White,
       boxShadow: undefined,
       width: theme.spacing(3),
       height: theme.spacing(3),

package/dist-src/tabs/TabsOverrides.js

@@ -17,6 +17,9 @@ export function overrideTabs(theme) {
       transition: theme.transitions.create('opacity', {
         duration: theme.transitions.duration.short
       })
+    },
+    indicator: {
+      backgroundColor: ColorDynamic.Blue500
     }
   };
   theme.overrides.MuiTab = {
@@ -34,7 +37,10 @@ export function overrideTabs(theme) {
     textColorPrimary: {
       color: ColorDynamic.Dark500,
       '&:hover, &:focus': {
-        color: ColorDynamic.Blue300
+        color: ColorDynamic.Blue500
+      },
+      '&$selected': {
+        color: ColorDynamic.Blue500
       }
     }
   };

package/dist-src/tag/Tag.js

@@ -5,7 +5,7 @@ import { Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
 import cx from 'clsx';
 import { forwardRef } from 'react';
-import { ColorDynamic } from "../theme/Color.js";
+import { Color, ColorDynamic } from "../theme/Color.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 var useStyles = /*#__PURE__*/makeStyles(theme => ({
   root: {
@@ -46,9 +46,10 @@ var useStyles = /*#__PURE__*/makeStyles(theme => ({
     }
   },
   variantBold: {
-    color: ColorDynamic.White,
+    color: Color.White,
     '&$colorGrey': {
-      backgroundColor: ColorDynamic.Dark300
+      backgroundColor: ColorDynamic.Dark300,
+      color: ColorDynamic.White
     },
     '&$colorBlue': {
       backgroundColor: ColorDynamic.Blue300

package/dist-src/text-field/TextFieldOverrides.js

@@ -42,7 +42,7 @@ export function overrideTextField(theme) {
   theme.overrides.MuiInputBase = {
     root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
       '&$disabled': {
-        backgroundColor: ColorDynamic.Silver30
+        backgroundColor: ColorDynamic.Silver400Alpha30
       },
       '&$error': {
         borderColor: ColorDynamic.Red500

package/dist-src/theme/Color.js

@@ -67,6 +67,7 @@ export var Color;
   Color["Silver200"] = "#F3F5F8";
   Color["Silver400"] = "#E1E5EA";
   Color["Silver500"] = "#C4CDD5";
+  Color["Silver400Alpha30"] = "rgba(225, 229, 234, 0.3)";
   Color["Blue50"] = "#EBF4FF";
   Color["Blue300"] = "#0070F5";
   Color["Blue500"] = "#0063DB";
@@ -78,6 +79,7 @@ export var Color;
   Color["Purple500"] = "#473ABB";
   Color["Red50"] = "#FFEDEB";
   Color["Red300"] = "#E5230D";
+  Color["Red300Aplha20"] = "rgba(229, 35, 13, 0.2)";
   Color["Red500"] = "#C31909";
   Color["Teal50"] = "#E3F6FC";
   Color["Teal300"] = "#007EAB";
@@ -151,6 +153,7 @@ export var ColorDark;
   ColorDark["Silver200"] = "#0D1017";
   ColorDark["Silver400"] = "#30373D";
   ColorDark["Silver500"] = "#47505B";
+  ColorDark["Silver400Alpha30"] = "rgba(48, 55, 61, 0.3)";
   ColorDark["Blue50"] = "#0E2947";
   ColorDark["Blue300"] = "#0070F5";
   ColorDark["Blue500"] = "#55ADFF";
@@ -162,6 +165,7 @@ export var ColorDark;
   ColorDark["Purple500"] = "#BFA0FF";
   ColorDark["Red50"] = "#3D0A06";
   ColorDark["Red300"] = "#E5230D";
+  ColorDark["Red300Aplha20"] = "rgba(233, 27, 12, 0.3)";
   ColorDark["Red500"] = "#FF6359";
   ColorDark["Teal50"] = "#11333D";
   ColorDark["Teal300"] = "#007EAB";
@@ -231,6 +235,7 @@ export var ColorDynamic;
   ColorDynamic["Silver200"] = "var(--sd-silver-200)";
   ColorDynamic["Silver400"] = "var(--sd-silver-400)";
   ColorDynamic["Silver500"] = "var(--sd-silver-500)";
+  ColorDynamic["Silver400Alpha30"] = "var(--sd-silver-400-alpha-30)";
   ColorDynamic["Blue50"] = "var(--sd-blue-50)";
   ColorDynamic["Blue300"] = "var(--sd-blue-300)";
   ColorDynamic["Blue500"] = "var(--sd-blue-500)";
@@ -243,6 +248,7 @@ export var ColorDynamic;
   ColorDynamic["Red50"] = "var(--sd-red-50)";
   ColorDynamic["Red300"] = "var(--sd-red-300)";
   ColorDynamic["Red500"] = "var(--sd-red-500)";
+  ColorDynamic["Red300Aplha20"] = "var(--sd-red-300-alpha-20)";
   ColorDynamic["Teal50"] = "var(--sd-teal-50)";
   ColorDynamic["Teal300"] = "var(--sd-teal-300)";
   ColorDynamic["Teal500"] = "var(--sd-teal-500)";

package/dist-src/theme/GlobalStyles.js

@@ -5,5 +5,5 @@ export var GlobalStyles = /*#__PURE__*/createGlobalStyle(_ref => {
     theme
   } = _ref;
   var color = theme.palette.type === 'dark' ? ColorDark : Color;
-  return "\n    :root{\n      --sd-white: ".concat(color.White, ";\n      --sd-white-50: ").concat(color.White50, ";\n      --sd-white-40: ").concat(color.White40, ";\n      --sd-white-20: ").concat(color.White20, ";\n      --sd-white-10: ").concat(color.White10, ";\n      --sd-white-08: ").concat(color.White08, ";\n      --sd-transparent: ").concat(color.Transparent, ";\n\n      --sd-black: ").concat(color.Black, ";\n      --sd-black-50: ").concat(color.Black50, ";\n      --sd-black-20: ").concat(color.Black20, ";\n\n      --sd-dark-30: ").concat(color.Dark30, ";\n      --sd-blue-30: ").concat(color.Blue30, ";\n      --sd-green-30: ").concat(color.Green30, ";\n      --sd-red-30: ").concat(color.Red30, ";\n      --sd-silver-30: ").concat(color.Silver30, ";\n\n      --sd-blue-10: ").concat(color.Blue10, ";\n      --sd-red-10: ").concat(color.Red10, ";\n\n      /* Legacy Neutral Colors */\n      --sd-grey-100: ").concat(color.Grey100, "; /* @deprecated Use Dark100 */\n      --sd-grey-200: ").concat(color.Grey200, "; /* @deprecated Use Dark200 */\n      --sd-grey-300: ").concat(color.Grey300, "; /* @deprecated Use Dark300 */\n      --sd-grey-400: ").concat(color.Grey400, "; /* @deprecated Use Dark400 */\n      --sd-grey-450: ").concat(color.Grey450, "; /* @deprecated Use Dark450 */\n      --sd-grey-500: ").concat(color.Grey500, "; /* @deprecated Use Dark500 */\n\n      --sd-dark-200: ").concat(color.Dark200, "; /* @deprecated */\n      --sd-dark-400: ").concat(color.Dark400, "; /* @deprecated */\n      --sd-dark-450: ").concat(color.Dark450, "; /* @deprecated */\n\n      --sd-silver-100: ").concat(color.Silver100, "; /* @deprecated */\n      --sd-silver-300: ").concat(color.Silver300, "; /* @deprecated */\n\n      /* Legacy Extended Palette */\n      --sd-blue-75: ").concat(color.Blue75, "; /* @deprecated */\n      --sd-blue-100: ").concat(color.Blue100, "; /* @deprecated */\n      --sd-blue-200: ").concat(color.Blue200, "; /* @deprecated */\n      --sd-blue-400: ").concat(color.Blue400, "; /* @deprecated */\n\n      --sd-green-75: ").concat(color.Green75, "; /* @deprecated */\n      --sd-green-100: ").concat(color.Green100, "; /* @deprecated */\n      --sd-green-200: ").concat(color.Green200, "; /* @deprecated */\n      --sd-green-400: ").concat(color.Green400, "; /* @deprecated */\n\n      --sd-purple-75: ").concat(color.Purple75, "; /* @deprecated */\n      --sd-purple-100: ").concat(color.Purple100, "; /* @deprecated */\n      --sd-purple-200: ").concat(color.Purple200, "; /* @deprecated */\n      --sd-purple-400: ").concat(color.Purple400, "; /* @deprecated */\n\n      --sd-red-75: ").concat(color.Red75, "; /* @deprecated */\n      --sd-red-100: ").concat(color.Red100, "; /* @deprecated */\n      --sd-red-200: ").concat(color.Red200, "; /* @deprecated */\n      --sd-red-400: ").concat(color.Red400, "; /* @deprecated */\n\n      --sd-teal-75: ").concat(color.Teal75, "; /* @deprecated */\n      --sd-teal-100: ").concat(color.Teal100, "; /* @deprecated */\n      --sd-teal-200: ").concat(color.Teal200, "; /* @deprecated */\n      --sd-teal-400: ").concat(color.Teal400, "; /* @deprecated */\n\n      --sd-yellow-75: ").concat(color.Yellow75, "; /* @deprecated */\n      --sd-yellow-100: ").concat(color.Yellow100, "; /* @deprecated */\n      --sd-yellow-200: ").concat(color.Yellow200, "; /* @deprecated */\n      --sd-yellow-400: ").concat(color.Yellow400, "; /* @deprecated */\n      --sd-dark-50: ").concat(color.Dark50, ";\n      /* extended palette */\n    \n      --sd-blue-50: ").concat(color.Blue50, ";\n      --sd-blue-500: ").concat(color.Blue500, ";\n      --sd-blue-300: ").concat(color.Blue300, ";\n      --sd-green-300: ").concat(color.Green300, ";\n      --sd-green-500: ").concat(color.Green500, ";\n      --sd-green-50: ").concat(color.Green50, ";\n      --sd-yellow-300: ").concat(color.Yellow300, ";\n      --sd-yellow-500: ").concat(color.Yellow500, ";\n      --sd-yellow-50: ").concat(color.Yellow50, ";\n      --sd-red-300: ").concat(color.Red300, ";\n      --sd-red-500: ").concat(color.Red500, ";\n      --sd-red-50: ").concat(color.Red50, ";\n      --sd-purple-300: ").concat(color.Purple300, ";\n      --sd-purple-500: ").concat(color.Purple500, ";\n      --sd-purple-50: ").concat(color.Purple50, ";\n      --sd-teal-300: ").concat(color.Teal300, ";\n      --sd-teal-500: ").concat(color.Teal500, ";\n      --sd-teal-50: ").concat(color.Teal50, ";\n      --sd-silver-500: ").concat(color.Silver500, ";\n      --sd-silver-200: ").concat(color.Silver200, ";\n      --sd-silver-400: ").concat(color.Silver400, ";\n      --sd-dark-100: ").concat(color.Dark100, ";\n      --sd-dark-300: ").concat(color.Dark300, ";\n      --sd-dark-500: ").concat(color.Dark500, ";\n    }\n  ");
+  return "\n    :root{\n      --sd-white: ".concat(color.White, ";\n      --sd-white-50: ").concat(color.White50, ";\n      --sd-white-40: ").concat(color.White40, ";\n      --sd-white-20: ").concat(color.White20, ";\n      --sd-white-10: ").concat(color.White10, ";\n      --sd-white-08: ").concat(color.White08, ";\n      --sd-transparent: ").concat(color.Transparent, ";\n\n      --sd-black: ").concat(color.Black, ";\n      --sd-black-50: ").concat(color.Black50, ";\n      --sd-black-20: ").concat(color.Black20, ";\n\n      --sd-dark-30: ").concat(color.Dark30, ";\n      --sd-blue-30: ").concat(color.Blue30, ";\n      --sd-green-30: ").concat(color.Green30, ";\n      --sd-red-30: ").concat(color.Red30, ";\n      --sd-red-300-alpha-20: ").concat(color.Red300Aplha20, ";\n      --sd-silver-30: ").concat(color.Silver30, ";\n\n      --sd-blue-10: ").concat(color.Blue10, ";\n      --sd-red-10: ").concat(color.Red10, ";\n\n      /* Legacy Neutral Colors */\n      --sd-grey-100: ").concat(color.Grey100, "; /* @deprecated Use Dark100 */\n      --sd-grey-200: ").concat(color.Grey200, "; /* @deprecated Use Dark200 */\n      --sd-grey-300: ").concat(color.Grey300, "; /* @deprecated Use Dark300 */\n      --sd-grey-400: ").concat(color.Grey400, "; /* @deprecated Use Dark400 */\n      --sd-grey-450: ").concat(color.Grey450, "; /* @deprecated Use Dark450 */\n      --sd-grey-500: ").concat(color.Grey500, "; /* @deprecated Use Dark500 */\n\n      --sd-dark-200: ").concat(color.Dark200, "; /* @deprecated */\n      --sd-dark-400: ").concat(color.Dark400, "; /* @deprecated */\n      --sd-dark-450: ").concat(color.Dark450, "; /* @deprecated */\n\n      --sd-silver-100: ").concat(color.Silver100, "; /* @deprecated */\n      --sd-silver-300: ").concat(color.Silver300, "; /* @deprecated */\n\n      /* Legacy Extended Palette */\n      --sd-blue-75: ").concat(color.Blue75, "; /* @deprecated */\n      --sd-blue-100: ").concat(color.Blue100, "; /* @deprecated */\n      --sd-blue-200: ").concat(color.Blue200, "; /* @deprecated */\n      --sd-blue-400: ").concat(color.Blue400, "; /* @deprecated */\n\n      --sd-green-75: ").concat(color.Green75, "; /* @deprecated */\n      --sd-green-100: ").concat(color.Green100, "; /* @deprecated */\n      --sd-green-200: ").concat(color.Green200, "; /* @deprecated */\n      --sd-green-400: ").concat(color.Green400, "; /* @deprecated */\n\n      --sd-purple-75: ").concat(color.Purple75, "; /* @deprecated */\n      --sd-purple-100: ").concat(color.Purple100, "; /* @deprecated */\n      --sd-purple-200: ").concat(color.Purple200, "; /* @deprecated */\n      --sd-purple-400: ").concat(color.Purple400, "; /* @deprecated */\n\n      --sd-red-75: ").concat(color.Red75, "; /* @deprecated */\n      --sd-red-100: ").concat(color.Red100, "; /* @deprecated */\n      --sd-red-200: ").concat(color.Red200, "; /* @deprecated */\n      --sd-red-400: ").concat(color.Red400, "; /* @deprecated */\n\n      --sd-teal-75: ").concat(color.Teal75, "; /* @deprecated */\n      --sd-teal-100: ").concat(color.Teal100, "; /* @deprecated */\n      --sd-teal-200: ").concat(color.Teal200, "; /* @deprecated */\n      --sd-teal-400: ").concat(color.Teal400, "; /* @deprecated */\n\n      --sd-yellow-75: ").concat(color.Yellow75, "; /* @deprecated */\n      --sd-yellow-100: ").concat(color.Yellow100, "; /* @deprecated */\n      --sd-yellow-200: ").concat(color.Yellow200, "; /* @deprecated */\n      --sd-yellow-400: ").concat(color.Yellow400, "; /* @deprecated */\n      --sd-dark-50: ").concat(color.Dark50, ";\n      /* extended palette */\n    \n      --sd-blue-50: ").concat(color.Blue50, ";\n      --sd-blue-500: ").concat(color.Blue500, ";\n      --sd-blue-300: ").concat(color.Blue300, ";\n      --sd-green-300: ").concat(color.Green300, ";\n      --sd-green-500: ").concat(color.Green500, ";\n      --sd-green-50: ").concat(color.Green50, ";\n      --sd-yellow-300: ").concat(color.Yellow300, ";\n      --sd-yellow-500: ").concat(color.Yellow500, ";\n      --sd-yellow-50: ").concat(color.Yellow50, ";\n      --sd-red-300: ").concat(color.Red300, ";\n      --sd-red-500: ").concat(color.Red500, ";\n      --sd-red-50: ").concat(color.Red50, ";\n      --sd-purple-300: ").concat(color.Purple300, ";\n      --sd-purple-500: ").concat(color.Purple500, ";\n      --sd-purple-50: ").concat(color.Purple50, ";\n      --sd-teal-300: ").concat(color.Teal300, ";\n      --sd-teal-500: ").concat(color.Teal500, ";\n      --sd-teal-50: ").concat(color.Teal50, ";\n      --sd-silver-500: ").concat(color.Silver500, ";\n      --sd-silver-200: ").concat(color.Silver200, ";\n      --sd-silver-400: ").concat(color.Silver400, ";\n      --sd-silver-400-alpha-30: ").concat(color.Silver400Alpha30, ";\n      --sd-dark-100: ").concat(color.Dark100, ";\n      --sd-dark-300: ").concat(color.Dark300, ";\n      --sd-dark-500: ").concat(color.Dark500, ";\n    }\n  ");
 });

package/dist-src/theme/ThemeProvider.js

@@ -47,8 +47,8 @@ function createSuperDispatchTheme(type) {
         main: color.Red300
       },
       action: {
-        hover: color.Silver100,
-        selected: color.Silver300,
+        hover: color.Silver200,
+        selected: color.Blue50,
         disabled: color.Silver400
       },
       text: {
@@ -57,7 +57,14 @@ function createSuperDispatchTheme(type) {
         hint: color.Dark100,
         disabled: color.Dark100
       },
-      divider: color.Silver400
+      common: {
+        white: color.White,
+        black: color.Black
+      },
+      divider: color.Silver400,
+      background: {
+        paper: color.White
+      }
     },
     typography: createTypographyOptions(breakpoints),
     props: {},

package/dist-types/index.d.ts

@@ -457,6 +457,7 @@ declare enum Color {
     Silver200 = "#F3F5F8",
     Silver400 = "#E1E5EA",
     Silver500 = "#C4CDD5",
+    Silver400Alpha30 = "rgba(225, 229, 234, 0.3)",
     Blue50 = "#EBF4FF",
     Blue300 = "#0070F5",
     Blue500 = "#0063DB",
@@ -468,6 +469,7 @@ declare enum Color {
     Purple500 = "#473ABB",
     Red50 = "#FFEDEB",
     Red300 = "#E5230D",
+    Red300Aplha20 = "rgba(229, 35, 13, 0.2)",
     Red500 = "#C31909",
     Teal50 = "#E3F6FC",
     Teal300 = "#007EAB",
@@ -571,6 +573,7 @@ declare enum ColorDark {
     Silver200 = "#0D1017",
     Silver400 = "#30373D",
     Silver500 = "#47505B",
+    Silver400Alpha30 = "rgba(48, 55, 61, 0.3)",
     Blue50 = "#0E2947",
     Blue300 = "#0070F5",
     Blue500 = "#55ADFF",
@@ -582,6 +585,7 @@ declare enum ColorDark {
     Purple500 = "#BFA0FF",
     Red50 = "#3D0A06",
     Red300 = "#E5230D",
+    Red300Aplha20 = "rgba(233, 27, 12, 0.3)",
     Red500 = "#FF6359",
     Teal50 = "#11333D",
     Teal300 = "#007EAB",
@@ -685,6 +689,7 @@ declare enum ColorDynamic {
     Silver200 = "var(--sd-silver-200)",
     Silver400 = "var(--sd-silver-400)",
     Silver500 = "var(--sd-silver-500)",
+    Silver400Alpha30 = "var(--sd-silver-400-alpha-30)",
     Blue50 = "var(--sd-blue-50)",
     Blue300 = "var(--sd-blue-300)",
     Blue500 = "var(--sd-blue-500)",
@@ -697,6 +702,7 @@ declare enum ColorDynamic {
     Red50 = "var(--sd-red-50)",
     Red300 = "var(--sd-red-300)",
     Red500 = "var(--sd-red-500)",
+    Red300Aplha20 = "var(--sd-red-300-alpha-20)",
     Teal50 = "var(--sd-teal-50)",
     Teal300 = "var(--sd-teal-300)",
     Teal500 = "var(--sd-teal-500)",

package/dist-web/index.js

@@ -475,6 +475,7 @@ var Color;
   Color["Silver200"] = "#F3F5F8";
   Color["Silver400"] = "#E1E5EA";
   Color["Silver500"] = "#C4CDD5";
+  Color["Silver400Alpha30"] = "rgba(225, 229, 234, 0.3)";
   Color["Blue50"] = "#EBF4FF";
   Color["Blue300"] = "#0070F5";
   Color["Blue500"] = "#0063DB";
@@ -486,6 +487,7 @@ var Color;
   Color["Purple500"] = "#473ABB";
   Color["Red50"] = "#FFEDEB";
   Color["Red300"] = "#E5230D";
+  Color["Red300Aplha20"] = "rgba(229, 35, 13, 0.2)";
   Color["Red500"] = "#C31909";
   Color["Teal50"] = "#E3F6FC";
   Color["Teal300"] = "#007EAB";
@@ -559,6 +561,7 @@ var ColorDark;
   ColorDark["Silver200"] = "#0D1017";
   ColorDark["Silver400"] = "#30373D";
   ColorDark["Silver500"] = "#47505B";
+  ColorDark["Silver400Alpha30"] = "rgba(48, 55, 61, 0.3)";
   ColorDark["Blue50"] = "#0E2947";
   ColorDark["Blue300"] = "#0070F5";
   ColorDark["Blue500"] = "#55ADFF";
@@ -570,6 +573,7 @@ var ColorDark;
   ColorDark["Purple500"] = "#BFA0FF";
   ColorDark["Red50"] = "#3D0A06";
   ColorDark["Red300"] = "#E5230D";
+  ColorDark["Red300Aplha20"] = "rgba(233, 27, 12, 0.3)";
   ColorDark["Red500"] = "#FF6359";
   ColorDark["Teal50"] = "#11333D";
   ColorDark["Teal300"] = "#007EAB";
@@ -639,6 +643,7 @@ var ColorDynamic;
   ColorDynamic["Silver200"] = "var(--sd-silver-200)";
   ColorDynamic["Silver400"] = "var(--sd-silver-400)";
   ColorDynamic["Silver500"] = "var(--sd-silver-500)";
+  ColorDynamic["Silver400Alpha30"] = "var(--sd-silver-400-alpha-30)";
   ColorDynamic["Blue50"] = "var(--sd-blue-50)";
   ColorDynamic["Blue300"] = "var(--sd-blue-300)";
   ColorDynamic["Blue500"] = "var(--sd-blue-500)";
@@ -651,6 +656,7 @@ var ColorDynamic;
   ColorDynamic["Red50"] = "var(--sd-red-50)";
   ColorDynamic["Red300"] = "var(--sd-red-300)";
   ColorDynamic["Red500"] = "var(--sd-red-500)";
+  ColorDynamic["Red300Aplha20"] = "var(--sd-red-300-alpha-20)";
   ColorDynamic["Teal50"] = "var(--sd-teal-50)";
   ColorDynamic["Teal300"] = "var(--sd-teal-300)";
   ColorDynamic["Teal500"] = "var(--sd-teal-500)";
@@ -835,16 +841,19 @@ var useStyles$3 = /*#__PURE__*/makeStyles(theme => ({
     transition: theme.transitions.create(['color', 'box-shadow', 'border-color', 'background-color'])
   },
   disabled: {
-    color: ColorDynamic.Dark200,
+    color: ColorDynamic.Dark100,
     borderColor: ColorDynamic.Silver500,
-    backgroundColor: ColorDynamic.Silver100
+    backgroundColor: ColorDynamic.Silver400Alpha30,
+    '& $hint': {
+      color: ColorDynamic.Dark100
+    }
   },
   error: {
     color: ColorDynamic.Red500,
     borderColor: ColorDynamic.Red500,
     backgroundColor: ColorDynamic.Red50,
     '&:focus': {
-      backgroundColor: ColorDynamic.Red75
+      backgroundColor: ColorDynamic.Red300Aplha20
     }
   },
   primary: {
@@ -2521,9 +2530,10 @@ var useStyles$c = /*#__PURE__*/makeStyles(theme => ({
     }
   },
   variantBold: {
-    color: ColorDynamic.White,
+    color: Color.White,
     '&$colorGrey': {
-      backgroundColor: ColorDynamic.Dark300
+      backgroundColor: ColorDynamic.Dark300,
+      color: ColorDynamic.White
     },
     '&$colorBlue': {
       backgroundColor: ColorDynamic.Blue300
@@ -2677,7 +2687,7 @@ function overrideAvatar(theme) {
     }),
     colorDefault: {
       color: ColorDynamic.Dark300,
-      backgroundColor: ColorDynamic.Silver300
+      backgroundColor: ColorDynamic.Silver400
     }
   };
 }
@@ -2952,7 +2962,7 @@ function overrideCheckbox(theme) {
         fill: "currentColor",
         rx: "2"
       }), /*#__PURE__*/jsx("path", {
-        fill: ColorDynamic.White,
+        fill: Color.White,
         d: "M15.73 8l-.63.63c-1.43 1.43-2.94 3.05-4.37 4.5l-1.9-1.57-.7-.57L7 12.38l.7.57 2.53 2.09.63.52.58-.58c1.6-1.62 3.35-3.5 4.93-5.08l.63-.63L15.73 8z"
       })]
     }),
@@ -3392,7 +3402,7 @@ function overrideRadio(theme) {
         cx: "12",
         cy: "12",
         r: "4",
-        fill: ColorDynamic.White
+        fill: Color.White
       })]
     })
   };
@@ -3512,7 +3522,7 @@ function overrideSwitch(theme) {
       }
     },
     thumb: {
-      color: ColorDynamic.White,
+      color: Color.White,
       boxShadow: undefined,
       width: theme.spacing(3),
       height: theme.spacing(3),
@@ -3586,6 +3596,9 @@ function overrideTabs(theme) {
       transition: theme.transitions.create('opacity', {
         duration: theme.transitions.duration.short
       })
+    },
+    indicator: {
+      backgroundColor: ColorDynamic.Blue500
     }
   };
   theme.overrides.MuiTab = {
@@ -3603,7 +3616,10 @@ function overrideTabs(theme) {
     textColorPrimary: {
       color: ColorDynamic.Dark500,
       '&:hover, &:focus': {
-        color: ColorDynamic.Blue300
+        color: ColorDynamic.Blue500
+      },
+      '&$selected': {
+        color: ColorDynamic.Blue500
       }
     }
   };
@@ -3648,7 +3664,7 @@ function overrideTextField(theme) {
   theme.overrides.MuiInputBase = {
     root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
       '&$disabled': {
-        backgroundColor: ColorDynamic.Silver30
+        backgroundColor: ColorDynamic.Silver400Alpha30
       },
       '&$error': {
         borderColor: ColorDynamic.Red500
@@ -4013,7 +4029,7 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_ref => {
     theme
   } = _ref;
   var color = theme.palette.type === 'dark' ? ColorDark : Color;
-  return "\n    :root{\n      --sd-white: ".concat(color.White, ";\n      --sd-white-50: ").concat(color.White50, ";\n      --sd-white-40: ").concat(color.White40, ";\n      --sd-white-20: ").concat(color.White20, ";\n      --sd-white-10: ").concat(color.White10, ";\n      --sd-white-08: ").concat(color.White08, ";\n      --sd-transparent: ").concat(color.Transparent, ";\n\n      --sd-black: ").concat(color.Black, ";\n      --sd-black-50: ").concat(color.Black50, ";\n      --sd-black-20: ").concat(color.Black20, ";\n\n      --sd-dark-30: ").concat(color.Dark30, ";\n      --sd-blue-30: ").concat(color.Blue30, ";\n      --sd-green-30: ").concat(color.Green30, ";\n      --sd-red-30: ").concat(color.Red30, ";\n      --sd-silver-30: ").concat(color.Silver30, ";\n\n      --sd-blue-10: ").concat(color.Blue10, ";\n      --sd-red-10: ").concat(color.Red10, ";\n\n      /* Legacy Neutral Colors */\n      --sd-grey-100: ").concat(color.Grey100, "; /* @deprecated Use Dark100 */\n      --sd-grey-200: ").concat(color.Grey200, "; /* @deprecated Use Dark200 */\n      --sd-grey-300: ").concat(color.Grey300, "; /* @deprecated Use Dark300 */\n      --sd-grey-400: ").concat(color.Grey400, "; /* @deprecated Use Dark400 */\n      --sd-grey-450: ").concat(color.Grey450, "; /* @deprecated Use Dark450 */\n      --sd-grey-500: ").concat(color.Grey500, "; /* @deprecated Use Dark500 */\n\n      --sd-dark-200: ").concat(color.Dark200, "; /* @deprecated */\n      --sd-dark-400: ").concat(color.Dark400, "; /* @deprecated */\n      --sd-dark-450: ").concat(color.Dark450, "; /* @deprecated */\n\n      --sd-silver-100: ").concat(color.Silver100, "; /* @deprecated */\n      --sd-silver-300: ").concat(color.Silver300, "; /* @deprecated */\n\n      /* Legacy Extended Palette */\n      --sd-blue-75: ").concat(color.Blue75, "; /* @deprecated */\n      --sd-blue-100: ").concat(color.Blue100, "; /* @deprecated */\n      --sd-blue-200: ").concat(color.Blue200, "; /* @deprecated */\n      --sd-blue-400: ").concat(color.Blue400, "; /* @deprecated */\n\n      --sd-green-75: ").concat(color.Green75, "; /* @deprecated */\n      --sd-green-100: ").concat(color.Green100, "; /* @deprecated */\n      --sd-green-200: ").concat(color.Green200, "; /* @deprecated */\n      --sd-green-400: ").concat(color.Green400, "; /* @deprecated */\n\n      --sd-purple-75: ").concat(color.Purple75, "; /* @deprecated */\n      --sd-purple-100: ").concat(color.Purple100, "; /* @deprecated */\n      --sd-purple-200: ").concat(color.Purple200, "; /* @deprecated */\n      --sd-purple-400: ").concat(color.Purple400, "; /* @deprecated */\n\n      --sd-red-75: ").concat(color.Red75, "; /* @deprecated */\n      --sd-red-100: ").concat(color.Red100, "; /* @deprecated */\n      --sd-red-200: ").concat(color.Red200, "; /* @deprecated */\n      --sd-red-400: ").concat(color.Red400, "; /* @deprecated */\n\n      --sd-teal-75: ").concat(color.Teal75, "; /* @deprecated */\n      --sd-teal-100: ").concat(color.Teal100, "; /* @deprecated */\n      --sd-teal-200: ").concat(color.Teal200, "; /* @deprecated */\n      --sd-teal-400: ").concat(color.Teal400, "; /* @deprecated */\n\n      --sd-yellow-75: ").concat(color.Yellow75, "; /* @deprecated */\n      --sd-yellow-100: ").concat(color.Yellow100, "; /* @deprecated */\n      --sd-yellow-200: ").concat(color.Yellow200, "; /* @deprecated */\n      --sd-yellow-400: ").concat(color.Yellow400, "; /* @deprecated */\n      --sd-dark-50: ").concat(color.Dark50, ";\n      /* extended palette */\n    \n      --sd-blue-50: ").concat(color.Blue50, ";\n      --sd-blue-500: ").concat(color.Blue500, ";\n      --sd-blue-300: ").concat(color.Blue300, ";\n      --sd-green-300: ").concat(color.Green300, ";\n      --sd-green-500: ").concat(color.Green500, ";\n      --sd-green-50: ").concat(color.Green50, ";\n      --sd-yellow-300: ").concat(color.Yellow300, ";\n      --sd-yellow-500: ").concat(color.Yellow500, ";\n      --sd-yellow-50: ").concat(color.Yellow50, ";\n      --sd-red-300: ").concat(color.Red300, ";\n      --sd-red-500: ").concat(color.Red500, ";\n      --sd-red-50: ").concat(color.Red50, ";\n      --sd-purple-300: ").concat(color.Purple300, ";\n      --sd-purple-500: ").concat(color.Purple500, ";\n      --sd-purple-50: ").concat(color.Purple50, ";\n      --sd-teal-300: ").concat(color.Teal300, ";\n      --sd-teal-500: ").concat(color.Teal500, ";\n      --sd-teal-50: ").concat(color.Teal50, ";\n      --sd-silver-500: ").concat(color.Silver500, ";\n      --sd-silver-200: ").concat(color.Silver200, ";\n      --sd-silver-400: ").concat(color.Silver400, ";\n      --sd-dark-100: ").concat(color.Dark100, ";\n      --sd-dark-300: ").concat(color.Dark300, ";\n      --sd-dark-500: ").concat(color.Dark500, ";\n    }\n  ");
+  return "\n    :root{\n      --sd-white: ".concat(color.White, ";\n      --sd-white-50: ").concat(color.White50, ";\n      --sd-white-40: ").concat(color.White40, ";\n      --sd-white-20: ").concat(color.White20, ";\n      --sd-white-10: ").concat(color.White10, ";\n      --sd-white-08: ").concat(color.White08, ";\n      --sd-transparent: ").concat(color.Transparent, ";\n\n      --sd-black: ").concat(color.Black, ";\n      --sd-black-50: ").concat(color.Black50, ";\n      --sd-black-20: ").concat(color.Black20, ";\n\n      --sd-dark-30: ").concat(color.Dark30, ";\n      --sd-blue-30: ").concat(color.Blue30, ";\n      --sd-green-30: ").concat(color.Green30, ";\n      --sd-red-30: ").concat(color.Red30, ";\n      --sd-red-300-alpha-20: ").concat(color.Red300Aplha20, ";\n      --sd-silver-30: ").concat(color.Silver30, ";\n\n      --sd-blue-10: ").concat(color.Blue10, ";\n      --sd-red-10: ").concat(color.Red10, ";\n\n      /* Legacy Neutral Colors */\n      --sd-grey-100: ").concat(color.Grey100, "; /* @deprecated Use Dark100 */\n      --sd-grey-200: ").concat(color.Grey200, "; /* @deprecated Use Dark200 */\n      --sd-grey-300: ").concat(color.Grey300, "; /* @deprecated Use Dark300 */\n      --sd-grey-400: ").concat(color.Grey400, "; /* @deprecated Use Dark400 */\n      --sd-grey-450: ").concat(color.Grey450, "; /* @deprecated Use Dark450 */\n      --sd-grey-500: ").concat(color.Grey500, "; /* @deprecated Use Dark500 */\n\n      --sd-dark-200: ").concat(color.Dark200, "; /* @deprecated */\n      --sd-dark-400: ").concat(color.Dark400, "; /* @deprecated */\n      --sd-dark-450: ").concat(color.Dark450, "; /* @deprecated */\n\n      --sd-silver-100: ").concat(color.Silver100, "; /* @deprecated */\n      --sd-silver-300: ").concat(color.Silver300, "; /* @deprecated */\n\n      /* Legacy Extended Palette */\n      --sd-blue-75: ").concat(color.Blue75, "; /* @deprecated */\n      --sd-blue-100: ").concat(color.Blue100, "; /* @deprecated */\n      --sd-blue-200: ").concat(color.Blue200, "; /* @deprecated */\n      --sd-blue-400: ").concat(color.Blue400, "; /* @deprecated */\n\n      --sd-green-75: ").concat(color.Green75, "; /* @deprecated */\n      --sd-green-100: ").concat(color.Green100, "; /* @deprecated */\n      --sd-green-200: ").concat(color.Green200, "; /* @deprecated */\n      --sd-green-400: ").concat(color.Green400, "; /* @deprecated */\n\n      --sd-purple-75: ").concat(color.Purple75, "; /* @deprecated */\n      --sd-purple-100: ").concat(color.Purple100, "; /* @deprecated */\n      --sd-purple-200: ").concat(color.Purple200, "; /* @deprecated */\n      --sd-purple-400: ").concat(color.Purple400, "; /* @deprecated */\n\n      --sd-red-75: ").concat(color.Red75, "; /* @deprecated */\n      --sd-red-100: ").concat(color.Red100, "; /* @deprecated */\n      --sd-red-200: ").concat(color.Red200, "; /* @deprecated */\n      --sd-red-400: ").concat(color.Red400, "; /* @deprecated */\n\n      --sd-teal-75: ").concat(color.Teal75, "; /* @deprecated */\n      --sd-teal-100: ").concat(color.Teal100, "; /* @deprecated */\n      --sd-teal-200: ").concat(color.Teal200, "; /* @deprecated */\n      --sd-teal-400: ").concat(color.Teal400, "; /* @deprecated */\n\n      --sd-yellow-75: ").concat(color.Yellow75, "; /* @deprecated */\n      --sd-yellow-100: ").concat(color.Yellow100, "; /* @deprecated */\n      --sd-yellow-200: ").concat(color.Yellow200, "; /* @deprecated */\n      --sd-yellow-400: ").concat(color.Yellow400, "; /* @deprecated */\n      --sd-dark-50: ").concat(color.Dark50, ";\n      /* extended palette */\n    \n      --sd-blue-50: ").concat(color.Blue50, ";\n      --sd-blue-500: ").concat(color.Blue500, ";\n      --sd-blue-300: ").concat(color.Blue300, ";\n      --sd-green-300: ").concat(color.Green300, ";\n      --sd-green-500: ").concat(color.Green500, ";\n      --sd-green-50: ").concat(color.Green50, ";\n      --sd-yellow-300: ").concat(color.Yellow300, ";\n      --sd-yellow-500: ").concat(color.Yellow500, ";\n      --sd-yellow-50: ").concat(color.Yellow50, ";\n      --sd-red-300: ").concat(color.Red300, ";\n      --sd-red-500: ").concat(color.Red500, ";\n      --sd-red-50: ").concat(color.Red50, ";\n      --sd-purple-300: ").concat(color.Purple300, ";\n      --sd-purple-500: ").concat(color.Purple500, ";\n      --sd-purple-50: ").concat(color.Purple50, ";\n      --sd-teal-300: ").concat(color.Teal300, ";\n      --sd-teal-500: ").concat(color.Teal500, ";\n      --sd-teal-50: ").concat(color.Teal50, ";\n      --sd-silver-500: ").concat(color.Silver500, ";\n      --sd-silver-200: ").concat(color.Silver200, ";\n      --sd-silver-400: ").concat(color.Silver400, ";\n      --sd-silver-400-alpha-30: ").concat(color.Silver400Alpha30, ";\n      --sd-dark-100: ").concat(color.Dark100, ";\n      --sd-dark-300: ").concat(color.Dark300, ";\n      --sd-dark-500: ").concat(color.Dark500, ";\n    }\n  ");
 });
 
 function createSuperDispatchTheme(type) {
@@ -4030,8 +4046,8 @@ function createSuperDispatchTheme(type) {
         main: color.Red300
       },
       action: {
-        hover: color.Silver100,
-        selected: color.Silver300,
+        hover: color.Silver200,
+        selected: color.Blue50,
         disabled: color.Silver400
       },
       text: {
@@ -4040,7 +4056,14 @@ function createSuperDispatchTheme(type) {
         hint: color.Dark100,
         disabled: color.Dark100
       },
-      divider: color.Silver400
+      common: {
+        white: color.White,
+        black: color.Black
+      },
+      divider: color.Silver400,
+      background: {
+        paper: color.White
+      }
     },
     typography: createTypographyOptions(breakpoints),
     props: {},