@mui/docs 9.0.0-alpha.2 → 9.0.0-alpha.4

package/MarkdownElement/index.d.mts

@@ -1 +0,0 @@
-export * from "./MarkdownElement.mjs";

package/MarkdownElement/index.mjs

@@ -1 +0,0 @@
-export * from "./MarkdownElement.mjs";

package/NProgressBar/NProgressBar.d.mts

@@ -1,6 +0,0 @@
-import * as React from 'react';
-export interface NProgressBarProps {
-  children?: React.ReactNode;
-}
-declare const NProgressBar: React.FunctionComponent<NProgressBarProps>;
-export default NProgressBar;

package/NProgressBar/NProgressBar.js

@@ -1,98 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _nprogress = _interopRequireDefault(require("nprogress"));
-var _NoSsr = require("@mui/base/NoSsr");
-var _exactProp = _interopRequireDefault(require("@mui/utils/exactProp"));
-var _GlobalStyles = _interopRequireDefault(require("@mui/material/GlobalStyles"));
-var _styles = require("@mui/material/styles");
-var _jsxRuntime = require("react/jsx-runtime");
-_nprogress.default.configure({
-  barSelector: '.nprogress-bar',
-  template: `
-    <div class="nprogress-bar">
-      <div></div>
-      <div></div>
-    </div>
-  `
-});
-const muiNProgressPulse = (0, _styles.keyframes)`
-  30% {
-    opacity: 0.6;
-  }
-
-  60% {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 0.6;
-  }
-`;
-
-/**
- * Elegant and ready-to-use wrapper on top of https://github.com/rstacruz/nprogress/.
- * The implementation is highly inspired by the YouTube one.
- */
-function NProgressBar(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_NoSsr.NoSsr, {
-    children: [props.children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_GlobalStyles.default, {
-      styles: theme => ({
-        '#nprogress': {
-          direction: 'ltr',
-          pointerEvents: 'none',
-          position: 'fixed',
-          top: 0,
-          left: 0,
-          right: 0,
-          height: 2,
-          zIndex: (theme.vars || theme).zIndex.tooltip,
-          backgroundColor: (theme.vars || theme).palette.primary[200],
-          ...theme.applyStyles('dark', {
-            backgroundColor: (theme.vars || theme).palette.primary[700]
-          }),
-          '& .nprogress-bar': {
-            position: 'fixed',
-            backgroundColor: (theme.vars || theme).palette.primary.main,
-            top: 0,
-            left: 0,
-            right: 0,
-            height: 2
-          },
-          '& .nprogress-bar > div': {
-            position: 'absolute',
-            top: 0,
-            height: 2,
-            boxShadow: `${(theme.vars || theme).palette.primary.main} 1px 0 6px 1px`,
-            borderRadius: '100%',
-            animation: `${muiNProgressPulse} 2s ease-out 0s infinite`
-          },
-          '& .nprogress-bar > div:first-of-type': {
-            opacity: 0.6,
-            width: 20,
-            right: 0,
-            clip: 'rect(-6px,22px,14px,10px)'
-          },
-          '& .nprogress-bar > div:last-of-type': {
-            opacity: 0.6,
-            width: 180,
-            right: -80,
-            clip: 'rect(-6px,90px,14px,-6px)'
-          }
-        }
-      })
-    })]
-  });
-}
-process.env.NODE_ENV !== "production" ? NProgressBar.propTypes = {
-  children: _propTypes.default.node
-} : void 0;
-if (process.env.NODE_ENV !== 'production') {
-  process.env.NODE_ENV !== "production" ? NProgressBar.propTypes = (0, _exactProp.default)(NProgressBar.propTypes) : void 0;
-}
-var _default = exports.default = NProgressBar;

package/NProgressBar/index.d.mts

@@ -1,2 +0,0 @@
-export { default } from "./NProgressBar.mjs";
-export * from "./NProgressBar.mjs";

package/NProgressBar/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./NProgressBar.js";
-export * from "./NProgressBar.js";

package/NProgressBar/index.js

@@ -1,13 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _NProgressBar.default;
-  }
-});
-var _NProgressBar = _interopRequireDefault(require("./NProgressBar"));

package/NProgressBar/index.mjs

@@ -1 +0,0 @@
-export { default } from "./NProgressBar.mjs";

package/SectionHeadline/SectionHeadline.d.mts

@@ -1,13 +0,0 @@
-import * as React from 'react';
-export interface SectionHeadlineProps {
-  alwaysCenter?: boolean;
-  description?: React.ReactNode;
-  id?: string;
-  /**
-   * For using with dark background.
-   */
-  inverted?: boolean;
-  overline?: React.ReactNode;
-  title: string | React.ReactElement<React.HTMLAttributes<HTMLElement>>;
-}
-export default function SectionHeadline(props: SectionHeadlineProps): import("react/jsx-runtime").JSX.Element;

