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

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

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

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

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

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

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

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

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

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

@@ -1,43 +0,0 @@
-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)
-        }
-      }
-    }
-  };
-}