@mui/codemod/v9.0.0/system-props/test-cases/system-props.expected.js

Codemod scripts for Material UI.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _material = require("@mui/material");
var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
var _Stack = _interopRequireDefault(require("@mui/material/Stack"));
var _Link2 = _interopRequireDefault(require("@mui/material/Link"));
var _DialogContentText = _interopRequireDefault(require("@mui/material/DialogContentText"));
var _TimelineContent = _interopRequireDefault(require("@mui/lab/TimelineContent"));
var _TimelineOppositeContent = _interopRequireDefault(require("@mui/lab/TimelineOppositeContent"));
var _jsxRuntime = require("react/jsx-runtime");
var _Link;
/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
  sx: {
    typography: "body1"
  }
});
/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
  sx: {
    color: "palette.main",
    display: 'block'
  }
});
/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
  container: true,
  sx: {
    flexDirection: `column`
  }
});
/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid2, {
  container: true,
  sx: {
    flexDirection: `column`
  }
});
const sx = {
  display: 'flex'
};
const ml = 2;
/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
  sx: {
    color: "#fff",
    mb: 5
  }
});
/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
  sx: {
    color: "hsl(200 30% 30%)",
    mb: 5
  }
});
/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
  variant: "body1",
  sx: [{
    color: "primary.main",
    ml: ml
  }, ...(Array.isArray(sx) ? sx : [sx])]
});
/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
  variant: "body1",
  sx: [{
    color: "divider",
    ml: ml
  }, ...(Array.isArray(sx) ? sx : [sx])]
});
/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
  variant: "body1",
  sx: [{
    color: "inherit",
    ml: ml
  }, ...(Array.isArray(sx) ? sx : [sx])]
});
/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
  startDecorator: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
    textColor: "text.secondary",
    sx: {
      fontSize: "lg"
    },
    children: "$"
  }),
  sx: {
    fontSize: "xl4",
    lineHeight: 1,
    alignItems: 'flex-start'
  },
  children: "25"
});
function Copyright(props) {
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
    variant: "body2",
    align: "center",
    ...props,
    sx: [{
      color: "text.secondary"
    }, ...(Array.isArray(props.sx) ? props.sx : [props.sx])],
    children: ['Copyright © ', _Link || (_Link = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link2.default, {
      color: "inherit",
      href: "https://mui.com/",
      children: "Your Website"
    })), ' ', new Date().getFullYear(), '.']
  });
}
/*#__PURE__*/(0, _jsxRuntime.jsx)(_Stack.default, {
  sx: [{
    flex: "1"
  }, ...(Array.isArray(sx) ? sx : [sx])]
});
/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
  sx: [{
    typography: "body1"
  }, foo.bar ? {
    opacity: 0
  } : sx]
});
/*#__PURE__*/(0, _jsxRuntime.jsx)(_Link2.default, {
  color: "inherit",
  href: "https://mui.com/",
  children: "Sitemark"
});
/*#__PURE__*/(0, _jsxRuntime.jsx)(_Link2.default, {
  variant: "body2",
  href: "#",
  sx: {
    color: "text.secondary"
  },
  children: "Features"
});
/*#__PURE__*/(0, _jsxRuntime.jsx)(_Link2.default, {
  color: "primary",
  href: "#",
  children: "Primary Link"
});
/*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogContentText.default, {
  sx: {
    color: "text.secondary"
  },
  children: "Some content"
});
/*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogContentText.default, {
  sx: {
    color: "inherit",
    mt: 2
  },
  children: "Inherited"
});
/*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogContentText.default, {
  color: "primary",
  children: "Primary"
});
/*#__PURE__*/(0, _jsxRuntime.jsx)(_TimelineOppositeContent.default, {
  sx: {
    color: "text.secondary"
  },
  children: "09:30 am"
});
/*#__PURE__*/(0, _jsxRuntime.jsx)(_TimelineContent.default, {
  sx: {
    color: "inherit"
  },
  children: "Eat"
});

// Dynamic color values (expression, not string literal)
/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
  color: dynamicColor,
  sx: {
    mb: 2
  },
  children: "Dynamic"
});
/*#__PURE__*/(0, _jsxRuntime.jsx)(_Link2.default, {
  color: linkColor,
  href: "#",
  children: "Dynamic Link"
});