@superdispatch/ui 0.15.0 → 0.16.0-alpha.0

package/dist-src/v5/card-button/CardButton.js

@@ -0,0 +1,135 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["hint", "size", "error", "classes", "className", "children", "endIcon", "startIcon", "disabled"];
+import { ButtonBase, styled, Typography } 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";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var StyledButton = /*#__PURE__*/styled(ButtonBase)(_ref => {
+  var {
+    theme
+  } = _ref;
+  return {
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    backgroundColor: Color.White,
+    border: '1px dashed',
+    borderRadius: theme.spacing(0.5),
+    padding: theme.spacing(1.5),
+    minHeight: theme.spacing(13),
+    transition: theme.transitions.create(['color', 'box-shadow', 'border-color', 'background-color']),
+    '&[data-disabled="true"]': {
+      color: Color.Dark200,
+      borderColor: Color.Silver500,
+      backgroundColor: Color.Silver100
+    },
+    '&[data-primary="true"]': {
+      color: Color.Blue300,
+      borderColor: Color.Silver500,
+      '&:focus': {
+        backgroundColor: Color.Blue50
+      },
+      '&:hover, &:active': {
+        borderColor: Color.Blue300,
+        backgroundColor: Color.Blue50
+      }
+    },
+    '&[data-error="true"]': {
+      color: Color.Red300,
+      borderColor: Color.Red300,
+      backgroundColor: Color.Red50,
+      '&:focus': {
+        backgroundColor: Color.Red75
+      }
+    },
+    '&[data-size="small"]': {
+      minHeight: theme.spacing(6)
+    },
+    '&[data-size="large"]': {
+      minHeight: theme.spacing(17.5)
+    }
+  };
+});
+var Label = /*#__PURE__*/styled(Typography)({
+  display: 'flex',
+  alignItems: 'center'
+});
+var Hint = /*#__PURE__*/styled(Typography)(_ref2 => {
+  var {
+    theme
+  } = _ref2;
+  return {
+    marginTop: theme.spacing(0.5)
+  };
+});
+var Icon = /*#__PURE__*/styled('span')(_ref3 => {
+  var {
+    theme
+  } = _ref3;
+  return {
+    display: 'flex',
+    '& svg': {
+      fontSize: theme.spacing(3),
+      [theme.breakpoints.up('sm')]: {
+        fontSize: theme.spacing(2.5)
+      }
+    },
+    '&[data-placement="start"]': {
+      marginRight: theme.spacing(1),
+      marginLeft: theme.spacing(-0.5)
+    },
+    '&[data-placement="end"]': {
+      marginLeft: theme.spacing(1),
+      marginRight: theme.spacing(-0.5)
+    }
+  };
+});
+export var CardButton = /*#__PURE__*/forwardRef((_ref4, ref) => {
+  var {
+    hint,
+    size,
+    error,
+    classes,
+    className,
+    children,
+    endIcon,
+    startIcon,
+    disabled
+  } = _ref4,
+      props = _objectWithoutProperties(_ref4, _excluded);
+
+  return /*#__PURE__*/_jsx(StyledButton, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    disabled: disabled,
+    "data-size": size,
+    "data-disabled": !!disabled,
+    "data-error": !disabled && !!error,
+    "data-primary": !disabled && !error,
+    children: error ? /*#__PURE__*/_jsx(Label, {
+      variant: "h4",
+      color: "inherit",
+      children: error
+    }) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsxs(Label, {
+        variant: "h4",
+        color: "inherit",
+        children: [!!startIcon && /*#__PURE__*/_jsx(Icon, {
+          "data-placement": "start",
+          children: startIcon
+        }), children, !!endIcon && /*#__PURE__*/_jsx(Icon, {
+          "data-placement": "end",
+          children: endIcon
+        })]
+      }), !!hint && /*#__PURE__*/_jsx(Hint, {
+        color: "textSecondary",
+        children: hint
+      })]
+    })
+  }));
+});
+if (process.env.NODE_ENV !== "production") CardButton.displayName = "CardButton";

package/dist-src/v5/checkbox/CheckboxField.js

