{"_id":"@ampproject/amp-mathml","_rev":"15-4f72e8057b5005ac875864ea0781140a","name":"@ampproject/amp-mathml","dist-tags":{"nightly":"1.2110252343.0","latest":"1.2110011758.0"},"versions":{"1.2110112305.0":{"name":"@ampproject/amp-mathml","version":"1.2110112305.0","description":"AMP HTML amp-mathml Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-mathml/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-mathml/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-mathml@1.2110112305.0","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-qjkbonCyxMdlmDiAGWo+/he5PPOvA7+E/ffIhrX+ZmnHl2Bmq1MnlKzE27I2noU+VX8vrm3D4x3M4r8Igzkogw==","shasum":"eab332750694b807573758e9ca8c82000e77ffcd","tarball":"https://registry.npmjs.org/@ampproject/amp-mathml/-/amp-mathml-1.2110112305.0.tgz","fileCount":20,"unpackedSize":1013365,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE4PSpJzDVXIjFp3EWu7TP+2oNmywQ4u0Lb/Qz5eeTWfAiEArj4HQsMlfBVj7M1l9Ef/4+P4VgIXMnwo002ryqBf0v0="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-mathml_1.2110112305.0_1634038863123_0.7726238856979983"},"_hasShrinkwrap":false},"1.2110121825.0":{"name":"@ampproject/amp-mathml","version":"1.2110121825.0","description":"AMP HTML amp-mathml Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-mathml/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-mathml/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento MathML\n\n## Usage\n\nRenders a MathML formula in an iframe.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-mathml>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-mathml\n```\n\n```javascript\nimport '@ampproject/bento-mathml';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\nThe example below contains an `bento-mathml` with three sections. The\n`expanded` attribute on the third section expands it on page load.\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/custom-elements-polyfill.js\"></script>\n  <script async src=\"https://cdn.ampproject.org/v0/bento-mathml-1.0.js\"></script>\n  <link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/bento-mathml-1.0.css\">\n</head>\n<body>\n\n    <h2>The Quadratic Formula</h2>\n    <bento-mathml style=\"height: 40px\" data-formula=\"\\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\]\"></bento-mathml>\n\n    <h2>Cauchy's Integral Formula</h2>\n    <bento-mathml style=\"height: 41px\" data-formula=\"\\[f(a) = \\frac{1}{2\\pi i} \\oint\\frac{f(z)}{z-a}dz\\]\"></bento-mathml>\n\n    <h2>Double angle formula for Cosines</h2>\n    <bento-mathml style=\"height: 19px\" data-formula=\"\\[cos(θ+φ)=\\cos(θ)\\cos(φ)−\\sin(θ)\\sin(φ)\\]\"></bento-mathml>\n\n    <h2>Inline formula</h2>\n    <p>\n      This is an example of a formula of <bento-mathml style=\"height: 11px; width: 8px\" inline data-formula=\"`x`\"></bento-mathml>, <bento-mathml style=\"height: 40px; width: 147px\" inline data-formula=\"\\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\]\"></bento-mathml> placed inline in the middle of a block of text. <bento-mathml style=\"height: 19px; width: 72px\" inline data-formula=\"\\( \\cos(θ+φ) \\)\"\n      ></bento-mathml> This shows how the formula will fit inside a block of text and can be styled with CSS.\n    </p>\n</body>\n```\n\n[/example]\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/bento-mathml-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  amp-mathml {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Attributes\n\n##### `data-formula` (required)\n\nSpecifies the formula to render.\n\n##### `inline` (optional)\n\nIf specified, the component renders inline (`inline-block` in CSS).\n\n##### `title` (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"MathML formula\"`.\n\n#### Styling\n\nYou may use the `bento-mathml` element selector to style the accordion freely.\n\n### Preact/React Component\n\nThe examples below demonstrates use of the `<BentoMathml>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-mathml\n```\n\n```javascript\nimport React from 'react';\nimport { BentoMathml } from '@ampproject/bento-mathml/react';\nimport '@ampproject/bento-mathml/styles.css';\n\nfunction App() {\n  return (\n    <h2>The Quadratic Formula</h2>\n    <BentoMathml style={{height: 40}} formula=\"\\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\]\"></BentoMathml>\n\n    <h2>Cauchy's Integral Formula</h2>\n    <BentoMathml style={{height: 41}} formula=\"\\[f(a) = \\frac{1}{2\\pi i} \\oint\\frac{f(z)}{z-a}dz\\]\"></BentoMathml>\n\n    <h2>Double angle formula for Cosines</h2>\n    <BentoMathml style={{height: 19}} formula=\"\\[cos(θ+φ)=\\cos(θ)\\cos(φ)−\\sin(θ)\\sin(φ)\\]\"></BentoMathml>\n\n    <h2>Inline formula</h2>\n    <p>\n      This is an example of a formula of <BentoMathml style={{height: 11, width: 8}} inline formula=\"`x`\"></BentoMathml>, <BentoMathml style={{height: 40, width: 147}} inline formula=\"\\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\]\"></BentoMathml> placed inline in the middle of a block of text. <BentoMathml style={{height: 19, width: 72}} inline formula=\"\\( \\cos(θ+φ) \\)\"\n      ></BentoMathml> This shows how the formula will fit inside a block of text and can be styled with CSS.\n    </p>\n  );\n}\n```\n\n[/example]\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoMathml` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoMathml style={{width: '300px', height: '100px'}}>\n  ...\n</BentoMathml>\n```\n\nOr via `className`:\n\n```jsx\n<BentoMathml className='custom-styles'>\n  ...\n</BentoMathml>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n  height: 40px;\n  width: 147px;\n}\n```\n\n#### Props\n\n##### `formula` (required)\n\nSpecifies the formula to render.\n\n##### `inline` (optional)\n\nIf specified, the component renders inline (`inline-block` in CSS).\n\n##### `title` (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"MathML formula\"`.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-mathml@1.2110121825.0","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-lh6m2WjuIG1RHFPg+s2g/qYGg66sTUKq6sxLCDWQQcaXBoj8H7HzIatNWOlUHogbylpsVXMDonRHJKnazHGh3g==","shasum":"6bd7396a6a02a6da8b5a88962c78cbd8022f4356","tarball":"https://registry.npmjs.org/@ampproject/amp-mathml/-/amp-mathml-1.2110121825.0.tgz","fileCount":20,"unpackedSize":1013365,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDpKdfcNeqGgscRXNxeXQsjW5ANNITQMCvOwlCsRLRaTwIhAMGJgaRTjjFHYtIVzJinfNjtNz5z891Bom34u8YxLFJD"}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-mathml_1.2110121825.0_1634124367886_0.9787882988369165"},"_hasShrinkwrap":false},"1.2110011758.0":{"name":"@ampproject/amp-mathml","version":"1.2110011758.0","description":"AMP HTML amp-mathml Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-mathml/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-mathml/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-mathml@1.2110011758.0","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-AShJbbM3zva6poqfQaWI1adf91jgtNycL0Lj1x2PYK64UOP/hNm6eAg0bYagzJVaqsGwOuk9Iy52eYFUj6JzLw==","shasum":"39ce52f76745d28dfd2d470070ba53c3007b813f","tarball":"https://registry.npmjs.org/@ampproject/amp-mathml/-/amp-mathml-1.2110011758.0.tgz","fileCount":20,"unpackedSize":1013365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzFR4CRA9TVsSAnZWagAAU04P/Rar4pOEA5rWX1QdmA5m\nmeGSuCwJUeWICy4AjkKy7novTAXj3Jn3Z/qYdb9Ldr3ST/W4Xtg+q1Rtx+kQ\nTlbijXH0nJF1jZc+g1F/eBy+MqLPyVEzxH3iPvmJyBt7cqkQSEdXGESzJmrT\nhJfJyCmdRotemK7717NY1NCdq+uDPPkixtjB8ykgz78EAmBUPtcV8siqUdkY\nQZsbQ74rgeiBuhZLxaoKLQwWSxGue+6mwPyMrLKoe4u8p9lXIxiwrseb1ANT\nzZQz0amliKNXIjQtsHtroKXx0p1V+2qCdO4R9Jr4g54FtL7YKnvzq0pZXF9u\ney/ZBXSAp92T6AoFCiZkf25mHDcaIPQmxVIt4cbmAlJjIAIyPIFk1Dxx4jJb\nxPJTXd7OpCuSnBuTCL9090RjACTxhuvRnI/GvtHo+XwuCF/3QiW+vMdCd0wy\nSYCcI9i/Slij9OEM+zZ6WCem9SvcceQt3xacrceWjwgE6BPgQjIPhG3tw010\n0qKePezB+uJ1lvsW9WOS9P0V1sVgspCPWT4Bnoiz57zT45wHOYy8M+hcVsYc\nu+33M1OP+DV6ReOiQpOQC+I4TYH/LuLeuk8dZ2gEbkJOJ3jfs6a+fefU52h0\nBm5Z8/z7j6Xt6Q/kk/uT98e9pqKe0eXkckk0VFADTtdHBhUbbMaX39rWvw/p\n699S\r\n=cDlq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGF6mX0IWD014QRC7WgLBk+SNGRRUEuC+fODzDeFUQiXAiEA0cHe8B8hQZmi97Nv+MpwM2JCXdxA3Akq6dWDVi/kLtQ="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-mathml_1.2110011758.0_1634221210306_0.33286951449365576"},"_hasShrinkwrap":false,"deprecated":"See @bentoproject/mathml"},"1.2110142235.0":{"name":"@ampproject/amp-mathml","version":"1.2110142235.0","description":"AMP HTML amp-mathml Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-mathml/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-mathml/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento MathML\n\n## Usage\n\nRenders a MathML formula in an iframe.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-mathml>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-mathml\n```\n\n```javascript\nimport '@ampproject/bento-mathml';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\nThe example below contains an `bento-mathml` with three sections. The\n`expanded` attribute on the third section expands it on page load.\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/custom-elements-polyfill.js\"></script>\n  <script async src=\"https://cdn.ampproject.org/v0/bento-mathml-1.0.js\"></script>\n  <link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/bento-mathml-1.0.css\">\n</head>\n<body>\n\n    <h2>The Quadratic Formula</h2>\n    <bento-mathml style=\"height: 40px\" data-formula=\"\\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\]\"></bento-mathml>\n\n    <h2>Cauchy's Integral Formula</h2>\n    <bento-mathml style=\"height: 41px\" data-formula=\"\\[f(a) = \\frac{1}{2\\pi i} \\oint\\frac{f(z)}{z-a}dz\\]\"></bento-mathml>\n\n    <h2>Double angle formula for Cosines</h2>\n    <bento-mathml style=\"height: 19px\" data-formula=\"\\[cos(θ+φ)=\\cos(θ)\\cos(φ)−\\sin(θ)\\sin(φ)\\]\"></bento-mathml>\n\n    <h2>Inline formula</h2>\n    <p>\n      This is an example of a formula of <bento-mathml style=\"height: 11px; width: 8px\" inline data-formula=\"`x`\"></bento-mathml>, <bento-mathml style=\"height: 40px; width: 147px\" inline data-formula=\"\\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\]\"></bento-mathml> placed inline in the middle of a block of text. <bento-mathml style=\"height: 19px; width: 72px\" inline data-formula=\"\\( \\cos(θ+φ) \\)\"\n      ></bento-mathml> This shows how the formula will fit inside a block of text and can be styled with CSS.\n    </p>\n</body>\n```\n\n[/example]\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/bento-mathml-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  amp-mathml {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Attributes\n\n##### `data-formula` (required)\n\nSpecifies the formula to render.\n\n##### `inline` (optional)\n\nIf specified, the component renders inline (`inline-block` in CSS).\n\n##### `title` (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"MathML formula\"`.\n\n#### Styling\n\nYou may use the `bento-mathml` element selector to style the accordion freely.\n\n### Preact/React Component\n\nThe examples below demonstrates use of the `<BentoMathml>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-mathml\n```\n\n```javascript\nimport React from 'react';\nimport { BentoMathml } from '@ampproject/bento-mathml/react';\nimport '@ampproject/bento-mathml/styles.css';\n\nfunction App() {\n  return (\n    <h2>The Quadratic Formula</h2>\n    <BentoMathml style={{height: 40}} formula=\"\\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\]\"></BentoMathml>\n\n    <h2>Cauchy's Integral Formula</h2>\n    <BentoMathml style={{height: 41}} formula=\"\\[f(a) = \\frac{1}{2\\pi i} \\oint\\frac{f(z)}{z-a}dz\\]\"></BentoMathml>\n\n    <h2>Double angle formula for Cosines</h2>\n    <BentoMathml style={{height: 19}} formula=\"\\[cos(θ+φ)=\\cos(θ)\\cos(φ)−\\sin(θ)\\sin(φ)\\]\"></BentoMathml>\n\n    <h2>Inline formula</h2>\n    <p>\n      This is an example of a formula of <BentoMathml style={{height: 11, width: 8}} inline formula=\"`x`\"></BentoMathml>, <BentoMathml style={{height: 40, width: 147}} inline formula=\"\\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\]\"></BentoMathml> placed inline in the middle of a block of text. <BentoMathml style={{height: 19, width: 72}} inline formula=\"\\( \\cos(θ+φ) \\)\"\n      ></BentoMathml> This shows how the formula will fit inside a block of text and can be styled with CSS.\n    </p>\n  );\n}\n```\n\n[/example]\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoMathml` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoMathml style={{width: '300px', height: '100px'}}>\n  ...\n</BentoMathml>\n```\n\nOr via `className`:\n\n```jsx\n<BentoMathml className='custom-styles'>\n  ...\n</BentoMathml>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n  height: 40px;\n  width: 147px;\n}\n```\n\n#### Props\n\n##### `formula` (required)\n\nSpecifies the formula to render.\n\n##### `inline` (optional)\n\nIf specified, the component renders inline (`inline-block` in CSS).\n\n##### `title` (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"MathML formula\"`.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-mathml@1.2110142235.0","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-tJPfPUIYfKWyoCvD7iOP1Kac2hty+DmcBkHgaj2i3gATeG7u3FjEsLY0goeCQ0AdmkphOzVYf2gh00j9zb20gw==","shasum":"4cfc060624c920571eabbd9633fe6f621b5a9c36","tarball":"https://registry.npmjs.org/@ampproject/amp-mathml/-/amp-mathml-1.2110142235.0.tgz","fileCount":20,"unpackedSize":1013365,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFbRYBXUm7aD86zU/669EkEeOSM5aFk/oj3kdNMKIGbfAiEAt5kxKWxgM1Kw/kH0hG4Nlzx/2C5Dmx/zq0gD+qLHj+o="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-mathml_1.2110142235.0_1634297926427_0.6252844402602051"},"_hasShrinkwrap":false},"1.2110152252.0":{"name":"@ampproject/amp-mathml","version":"1.2110152252.0","description":"AMP HTML amp-mathml Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-mathml/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-mathml/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento MathML\n\n## Usage\n\nRenders a MathML formula in an iframe.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-mathml>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-mathml\n```\n\n```javascript\nimport '@ampproject/bento-mathml';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\nThe example below contains an `bento-mathml` with three sections. The\n`expanded` attribute on the third section expands it on page load.\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/custom-elements-polyfill.js\"></script>\n  <script async src=\"https://cdn.ampproject.org/v0/bento-mathml-1.0.js\"></script>\n  <link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/bento-mathml-1.0.css\">\n</head>\n<body>\n\n    <h2>The Quadratic Formula</h2>\n    <bento-mathml style=\"height: 40px\" data-formula=\"\\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\]\"></bento-mathml>\n\n    <h2>Cauchy's Integral Formula</h2>\n    <bento-mathml style=\"height: 41px\" data-formula=\"\\[f(a) = \\frac{1}{2\\pi i} \\oint\\frac{f(z)}{z-a}dz\\]\"></bento-mathml>\n\n    <h2>Double angle formula for Cosines</h2>\n    <bento-mathml style=\"height: 19px\" data-formula=\"\\[cos(θ+φ)=\\cos(θ)\\cos(φ)−\\sin(θ)\\sin(φ)\\]\"></bento-mathml>\n\n    <h2>Inline formula</h2>\n    <p>\n      This is an example of a formula of <bento-mathml style=\"height: 11px; width: 8px\" inline data-formula=\"`x`\"></bento-mathml>, <bento-mathml style=\"height: 40px; width: 147px\" inline data-formula=\"\\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\]\"></bento-mathml> placed inline in the middle of a block of text. <bento-mathml style=\"height: 19px; width: 72px\" inline data-formula=\"\\( \\cos(θ+φ) \\)\"\n      ></bento-mathml> This shows how the formula will fit inside a block of text and can be styled with CSS.\n    </p>\n</body>\n```\n\n[/example]\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/bento-mathml-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  amp-mathml {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Attributes\n\n##### `data-formula` (required)\n\nSpecifies the formula to render.\n\n##### `inline` (optional)\n\nIf specified, the component renders inline (`inline-block` in CSS).\n\n##### `title` (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"MathML formula\"`.\n\n#### Styling\n\nYou may use the `bento-mathml` element selector to style the accordion freely.\n\n### Preact/React Component\n\nThe examples below demonstrates use of the `<BentoMathml>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-mathml\n```\n\n```javascript\nimport React from 'react';\nimport { BentoMathml } from '@ampproject/bento-mathml/react';\nimport '@ampproject/bento-mathml/styles.css';\n\nfunction App() {\n  return (\n    <h2>The Quadratic Formula</h2>\n    <BentoMathml style={{height: 40}} formula=\"\\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\]\"></BentoMathml>\n\n    <h2>Cauchy's Integral Formula</h2>\n    <BentoMathml style={{height: 41}} formula=\"\\[f(a) = \\frac{1}{2\\pi i} \\oint\\frac{f(z)}{z-a}dz\\]\"></BentoMathml>\n\n    <h2>Double angle formula for Cosines</h2>\n    <BentoMathml style={{height: 19}} formula=\"\\[cos(θ+φ)=\\cos(θ)\\cos(φ)−\\sin(θ)\\sin(φ)\\]\"></BentoMathml>\n\n    <h2>Inline formula</h2>\n    <p>\n      This is an example of a formula of <BentoMathml style={{height: 11, width: 8}} inline formula=\"`x`\"></BentoMathml>, <BentoMathml style={{height: 40, width: 147}} inline formula=\"\\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\]\"></BentoMathml> placed inline in the middle of a block of text. <BentoMathml style={{height: 19, width: 72}} inline formula=\"\\( \\cos(θ+φ) \\)\"\n      ></BentoMathml> This shows how the formula will fit inside a block of text and can be styled with CSS.\n    </p>\n  );\n}\n```\n\n[/example]\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoMathml` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoMathml style={{width: '300px', height: '100px'}}>\n  ...\n</BentoMathml>\n```\n\nOr via `className`:\n\n```jsx\n<BentoMathml className='custom-styles'>\n  ...\n</BentoMathml>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n  height: 40px;\n  width: 147px;\n}\n```\n\n#### Props\n\n##### `formula` (required)\n\nSpecifies the formula to render.\n\n##### `inline` (optional)\n\nIf specified, the component renders inline (`inline-block` in CSS).\n\n##### `title` (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"MathML formula\"`.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-mathml@1.2110152252.0","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-QLzdMA85Ayt3n8VzZezcsm4nr96Y1sN0rU8wyhSt6oGb2pNFlXtERuzECWwDlABKXwBa6zt4xbWJvPreKJCobA==","shasum":"393be1c8727792e3f253324641080c9d6ece0586","tarball":"https://registry.npmjs.org/@ampproject/amp-mathml/-/amp-mathml-1.2110152252.0.tgz","fileCount":20,"unpackedSize":1013365,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICX+sYCJqqcH7LewTab/05DP0hSaZ3y/Ab2uFHiUtkVwAiBD4d3EvwRuLb2eZ/CU43cFqIIz9hSZh2q0volqAn+1MQ=="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-mathml_1.2110152252.0_1634384337171_0.117677597227553"},"_hasShrinkwrap":false},"1.2110181554.0":{"name":"@ampproject/amp-mathml","version":"1.2110181554.0","description":"AMP HTML amp-mathml Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-mathml/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-mathml/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento MathML\n\n## Usage\n\nRenders a MathML formula in an iframe.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-mathml>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-mathml\n```\n\n```javascript\nimport '@ampproject/bento-mathml';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\nThe example below contains an `bento-mathml` with three sections. The\n`expanded` attribute on the third section expands it on page load.\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/custom-elements-polyfill.js\"></script>\n  <script async src=\"https://cdn.ampproject.org/v0/bento-mathml-1.0.js\"></script>\n  <link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/bento-mathml-1.0.css\">\n</head>\n<body>\n\n    <h2>The Quadratic Formula</h2>\n    <bento-mathml style=\"height: 40px\" data-formula=\"\\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\]\"></bento-mathml>\n\n    <h2>Cauchy's Integral Formula</h2>\n    <bento-mathml style=\"height: 41px\" data-formula=\"\\[f(a) = \\frac{1}{2\\pi i} \\oint\\frac{f(z)}{z-a}dz\\]\"></bento-mathml>\n\n    <h2>Double angle formula for Cosines</h2>\n    <bento-mathml style=\"height: 19px\" data-formula=\"\\[cos(θ+φ)=\\cos(θ)\\cos(φ)−\\sin(θ)\\sin(φ)\\]\"></bento-mathml>\n\n    <h2>Inline formula</h2>\n    <p>\n      This is an example of a formula of <bento-mathml style=\"height: 11px; width: 8px\" inline data-formula=\"`x`\"></bento-mathml>, <bento-mathml style=\"height: 40px; width: 147px\" inline data-formula=\"\\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\]\"></bento-mathml> placed inline in the middle of a block of text. <bento-mathml style=\"height: 19px; width: 72px\" inline data-formula=\"\\( \\cos(θ+φ) \\)\"\n      ></bento-mathml> This shows how the formula will fit inside a block of text and can be styled with CSS.\n    </p>\n</body>\n```\n\n[/example]\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/bento-mathml-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  amp-mathml {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Attributes\n\n##### `data-formula` (required)\n\nSpecifies the formula to render.\n\n##### `inline` (optional)\n\nIf specified, the component renders inline (`inline-block` in CSS).\n\n##### `title` (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"MathML formula\"`.\n\n#### Styling\n\nYou may use the `bento-mathml` element selector to style the accordion freely.\n\n### Preact/React Component\n\nThe examples below demonstrates use of the `<BentoMathml>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-mathml\n```\n\n```javascript\nimport React from 'react';\nimport { BentoMathml } from '@ampproject/bento-mathml/react';\nimport '@ampproject/bento-mathml/styles.css';\n\nfunction App() {\n  return (\n    <h2>The Quadratic Formula</h2>\n    <BentoMathml style={{height: 40}} formula=\"\\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\]\"></BentoMathml>\n\n    <h2>Cauchy's Integral Formula</h2>\n    <BentoMathml style={{height: 41}} formula=\"\\[f(a) = \\frac{1}{2\\pi i} \\oint\\frac{f(z)}{z-a}dz\\]\"></BentoMathml>\n\n    <h2>Double angle formula for Cosines</h2>\n    <BentoMathml style={{height: 19}} formula=\"\\[cos(θ+φ)=\\cos(θ)\\cos(φ)−\\sin(θ)\\sin(φ)\\]\"></BentoMathml>\n\n    <h2>Inline formula</h2>\n    <p>\n      This is an example of a formula of <BentoMathml style={{height: 11, width: 8}} inline formula=\"`x`\"></BentoMathml>, <BentoMathml style={{height: 40, width: 147}} inline formula=\"\\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\]\"></BentoMathml> placed inline in the middle of a block of text. <BentoMathml style={{height: 19, width: 72}} inline formula=\"\\( \\cos(θ+φ) \\)\"\n      ></BentoMathml> This shows how the formula will fit inside a block of text and can be styled with CSS.\n    </p>\n  );\n}\n```\n\n[/example]\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoMathml` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoMathml style={{width: '300px', height: '100px'}}>\n  ...\n</BentoMathml>\n```\n\nOr via `className`:\n\n```jsx\n<BentoMathml className='custom-styles'>\n  ...\n</BentoMathml>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n  height: 40px;\n  width: 147px;\n}\n```\n\n#### Props\n\n##### `formula` (required)\n\nSpecifies the formula to render.\n\n##### `inline` (optional)\n\nIf specified, the component renders inline (`inline-block` in CSS).\n\n##### `title` (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"MathML formula\"`.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-mathml@1.2110181554.0","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-lieU9IBAurKC5sCnelC3qYCVFCqVGLpeV/6fiR2EKPmlluHgMbB/556yqlrjzpgr4R/Ge1oEUdpmmvayp85OPQ==","shasum":"bdf66d374399bc1993df17265463beff837487f8","tarball":"https://registry.npmjs.org/@ampproject/amp-mathml/-/amp-mathml-1.2110181554.0.tgz","fileCount":20,"unpackedSize":1013365,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBi8BY87WA9n83z9btpmMYybJ63itd0FQ6/3FTuMr1j/AiEA4hmBtAzZLS+y1tM97jUsYorNgo8NUpJojmhRKbMJaEw="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-mathml_1.2110181554.0_1634644413006_0.8011874909404479"},"_hasShrinkwrap":false},"1.2110082201.1":{"name":"@ampproject/amp-mathml","version":"1.2110082201.1","description":"AMP HTML amp-mathml Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-mathml/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-mathml/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-mathml@1.2110082201.1","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-H2z0JxeFzA7uBgUh5Lurx6OA1qeHRCDhsz2wFTicwrSO4b2Vfu5JSTIFXjKmf0PfbXgIiSIDy1VyUU9s7CrUkA==","shasum":"9cfca0da430a226c9b410c28c5c9045daa06e0c1","tarball":"https://registry.npmjs.org/@ampproject/amp-mathml/-/amp-mathml-1.2110082201.1.tgz","fileCount":20,"unpackedSize":1013365,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGcocu6CL/UlpzAjOpmU+wP6PIeDd2pSucJpduH1qmjcAiEAqtMQhUfRNl6isdQdS+d0mv7a5cA1XrWXcitT/uBdrQk="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-mathml_1.2110082201.1_1634664088455_0.7103349487926784"},"_hasShrinkwrap":false},"1.2110192227.0":{"name":"@ampproject/amp-mathml","version":"1.2110192227.0","description":"AMP HTML amp-mathml Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-mathml/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-mathml/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento MathML\n\n## Usage\n\nRenders a MathML formula in an iframe.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-mathml>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-mathml\n```\n\n```javascript\nimport '@ampproject/bento-mathml';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\nThe example below contains an `bento-mathml` with three sections. The\n`expanded` attribute on the third section expands it on page load.\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/custom-elements-polyfill.js\"></script>\n  <script async src=\"https://cdn.ampproject.org/v0/bento-mathml-1.0.js\"></script>\n  <link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/bento-mathml-1.0.css\">\n</head>\n<body>\n\n    <h2>The Quadratic Formula</h2>\n    <bento-mathml style=\"height: 40px\" data-formula=\"\\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\]\"></bento-mathml>\n\n    <h2>Cauchy's Integral Formula</h2>\n    <bento-mathml style=\"height: 41px\" data-formula=\"\\[f(a) = \\frac{1}{2\\pi i} \\oint\\frac{f(z)}{z-a}dz\\]\"></bento-mathml>\n\n    <h2>Double angle formula for Cosines</h2>\n    <bento-mathml style=\"height: 19px\" data-formula=\"\\[cos(θ+φ)=\\cos(θ)\\cos(φ)−\\sin(θ)\\sin(φ)\\]\"></bento-mathml>\n\n    <h2>Inline formula</h2>\n    <p>\n      This is an example of a formula of <bento-mathml style=\"height: 11px; width: 8px\" inline data-formula=\"`x`\"></bento-mathml>, <bento-mathml style=\"height: 40px; width: 147px\" inline data-formula=\"\\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\]\"></bento-mathml> placed inline in the middle of a block of text. <bento-mathml style=\"height: 19px; width: 72px\" inline data-formula=\"\\( \\cos(θ+φ) \\)\"\n      ></bento-mathml> This shows how the formula will fit inside a block of text and can be styled with CSS.\n    </p>\n</body>\n```\n\n[/example]\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/bento-mathml-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  amp-mathml {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Attributes\n\n##### `data-formula` (required)\n\nSpecifies the formula to render.\n\n##### `inline` (optional)\n\nIf specified, the component renders inline (`inline-block` in CSS).\n\n##### `title` (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"MathML formula\"`.\n\n#### Styling\n\nYou may use the `bento-mathml` element selector to style the accordion freely.\n\n### Preact/React Component\n\nThe examples below demonstrates use of the `<BentoMathml>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-mathml\n```\n\n```javascript\nimport React from 'react';\nimport { BentoMathml } from '@ampproject/bento-mathml/react';\nimport '@ampproject/bento-mathml/styles.css';\n\nfunction App() {\n  return (\n    <h2>The Quadratic Formula</h2>\n    <BentoMathml style={{height: 40}} formula=\"\\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\]\"></BentoMathml>\n\n    <h2>Cauchy's Integral Formula</h2>\n    <BentoMathml style={{height: 41}} formula=\"\\[f(a) = \\frac{1}{2\\pi i} \\oint\\frac{f(z)}{z-a}dz\\]\"></BentoMathml>\n\n    <h2>Double angle formula for Cosines</h2>\n    <BentoMathml style={{height: 19}} formula=\"\\[cos(θ+φ)=\\cos(θ)\\cos(φ)−\\sin(θ)\\sin(φ)\\]\"></BentoMathml>\n\n    <h2>Inline formula</h2>\n    <p>\n      This is an example of a formula of <BentoMathml style={{height: 11, width: 8}} inline formula=\"`x`\"></BentoMathml>, <BentoMathml style={{height: 40, width: 147}} inline formula=\"\\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\]\"></BentoMathml> placed inline in the middle of a block of text. <BentoMathml style={{height: 19, width: 72}} inline formula=\"\\( \\cos(θ+φ) \\)\"\n      ></BentoMathml> This shows how the formula will fit inside a block of text and can be styled with CSS.\n    </p>\n  );\n}\n```\n\n[/example]\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoMathml` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoMathml style={{width: '300px', height: '100px'}}>\n  ...\n</BentoMathml>\n```\n\nOr via `className`:\n\n```jsx\n<BentoMathml className='custom-styles'>\n  ...\n</BentoMathml>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n  height: 40px;\n  width: 147px;\n}\n```\n\n#### Props\n\n##### `formula` (required)\n\nSpecifies the formula to render.\n\n##### `inline` (optional)\n\nIf specified, the component renders inline (`inline-block` in CSS).\n\n##### `title` (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"MathML formula\"`.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-mathml@1.2110192227.0","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-2rQ7OENh2AlHs1PTnj7M3qkxgDOFjIlAQbOqPACZZN4Wf20i+XjC74wgnFr3D7+nABA4EZZJHpyE4g1PgIUsng==","shasum":"9fee47c3debb5f802398654ba5d5576a4e98d051","tarball":"https://registry.npmjs.org/@ampproject/amp-mathml/-/amp-mathml-1.2110192227.0.tgz","fileCount":20,"unpackedSize":1013365,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGa3OJLEB+u6B0J3L4PN4QcNZSKJIJmocTzKxI1yvVi3AiEA3TI/PM3RXrJtf4mJIVaUOkNVaGJWrJ/18MbncdK8VJ0="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-mathml_1.2110192227.0_1634729940380_0.8777848877755212"},"_hasShrinkwrap":false},"1.2110082201.2":{"name":"@ampproject/amp-mathml","version":"1.2110082201.2","description":"AMP HTML amp-mathml Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-mathml/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-mathml/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-mathml@1.2110082201.2","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-GdY+7H3tktp10mJvo5bFhh9eFp7vWnghju41QRd9gc4RDwUTwId3TjfJdWwLdj/OW1CTnUpGp+Zw6H1PbhFxEw==","shasum":"9f6f947afd3310450560bcb4b3aeaa7a1a4a2fba","tarball":"https://registry.npmjs.org/@ampproject/amp-mathml/-/amp-mathml-1.2110082201.2.tgz","fileCount":20,"unpackedSize":1013365,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHUo6m3LLRtUD+GEwTT49sqJlaBolLI20FEzFGgfz25lAiEArfhGjzk4v8tp2chKxYA9UXTBH0upgEj4vQYq9w3BAb8="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-mathml_1.2110082201.2_1634768175247_0.06335828808271349"},"_hasShrinkwrap":false},"1.2110202310.0":{"name":"@ampproject/amp-mathml","version":"1.2110202310.0","description":"AMP HTML amp-mathml Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-mathml/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-mathml/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento MathML\n\n## Usage\n\nRenders a MathML formula in an iframe.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-mathml>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-mathml\n```\n\n```javascript\nimport '@ampproject/bento-mathml';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\nThe example below contains an `bento-mathml` with three sections. The\n`expanded` attribute on the third section expands it on page load.\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <script async src=\"https://cdn.ampproject.org/bento.js\"></script>\n  <script async src=\"https://cdn.ampproject.org/v0/bento-mathml-1.0.js\"></script>\n  <link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/bento-mathml-1.0.css\">\n</head>\n<body>\n\n    <h2>The Quadratic Formula</h2>\n    <bento-mathml style=\"height: 40px\" data-formula=\"\\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\]\"></bento-mathml>\n\n    <h2>Cauchy's Integral Formula</h2>\n    <bento-mathml style=\"height: 41px\" data-formula=\"\\[f(a) = \\frac{1}{2\\pi i} \\oint\\frac{f(z)}{z-a}dz\\]\"></bento-mathml>\n\n    <h2>Double angle formula for Cosines</h2>\n    <bento-mathml style=\"height: 19px\" data-formula=\"\\[cos(θ+φ)=\\cos(θ)\\cos(φ)−\\sin(θ)\\sin(φ)\\]\"></bento-mathml>\n\n    <h2>Inline formula</h2>\n    <p>\n      This is an example of a formula of <bento-mathml style=\"height: 11px; width: 8px\" inline data-formula=\"`x`\"></bento-mathml>, <bento-mathml style=\"height: 40px; width: 147px\" inline data-formula=\"\\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\]\"></bento-mathml> placed inline in the middle of a block of text. <bento-mathml style=\"height: 19px; width: 72px\" inline data-formula=\"\\( \\cos(θ+φ) \\)\"\n      ></bento-mathml> This shows how the formula will fit inside a block of text and can be styled with CSS.\n    </p>\n</body>\n```\n\n[/example]\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/bento-mathml-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  amp-mathml {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Attributes\n\n##### `data-formula` (required)\n\nSpecifies the formula to render.\n\n##### `inline` (optional)\n\nIf specified, the component renders inline (`inline-block` in CSS).\n\n##### `title` (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"MathML formula\"`.\n\n#### Styling\n\nYou may use the `bento-mathml` element selector to style the accordion freely.\n\n### Preact/React Component\n\nThe examples below demonstrates use of the `<BentoMathml>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-mathml\n```\n\n```javascript\nimport React from 'react';\nimport { BentoMathml } from '@ampproject/bento-mathml/react';\nimport '@ampproject/bento-mathml/styles.css';\n\nfunction App() {\n  return (\n    <h2>The Quadratic Formula</h2>\n    <BentoMathml style={{height: 40}} formula=\"\\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\]\"></BentoMathml>\n\n    <h2>Cauchy's Integral Formula</h2>\n    <BentoMathml style={{height: 41}} formula=\"\\[f(a) = \\frac{1}{2\\pi i} \\oint\\frac{f(z)}{z-a}dz\\]\"></BentoMathml>\n\n    <h2>Double angle formula for Cosines</h2>\n    <BentoMathml style={{height: 19}} formula=\"\\[cos(θ+φ)=\\cos(θ)\\cos(φ)−\\sin(θ)\\sin(φ)\\]\"></BentoMathml>\n\n    <h2>Inline formula</h2>\n    <p>\n      This is an example of a formula of <BentoMathml style={{height: 11, width: 8}} inline formula=\"`x`\"></BentoMathml>, <BentoMathml style={{height: 40, width: 147}} inline formula=\"\\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\]\"></BentoMathml> placed inline in the middle of a block of text. <BentoMathml style={{height: 19, width: 72}} inline formula=\"\\( \\cos(θ+φ) \\)\"\n      ></BentoMathml> This shows how the formula will fit inside a block of text and can be styled with CSS.\n    </p>\n  );\n}\n```\n\n[/example]\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoMathml` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoMathml style={{width: '300px', height: '100px'}}>\n  ...\n</BentoMathml>\n```\n\nOr via `className`:\n\n```jsx\n<BentoMathml className='custom-styles'>\n  ...\n</BentoMathml>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n  height: 40px;\n  width: 147px;\n}\n```\n\n#### Props\n\n##### `formula` (required)\n\nSpecifies the formula to render.\n\n##### `inline` (optional)\n\nIf specified, the component renders inline (`inline-block` in CSS).\n\n##### `title` (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"MathML formula\"`.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-mathml@1.2110202310.0","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-MUScfjM0cFCvzHaa8usn9X0aKtZ6yCf9i+/+Tas5IkHNSr34x5/2TJV335epAG9bxX7KaKxUZyCRHbCSJ1/Wkw==","shasum":"90c372a1db7a020ed371d9321539d41e3575fb3f","tarball":"https://registry.npmjs.org/@ampproject/amp-mathml/-/amp-mathml-1.2110202310.0.tgz","fileCount":20,"unpackedSize":1013352,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHXU5dyauPqw2bGKcvXc12vxiAGCKMWnoekyXbnkuXksAiEA8vARP+/BWhv/OOCCzrPxa/4NOCAsYKnutbjT0urtSSc="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-mathml_1.2110202310.0_1634815478719_0.9836024870474067"},"_hasShrinkwrap":false},"1.2110212130.0":{"name":"@ampproject/amp-mathml","version":"1.2110212130.0","description":"AMP HTML amp-mathml Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-mathml/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-mathml/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento MathML\n\n## Usage\n\nRenders a MathML formula in an iframe.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-mathml>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-mathml\n```\n\n```javascript\nimport '@ampproject/bento-mathml';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\nThe example below contains an `bento-mathml` with three sections. The\n`expanded` attribute on the third section expands it on page load.\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <script async src=\"https://cdn.ampproject.org/bento.js\"></script>\n  <script async src=\"https://cdn.ampproject.org/v0/bento-mathml-1.0.js\"></script>\n  <link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/bento-mathml-1.0.css\">\n</head>\n<body>\n\n    <h2>The Quadratic Formula</h2>\n    <bento-mathml style=\"height: 40px\" data-formula=\"\\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\]\"></bento-mathml>\n\n    <h2>Cauchy's Integral Formula</h2>\n    <bento-mathml style=\"height: 41px\" data-formula=\"\\[f(a) = \\frac{1}{2\\pi i} \\oint\\frac{f(z)}{z-a}dz\\]\"></bento-mathml>\n\n    <h2>Double angle formula for Cosines</h2>\n    <bento-mathml style=\"height: 19px\" data-formula=\"\\[cos(θ+φ)=\\cos(θ)\\cos(φ)−\\sin(θ)\\sin(φ)\\]\"></bento-mathml>\n\n    <h2>Inline formula</h2>\n    <p>\n      This is an example of a formula of <bento-mathml style=\"height: 11px; width: 8px\" inline data-formula=\"`x`\"></bento-mathml>, <bento-mathml style=\"height: 40px; width: 147px\" inline data-formula=\"\\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\]\"></bento-mathml> placed inline in the middle of a block of text. <bento-mathml style=\"height: 19px; width: 72px\" inline data-formula=\"\\( \\cos(θ+φ) \\)\"\n      ></bento-mathml> This shows how the formula will fit inside a block of text and can be styled with CSS.\n    </p>\n</body>\n```\n\n[/example]\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/bento-mathml-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  amp-mathml {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Attributes\n\n##### `data-formula` (required)\n\nSpecifies the formula to render.\n\n##### `inline` (optional)\n\nIf specified, the component renders inline (`inline-block` in CSS).\n\n##### `title` (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"MathML formula\"`.\n\n#### Styling\n\nYou may use the `bento-mathml` element selector to style the accordion freely.\n\n### Preact/React Component\n\nThe examples below demonstrates use of the `<BentoMathml>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-mathml\n```\n\n```javascript\nimport React from 'react';\nimport { BentoMathml } from '@ampproject/bento-mathml/react';\nimport '@ampproject/bento-mathml/styles.css';\n\nfunction App() {\n  return (\n    <h2>The Quadratic Formula</h2>\n    <BentoMathml style={{height: 40}} formula=\"\\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\]\"></BentoMathml>\n\n    <h2>Cauchy's Integral Formula</h2>\n    <BentoMathml style={{height: 41}} formula=\"\\[f(a) = \\frac{1}{2\\pi i} \\oint\\frac{f(z)}{z-a}dz\\]\"></BentoMathml>\n\n    <h2>Double angle formula for Cosines</h2>\n    <BentoMathml style={{height: 19}} formula=\"\\[cos(θ+φ)=\\cos(θ)\\cos(φ)−\\sin(θ)\\sin(φ)\\]\"></BentoMathml>\n\n    <h2>Inline formula</h2>\n    <p>\n      This is an example of a formula of <BentoMathml style={{height: 11, width: 8}} inline formula=\"`x`\"></BentoMathml>, <BentoMathml style={{height: 40, width: 147}} inline formula=\"\\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\]\"></BentoMathml> placed inline in the middle of a block of text. <BentoMathml style={{height: 19, width: 72}} inline formula=\"\\( \\cos(θ+φ) \\)\"\n      ></BentoMathml> This shows how the formula will fit inside a block of text and can be styled with CSS.\n    </p>\n  );\n}\n```\n\n[/example]\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoMathml` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoMathml style={{width: '300px', height: '100px'}}>\n  ...\n</BentoMathml>\n```\n\nOr via `className`:\n\n```jsx\n<BentoMathml className='custom-styles'>\n  ...\n</BentoMathml>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n  height: 40px;\n  width: 147px;\n}\n```\n\n#### Props\n\n##### `formula` (required)\n\nSpecifies the formula to render.\n\n##### `inline` (optional)\n\nIf specified, the component renders inline (`inline-block` in CSS).\n\n##### `title` (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"MathML formula\"`.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-mathml@1.2110212130.0","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-6Win6hAHALDrfgMXcYbXDZ34MOCcMMTFTW/pETESPRCgnJqQwC0caFeWTYBdnRZVx/3u4pxgIbpOck9pYy9zcQ==","shasum":"42270018755476b2c0d56e6c889f86f372ea4940","tarball":"https://registry.npmjs.org/@ampproject/amp-mathml/-/amp-mathml-1.2110212130.0.tgz","fileCount":28,"unpackedSize":2695798,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB5gbQYdwLZdQWSCeiBhdMYvjT+yM/lgrrDh5oBtNZlSAiAml/XJK7q/4va1zE10rMenP/Zy3UDfFhL9LAf42kCLZQ=="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-mathml_1.2110212130.0_1634902261621_0.3636035588827018"},"_hasShrinkwrap":false},"1.2110252343.0":{"name":"@ampproject/amp-mathml","version":"1.2110252343.0","description":"AMP HTML amp-mathml Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":"./web-component","./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-mathml/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-mathml/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento MathML\n\n## Usage\n\nRenders a MathML formula in an iframe.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-mathml>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-mathml\n```\n\n```javascript\nimport '@ampproject/bento-mathml';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\nThe example below contains an `bento-mathml` with three sections. The\n`expanded` attribute on the third section expands it on page load.\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <script async src=\"https://cdn.ampproject.org/bento.js\"></script>\n  <script async src=\"https://cdn.ampproject.org/v0/bento-mathml-1.0.js\"></script>\n  <link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/bento-mathml-1.0.css\">\n</head>\n<body>\n\n    <h2>The Quadratic Formula</h2>\n    <bento-mathml style=\"height: 40px\" data-formula=\"\\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\]\"></bento-mathml>\n\n    <h2>Cauchy's Integral Formula</h2>\n    <bento-mathml style=\"height: 41px\" data-formula=\"\\[f(a) = \\frac{1}{2\\pi i} \\oint\\frac{f(z)}{z-a}dz\\]\"></bento-mathml>\n\n    <h2>Double angle formula for Cosines</h2>\n    <bento-mathml style=\"height: 19px\" data-formula=\"\\[cos(θ+φ)=\\cos(θ)\\cos(φ)−\\sin(θ)\\sin(φ)\\]\"></bento-mathml>\n\n    <h2>Inline formula</h2>\n    <p>\n      This is an example of a formula of <bento-mathml style=\"height: 11px; width: 8px\" inline data-formula=\"`x`\"></bento-mathml>, <bento-mathml style=\"height: 40px; width: 147px\" inline data-formula=\"\\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\]\"></bento-mathml> placed inline in the middle of a block of text. <bento-mathml style=\"height: 19px; width: 72px\" inline data-formula=\"\\( \\cos(θ+φ) \\)\"\n      ></bento-mathml> This shows how the formula will fit inside a block of text and can be styled with CSS.\n    </p>\n</body>\n```\n\n[/example]\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/bento-mathml-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  amp-mathml {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Attributes\n\n##### `data-formula` (required)\n\nSpecifies the formula to render.\n\n##### `inline` (optional)\n\nIf specified, the component renders inline (`inline-block` in CSS).\n\n##### `title` (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"MathML formula\"`.\n\n#### Styling\n\nYou may use the `bento-mathml` element selector to style the accordion freely.\n\n### Preact/React Component\n\nThe examples below demonstrates use of the `<BentoMathml>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-mathml\n```\n\n```javascript\nimport React from 'react';\nimport { BentoMathml } from '@ampproject/bento-mathml/react';\nimport '@ampproject/bento-mathml/styles.css';\n\nfunction App() {\n  return (\n    <h2>The Quadratic Formula</h2>\n    <BentoMathml style={{height: 40}} formula=\"\\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\]\"></BentoMathml>\n\n    <h2>Cauchy's Integral Formula</h2>\n    <BentoMathml style={{height: 41}} formula=\"\\[f(a) = \\frac{1}{2\\pi i} \\oint\\frac{f(z)}{z-a}dz\\]\"></BentoMathml>\n\n    <h2>Double angle formula for Cosines</h2>\n    <BentoMathml style={{height: 19}} formula=\"\\[cos(θ+φ)=\\cos(θ)\\cos(φ)−\\sin(θ)\\sin(φ)\\]\"></BentoMathml>\n\n    <h2>Inline formula</h2>\n    <p>\n      This is an example of a formula of <BentoMathml style={{height: 11, width: 8}} inline formula=\"`x`\"></BentoMathml>, <BentoMathml style={{height: 40, width: 147}} inline formula=\"\\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\]\"></BentoMathml> placed inline in the middle of a block of text. <BentoMathml style={{height: 19, width: 72}} inline formula=\"\\( \\cos(θ+φ) \\)\"\n      ></BentoMathml> This shows how the formula will fit inside a block of text and can be styled with CSS.\n    </p>\n  );\n}\n```\n\n[/example]\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoMathml` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoMathml style={{width: '300px', height: '100px'}}>\n  ...\n</BentoMathml>\n```\n\nOr via `className`:\n\n```jsx\n<BentoMathml className='custom-styles'>\n  ...\n</BentoMathml>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n  height: 40px;\n  width: 147px;\n}\n```\n\n#### Props\n\n##### `formula` (required)\n\nSpecifies the formula to render.\n\n##### `inline` (optional)\n\nIf specified, the component renders inline (`inline-block` in CSS).\n\n##### `title` (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"MathML formula\"`.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-mathml@1.2110252343.0","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-59mhofRjZit2bG3Cx8A+HaMG95xOmPfWn1MBYu5TYvB12zhLLRwgz8CgS/cleaowW9E6MxysScUtu2LdWuWKGA==","shasum":"0c0004d4b53bc47a1009b4185fac32a32534a2a0","tarball":"https://registry.npmjs.org/@ampproject/amp-mathml/-/amp-mathml-1.2110252343.0.tgz","fileCount":28,"unpackedSize":2695735,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCssqZzwR1xh84YrGx4MqSFxLnEVeRbvPPFUrxNaCVKvAIgAnueKNnOWu7dxr7oC09copaTtzggDJZUd7pkmS/6Npk="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-mathml_1.2110252343.0_1635247219388_0.6639924602843175"},"_hasShrinkwrap":false}},"time":{"created":"2021-10-12T11:41:03.062Z","1.2110112305.0":"2021-10-12T11:41:03.290Z","modified":"2022-04-04T13:52:37.894Z","1.2110121825.0":"2021-10-13T11:26:08.015Z","1.2110011758.0":"2021-10-14T14:20:10.531Z","1.2110142235.0":"2021-10-15T11:38:46.630Z","1.2110152252.0":"2021-10-16T11:38:57.461Z","1.2110181554.0":"2021-10-19T11:53:33.218Z","1.2110082201.1":"2021-10-19T17:21:28.637Z","1.2110192227.0":"2021-10-20T11:39:00.544Z","1.2110082201.2":"2021-10-20T22:16:15.549Z","1.2110202310.0":"2021-10-21T11:24:38.949Z","1.2110212130.0":"2021-10-22T11:31:01.887Z","1.2110252343.0":"2021-10-26T11:20:19.620Z"},"maintainers":[{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"choumx","email":"willchou@google.com"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"esth","email":"esther@amp.dev"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"samouri","email":"jzfisgreat@gmail.com"}],"description":"AMP HTML amp-mathml Component","homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-mathml/1.0","repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-mathml/1.0"},"author":{"name":"The AMP HTML Authors"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"license":"Apache-2.0","readme":"","readmeFilename":""}