@superdispatch/ui 0.15.0 → 0.16.0-alpha.0

package/dist-src/index.js

@@ -1,3 +1,4 @@
+import * as v5 from "./v5/index.js";
 export * from "./adaptive-toolbar/AdaptiveToolbar.js";
 export * from "./avatar-button/AvatarButton.js";
 export * from "./button/Button.js";
@@ -37,4 +38,5 @@ export * from "./utils/isEmptyReactNode.js";
 export * from "./utils/mergeRefs.js";
 export * from "./utils/renderChildren.js";
 export * from "./utils/useUID.js";
-export * from "./utils/VisibilityObserver.js";
+export * from "./utils/VisibilityObserver.js";
+export { v5 };

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

@@ -0,0 +1,146 @@
+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

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

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

@@ -0,0 +1,63 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,146 @@
+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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,238 @@
+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

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