@@ -0,0 +1,37 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["label", "error", "checked", "onBlur", "onChange", "helperText", "FormControlLabelProps"];
+import { Checkbox, FormControl, FormControlLabel, FormHelperText } from '@mui/material';
+import { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var CheckboxField = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    label,
+    error,
+    checked,
+    onBlur,
+    onChange,
+    helperText,
+    FormControlLabelProps: formControlLabelProps
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_jsxs(FormControl, {
+    error: error,
+    children: [/*#__PURE__*/_jsx(FormControlLabel, _objectSpread(_objectSpread({}, formControlLabelProps), {}, {
+      label: label,
+      checked: checked,
+      onBlur: onBlur,
+      onChange: onChange,
+      control: /*#__PURE__*/_jsx(Checkbox, _objectSpread({
+        ref: ref,
+        color: "primary",
+        disableRipple: true
+      }, props))
+    })), helperText && /*#__PURE__*/_jsx(FormHelperText, {
+      children: helperText
+    })]
+  });
+});
+if (process.env.NODE_ENV !== "production") CheckboxField.displayName = "CheckboxField";

package/dist-src/v5/checkbox/CheckboxGroudField.js

@@ -0,0 +1,32 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["FormGroupProps", "label", "FormLabelProps", "helperText", "FormHelperTextProps", "children"];
+import { FormControl, FormGroup, FormHelperText, FormLabel } from '@mui/material';
+import { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var CheckboxGroupField = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    FormGroupProps: formGroupProps,
+    label,
+    FormLabelProps: formLabelProps,
+    helperText,
+    FormHelperTextProps: formHelperTextProps,
+    children
+  } = _ref,
+      formControlProps = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_jsxs(FormControl, _objectSpread(_objectSpread({}, formControlProps), {}, {
+    hiddenLabel: !label,
+    children: [!!label && /*#__PURE__*/_jsx(FormLabel, _objectSpread(_objectSpread({}, formLabelProps), {}, {
+      children: label
+    })), /*#__PURE__*/_jsx(FormGroup, _objectSpread(_objectSpread({
+      ref: ref
+    }, formGroupProps), {}, {
+      children: children
+    })), !!helperText && /*#__PURE__*/_jsx(FormHelperText, _objectSpread(_objectSpread({}, formHelperTextProps), {}, {
+      children: helperText
+    }))]
+  }));
+});
+if (process.env.NODE_ENV !== "production") CheckboxGroupField.displayName = "CheckboxGroupField";

package/dist-src/v5/checkbox/CheckboxOverrides.js

@@ -0,0 +1,71 @@
+import { checkboxClasses, SvgIcon } from '@mui/material';
+import { Color } from "../theme/Color.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export function overrideCheckbox(theme) {
+  theme.components.MuiCheckbox = {
+    defaultProps: {
+      color: 'primary',
+      icon: /*#__PURE__*/_jsx(SvgIcon, {
+        children: /*#__PURE__*/_jsx("rect", {
+          width: "17",
+          height: "17",
+          x: "3.5",
+          y: "3.5",
+          fill: Color.White,
+          stroke: "currentColor",
+          rx: "1.5"
+        })
+      }),
+      checkedIcon: /*#__PURE__*/_jsxs(SvgIcon, {
+        children: [/*#__PURE__*/_jsx("rect", {
+          width: "18",
+          height: "18",
+          x: "3",
+          y: "3",
+          fill: "currentColor",
+          rx: "2"
+        }), /*#__PURE__*/_jsx("path", {
+          fill: Color.White,
+          d: "M15.73 8l-.63.63c-1.43 1.43-2.94 3.05-4.37 4.5l-1.9-1.57-.7-.57L7 12.38l.7.57 2.53 2.09.63.52.58-.58c1.6-1.62 3.35-3.5 4.93-5.08l.63-.63L15.73 8z"
+        })]
+      }),
+      indeterminateIcon: /*#__PURE__*/_jsxs(SvgIcon, {
+        children: [/*#__PURE__*/_jsx("rect", {
+          width: "18",
+          height: "18",
+          x: "3",
+          y: "3",
+          fill: "currentIcon",
+          rx: "2"
+        }), /*#__PURE__*/_jsx("path", {
+          fill: Color.White,
+          d: "M7 11h10v2H7v-2z"
+        })]
+      })
+    },
+    styleOverrides: {
+      root: {
+        color: Color.Dark100,
+        marginTop: theme.spacing(-0.625),
+        marginBottom: theme.spacing(-0.625)
+      },
+      indeterminate: {
+        ["&:not(.".concat(checkboxClasses.checked, ")")]: {
+          color: Color.Dark100
+        },
+        ["&.".concat(checkboxClasses.disabled)]: {
+          color: Color.Silver400
+        }
+      },
+      colorPrimary: {
+        ["&.".concat(checkboxClasses.checked, ".").concat(checkboxClasses.disabled)]: {
+          color: Color.Silver500
+        },
+        ["&:hover:not(.".concat(checkboxClasses.checked, ")")]: {
+          color: Color.Dark100
+        }
+      }
+    }
+  };
+}

package/dist-src/v5/chip/ChipOverrides.js

