@superdispatch/ui 0.24.4 → 0.24.6

package/dist-src/pagination/PaginationOverrides.js

@@ -3,7 +3,7 @@ export function overridePagination(theme) {
   var props = {};
   var overrides = {
     root: {
-      color: Color.Dark400
+      color: Color.Dark500
     },
     page: {
       '&:hover': {
@@ -12,12 +12,12 @@ export function overridePagination(theme) {
       '&$focusVisible': {
         borderRadius: 4,
         backgroundColor: Color.White,
-        border: "1px solid ".concat(Color.Blue100)
+        border: "1px solid ".concat(Color.Blue30)
       },
       '&$selected': {
         backgroundColor: Color.Silver400,
         '&:hover, &$focusVisible': {
-          backgroundColor: Color.Silver400
+          backgroundColor: Color.Silver500
         },
         '&$disabled': {
           color: Color.Dark100,

package/dist-src/snackbar/SnackbarContent.js

@@ -3,28 +3,36 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["action", "children", "onClose", "className", "classes", "variant"],
     _excluded2 = ["icon", "closeButton", "variantError", "variantSuccess"];
 import { Grid, IconButton, SnackbarContent as MuiSnackbarContent } from '@material-ui/core';
-import { CheckCircle, Close, Warning } from '@material-ui/icons';
+import { CheckCircle, Close, Error } from '@material-ui/icons';
 import { makeStyles } from '@material-ui/styles';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
+import styled from 'styled-components';
 import { Color } from "../theme/Color.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+var PaddedContent = /*#__PURE__*/styled.span.withConfig({
+  displayName: "SnackbarContent__PaddedContent",
+  componentId: "SD__sc-1jca4d5-0"
+})(["padding:2px 0 0;"]);
 var useStyles = /*#__PURE__*/makeStyles(theme => ({
   root: {
     color: Color.White,
     backgroundColor: Color.Dark500,
-    '&$variantError': {
-      color: Color.White,
-      backgroundColor: 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)
     }
@@ -40,7 +48,13 @@ var useStyles = /*#__PURE__*/makeStyles(theme => ({
       color: Color.White40
     }
   },
-  variantError: {},
+  variantError: {
+    color: Color.Red500,
+    background: Color.Red50,
+    '& $closeButton': {
+      color: Color.Red500
+    }
+  },
   variantSuccess: {}
 }), {
   name: 'SD-SnackbarContent'
@@ -67,7 +81,7 @@ export var SnackbarContent = /*#__PURE__*/forwardRef((_ref, ref) => {
   } = _useStyles,
       styles = _objectWithoutProperties(_useStyles, _excluded2);
 
-  var Icon = variant === 'error' ? Warning : variant === 'success' ? CheckCircle : undefined;
+  var Icon = variant === 'error' ? Error : variant === 'success' ? CheckCircle : undefined;
   return /*#__PURE__*/_jsx(MuiSnackbarContent, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     classes: styles,
@@ -78,7 +92,9 @@ export var SnackbarContent = /*#__PURE__*/forwardRef((_ref, ref) => {
     message: /*#__PURE__*/_jsxs(_Fragment, {
       children: [Icon && /*#__PURE__*/_jsx(Icon, {
         className: icon
-      }), children]
+      }), /*#__PURE__*/_jsx(PaddedContent, {
+        children: children
+      })]
     }),
     action: !action && !onClose ? null : /*#__PURE__*/_jsxs(Grid, {
       container: true,

package/dist-src/switch/SwitchOverrides.js

@@ -63,7 +63,7 @@ export function overrideSwitch(theme) {
         '&:hover': {
           backgroundColor: undefined,
           '& + $track': {
-            backgroundColor: Color.Blue400
+            backgroundColor: Color.Blue500
           }
         }
       },
@@ -71,16 +71,16 @@ export function overrideSwitch(theme) {
         backgroundColor: Color.Silver500
       },
       '&$disabled + $track': {
-        backgroundColor: Color.Silver300
+        backgroundColor: Color.Dark30
       },
       '&$checked$disabled + $track': {
-        backgroundColor: Color.Blue100
+        backgroundColor: Color.Blue30
       },
       '&:hover + $track': {
         backgroundColor: Color.Dark100
       },
       '&.Mui-focusVisible + $track': {
-        boxShadow: "0 0 0 3px ".concat(Color.Blue100)
+        boxShadow: "0 0 0 3px ".concat(Color.Blue30)
       }
     }
   };

package/dist-src/theme/Color.js

@@ -17,6 +17,7 @@ export var Color;
   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";

package/dist-types/index.d.ts

@@ -371,6 +371,7 @@ declare enum Color {
     Red30 = "rgba(229, 35, 13, 0.3)",
     Silver30 = "rgba(225, 229, 234, 0.3)",
     Blue10 = "rgba(0, 112, 245, 0.1)",
+    Red10 = "rgba(195, 25, 9, 0.1)",
     /**@deprecated Use Dark100 */
     Grey100 = "#8F949E",
     /**@deprecated Use Dark200 */

package/dist-web/index.js

@@ -1,7 +1,7 @@
 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, 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 { MoreHoriz, Info, Close, Error, 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';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -451,6 +451,7 @@ var Color;
   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";
@@ -2022,20 +2023,27 @@ function useMinBreakpoint(minBreakpoint) {
 
 var _excluded$m = ["action", "children", "onClose", "className", "classes", "variant"],
     _excluded2$4 = ["icon", "closeButton", "variantError", "variantSuccess"];
+var PaddedContent = /*#__PURE__*/styled.span.withConfig({
+  displayName: "SnackbarContent__PaddedContent",
+  componentId: "SD__sc-1jca4d5-0"
+})(["padding:2px 0 0;"]);
 var useStyles$b = /*#__PURE__*/makeStyles(theme => ({
   root: {
     color: Color.White,
     backgroundColor: Color.Dark500,
-    '&$variantError': {
-      color: Color.White,
-      backgroundColor: 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)
     }
@@ -2051,7 +2059,13 @@ var useStyles$b = /*#__PURE__*/makeStyles(theme => ({
       color: Color.White40
     }
   },
-  variantError: {},
+  variantError: {
+    color: Color.Red500,
+    background: Color.Red50,
+    '& $closeButton': {
+      color: Color.Red500
+    }
+  },
   variantSuccess: {}
 }), {
   name: 'SD-SnackbarContent'
@@ -2078,7 +2092,7 @@ var SnackbarContent = /*#__PURE__*/forwardRef((_ref, ref) => {
   } = _useStyles,
       styles = _objectWithoutProperties(_useStyles, _excluded2$4);
 
-  var Icon = variant === 'error' ? Warning : variant === 'success' ? CheckCircle : undefined;
+  var Icon = variant === 'error' ? Error : variant === 'success' ? CheckCircle : undefined;
   return /*#__PURE__*/jsx(SnackbarContent$1, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     classes: styles,
@@ -2089,7 +2103,9 @@ var SnackbarContent = /*#__PURE__*/forwardRef((_ref, ref) => {
     message: /*#__PURE__*/jsxs(Fragment, {
       children: [Icon && /*#__PURE__*/jsx(Icon, {
         className: icon
-      }), children]
+      }), /*#__PURE__*/jsx(PaddedContent, {
+        children: children
+      })]
     }),
     action: !action && !onClose ? null : /*#__PURE__*/jsxs(Grid, {
       container: true,
@@ -3139,7 +3155,7 @@ function overridePagination(theme) {
   var props = {};
   var overrides = {
     root: {
-      color: Color.Dark400
+      color: Color.Dark500
     },
     page: {
       '&:hover': {
@@ -3148,12 +3164,12 @@ function overridePagination(theme) {
       '&$focusVisible': {
         borderRadius: 4,
         backgroundColor: Color.White,
-        border: "1px solid ".concat(Color.Blue100)
+        border: "1px solid ".concat(Color.Blue30)
       },
       '&$selected': {
         backgroundColor: Color.Silver400,
         '&:hover, &$focusVisible': {
-          backgroundColor: Color.Silver400
+          backgroundColor: Color.Silver500
         },
         '&$disabled': {
           color: Color.Dark100,
@@ -3350,7 +3366,7 @@ function overrideSwitch(theme) {
         '&:hover': {
           backgroundColor: undefined,
           '& + $track': {
-            backgroundColor: Color.Blue400
+            backgroundColor: Color.Blue500
           }
         }
       },
@@ -3358,16 +3374,16 @@ function overrideSwitch(theme) {
         backgroundColor: Color.Silver500
       },
       '&$disabled + $track': {
-        backgroundColor: Color.Silver300
+        backgroundColor: Color.Dark30
       },
       '&$checked$disabled + $track': {
-        backgroundColor: Color.Blue100
+        backgroundColor: Color.Blue30
       },
       '&:hover + $track': {
         backgroundColor: Color.Dark100
       },
       '&.Mui-focusVisible + $track': {
-        boxShadow: "0 0 0 3px ".concat(Color.Blue100)
+        boxShadow: "0 0 0 3px ".concat(Color.Blue30)
       }
     }
   };