@superdispatch/ui 0.11.0 → 0.15.0

package/dist-node/index.js

@@ -202,6 +202,12 @@ if (process.env.NODE_ENV !== "production") AdaptiveToolbar.displayName = "Adapti
   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";
@@ -423,7 +429,7 @@ var useStyles$2 = /*#__PURE__*/styles.makeStyles(theme => ({
     transition: theme.transitions.create(['color', 'box-shadow', 'border-color', 'background-color'])
   },
   disabled: {
-    color: exports.Color.Grey200,
+    color: exports.Color.Dark200,
     borderColor: exports.Color.Silver500,
     backgroundColor: exports.Color.Silver100
   },
@@ -972,7 +978,7 @@ var useStyles$4 = /*#__PURE__*/styles.makeStyles(theme => ({
     display: 'inline-flex',
     marginRight: theme.spacing(1),
     '& > .MuiSvgIcon-root': {
-      color: exports.Color.Grey100,
+      color: exports.Color.Dark100,
       fontSize: theme.spacing(3),
       [theme.breakpoints.up('sm')]: {
         fontSize: theme.spacing(2)
@@ -1338,19 +1344,29 @@ var InlineGrid = /*#__PURE__*/react.forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") InlineGrid.displayName = "InlineGrid";
 
-var _excluded$f = ["size", "square", "classes", "children", "className", "CardContentProps"],
-    _excluded2$2 = ["content", "sizeLarge", "fullWidth"];
+function mergeRefs() {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
 
+  return node => {
+    refs.forEach(ref => {
+      assignRef(ref, node);
+    });
+  };
+}
 function assignRef(ref, value) {
   if (ref) {
-    if (typeof ref === 'object') {
-      ref.current = value;
-    } else {
+    if (typeof ref === 'function') {
       ref(value);
+    } else {
+      ref.current = value;
     }
   }
 }
 
+var _excluded$f = ["size", "square", "classes", "children", "className", "CardContentProps"],
+    _excluded2$2 = ["content", "sizeLarge", "fullWidth"];
 var useStyles$9 = /*#__PURE__*/styles.makeStyles(theme => ({
   root: {
     '&$fullWidth': {
@@ -1544,7 +1560,7 @@ var _excluded$i = ["action", "children", "onClose", "className", "classes", "var
 var useStyles$a = /*#__PURE__*/styles.makeStyles(theme => ({
   root: {
     color: exports.Color.White,
-    backgroundColor: exports.Color.Grey500,
+    backgroundColor: exports.Color.Dark500,
     '&$variantError': {
       color: exports.Color.White,
       backgroundColor: exports.Color.Red500
@@ -1825,7 +1841,7 @@ var Stack = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
 });
 if (process.env.NODE_ENV !== "production") Stack.displayName = "Stack";
 
-var _excluded$l = ["color", "variant", "children", "classes", "className", "noWrap", "component"];
+var _excluded$l = ["color", "variant", "children", "classes", "className", "noWrap", "fontWeight", "component"];
 var useStyles$b = /*#__PURE__*/styles.makeStyles(theme => ({
   root: {
     maxWidth: '100%',
@@ -1836,7 +1852,7 @@ var useStyles$b = /*#__PURE__*/styles.makeStyles(theme => ({
   },
   variantSubtle: {
     '&$colorGrey': {
-      color: exports.Color.Grey300,
+      color: exports.Color.Dark300,
       backgroundColor: exports.Color.Silver200
     },
     '&$colorBlue': {
@@ -1867,7 +1883,7 @@ var useStyles$b = /*#__PURE__*/styles.makeStyles(theme => ({
   variantBold: {
     color: exports.Color.White,
     '&$colorGrey': {
-      backgroundColor: exports.Color.Grey300
+      backgroundColor: exports.Color.Dark300
     },
     '&$colorBlue': {
       backgroundColor: exports.Color.Blue500
@@ -1906,6 +1922,7 @@ var Tag = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     classes,
     className,
     noWrap = true,
+    fontWeight = 'bold',
     component = 'div'
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$l);
@@ -1915,9 +1932,9 @@ var Tag = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   });
   return /*#__PURE__*/jsxRuntime.jsx(core.Typography, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
-    variant: "body1",
     noWrap: noWrap,
     component: component,
+    variant: fontWeight === 'bold' ? 'body1' : 'body2',
     className: clsx(styles.root, className, {
       'grey': styles.colorGrey,
       'blue': styles.colorBlue,
@@ -2019,7 +2036,7 @@ function overrideAvatar(theme) {
       }
     }),
     colorDefault: {
-      color: exports.Color.Grey300,
+      color: exports.Color.Dark300,
       backgroundColor: exports.Color.Silver300
     }
   };
@@ -2214,7 +2231,7 @@ function overrideButton(theme) {
       '&[data-color="success"]': outlinedVariant(exports.Color.Green300, exports.Color.Green300, exports.Color.Green100, exports.Color.Green100, exports.Color.Green300, exports.Color.Green300, exports.Color.Green100, exports.Color.Green50, exports.Color.Green300, exports.Color.White),
       '&[data-color="white"]': outlinedVariant(exports.Color.White, exports.Color.White50, exports.Color.White50, exports.Color.White40, exports.Color.White, exports.Color.White50, exports.Color.White40, exports.Color.White10, exports.Color.White50, exports.Color.Transparent)
     },
-    outlinedPrimary: outlinedVariant(exports.Color.Grey500, exports.Color.Silver500, exports.Color.Silver500, exports.Color.Silver400, exports.Color.Blue300, exports.Color.Blue300, exports.Color.Blue100, exports.Color.Blue50, exports.Color.Grey200, exports.Color.White),
+    outlinedPrimary: outlinedVariant(exports.Color.Dark500, exports.Color.Silver500, exports.Color.Silver500, exports.Color.Silver400, exports.Color.Blue300, exports.Color.Blue300, exports.Color.Blue100, exports.Color.Blue50, exports.Color.Dark200, exports.Color.White),
     outlinedSizeSmall: {
       padding: undefined,
       fontSize: undefined
@@ -2320,7 +2337,7 @@ function overrideCheckbox(theme) {
   };
   theme.overrides.MuiCheckbox = {
     root: {
-      color: exports.Color.Grey100,
+      color: exports.Color.Dark100,
       marginTop: theme.spacing(-0.625),
       marginBottom: theme.spacing(-0.625)
     },
@@ -2329,7 +2346,7 @@ function overrideCheckbox(theme) {
         color: exports.Color.Silver500
       },
       '&:hover:not($checked)': {
-        color: exports.Color.Grey100
+        color: exports.Color.Dark100
       }
     }
   };
@@ -2358,7 +2375,7 @@ function overrideChip(theme) {
       backgroundColor: exports.Color.Silver200,
       '&$disabled': {
         opacity: undefined,
-        color: exports.Color.Grey100
+        color: exports.Color.Dark100
       }
     }),
     sizeSmall: {
@@ -2404,7 +2421,7 @@ function overrideChip(theme) {
       },
       '& > svg': {
         borderRadius: '50%',
-        color: exports.Color.Grey200,
+        color: exports.Color.Dark200,
         fontSize: '1em'
       }
     },
@@ -2419,7 +2436,7 @@ function overrideChip(theme) {
       }
     },
     icon: {
-      color: exports.Color.Grey100,
+      color: exports.Color.Dark100,
       fontSize: '1em',
       marginRight: undefined
     },
@@ -2442,6 +2459,14 @@ function overrideDialog(theme) {
   theme.overrides.MuiDialog = {
     paper: {
       margin: theme.spacing(3)
+    },
+    paperWidthXs: {
+      maxWidth: Math.max(theme.breakpoints.values.xs, 360),
+      '&$paperScrollBody': {
+        [theme.breakpoints.down(Math.max(theme.breakpoints.values.xs, 360) + 32 * 2)]: {
+          maxWidth: 'calc(100% - 64px)'
+        }
+      }
     }
   };
   theme.overrides.MuiDialogTitle = {
@@ -2483,7 +2508,7 @@ function overrideDrawer(theme) {
 function overrideIconButton(theme) {
   theme.overrides.MuiIconButton = {
     root: {
-      color: exports.Color.Grey100,
+      color: exports.Color.Dark100,
       backgroundColor: exports.Color.Transparent,
       transition: theme.transitions.create(['color', 'background-color'], {
         duration: theme.transitions.duration.short
@@ -2492,10 +2517,10 @@ function overrideIconButton(theme) {
         backgroundColor: exports.Color.Transparent
       },
       '&:active': {
-        color: exports.Color.Grey500
+        color: exports.Color.Dark500
       },
       '&:hover ': {
-        color: exports.Color.Grey300
+        color: exports.Color.Dark300
       },
       '&:focus': {
         backgroundColor: exports.Color.Silver400
@@ -2603,7 +2628,7 @@ function overridePagination(theme) {
   var props = {};
   var overrides = {
     root: {
-      color: exports.Color.Grey400
+      color: exports.Color.Dark400
     },
     page: {
       '&:hover': {
@@ -2620,13 +2645,13 @@ function overridePagination(theme) {
           backgroundColor: exports.Color.Silver400
         },
         '&$disabled': {
-          color: exports.Color.Grey100,
+          color: exports.Color.Dark100,
           backgroundColor: exports.Color.Silver400
         }
       },
       '&$disabled': {
         opacity: undefined,
-        color: exports.Color.Grey100
+        color: exports.Color.Dark100
       }
     }
   }; // Remove `Object.assign` after official release of `PaginationItem`.
@@ -2679,7 +2704,7 @@ function overrideRadio(theme) {
   };
   theme.overrides.MuiRadio = {
     root: {
-      color: exports.Color.Grey100,
+      color: exports.Color.Dark100,
       marginTop: theme.spacing(-0.625),
       marginBottom: theme.spacing(-0.625)
     },
@@ -2688,7 +2713,7 @@ function overrideRadio(theme) {
         color: exports.Color.Silver500
       },
       '&:hover:not($checked)': {
-        color: exports.Color.Grey100
+        color: exports.Color.Dark100
       }
     }
   };
@@ -2740,7 +2765,7 @@ function overrideSvgIcon(theme) {
       fontSize: 'var(--mui-svg-icon-size, 32px)'
     },
     colorAction: {
-      color: exports.Color.Grey100
+      color: exports.Color.Dark100
     }
   };
 }
@@ -2823,7 +2848,7 @@ function overrideSwitch(theme) {
         backgroundColor: exports.Color.Blue100
       },
       '&:hover + $track': {
-        backgroundColor: exports.Color.Grey100
+        backgroundColor: exports.Color.Dark100
       },
       '&.Mui-focusVisible + $track': {
         boxShadow: "0 0 0 3px ".concat(exports.Color.Blue100)
@@ -2844,7 +2869,7 @@ function overrideTabs(theme) {
     },
     scrollButtons: {
       opacity: 1,
-      color: exports.Color.Grey100,
+      color: exports.Color.Dark100,
       width: theme.spacing(4),
       transition: theme.transitions.create('opacity', {
         duration: theme.transitions.duration.short
@@ -2864,7 +2889,7 @@ function overrideTabs(theme) {
       }
     }),
     textColorPrimary: {
-      color: exports.Color.Grey500,
+      color: exports.Color.Dark500,
       '&:hover, &:focus': {
         color: exports.Color.Blue300
       }
@@ -2890,7 +2915,7 @@ function overrideTextField(theme) {
   };
   theme.overrides.MuiFormLabel = {
     root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-      color: exports.Color.Grey400,
+      color: exports.Color.Dark400,
       '&$error': {
         color: undefined
       },
@@ -2985,7 +3010,7 @@ function overrideTextField(theme) {
     icon: {
       top: 'calc(50% - 0.5em)',
       '$disabled &': {
-        color: exports.Color.Grey100
+        color: exports.Color.Dark100
       },
       fontSize: theme.spacing(3),
       [sm]: {
@@ -3073,7 +3098,7 @@ function overrideTooltip(theme) {
   theme.overrides.MuiTooltip = {
     tooltip: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
       padding: theme.spacing(1, 1.5),
-      backgroundColor: exports.Color.Grey400
+      backgroundColor: exports.Color.Dark400
     }),
     popperArrow: {
       '&[x-placement*="top"] $arrow': {
@@ -3098,7 +3123,7 @@ function overrideTooltip(theme) {
       }
     },
     arrow: {
-      color: exports.Color.Grey400,
+      color: exports.Color.Dark400,
       fontSize: theme.spacing(1)
     }
   };
@@ -3231,10 +3256,10 @@ function createSuperDispatchTheme() {
         disabled: exports.Color.Silver400
       },
       text: {
-        primary: exports.Color.Grey500,
-        secondary: exports.Color.Grey200,
-        hint: exports.Color.Grey100,
-        disabled: exports.Color.Grey100
+        primary: exports.Color.Dark500,
+        secondary: exports.Color.Dark200,
+        hint: exports.Color.Dark100,
+        disabled: exports.Color.Dark100
       },
       divider: exports.Color.Silver400
     },
@@ -3413,24 +3438,6 @@ var Tiles = /*#__PURE__*/react.forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") Tiles.displayName = "Tiles";
 
-function mergeRefs() {
-  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
-    refs[_key] = arguments[_key];
-  }
-
-  return node => {
-    refs.forEach(ref => {
-      if (ref) {
-        if (typeof ref === 'function') {
-          ref(node);
-        } else {
-          ref.current = node;
-        }
-      }
-    });
-  };
-}
-
 exports.AdaptiveToolbar = AdaptiveToolbar;
 exports.AvatarButton = AvatarButton;
 exports.Button = Button;
@@ -3462,6 +3469,7 @@ exports.Tag = Tag;
 exports.ThemeProvider = ThemeProvider;
 exports.Tiles = Tiles;
 exports.VisibilityObserver = VisibilityObserver;
+exports.assignRef = assignRef;
 exports.isColorProp = isColorProp;
 exports.isEmptyReactNode = isEmptyReactNode;
 exports.mergeRefs = mergeRefs;