@@ -0,0 +1,106 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import { chipClasses, SvgIcon } from '@mui/material';
+import { Color } from "../theme/Color.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function overrideChip(theme) {
+  var sm = theme.breakpoints.up('sm');
+  theme.components.MuiChip = {
+    defaultProps: {
+      size: 'small',
+      deleteIcon: /*#__PURE__*/_jsx("div", {
+        children: /*#__PURE__*/_jsx(SvgIcon, {
+          children: /*#__PURE__*/_jsx("path", {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M13.239 12L17 8.239 15.761 7 12 10.761 8.239 7 7 8.239 10.761 12 7 15.761 8.239 17 12 13.239 15.761 17 17 15.761 13.239 12z",
+            fill: "currentColor"
+          })
+        })
+      })
+    },
+    styleOverrides: {
+      root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
+        color: 'unset',
+        height: 'unset',
+        borderRadius: 4,
+        backgroundColor: Color.Silver200,
+        ["&.".concat(chipClasses.disabled)]: {
+          opacity: 1,
+          color: Color.Dark100
+        }
+      }),
+      sizeSmall: {
+        height: 'unset'
+      },
+      labelSmall: {
+        paddingLeft: 6,
+        paddingRight: 6,
+        [sm]: {
+          paddingLeft: 4,
+          paddingRight: 4
+        }
+      },
+      clickable: {
+        '&:hover, &:focus': {
+          backgroundColor: Color.Silver200
+        },
+        '&:active': {
+          boxShadow: 'unset'
+        },
+        '&:focus': {
+          boxShadow: "0 0 0 2px ".concat(Color.Silver300)
+        },
+        '&:active, &:hover': {
+          backgroundColor: Color.Silver300
+        }
+      },
+      deletable: {
+        '&:focus': {
+          backgroundColor: Color.Silver200,
+          boxShadow: "0 0 0 2px ".concat(Color.Silver300)
+        }
+      },
+      deleteIcon: {
+        width: 'unset',
+        height: 'unset',
+        display: 'flex',
+        fontSize: 14,
+        transition: theme.transitions.create('background-color'),
+        '&:active, &:hover, &:focus': {
+          '& > svg': {
+            backgroundColor: Color.Silver400
+          }
+        },
+        '& > svg': {
+          borderRadius: '50%',
+          color: Color.Dark200,
+          fontSize: '1em'
+        }
+      },
+      deleteIconSmall: {
+        width: 'unset',
+        height: 'unset',
+        padding: theme.spacing(0.5),
+        marginLeft: theme.spacing(-0.5),
+        marginRight: theme.spacing(0.25),
+        [sm]: {
+          marginRight: 0
+        }
+      },
+      icon: {
+        color: Color.Dark100,
+        fontSize: '1em',
+        marginRight: 'unset'
+      },
+      iconSmall: {
+        width: 'unset',
+        height: 'unset',
+        marginLeft: 8,
+        marginRight: 'unset',
+        [sm]: {
+          marginLeft: 4
+        }
+      }
+    }
+  };
+}

package/dist-src/v5/columns/Column.js

@@ -0,0 +1,75 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { useResponsiveProp } from "../props/ResponsiveProp.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+
+function computeFlexBasis(scale) {
+  return "".concat(scale * 100, "%");
+}
+
+function flexBasisMixin(width) {
+  switch (width) {
+    case '1/2':
+      return computeFlexBasis(1 / 2);
+
+    case '1/3':
+      return computeFlexBasis(1 / 3);
+
+    case '2/3':
+      return computeFlexBasis(2 / 3);
+
+    case '1/4':
+      return computeFlexBasis(1 / 4);
+
+    case '3/4':
+      return computeFlexBasis(3 / 4);
+
+    case '1/5':
+      return computeFlexBasis(1 / 5);
+
+    case '2/5':
+      return computeFlexBasis(2 / 5);
+
+    case '3/5':
+      return computeFlexBasis(3 / 5);
+
+    case '4/5':
+      return computeFlexBasis(4 / 5);
+  }
+
+  return 'auto';
+}
+
+function columnRootMixin(width) {
+  return css(["flex-grow:0;flex-basis:", ";width:", ";flex-shrink:", ";"], flexBasisMixin(width), width === 'fluid' ? '100%' : 'auto', width === 'fluid' || width === 'adaptive' ? 1 : 0);
+}
+
+var ColumnRoot = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Column__ColumnRoot",
+  componentId: "SD__sc-nqzztj-0"
+})(_ref => {
+  var {
+    theme,
+    columnWidth
+  } = _ref;
+  return css(["min-width:0;", ";", "{", ";}", "{", ";}& > div{padding-top:var(--column-space-top);padding-left:var(--column-space-left);padding-bottom:var(--column-space-bottom);}&:last-child > div{padding-top:0;padding-bottom:0;}"], columnRootMixin(columnWidth[0]), theme.breakpoints.up('sm'), columnRootMixin(columnWidth[1]), theme.breakpoints.up('md'), columnRootMixin(columnWidth[2]));
+});
+export var Column = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  var {
+    children,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    width = 'fluid'
+  } = _ref2;
+  var columnWidth = useResponsiveProp(width);
+  return /*#__PURE__*/_jsx(ColumnRoot, {
+    ref: ref,
+    columnWidth: columnWidth,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    children: /*#__PURE__*/_jsx("div", {
+      children: children
+    })
+  });
+});
+if (process.env.NODE_ENV !== "production") Column.displayName = "Column";

