@superdispatch/ui 0.16.0-alpha.0 → 0.16.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superdispatch/ui",
-  "version": "0.16.0-alpha.0",
+  "version": "0.16.0-alpha.1",
   "license": "MIT",
   "files": [
     "dist-*/",

package/dist-src/v5/adaptive-toolbar/AdaptiveToolbar.js

@@ -1,146 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _excluded = ["items"];
-
-var _templateObject;
-
-import { ResizeObserver } from '@juggle/resize-observer';
-import { MoreHoriz } from '@mui/icons-material';
-import { Grid, Menu, MenuItem, styled, Toolbar, Typography } from '@mui/material';
-import { useEventHandler } from '@superdispatch/hooks';
-import { forwardRef, useLayoutEffect, useRef, useState } from 'react';
-import { Button } from "../button/Button.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-
-function useResizeObserver(node, observer) {
-  var handler = useEventHandler(observer);
-  useLayoutEffect(() => {
-    if (!node) {
-      return;
-    }
-
-    var resizeObserver = new ResizeObserver(() => {
-      handler(node);
-    });
-    resizeObserver.observe(node);
-    handler(node);
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [node, handler]);
-}
-
-var GridActionsItem = /*#__PURE__*/styled(Grid, {
-  name: 'SD-AdaptiveToolbar'
-})(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n  overflow: hidden;\n"])));
-export var AdaptiveToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var {
-    items
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var itemNodes = useRef([]);
-  var optionsButtonRef = useRef(null);
-  var [firstHiddenIdx, setFirstHiddenIdx] = useState(-1);
-  var menuItems = firstHiddenIdx === -1 ? [] : items.slice(firstHiddenIdx);
-  var [menuButtonNode, setMenuButtonRef] = useState();
-  var [rootNode, setRootNode] = useState(null);
-  useResizeObserver(rootNode, node => {
-    var _optionsButtonRef$cur;
-
-    var rootRect = node.getBoundingClientRect();
-    var rootWidth = rootRect.left + rootRect.width;
-    var optionsButtonRect = (_optionsButtonRef$cur = optionsButtonRef.current) === null || _optionsButtonRef$cur === void 0 ? void 0 : _optionsButtonRef$cur.getBoundingClientRect();
-    var optionsButtonWidth = (optionsButtonRect === null || optionsButtonRect === void 0 ? void 0 : optionsButtonRect.width) || 0;
-    var maxRightPosition = rootWidth - optionsButtonWidth;
-    var mountedNodes = itemNodes.current.filter(x => x != null);
-    var hiddenIdx = mountedNodes.findIndex((itemNode, idx) => {
-      itemNode.removeAttribute('hidden');
-      var itemRect = itemNode.getBoundingClientRect();
-      var itemRightPosition = itemRect.left + itemRect.width; // Ignore options button width when checking last item.
-
-      if (idx === mountedNodes.length - 1) {
-        return itemRightPosition > rootWidth;
-      }
-
-      return itemRightPosition > maxRightPosition;
-    });
-
-    if (hiddenIdx !== -1) {
-      mountedNodes.slice(hiddenIdx).forEach(itemNode => {
-        itemNode.setAttribute('hidden', 'true');
-      });
-    }
-
-    setFirstHiddenIdx(hiddenIdx);
-  });
-  return /*#__PURE__*/_jsx(Toolbar, _objectSpread(_objectSpread({}, props), {}, {
-    ref: ref,
-    children: /*#__PURE__*/_jsxs(Grid, {
-      container: true,
-      spacing: 1,
-      wrap: "nowrap",
-      ref: setRootNode,
-      children: [/*#__PURE__*/_jsx(GridActionsItem, {
-        item: true,
-        children: /*#__PURE__*/_jsx(Grid, {
-          container: true,
-          spacing: 1,
-          wrap: "nowrap",
-          component: "div",
-          children: items.map((item, idx) => /*#__PURE__*/_jsx(Grid, {
-            item: true,
-            ref: node => {
-              itemNodes.current[idx] = node;
-            },
-            children: /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
-              type: "button",
-              color: "primary",
-              variant: "outlined",
-              onClick: item.onClick
-            }, item.ButtonProps), {}, {
-              children: /*#__PURE__*/_jsx(Typography, {
-                noWrap: true,
-                variant: "inherit",
-                children: item.label
-              })
-            }))
-          }, item.key))
-        })
-      }), menuItems.length > 0 && /*#__PURE__*/_jsxs(Grid, {
-        item: true,
-        ref: optionsButtonRef,
-        component: "div",
-        children: [/*#__PURE__*/_jsx(Button, {
-          type: "button",
-          variant: "outlined",
-          onClick: _ref2 => {
-            var {
-              currentTarget
-            } = _ref2;
-            setMenuButtonRef(currentTarget);
-          },
-          children: /*#__PURE__*/_jsx(MoreHoriz, {})
-        }), /*#__PURE__*/_jsx(Menu, {
-          open: !!menuButtonNode,
-          anchorEl: menuButtonNode,
-          onClose: () => {
-            setMenuButtonRef(undefined);
-          },
-          children: menuItems.map(item => /*#__PURE__*/_jsx(MenuItem, {
-            onClick: event => {
-              var _item$onClick;
-
-              (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item, event);
-              setMenuButtonRef(undefined);
-            },
-            children: item.label
-          }, item.key))
-        })]
-      })]
-    })
-  }));
-});
-if (process.env.NODE_ENV !== "production") AdaptiveToolbar.displayName = "AdaptiveToolbar";

