30:[{"id":"d254f217c1f322092a2b08beaef357db4d7e8a4fd8c5a15692b4c5cc93025222e70d002ec3215bc99b5a80b68655d30f9854279967e1b3fd7c7d34a8f63887a4","href":"https://static.observableusercontent.com/files/d254f217c1f322092a2b08beaef357db4d7e8a4fd8c5a15692b4c5cc93025222e70d002ec3215bc99b5a80b68655d30f9854279967e1b3fd7c7d34a8f63887a4","name":"cover.png","type":"image/png","lastModified":1706263733770.186,"size":27037},{"id":"1a919f64a5443d605990ea66ab0a425314760a031afb0e0da509eb9d7d95e676183b1530a39ef2b79833440076118dbb01fc7bf17a1f39b0a696f25007a7f482","href":"https://static.observableusercontent.com/files/1a919f64a5443d605990ea66ab0a425314760a031afb0e0da509eb9d7d95e676183b1530a39ef2b79833440076118dbb01fc7bf17a1f39b0a696f25007a7f482","name":"fluent-ui.png","type":"image/png","lastModified":1706265481523.523,"size":8235},{"id":"b503a49f70518e23da9b70c20b31a13a39ce2c0e1b65abe73d5bd9287c99d9fb9830c191d0a04000ff479686cde13104744d949bc120b26cef02ecafda36570c","href":"https://static.observableusercontent.com/files/b503a49f70518e23da9b70c20b31a13a39ce2c0e1b65abe73d5bd9287c99d9fb9830c191d0a04000ff479686cde13104744d949bc120b26cef02ecafda36570c","name":"bundle.js","type":"application/javascript","lastModified":1706552582174.414,"size":3185593},{"id":"a9d16c175be3c8ea90d5bf43828337f00470a8bf1ec4f6e6ff8adf463787cd57465de7690b5cdceba82e76e185e41d89e75df5f2cd8849bdd23e163137c1016f","href":"https://static.observableusercontent.com/files/a9d16c175be3c8ea90d5bf43828337f00470a8bf1ec4f6e6ff8adf463787cd57465de7690b5cdceba82e76e185e41d89e75df5f2cd8849bdd23e163137c1016f","name":"bundle@1.js","type":"application/javascript","lastModified":1706554016600.167,"size":2257720}] 2e:{"title":"Hello Fluent UI","cells":[{"id":0,"value":"md`# Hello Fluent UI`","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"md`Using FluentUI React v9 components in observable notebooks using preact and htm`","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"md`## Example`","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"{\n const dom = html`

`;\n const { FluentProvider, teamsLightTheme, Persona } = f9bundle;\n\n ReactDOM.createRoot(dom).render(\n htm`

\n <${FluentProvider} theme=${teamsLightTheme}>\n <${Persona}\n name=\"Alok Pepakayala\"\n secondaryText=\"Available\"\n presence=${{ status: \"available\" }}\n avatar=${{\n image: {\n src: \"https://avatars.observableusercontent.com/avatar/f28a7b5f4fb16a63caaace8a87a531e60bea383d6e9d50e126570c77c0814ba9\"\n }\n }}\n />\n \n `\n );\n return dom;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":233,"value":"{\n const dom = html`

`;\n const { FluentProvider, teamsLightTheme, Spinner } = f9bundle;\n\n ReactDOM.createRoot(dom).render(\n htm`<${FluentProvider} theme=${teamsLightTheme}>\n <${Spinner} size=\"small\" label=\"Spinner Example\"/>\n `\n );\n return dom;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":224,"value":"{\n //Note: dropdown scrolls to top of the page, unresolved.\n const dom = html`

`;\n const {\n FluentProvider,\n teamsLightTheme,\n Menu,\n MenuItem,\n MenuList,\n MenuPopover,\n MenuTrigger,\n SplitButton\n } = f9bundle;\n\n ReactDOM.createRoot(dom).render(\n htm`<${FluentProvider} theme=${teamsLightTheme}>\n <${Menu} positioning=\"below-end\">\n <${MenuTrigger} disableButtonEnhancement>\n ${(triggerProps) =>\n htm`<${SplitButton}\n menuButton=${triggerProps}\n primaryActionButton=${{ onClick: () => {} }}>\n Split Button Example\n `}\n \n <${MenuPopover}>\n <${MenuList}>\n <${MenuItem}>Item a\n <${MenuItem}>Item b\n \n \n \n `\n );\n return dom;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"md`---\n## Setup`","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"bundle = require(await FileAttachment(\"bundle@1.js\").url()).then((d) => {\n //UMD Bundle created using Rollup\n return {\n f9bundle: window[\"f9bundle\"],\n React: window[\"React\"],\n ReactDOM: window[\"ReactDOM\"]\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"React = bundle.React","pinned":true,"hidden":false,"mode":"ojs"},{"id":195,"value":"ReactDOM = bundle.ReactDOM","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"htm = require(\"https://cdnjs.cloudflare.com/ajax/libs/htm/3.0.4/htm.umd.js\").then(\n (d) => d.bind(React.createElement)\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":205,"value":"f9bundle = bundle.f9bundle","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}