@mui/docs 6.0.0-alpha.0 → 6.0.0-alpha.1

package/branding/index.d.ts

@@ -0,0 +1,2 @@
+export * from './brandingTheme';
+export * from './BrandingProvider';

package/branding/index.js

@@ -0,0 +1,2 @@
+export * from './brandingTheme';
+export * from './BrandingProvider';

package/branding/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/branding/index.js",
+  "types": "./index.d.ts"
+}

package/legacy/InfoCard/InfoCard.js

@@ -0,0 +1,86 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { alpha } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+import { Link } from '../Link';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function GlowingIconContainer(_ref) {
+  var icon = _ref.icon;
+  return /*#__PURE__*/_jsx(Box, {
+    sx: function sx(theme) {
+      return _extends({
+        width: 40,
+        height: 40,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexShrink: 0,
+        borderRadius: 1,
+        border: '1px solid',
+        borderColor: 'primary.200',
+        bgcolor: 'primary.50',
+        boxShadow: "0px 1px 6px 0px ".concat(alpha(theme.palette.primary[500], 0.2), ", 0px 2px 12px 0px rgba(234, 237, 241, 0.3) inset")
+      }, theme.applyDarkStyles({
+        borderColor: alpha(theme.palette.primary[400], 0.25),
+        bgcolor: alpha(theme.palette.primary[900], 0.25),
+        boxShadow: "0 2px 6px 0 ".concat(alpha(theme.palette.primary[600], 0.3), ", 0px 2px 12px 0px rgba(0, 0, 0, 0.25) inset")
+      }));
+    },
+    children: icon
+  });
+}
+export function InfoCard(props) {
+  var classNameDescription = props.classNameDescription,
+    classNameTitle = props.classNameTitle,
+    dense = props.dense,
+    description = props.description,
+    icon = props.icon,
+    link = props.link,
+    svg = props.svg,
+    title = props.title,
+    titleProps = props.titleProps,
+    other = _objectWithoutProperties(props, ["classNameDescription", "classNameTitle", "dense", "description", "icon", "link", "svg", "title", "titleProps"]);
+  return /*#__PURE__*/_jsxs(Paper, _extends({
+    variant: "outlined",
+    component: link ? Link : 'div',
+    href: link
+  }, link ? {
+    noLinkStyle: true,
+    // Fix overloading with prefetch={false}, only prefetch on hover.
+    prefetch: false
+  } : {}, {
+    sx: function sx(theme) {
+      return _extends({
+        p: dense ? 2.5 : 3.5,
+        height: '100%',
+        background: "".concat((theme.vars || theme).palette.gradients.linearSubtle)
+      }, theme.applyDarkStyles({
+        bgcolor: alpha(theme.palette.primaryDark[800], 0.25),
+        background: "".concat((theme.vars || theme).palette.gradients.linearSubtle),
+        borderColor: 'primaryDark.700'
+      }));
+    }
+  }, other, {
+    children: [svg && svg, icon && /*#__PURE__*/_jsx(GlowingIconContainer, {
+      icon: icon
+    }), /*#__PURE__*/_jsx(Typography, _extends({
+      fontWeight: "bold",
+      component: "h3",
+      color: "text.primary",
+      variant: "body2",
+      mt: icon ? 2 : 0,
+      mb: description ? 0.5 : 0,
+      className: classNameTitle
+    }, titleProps, {
+      children: title
+    })), /*#__PURE__*/_jsx(Typography, {
+      variant: "body2",
+      color: "text.secondary",
+      className: classNameDescription,
+      children: description
+    })]
+  }));
+}

package/legacy/InfoCard/index.js

@@ -0,0 +1 @@
+export * from './InfoCard';

package/legacy/branding/BrandingProvider.js

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