package/dist-src/v5/app-bar/AppBarOverrides.js

@@ -1,9 +0,0 @@
-export function overrideAppBar(theme) {
-  theme.components.MuiAppBar = {
-    defaultProps: {
-      elevation: 0,
-      color: 'inherit',
-      position: 'static'
-    }
-  };
-}

package/dist-src/v5/autocomplete/AutocompleteOverrides.js

@@ -1,63 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import { autocompleteClasses, SvgIcon } from '@mui/material';
-import { jsx as _jsx } from "react/jsx-runtime";
-export function overrideAutocomplete(theme) {
-  var sm = theme.breakpoints.up('sm');
-  theme.components.MuiAutocomplete = {
-    defaultProps: {
-      popupIcon: /*#__PURE__*/_jsx(SvgIcon, {
-        children: /*#__PURE__*/_jsx("path", {
-          d: "M12 16.5L6 9h12l-6 7.5z",
-          fill: "currentColor"
-        })
-      })
-    },
-    styleOverrides: {
-      paper: _objectSpread({}, theme.typography.body2),
-      tag: {
-        margin: '4px',
-        [sm]: {
-          margin: '2px'
-        }
-      },
-      endAdornment: {
-        top: 0,
-        bottom: 0,
-        display: 'flex',
-        alignItems: 'center'
-      },
-      popupIndicator: {
-        '& .MuiSvgIcon-root': {
-          fontSize: '24px',
-          [sm]: {
-            fontSize: '16px'
-          }
-        }
-      },
-      inputRoot: {
-        '&[class*="MuiOutlinedInput-root"]': {
-          padding: '6px 8px',
-          ["& .".concat(autocompleteClasses.input)]: {
-            width: '144px',
-            padding: '4px'
-          },
-          ["& .".concat(autocompleteClasses.input, ":first-child")]: {
-            paddingLeft: 'unset'
-          },
-          ["& .".concat(autocompleteClasses.endAdornment)]: {
-            right: '12px'
-          },
-          [sm]: {
-            padding: theme.spacing(0.5, 0.75),
-            ["& .".concat(autocompleteClasses.input)]: {
-              padding: '2px'
-            },
-            ["& .".concat(autocompleteClasses.endAdornment)]: {
-              right: '8px'
-            }
-          }
-        }
-      }
-    }
-  };
-}

