@superdispatch/ui 0.23.4 → 0.24.0

package/dist-src/checkbox/CheckboxField.js

@@ -1,10 +1,20 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["label", "error", "checked", "onBlur", "onChange", "helperText", "FormControlLabelProps"];
-import { Checkbox, FormControl, FormControlLabel, FormHelperText } from '@material-ui/core';
+import { Checkbox, FormControl as FormControlMui, FormControlLabel, FormHelperText as FormHelperTextMui } from '@material-ui/core';
 import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { Color } from "../theme/Color.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+var FormControl = /*#__PURE__*/styled(FormControlMui).withConfig({
+  displayName: "CheckboxField__FormControl",
+  componentId: "SD__sc-1wxu0g6-0"
+})(["justify-content:center;"]);
+var FormHelperText = /*#__PURE__*/styled(FormHelperTextMui).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);
 export var CheckboxField = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
     label,

package/dist-src/checkbox/CheckboxGroudField.js

@@ -1,10 +1,20 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["FormGroupProps", "label", "FormLabelProps", "helperText", "FormHelperTextProps", "children"];
-import { FormControl, FormGroup, FormHelperText, FormLabel } from '@material-ui/core';
+import { FormControl, FormGroup, FormHelperText as FormHelperTextMui, FormLabel as FormLabelMui } from '@material-ui/core';
 import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { Color } from "../theme/Color.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+var FormLabel = /*#__PURE__*/styled(FormLabelMui).withConfig({
+  displayName: "CheckboxGroudField__FormLabel",
+  componentId: "SD__sc-1lihyfy-0"
+})(["margin-bottom:8px;color:", ";font-weight:600;"], Color.Dark300);
+var FormHelperText = /*#__PURE__*/styled(FormHelperTextMui).withConfig({
+  displayName: "CheckboxGroudField__FormHelperText",
+  componentId: "SD__sc-1lihyfy-1"
+})(["margin-top:8px;color:", ";&.Mui-error{color:", ";}"], Color.Dark300, Color.Red500);
 export var CheckboxGroupField = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
     FormGroupProps: formGroupProps,

package/dist-src/checkbox/CheckboxOverrides.js

@@ -46,15 +46,27 @@ export 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
       }
     }
   };

package/dist-src/chip/ChipOverrides.js

@@ -47,16 +47,16 @@ export 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: {
@@ -71,7 +71,7 @@ export function overrideChip(theme) {
       },
       '& > svg': {
         borderRadius: '50%',
-        color: Color.Dark200,
+        color: Color.Dark100,
         fontSize: '1em'
       }
     },

package/dist-src/link/LinkOverrides.js

@@ -24,8 +24,25 @@ export 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)
         }
       }
     },

package/dist-src/radio/RadioField.js

@@ -1,10 +1,20 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["label", "error", "checked", "onBlur", "onChange", "helperText", "FormControlLabelProps"];
-import { FormControl, FormControlLabel, FormHelperText, Radio } from '@material-ui/core';
+import { FormControl as FormControlMui, FormControlLabel, FormHelperText as FormHelperTextMui, Radio } from '@material-ui/core';
 import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { Color } from "../theme/Color.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+var FormControl = /*#__PURE__*/styled(FormControlMui).withConfig({
+  displayName: "RadioField__FormControl",
+  componentId: "SD__sc-6ey4qt-0"
+})(["justify-content:center;"]);
+var FormHelperText = /*#__PURE__*/styled(FormHelperTextMui).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);
 export var RadioField = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
     label,

package/dist-src/radio/RadioFieldCard.js

