@superdispatch/ui 0.23.4 → 0.24.0

package/dist-node/index.js

@@ -450,64 +450,70 @@ if (process.env.NODE_ENV !== "production") AdaptiveVerticalToolbar.displayName =
   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";
 })(exports.Color || (exports.Color = {}));
 
@@ -791,6 +797,14 @@ var CardButton = /*#__PURE__*/React.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__default(core.FormControl).withConfig({
+  displayName: "CheckboxField__FormControl",
+  componentId: "SD__sc-1wxu0g6-0"
+})(["justify-content:center;"]);
+var FormHelperText = /*#__PURE__*/styled__default(core.FormHelperText).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:", ";}"], exports.Color.Dark300, exports.Color.Red500);
 var CheckboxField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var {
     label,
@@ -803,7 +817,7 @@ var CheckboxField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$5);
 
-  return /*#__PURE__*/jsxRuntime.jsxs(core.FormControl, {
+  return /*#__PURE__*/jsxRuntime.jsxs(FormControl, {
     error: error,
     children: [/*#__PURE__*/jsxRuntime.jsx(core.FormControlLabel, _objectSpread(_objectSpread({}, formControlLabelProps), {}, {
       label: label,
@@ -815,7 +829,7 @@ var CheckboxField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         color: "primary",
         disableRipple: true
       }, props))
-    })), helperText && /*#__PURE__*/jsxRuntime.jsx(core.FormHelperText, {
+    })), helperText && /*#__PURE__*/jsxRuntime.jsx(FormHelperText, {
       children: helperText
     })]
   });