package/dist-src/v5/avatar/AvatarOverrides.js

@@ -1,21 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import { Color } from "../theme/Color.js";
-export function overrideAvatar(theme) {
-  theme.components.MuiAvatar = {
-    styleOverrides: {
-      root: _objectSpread(_objectSpread({}, theme.typography.h5), {}, {
-        textTransform: 'uppercase',
-        width: theme.spacing(5),
-        height: theme.spacing(5),
-        [theme.breakpoints.up('sm')]: {
-          width: theme.spacing(4),
-          height: theme.spacing(4)
-        }
-      }),
-      colorDefault: {
-        color: Color.Dark300,
-        backgroundColor: Color.Silver300
-      }
-    }
-  };
-}

package/dist-src/v5/avatar-button/AvatarButton.js

@@ -1,146 +0,0 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-var _excluded = ["size", "icon", "isLoading", "disabled", "avatarRef", "alt", "imgProps", "sizes", "src", "srcSet", "variant", "children"];
-import { Avatar, ButtonBase, CircularProgress, styled } from '@mui/material';
-import { forwardRef } from 'react';
-import { Color } from "../theme/Color.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var Overlay = /*#__PURE__*/styled('div')(_ref => {
-  var {
-    theme
-  } = _ref;
-  var sm = theme.breakpoints.up('sm');
-  return {
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    position: 'absolute',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: '50%',
-    backgroundColor: Color.Transparent,
-    transition: theme.transitions.create('background-color'),
-    '& > svg': {
-      opacity: 0,
-      color: Color.White,
-      transition: theme.transitions.create('opacity'),
-      fontSize: theme.spacing(3),
-      [sm]: {
-        fontSize: theme.spacing(2)
-      }
-    }
-  };
-});
-var StyledProgress = /*#__PURE__*/styled(CircularProgress)(_ref2 => {
-  var {
-    theme
-  } = _ref2;
-  var sm = theme.breakpoints.up('sm');
-  return {
-    top: 0,
-    left: 0,
-    position: 'absolute',
-    fontSize: theme.spacing(5),
-    [sm]: {
-      fontSize: theme.spacing(4)
-    }
-  };
-});
-var StyledButton = /*#__PURE__*/styled(ButtonBase, {
-  name: 'SD-AvatarButton'
-})(_ref3 => {
-  var {
-    theme
-  } = _ref3;
-  var sm = theme.breakpoints.up('sm');
-  return {
-    borderRadius: '50%',
-    '&[disabled], &[aria-busy="true"]': {
-      ["& > ".concat(Overlay)]: {
-        backgroundColor: Color.White50
-      }
-    },
-    '&:not([disabled])[aria-busy="false"]': {
-      '&:hover, &:focus': {
-        ["&[data-with-icon=\"true\"] > ".concat(Overlay)]: {
-          backgroundColor: Color.Black50,
-          '& > svg': {
-            opacity: 1
-          }
-        },
-        ["&:not([data-with-icon=\"true\"]) > ".concat(Overlay)]: {
-          backgroundColor: Color.Black20
-        }
-      }
-    },
-    '&[data-size-large="true"]': {
-      '& > .MuiAvatar-root': _objectSpread(_objectSpread({}, theme.typography.h2), {}, {
-        width: theme.spacing(7),
-        height: theme.spacing(7),
-        [sm]: {
-          width: theme.spacing(8),
-          height: theme.spacing(8)
-        }
-      }),
-      ["& > ".concat(Overlay)]: {
-        ["& > ".concat(StyledProgress)]: {
-          fontSize: theme.spacing(7),
-          [sm]: {
-            fontSize: theme.spacing(8)
-          }
-        },
-        '& > svg': {
-          fontSize: theme.spacing(4),
-          [sm]: {
-            fontSize: theme.spacing(3)
-          }
-        }
-      }
-    }
-  };
-});
-export var AvatarButton = /*#__PURE__*/forwardRef((_ref4, ref) => {
-  var {
-    size,
-    icon,
-    isLoading = false,
-    disabled = false,
-    avatarRef,
-    alt,
-    imgProps,
-    sizes,
-    src,
-    srcSet,
-    variant,
-    children
-  } = _ref4,
-      props = _objectWithoutProperties(_ref4, _excluded);
-
-  return /*#__PURE__*/_jsxs(StyledButton, _objectSpread(_objectSpread({}, props), {}, {
-    ref: ref,
-    "aria-busy": isLoading,
-    "aria-disabled": disabled,
-    disabled: disabled || isLoading,
-    "data-with-icon": !!icon,
-    "data-size-large": size === 'large',
-    children: [/*#__PURE__*/_jsx(Avatar, {
-      ref: avatarRef,
-      variant: variant,
-      alt: alt,
-      src: src,
-      sizes: sizes,
-      srcSet: srcSet,
-      imgProps: imgProps,
-      children: children
-    }), /*#__PURE__*/_jsxs(Overlay, {
-      children: [icon, isLoading && /*#__PURE__*/_jsx(StyledProgress, {
-        size: "1em",
-        thickness: size === 'large' ? 2.5 : 1.5
-      })]
-    })]
-  }));
-});
-if (process.env.NODE_ENV !== "production") AvatarButton.displayName = "AvatarButton";

