@superdispatch/ui 0.23.4 → 0.24.0

package/dist-web/index.js

@@ -1,6 +1,6 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { Button as Button$1, CircularProgress, ButtonGroup, Popover, MenuList, Toolbar, Grid, MenuItem, Typography, Menu, Divider, ButtonBase, Avatar, FormControl, FormControlLabel as FormControlLabel$1, Checkbox, FormHelperText, FormLabel, FormGroup, useMediaQuery, Tooltip, SvgIcon, AppBar, List, Card as Card$1, CardContent, IconButton, TextField, Radio, RadioGroup, SnackbarContent as SnackbarContent$1, Portal, Snackbar as Snackbar$1, Slide, CssBaseline, createTheme, createGenerateClassName } from '@material-ui/core';
+import { Button as Button$1, CircularProgress, ButtonGroup, Popover, MenuList, Toolbar, Grid, MenuItem, Typography, Menu, Divider, ButtonBase, Avatar, FormHelperText as FormHelperText$4, FormControlLabel as FormControlLabel$1, Checkbox, FormControl as FormControl$2, FormLabel as FormLabel$2, FormGroup, useMediaQuery, Tooltip, SvgIcon, AppBar, List, Card as Card$1, CardContent, IconButton, TextField, Radio, RadioGroup, SnackbarContent as SnackbarContent$1, Portal, Snackbar as Snackbar$1, Slide, CssBaseline, createTheme, createGenerateClassName } from '@material-ui/core';
 import { MoreHoriz, Info, Close, Warning, CheckCircle } from '@material-ui/icons';
 import { makeStyles, StylesProvider, ThemeProvider as ThemeProvider$1 } from '@material-ui/styles';
 import { forwardRef, useState, useRef, useLayoutEffect, cloneElement, useMemo, useContext, createContext, Children, useCallback, useEffect } from 'react';
@@ -445,64 +445,70 @@ var Color;
   Color["Black"] = "#000";
   Color["Black50"] = "rgba(0, 0, 0, 0.5)";
   Color["Black20"] = "rgba(0, 0, 0, 0.2)";
+  Color["Dark30"] = "rgba(143, 148, 158, 0.3)";
+  Color["Blue30"] = "rgba(0, 112, 245, 0.3)";
+  Color["Green30"] = "rgba(3, 135, 47, 0.3)";
+  Color["Red30"] = "rgba(229, 35, 13, 0.3)";
+  Color["Silver30"] = "rgba(225, 229, 234, 0.3)";
+  Color["Blue10"] = "rgba(0, 112, 245, 0.1)";
   Color["Grey100"] = "#8F949E";
   Color["Grey200"] = "#6A707C";
   Color["Grey300"] = "#5B6371";
   Color["Grey400"] = "#323C4E";
   Color["Grey450"] = "#222F44";
   Color["Grey500"] = "#192334";
-  Color["Dark100"] = "#8F949E";
   Color["Dark200"] = "#6A707C";
-  Color["Dark300"] = "#5B6371";
   Color["Dark400"] = "#323C4E";
   Color["Dark450"] = "#222F44";
-  Color["Dark500"] = "#192334";
   Color["Silver100"] = "#F6F7F8";
-  Color["Silver200"] = "#F3F5F8";
   Color["Silver300"] = "#E8ECF0";
-  Color["Silver400"] = "#E1E5EA";
-  Color["Silver500"] = "#C4CDD5";
-  Color["Blue50"] = "#EBF4FF";
   Color["Blue75"] = "#CCE5FF";
   Color["Blue100"] = "#A8D1FF";
   Color["Blue200"] = "#66ADFF";
-  Color["Blue300"] = "#0070F5";
   Color["Blue400"] = "#0063DB";
-  Color["Blue500"] = "#0063DB";
-  Color["Green50"] = "#ECF9EF";
   Color["Green75"] = "#C8F4D1";
   Color["Green100"] = "#90EAAE";
   Color["Green200"] = "#5DDA87";
