@mui/docs 9.0.0-alpha.3 → 9.0.0-beta.0

package/ApiPage/list/ExpandableApiItem.js

@@ -0,0 +1,241 @@
+var _svg, _Divider;
+import * as React from 'react';
+import clsx from 'clsx';
+import { alpha, styled } from '@mui/material/styles';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import Divider from '@mui/material/Divider';
+import IconButton from '@mui/material/IconButton';
+import { brandingDarkTheme as darkTheme, brandingLightTheme as lightTheme } from "../../branding/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Root = styled('div')(({
+  theme
+}) => ({
+  position: 'relative',
+  marginBottom: 12,
+  '& .MuiApi-item-header': {
+    display: 'flex',
+    alignItems: 'center',
+    marginBottom: 8,
+    marginLeft: -38,
+    lineHeight: 1.5
+  },
+  '& .MuiApi-item-header-link': {
+    minHeight: 26,
+    display: 'flex',
+    alignItems: 'center',
+    scrollMarginTop: 'calc(var(--MuiDocs-header-height) + 32px)'
+  },
+  '& .MuiApi-item-link-visual': {
+    display: 'none',
+    flexShrink: 0,
+    border: '1px solid',
+    borderColor: `var(--muidocs-palette-divider, ${lightTheme.palette.divider})`,
+    borderRadius: 8,
+    backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`,
+    height: 26,
+    width: 26,
+    textAlign: 'center',
+    lineHeight: '26px',
+    '& svg': {
+      fill: `var(--muidocs-palette-text-secondary, ${lightTheme.palette.text.secondary})`,
+      height: '14px',
+      width: '14px'
+    }
+  },
+  '& .MuiApi-item-title': {
+    marginLeft: 32,
+    padding: '2px 6px',
+    flexShrink: 0,
+    fontWeight: theme.typography.fontWeightSemiBold,
+    fontFamily: theme.typography.fontFamilyCode,
+    fontSize: theme.typography.pxToRem(13),
+    color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`
+  },
+  '& .MuiApi-item-content': {
+    verticalAlign: 'top',
+    paddingBottom: theme.spacing(2),
+    p: {
+      marginBottom: theme.spacing(1.5)
+    }
+  },
+  '& .MuiApi-item-note': {
+    marginLeft: 2,
+    color: `var(--muidocs-palette-success-800, ${lightTheme.palette.success[800]})`,
+    fontSize: theme.typography.pxToRem(11),
+    fontWeight: theme.typography.fontWeightSemiBold,
+    letterSpacing: '.1rem',
+    textTransform: 'uppercase'
+  },
+  '& .MuiApi-expand-button': {},
+  '& hr': {
+    margin: 0
+  },
+  [theme.breakpoints.up('lg')]: {
+    '&:hover, &:target': {
+      '.MuiApi-item-link-visual': {
+        display: 'inline-block'
+      },
+      '.MuiApi-item-title': {
+        marginLeft: 6
+      },
+      '.MuiApi-item-link-visual:hover': {
+        cursor: 'pointer',
+        backgroundColor: alpha(lightTheme.palette.primary[100], 0.4),
+        borderColor: `var(--muidocs-palette-primary-100, ${lightTheme.palette.primary[100]})`,
+        '& svg': {
+          fill: `var(--muidocs-palette-primary-main, ${lightTheme.palette.primary.main})`
+        }
+      }
+    },
+    '&:target': {
+      '.MuiApi-item-link-visual': {
+        '&>svg': {
+          transform: 'rotate(90deg) translateX(-0.5px) translateY(0.1px)'
+        }
+      }
+    }
+  },
+  '& code.Api-code': {
+    ...theme.typography.caption,
+    fontFamily: theme.typography.fontFamilyCode,
+    fontWeight: theme.typography.fontWeightRegular,
+    color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`,
+    padding: '1px 4px',
+    borderRadius: 6,
+    border: '1px solid',
+    borderColor: alpha(darkTheme.palette.primary[100], 0.8),
+    backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`
+  },
+  '& .signature-type': {
+    textDecoration: 'underline',
+    textDecorationStyle: 'dotted',
+    textDecorationColor: alpha(lightTheme.palette.primary.main, 0.4),
+    fontWeight: theme.typography.fontWeightMedium,
+    color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`,
+    '&:hover': {
+      textDecorationColor: 'inherit'
+    },
+    cursor: 'help'
+  }
+}), ({
+  theme
+}) => ({
+  [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: {
+    '& .MuiApi-item-header': {
+      '&>span, &>div': {
+        borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`
+      },
+      '& .MuiApi-item-title': {
+        color: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`
+      },
+      '& .MuiApi-item-link-visual': {
+        borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`,
+        backgroundColor: alpha(darkTheme.palette.primary[900], 0.5),
+        '& svg': {
+          fill: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`
+        }
+      },
+      '&:hover, &:target': {
+        '.MuiApi-item-link-visual:hover': {
+          borderColor: `var(--muidocs-palette-primary-900, ${darkTheme.palette.primary[900]})`,
+          backgroundColor: alpha(darkTheme.palette.primary[900], 0.6),
+          '& svg': {
+            fill: `var(--muidocs-palette-primary-100, ${darkTheme.palette.primary[100]})`
+          }
+        }
+      },
+      '& .MuiApi-item-description': {
+        color: `var(--muidocs-palette-grey-500, ${darkTheme.palette.grey[500]})`
+      },
+      '& .MuiApi-item-note': {
+        color: `var(--muidocs-palette-success-400, ${darkTheme.palette.success[400]})`
+      }
+    },
+    '& code.Api-code': {
+      color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`,
+      borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`,
+      backgroundColor: alpha(darkTheme.palette.primary[900], 0.3)
+    },
+    '& .signature-type': {
+      color: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`,
+      textDecorationColor: alpha(darkTheme.palette.primary.main, 0.6)
+    }
+  }
+}));
+export function ExpandableApiItem(props) {
+  const {
+    children,
+    className,
+    description,
+    displayOption,
+    id,
+    isExtendable = true,
+    note,
+    title,
+    type,
+    ...other
+  } = props;
+  const [isExtended, setIsExtended] = React.useState(() => displayOption === 'expanded');
+  React.useEffect(() => {
+    setIsExtended(displayOption === 'expanded');
+  }, [displayOption]);
+  return /*#__PURE__*/_jsxs(Root, {
+    ownerState: {
+      type
+    },
+    ...other,
+    className: clsx(`MuiApi-item-root${isExtendable ? ' MuiApi-item-header-extendable' : ''}`, className),
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "MuiApi-item-header",
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "MuiApi-item-header-link",
+        id: id,
+        children: [/*#__PURE__*/_jsx("a", {
+          className: "MuiApi-item-link-visual",
+          href: `#${id}`,
+          "aria-labelledby": id,
+          children: _svg || (_svg = /*#__PURE__*/_jsx("svg", {
+            children: /*#__PURE__*/_jsx("use", {
+              xlinkHref: "#anchor-link-icon"
+            })
+          }))
+        }), /*#__PURE__*/_jsx("span", {
+          className: "MuiApi-item-title algolia-lvl3" // This className is used by Algolia
+          ,
+          children: title
+        })]
+      }), note && /*#__PURE__*/_jsx("span", {
+        className: "MuiApi-item-note",
+        children: note
+      }), isExtendable && /*#__PURE__*/_jsx(IconButton, {
+        onClick: () => setIsExtended(prev => !prev),
+        className: "MuiApi-expand-button",
+        "aria-label": isExtended ? 'Collapse' : 'Expand',
+        size: "small",
+        sx: {
+          p: 0,
+          ml: 'auto',
+          borderRadius: '6px'
+        },
+        children: isExtended ? /*#__PURE__*/_jsx(KeyboardArrowUpIcon, {
+          sx: {
+            color: 'grey.500'
+          }
+        }) : /*#__PURE__*/_jsx(KeyboardArrowDownIcon, {
+          sx: {
+            color: 'grey.500'
+          }
+        })
+      })]
+    }), isExtended && /*#__PURE__*/_jsx("div", {
+      className: `MuiApi-item-content`,
+      children: isExtended && children
+    }), _Divider || (_Divider = /*#__PURE__*/_jsx(Divider, {}))]
+  });
+}
+export const ApiItemContainer = styled('div')({
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column'
+});