package/dist-src/v5/button/Button.js

@@ -1,32 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["size", "children", "isActive", "isLoading", "color"];
-import { LoadingButton } from '@mui/lab';
-import { CircularProgress } from '@mui/material';
-import { forwardRef } from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
-export var Button = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var {
-    size,
-    children,
-    isActive,
-    isLoading,
-    color = 'primary'
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  return /*#__PURE__*/_jsx(LoadingButton, _objectSpread(_objectSpread({}, props), {}, {
-    ref: ref,
-    size: size,
-    "data-color": color,
-    loading: isLoading,
-    "aria-expanded": isActive,
-    color: color === 'primary' ? color : 'inherit',
-    loadingIndicator: /*#__PURE__*/_jsx(CircularProgress, {
-      size: "1em",
-      color: "inherit"
-    }),
-    children: children
-  }));
-});
-if (process.env.NODE_ENV !== "production") Button.displayName = "Button";

package/dist-src/v5/button/ButtonOverrides.js

@@ -1,238 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import { loadingButtonClasses } from '@mui/lab';
-import { buttonClasses } from '@mui/material';
-import { Color } from "../theme/Color.js";
-
-function outlineShadow() {
-  var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-  var color = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Color.Transparent;
-  return "0 0 0 ".concat(size, "px ").concat(color);
-}
-
-function textVariant(text, outline, background, progress) {
-  return {
-    '&': {
-      color: text,
-      boxShadow: outlineShadow(),
-      backgroundColor: Color.Transparent
-    },
-    '&:hover': {
-      backgroundColor: background
-    },
-    '&[aria-expanded="true"]': {
-      backgroundColor: background
-    },
-    '&:focus': {
-      backgroundColor: background,
-      boxShadow: outlineShadow(2, outline)
-    },
-    ["&.".concat(buttonClasses.disabled)]: {
-      color: outline,
-      boxShadow: outlineShadow(),
-      backgroundColor: Color.Transparent,
-      ["& .".concat(loadingButtonClasses.loadingIndicator)]: {
-        color: progress
-      }
-    }
-  };
-}
-
-function outlinedBorder(borderColor) {
-  var outlineColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Color.Transparent;
-  return "inset 0 0 0 1px ".concat(borderColor, ", 0 0 0 2px ").concat(outlineColor);
-}
-
-function outlinedVariant(staleText, staleBorder, disabledText, disabledBorder, activeText, activeBorder, activeOutline, activeBackground, progress, backgroundColor) {
-  return {
-    backgroundColor,
-    color: staleText,
-    border: 0,
-    boxShadow: outlinedBorder(staleBorder),
-    '&:hover': {
-      color: activeText,
-      border: 0,
-      backgroundColor: activeBackground,
-      boxShadow: outlinedBorder(activeBorder)
-    },
-    '&[aria-expanded="true"]': {
-      color: activeText,
-      backgroundColor: activeBackground,
-      boxShadow: outlinedBorder(activeBorder)
-    },
-    '&:focus': {
-      boxShadow: outlinedBorder(activeBorder, activeOutline)
-    },
-    ["&.".concat(buttonClasses.disabled)]: {
-      backgroundColor,
-      color: disabledText,
-      boxShadow: outlinedBorder(disabledBorder),
-      ["& .".concat(loadingButtonClasses.loadingIndicator)]: {
-        color: progress
-      }
-    }
-  };
-}
-
-function containedVariant(text, backgroundColor, outline, active, disabledText, disabledBackground) {
-  return {
-    color: text,
-    backgroundColor,
-    boxShadow: outlineShadow(),
-    '&:hover': {
-      backgroundColor: active
-    },
-    '&[aria-expanded="true"]': {
-      backgroundColor: active
-    },
-    '&:focus': {
-      boxShadow: outlineShadow(3, outline)
-    },
-    ["&.".concat(buttonClasses.disabled)]: {
-      color: disabledText,
-      boxShadow: outlineShadow(),
-      backgroundColor: disabledBackground,
-      ["& .".concat(loadingButtonClasses.loadingIndicator)]: {
-        color: disabledText
-      }
-    }
-  };
-}
-
-function sizeSmall(theme) {
-  var sm = theme.breakpoints.up('sm');
-  return _objectSpread(_objectSpread({}, theme.typography.button), {}, {
-    padding: theme.spacing(0.5, 3),
-    [sm]: {
-      padding: theme.spacing(0.25, 2)
-    }
-  });
-}
-
-function sizeLarge(theme) {
-  var sm = theme.breakpoints.up('sm');
-  return _objectSpread(_objectSpread({}, theme.typography.button), {}, {
-    fontSize: '18px',
-    lineHeight: '28px',
-    padding: theme.spacing(1.75, 8),
-    [sm]: {
-      fontSize: '16px',
-      lineHeight: '24px',
-      padding: theme.spacing(1, 4)
-    }
-  });
-}
-
-export function overrideButton(theme) {
-  var sm = theme.breakpoints.up('sm');
-  theme.components.MuiLoadingButton = {
-    defaultProps: {
-      variant: 'outlined'
-    },
-    styleOverrides: {
-      loadingIndicator: {
-        color: 'inherit',
-        fontSize: theme.spacing(2),
-        [".".concat(buttonClasses.sizeLarge, " &")]: {
-          fontSize: theme.spacing(3)
-        }
-      }
-    }
-  };
-  theme.components.MuiButton = {
-    defaultProps: {
-      color: 'primary',
-      variant: 'outlined',
-      disableFocusRipple: true
-    },
-    styleOverrides: {
-      root: {
-        minWidth: theme.spacing(6),
-        transition: theme.transitions.create(['color', 'border', 'box-shadow', 'background-color']),
-        padding: theme.spacing(1.25, 3),
-        [sm]: {
-          padding: theme.spacing(0.75, 2)
-        },
-        '&:hover': {
-          backgroundColor: 'initial',
-          ["&.".concat(buttonClasses.disabled)]: {
-            backgroundColor: 'initial'
-          },
-          '@media (hover: none)': {
-            backgroundColor: 'initial'
-          }
-        },
-        ["&.".concat(buttonClasses.disabled)]: {
-          color: 'initial'
-        },
-        '& > .MuiSvgIcon-root': {
-          fontSize: '24px',
-          [sm]: {
-            fontSize: '20px'
-          },
-          [".".concat(buttonClasses.sizeLarge, "&")]: {
-            fontSize: '28px',
-            [sm]: {
-              fontSize: '24px'
-            }
-          }
-        }
-      },
-      sizeSmall: sizeSmall(theme),
-      sizeLarge: sizeLarge(theme),
-      text: {
-        padding: 'initial',
-        '&[data-color="error"]': textVariant(Color.Red300, Color.Red100, Color.Red50, Color.Red200),
-        '&[data-color="success"]': textVariant(Color.Green300, Color.Green100, Color.Green50, Color.Green200),
-        '&[data-color="white"]': textVariant(Color.White, Color.White50, Color.White10, Color.White50)
-      },
-      textPrimary: textVariant(Color.Blue300, Color.Blue100, Color.Blue50, Color.Blue200),
-      textSizeSmall: sizeSmall(theme),
-      textSizeLarge: sizeLarge(theme),
-      outlined: {
-        border: 'none',
-        padding: 'initial',
-        ["&.".concat(buttonClasses.disabled)]: {
-          border: 'none'
-        },
-        '&[data-color="error"]': outlinedVariant(Color.Red300, Color.Red300, Color.Red100, Color.Red100, Color.Red300, Color.Red300, Color.Red100, Color.Red50, Color.Red300, Color.White),
-        '&[data-color="success"]': outlinedVariant(Color.Green300, Color.Green300, Color.Green100, Color.Green100, Color.Green300, Color.Green300, Color.Green100, Color.Green50, Color.Green300, Color.White),
-        '&[data-color="white"]': outlinedVariant(Color.White, Color.White50, Color.White50, Color.White40, Color.White, Color.White50, Color.White40, Color.White10, Color.White50, Color.Transparent)
-      },
-      outlinedPrimary: outlinedVariant(Color.Dark500, Color.Silver500, Color.Silver500, Color.Silver400, Color.Blue300, Color.Blue300, Color.Blue100, Color.Blue50, Color.Dark200, Color.White),
-      outlinedSizeSmall: sizeSmall(theme),
-      outlinedSizeLarge: sizeLarge(theme),
-      contained: {
-        boxShadow: 'none',
-        backgroundColor: 'initial',
-        '&:hover': {
-          boxShadow: 'none',
-          backgroundColor: 'initial',
-          ["&.".concat(buttonClasses.disabled)]: {
-            backgroundColor: 'none'
-          },
-          '@media (hover: none)': {
-            boxShadow: 'none',
-            backgroundColor: 'none'
-          }
-        },
-        '&:active': {
-          boxShadow: 'none'
-        },
-        ["&.".concat(buttonClasses.focusVisible)]: {
-          boxShadow: 'none'
-        },
-        ["&.".concat(buttonClasses.disabled)]: {
-          color: 'initial',
-          boxShadow: 'none',
-          backgroundColor: 'initial'
-        },
-        '&[data-color="error"]': containedVariant(Color.White, Color.Red300, Color.Red100, Color.Red500, Color.White, Color.Red100),
-        '&[data-color="success"]': containedVariant(Color.White, Color.Green300, Color.Green100, Color.Green500, Color.White, Color.Green100),
-        '&[data-color="white"]': containedVariant(Color.White, Color.White20, Color.White40, Color.White40, Color.White50, Color.White08)
-      },
-      containedPrimary: containedVariant(Color.White, Color.Blue300, Color.Blue100, Color.Blue500, Color.White, Color.Blue100),
-      containedSizeSmall: sizeSmall(theme),
-      containedSizeLarge: sizeLarge(theme)
-    }
-  };
-}

package/dist-src/v5/card/CardOverrides.js

@@ -1,16 +0,0 @@
-export function overrideCard(theme) {
-  theme.components.MuiCard = {
-    defaultProps: {
-      variant: 'outlined'
-    }
-  };
-  theme.components.MuiCardContent = {
-    styleOverrides: {
-      root: {
-        '&:last-child': {
-          paddingBottom: '16px'
-        }
-      }
-    }
-  };
-}