@@ -823,6 +837,14 @@ var CheckboxField = /*#__PURE__*/React.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__default(core.FormLabel).withConfig({
+  displayName: "CheckboxGroudField__FormLabel",
+  componentId: "SD__sc-1lihyfy-0"
+})(["margin-bottom:8px;color:", ";font-weight:600;"], exports.Color.Dark300);
+var FormHelperText$1 = /*#__PURE__*/styled__default(core.FormHelperText).withConfig({
+  displayName: "CheckboxGroudField__FormHelperText",
+  componentId: "SD__sc-1lihyfy-1"
+})(["margin-top:8px;color:", ";&.Mui-error{color:", ";}"], exports.Color.Dark300, exports.Color.Red500);
 var CheckboxGroupField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var {
     FormGroupProps: formGroupProps,
@@ -836,13 +858,13 @@ var CheckboxGroupField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 
   return /*#__PURE__*/jsxRuntime.jsxs(core.FormControl, _objectSpread(_objectSpread({}, formControlProps), {}, {
     hiddenLabel: !label,
-    children: [!!label && /*#__PURE__*/jsxRuntime.jsx(core.FormLabel, _objectSpread(_objectSpread({}, formLabelProps), {}, {
+    children: [!!label && /*#__PURE__*/jsxRuntime.jsx(FormLabel, _objectSpread(_objectSpread({}, formLabelProps), {}, {
       children: label
     })), /*#__PURE__*/jsxRuntime.jsx(core.FormGroup, _objectSpread(_objectSpread({
       ref: ref
     }, formGroupProps), {}, {
       children: children
-    })), !!helperText && /*#__PURE__*/jsxRuntime.jsx(core.FormHelperText, _objectSpread(_objectSpread({}, formHelperTextProps), {}, {
+    })), !!helperText && /*#__PURE__*/jsxRuntime.jsx(FormHelperText$1, _objectSpread(_objectSpread({}, formHelperTextProps), {}, {
       children: helperText
     }))]
   }));
@@ -1809,6 +1831,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__default(core.FormControl).withConfig({
+  displayName: "RadioField__FormControl",
+  componentId: "SD__sc-6ey4qt-0"
+})(["justify-content:center;"]);
+var FormHelperText$2 = /*#__PURE__*/styled__default(core.FormHelperText).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:", ";}"], exports.Color.Dark300, exports.Color.Red500);
 var RadioField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var {
     label,
@@ -1821,7 +1851,7 @@ var RadioField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$j);
 
-  return /*#__PURE__*/jsxRuntime.jsxs(core.FormControl, {
+  return /*#__PURE__*/jsxRuntime.jsxs(FormControl$1, {
     error: error,
     children: [/*#__PURE__*/jsxRuntime.jsx(core.FormControlLabel, _objectSpread(_objectSpread({}, formControlLabelProps), {}, {
       label: label,
@@ -1832,7 +1862,7 @@ var RadioField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         ref: ref,
         color: "primary"
       }, props))
-    })), helperText && /*#__PURE__*/jsxRuntime.jsx(core.FormHelperText, {
+    })), helperText && /*#__PURE__*/jsxRuntime.jsx(FormHelperText$2, {
       children: helperText
     })]
   });
@@ -1864,7 +1894,7 @@ var Content = /*#__PURE__*/styled__default.div.withConfig({
 var Caption = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "RadioFieldCard__Caption",
   componentId: "SD__sc-5etge2-4"
-})(["padding-left:32px;"]);
+})(["padding-left:30px;"]);
 var RadioFieldCard = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   var {
     name,
@@ -1919,6 +1949,14 @@ var RadioFieldCard = /*#__PURE__*/React.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__default(core.FormLabel).withConfig({
+  displayName: "RadioGroupField__FormLabel",
+  componentId: "SD__sc-1udxviq-0"
+})(["margin-bottom:8px;color:", ";font-weight:600;"], exports.Color.Dark300);
+var FormHelperText$3 = /*#__PURE__*/styled__default(core.FormHelperText).withConfig({
+  displayName: "RadioGroupField__FormHelperText",
+  componentId: "SD__sc-1udxviq-1"
+})(["margin-top:8px;color:", ";&.Mui-error{color:", ";}"], exports.Color.Dark300, exports.Color.Red500);
 var RadioGroupField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var {
     name,
@@ -1935,7 +1973,7 @@ var RadioGroupField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 
   return /*#__PURE__*/jsxRuntime.jsxs(core.FormControl, _objectSpread(_objectSpread({}, formControlProps), {}, {
     hiddenLabel: !label,
-    children: [!!label && /*#__PURE__*/jsxRuntime.jsx(core.FormLabel, _objectSpread(_objectSpread({}, formLabelProps), {}, {
+    children: [!!label && /*#__PURE__*/jsxRuntime.jsx(FormLabel$1, _objectSpread(_objectSpread({}, formLabelProps), {}, {
       children: label
     })), /*#__PURE__*/jsxRuntime.jsx(core.RadioGroup, _objectSpread(_objectSpread({
       ref: ref
@@ -1944,7 +1982,7 @@ var RadioGroupField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       value: value,
       onChange: onChange,
       children: children
-    })), !!helperText && /*#__PURE__*/jsxRuntime.jsx(core.FormHelperText, _objectSpread(_objectSpread({}, formHelperTextProps), {}, {
+    })), !!helperText && /*#__PURE__*/jsxRuntime.jsx(FormHelperText$3, _objectSpread(_objectSpread({}, formHelperTextProps), {}, {
       children: helperText
     }))]
   }));
@@ -2764,15 +2802,27 @@ function overrideCheckbox(theme) {
   theme.overrides.MuiCheckbox = {
     root: {
       color: exports.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: exports.Color.Blue10
+      },
+      '&.MuiButtonBase-root': {
+        borderRadius: theme.spacing(0.5)
+      }
     },
     colorPrimary: {
       '&$checked$disabled': {
         color: exports.Color.Silver500
       },
       '&:hover:not($checked)': {
-        color: exports.Color.Dark100
+        color: exports.Color.Dark100,
+        backgroundColor: exports.Color.Blue10
       }
     }
   };
@@ -2823,16 +2873,16 @@ function overrideChip(theme) {
         boxShadow: undefined
       },
       '&:focus': {
-        boxShadow: "0 0 0 2px ".concat(exports.Color.Silver300)
+        boxShadow: "0 0 0 2px ".concat(exports.Color.Dark30)
       },
       '&:active, &:hover': {
-        backgroundColor: exports.Color.Silver300
+        backgroundColor: exports.Color.Silver400
       }
     },
     deletable: {
       '&:focus': {
         backgroundColor: undefined,
-        boxShadow: "0 0 0 2px ".concat(exports.Color.Silver300)
+        boxShadow: "0 0 0 2px ".concat(exports.Color.Silver400)
       }
     },
     deleteIcon: {
@@ -2847,7 +2897,7 @@ function overrideChip(theme) {
       },
       '& > svg': {
         borderRadius: '50%',
-        color: exports.Color.Dark200,
+        color: exports.Color.Dark100,
         fontSize: '1em'
       }
     },
@@ -2999,8 +3049,25 @@ function overrideLink(theme) {
       '&.MuiTypography-colorTextPrimary': {
         backgroundImage: line(exports.Color.Silver500),
         '&:focus, &:hover, &:active': {
-          color: exports.Color.Blue300,
-          backgroundImage: line(exports.Color.Blue300)
+          color: exports.Color.Blue500,
+          backgroundImage: line(exports.Color.Blue500)
+        }
+      },
+      '&.MuiTypography-colorError': {
+        color: exports.Color.Red500,
+        backgroundImage: line(exports.Color.Silver500),
+        '&:focus, &:hover, &:active': {
+          color: exports.Color.Red500,
+          backgroundImage: line(exports.Color.Red500)
+        }
+      },
+      '&.MuiTypography-colorTextSecondary': {
+        cursor: 'not-allowed',
+        color: exports.Color.Dark100,
+        backgroundImage: line(exports.Color.Silver500),
+        '&:focus, &:hover, &:active': {
+          color: exports.Color.Dark100,
+          backgroundImage: line(exports.Color.Silver500)
         }
       }
     },
@@ -3108,7 +3175,7 @@ function overrideRadio(theme) {
       children: /*#__PURE__*/jsxRuntime.jsx("circle", {
         cx: "12",
         cy: "12",
-        r: "8.5",
+        r: "9",
         fill: exports.Color.White,
         stroke: "currentColor"
       })
@@ -3117,7 +3184,7 @@ function overrideRadio(theme) {
       children: [/*#__PURE__*/jsxRuntime.jsx("circle", {
         cx: "12",
         cy: "12",
-        r: "8.5",
+        r: "9",
         fill: "currentColor",
         stroke: "currentColor"
       }), /*#__PURE__*/jsxRuntime.jsx("circle", {
@@ -3131,8 +3198,13 @@ function overrideRadio(theme) {
   theme.overrides.MuiRadio = {
     root: {
       color: exports.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': {
@@ -3524,7 +3596,7 @@ function overrideTooltip(theme) {
   theme.overrides.MuiTooltip = {
     tooltip: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
       padding: theme.spacing(1, 1.5),
-      backgroundColor: exports.Color.Dark400
+      backgroundColor: exports.Color.Dark500
     }),
     popperArrow: {
       '&[x-placement*="top"] $arrow': {
@@ -3549,7 +3621,7 @@ function overrideTooltip(theme) {
       }
     },
     arrow: {
-      color: exports.Color.Dark400,
+      color: exports.Color.Dark500,
       fontSize: theme.spacing(1)
     }
   };