package/dist-src/v5/columns/Columns.js

@@ -0,0 +1,28 @@
+import styled, { css } from 'styled-components';
+import { parseAlignProp } from "../props/AlignProps.js";
+import { parseCollapsedBelow } from "../props/CollapseProp.js";
+import { parseResponsiveProp } from "../props/ResponsiveProp.js";
+import { parseSpaceProp } from "../props/SpaceProp.js";
+
+function columnsRootMixin(align, spaceProp, isReversed, isCollapsed) {
+  var space = parseSpaceProp(spaceProp);
+  return css(["--column-space-left:", "px;--column-space-top:", "px;--column-space-bottom:", "px;align-items:", ";margin-left:", "px;width:", ";flex-direction:", ";"], isCollapsed ? 0 : space, isCollapsed && isReversed ? space : 0, isCollapsed && !isReversed ? space : 0, parseAlignProp(align), isCollapsed ? 0 : "-".concat(space), isCollapsed ? '100%' : "calc(100% + ".concat(space, "px)"), isCollapsed ? !isReversed ? 'column' : 'column-reverse' : !isReversed ? 'row' : 'row-reverse');
+}
+
+export var Columns = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Columns",
+  componentId: "SD__sc-1uebhbi-0"
+})(_ref => {
+  var {
+    theme,
+    collapseBelow,
+    align: alignProp = 'top',
+    space: spaceProp = 'none',
+    reverse: reverseProp = false
+  } = _ref;
+  var align = parseResponsiveProp(alignProp);
+  var space = parseResponsiveProp(spaceProp);
+  var reverse = parseResponsiveProp(reverseProp);
+  var collapsed = parseCollapsedBelow(collapseBelow);
+  return css(["width:100%;display:flex;", ";", "{", ";}", "{", ";}"], columnsRootMixin(align[0], space[0], reverse[0], collapsed[0]), theme.breakpoints.up('sm'), columnsRootMixin(align[1], space[1], reverse[1], collapsed[1]), theme.breakpoints.up('md'), columnsRootMixin(align[2], space[2], reverse[2], collapsed[2]));
+});

package/dist-src/v5/description-list/DescriptionList.js

