Parsing error: unknown jsx node: "<PageSection title=\"Principles\">\n <PharosHeading level=\"3\" preset=\"4\">\n Consistent\n </PharosHeading>\n <div\n style={{\n marginBottom: 'var(--pharos-spacing-2-x)',\n color: 'var(--pharos-color-text-20)',\n }}\n >\n All elevation is used at the appropriate level assigned to that component. Always\n follow the recommended shadow pairings. \n <PharosHeading level=\"3\" preset=\"4\">\n Suitable\n </PharosHeading>\n <div\n style={{\n marginBottom: 'var(--pharos-spacing-2-x)',\n color: 'var(--pharos-color-text-20)',\n }}\n >\n Dynamic elevation should only change values when suitable for a components behavior. \n </div>\n <PharosHeading level=\"3\" preset=\"4\">\n Practical\n </PharosHeading>\n <div\n style={{\n marginBottom: 'var(--pharos-spacing-2-x)',\n color: 'var(--pharos-color-text-20)',\n }}\n >\n Elevation is not solely used for visually enjoyment. It should communicate to users\n that there is an emphasis or prioritization when it comes to a given component.\n </div>\n <Grid columns={2}>\n <div>\n <PharosHeading level=\"4\" preset=\"1--bold\">\n Generous x-height\n </PharosHeading>\n </div>\n <div>\n <PharosHeading level=\"4\" preset=\"1--bold\">\n Open apertures\n </PharosHeading>\n </div>\n <img src={xHeight} alt=\"x-height\" />\n <img src={openApertures} alt=\"open apertures\" />\n <div>\n X-height is the vertical measure of a lowercase x. The shorter the x-height, the smaller the\n letter will appear, which can cause the type to become illegible.\n </div>\n <div>\n Apertures distinguish letters from similar letters and minimize bleed into surrounding\n letters.\n </div>\n