package/SectionHeadline/SectionHeadline.mjs

@@ -1,81 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function SectionHeadline(props) {
-  const {
-    alwaysCenter = false,
-    description,
-    id,
-    inverted = false,
-    overline,
-    title
-  } = props;
-  return /*#__PURE__*/_jsxs(Box, {
-    sx: {
-      m: alwaysCenter ? 'auto' : null
-    },
-    children: [overline && /*#__PURE__*/_jsx(Typography, {
-      id: id,
-      component: "h2",
-      variant: "body2",
-      sx: {
-        fontWeight: 'bold',
-        color: 'primary.main',
-        mb: 1,
-        ...(alwaysCenter && {
-          textAlign: 'center'
-        })
-      },
-      children: overline
-    }), typeof title === 'string' ? /*#__PURE__*/_jsx(Typography, {
-      variant: "h2",
-      sx: theme => ({
-        maxWidth: 500,
-        ...(inverted ? {
-          color: '#fff'
-        } : {
-          color: 'primaryDark.900',
-          ...theme.applyDarkStyles({
-            color: 'grey.100'
-          })
-        }),
-        ...(alwaysCenter && {
-          textAlign: 'center',
-          maxWidth: '100%'
-        })
-      }),
-      children: title
-    }) : (/*#__PURE__*/React.cloneElement(title, {
-      style: {
-        maxWidth: 500,
-        ...(alwaysCenter && {
-          maxWidth: '100%',
-          textAlign: 'center'
-        }),
-        ...(inverted && {
-          color: '#fff'
-        })
-      }
-    })), description && /*#__PURE__*/_jsx(Typography, {
-      sx: theme => ({
-        mt: 1,
-        mb: 3,
-        maxWidth: 500,
-        ...(inverted ? {
-          color: 'grey.400'
-        } : {
-          color: 'grey.800',
-          ...theme.applyDarkStyles({
-            color: 'grey.500'
-          })
-        }),
-        ...(alwaysCenter && {
-          textAlign: 'center',
-          mx: 'auto'
-        })
-      }),
-      children: description
-    })]
-  });
-}

package/SectionHeadline/index.d.mts

@@ -1,2 +0,0 @@
-export * from "./SectionHeadline.mjs";
-export { default } from "./SectionHeadline.mjs";

package/SectionHeadline/index.mjs

@@ -1,2 +0,0 @@
-export * from "./SectionHeadline.mjs";
-export { default } from "./SectionHeadline.mjs";

package/SectionTitle/SectionTitle.d.mts

@@ -1,6 +0,0 @@
-export interface SectionTitleProps<Hash extends string = string> {
-  title: string;
-  hash: Hash;
-  level?: 'h2' | 'h3' | 'h4';
-}
-export declare function SectionTitle(props: SectionTitleProps): import("react/jsx-runtime").JSX.Element;

package/SectionTitle/SectionTitle.mjs

@@ -1,29 +0,0 @@
-var _span;
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function SectionTitle(props) {
-  const {
-    title,
-    hash,
-    level: Level = 'h2'
-  } = props;
-  return /*#__PURE__*/_jsx(Level, {
-    id: hash,
-    style: {
-      flexGrow: 1
-    },
-    children: /*#__PURE__*/_jsxs("a", {
-      "aria-labelledby": hash,
-      className: "title-link-to-anchor",
-      href: `#${hash}`,
-      tabIndex: -1,
-      children: [title, _span || (_span = /*#__PURE__*/_jsx("span", {
-        className: "anchor-icon",
-        children: /*#__PURE__*/_jsx("svg", {
-          children: /*#__PURE__*/_jsx("use", {
-            xlinkHref: "#anchor-link-icon"
-          })
-        })
-      }))]
-    })
-  });
-}

package/SectionTitle/index.d.mts

@@ -1 +0,0 @@
-export * from "./SectionTitle.mjs";

package/SectionTitle/index.mjs

@@ -1 +0,0 @@
-export * from "./SectionTitle.mjs";

package/ThemeContext/ThemeContext.d.mts