package/ApiPage/list/PropertiesList.d.ts

@@ -0,0 +1,7 @@
+import { PropertyDefinition } from "../definitions/index.js";
+interface PropertiesListProps {
+  properties: PropertyDefinition[];
+  displayOption: 'collapsed' | 'expanded';
+}
+export default function PropertiesList(props: PropertiesListProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/ApiPage/list/PropertiesList.js

@@ -0,0 +1,263 @@
+var _a, _a2;
+/* eslint-disable react/no-danger */
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import Tooltip from '@mui/material/Tooltip';
+import { brandingDarkTheme as darkTheme, brandingLightTheme as lightTheme } from "../../branding/index.js";
+import { useTranslate } from "../../i18n/index.js";
+import { ApiItemContainer, ExpandableApiItem } from "./ExpandableApiItem.js";
+import { ApiWarningAlert } from "../ApiWarningAlert.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledApiItem = styled(ExpandableApiItem)(({
+  theme
+}) => ({
+  '& .prop-list-description': {
+    marginBottom: 10
+  },
+  '& .prop-list-additional-info': {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8,
+    '& > p': {
+      margin: 0
+    },
+    '& .prop-list-title': {
+      ...theme.typography.body2,
+      fontWeight: theme.typography.fontWeightSemiBold,
+      color: (theme.vars || theme).palette.text.primary,
+      paddingRight: 5,
+      whiteSpace: 'nowrap',
+      margin: 0
+    },
+    '& .default-value': {
+      fontSize: theme.typography.pxToRem(12)
+    }
+  },
+  '&.prop-list-deprecated-item': {
+    '& .MuiApi-item-note': {
+      color: `var(--muidocs-palette-warning-700, ${lightTheme.palette.warning[700]})`
+    }
+  },
+  '& .prop-list-alert': {
+    marginBottom: 16,
+    '& .MuiAlert-icon': {
+      margin: 0
+    }
+  },
+  '& .prop-list-default-props': {
+    ...theme.typography.body2,
+    fontWeight: theme.typography.fontWeightSemiBold
+  },
+  '& .prop-list-signature': {
+    p: {
+      ...theme.typography.body2,
+      fontWeight: theme.typography.fontWeightSemiBold,
+      marginBottom: 8
+    },
+    ul: {
+      paddingLeft: 24,
+      marginTop: 2,
+      marginBottom: 0
+    },
+    '& > code': {
+      borderRadius: 8,
+      padding: 12,
+      width: '100%',
+      marginBottom: 8,
+      color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[50]})`,
+      border: '1px solid',
+      borderColor: `var(--muidocs-palette-primaryDark-700, ${lightTheme.palette.primaryDark[700]})`,
+      backgroundColor: `var(--muidocs-palette-primaryDark-800, ${lightTheme.palette.primaryDark[800]})`
+    }
+  }
+}), ({
+  theme
+}) => ({
+  [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: {
+    '& .prop-list-additional-info': {
+      '& .prop-list-title': {
+        p: {
+          color: `var(--muidocs-palette-grey-50, ${darkTheme.palette.grey[50]})`
+        }
+      }
+    },
+    '& .prop-list-default-props': {
+      color: `var(--muidocs-palette-grey-300, ${darkTheme.palette.grey[300]})`
+    },
+    '&.prop-list-deprecated-item': {
+      '& .MuiApi-item-note': {
+        color: `var(--muidocs-palette-warning-400, ${darkTheme.palette.warning[400]})`
+      }
+    }
+  }
+}));
+function PropDescription(props) {
+  const {
+    description
+  } = props;
+  const isUlPresent = description.includes('<ul>');
+  const ComponentToRender = isUlPresent ? 'div' : 'p';
+  return /*#__PURE__*/_jsx(ComponentToRender, {
+    className: "prop-list-description algolia-content" // This className is used by Algolia
+    ,
+    dangerouslySetInnerHTML: {
+      __html: description
+    }
+  });
+}
+export default function PropertiesList(props) {
+  const {
+    properties,
+    displayOption
+  } = props;
+  const t = useTranslate();
+  return /*#__PURE__*/_jsx(ApiItemContainer, {
+    children: properties.map(params => {
+      const {
+        propName,
+        seeMoreDescription,
+        description,
+        requiresRef,
+        isOptional,
+        isRequired,
+        isDeprecated,
+        isProPlan,
+        isPremiumPlan,
+        deprecationInfo,
+        typeName,
+        propDefault,
+        additionalInfo,
+        signature,
+        signatureArgs,
+        signatureReturnDescription,
+        hash
+      } = params;
+      let note = isOptional && t('api-docs.optional') || isRequired && t('api-docs.required') || '';
+      if (isDeprecated) {
+        note = [note, t('api-docs.deprecated')].filter(Boolean).join(' - ');
+      }
+      return /*#__PURE__*/_jsxs(StyledApiItem, {
+        id: hash,
+        title: /*#__PURE__*/_jsxs(React.Fragment, {
+          children: [propName, isProPlan && (_a || (_a = /*#__PURE__*/_jsx("a", {
+            href: "/x/introduction/licensing/#pro-plan",
+            "aria-label": "Pro plan",
+            children: /*#__PURE__*/_jsx("span", {
+              className: "plan-pro"
+            })
+          }))), isPremiumPlan && (_a2 || (_a2 = /*#__PURE__*/_jsx("a", {
+            href: "/x/introduction/licensing/#premium-plan",
+            "aria-label": "Premium plan",
+            children: /*#__PURE__*/_jsx("span", {
+              className: "plan-premium"
+            })
+          })))]
+        }),
+        note: note,
+        type: "props",
+        displayOption: displayOption,
+        className: isDeprecated ? 'prop-list-deprecated-item' : '',
+        children: [description && /*#__PURE__*/_jsx(PropDescription, {
+          description: description
+        }), seeMoreDescription && /*#__PURE__*/_jsx("p", {
+          dangerouslySetInnerHTML: {
+            __html: seeMoreDescription
+          }
+        }), requiresRef && /*#__PURE__*/_jsx(ApiWarningAlert, {
+          className: "MuiApi-collapsible prop-list-alert",
+          children: /*#__PURE__*/_jsx("span", {
+            dangerouslySetInnerHTML: {
+              __html: t('api-docs.requires-ref')
+            }
+          })
+        }), additionalInfo?.map(key => /*#__PURE__*/_jsx("p", {
+          className: "prop-list-additional-description  MuiApi-collapsible",
+          dangerouslySetInnerHTML: {
+            __html: t(`api-docs.additional-info.${key}`)
+          }
+        }, key)), /*#__PURE__*/_jsxs("div", {
+          className: "prop-list-additional-info",
+          children: [typeName && /*#__PURE__*/_jsxs("p", {
+            className: "prop-list-type MuiApi-collapsible",
+            children: [/*#__PURE__*/_jsxs("span", {
+              className: "prop-list-title",
+              children: [t('api-docs.type'), ":"]
+            }), /*#__PURE__*/_jsx("code", {
+              className: "Api-code",
+              dangerouslySetInnerHTML: {
+                __html: typeName
+              }
+            })]
+          }), propDefault && /*#__PURE__*/_jsxs("p", {
+            className: "prop-list-default-props MuiApi-collapsible",
+            children: [/*#__PURE__*/_jsxs("span", {
+              className: "prop-list-title",
+              children: [t('api-docs.default'), ":"]
+            }), /*#__PURE__*/_jsx("code", {
+              className: "default-value",
+              children: propDefault
+            })]
+          }), signature && /*#__PURE__*/_jsxs("div", {
+            className: "prop-list-signature MuiApi-collapsible",
+            children: [/*#__PURE__*/_jsxs("span", {
+              className: "prop-list-title",
+              children: [t('api-docs.signature'), ":"]
+            }), /*#__PURE__*/_jsxs("div", {
+              className: "prop-list-content",
+              children: [/*#__PURE__*/_jsx("code", {
+                dangerouslySetInnerHTML: {
+                  __html: signature
+                }
+              }), signatureArgs && /*#__PURE__*/_jsx("div", {
+                children: /*#__PURE__*/_jsx("ul", {
+                  children: signatureArgs.map(({
+                    argName,
+                    argDescription,
+                    argType,
+                    argTypeDescription
+                  }) => /*#__PURE__*/_jsxs("li", {
+                    children: [/*#__PURE__*/_jsxs("code", {
+                      children: [argName, argType && argTypeDescription && /*#__PURE__*/_jsxs("span", {
+                        children: [":", ' ', /*#__PURE__*/_jsx(Tooltip, {
+                          title: /*#__PURE__*/_jsx("span", {
+                            dangerouslySetInnerHTML: {
+                              __html: argTypeDescription
+                            }
+                          }),
+                          children: /*#__PURE__*/_jsx("span", {
+                            className: "signature-type",
+                            children: argType
+                          })
+                        })]
+                      })]
+                    }), ' ', argDescription && /*#__PURE__*/_jsx("span", {
+                      dangerouslySetInnerHTML: {
+                        __html: argDescription
+                      }
+                    })]
+                  }, argName))
+                })
+              }), signatureReturnDescription && /*#__PURE__*/_jsxs("p", {
+                children: [t('api-docs.returns'), /*#__PURE__*/_jsx("span", {
+                  dangerouslySetInnerHTML: {
+                    __html: signatureReturnDescription
+                  }
+                })]
+              })]
+            })]
+          })]
+        }), isDeprecated && /*#__PURE__*/_jsxs(ApiWarningAlert, {
+          children: [/*#__PURE__*/_jsx("b", {
+            children: t('api-docs.deprecated')
+          }), deprecationInfo && /*#__PURE__*/_jsxs(React.Fragment, {
+            children: ['－', /*#__PURE__*/_jsx("span", {
+              dangerouslySetInnerHTML: {
+                __html: deprecationInfo
+              }
+            })]
+          })]
+        })]
+      }, propName);
+    })
+  });
+}

package/ApiPage/list/SlotsList.d.ts

@@ -0,0 +1,7 @@
+import { SlotDefinition } from "../definitions/index.js";
+interface SlotsListProps {
+  slots: SlotDefinition[];
+  displayOption: 'collapsed' | 'expanded';
+}
+export default function SlotsList(props: SlotsListProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/ApiPage/list/SlotsList.js

@@ -0,0 +1,93 @@
+import { alpha, styled } from '@mui/material/styles';
+import { brandingDarkTheme as darkTheme, brandingLightTheme as lightTheme } from "../../branding/index.js";
+import { useTranslate } from "../../i18n/index.js";
+import { ApiItemContainer, ExpandableApiItem } from "./ExpandableApiItem.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledApiItem = styled(ExpandableApiItem)(({
+  theme
+}) => ({
+  '.slot-classname, .slot-default-element': {
+    marginBottom: 8,
+    '& .prop-list-title': {
+      ...theme.typography.body2,
+      fontWeight: theme.typography.fontWeightSemiBold,
+      color: (theme.vars || theme).palette.text.primary
+    }
+  },
+  '& .default-slot-value': {
+    ...theme.typography.caption,
+    fontFamily: theme.typography.fontFamilyCode,
+    fontWeight: theme.typography.fontWeightRegular
+  },
+  '& .global-class-value': {
+    ...theme.typography.caption,
+    fontFamily: theme.typography.fontFamilyCode,
+    fontWeight: theme.typography.fontWeightRegular,
+    borderColor: alpha(darkTheme.palette.primary[100], 0.5),
+    backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`
+  }
+}), ({
+  theme
+}) => ({
+  [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: {
+    '& .global-class-value': {
+      borderColor: alpha(darkTheme.palette.primary[400], 0.1),
+      backgroundColor: alpha(darkTheme.palette.primary[900], 0.4)
+    }
+  }
+}));
+export default function SlotsList(props) {
+  const {
+    slots,
+    displayOption
+  } = props;
+  const t = useTranslate();
+  return /*#__PURE__*/_jsx(ApiItemContainer, {
+    className: "MuiApi-slot-list",
+    children: slots.map(params => {
+      const {
+        description,
+        className,
+        name,
+        defaultValue,
+        hash
+      } = params;
+      const isExtendable = description || defaultValue || className;
+      return /*#__PURE__*/_jsxs(StyledApiItem, {
+        id: hash,
+        title: name,
+        note: "",
+        type: "slots",
+        isExtendable: !!isExtendable,
+        displayOption: displayOption,
+        children: [description && /*#__PURE__*/_jsx("p", {
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML: {
+            __html: description
+          }
+        }), className && /*#__PURE__*/_jsxs("p", {
+          className: "slot-classname",
+          children: [/*#__PURE__*/_jsxs("span", {
+            className: "prop-list-title",
+            children: [t('api-docs.className'), ":"]
+          }), ' ', /*#__PURE__*/_jsx("code", {
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML: {
+              __html: `.${className}`
+            },
+            className: "global-class-value"
+          })]
+        }), defaultValue && /*#__PURE__*/_jsxs("p", {
+          className: "slot-default-element",
+          children: [/*#__PURE__*/_jsxs("span", {
+            className: "prop-list-title",
+            children: [t('api-docs.defaultComponent'), ":"]
+          }), ' ', /*#__PURE__*/_jsx("code", {
+            className: "default-slot-value",
+            children: defaultValue
+          })]
+        })]
+      }, name);
+    })
+  });
+}

package/ApiPage/list/index.d.ts

@@ -0,0 +1 @@
+export * from "./ExpandableApiItem.js";

package/ApiPage/list/index.js

@@ -0,0 +1 @@
+export * from "./ExpandableApiItem.js";

package/ApiPage/private.d.ts

@@ -0,0 +1,3 @@
+export * from "./definitions/index.js";
+export * from "./list/index.js";
+export * from "./sections/index.js";

package/ApiPage/private.js

@@ -0,0 +1,3 @@
+export * from "./definitions/index.js";
+export * from "./list/index.js";
+export * from "./sections/index.js";

package/ApiPage/sections/ClassesSection.d.ts

@@ -0,0 +1,34 @@
+import { PropsTranslations, ComponentClassDefinition } from '@mui-internal/api-docs-builder';
+import type { ClassDefinition } from "../definitions/types.js";
+import { ApiDisplayLayout } from "./ToggleDisplayOption.js";
+export type ClassesSectionProps = ({
+  classes: ClassDefinition[];
+  componentClasses?: undefined;
+  classDescriptions?: undefined;
+  componentName?: undefined;
+} | {
+  classes: undefined;
+  componentClasses: ComponentClassDefinition[];
+  classDescriptions: PropsTranslations['classDescriptions'];
+  componentName: string;
+}) & {
+  spreadHint?: string;
+  /**
+   * The translation key of the section title.
+   * @default 'api-docs.classes'
+   */
+  title?: string;
+  /**
+   * @default 'classes'
+   */
+  titleHash?: string;
+  /**
+   * @default 'h2'
+   */
+  level?: 'h2' | 'h3' | 'h4';
+  defaultLayout: ApiDisplayLayout;
+  layoutStorageKey: string;
+  displayClassKeys?: boolean;
+  styleOverridesLink?: string;
+};
+export declare function ClassesSection(props: ClassesSectionProps): import("react/jsx-runtime").JSX.Element | null;