-  Color["Green300"] = "#03872F";
   Color["Green400"] = "#1E8F46";
-  Color["Green500"] = "#007A29";
-  Color["Purple50"] = "#EFEEFC";
   Color["Purple75"] = "#DCDBF5";
   Color["Purple100"] = "#CBC8EE";
   Color["Purple200"] = "#A7A1E8";
-  Color["Purple300"] = "#6559CF";
   Color["Purple400"] = "#473ABB";
-  Color["Purple500"] = "#473ABB";
-  Color["Red50"] = "#FFEDEB";
   Color["Red75"] = "#FDD9D3";
   Color["Red100"] = "#FDC2BA";
   Color["Red200"] = "#FE988B";
-  Color["Red300"] = "#E5230D";
   Color["Red400"] = "#D9210D";
-  Color["Red500"] = "#C31909";
-  Color["Teal50"] = "#E3F6FC";
   Color["Teal75"] = "#BEEDF9";
   Color["Teal100"] = "#91E3F8";
   Color["Teal200"] = "#61D3EF";
-  Color["Teal300"] = "#007EAB";
   Color["Teal400"] = "#008DB8";
-  Color["Teal500"] = "#00678A";
-  Color["Yellow50"] = "#FFF7DC";
   Color["Yellow75"] = "#FFF1C2";
   Color["Yellow100"] = "#FFE494";
   Color["Yellow200"] = "#FFDC6B";
-  Color["Yellow300"] = "#E8671C";
   Color["Yellow400"] = "#FFA91F";
+  Color["Dark100"] = "#8F949E";
+  Color["Dark300"] = "#5B6371";
+  Color["Dark500"] = "#192334";
+  Color["Silver200"] = "#F3F5F8";
+  Color["Silver400"] = "#E1E5EA";
+  Color["Silver500"] = "#C4CDD5";
+  Color["Blue50"] = "#EBF4FF";
+  Color["Blue300"] = "#0070F5";
+  Color["Blue500"] = "#0063DB";
+  Color["Green50"] = "#ECF9EF";
+  Color["Green300"] = "#03872F";
+  Color["Green500"] = "#007A29";
+  Color["Purple50"] = "#EFEEFC";
+  Color["Purple300"] = "#6559CF";
+  Color["Purple500"] = "#473ABB";
+  Color["Red50"] = "#FFEDEB";
+  Color["Red300"] = "#E5230D";
+  Color["Red500"] = "#C31909";
+  Color["Teal50"] = "#E3F6FC";
+  Color["Teal300"] = "#007EAB";
+  Color["Teal500"] = "#00678A";
+  Color["Yellow50"] = "#FFF7DC";
+  Color["Yellow300"] = "#E8671C";
   Color["Yellow500"] = "#B84807";
 })(Color || (Color = {}));
 
@@ -786,6 +792,14 @@ var CardButton = /*#__PURE__*/forwardRef((_ref, ref) => {
 if (process.env.NODE_ENV !== "production") CardButton.displayName = "CardButton";
 
 var _excluded$5 = ["label", "error", "checked", "onBlur", "onChange", "helperText", "FormControlLabelProps"];
+var FormControl = /*#__PURE__*/styled(FormControl$2).withConfig({
+  displayName: "CheckboxField__FormControl",
+  componentId: "SD__sc-1wxu0g6-0"
+})(["justify-content:center;"]);
+var FormHelperText = /*#__PURE__*/styled(FormHelperText$4).withConfig({
+  displayName: "CheckboxField__FormHelperText",
+  componentId: "SD__sc-1wxu0g6-1"
+})(["color:", ";font-size:12px;line-height:16px;font-weight:400;margin-left:30px;margin-top:0;margin-bottom:4px;&.Mui-error{color:", ";}"], Color.Dark300, Color.Red500);
 var CheckboxField = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
     label,
@@ -818,6 +832,14 @@ var CheckboxField = /*#__PURE__*/forwardRef((_ref, ref) => {
 if (process.env.NODE_ENV !== "production") CheckboxField.displayName = "CheckboxField";
 
 var _excluded$6 = ["FormGroupProps", "label", "FormLabelProps", "helperText", "FormHelperTextProps", "children"];
+var FormLabel = /*#__PURE__*/styled(FormLabel$2).withConfig({
+  displayName: "CheckboxGroudField__FormLabel",
+  componentId: "SD__sc-1lihyfy-0"
+})(["margin-bottom:8px;color:", ";font-weight:600;"], Color.Dark300);
+var FormHelperText$1 = /*#__PURE__*/styled(FormHelperText$4).withConfig({
+  displayName: "CheckboxGroudField__FormHelperText",
+  componentId: "SD__sc-1lihyfy-1"
+})(["margin-top:8px;color:", ";&.Mui-error{color:", ";}"], Color.Dark300, Color.Red500);
 var CheckboxGroupField = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
     FormGroupProps: formGroupProps,
@@ -829,7 +851,7 @@ var CheckboxGroupField = /*#__PURE__*/forwardRef((_ref, ref) => {
   } = _ref,
       formControlProps = _objectWithoutProperties(_ref, _excluded$6);
 
-  return /*#__PURE__*/jsxs(FormControl, _objectSpread(_objectSpread({}, formControlProps), {}, {
+  return /*#__PURE__*/jsxs(FormControl$2, _objectSpread(_objectSpread({}, formControlProps), {}, {
     hiddenLabel: !label,
     children: [!!label && /*#__PURE__*/jsx(FormLabel, _objectSpread(_objectSpread({}, formLabelProps), {}, {
       children: label
@@ -837,7 +859,7 @@ var CheckboxGroupField = /*#__PURE__*/forwardRef((_ref, ref) => {
       ref: ref
     }, formGroupProps), {}, {
       children: children
-    })), !!helperText && /*#__PURE__*/jsx(FormHelperText, _objectSpread(_objectSpread({}, formHelperTextProps), {}, {
+    })), !!helperText && /*#__PURE__*/jsx(FormHelperText$1, _objectSpread(_objectSpread({}, formHelperTextProps), {}, {
       children: helperText
     }))]
   }));
@@ -1804,6 +1826,14 @@ if (process.env.NODE_ENV !== "production") NumberField.displayName = "NumberFiel
 NumberField.displayName = 'NumberField';
 
 var _excluded$j = ["label", "error", "checked", "onBlur", "onChange", "helperText", "FormControlLabelProps"];
+var FormControl$1 = /*#__PURE__*/styled(FormControl$2).withConfig({
+  displayName: "RadioField__FormControl",
+  componentId: "SD__sc-6ey4qt-0"
+})(["justify-content:center;"]);
+var FormHelperText$2 = /*#__PURE__*/styled(FormHelperText$4).withConfig({
+  displayName: "RadioField__FormHelperText",
+  componentId: "SD__sc-6ey4qt-1"
+})(["color:", ";font-size:12px;line-height:16px;font-weight:400;margin-left:30px;margin-top:0;margin-bottom:4px;&.Mui-error{color:", ";}"], Color.Dark300, Color.Red500);
 var RadioField = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
     label,
@@ -1816,7 +1846,7 @@ var RadioField = /*#__PURE__*/forwardRef((_ref, ref) => {
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$j);
 
-  return /*#__PURE__*/jsxs(FormControl, {
+  return /*#__PURE__*/jsxs(FormControl$1, {
     error: error,
     children: [/*#__PURE__*/jsx(FormControlLabel$1, _objectSpread(_objectSpread({}, formControlLabelProps), {}, {
       label: label,
@@ -1827,7 +1857,7 @@ var RadioField = /*#__PURE__*/forwardRef((_ref, ref) => {
         ref: ref,
         color: "primary"
       }, props))
-    })), helperText && /*#__PURE__*/jsx(FormHelperText, {
+    })), helperText && /*#__PURE__*/jsx(FormHelperText$2, {
       children: helperText
     })]
   });
@@ -1859,7 +1889,7 @@ var Content = /*#__PURE__*/styled.div.withConfig({
 var Caption = /*#__PURE__*/styled.div.withConfig({
   displayName: "RadioFieldCard__Caption",
   componentId: "SD__sc-5etge2-4"
-})(["padding-left:32px;"]);
+})(["padding-left:30px;"]);
 var RadioFieldCard = /*#__PURE__*/forwardRef((_ref2, ref) => {
   var {
     name,
@@ -1914,6 +1944,14 @@ var RadioFieldCard = /*#__PURE__*/forwardRef((_ref2, ref) => {
 if (process.env.NODE_ENV !== "production") RadioFieldCard.displayName = "RadioFieldCard";
 
 var _excluded$l = ["name", "value", "onChange", "RadioGroupProps", "label", "FormLabelProps", "helperText", "FormHelperTextProps", "children"];
+var FormLabel$1 = /*#__PURE__*/styled(FormLabel$2).withConfig({
+  displayName: "RadioGroupField__FormLabel",
+  componentId: "SD__sc-1udxviq-0"
+})(["margin-bottom:8px;color:", ";font-weight:600;"], Color.Dark300);
+var FormHelperText$3 = /*#__PURE__*/styled(FormHelperText$4).withConfig({
+  displayName: "RadioGroupField__FormHelperText",
+  componentId: "SD__sc-1udxviq-1"
+})(["margin-top:8px;color:", ";&.Mui-error{color:", ";}"], Color.Dark300, Color.Red500);
 var RadioGroupField = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
     name,
@@ -1928,9 +1966,9 @@ var RadioGroupField = /*#__PURE__*/forwardRef((_ref, ref) => {
   } = _ref,
       formControlProps = _objectWithoutProperties(_ref, _excluded$l);
 
-  return /*#__PURE__*/jsxs(FormControl, _objectSpread(_objectSpread({}, formControlProps), {}, {
+  return /*#__PURE__*/jsxs(FormControl$2, _objectSpread(_objectSpread({}, formControlProps), {}, {
     hiddenLabel: !label,
-    children: [!!label && /*#__PURE__*/jsx(FormLabel, _objectSpread(_objectSpread({}, formLabelProps), {}, {
+    children: [!!label && /*#__PURE__*/jsx(FormLabel$1, _objectSpread(_objectSpread({}, formLabelProps), {}, {
       children: label
     })), /*#__PURE__*/jsx(RadioGroup, _objectSpread(_objectSpread({
       ref: ref
@@ -1939,7 +1977,7 @@ var RadioGroupField = /*#__PURE__*/forwardRef((_ref, ref) => {
       value: value,
       onChange: onChange,
       children: children
-    })), !!helperText && /*#__PURE__*/jsx(FormHelperText, _objectSpread(_objectSpread({}, formHelperTextProps), {}, {
+    })), !!helperText && /*#__PURE__*/jsx(FormHelperText$3, _objectSpread(_objectSpread({}, formHelperTextProps), {}, {
       children: helperText
     }))]
   }));
@@ -2759,15 +2797,27 @@ function overrideCheckbox(theme) {
   theme.overrides.MuiCheckbox = {
     root: {
       color: Color.Dark100,
-      marginTop: theme.spacing(-0.625),
-      marginBottom: theme.spacing(-0.625)
+      width: theme.spacing(3),
+      height: theme.spacing(3),
+      marginRight: theme.spacing(1),
+      marginLeft: theme.spacing(1),
+      marginTop: theme.spacing(0.5),
+      marginBottom: theme.spacing(0.5),
+      padding: 0,
+      '&:hover': {
+        backgroundColor: Color.Blue10
+      },
+      '&.MuiButtonBase-root': {
+        borderRadius: theme.spacing(0.5)
+      }
     },
     colorPrimary: {
       '&$checked$disabled': {
         color: Color.Silver500
       },
       '&:hover:not($checked)': {
-        color: Color.Dark100
+        color: Color.Dark100,
+        backgroundColor: Color.Blue10
       }
     }
   };
@@ -2818,16 +2868,16 @@ function overrideChip(theme) {
         boxShadow: undefined
       },
       '&:focus': {
-        boxShadow: "0 0 0 2px ".concat(Color.Silver300)
+        boxShadow: "0 0 0 2px ".concat(Color.Dark30)
       },
       '&:active, &:hover': {
-        backgroundColor: Color.Silver300
+        backgroundColor: Color.Silver400
       }
     },
     deletable: {
       '&:focus': {
         backgroundColor: undefined,
-        boxShadow: "0 0 0 2px ".concat(Color.Silver300)
+        boxShadow: "0 0 0 2px ".concat(Color.Silver400)
       }
     },
     deleteIcon: {
@@ -2842,7 +2892,7 @@ function overrideChip(theme) {
       },
       '& > svg': {
         borderRadius: '50%',
-        color: Color.Dark200,
+        color: Color.Dark100,
         fontSize: '1em'
       }
     },
@@ -2994,8 +3044,25 @@ function overrideLink(theme) {
       '&.MuiTypography-colorTextPrimary': {
         backgroundImage: line(Color.Silver500),
         '&:focus, &:hover, &:active': {
-          color: Color.Blue300,
-          backgroundImage: line(Color.Blue300)
+          color: Color.Blue500,
+          backgroundImage: line(Color.Blue500)
+        }
+      },
+      '&.MuiTypography-colorError': {
+        color: Color.Red500,
+        backgroundImage: line(Color.Silver500),
+        '&:focus, &:hover, &:active': {
+          color: Color.Red500,
+          backgroundImage: line(Color.Red500)
+        }
+      },
+      '&.MuiTypography-colorTextSecondary': {
+        cursor: 'not-allowed',
+        color: Color.Dark100,
+        backgroundImage: line(Color.Silver500),
+        '&:focus, &:hover, &:active': {
+          color: Color.Dark100,
+          backgroundImage: line(Color.Silver500)
         }
       }
     },
@@ -3103,7 +3170,7 @@ function overrideRadio(theme) {
       children: /*#__PURE__*/jsx("circle", {
         cx: "12",
         cy: "12",
-        r: "8.5",
+        r: "9",
         fill: Color.White,
         stroke: "currentColor"
       })
@@ -3112,7 +3179,7 @@ function overrideRadio(theme) {
       children: [/*#__PURE__*/jsx("circle", {
         cx: "12",
         cy: "12",
-        r: "8.5",
+        r: "9",
         fill: "currentColor",
         stroke: "currentColor"
       }), /*#__PURE__*/jsx("circle", {
@@ -3126,8 +3193,13 @@ function overrideRadio(theme) {
   theme.overrides.MuiRadio = {
     root: {
       color: Color.Dark100,
-      marginTop: theme.spacing(-0.625),
-      marginBottom: theme.spacing(-0.625)
+      width: theme.spacing(3),
+      height: theme.spacing(3),
+      marginRight: theme.spacing(1),
+      marginLeft: theme.spacing(1),
+      marginTop: theme.spacing(0.5),
+      marginBottom: theme.spacing(0.5),
+      padding: 0
     },
     colorPrimary: {
       '&$checked$disabled': {
@@ -3519,7 +3591,7 @@ function overrideTooltip(theme) {
   theme.overrides.MuiTooltip = {
     tooltip: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
       padding: theme.spacing(1, 1.5),
-      backgroundColor: Color.Dark400
+      backgroundColor: Color.Dark500
     }),
     popperArrow: {
       '&[x-placement*="top"] $arrow': {
@@ -3544,7 +3616,7 @@ function overrideTooltip(theme) {
       }
     },
     arrow: {
-      color: Color.Dark400,
+      color: Color.Dark500,
       fontSize: theme.spacing(1)
     }
   };