@@ -1,92 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-export declare const highDensity: {
-  components: {
-    MuiButton: {
-      defaultProps: {
-        size: string;
-      };
-    };
-    MuiFilledInput: {
-      defaultProps: {
-        margin: string;
-      };
-    };
-    MuiFormControl: {
-      defaultProps: {
-        margin: string;
-      };
-    };
-    MuiFormHelperText: {
-      defaultProps: {
-        margin: string;
-      };
-    };
-    MuiIconButton: {
-      defaultProps: {
-        size: string;
-      };
-    };
-    MuiInputBase: {
-      defaultProps: {
-        margin: string;
-      };
-    };
-    MuiInputLabel: {
-      defaultProps: {
-        margin: string;
-      };
-    };
-    MuiListItem: {
-      defaultProps: {
-        dense: boolean;
-      };
-    };
-    MuiOutlinedInput: {
-      defaultProps: {
-        margin: string;
-      };
-    };
-    MuiFab: {
-      defaultProps: {
-        size: string;
-      };
-    };
-    MuiTable: {
-      defaultProps: {
-        size: string;
-      };
-    };
-    MuiTextField: {
-      defaultProps: {
-        margin: string;
-      };
-    };
-    MuiToolbar: {
-      defaultProps: {
-        variant: string;
-      };
-    };
-  };
-};
-export declare const DispatchContext: React.Context<React.ActionDispatch<any>>;
-export declare const ThemeOptionsContext: React.Context<{
-  dense: boolean;
-  direction: "ltr" | "rtl";
-  paletteMode: "light" | "dark";
-}>;
-export declare function ThemeProvider(props: React.PropsWithChildren): import("react/jsx-runtime").JSX.Element;
-export declare namespace ThemeProvider {
-  var propTypes: {
-    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-  };
-}
-/**
- * @returns {(nextOptions: Partial<typeof themeInitialOptions>) => void}
- */
-export declare function useChangeTheme(): (options: any) => void;
-export declare function useColorSchemeShim(): {
-  mode: string | null;
-  systemMode: string;
-  setMode: React.Dispatch<React.SetStateAction<string | null>>;
-};

package/ThemeContext/ThemeContext.mjs

@@ -1,200 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { createTheme as createMdTheme } from '@mui/material/styles';
-import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import useLocalStorageState from '@mui/utils/useLocalStorageState';
-import useLazyCSS from "../useLazyCSS/index.mjs";
-import { getMetaThemeColor } from "../branding/index.mjs";
-import { jsx as _jsx } from "react/jsx-runtime";
-const themeInitialOptions = {
-  dense: false,
-  direction: 'ltr',
-  paletteMode: 'light'
-};
-export const highDensity = {
-  components: {
-    MuiButton: {
-      defaultProps: {
-        size: 'small'
-      }
-    },
-    MuiFilledInput: {
-      defaultProps: {
-        margin: 'dense'
-      }
-    },
-    MuiFormControl: {
-      defaultProps: {
-        margin: 'dense'
-      }
-    },
-    MuiFormHelperText: {
-      defaultProps: {
-        margin: 'dense'
-      }
-    },
-    MuiIconButton: {
-      defaultProps: {
-        size: 'small'
-      }
-    },
-    MuiInputBase: {
-      defaultProps: {
-        margin: 'dense'
-      }
-    },
-    MuiInputLabel: {
-      defaultProps: {
-        margin: 'dense'
-      }
-    },
-    MuiListItem: {
-      defaultProps: {
-        dense: true
-      }
-    },
-    MuiOutlinedInput: {
-      defaultProps: {
-        margin: 'dense'
-      }
-    },
-    MuiFab: {
-      defaultProps: {
-        size: 'small'
-      }
-    },
-    MuiTable: {
-      defaultProps: {
-        size: 'small'
-      }
-    },
-    MuiTextField: {
-      defaultProps: {
-        margin: 'dense'
-      }
-    },
-    MuiToolbar: {
-      defaultProps: {
-        variant: 'dense'
-      }
-    }
-  }
-};
-export const DispatchContext = /*#__PURE__*/React.createContext(() => {
-  throw new Error('Forgot to wrap component in `ThemeProvider`');
-});
-if (process.env.NODE_ENV !== 'production') {
-  DispatchContext.displayName = 'ThemeDispatchContext';
-}
-export const ThemeOptionsContext = /*#__PURE__*/React.createContext(themeInitialOptions);
-if (process.env.NODE_ENV !== 'production') {
-  ThemeOptionsContext.displayName = 'ThemeOptionsContext';
-}
-export function ThemeProvider(props) {
-  const {
-    children
-  } = props;
-  const [themeOptions, dispatch] = React.useReducer((state, action) => {
-    switch (action.type) {
-      case 'SET_DENSE':
-        return {
-          ...state,
-          dense: action.payload
-        };
-      case 'RESET_DENSITY':
-        return {
-          ...state,
-          dense: themeInitialOptions.dense
-        };
-      case 'CHANGE':
-        // No value changed
-        if ((!action.payload.paletteMode || action.payload.paletteMode === state.paletteMode) && (!action.payload.direction || action.payload.direction === state.direction)) {
-          return state;
-        }
-        return {
-          ...state,
-          paletteMode: action.payload.paletteMode || state.paletteMode,
-          direction: action.payload.direction || state.direction
-        };
-      default:
-        throw new Error(`Unrecognized type ${action.type}`);
-    }
-  }, themeInitialOptions);
-  const {
-    direction,
-    paletteMode
-  } = themeOptions;
-  useLazyCSS('/static/styles/prism-okaidia.css', '#prismjs');
-
-  // TODO replace with useColorScheme once all pages support css vars
-  const {
-    mode,
-    systemMode
-  } = useColorSchemeShim();
-  const calculatedMode = mode === 'system' ? systemMode : mode;
-  useEnhancedEffect(() => {
-    dispatch({
-      type: 'CHANGE',
-      payload: {
-        paletteMode: calculatedMode
-      }
-    });
-  }, [calculatedMode]);
-  useEnhancedEffect(() => {
-    document.body.setAttribute('dir', direction);
-  }, [direction]);
-  useEnhancedEffect(() => {
-    // To support light and dark mode images in the docs
-    if (paletteMode === 'dark') {
-      document.body.classList.remove('mode-light');
-      document.body.classList.add('mode-dark');
-    } else {
-      document.body.classList.remove('mode-dark');
-      document.body.classList.add('mode-light');
-    }
-    const metas = document.querySelectorAll('meta[name="theme-color"]');
-    metas.forEach(meta => {
-      meta.setAttribute('content', getMetaThemeColor(paletteMode));
-    });
-  }, [paletteMode]);
-  React.useEffect(() => {
-    // Expose the theme as a global variable so people can play with it.
-    window.createTheme = createMdTheme;
-  }, []);
-  return /*#__PURE__*/_jsx(ThemeOptionsContext.Provider, {
-    value: themeOptions,
-    children: /*#__PURE__*/_jsx(DispatchContext.Provider, {
-      value: dispatch,
-      children: children
-    })
-  });
-}
-process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {
-  children: PropTypes.node
-} : void 0;
-
-/**
- * @returns {(nextOptions: Partial<typeof themeInitialOptions>) => void}
- */
-export function useChangeTheme() {
-  const dispatch = React.useContext(DispatchContext);
-  return React.useCallback(options => dispatch({
-    type: 'CHANGE',
-    payload: options
-  }), [dispatch]);
-}
-
-// TODO: remove once all pages support css vars and replace call sites with useColorScheme()
-export function useColorSchemeShim() {
-  const [mode, setMode] = useLocalStorageState('mui-mode', 'system');
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)', {
-    noSsr: true
-  });
-  const systemMode = prefersDarkMode ? 'dark' : 'light';
-  return {
-    mode,
-    systemMode,
-    setMode
-  };
-}

package/ThemeContext/index.d.mts

@@ -1 +0,0 @@
-export { ThemeProvider, ThemeOptionsContext, DispatchContext, highDensity, useChangeTheme, useColorSchemeShim } from "./ThemeContext.mjs";

package/ThemeContext/index.mjs

@@ -1 +0,0 @@
-export { ThemeProvider, ThemeOptionsContext, DispatchContext, highDensity, useChangeTheme, useColorSchemeShim } from "./ThemeContext.mjs";

package/branding/BrandingProvider.d.mts

@@ -1,9 +0,0 @@
-import * as React from 'react';
-export interface BrandingProviderProps {
-  children: React.ReactNode;
-  /**
-   * If not `undefined`, the provider is considered nesting and does not render NextNProgressBar & CssBaseline
-   */
-  mode?: 'light' | 'dark';
-}
-export declare function BrandingProvider(props: BrandingProviderProps): import("react/jsx-runtime").JSX.Element;

package/branding/BrandingProvider.mjs

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import { ThemeProvider, useTheme } from '@mui/material/styles';
-import { brandingDarkTheme, brandingLightTheme } from "./brandingTheme.mjs";
-import { jsx as _jsx } from "react/jsx-runtime";
-export function BrandingProvider(props) {
-  const {
-    children,
-    mode: modeProp
-  } = props;
-  const upperTheme = useTheme();
-  const mode = modeProp || upperTheme.palette.mode;
-  const theme = mode === 'dark' ? brandingDarkTheme : brandingLightTheme;
-  return /*#__PURE__*/_jsx(ThemeProvider, {
-    theme: modeProp ? () => theme : theme,
-    children: children
-  });
-}