@superdispatch/ui 0.24.4 → 0.24.6

package/dist-node/index.js

@@ -456,6 +456,7 @@ if (process.env.NODE_ENV !== "production") AdaptiveVerticalToolbar.displayName =
   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["Red10"] = "rgba(195, 25, 9, 0.1)";
   Color["Grey100"] = "#8F949E";
   Color["Grey200"] = "#6A707C";
   Color["Grey300"] = "#5B6371";
@@ -2027,20 +2028,27 @@ function useMinBreakpoint(minBreakpoint) {
 
 var _excluded$m = ["action", "children", "onClose", "className", "classes", "variant"],
     _excluded2$4 = ["icon", "closeButton", "variantError", "variantSuccess"];
+var PaddedContent = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "SnackbarContent__PaddedContent",
+  componentId: "SD__sc-1jca4d5-0"
+})(["padding:2px 0 0;"]);
 var useStyles$b = /*#__PURE__*/styles.makeStyles(theme => ({
   root: {
     color: exports.Color.White,
     backgroundColor: exports.Color.Dark500,
-    '&$variantError': {
-      color: exports.Color.White,
-      backgroundColor: exports.Color.Red500
+    alignItems: 'flex-start',
+    padding: '10px 16px',
+    [theme.breakpoints.up('md')]: {
+      width: 'auto',
+      maxWidth: '512px',
+      minWidth: '432px'
     }
   },
   action: {
     paddingLeft: theme.spacing(1)
   },
   message: {
-    alignItems: 'center',
+    alignItems: 'flex-start',
     [theme.breakpoints.down('xs')]: {
       fontSize: theme.spacing(2)
     }
@@ -2056,7 +2064,13 @@ var useStyles$b = /*#__PURE__*/styles.makeStyles(theme => ({
       color: exports.Color.White40
     }
   },
-  variantError: {},
+  variantError: {
+    color: exports.Color.Red500,
+    background: exports.Color.Red50,
+    '& $closeButton': {
+      color: exports.Color.Red500
+    }
+  },
   variantSuccess: {}
 }), {
   name: 'SD-SnackbarContent'
@@ -2083,7 +2097,7 @@ var SnackbarContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   } = _useStyles,
       styles = _objectWithoutProperties(_useStyles, _excluded2$4);
 
-  var Icon = variant === 'error' ? icons.Warning : variant === 'success' ? icons.CheckCircle : undefined;
+  var Icon = variant === 'error' ? icons.Error : variant === 'success' ? icons.CheckCircle : undefined;
   return /*#__PURE__*/jsxRuntime.jsx(core.SnackbarContent, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     classes: styles,
@@ -2094,7 +2108,9 @@ var SnackbarContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     message: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [Icon && /*#__PURE__*/jsxRuntime.jsx(Icon, {
         className: icon
-      }), children]
+      }), /*#__PURE__*/jsxRuntime.jsx(PaddedContent, {
+        children: children
+      })]
     }),
     action: !action && !onClose ? null : /*#__PURE__*/jsxRuntime.jsxs(core.Grid, {
       container: true,
@@ -3144,7 +3160,7 @@ function overridePagination(theme) {
   var props = {};
   var overrides = {
     root: {
-      color: exports.Color.Dark400
+      color: exports.Color.Dark500
     },
     page: {
       '&:hover': {
@@ -3153,12 +3169,12 @@ function overridePagination(theme) {
       '&$focusVisible': {
         borderRadius: 4,
         backgroundColor: exports.Color.White,
-        border: "1px solid ".concat(exports.Color.Blue100)
+        border: "1px solid ".concat(exports.Color.Blue30)
       },
       '&$selected': {
         backgroundColor: exports.Color.Silver400,
         '&:hover, &$focusVisible': {
-          backgroundColor: exports.Color.Silver400
+          backgroundColor: exports.Color.Silver500
         },
         '&$disabled': {
           color: exports.Color.Dark100,
@@ -3355,7 +3371,7 @@ function overrideSwitch(theme) {
         '&:hover': {
           backgroundColor: undefined,
           '& + $track': {
-            backgroundColor: exports.Color.Blue400
+            backgroundColor: exports.Color.Blue500
           }
         }
       },
@@ -3363,16 +3379,16 @@ function overrideSwitch(theme) {
         backgroundColor: exports.Color.Silver500
       },
       '&$disabled + $track': {
-        backgroundColor: exports.Color.Silver300
+        backgroundColor: exports.Color.Dark30
       },
       '&$checked$disabled + $track': {
-        backgroundColor: exports.Color.Blue100
+        backgroundColor: exports.Color.Blue30
       },
       '&:hover + $track': {
         backgroundColor: exports.Color.Dark100
       },
       '&.Mui-focusVisible + $track': {
-        boxShadow: "0 0 0 3px ".concat(exports.Color.Blue100)
+        boxShadow: "0 0 0 3px ".concat(exports.Color.Blue30)
       }
     }
   };