@@ -33,7 +33,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;"]);
 export var RadioFieldCard = /*#__PURE__*/forwardRef((_ref2, ref) => {
   var {
     name,

package/dist-src/radio/RadioGroupField.js

@@ -1,10 +1,20 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["name", "value", "onChange", "RadioGroupProps", "label", "FormLabelProps", "helperText", "FormHelperTextProps", "children"];
-import { FormControl, FormHelperText, FormLabel, RadioGroup } from '@material-ui/core';
+import { FormControl, FormHelperText as FormHelperTextMui, FormLabel as FormLabelMui, RadioGroup } from '@material-ui/core';
 import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { Color } from "../theme/Color.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+var FormLabel = /*#__PURE__*/styled(FormLabelMui).withConfig({
+  displayName: "RadioGroupField__FormLabel",
+  componentId: "SD__sc-1udxviq-0"
+})(["margin-bottom:8px;color:", ";font-weight:600;"], Color.Dark300);
+var FormHelperText = /*#__PURE__*/styled(FormHelperTextMui).withConfig({
+  displayName: "RadioGroupField__FormHelperText",
+  componentId: "SD__sc-1udxviq-1"
+})(["margin-top:8px;color:", ";&.Mui-error{color:", ";}"], Color.Dark300, Color.Red500);
 export var RadioGroupField = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
     name,

package/dist-src/radio/RadioOverrides.js

@@ -9,7 +9,7 @@ export function overrideRadio(theme) {
       children: /*#__PURE__*/_jsx("circle", {
         cx: "12",
         cy: "12",
-        r: "8.5",
+        r: "9",
         fill: Color.White,
         stroke: "currentColor"
       })
@@ -18,7 +18,7 @@ export function overrideRadio(theme) {
       children: [/*#__PURE__*/_jsx("circle", {
         cx: "12",
         cy: "12",
-        r: "8.5",
+        r: "9",
         fill: "currentColor",
         stroke: "currentColor"
       }), /*#__PURE__*/_jsx("circle", {
@@ -32,8 +32,13 @@ export 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': {

package/dist-src/theme/Color.js

@@ -11,64 +11,70 @@ export 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 = {}));
 

package/dist-src/tooltip/TooltipOverrides.js

@@ -7,7 +7,7 @@ export 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': {
@@ -32,7 +32,7 @@ export function overrideTooltip(theme) {
       }
     },
     arrow: {
-      color: Color.Dark400,
+      color: Color.Dark500,
       fontSize: theme.spacing(1)
     }
   };

package/dist-types/index.d.ts

@@ -365,6 +365,12 @@ declare enum Color {
     Black = "#000",
     Black50 = "rgba(0, 0, 0, 0.5)",
     Black20 = "rgba(0, 0, 0, 0.2)",
+    Dark30 = "rgba(143, 148, 158, 0.3)",
+    Blue30 = "rgba(0, 112, 245, 0.3)",
+    Green30 = "rgba(3, 135, 47, 0.3)",
+    Red30 = "rgba(229, 35, 13, 0.3)",
+    Silver30 = "rgba(225, 229, 234, 0.3)",
+    Blue10 = "rgba(0, 112, 245, 0.1)",
     /**@deprecated Use Dark100 */
     Grey100 = "#8F949E",
     /**@deprecated Use Dark200 */
@@ -377,86 +383,87 @@ declare enum Color {
     Grey450 = "#222F44",
     /**@deprecated Use Dark500 */
     Grey500 = "#192334",
-    Dark100 = "#8F949E",
+    /** @deprecated */
     Dark200 = "#6A707C",
-    Dark300 = "#5B6371",
-    /**@deprecated */
+    /** @deprecated */
     Dark400 = "#323C4E",
-    /**@deprecated */
+    /** @deprecated */
     Dark450 = "#222F44",
-    Dark500 = "#192334",
-    /**@deprecated */
+    /** @deprecated */
     Silver100 = "#F6F7F8",
-    Silver200 = "#F3F5F8",
-    /**@deprecated */
+    /** @deprecated */
     Silver300 = "#E8ECF0",
-    Silver400 = "#E1E5EA",
-    Silver500 = "#C4CDD5",
-    Blue50 = "#EBF4FF",
     /** @deprecated */
     Blue75 = "#CCE5FF",
     /** @deprecated */
     Blue100 = "#A8D1FF",
     /** @deprecated */
     Blue200 = "#66ADFF",
-    Blue300 = "#0070F5",
     /** @deprecated */
     Blue400 = "#0063DB",
-    Blue500 = "#0063DB",
-    Green50 = "#ECF9EF",
     /** @deprecated */
     Green75 = "#C8F4D1",
     /** @deprecated */
     Green100 = "#90EAAE",
     /** @deprecated */
     Green200 = "#5DDA87",
-    Green300 = "#03872F",
     /** @deprecated */
     Green400 = "#1E8F46",
-    Green500 = "#007A29",
-    Purple50 = "#EFEEFC",
     /** @deprecated */
     Purple75 = "#DCDBF5",
     /** @deprecated */
     Purple100 = "#CBC8EE",
     /** @deprecated */
     Purple200 = "#A7A1E8",
-    Purple300 = "#6559CF",
     /** @deprecated */
     Purple400 = "#473ABB",
-    Purple500 = "#473ABB",
-    Red50 = "#FFEDEB",
     /** @deprecated */
     Red75 = "#FDD9D3",
     /** @deprecated */
     Red100 = "#FDC2BA",
     /** @deprecated */
     Red200 = "#FE988B",
-    Red300 = "#E5230D",
     /** @deprecated */
     Red400 = "#D9210D",
-    Red500 = "#C31909",
-    Teal50 = "#E3F6FC",
     /** @deprecated */
     Teal75 = "#BEEDF9",
     /** @deprecated */
     Teal100 = "#91E3F8",
     /** @deprecated */
     Teal200 = "#61D3EF",
-    Teal300 = "#007EAB",
     /** @deprecated */
     Teal400 = "#008DB8",
-    Teal500 = "#00678A",
-    Yellow50 = "#FFF7DC",
     /** @deprecated */
     Yellow75 = "#FFF1C2",
     /** @deprecated */
     Yellow100 = "#FFE494",
     /** @deprecated */
     Yellow200 = "#FFDC6B",
-    Yellow300 = "#E8671C",
     /** @deprecated */
     Yellow400 = "#FFA91F",
+    Dark100 = "#8F949E",
+    Dark300 = "#5B6371",
+    Dark500 = "#192334",
+    Silver200 = "#F3F5F8",
+    Silver400 = "#E1E5EA",
+    Silver500 = "#C4CDD5",
+    Blue50 = "#EBF4FF",
+    Blue300 = "#0070F5",
+    Blue500 = "#0063DB",
+    Green50 = "#ECF9EF",
+    Green300 = "#03872F",
+    Green500 = "#007A29",
+    Purple50 = "#EFEEFC",
+    Purple300 = "#6559CF",
+    Purple500 = "#473ABB",
+    Red50 = "#FFEDEB",
+    Red300 = "#E5230D",
+    Red500 = "#C31909",
+    Teal50 = "#E3F6FC",
+    Teal300 = "#007EAB",
+    Teal500 = "#00678A",
+    Yellow50 = "#FFF7DC",
+    Yellow300 = "#E8671C",
     Yellow500 = "#B84807"
 }
 declare type ColorProp = keyof typeof Color;