2c:null 2d:["$","title",null,{"children":"Hello Fluent UI | Alok Pepakayala | Observable"}] 32:[{"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}] 30:{"id":"43c234aea8dd9e8d","slug":"hello-fluent-ui","title":"Hello Fluent UI","thumbnail":"2fcb494e58b8c987ac20bf21dbd7d09df77b08044f42dd5339e41c70172381f3","access_level":"public","create_time":"$D2024-01-26T10:08:53.770Z","update_time":"$D2024-01-29T19:07:50.582Z","view_time":null,"first_public_time":"$D2024-01-26T10:08:53.770Z","has_unpublished_edits":null,"fork":{"id":"73f0a71d25cf19ab","slug":"hello-ant-design","title":"Hello Ant Design","owner":{"id":"ebdd8a722ae381e2","login":"a10k","name":"Alok Pepakayala"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ebdd8a722ae381e2","login":"a10k","name":"Alok Pepakayala","avatar_url":"https://avatars-next.observableusercontent.com/f28a7b5f4fb16a63caaace8a87a531e60bea383d6e9d50e126570c77c0814ba9","tier":"starter_2024"},"version":240,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e594cd7b50bd5352","login":"a10k","name":"Alok Pepakayala","avatar_url":"https://avatars-next.observableusercontent.com/a79accbaf1cb39d92bac556179588a03429b7ed84c64707b7ae8d86c9ffacfc7","tier":null}],"members":[{"type":"individual","id":"e594cd7b50bd5352","login":"a10k","name":"Alok Pepakayala","avatar_url":"https://avatars-next.observableusercontent.com/a79accbaf1cb39d92bac556179588a03429b7ed84c64707b7ae8d86c9ffacfc7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Hello Fluent UI","cells":[{"id":0,"value":"md`# Hello Fluent UI`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"md`Using FluentUI React v9 components in observable notebooks using preact and htm`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"md`## Example`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"md`---\n## Setup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"React = bundle.React","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"ReactDOM = bundle.ReactDOM","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"f9bundle = bundle.f9bundle","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"