@@ -0,0 +1,114 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+var _excluded = ["size"];
+import { styled, SvgIcon, Typography } from '@mui/material';
+import { forwardRef } from 'react';
+import { OverflowText } from "../overflow-text/OverflowText.js";
+import { Color } from "../theme/Color.js";
+import { isEmptyReactNode } from "../utils/isEmptyReactNode.js";
+import { useUID } from "../utils/useUID.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var DescriptionListItemRoot = /*#__PURE__*/styled('div', {
+  name: 'SD-DescriptionListItem',
+  slot: 'Root'
+})({
+  display: 'flex',
+  alignItems: 'center'
+});
+var DescriptionListItemIcon = /*#__PURE__*/styled('div')(_ref => {
+  var {
+    theme
+  } = _ref;
+  return {
+    display: 'inline-flex',
+    marginRight: theme.spacing(1),
+    '& > .MuiSvgIcon-root': {
+      color: Color.Dark100,
+      fontSize: theme.spacing(3),
+      [theme.breakpoints.up('sm')]: {
+        fontSize: theme.spacing(2)
+      }
+    }
+  };
+}); //
+// DescriptionListItem
+//
+
+export var DescriptionListItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  var _ref3, _contentTypographyPro, _contentTypographyPro2;
+
+  var {
+    inset,
+    icon = inset ? /*#__PURE__*/_jsx(SvgIcon, {}) : null,
+    label,
+    labelTypographyProps,
+    content,
+    contentTypographyProps,
+    fallback
+  } = _ref2;
+  var labelID = useUID(labelTypographyProps === null || labelTypographyProps === void 0 ? void 0 : labelTypographyProps.id);
+  var shouldRenderFallback = isEmptyReactNode(content);
+  return /*#__PURE__*/_jsxs(DescriptionListItemRoot, {
+    ref: ref,
+    "aria-labelledby": label != null ? labelID : undefined,
+    children: [!!icon && /*#__PURE__*/_jsx(DescriptionListItemIcon, {
+      children: icon
+    }), /*#__PURE__*/_jsxs(OverflowText, _objectSpread(_objectSpread({}, contentTypographyProps), {}, {
+      component: "span",
+      color: shouldRenderFallback && label == null ? 'textSecondary' : 'textPrimary',
+      TooltipProps: _objectSpread(_objectSpread({}, contentTypographyProps === null || contentTypographyProps === void 0 ? void 0 : contentTypographyProps.TooltipProps), {}, {
+        title: (_ref3 = (_contentTypographyPro = contentTypographyProps === null || contentTypographyProps === void 0 ? void 0 : (_contentTypographyPro2 = contentTypographyProps.TooltipProps) === null || _contentTypographyPro2 === void 0 ? void 0 : _contentTypographyPro2.title) !== null && _contentTypographyPro !== void 0 ? _contentTypographyPro : content) !== null && _ref3 !== void 0 ? _ref3 : undefined
+      }),
+      children: [label != null && /*#__PURE__*/_jsx(Typography, _objectSpread(_objectSpread({}, labelTypographyProps), {}, {
+        id: labelID,
+        variant: "body2",
+        component: "span",
+        color: "textSecondary",
+        children: label
+      })), label != null && ' ', !shouldRenderFallback ? content : fallback]
+    }))]
+  });
+}); //
+// DescriptionList
+//
+
+if (process.env.NODE_ENV !== "production") DescriptionListItem.displayName = "DescriptionListItem";
+var DescriptionListRoot = /*#__PURE__*/styled('div', {
+  name: 'SD-DescriptionList',
+  slot: 'Root'
+})(_ref4 => {
+  var {
+    theme
+  } = _ref4;
+  return _objectSpread(_objectSpread({}, sizeVariant(theme, 2, 1)), {}, {
+    '&[data-size="small"]': sizeVariant(theme, 1, 0.5),
+    '&[data-size="large"]': sizeVariant(theme, 3, 2)
+  });
+});
+
+function sizeVariant(theme, mobileSpacing, desktopSpacing) {
+  return {
+    ["& > ".concat(DescriptionListRoot, ", & > ").concat(DescriptionListItemRoot)]: {
+      '&:not(:last-child)': {
+        paddingBottom: theme.spacing(mobileSpacing),
+        [theme.breakpoints.up('sm')]: {
+          paddingBottom: theme.spacing(desktopSpacing)
+        }
+      }
+    }
+  };
+}
+
+export var DescriptionList = /*#__PURE__*/forwardRef((_ref5, ref) => {
+  var {
+    size
+  } = _ref5,
+      props = _objectWithoutProperties(_ref5, _excluded);
+
+  return /*#__PURE__*/_jsx(DescriptionListRoot, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    "data-size": size
+  }));
+});
+if (process.env.NODE_ENV !== "production") DescriptionList.displayName = "DescriptionList";

package/dist-src/v5/dialog/DialogOverrides.js

@@ -0,0 +1,43 @@
+import { dialogClasses } from '@mui/material';
+export function overrideDialog(theme) {
+  theme.components.MuiDialog = {
+    styleOverrides: {
+      paper: {
+        margin: theme.spacing(3)
+      },
+      paperWidthXs: {
+        maxWidth: Math.max(theme.breakpoints.values.xs, 360),
+        ["&.".concat(dialogClasses.paperScrollBody)]: {
+          [theme.breakpoints.down(Math.max(theme.breakpoints.values.xs, 360) + 32 * 2)]: {
+            maxWidth: 'calc(100% - 64px)'
+          }
+        }
+      }
+    }
+  };
+  theme.components.MuiDialogTitle = {
+    defaultProps: {
+      // @ts-expect-error DialogTitleProps has missing type def
+      variant: 'h3'
+    }
+  };
+  theme.components.MuiDialogContent = {
+    styleOverrides: {
+      root: {
+        padding: theme.spacing(0, 3)
+      }
+    }
+  };
+  theme.components.MuiDialogActions = {
+    styleOverrides: {
+      root: {
+        padding: theme.spacing(3)
+      },
+      spacing: {
+        '& > :not(:first-child)': {
+          marginLeft: theme.spacing(2)
+        }
+      }
+    }
+  };
+}