@mui/material 5.15.15 → 6.0.0-alpha.1

package/legacy/Chip/Chip.js

@@ -1,7 +1,9 @@
 'use client';
 
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -13,11 +15,10 @@ import useForkRef from '../utils/useForkRef';
 import unsupportedProp from '../utils/unsupportedProp';
 import capitalize from '../utils/capitalize';
 import ButtonBase from '../ButtonBase';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import chipClasses, { getChipUtilityClass } from './chipClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiChip');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     disabled = ownerState.disabled,
@@ -50,10 +51,9 @@ var ChipRoot = styled('div', {
     return [_defineProperty({}, "& .".concat(chipClasses.avatar), styles.avatar), _defineProperty({}, "& .".concat(chipClasses.avatar), styles["avatar".concat(capitalize(size))]), _defineProperty({}, "& .".concat(chipClasses.avatar), styles["avatarColor".concat(capitalize(color))]), _defineProperty({}, "& .".concat(chipClasses.icon), styles.icon), _defineProperty({}, "& .".concat(chipClasses.icon), styles["icon".concat(capitalize(size))]), _defineProperty({}, "& .".concat(chipClasses.icon), styles["iconColor".concat(capitalize(iconColor))]), _defineProperty({}, "& .".concat(chipClasses.deleteIcon), styles.deleteIcon), _defineProperty({}, "& .".concat(chipClasses.deleteIcon), styles["deleteIcon".concat(capitalize(size))]), _defineProperty({}, "& .".concat(chipClasses.deleteIcon), styles["deleteIconColor".concat(capitalize(color))]), _defineProperty({}, "& .".concat(chipClasses.deleteIcon), styles["deleteIcon".concat(capitalize(variant), "Color").concat(capitalize(color))]), styles.root, styles["size".concat(capitalize(size))], styles["color".concat(capitalize(color))], clickable && styles.clickable, clickable && color !== 'default' && styles["clickableColor".concat(capitalize(color), ")")], onDelete && styles.deletable, onDelete && color !== 'default' && styles["deletableColor".concat(capitalize(color))], styles[variant], styles["".concat(variant).concat(capitalize(color))]];
   }
 })(function (_ref11) {
-  var theme = _ref11.theme,
-    ownerState = _ref11.ownerState;
+  var theme = _ref11.theme;
   var textColor = theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300];
-  return _extends(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+  return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
     maxWidth: '100%',
     fontFamily: theme.typography.fontFamily,
     fontSize: theme.typography.pxToRem(13),
@@ -99,18 +99,10 @@ var ChipRoot = styled('div', {
     width: 18,
     height: 18,
     fontSize: theme.typography.pxToRem(10)
-  }), "& .".concat(chipClasses.icon), _extends({
+  }), "& .".concat(chipClasses.icon), {
     marginLeft: 5,
     marginRight: -6
-  }, ownerState.size === 'small' && {
-    fontSize: 18,
-    marginLeft: 4,
-    marginRight: -4
-  }, ownerState.iconColor === ownerState.color && _extends({
-    color: theme.vars ? theme.vars.palette.Chip.defaultIconColor : textColor
-  }, ownerState.color !== 'default' && {
-    color: 'inherit'
-  }))), "& .".concat(chipClasses.deleteIcon), _extends({
+  }), "& .".concat(chipClasses.deleteIcon), {
     WebkitTapHighlightColor: 'transparent',
     color: theme.vars ? "rgba(".concat(theme.vars.palette.text.primaryChannel, " / 0.26)") : alpha(theme.palette.text.primary, 0.26),
     fontSize: 22,
@@ -119,77 +111,163 @@ var ChipRoot = styled('div', {
     '&:hover': {
       color: theme.vars ? "rgba(".concat(theme.vars.palette.text.primaryChannel, " / 0.4)") : alpha(theme.palette.text.primary, 0.4)
     }
-  }, ownerState.size === 'small' && {
-    fontSize: 16,
-    marginRight: 4,
-    marginLeft: -4
-  }, ownerState.color !== 'default' && {
-    color: theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].contrastTextChannel, " / 0.7)") : alpha(theme.palette[ownerState.color].contrastText, 0.7),
-    '&:hover, &:active': {
-      color: (theme.vars || theme).palette[ownerState.color].contrastText
-    }
-  })), ownerState.size === 'small' && {
-    height: 24
-  }, ownerState.color !== 'default' && {
-    backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
-    color: (theme.vars || theme).palette[ownerState.color].contrastText
-  }, ownerState.onDelete && _defineProperty({}, "&.".concat(chipClasses.focusVisible), {
-    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.action.selectedChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.focusOpacity, "))") : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
-  }), ownerState.onDelete && ownerState.color !== 'default' && _defineProperty({}, "&.".concat(chipClasses.focusVisible), {
-    backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
-  }));
-}, function (_ref14) {
-  var theme = _ref14.theme,
-    ownerState = _ref14.ownerState;
-  return _extends({}, ownerState.clickable && _defineProperty(_defineProperty({
-    userSelect: 'none',
-    WebkitTapHighlightColor: 'transparent',
-    cursor: 'pointer',
-    '&:hover': {
-      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.action.selectedChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.hoverOpacity, "))") : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
-    }
-  }, "&.".concat(chipClasses.focusVisible), {
-    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.action.selectedChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.focusOpacity, "))") : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
-  }), '&:active', {
-    boxShadow: (theme.vars || theme).shadows[1]
-  }), ownerState.clickable && ownerState.color !== 'default' && _defineProperty({}, "&:hover, &.".concat(chipClasses.focusVisible), {
-    backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
-  }));
-}, function (_ref17) {
-  var theme = _ref17.theme,
-    ownerState = _ref17.ownerState;
-  return _extends({}, ownerState.variant === 'outlined' && _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-    backgroundColor: 'transparent',
-    border: theme.vars ? "1px solid ".concat(theme.vars.palette.Chip.defaultBorder) : "1px solid ".concat(theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700])
-  }, "&.".concat(chipClasses.clickable, ":hover"), {
-    backgroundColor: (theme.vars || theme).palette.action.hover
-  }), "&.".concat(chipClasses.focusVisible), {
-    backgroundColor: (theme.vars || theme).palette.action.focus
-  }), "& .".concat(chipClasses.avatar), {
-    marginLeft: 4
-  }), "& .".concat(chipClasses.avatarSmall), {
-    marginLeft: 2
-  }), "& .".concat(chipClasses.icon), {
-    marginLeft: 4
-  }), "& .".concat(chipClasses.iconSmall), {
-    marginLeft: 2
-  }), "& .".concat(chipClasses.deleteIcon), {
-    marginRight: 5
-  }), "& .".concat(chipClasses.deleteIconSmall), {
-    marginRight: 3
-  }), ownerState.variant === 'outlined' && ownerState.color !== 'default' && _defineProperty(_defineProperty(_defineProperty({
-    color: (theme.vars || theme).palette[ownerState.color].main,
-    border: "1px solid ".concat(theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / 0.7)") : alpha(theme.palette[ownerState.color].main, 0.7))
-  }, "&.".concat(chipClasses.clickable, ":hover"), {
-    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity)
-  }), "&.".concat(chipClasses.focusVisible), {
-    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / ").concat(theme.vars.palette.action.focusOpacity, ")") : alpha(theme.palette[ownerState.color].main, theme.palette.action.focusOpacity)
-  }), "& .".concat(chipClasses.deleteIcon), {
-    color: theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / 0.7)") : alpha(theme.palette[ownerState.color].main, 0.7),
-    '&:hover, &:active': {
-      color: (theme.vars || theme).palette[ownerState.color].main
-    }
-  }));
+  }), "variants", [{
+    props: {
+      size: 'small'
+    },
+    style: _defineProperty(_defineProperty({
+      height: 24
+    }, "& .".concat(chipClasses.icon), {
+      fontSize: 18,
+      marginLeft: 4,
+      marginRight: -4
+    }), "& .".concat(chipClasses.deleteIcon), {
+      fontSize: 16,
+      marginRight: 4,
+      marginLeft: -4
+    })
+  }].concat(_toConsumableArray(Object.entries(theme.palette).filter(function (_ref12) {
+    var _ref13 = _slicedToArray(_ref12, 2),
+      value = _ref13[1];
+    return value.main && value.contrastText;
+  }).map(function (_ref14) {
+    var _ref15 = _slicedToArray(_ref14, 1),
+      color = _ref15[0];
+    return {
+      props: {
+        color: color
+      },
+      style: _defineProperty({
+        backgroundColor: (theme.vars || theme).palette[color].main,
+        color: (theme.vars || theme).palette[color].contrastText
+      }, "& .".concat(chipClasses.deleteIcon), {
+        color: theme.vars ? "rgba(".concat(theme.vars.palette[color].contrastTextChannel, " / 0.7)") : alpha(theme.palette[color].contrastText, 0.7),
+        '&:hover, &:active': {
+          color: (theme.vars || theme).palette[color].contrastText
+        }
+      })
+    };
+  })), [{
+    props: function props(_props) {
+      return _props.iconColor === _props.color;
+    },
+    style: _defineProperty({}, "& .".concat(chipClasses.icon), {
+      color: theme.vars ? theme.vars.palette.Chip.defaultIconColor : textColor
+    })
+  }, {
+    props: function props(_props2) {
+      return _props2.iconColor === _props2.color && _props2.color !== 'default';
+    },
+    style: _defineProperty({}, "& .".concat(chipClasses.icon), {
+      color: 'inherit'
+    })
+  }, {
+    props: {
+      onDelete: true
+    },
+    style: _defineProperty({}, "&.".concat(chipClasses.focusVisible), {
+      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.action.selectedChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.focusOpacity, "))") : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+    })
+  }], _toConsumableArray(Object.entries(theme.palette).filter(function (_ref16) {
+    var _ref17 = _slicedToArray(_ref16, 2),
+      value = _ref17[1];
+    return value.dark;
+  }).map(function (_ref18) {
+    var _ref19 = _slicedToArray(_ref18, 1),
+      color = _ref19[0];
+    return {
+      props: {
+        color: color,
+        onDelete: true
+      },
+      style: _defineProperty({}, "&.".concat(chipClasses.focusVisible), {
+        background: (theme.vars || theme).palette[color].dark
+      })
+    };
+  })), [{
+    props: {
+      clickable: true
+    },
+    style: _defineProperty(_defineProperty({
+      userSelect: 'none',
+      WebkitTapHighlightColor: 'transparent',
+      cursor: 'pointer',
+      '&:hover': {
+        backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.action.selectedChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.hoverOpacity, "))") : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
+      }
+    }, "&.".concat(chipClasses.focusVisible), {
+      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.action.selectedChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.focusOpacity, "))") : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+    }), '&:active', {
+      boxShadow: (theme.vars || theme).shadows[1]
+    })
+  }], _toConsumableArray(Object.entries(theme.palette).filter(function (_ref20) {
+    var _ref21 = _slicedToArray(_ref20, 2),
+      value = _ref21[1];
+    return value.dark;
+  }).map(function (_ref22) {
+    var _ref23 = _slicedToArray(_ref22, 1),
+      color = _ref23[0];
+    return {
+      props: {
+        color: color,
+        clickable: true
+      },
+      style: _defineProperty({}, "&:hover, &.".concat(chipClasses.focusVisible), {
+        backgroundColor: (theme.vars || theme).palette[color].dark
+      })
+    };
+  })), [{
+    props: {
+      variant: 'outlined'
+    },
+    style: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+      backgroundColor: 'transparent',
+      border: theme.vars ? "1px solid ".concat(theme.vars.palette.Chip.defaultBorder) : "1px solid ".concat(theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700])
+    }, "&.".concat(chipClasses.clickable, ":hover"), {
+      backgroundColor: (theme.vars || theme).palette.action.hover
+    }), "&.".concat(chipClasses.focusVisible), {
+      backgroundColor: (theme.vars || theme).palette.action.focus
+    }), "& .".concat(chipClasses.avatar), {
+      marginLeft: 4
+    }), "& .".concat(chipClasses.avatarSmall), {
+      marginLeft: 2
+    }), "& .".concat(chipClasses.icon), {
+      marginLeft: 4
+    }), "& .".concat(chipClasses.iconSmall), {
+      marginLeft: 2
+    }), "& .".concat(chipClasses.deleteIcon), {
+      marginRight: 5
+    }), "& .".concat(chipClasses.deleteIconSmall), {
+      marginRight: 3
+    })
+  }], _toConsumableArray(Object.entries(theme.palette).filter(function (_ref24) {
+    var _ref25 = _slicedToArray(_ref24, 2),
+      value = _ref25[1];
+    return value.main;
+  }) // no need to check for mainChannel as it's calculated from main
+  .map(function (_ref26) {
+    var _ref27 = _slicedToArray(_ref26, 1),
+      color = _ref27[0];
+    return {
+      props: {
+        variant: 'outlined',
+        color: color
+      },
+      style: _defineProperty(_defineProperty(_defineProperty({
+        color: (theme.vars || theme).palette[color].main,
+        border: "1px solid ".concat(theme.vars ? "rgba(".concat(theme.vars.palette[color].mainChannel, " / 0.7)") : alpha(theme.palette[color].main, 0.7))
+      }, "&.".concat(chipClasses.clickable, ":hover"), {
+        backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[color].mainChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity)
+      }), "&.".concat(chipClasses.focusVisible), {
+        backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[color].mainChannel, " / ").concat(theme.vars.palette.action.focusOpacity, ")") : alpha(theme.palette[color].main, theme.palette.action.focusOpacity)
+      }), "& .".concat(chipClasses.deleteIcon), {
+        color: theme.vars ? "rgba(".concat(theme.vars.palette[color].mainChannel, " / 0.7)") : alpha(theme.palette[color].main, 0.7),
+        '&:hover, &:active': {
+          color: (theme.vars || theme).palette[color].main
+        }
+      })
+    };
+  }))));
 });
 var ChipLabel = styled('span', {
   name: 'MuiChip',
@@ -199,24 +277,38 @@ var ChipLabel = styled('span', {
     var size = ownerState.size;
     return [styles.label, styles["label".concat(capitalize(size))]];
   }
-})(function (_ref20) {
-  var ownerState = _ref20.ownerState;
-  return _extends({
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    paddingLeft: 12,
-    paddingRight: 12,
-    whiteSpace: 'nowrap'
-  }, ownerState.variant === 'outlined' && {
-    paddingLeft: 11,
-    paddingRight: 11
-  }, ownerState.size === 'small' && {
-    paddingLeft: 8,
-    paddingRight: 8
-  }, ownerState.size === 'small' && ownerState.variant === 'outlined' && {
-    paddingLeft: 7,
-    paddingRight: 7
-  });
+})({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  paddingLeft: 12,
+  paddingRight: 12,
+  whiteSpace: 'nowrap',
+  variants: [{
+    props: {
+      variant: 'outlined'
+    },
+    style: {
+      paddingLeft: 11,
+      paddingRight: 11
+    }
+  }, {
+    props: {
+      size: 'small'
+    },
+    style: {
+      paddingLeft: 8,
+      paddingRight: 8
+    }
+  }, {
+    props: {
+      size: 'small',
+      variant: 'outlined'
+    },
+    style: {
+      paddingLeft: 7,
+      paddingRight: 7
+    }
+  }]
 });
 function isDeleteKeyboardEvent(keyboardEvent) {
   return keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete';

package/legacy/CssBaseline/CssBaseline.js

@@ -6,8 +6,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import useThemeProps from '../styles/useThemeProps';
 import GlobalStyles from '../GlobalStyles';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export var html = function html(theme, enableColorScheme) {
   return _extends({
     WebkitFontSmoothing: 'antialiased',

package/legacy/Divider/Divider.js

@@ -1,16 +1,16 @@
 'use client';
 
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getDividerUtilityClass } from './dividerClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiDivider');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var absolute = ownerState.absolute,
     children = ownerState.children,
@@ -34,87 +34,140 @@ var DividerRoot = styled('div', {
     return [styles.root, ownerState.absolute && styles.absolute, styles[ownerState.variant], ownerState.light && styles.light, ownerState.orientation === 'vertical' && styles.vertical, ownerState.flexItem && styles.flexItem, ownerState.children && styles.withChildren, ownerState.children && ownerState.orientation === 'vertical' && styles.withChildrenVertical, ownerState.textAlign === 'right' && ownerState.orientation !== 'vertical' && styles.textAlignRight, ownerState.textAlign === 'left' && ownerState.orientation !== 'vertical' && styles.textAlignLeft];
   }
 })(function (_ref) {
-  var theme = _ref.theme,
-    ownerState = _ref.ownerState;
-  return _extends({
+  var theme = _ref.theme;
+  return {
     margin: 0,
     // Reset browser default style.
     flexShrink: 0,
     borderWidth: 0,
     borderStyle: 'solid',
     borderColor: (theme.vars || theme).palette.divider,
-    borderBottomWidth: 'thin'
-  }, ownerState.absolute && {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    width: '100%'
-  }, ownerState.light && {
-    borderColor: theme.vars ? "rgba(".concat(theme.vars.palette.dividerChannel, " / 0.08)") : alpha(theme.palette.divider, 0.08)
-  }, ownerState.variant === 'inset' && {
-    marginLeft: 72
-  }, ownerState.variant === 'middle' && ownerState.orientation === 'horizontal' && {
-    marginLeft: theme.spacing(2),
-    marginRight: theme.spacing(2)
-  }, ownerState.variant === 'middle' && ownerState.orientation === 'vertical' && {
-    marginTop: theme.spacing(1),
-    marginBottom: theme.spacing(1)
-  }, ownerState.orientation === 'vertical' && {
-    height: '100%',
-    borderBottomWidth: 0,
-    borderRightWidth: 'thin'
-  }, ownerState.flexItem && {
-    alignSelf: 'stretch',
-    height: 'auto'
-  });
-}, function (_ref2) {
-  var ownerState = _ref2.ownerState;
-  return _extends({}, ownerState.children && {
-    display: 'flex',
-    whiteSpace: 'nowrap',
-    textAlign: 'center',
-    border: 0,
-    '&::before, &::after': {
-      content: '""',
-      alignSelf: 'center'
-    }
-  });
-}, function (_ref3) {
-  var theme = _ref3.theme,
-    ownerState = _ref3.ownerState;
-  return _extends({}, ownerState.children && ownerState.orientation !== 'vertical' && {
-    '&::before, &::after': {
-      width: '100%',
-      borderTop: "thin solid ".concat((theme.vars || theme).palette.divider)
-    }
-  });
-}, function (_ref4) {
-  var theme = _ref4.theme,
-    ownerState = _ref4.ownerState;
-  return _extends({}, ownerState.children && ownerState.orientation === 'vertical' && {
-    flexDirection: 'column',
-    '&::before, &::after': {
-      height: '100%',
-      borderLeft: "thin solid ".concat((theme.vars || theme).palette.divider)
-    }
-  });
-}, function (_ref5) {
-  var ownerState = _ref5.ownerState;
-  return _extends({}, ownerState.textAlign === 'right' && ownerState.orientation !== 'vertical' && {
-    '&::before': {
-      width: '90%'
-    },
-    '&::after': {
-      width: '10%'
-    }
-  }, ownerState.textAlign === 'left' && ownerState.orientation !== 'vertical' && {
-    '&::before': {
-      width: '10%'
-    },
-    '&::after': {
-      width: '90%'
-    }
-  });
+    borderBottomWidth: 'thin',
+    variants: [{
+      props: {
+        absolute: true
+      },
+      style: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        width: '100%'
+      }
+    }, {
+      props: {
+        light: true
+      },
+      style: {
+        borderColor: theme.vars ? "rgba(".concat(theme.vars.palette.dividerChannel, " / 0.08)") : alpha(theme.palette.divider, 0.08)
+      }
+    }, {
+      props: {
+        variant: 'inset'
+      },
+      style: {
+        marginLeft: 72
+      }
+    }, {
+      props: {
+        variant: 'middle',
+        orientation: 'horizontal'
+      },
+      style: {
+        marginLeft: theme.spacing(2),
+        marginRight: theme.spacing(2)
+      }
+    }, {
+      props: {
+        variant: 'middle',
+        orientation: 'vertical'
+      },
+      style: {
+        marginTop: theme.spacing(1),
+        marginBottom: theme.spacing(1)
+      }
+    }, {
+      props: {
+        orientation: 'vertical'
+      },
+      style: {
+        height: '100%',
+        borderBottomWidth: 0,
+        borderRightWidth: 'thin'
+      }
+    }, {
+      props: {
+        flexItem: true
+      },
+      style: {
+        alignSelf: 'stretch',
+        height: 'auto'
+      }
+    }, {
+      props: function props(_ref2) {
+        var ownerState = _ref2.ownerState;
+        return !!ownerState.children;
+      },
+      style: {
+        display: 'flex',
+        whiteSpace: 'nowrap',
+        textAlign: 'center',
+        border: 0,
+        '&::before, &::after': {
+          content: '""',
+          alignSelf: 'center'
+        }
+      }
+    }, {
+      props: function props(_ref3) {
+        var ownerState = _ref3.ownerState;
+        return ownerState.children && ownerState.orientation !== 'vertical';
+      },
+      style: {
+        '&::before, &::after': {
+          width: '100%',
+          borderTop: "thin solid ".concat((theme.vars || theme).palette.divider)
+        }
+      }
+    }, {
+      props: function props(_ref4) {
+        var ownerState = _ref4.ownerState;
+        return ownerState.orientation === 'vertical' && ownerState.children;
+      },
+      style: {
+        flexDirection: 'column',
+        '&::before, &::after': {
+          height: '100%',
+          borderLeft: "thin solid ".concat((theme.vars || theme).palette.divider)
+        }
+      }
+    }, {
+      props: function props(_ref5) {
+        var ownerState = _ref5.ownerState;
+        return ownerState.textAlign === 'right' && ownerState.orientation !== 'vertical';
+      },
+      style: {
+        '&::before': {
+          width: '90%'
+        },
+        '&::after': {
+          width: '10%'
+        }
+      }
+    }, {
+      props: function props(_ref6) {
+        var ownerState = _ref6.ownerState;
+        return ownerState.textAlign === 'left' && ownerState.orientation !== 'vertical';
+      },
+      style: {
+        '&::before': {
+          width: '10%'
+        },
+        '&::after': {
+          width: '90%'
+        }
+      }
+    }]
+  };
 });
 var DividerWrapper = styled('span', {
   name: 'MuiDivider',
@@ -123,17 +176,22 @@ var DividerWrapper = styled('span', {
     var ownerState = props.ownerState;
     return [styles.wrapper, ownerState.orientation === 'vertical' && styles.wrapperVertical];
   }
-})(function (_ref6) {
-  var theme = _ref6.theme,
-    ownerState = _ref6.ownerState;
-  return _extends({
+})(function (_ref7) {
+  var theme = _ref7.theme;
+  return {
     display: 'inline-block',
     paddingLeft: "calc(".concat(theme.spacing(1), " * 1.2)"),
-    paddingRight: "calc(".concat(theme.spacing(1), " * 1.2)")
-  }, ownerState.orientation === 'vertical' && {
-    paddingTop: "calc(".concat(theme.spacing(1), " * 1.2)"),
-    paddingBottom: "calc(".concat(theme.spacing(1), " * 1.2)")
-  });
+    paddingRight: "calc(".concat(theme.spacing(1), " * 1.2)"),
+    variants: [{
+      props: {
+        orientation: 'vertical'
+      },
+      style: {
+        paddingTop: "calc(".concat(theme.spacing(1), " * 1.2)"),
+        paddingBottom: "calc(".concat(theme.spacing(1), " * 1.2)")
+      }
+    }]
+  };
 });
 var Divider = /*#__PURE__*/React.forwardRef(function Divider(inProps, ref) {
   var props = useThemeProps({
@@ -189,7 +247,9 @@ var Divider = /*#__PURE__*/React.forwardRef(function Divider(inProps, ref) {
  * The following flag is used to ensure that this component isn't tabbable i.e.
  * does not get highlight/focus inside of MUI List.
  */
-Divider.muiSkipListHighlight = true;
+if (Divider) {
+  Divider.muiSkipListHighlight = true;
+}
 process.env.NODE_ENV !== "production" ? Divider.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │