{"_id":"@fluent-blocks/react","_rev":"49-f7e7fb305c17bc14f918281e54cf5c4a","name":"@fluent-blocks/react","dist-tags":{"latest":"9.2.0","next":"9.3.0-next.18"},"versions":{"9.0.0-alpha.1":{"name":"@fluent-blocks/react","version":"9.0.0-alpha.1","repository":"git@github.com:OfficeDev/fluent-blocks.git","authors":["Will Shown ","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","module":"esm/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^6"},"peerDependencies":{"@fluentui/react-components":"latest","@types/react":">=16.8.0 <18.0.0","@types/react-dom":">=16.8.0 <18.0.0","chart.js":"^2.9.4","react":">=16.8.0 <18.0.0","react-dom":">=16.8.0 <18.0.0"},"devDependencies":{"@babel/core":"latest","@fluentui/react-components":"latest","@storybook/addon-actions":"latest","@storybook/addon-essentials":"latest","@storybook/addon-links":"latest","@storybook/addons":"latest","@storybook/react":"latest","@storybook/theming":"latest","@types/chart.js":"^2.9.29","@types/faker":"^5.1.2","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.18","@types/react":">=16.8.0 <18.0.0","@types/react-dom":">=16.8.0 <18.0.0","@types/react-test-renderer":">=16.8.0 <18.0.0","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.19","expect":"latest","faker":"thure/faker.js#v5.1.2","http-proxy-middleware":"latest","just-scripts":"^1.8.0","mocha":"latest","playwright-chromium":"latest","react":">=16.8.0 <18.0.0","react-dom":">=16.8.0 <18.0.0","react-test-renderer":">=16.8.0 <18.0.0","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.0.0-alpha.3","@fluent-blocks/schemas":"9.0.0-alpha.1","lodash":"latest","zod":"latest"},"scripts":{"build":"just-scripts build","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"_id":"@fluent-blocks/react@9.0.0-alpha.1","_integrity":"sha512-lV7zniAh4oe25L8JRNu0qDC0pgpKTHsaYXymCLOjXewyyax401M0NKA0cHc5joqIkdn7e2PcME9k5yFGwN078Q==","_resolved":"/Users/willshown/Projects/fluent-blocks/packages/react/fluent-blocks-react-9.0.0-alpha.1.tgz","_from":"file:fluent-blocks-react-9.0.0-alpha.1.tgz","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-lV7zniAh4oe25L8JRNu0qDC0pgpKTHsaYXymCLOjXewyyax401M0NKA0cHc5joqIkdn7e2PcME9k5yFGwN078Q==","shasum":"500c72099ce73e5e84f78c24c77207c4975ea3a8","tarball":"https://registry.npmjs.org/@fluent-blocks/react/-/react-9.0.0-alpha.1.tgz","fileCount":155,"unpackedSize":505167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOkB2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrIFQ//Zd8xyKtHo2Epl//C6bMPSqXOjW5v/SvheZMyF3alRKvg6eul\r\nmEjrodLchCpI9HtJdRjeiniFV8BbrCnX7jCvKyyIM21HaPFenHGwqJLMGvdf\r\nSCBk2O8U4PPv+20TTKuQjlUAhSJuOpnsKgwFf3PVlP6vperHG2nJ/GtlReoa\r\nEr5BqB7KwhQPAwJcn3eWql3H6YBV0jOl+VL4YuPKqPm9QIHZ+7TKR9xC2kzb\r\naZtSeylkiZJbkgqjoaJcMD5TMjsuTjvYU68oqzyi0CDADwrQnerWbXkwHz3B\r\n7qxiHFVubkd7Rjkrgy0i4BmUJzOW69fnpF/Rvsdo1cGpACZ6oC4I8OIEVCVo\r\no9jNtE1ZjvaLwLA9Rqti0UMEFQtAItY/8wDNs+eM0CnuMLvMvKRvt0LT844T\r\nAwkIGdBbcpcnWVmQH7YCI35SNuI6W3BiFyITu+Oz9UIo+gknSKjNIasPKqDC\r\n47/f287Sh4Go+uSEv6Sth1pECfKu6WoCqgE/qEzzGdOABUf6LCX1WEthlaHP\r\nms1PF0xwJXgltpSXNTVylVzBsix8yBfCcqy3C8uATAzJPFHVCIX36WW461yo\r\nlIRpug0Vv6RF7Ov6YJHWKypcGnGX8QUehbwju1lpav1tIYqnmzuhzK319mAR\r\nhDdm8WlPG0f9EtL/8I6X21SkIULZQKbRkQs=\r\n=e0pO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFDxtOoYCeLn+hT509onvLlnO26Usk17bYumGotxDQN0AiEAv7auXd+xV/P9CX90HM2ClePzCbS8bAs6kfl8vB0YYn4="}]},"_npmUser":{"name":"thure","email":"npm@willshown.com"},"directories":{},"maintainers":[{"name":"thure","email":"npm@willshown.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_9.0.0-alpha.1_1647984758400_0.059538062790564616"},"_hasShrinkwrap":false},"9.0.0-alpha.2":{"name":"@fluent-blocks/react","version":"9.0.0-alpha.2","repository":"git@github.com:OfficeDev/fluent-blocks.git","authors":["Will Shown ","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","module":"esm/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^6"},"peerDependencies":{"@fluentui/react-components":"latest","@types/react":">=16.8.0 <18.0.0","@types/react-dom":">=16.8.0 <18.0.0","chart.js":"^2.9.4","react":">=16.8.0 <18.0.0","react-dom":">=16.8.0 <18.0.0"},"devDependencies":{"@babel/core":"latest","@fluentui/react-components":"latest","@storybook/addon-actions":"latest","@storybook/addon-essentials":"latest","@storybook/addon-links":"latest","@storybook/addons":"latest","@storybook/react":"latest","@storybook/theming":"latest","@types/chart.js":"^2.9.29","@types/faker":"^5.1.2","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.18","@types/react":">=16.8.0 <18.0.0","@types/react-dom":">=16.8.0 <18.0.0","@types/react-test-renderer":">=16.8.0 <18.0.0","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.19","expect":"latest","faker":"thure/faker.js#v5.1.2","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":">=16.8.0 <18.0.0","react-dom":">=16.8.0 <18.0.0","react-test-renderer":">=16.8.0 <18.0.0","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.0.0-alpha.4","@fluent-blocks/schemas":"9.0.0-alpha.3","lodash":"latest"},"scripts":{"build":"just-scripts build","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"readme":"\"Fluent\n\n### [Open Storybook ↗︎][storybook]\n\nFluent Blocks is a React implementation of [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs for app development based on [`@fluentui/react-components`][fluentui-v9]. This project succeeds [`@fluentui/react-teams`][react-teams].\n\nThis package provides a set of components developers can use to build fully interactive & accessible experiences using whatever React coding convention they prefer, rendering experiences that match Fluent & UI Kit designs.\n\n## ⚠️ In active development\n\nThis project’s API is subject to unannounced breaking changes and is not yet on any release cycle.\n\n## Development & contributing\n\nIf you’d like to run the development environment or contribute to this project, please see [the Contributing file](CONTRIBUTING.md).\n\n## Getting started\n\n1. Using TypeScript and an IDE that supports type inspections will make using this project much easier\n2. Since this project is not published to NPM yet, do the following:\n 1. Clone this repo, `cd` to `packages/react` within this repo\n 2. Run your package manager’s `link` command ([npm link](https://docs.npmjs.com/cli/v6/commands/npm-link), [yarn link](https://classic.yarnpkg.com/lang/en/docs/cli/link/), [pnpm link](https://pnpm.io/cli/link))\n 3. `cd` to your project\n 4. Use the same package manager you used earlier to add `@fluentui/react-blocks` to your project\n3. **Make sure to resolve any peer dependency warnings**; currently all peer dependencies are needed at the right versions for this package to work\n4. Use the `View` component to hand off all UI responsibility to this project, or use individual components as you need, whichever suits your needs best.\n\n## How design pattern usage is validated through types\n\nSince the goal of this library is to aid in implementing experiences that conform to [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs and principles, it brings with it those design systems’ opinions. Each component has a concept for what kind of properties & content it accepts, which can be provided in one of two ways:\n\n1. As serializeable **props**, e.g. `{icon: 'fluent', size: 24}`\n1. As a JSX **element**, e.g. ``\n\nThe bolded terms are used in the TypeScript types for the components in this project, e.g. a valid icon instance matches `IconPropsOrElement`, which is either 1) `IconProps`, or 2) `IconElement`.\n\nFor consistency between the two syntaxes, the `children` prop and its implicit nesting equivalent in JSX is avoided in favor of named content props that parallel the serializeable syntax.\n\nSome top-level components like `View` will check the props it was provided and provide a detailed error if the props are incorrect in any way. All other components won’t check for issues and will simply refuse to render unexpected content. In either case, developers can explicitly mark where exceptions should be made using the `Escape` component described below.\n\n## Escaping validation\n\nThese components won’t render a component that has unexpected props or content, unless you use `Escape`. If you feel the need to use a pattern not provided by this project, you can do so using the `Escape` component as a JSX element in any of a component’s content props that aren’t “tightly-bound”, e.g.:\n\n```tsx\n// Only Escape imported from this package will render,\n// so make sure you’ve imported it:\nimport { Section, Escape } from '@fluentui/react-blocks';\n\n\n You can put anything here\n and it will be rendered.\n ,\n ]}\n/>\n```\n\n### Exceptions: tightly bound components\n\nA component may ignore `Escape` only if it is “tightly-bound” with another component. Components are tightly-bound when they make sense only when used together, e.g. `Layout` and `LayoutItem` where `Layout` will only render `LayoutItems` in its `items` prop. If you need to render special content in such a situation, you can either replace the entire parent with `Escape`, or use `Escape` as the _content_ of one of the children.\n\n### Escape inclusively, and share your designs!\n\nMake sure the content you add using `Escape` conforms to [WCAG 2.1][wcag] and is designed inclusively.\n\nIf you would like to share your pattern with the community, [we’d welcome your contribution](CONTRIBUTING.md)! We’d all thank you to submit PR’s that extend this project with your accessible high-quality patterns.\n\n## Concepts\n\nThis library harmonizes the patterns in Fluent and the UI Kit with concepts from web layout & interactivity by delivering components organized into these categories:\n\n- General components based on [formatting context][fmtctx]:\n - `Block` vs `Inline`\n- Specialized clusters of components with shared interactivity considerations:\n - **Media**, e.g.:\n - `Illustration`\n - `Chart`\n - **Inputs**, e.g.:\n - `RadioGroup`\n - `ShortTextInput`\n- **Surfaces**, each of which expect to be unique in a given view\n- **Views**, the top-level components which render an entire UI in a viewport\n\nAny component may also have **Exemplars**, which render the same component but with a specialized API surface optimized for a specific use-case for the pattern, e.g. `Widget` always renders a `Card` though its props are based on the more constrained scope of content for cards in a dashboard from the UI Kit.\n\n## Icons\n\nThis project supports using icons from [`fluentui-system-icons`][fluent-icons] through SVG sprites implemented in [an experimental fork of that project](https://github.com/thure/fluentui-system-icons/tree/master/packages/svg-sprites). The `Icon` component will render an SVG of the appropriate size containing a `use` element with an `href` to the appropriate sprite, e.g.:\n\n```tsx\n// If used wherever `InlineSequence` or `IconPropsOrElement` is accepted,\n// both the props syntax and element syntax will be rendered the same way.\nconst catIcon =\n { icon: 'animal_cat', size: 24, variant: 'outline' } ||\n \n```\n\nThis project currently expects any requests to `/sprites/**` to serve an SVG sprite with the appropriate content, which for the Storybook development server is proxied to a specific release on jsDelivr.\n\nIn your own project, we recommend serving just the sprites you need locally if possible. Do not use proxies for icons in production.\n\n[figma-fluent]: https://www.figma.com/community/file/836828295772957889/Microsoft-Fluent-Web\n[figma-uikit]: https://www.figma.com/community/file/916836509871353159/Microsoft-Teams-UI-Kit\n[fluent-icons]: https://github.com/microsoft/fluentui-system-icons\n[fluentui-v9]: https://www.npmjs.com/package/@fluentui/react-components\n[react-teams]: https://www.npmjs.com/package/@fluentui/react-teams\n[storybook]: https://aka.ms/fluent-blocks-storybook\n[wcag]: https://www.w3.org/TR/WCAG21\n[fmtctx]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow\n","_id":"@fluent-blocks/react@9.0.0-alpha.2","_integrity":"sha512-LtNja6RknfwxY5sNdugH9H+iWo3vSPBP8+kFaXGiltYIIt8PJYQsd/g8SRGeqc72FxE3Z4ENyhuhCZ74qRsb1Q==","_resolved":"/Users/willshown/Projects/fluent-blocks/packages/react/fluent-blocks-react-9.0.0-alpha.2.tgz","_from":"file:fluent-blocks-react-9.0.0-alpha.2.tgz","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-LtNja6RknfwxY5sNdugH9H+iWo3vSPBP8+kFaXGiltYIIt8PJYQsd/g8SRGeqc72FxE3Z4ENyhuhCZ74qRsb1Q==","shasum":"404ba20e936ed26fcbe494459cccc520d5265377","tarball":"https://registry.npmjs.org/@fluent-blocks/react/-/react-9.0.0-alpha.2.tgz","fileCount":299,"unpackedSize":543494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiO6M/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoqiA//U3x03uDWIs+68LzqvWiFJ/o07WMm8CxQUcxocz0OhDv1QiD4\r\nOVbAD///cP4cAfsH5P9Un/EXmcs8+cbAMYPJnJiEG0wySfqXSnRK9HwI9apC\r\nZ0Wr+DJaLYxXW1S2ftQU6AsG28w+gERv5uwKTG/jFjNb3jH5+OicuIM/7/AV\r\nySq0rp5E9Naa8A6oLgElFn+ZJkp+JcjC5TwFXwJliR/SBuCM+qbFX8v/S+tf\r\n6yvJ+TMvXP8YDhbF6CqPuo+nV6bo53Kcfar5+qjWGD0lJvhXsh82R4agbr4h\r\n8px83PK45MvyJgyfp7+Dnob1kQXNbC+yjONoyeK6Wxvs1sFMc5afHy8/qvTs\r\nbB3Y7mxZPo7d/ohKs3mPGE82fvJ2MhOSo5hhQv1dH1ANOCd0HRPfwgAqR51B\r\nPwgbq7HHqKOvakZ6iMT7EceUM36kebLuudXBDkjfRzBjsiokCbwqLxOvcj8V\r\nA4n9zCJHH9sB7MXOXXn/OsiLFf5tUKiQpfn2EDDFH0Png9Ig50nbeJlSy+Vl\r\njhsczs0GpIE5P+hpoe7M7swv0QIVuhQawCP63wJ1YCLhlSu4R2JYqQry41XI\r\nZ8YnSKELmyX9YdefTyPMJ2y0f7KUpogIk3yGhh0mNmlvgwrdYJw0w1BEO7+u\r\nN+s2vu2m6WlpRBRsdcN1X1iNpyC40ODMg+4=\r\n=1M4O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICJtr6nrjEUEkygQM385Hrn5dnljpB4F86eUu7zK8p/gAiEAghuL8BmX5N67QOAGrR1hWOyn4Efg+tXUKNDIF1+cHyM="}]},"_npmUser":{"name":"thure","email":"npm@willshown.com"},"directories":{},"maintainers":[{"name":"thure","email":"npm@willshown.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_9.0.0-alpha.2_1648075583153_0.7428121437757402"},"_hasShrinkwrap":false},"9.0.0-alpha.3":{"name":"@fluent-blocks/react","version":"9.0.0-alpha.3","repository":"git@github.com:OfficeDev/fluent-blocks.git","authors":["Will Shown ","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","module":"esm/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^6"},"peerDependencies":{"@fluentui/react-components":"latest","@types/react":">=16.8.0 <18.0.0","@types/react-dom":">=16.8.0 <18.0.0","chart.js":"^2.9.4","react":">=17.0.0 <19.0.0","react-dom":">=17.0.0 <19.0.0"},"devDependencies":{"@babel/core":"latest","@fluentui/react-components":"latest","@storybook/addon-actions":"latest","@storybook/addon-essentials":"latest","@storybook/addon-links":"latest","@storybook/addons":"latest","@storybook/react":"latest","@storybook/theming":"latest","@types/chart.js":"^2.9.29","@types/faker":"^5.1.2","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.18","@types/react":">=16.8.0 <18.0.0","@types/react-dom":">=16.8.0 <18.0.0","@types/react-test-renderer":">=16.8.0 <18.0.0","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.19","expect":"latest","faker":"thure/faker.js#v5.1.2","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":">=17.0.0 <19.0.0","react-dom":">=17.0.0 <19.0.0","react-test-renderer":">=16.8.0 <18.0.0","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.0.0-alpha.4","@fluent-blocks/schemas":"9.0.0-alpha.3","lodash":"latest"},"scripts":{"build":"just-scripts build","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"readme":"\"Fluent\n\n### [Open Storybook ↗︎][storybook]\n\nFluent Blocks is a React implementation of [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs for app development based on [`@fluentui/react-components`][fluentui-v9]. This project succeeds [`@fluentui/react-teams`][react-teams].\n\nThis package provides a set of components developers can use to build fully interactive & accessible experiences using whatever React coding convention they prefer, rendering experiences that match Fluent & UI Kit designs.\n\n## ⚠️ In active development\n\nThis project’s API is subject to unannounced breaking changes and is not yet on any release cycle.\n\n## Development & contributing\n\nIf you’d like to run the development environment or contribute to this project, please see [the Contributing file](CONTRIBUTING.md).\n\n## Getting started\n\n1. Using TypeScript and an IDE that supports type inspections will make using this project much easier\n2. Since this project is not published to NPM yet, do the following:\n 1. Clone this repo, `cd` to `packages/react` within this repo\n 2. Run your package manager’s `link` command ([npm link](https://docs.npmjs.com/cli/v6/commands/npm-link), [yarn link](https://classic.yarnpkg.com/lang/en/docs/cli/link/), [pnpm link](https://pnpm.io/cli/link))\n 3. `cd` to your project\n 4. Use the same package manager you used earlier to add `@fluentui/react-blocks` to your project\n3. **Make sure to resolve any peer dependency warnings**; currently all peer dependencies are needed at the right versions for this package to work\n4. Use the `View` component to hand off all UI responsibility to this project, or use individual components as you need, whichever suits your needs best.\n\n## How design pattern usage is validated through types\n\nSince the goal of this library is to aid in implementing experiences that conform to [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs and principles, it brings with it those design systems’ opinions. Each component has a concept for what kind of properties & content it accepts, which can be provided in one of two ways:\n\n1. As serializeable **props**, e.g. `{icon: 'fluent', size: 24}`\n1. As a JSX **element**, e.g. ``\n\nThe bolded terms are used in the TypeScript types for the components in this project, e.g. a valid icon instance matches `IconPropsOrElement`, which is either 1) `IconProps`, or 2) `IconElement`.\n\nFor consistency between the two syntaxes, the `children` prop and its implicit nesting equivalent in JSX is avoided in favor of named content props that parallel the serializeable syntax.\n\nSome top-level components like `View` will check the props it was provided and provide a detailed error if the props are incorrect in any way. All other components won’t check for issues and will simply refuse to render unexpected content. In either case, developers can explicitly mark where exceptions should be made using the `Escape` component described below.\n\n## Escaping validation\n\nThese components won’t render a component that has unexpected props or content, unless you use `Escape`. If you feel the need to use a pattern not provided by this project, you can do so using the `Escape` component as a JSX element in any of a component’s content props that aren’t “tightly-bound”, e.g.:\n\n```tsx\n// Only Escape imported from this package will render,\n// so make sure you’ve imported it:\nimport { Section, Escape } from '@fluentui/react-blocks';\n\n\n You can put anything here\n and it will be rendered.\n ,\n ]}\n/>\n```\n\n### Exceptions: tightly bound components\n\nA component may ignore `Escape` only if it is “tightly-bound” with another component. Components are tightly-bound when they make sense only when used together, e.g. `Layout` and `LayoutItem` where `Layout` will only render `LayoutItems` in its `items` prop. If you need to render special content in such a situation, you can either replace the entire parent with `Escape`, or use `Escape` as the _content_ of one of the children.\n\n### Escape inclusively, and share your designs!\n\nMake sure the content you add using `Escape` conforms to [WCAG 2.1][wcag] and is designed inclusively.\n\nIf you would like to share your pattern with the community, [we’d welcome your contribution](CONTRIBUTING.md)! We’d all thank you to submit PR’s that extend this project with your accessible high-quality patterns.\n\n## Concepts\n\nThis library harmonizes the patterns in Fluent and the UI Kit with concepts from web layout & interactivity by delivering components organized into these categories:\n\n- General components based on [formatting context][fmtctx]:\n - `Block` vs `Inline`\n- Specialized clusters of components with shared interactivity considerations:\n - **Media**, e.g.:\n - `Illustration`\n - `Chart`\n - **Inputs**, e.g.:\n - `RadioGroup`\n - `ShortTextInput`\n- **Surfaces**, each of which expect to be unique in a given view\n- **Views**, the top-level components which render an entire UI in a viewport\n\nAny component may also have **Exemplars**, which render the same component but with a specialized API surface optimized for a specific use-case for the pattern, e.g. `Widget` always renders a `Card` though its props are based on the more constrained scope of content for cards in a dashboard from the UI Kit.\n\n## Icons\n\nThis project supports using icons from [`fluentui-system-icons`][fluent-icons] through SVG sprites implemented in [an experimental fork of that project](https://github.com/thure/fluentui-system-icons/tree/master/packages/svg-sprites). The `Icon` component will render an SVG of the appropriate size containing a `use` element with an `href` to the appropriate sprite, e.g.:\n\n```tsx\n// If used wherever `InlineSequence` or `IconPropsOrElement` is accepted,\n// both the props syntax and element syntax will be rendered the same way.\nconst catIcon =\n { icon: 'animal_cat', size: 24, variant: 'outline' } ||\n \n```\n\nThis project currently expects any requests to `/sprites/**` to serve an SVG sprite with the appropriate content, which for the Storybook development server is proxied to a specific release on jsDelivr.\n\nIn your own project, we recommend serving just the sprites you need locally if possible. Do not use proxies for icons in production.\n\n[figma-fluent]: https://www.figma.com/community/file/836828295772957889/Microsoft-Fluent-Web\n[figma-uikit]: https://www.figma.com/community/file/916836509871353159/Microsoft-Teams-UI-Kit\n[fluent-icons]: https://github.com/microsoft/fluentui-system-icons\n[fluentui-v9]: https://www.npmjs.com/package/@fluentui/react-components\n[react-teams]: https://www.npmjs.com/package/@fluentui/react-teams\n[storybook]: https://aka.ms/fluent-blocks-storybook\n[wcag]: https://www.w3.org/TR/WCAG21\n[fmtctx]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow\n","_id":"@fluent-blocks/react@9.0.0-alpha.3","_integrity":"sha512-6ZcSPGN3nTHNFAb32juq1FdREc559DuubEEwqj6WVROBMIVa8/ckn93hZcNHK88RcgbabEGkBMJ7OCgObaJsOA==","_resolved":"/Users/willshown/Projects/fluent-blocks/packages/react/fluent-blocks-react-9.0.0-alpha.3.tgz","_from":"file:fluent-blocks-react-9.0.0-alpha.3.tgz","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-6ZcSPGN3nTHNFAb32juq1FdREc559DuubEEwqj6WVROBMIVa8/ckn93hZcNHK88RcgbabEGkBMJ7OCgObaJsOA==","shasum":"b4bba7b55ce570758ed87477813dfd85d84aaf98","tarball":"https://registry.npmjs.org/@fluent-blocks/react/-/react-9.0.0-alpha.3.tgz","fileCount":299,"unpackedSize":572483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiO7TkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo27A//ZfCWuTaIoVZT+SXZi0cIo9Qlef0FoqrfX+mTUZZJmadNZh97\r\nDCAKbDnpjnqKfF+q9L0okyjBkOpARsTwc3ORmox4YcPZuvJ2Cm7jH9x/huk7\r\nLDWcRFvFACqnrOFUk7+16wLUvEikXa1I0/Su87b8xd3PQxAAtQ/KPxxW31/N\r\nN8GTtUfW4fwWhAULh96dbSM08ouLTDSk/ln7E3aFa9EE0XcWjMCyhhNXir+u\r\nyaewm0rHa8tw2oB7IeCX1BXx3toeexcEQsfWlfhgQLSX3KG/Wng1qWgP3tgw\r\n78K04HXLxn1UjNQ16KMD8v4DnZEr9hnvLc65F2JEIWLheFV0tYXL93Fbyobq\r\npCDdk/KQZ6pPxot++bWngo9Ygnn/V2b+jGIMGJUVG7pv0BTMjwVhUKKrun1u\r\nsejPNaIsnM37eup8ET1HslS5ZHiL81a2fJrioImFBdndvMsOhisE+yQeaRqH\r\nnQiQI8cPMX5axEW5etX7gAFBF+kfhTP+bCIYWillRDgYg6NKq3rlObQ7fSo+\r\n1CwPnOFbgsK4bgp97jXYY4fqIehiIPriExWyX4zZSdZz3kc1tX1BltDEI8y9\r\npFr1vgyqgRv2WGheIuR/r054uje80c6EjbBzclcEmFALtxO1TAqiptRULNBw\r\n8j2vbed3ab9sKOCnOxuycEYlV5/nFlJI7Uk=\r\n=gTng\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDItvKoyNaZXD25AujQzVoDyX3Tw7X9IFf/EW4+vEc4EwIhAPt/ceAHgkZYCPAlULesV+W1LmgMyutZLqaYbohbAuDj"}]},"_npmUser":{"name":"thure","email":"npm@willshown.com"},"directories":{},"maintainers":[{"name":"thure","email":"npm@willshown.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_9.0.0-alpha.3_1648080100372_0.9820039838204386"},"_hasShrinkwrap":false},"9.0.0-alpha.4":{"name":"@fluent-blocks/react","version":"9.0.0-alpha.4","repository":"git@github.com:OfficeDev/fluent-blocks.git","authors":["Will Shown ","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","module":"esm/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^6"},"peerDependencies":{"@fluentui/react-components":"latest","@types/react":">=17.0.0 <19.0.0","@types/react-dom":">=17.0.0 <19.0.0","chart.js":"^2.9.4","react":">=17.0.0 <19.0.0","react-dom":">=17.0.0 <19.0.0"},"devDependencies":{"@babel/core":"latest","@fluentui/react-components":"latest","@storybook/addon-actions":"latest","@storybook/addon-essentials":"latest","@storybook/addon-links":"latest","@storybook/addons":"latest","@storybook/react":"latest","@storybook/theming":"latest","@types/chart.js":"^2.9.29","@types/faker":"^5.1.2","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.18","@types/react":">=17.0.0 <19.0.0","@types/react-dom":">=17.0.0 <19.0.0","@types/react-test-renderer":">=17.0.0 <19.0.0","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.19","expect":"latest","faker":"thure/faker.js#v5.1.2","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":">=17.0.0 <19.0.0","react-dom":">=17.0.0 <19.0.0","react-test-renderer":">=17.0.0 <19.0.0","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.0.0-alpha.4","@fluent-blocks/schemas":"9.0.0-alpha.3","lodash":"latest"},"scripts":{"build":"just-scripts build","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"readme":"\"Fluent\n\n### [Open Storybook ↗︎][storybook]\n\nFluent Blocks is a React implementation of [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs for app development based on [`@fluentui/react-components`][fluentui-v9]. This project succeeds [`@fluentui/react-teams`][react-teams].\n\nThis package provides a set of components developers can use to build fully interactive & accessible experiences using whatever React coding convention they prefer, rendering experiences that match Fluent & UI Kit designs.\n\n## ⚠️ In active development\n\nThis project’s API is subject to unannounced breaking changes and is not yet on any release cycle.\n\n## Development & contributing\n\nIf you’d like to run the development environment or contribute to this project, please see [the Contributing file](CONTRIBUTING.md).\n\n## Getting started\n\n1. Using TypeScript and an IDE that supports type inspections will make using this project much easier\n2. Since this project is not published to NPM yet, do the following:\n 1. Clone this repo, `cd` to `packages/react` within this repo\n 2. Run your package manager’s `link` command ([npm link](https://docs.npmjs.com/cli/v6/commands/npm-link), [yarn link](https://classic.yarnpkg.com/lang/en/docs/cli/link/), [pnpm link](https://pnpm.io/cli/link))\n 3. `cd` to your project\n 4. Use the same package manager you used earlier to add `@fluentui/react-blocks` to your project\n3. **Make sure to resolve any peer dependency warnings**; currently all peer dependencies are needed at the right versions for this package to work\n4. Use the `View` component to hand off all UI responsibility to this project, or use individual components as you need, whichever suits your needs best.\n\n## How design pattern usage is validated through types\n\nSince the goal of this library is to aid in implementing experiences that conform to [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs and principles, it brings with it those design systems’ opinions. Each component has a concept for what kind of properties & content it accepts, which can be provided in one of two ways:\n\n1. As serializeable **props**, e.g. `{icon: 'fluent', size: 24}`\n1. As a JSX **element**, e.g. ``\n\nThe bolded terms are used in the TypeScript types for the components in this project, e.g. a valid icon instance matches `IconPropsOrElement`, which is either 1) `IconProps`, or 2) `IconElement`.\n\nFor consistency between the two syntaxes, the `children` prop and its implicit nesting equivalent in JSX is avoided in favor of named content props that parallel the serializeable syntax.\n\nSome top-level components like `View` will check the props it was provided and provide a detailed error if the props are incorrect in any way. All other components won’t check for issues and will simply refuse to render unexpected content. In either case, developers can explicitly mark where exceptions should be made using the `Escape` component described below.\n\n## Escaping validation\n\nThese components won’t render a component that has unexpected props or content, unless you use `Escape`. If you feel the need to use a pattern not provided by this project, you can do so using the `Escape` component as a JSX element in any of a component’s content props that aren’t “tightly-bound”, e.g.:\n\n```tsx\n// Only Escape imported from this package will render,\n// so make sure you’ve imported it:\nimport { Section, Escape } from '@fluentui/react-blocks';\n\n\n You can put anything here\n and it will be rendered.\n ,\n ]}\n/>\n```\n\n### Exceptions: tightly bound components\n\nA component may ignore `Escape` only if it is “tightly-bound” with another component. Components are tightly-bound when they make sense only when used together, e.g. `Layout` and `LayoutItem` where `Layout` will only render `LayoutItems` in its `items` prop. If you need to render special content in such a situation, you can either replace the entire parent with `Escape`, or use `Escape` as the _content_ of one of the children.\n\n### Escape inclusively, and share your designs!\n\nMake sure the content you add using `Escape` conforms to [WCAG 2.1][wcag] and is designed inclusively.\n\nIf you would like to share your pattern with the community, [we’d welcome your contribution](CONTRIBUTING.md)! We’d all thank you to submit PR’s that extend this project with your accessible high-quality patterns.\n\n## Concepts\n\nThis library harmonizes the patterns in Fluent and the UI Kit with concepts from web layout & interactivity by delivering components organized into these categories:\n\n- General components based on [formatting context][fmtctx]:\n - `Block` vs `Inline`\n- Specialized clusters of components with shared interactivity considerations:\n - **Media**, e.g.:\n - `Illustration`\n - `Chart`\n - **Inputs**, e.g.:\n - `RadioGroup`\n - `ShortTextInput`\n- **Surfaces**, each of which expect to be unique in a given view\n- **Views**, the top-level components which render an entire UI in a viewport\n\nAny component may also have **Exemplars**, which render the same component but with a specialized API surface optimized for a specific use-case for the pattern, e.g. `Widget` always renders a `Card` though its props are based on the more constrained scope of content for cards in a dashboard from the UI Kit.\n\n## Icons\n\nThis project supports using icons from [`fluentui-system-icons`][fluent-icons] through SVG sprites implemented in [an experimental fork of that project](https://github.com/thure/fluentui-system-icons/tree/master/packages/svg-sprites). The `Icon` component will render an SVG of the appropriate size containing a `use` element with an `href` to the appropriate sprite, e.g.:\n\n```tsx\n// If used wherever `InlineSequence` or `IconPropsOrElement` is accepted,\n// both the props syntax and element syntax will be rendered the same way.\nconst catIcon =\n { icon: 'animal_cat', size: 24, variant: 'outline' } ||\n \n```\n\nThis project currently expects any requests to `/sprites/**` to serve an SVG sprite with the appropriate content, which for the Storybook development server is proxied to a specific release on jsDelivr.\n\nIn your own project, we recommend serving just the sprites you need locally if possible. Do not use proxies for icons in production.\n\n[figma-fluent]: https://www.figma.com/community/file/836828295772957889/Microsoft-Fluent-Web\n[figma-uikit]: https://www.figma.com/community/file/916836509871353159/Microsoft-Teams-UI-Kit\n[fluent-icons]: https://github.com/microsoft/fluentui-system-icons\n[fluentui-v9]: https://www.npmjs.com/package/@fluentui/react-components\n[react-teams]: https://www.npmjs.com/package/@fluentui/react-teams\n[storybook]: https://aka.ms/fluent-blocks-storybook\n[wcag]: https://www.w3.org/TR/WCAG21\n[fmtctx]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow\n","_id":"@fluent-blocks/react@9.0.0-alpha.4","_integrity":"sha512-n/Mqh3cd34xVKXH8uWGbMu4bRyfXP6k7lVwIbEtvK4eiGsE4Ye2m5jxE/XHZz4f59kznPSsG2hdLjRwFmHhgfQ==","_resolved":"/Users/willshown/Projects/fluent-blocks/packages/react/fluent-blocks-react-9.0.0-alpha.4.tgz","_from":"file:fluent-blocks-react-9.0.0-alpha.4.tgz","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-n/Mqh3cd34xVKXH8uWGbMu4bRyfXP6k7lVwIbEtvK4eiGsE4Ye2m5jxE/XHZz4f59kznPSsG2hdLjRwFmHhgfQ==","shasum":"fa76a794ea835df8eaf2d1529a51507aa62680b5","tarball":"https://registry.npmjs.org/@fluent-blocks/react/-/react-9.0.0-alpha.4.tgz","fileCount":299,"unpackedSize":572879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiO7h+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqyOQ/+PI/qoxbC6Zyv6wSlP4oWktV7/7JuyCv5SHnEagazhco9ia/A\r\nt/qeJNiEAles8jckqXfaUcIj5EtBuYKiTCC7Z8glInbpb2+eY4WaifAHbFSt\r\nLIhAJgHsL8zcjxRyn2TKQL+jxMENi8A8I09CL4g3luzgnOt58LGbsDLZK5Oi\r\nBSDPRtMVThh4Axnotq7bgn32O4/btar8eaE71+SmNuxQtxeUW5r7HgV2pETa\r\neGyoON2eEhi4ygYBZFGstcU4HBA3+cFYQrJMr/jhe8Nxu1X1r7yOi3/DP0/9\r\nrA815UD32JmHE6UlssBD+yAuFuqGSNeZubH9hKgCz337hDVmEsNb5/RqBNIe\r\nESVeEZZuAtPIrlPwPCJpBr7EX/kRQN3CY6VmSfnuH4DjdtQdUTAirTDHxqzW\r\nDvarKOhkFA51C/JhqZXfBTFC+kBYwE/DWNiHBaMvUxw26lXESFq79/JnuqYR\r\nreIcN4Cn7/nUz0IztSM/XjhqzFS5Lg9OcvZeu7Wz5ZyXFWeahwVidaRGMpWy\r\nMu4CV5c/eOV1TLeTgAabVHzdZ/c6U5xELGmOjNwaM8tGUz8xcuQasrBvwUKb\r\n58jY81azWjEWQ2NkeINb7v/oTijhyJMsFxB8DVbECaMLaffPzYyok6FyJXXl\r\n9PCE05IfurUzO3WN5VeH/bIqfbr5YZWLykA=\r\n=UhV2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICpeyHHTov7Nz1kM3BDT6t+pcBYO7ULLE648R3D9o+2BAiBbCMz/l5xwBoSV6/A8ZpoQape2Henh1IPmYX7rwlKGAA=="}]},"_npmUser":{"name":"thure","email":"npm@willshown.com"},"directories":{},"maintainers":[{"name":"thure","email":"npm@willshown.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_9.0.0-alpha.4_1648081021965_0.9559548851790498"},"_hasShrinkwrap":false},"9.0.0-alpha.5":{"name":"@fluent-blocks/react","version":"9.0.0-alpha.5","repository":"git@github.com:OfficeDev/fluent-blocks.git","authors":["Will Shown ","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^6"},"peerDependencies":{"@fluentui/react-components":"latest","@types/react":">=17.0.0 <19.0.0","@types/react-dom":">=17.0.0 <19.0.0","chart.js":"^2.9.4","react":">=17.0.0 <19.0.0","react-dom":">=17.0.0 <19.0.0"},"devDependencies":{"@babel/core":"latest","@fluentui/react-components":"latest","@storybook/addon-actions":"latest","@storybook/addon-essentials":"latest","@storybook/addon-links":"latest","@storybook/addons":"latest","@storybook/react":"latest","@storybook/theming":"latest","@types/chart.js":"^2.9.29","@types/faker":"^5.1.2","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.18","@types/react":">=17.0.0 <19.0.0","@types/react-dom":">=17.0.0 <19.0.0","@types/react-test-renderer":">=17.0.0 <19.0.0","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.19","expect":"latest","faker":"thure/faker.js#v5.1.2","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":">=17.0.0 <19.0.0","react-dom":">=17.0.0 <19.0.0","react-test-renderer":">=17.0.0 <19.0.0","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.0.0-alpha.4","@fluent-blocks/schemas":"9.0.0-alpha.3","lodash":"latest"},"scripts":{"build":"just-scripts build","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","readme":"\"Fluent\n\n### [Open Storybook ↗︎][storybook]\n\nFluent Blocks is a React implementation of [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs for app development based on [`@fluentui/react-components`][fluentui-v9]. This project succeeds [`@fluentui/react-teams`][react-teams].\n\nThis package provides a set of components developers can use to build fully interactive & accessible experiences using whatever React coding convention they prefer, rendering experiences that match Fluent & UI Kit designs.\n\n## ⚠️ In active development\n\nThis project’s API is subject to unannounced breaking changes and is not yet on any release cycle.\n\n## Development & contributing\n\nIf you’d like to run the development environment or contribute to this project, please see [the Contributing file](CONTRIBUTING.md).\n\n## Getting started\n\n1. Using TypeScript and an IDE that supports type inspections will make using this project much easier\n2. Install `@fluent-blocks/react@alpha` using your package manager\n4. **Make sure to resolve any peer dependency warnings**; currently all peer dependencies are needed at the right versions for this package to work\n5. Use the `View` component to hand off all UI responsibility to this project, or use individual components as you need, whichever suits your needs best.\n\n## How design pattern usage is validated through types\n\nSince the goal of this library is to aid in implementing experiences that conform to [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs and principles, it brings with it those design systems’ opinions. Each component has a concept for what kind of properties & content it accepts, which can be provided in one of two ways:\n\n1. As serializeable **props**, e.g. `{icon: 'fluent', size: 24}`\n1. As a JSX **element**, e.g. ``\n\nThe bolded terms are used in the TypeScript types for the components in this project, e.g. a valid icon instance matches `IconPropsOrElement`, which is either 1) `IconProps`, or 2) `IconElement`.\n\nFor consistency between the two syntaxes, the `children` prop and its implicit nesting equivalent in JSX is avoided in favor of named content props that parallel the serializeable syntax.\n\nSome top-level components like `View` will check the props it was provided and provide a detailed error if the props are incorrect in any way. All other components won’t check for issues and will simply refuse to render unexpected content. In either case, developers can explicitly mark where exceptions should be made using the `Escape` component described below.\n\n## Escaping validation\n\nThese components won’t render a component that has unexpected props or content, unless you use `Escape`. If you feel the need to use a pattern not provided by this project, you can do so using the `Escape` component as a JSX element in any of a component’s content props that aren’t “tightly-bound”, e.g.:\n\n```tsx\n// Only Escape imported from this package will render,\n// so make sure you’ve imported it:\nimport { Section, Escape } from '@fluentui/react-blocks';\n\n\n You can put anything here\n and it will be rendered.\n ,\n ]}\n/>\n```\n\n### Exceptions: tightly bound components\n\nA component may ignore `Escape` only if it is “tightly-bound” with another component. Components are tightly-bound when they make sense only when used together, e.g. `Layout` and `LayoutItem` where `Layout` will only render `LayoutItems` in its `items` prop. If you need to render special content in such a situation, you can either replace the entire parent with `Escape`, or use `Escape` as the _content_ of one of the children.\n\n### Escape inclusively, and share your designs!\n\nMake sure the content you add using `Escape` conforms to [WCAG 2.1][wcag] and is designed inclusively.\n\nIf you would like to share your pattern with the community, [we’d welcome your contribution](CONTRIBUTING.md)! We’d all thank you to submit PR’s that extend this project with your accessible high-quality patterns.\n\n## Concepts\n\nThis library harmonizes the patterns in Fluent and the UI Kit with concepts from web layout & interactivity by delivering components organized into these categories:\n\n- General components based on [formatting context][fmtctx]:\n - `Block` vs `Inline`\n- Specialized clusters of components with shared interactivity considerations:\n - **Media**, e.g.:\n - `Illustration`\n - `Chart`\n - **Inputs**, e.g.:\n - `RadioGroup`\n - `ShortTextInput`\n- **Surfaces**, each of which expect to be unique in a given view\n- **Views**, the top-level components which render an entire UI in a viewport\n\nAny component may also have **Exemplars**, which render the same component but with a specialized API surface optimized for a specific use-case for the pattern, e.g. `Widget` always renders a `Card` though its props are based on the more constrained scope of content for cards in a dashboard from the UI Kit.\n\n## Icons\n\nThis project supports using icons from [`fluentui-system-icons`][fluent-icons] through SVG sprites implemented in [an experimental fork of that project](https://github.com/thure/fluentui-system-icons/tree/master/packages/svg-sprites). The `Icon` component will render an SVG of the appropriate size containing a `use` element with an `href` to the appropriate sprite, e.g.:\n\n```tsx\n// If used wherever `InlineSequence` or `IconPropsOrElement` is accepted,\n// both the props syntax and element syntax will be rendered the same way.\nconst catIcon =\n { icon: 'animal_cat', size: 24, variant: 'outline' } ||\n \n```\n\nThis project currently expects any requests to `/sprites/**` to serve an SVG sprite with the appropriate content, which for the Storybook development server is proxied to a specific release on jsDelivr.\n\nIn your own project, we recommend serving just the sprites you need locally if possible. Do not use proxies for icons in production.\n\n[figma-fluent]: https://www.figma.com/community/file/836828295772957889/Microsoft-Fluent-Web\n[figma-uikit]: https://www.figma.com/community/file/916836509871353159/Microsoft-Teams-UI-Kit\n[fluent-icons]: https://github.com/microsoft/fluentui-system-icons\n[fluentui-v9]: https://www.npmjs.com/package/@fluentui/react-components\n[react-teams]: https://www.npmjs.com/package/@fluentui/react-teams\n[storybook]: https://aka.ms/fluent-blocks-storybook\n[wcag]: https://www.w3.org/TR/WCAG21\n[fmtctx]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow\n","_id":"@fluent-blocks/react@9.0.0-alpha.5","_integrity":"sha512-0p2//PmOrgpyaW1brwUXXwvmYxfxtfd9NbUq/OFtoBOe6RUax8TFsKJcNtDetUotzgti1l//M8yunuAIyGpP/Q==","_resolved":"/Users/willshown/Projects/fluent-blocks/packages/react/fluent-blocks-react-9.0.0-alpha.5.tgz","_from":"file:fluent-blocks-react-9.0.0-alpha.5.tgz","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-0p2//PmOrgpyaW1brwUXXwvmYxfxtfd9NbUq/OFtoBOe6RUax8TFsKJcNtDetUotzgti1l//M8yunuAIyGpP/Q==","shasum":"7f76a1a7f6b85ec31efee34b807b969c7f298c3a","tarball":"https://registry.npmjs.org/@fluent-blocks/react/-/react-9.0.0-alpha.5.tgz","fileCount":300,"unpackedSize":572275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiO8p8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqosw//bjeV2UG09B91ODbOEnCXd2XGVrCHXSt+CZn+Vk+uNqdOOZoD\r\n4NlNVQZE6kajMynS8/O+emDSOQq6fcr2SQ5tAx8d3B2Ya/tyX7RZvrVH3mIZ\r\nxk5hDGNjQADcw16rWiOCYOmXYVacLCUXfkAPmI3LhlpMPOUar02f2dLY9Hc5\r\nIWL/ViBsMCb5hF3g6tToG555NVtpFJWbbF17yC2O2RegfvvuGMTT5vyT8abS\r\nIFt7psNM1atDpTNyo7oo3J8AylQZZihQje/A1M4zzlEe3S8NkptSJ1SRYCLF\r\nUpJT1vYTLWgewoFAA2Ro8aQFEPQL1e0UKVVqK4VqDPLDuak5I8RAsUoW187s\r\ng+39L8tck/R5VgCcSdkXTMRpAUN8VEd+UhG1e8ZJc4vuwQULTpAe+4cV+AmD\r\nR80nU0d4ayLfQw6jvHNsOPF6q9u/5ux6SKHIRmGVD0/558Pb3lFSx2JigxTm\r\nWqLUH02vWPmfYPfIyOshkwT0EvjuiAjmZDWZnENgVt4vmVf2htfGcejYRXwU\r\nP1yEqFoJqyHR1cK0xvL3KQqvyxHukbb0qkQ0gi5jwSPrw3mVjIkVi0YxDNmj\r\ncDeQXKLx7Vrgbet3ugV0xxez1SrSaH5vPr8JNaQRRAROmXdgL99vPa0mc/cV\r\n7KpzT6gCLLnUXMFhen7RXWZwsNRV2Awimwg=\r\n=tA6A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCEPvqJz3LzvDzOZDCH4O9dAKepikr0GXBCyawY9ju7ngIhANOVgv9ea2IY8TPVnovO+9bKMJfTbsbYGkXL9vVGaRfk"}]},"_npmUser":{"name":"thure","email":"npm@willshown.com"},"directories":{},"maintainers":[{"name":"thure","email":"npm@willshown.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_9.0.0-alpha.5_1648085628712_0.40248688373608865"},"_hasShrinkwrap":false},"9.0.0-alpha.6":{"name":"@fluent-blocks/react","version":"9.0.0-alpha.6","repository":"git@github.com:OfficeDev/fluent-blocks.git","authors":["Will Shown ","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^6"},"peerDependencies":{"@fluentui/react-components":"latest","@types/react":">=17.0.0 <19.0.0","@types/react-dom":">=17.0.0 <19.0.0","chart.js":"^2.9.4","react":">=17.0.0 <19.0.0","react-dom":">=17.0.0 <19.0.0"},"devDependencies":{"@babel/core":"latest","@fluentui/react-components":"latest","@storybook/addon-actions":"latest","@storybook/addon-essentials":"latest","@storybook/addon-links":"latest","@storybook/addons":"latest","@storybook/react":"latest","@storybook/theming":"latest","@types/chart.js":"^2.9.29","@types/faker":"^5.1.2","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.18","@types/react":">=17.0.0 <19.0.0","@types/react-dom":">=17.0.0 <19.0.0","@types/react-test-renderer":">=17.0.0 <19.0.0","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.19","expect":"latest","faker":"thure/faker.js#v5.1.2","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":">=17.0.0 <19.0.0","react-dom":">=17.0.0 <19.0.0","react-test-renderer":">=17.0.0 <19.0.0","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.0.0-alpha.4","@fluent-blocks/schemas":"9.0.0-alpha.3","lodash":"latest"},"scripts":{"build":"just-scripts build","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","readme":"\"Fluent\n\n### [Open Storybook ↗︎][storybook]\n\nFluent Blocks is a React implementation of [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs for app development based on [`@fluentui/react-components`][fluentui-v9]. This project succeeds [`@fluentui/react-teams`][react-teams].\n\nThis package provides a set of components developers can use to build fully interactive & accessible experiences using whatever React coding convention they prefer, rendering experiences that match Fluent & UI Kit designs.\n\n## ⚠️ In active development\n\nThis project’s API is subject to unannounced breaking changes and is not yet on any release cycle.\n\n## Development & contributing\n\nIf you’d like to run the development environment or contribute to this project, please see [the Contributing file](CONTRIBUTING.md).\n\n## Getting started\n\nUsing TypeScript and an IDE that supports type inspections will make using this project much easier!\n\n1. Add `react@17`, `react-dom@17`, and `@fluentui/react-components@latest` if they’re not in your project already\n2. Add `chart.js@^2.9.4` if you want to use charts from this package\n3. Depending on your package manager, you may need to add `@fluent-blocks/basic-icons` to use icons\n4. Finally, install this package, `@fluent-blocks/react@alpha`, using your package manager\n\nNow anywhere you can use React, you can use Fluent Blocks. If you want to delegate the entire viewport to Fluent Blocks, use the `View` component on its own:\n\n```tsx\nimport { View, Escape } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n …for real this time.\n ,\n secondary: {\n actionId: 'start',\n label: 'Get started',\n icon: 'arrow_right',\n iconPosition: 'after'\n }\n }\n }\n },\n ],\n }}/>,\n document.getElementById('root')\n)\n```\n\nIf you want to use Fluent Blocks’ intermediary components, wrap where any will render in a single `FluentBlocksProvider` (there only needs to be one on the page):\n\n```tsx\nimport { FluentBlocksProvider, Illustration } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n \n ,\n document.getElementById('root')\n)\n```\n\n## How design pattern usage is validated through types\n\nSince the goal of this library is to aid in implementing experiences that conform to [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs and principles, it brings with it those design systems’ opinions. Each component has a concept for what kind of properties & content it accepts, which can be provided in one of two ways:\n\n1. As serializeable **props**, e.g. `{icon: 'fluent', size: 24}`\n1. As a JSX **element**, e.g. ``\n\nThe bolded terms are used in the TypeScript types for the components in this project, e.g. a valid icon instance matches `IconPropsOrElement`, which is either 1) `IconProps`, or 2) `IconElement`.\n\nFor consistency between the two syntaxes, the `children` prop and its implicit nesting equivalent in JSX is avoided in favor of named content props that parallel the serializeable syntax.\n\nSome top-level components like `View` will check the props it was provided and provide a detailed error if the props are incorrect in any way. All other components won’t check for issues and will simply refuse to render unexpected content. In either case, developers can explicitly mark where exceptions should be made using the `Escape` component described below.\n\n## Escaping validation\n\nThese components won’t render a component that has unexpected props or content, unless you use `Escape`. If you feel the need to use a pattern not provided by this project, you can do so using the `Escape` component as a JSX element in any of a component’s content props that aren’t “tightly-bound”, e.g.:\n\n```tsx\n// Only Escape imported from this package will render,\n// so make sure you’ve imported it:\nimport { Section, Escape } from '@fluentui/react-blocks';\n\n\n You can put anything here\n and it will be rendered.\n ,\n ]}\n/>\n```\n\n### Exceptions: tightly bound components\n\nA component may ignore `Escape` only if it is “tightly-bound” with another component. Components are tightly-bound when they make sense only when used together, e.g. `Layout` and `LayoutItem` where `Layout` will only render `LayoutItems` in its `items` prop. If you need to render special content in such a situation, you can either replace the entire parent with `Escape`, or use `Escape` as the _content_ of one of the children.\n\n### Escape inclusively, and share your designs!\n\nMake sure the content you add using `Escape` conforms to [WCAG 2.1][wcag] and is designed inclusively.\n\nIf you would like to share your pattern with the community, [we’d welcome your contribution](CONTRIBUTING.md)! We’d all thank you to submit PR’s that extend this project with your accessible high-quality patterns.\n\n## Concepts\n\nThis library harmonizes the patterns in Fluent and the UI Kit with concepts from web layout & interactivity by delivering components organized into these categories:\n\n- General components based on [formatting context][fmtctx]:\n - `Block` vs `Inline`\n- Specialized clusters of components with shared interactivity considerations:\n - **Media**, e.g.:\n - `Illustration`\n - `Chart`\n - **Inputs**, e.g.:\n - `RadioGroup`\n - `ShortTextInput`\n- **Surfaces**, each of which expect to be unique in a given view\n- **Views**, the top-level components which render an entire UI in a viewport\n\nAny component may also have **Exemplars**, which render the same component but with a specialized API surface optimized for a specific use-case for the pattern, e.g. `Widget` always renders a `Card` though its props are based on the more constrained scope of content for cards in a dashboard from the UI Kit.\n\n## Icons\n\nThis project supports using icons from [`fluentui-system-icons`][fluent-icons] through SVG sprites implemented in [an experimental fork of that project](https://github.com/thure/fluentui-system-icons/tree/master/packages/svg-sprites). The `Icon` component will render an SVG of the appropriate size containing a `use` element with an `href` to the appropriate sprite, e.g.:\n\n```tsx\n// If used wherever `InlineSequence` or `IconPropsOrElement` is accepted,\n// both the props syntax and element syntax will be rendered the same way.\nconst catIcon =\n { icon: 'animal_cat', size: 24, variant: 'outline' } ||\n \n```\n\nThis project currently expects any requests to `/sprites/**` to serve an SVG sprite with the appropriate content, which for the Storybook development server is proxied to a specific release on jsDelivr.\n\nIn your own project, we recommend serving just the sprites you need locally if possible. Do not use proxies for icons in production.\n\n[figma-fluent]: https://www.figma.com/community/file/836828295772957889/Microsoft-Fluent-Web\n[figma-uikit]: https://www.figma.com/community/file/916836509871353159/Microsoft-Teams-UI-Kit\n[fluent-icons]: https://github.com/microsoft/fluentui-system-icons\n[fluentui-v9]: https://www.npmjs.com/package/@fluentui/react-components\n[react-teams]: https://www.npmjs.com/package/@fluentui/react-teams\n[storybook]: https://aka.ms/fluent-blocks-storybook\n[wcag]: https://www.w3.org/TR/WCAG21\n[fmtctx]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow\n","_id":"@fluent-blocks/react@9.0.0-alpha.6","_integrity":"sha512-vW6UTZc6MfT7EmYJDhg6PEvWenqBAm8Y/Gn/GWKWxoy+um6mAaHls//BcK85Tvnp/w79NuMaRkA2Eyc09Tpudw==","_resolved":"/Users/willshown/Projects/fluent-blocks/packages/react/fluent-blocks-react-9.0.0-alpha.6.tgz","_from":"file:fluent-blocks-react-9.0.0-alpha.6.tgz","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-vW6UTZc6MfT7EmYJDhg6PEvWenqBAm8Y/Gn/GWKWxoy+um6mAaHls//BcK85Tvnp/w79NuMaRkA2Eyc09Tpudw==","shasum":"2af1ea45ad54a029fed37255a92ad66dbcc91b39","tarball":"https://registry.npmjs.org/@fluent-blocks/react/-/react-9.0.0-alpha.6.tgz","fileCount":300,"unpackedSize":576014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiO/7/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqb/w/9G8nGt1MgpbilXfCWaMovlZR+lOtGNXv48Wb3T3GuDZqYSQFi\r\n2VIsPdYx10jVrMrBwbVeoN0pAr+Uc60X6o3UuxuKxccWiswQGKkQHV/MOqMb\r\nbqdhOw3F3IwVLFTP10EvFPkVJjiM0tN6jdKVcbVimx6NSZWOdmqrvygdHGAw\r\nOVq/IexpVxxUJZClOPufQ7yGCK/kXgnfSaKfT6Kk6RBf8jLejlbZuR7okBgD\r\nATWChTukGzfRiP+6XCTeq6bWspzBtk2+CDiqpZv24KF8BhVS589/5fArKjOk\r\nikLzp3t0q4vuKP2vgH+TWHVslsJGu1zA8Lr0DLVdKHGNflSqlGl9Uds4wbeJ\r\nPvPs7JMIEm7cf5QCkQ2/6OpDGvi9RWs44UFOx3NfZl7UjOjP7MvQ6NYDKRhH\r\n5OTbi76lUZzj76PZx4VA5wWiQXStgs9vStFSiFwAesnHjoQv50skrGqNHw/k\r\nbV+840RWBGv5TD78TzaVxmFJ1fekhdF0Crw0pYVvOe+XDzsUXm4cgt4tR8Fp\r\nZGwnxMqHhLKvUbnbfkrkEyuYy0rC4GPX5/TXZsvK5IBW/tFeah9wvjXOh4QR\r\nVN35ZcfDh7J2c9xfxH9N94Rv1uG0SDsCR5MXzR38wpiXDSsaGImvXv3XL/99\r\nFtdurPpW99JxbjTFg+D0o5WTdkJqhXboqwg=\r\n=hgOO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPi4LQUiXCU+C3q6yPkFuOAk2ebVQtHYtrK0VLCbyi/QIhAKuaHrqaRhBhjpNWyNXQ7NA40DKS6xxI3Y4ZzhQ169QE"}]},"_npmUser":{"name":"thure","email":"npm@willshown.com"},"directories":{},"maintainers":[{"name":"thure","email":"npm@willshown.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_9.0.0-alpha.6_1648099070771_0.5373695384280517"},"_hasShrinkwrap":false},"9.0.0-alpha.7":{"name":"@fluent-blocks/react","version":"9.0.0-alpha.7","repository":"git@github.com:OfficeDev/fluent-blocks.git","authors":["Will Shown ","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^6"},"peerDependencies":{"@fluentui/react-components":"latest","@types/react":">=17.0.0 <19.0.0","@types/react-dom":">=17.0.0 <19.0.0","chart.js":"^2.9.4","react":">=17.0.0 <19.0.0","react-dom":">=17.0.0 <19.0.0"},"devDependencies":{"@babel/core":"latest","@fluentui/react-components":"latest","@storybook/addon-actions":"latest","@storybook/addon-essentials":"latest","@storybook/addon-links":"latest","@storybook/addons":"latest","@storybook/react":"latest","@storybook/theming":"latest","@types/chart.js":"^2.9.29","@types/faker":"^5.1.2","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.18","@types/react":">=17.0.0 <19.0.0","@types/react-dom":">=17.0.0 <19.0.0","@types/react-test-renderer":">=17.0.0 <19.0.0","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.19","expect":"latest","faker":"thure/faker.js#v5.1.2","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":">=17.0.0 <19.0.0","react-dom":">=17.0.0 <19.0.0","react-test-renderer":">=17.0.0 <19.0.0","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.0.0-alpha.4","@fluent-blocks/schemas":"9.0.0-alpha.3","lodash":"latest"},"scripts":{"build":"just-scripts build","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","readme":"\"Fluent\n\n### [Open Storybook ↗︎][storybook]\n\nFluent Blocks is a React implementation of [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs for app development based on [`@fluentui/react-components`][fluentui-v9]. This project succeeds [`@fluentui/react-teams`][react-teams].\n\nThis package provides a set of components developers can use to build fully interactive & accessible experiences using whatever React coding convention they prefer, rendering experiences that match Fluent & UI Kit designs.\n\n## ⚠️ In active development\n\nThis project’s API is subject to unannounced breaking changes and is not yet on any release cycle.\n\n## Development & contributing\n\nIf you’d like to run the development environment or contribute to this project, please see [the Contributing file](CONTRIBUTING.md).\n\n## Getting started\n\nUsing TypeScript and an IDE that supports type inspections will make using this project much easier!\n\n1. Add `react@17`, `react-dom@17`, and `@fluentui/react-components@latest` if they’re not in your project already\n2. Add `chart.js@^2.9.4` if you want to use charts from this package\n3. Depending on your package manager, you may need to add `@fluent-blocks/basic-icons` to use icons\n4. Finally, install this package, `@fluent-blocks/react@alpha`, using your package manager\n\nNow anywhere you can use React, you can use Fluent Blocks. If you want to delegate the entire viewport to Fluent Blocks, use the `View` component on its own:\n\n```tsx\nimport { View, Escape } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n …for real this time.\n ,\n secondary: {\n actionId: 'start',\n label: 'Get started',\n icon: 'arrow_right',\n iconPosition: 'after'\n }\n }\n }\n },\n ],\n }}/>,\n document.getElementById('root')\n)\n```\n\nIf you want to use Fluent Blocks’ intermediary components, wrap where any will render in a single `FluentBlocksProvider` (there only needs to be one on the page):\n\n```tsx\nimport { FluentBlocksProvider, Illustration } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n \n ,\n document.getElementById('root')\n)\n```\n\n## How design pattern usage is validated through types\n\nSince the goal of this library is to aid in implementing experiences that conform to [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs and principles, it brings with it those design systems’ opinions. Each component has a concept for what kind of properties & content it accepts, which can be provided in one of two ways:\n\n1. As serializeable **props**, e.g. `{icon: 'fluent', size: 24}`\n1. As a JSX **element**, e.g. ``\n\nThe bolded terms are used in the TypeScript types for the components in this project, e.g. a valid icon instance matches `IconPropsOrElement`, which is either 1) `IconProps`, or 2) `IconElement`.\n\nFor consistency between the two syntaxes, the `children` prop and its implicit nesting equivalent in JSX is avoided in favor of named content props that parallel the serializeable syntax.\n\nSome top-level components like `View` will check the props it was provided and provide a detailed error if the props are incorrect in any way. All other components won’t check for issues and will simply refuse to render unexpected content. In either case, developers can explicitly mark where exceptions should be made using the `Escape` component described below.\n\n## Escaping validation\n\nThese components won’t render a component that has unexpected props or content, unless you use `Escape`. If you feel the need to use a pattern not provided by this project, you can do so using the `Escape` component as a JSX element in any of a component’s content props that aren’t “tightly-bound”, e.g.:\n\n```tsx\n// Only Escape imported from this package will render,\n// so make sure you’ve imported it:\nimport { Section, Escape } from '@fluentui/react-blocks';\n\n\n You can put anything here\n and it will be rendered.\n ,\n ]}\n/>\n```\n\n### Exceptions: tightly bound components\n\nA component may ignore `Escape` only if it is “tightly-bound” with another component. Components are tightly-bound when they make sense only when used together, e.g. `Layout` and `LayoutItem` where `Layout` will only render `LayoutItems` in its `items` prop. If you need to render special content in such a situation, you can either replace the entire parent with `Escape`, or use `Escape` as the _content_ of one of the children.\n\n### Escape inclusively, and share your designs!\n\nMake sure the content you add using `Escape` conforms to [WCAG 2.1][wcag] and is designed inclusively.\n\nIf you would like to share your pattern with the community, [we’d welcome your contribution](CONTRIBUTING.md)! We’d all thank you to submit PR’s that extend this project with your accessible high-quality patterns.\n\n## Concepts\n\nThis library harmonizes the patterns in Fluent and the UI Kit with concepts from web layout & interactivity by delivering components organized into these categories:\n\n- General components based on [formatting context][fmtctx]:\n - `Block` vs `Inline`\n- Specialized clusters of components with shared interactivity considerations:\n - **Media**, e.g.:\n - `Illustration`\n - `Chart`\n - **Inputs**, e.g.:\n - `RadioGroup`\n - `ShortTextInput`\n- **Surfaces**, each of which expect to be unique in a given view\n- **Views**, the top-level components which render an entire UI in a viewport\n\nAny component may also have **Exemplars**, which render the same component but with a specialized API surface optimized for a specific use-case for the pattern, e.g. `Widget` always renders a `Card` though its props are based on the more constrained scope of content for cards in a dashboard from the UI Kit.\n\n## Icons\n\nThis project supports using icons from [`fluentui-system-icons`][fluent-icons] through SVG sprites implemented in [an experimental fork of that project](https://github.com/thure/fluentui-system-icons/tree/master/packages/svg-sprites). The `Icon` component will render an SVG of the appropriate size containing a `use` element with an `href` to the appropriate sprite, e.g.:\n\n```tsx\n// If used wherever `InlineSequence` or `IconPropsOrElement` is accepted,\n// both the props syntax and element syntax will be rendered the same way.\nconst catIcon =\n { icon: 'animal_cat', size: 24, variant: 'outline' } ||\n \n```\n\nThis project currently expects any requests to `/sprites/**` to serve an SVG sprite with the appropriate content, which for the Storybook development server is proxied to a specific release on jsDelivr.\n\nIn your own project, we recommend serving just the sprites you need locally if possible. Do not use proxies for icons in production.\n\n[figma-fluent]: https://www.figma.com/community/file/836828295772957889/Microsoft-Fluent-Web\n[figma-uikit]: https://www.figma.com/community/file/916836509871353159/Microsoft-Teams-UI-Kit\n[fluent-icons]: https://github.com/microsoft/fluentui-system-icons\n[fluentui-v9]: https://www.npmjs.com/package/@fluentui/react-components\n[react-teams]: https://www.npmjs.com/package/@fluentui/react-teams\n[storybook]: https://aka.ms/fluent-blocks-storybook\n[wcag]: https://www.w3.org/TR/WCAG21\n[fmtctx]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow\n","_id":"@fluent-blocks/react@9.0.0-alpha.7","_integrity":"sha512-mfn8kJ5O67WAySw4VIWj4Uslds6xHfzCDwFcbJ6WmLcWXw2bLqGSBiqW7Kh/2cZtAAWsOolh8Z29JwtzpiHEHg==","_resolved":"/Users/willshown/Projects/fluent-blocks/packages/react/fluent-blocks-react-9.0.0-alpha.7.tgz","_from":"file:fluent-blocks-react-9.0.0-alpha.7.tgz","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-mfn8kJ5O67WAySw4VIWj4Uslds6xHfzCDwFcbJ6WmLcWXw2bLqGSBiqW7Kh/2cZtAAWsOolh8Z29JwtzpiHEHg==","shasum":"1c0c08663b3f1a0719d05bb8c97ad21cd5690cd0","tarball":"https://registry.npmjs.org/@fluent-blocks/react/-/react-9.0.0-alpha.7.tgz","fileCount":300,"unpackedSize":576706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPBgzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrYzg//TRx2Jf0ifIwlgGYlKan+7nuueNbcINrfGU4Kpp2ZrSogPNQk\r\nb0+cP1M5rTNr5vkt9w3qlY0HlqqC09DXsi/+42ZdUyVtbCZYTKPfvKv1IK9k\r\nB/QK+MHCExaZts43xlmfampV/JDJk8slq+jLKH28RGrUOZkoFjppcJumoNrh\r\nBMiDmWmrWGGe3Jqm850JSyN7kPaLOjKWqrt1ERK4Noo/kVxzCYGwJpGsDbjR\r\nI17YpETQ4JWUr04QXnBozlorhNdDHOKR9c67RPGBt8c9F8k60IolaBjRq1kF\r\nJnDs+C+7RvVLg2ceCbbEaLYB/zIfKfJZt5mBCtSCZXp4NvnF1AtOOzKfHJIk\r\nrJY7gqZqNGhz7AMuf4IVv8xEN82T2h92ukgr0+5Jdt20Fm5zf8jJ4bQpmDRu\r\n7M6wGAtL411n6+GjF4tMJiMKlDkK2/HdX2idp0s9+CENVe/vj3nWK65+ppvI\r\nXZu5wfla0nJlmLCoHnRXl4Fp+VzPFXK1fXhE4MBazjGKj7FHXddbMvIKyoP2\r\nJUbevChRnEHb1sVOLiF6D8kkEtIcsMNBlpQPv4gOR4msTscs9irQcagmnB62\r\nhCF9AKN0f9dssuNgPyNxWcBN7QgmSw6UP6apRUYIGeKtYD9oEdPYjoRPKM6+\r\n3t/dRaAIwV32omI8LzqNRZtFokMQy1YC65Q=\r\n=mCkK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE699dLsAYxOvYxQ4jzvgrYfO8cTNqTlXYC2lYTC9XOWAiEA7ZPsnisXkfaGYI9923he/8Lk2f7HAuGCpU0neWIXGZs="}]},"_npmUser":{"name":"thure","email":"npm@willshown.com"},"directories":{},"maintainers":[{"name":"thure","email":"npm@willshown.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_9.0.0-alpha.7_1648105522842_0.42923811129205447"},"_hasShrinkwrap":false},"9.0.0":{"name":"@fluent-blocks/react","version":"9.0.0","repository":{"type":"git","url":"git+ssh://git@github.com/OfficeDev/fluent-blocks.git"},"authors":["Will Shown ","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^6"},"peerDependencies":{"@fluentui/react-components":"latest","@types/react":">=16.13.1 <19","@types/react-dom":">=16.13.1 <19","chart.js":"^2.9.4","react":">=16.13.1 <19","react-dom":">=16.13.1 <19"},"devDependencies":{"@babel/core":"latest","@fluentui/react-components":"latest","@storybook/addon-actions":"next","@storybook/addon-essentials":"next","@storybook/addon-links":"next","@storybook/addons":"next","@storybook/react":"next","@storybook/theming":"next","@types/chart.js":"^2.9.29","@types/faker":"^5.1.2","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.18","@types/react":"18.x","@types/react-dom":"18.x","@types/react-test-renderer":"latest","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.19","expect":"latest","faker":"github:thure/faker.js#v5.1.2","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":"18.x","react-dom":"18.x","react-test-renderer":"latest","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.0.0","@fluent-blocks/schemas":"9.0.0","@fluentui/react-tabster":"latest","lodash":"latest"},"scripts":{"build":"just-scripts build","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"node ./scripts/prebuildsb.js && build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","_resolved":"","_integrity":"","_from":"file:fluent-blocks-react-9.0.0.tgz","description":"\"Fluent","bugs":{"url":"https://github.com/OfficeDev/fluent-blocks/issues"},"homepage":"https://github.com/OfficeDev/fluent-blocks#readme","_id":"@fluent-blocks/react@9.0.0","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-I9viHWYT54aVJIH9tP8WBfZc4WXDIxs6+PLhKmCBpDXZsPTJUB71KKaNoaOF5+1UC3vJJJcP37aHTQfH9mHuAg==","shasum":"8a3eb11000e9160eb7003d24ccac5504266809c4","tarball":"https://registry.npmjs.org/@fluent-blocks/react/-/react-9.0.0.tgz","fileCount":336,"unpackedSize":658905,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBb0eKbWd4nmCmk+drQTI1jtlbCo0xlmHramCYllgY5AAiEA6A38VVYKEJdKIdNQhk8HV9DXTve8M11kJ7KoH/F43/c="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYHHvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpkARAAh8UuZYrhizI/2dj2sGyPiJYE42FepOToW6AvvzAp351EDWE5\r\nGzQV50bwhzWwgcd0xrOgQ4rPSuZhh/gEegcqQZYspEsjd2ESm0covtXKnf7a\r\nnAVkwV95Nno9l2VTmeAaQgSgVFZc6Eol+1ML44a6MXmEfAuVbMRRkvxChk2N\r\nHNlY/HEmiHJ5USXBoSfwv4kNPuOsJ4x5MnfFhGTYhhkXrVKjVz5Ai6AzWCe+\r\n25pdT6Z55Zt+Bai1sQNtUzcJ2eq8iE8Og7xlUf7zjPt8kAojeQCxhkqr/QrU\r\nJgqv1w/TSbJ+pBmJiLDkGFXEsZEMm4/YrYJsTDvl7cND2QtJIHyUSrUn2/jQ\r\ncPl9ql7I/yh+ISThlhj0bOlrd0JLchzaBYK/yDSnVwdoNqTdy24ym1HlUC/m\r\n+nifou/arVZQShlTUjkKbaHOvMABak7eKymRXQOR3OltIQdGF4wxlaup7Rfe\r\ns6n9oKLHYSrAzOM9Hm0gr8Zvtke1Ljlmnfzi2pFm9GSFeoefJL4sWkPMtL2+\r\nRGpoXmoriroxVKdIw3hAJFphbaOgNjMIFxeqWn2NZMSldBDWXvV5UyF2A8Ou\r\nTkhFZZ699XJC2fhqBsGAqMV3xc+asJS4FGkKPFR232b5idp3myzlIQGVerV2\r\nYIB9OxoYBHf5iby20Cx05nFQUCcOmxPcARs=\r\n=vVUT\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"msdstwg","email":"willshown@microsoft.com"},"directories":{},"maintainers":[{"name":"msdstwg","email":"willshown@microsoft.com"},{"name":"thure","email":"npm@willshown.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_9.0.0_1650487790825_0.9956309373197632"},"_hasShrinkwrap":false},"9.1.0-next.1":{"name":"@fluent-blocks/react","version":"9.1.0-next.1","repository":{"type":"git","url":"git+ssh://git@github.com/OfficeDev/fluent-blocks.git"},"authors":["Will Shown ","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^6"},"peerDependencies":{"@fluentui/react-components":"latest","@types/react":">=16.13.1 <19","@types/react-dom":">=16.13.1 <19","chart.js":"^2.9.4","react":">=16.13.1 <19","react-dom":">=16.13.1 <19"},"devDependencies":{"@babel/core":"latest","@fluentui/react-components":"latest","@storybook/addon-actions":"next","@storybook/addon-essentials":"next","@storybook/addon-links":"next","@storybook/addons":"next","@storybook/react":"next","@storybook/theming":"next","@types/chart.js":"^2.9.29","@types/faker":"^5.1.2","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.18","@types/react":"18.x","@types/react-dom":"18.x","@types/react-test-renderer":"latest","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.19","expect":"latest","faker":"github:thure/faker.js#v5.1.2","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":"18.x","react-dom":"18.x","react-test-renderer":"latest","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.1.0-next.1","@fluent-blocks/schemas":"9.1.0-next.1","@fluentui/react-tabster":"latest","lodash":"latest"},"scripts":{"build":"just-scripts build","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"node ./scripts/prebuildsb.js && build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","readme":"\"Fluent\n\n### [Open Storybook ↗︎][storybook]\n\nFluent Blocks is a React implementation of [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs for app development based on [`@fluentui/react-components`][fluentui-v9]. This project succeeds [`@fluentui/react-teams`][react-teams].\n\nThis package provides a set of components developers can use to build fully interactive & accessible experiences using whatever React coding convention they prefer, rendering experiences that match Fluent & UI Kit designs.\n\n## ⚠️ In active development\n\nThis project’s API is subject to unannounced breaking changes and is not yet on any release cycle.\n\n## Development & contributing\n\nIf you’d like to run the development environment or contribute to this project, please see [the Contributing file](CONTRIBUTING.md).\n\n## Getting started\n\nUsing TypeScript and an IDE that supports type inspections will make using this project much easier!\n\n1. Add `react@17`, `react-dom@17`, and `@fluentui/react-components@latest` if they’re not in your project already\n2. Add `chart.js@^2.9.4` if you want to use charts from this package\n3. Depending on your package manager, you may need to add `@fluent-blocks/basic-icons` to use icons\n4. Finally, install this package, `@fluent-blocks/react@alpha`, using your package manager\n\nNow anywhere you can use React, you can use Fluent Blocks. If you want to delegate the entire viewport to Fluent Blocks, use the `View` component on its own:\n\n```tsx\nimport { View, Escape } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n …for real this time.\n ,\n secondary: {\n actionId: 'start',\n label: 'Get started',\n icon: 'arrow_right',\n iconPosition: 'after'\n }\n }\n }\n },\n ],\n }}/>,\n document.getElementById('root')\n)\n```\n\nIf you want to use Fluent Blocks’ intermediary components, wrap where any will render in a single `FluentBlocksProvider` (there only needs to be one on the page):\n\n```tsx\nimport { FluentBlocksProvider, Illustration } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n \n ,\n document.getElementById('root')\n)\n```\n\n## How design pattern usage is validated through types\n\nSince the goal of this library is to aid in implementing experiences that conform to [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs and principles, it brings with it those design systems’ opinions. Each component has a concept for what kind of properties & content it accepts, which can be provided in one of two ways:\n\n1. As serializeable **props**, e.g. `{icon: 'fluent', size: 24}`\n1. As a JSX **element**, e.g. ``\n\nThe bolded terms are used in the TypeScript types for the components in this project, e.g. a valid icon instance matches `IconPropsOrElement`, which is either 1) `IconProps`, or 2) `IconElement`.\n\nFor consistency between the two syntaxes, the `children` prop and its implicit nesting equivalent in JSX is avoided in favor of named content props that parallel the serializeable syntax.\n\nSome top-level components like `View` will check the props it was provided and provide a detailed error if the props are incorrect in any way. All other components won’t check for issues and will simply refuse to render unexpected content. In either case, developers can explicitly mark where exceptions should be made using the `Escape` component described below.\n\n## Escaping validation\n\nThese components won’t render a component that has unexpected props or content, unless you use `Escape`. If you feel the need to use a pattern not provided by this project, you can do so using the `Escape` component as a JSX element in any of a component’s content props that aren’t “tightly-bound”, e.g.:\n\n```tsx\n// Only Escape imported from this package will render,\n// so make sure you’ve imported it:\nimport { Section, Escape } from '@fluentui/react-blocks';\n\n\n You can put anything here\n and it will be rendered.\n ,\n ]}\n/>\n```\n\n### Exceptions: tightly bound components\n\nA component may ignore `Escape` only if it is “tightly-bound” with another component. Components are tightly-bound when they make sense only when used together, e.g. `Layout` and `LayoutItem` where `Layout` will only render `LayoutItems` in its `items` prop. If you need to render special content in such a situation, you can either replace the entire parent with `Escape`, or use `Escape` as the _content_ of one of the children.\n\n### Escape inclusively, and share your designs!\n\nMake sure the content you add using `Escape` conforms to [WCAG 2.1][wcag] and is designed inclusively.\n\nIf you would like to share your pattern with the community, [we’d welcome your contribution](CONTRIBUTING.md)! We’d all thank you to submit PR’s that extend this project with your accessible high-quality patterns.\n\n## Concepts\n\nThis library harmonizes the patterns in Fluent and the UI Kit with concepts from web layout & interactivity by delivering components organized into these categories:\n\n- General components based on [formatting context][fmtctx]:\n - `Block` vs `Inline`\n- Specialized clusters of components with shared interactivity considerations:\n - **Media**, e.g.:\n - `Illustration`\n - `Chart`\n - **Inputs**, e.g.:\n - `RadioGroup`\n - `ShortTextInput`\n- **Surfaces**, each of which expect to be unique in a given view\n- **Views**, the top-level components which render an entire UI in a viewport\n\nAny component may also have **Exemplars**, which render the same component but with a specialized API surface optimized for a specific use-case for the pattern, e.g. `Widget` always renders a `Card` though its props are based on the more constrained scope of content for cards in a dashboard from the UI Kit.\n\n## Icons\n\nThis project supports using icons from [`fluentui-system-icons`][fluent-icons] through SVG sprites implemented in [an experimental fork of that project](https://github.com/thure/fluentui-system-icons/tree/master/packages/svg-sprites). The `Icon` component will render an SVG of the appropriate size containing a `use` element with an `href` to the appropriate sprite, e.g.:\n\n```tsx\n// If used wherever `InlineSequence` or `IconPropsOrElement` is accepted,\n// both the props syntax and element syntax will be rendered the same way.\nconst catIcon =\n { icon: 'animal_cat', size: 24, variant: 'outline' } ||\n \n```\n\nThis project currently expects any requests to `/sprites/**` to serve an SVG sprite with the appropriate content, which for the Storybook development server is proxied to a specific release on jsDelivr.\n\nIn your own project, we recommend serving just the sprites you need locally if possible. Do not use proxies for icons in production.\n\n[figma-fluent]: https://www.figma.com/community/file/836828295772957889/Microsoft-Fluent-Web\n[figma-uikit]: https://www.figma.com/community/file/916836509871353159/Microsoft-Teams-UI-Kit\n[fluent-icons]: https://github.com/microsoft/fluentui-system-icons\n[fluentui-v9]: https://www.npmjs.com/package/@fluentui/react-components\n[react-teams]: https://www.npmjs.com/package/@fluentui/react-teams\n[storybook]: https://aka.ms/fluent-blocks-storybook\n[wcag]: https://www.w3.org/TR/WCAG21\n[fmtctx]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow\n","_resolved":"","_integrity":"","_from":"file:fluent-blocks-react-9.1.0-next.1.tgz","description":"\"Fluent","bugs":{"url":"https://github.com/OfficeDev/fluent-blocks/issues"},"homepage":"https://github.com/OfficeDev/fluent-blocks#readme","_id":"@fluent-blocks/react@9.1.0-next.1","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-/frrORYJpWFUMnOwagwJN3Z0Kf03QzzM9bCyU3kuwF1o6z2msT0N955nzvEOJDSpPe5KDplhERUve3KGJGVXYQ==","shasum":"9b3347ea5fc4fe9660a77750d793181255627fec","tarball":"https://registry.npmjs.org/@fluent-blocks/react/-/react-9.1.0-next.1.tgz","fileCount":336,"unpackedSize":658926,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQZGu2abVPQRGBAd36fXpe8LdRuzZnIP1yYveI53sReQIgcKuQkjyXRXxz6JEOfInuClRNPglQvCNhx0vS9yoorsw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYH7PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrF0w//Y/QPtPTW4t0cTSdLanVz8d2mNg/2v8J6/r+RfMQQe+m6P8Wo\r\nq4iSOWkTRlyUM3YpeB0KAywV9hKFc4hsakMXLcgQsobglnxiskOd9GfqbDIA\r\n63quAkFxmjeApxCqk0JLh8VkcTMJOwEAJMKHKXhkz+puDFWs44vqump00IEM\r\nOzrLf9CIjdLPfotjFfOUtjcI/Y3E7oovRGlF7exbnG5W870v7IfwYfAyLNeS\r\nx9k/+qd2onPGmhaMyGVT39Df76pX+3KLKGFccTETLSK4SDsi1ik3vwe7H4Ax\r\nqIAbspJj9oKX51qE54Kub7kyVJl7t2olDx4j2EogbO/CrZkMm9+RlkiUZR40\r\nW3wzXe4wXuUibHA1V53nhgsfLlV60XxSpYZkhFLr4Z7bdJWErlcUMDIEZQ/m\r\nh84oiEvT+IS9TmpAPAYnSWUTgNqte1ynmoM+kFWKrpL7brg+D0BMehqS4oLc\r\nITlw2WoUEKQOXhiHfAe1cANUSYuXUZETFknyh3KYV/upOwOL/Pj9jRBMcgf9\r\nITObA1fFAiPwvVvHra6AEl5MJPOuYOEPJrHXc+EAvGiNbCNdYM9oGMWI+LB6\r\nIWh1lFgn8vYyjYXBxCc2e7/jVmUrDsdQQdvwQFg3xM0xBYVpUxQkfkkYw87q\r\nil/oR3cvSCWKQTVEgPjz1pRBRCxX0Mjz4XQ=\r\n=D677\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"msdstwg","email":"willshown@microsoft.com"},"directories":{},"maintainers":[{"name":"msdstwg","email":"willshown@microsoft.com"},{"name":"thure","email":"npm@willshown.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_9.1.0-next.1_1650491086893_0.13295966380147473"},"_hasShrinkwrap":false},"9.1.0-next.2":{"name":"@fluent-blocks/react","version":"9.1.0-next.2","repository":{"type":"git","url":"git+ssh://git@github.com/OfficeDev/fluent-blocks.git"},"authors":["Will Shown ","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^6"},"peerDependencies":{"@fluentui/react-components":"latest","@types/react":">=16.13.1 <19","@types/react-dom":">=16.13.1 <19","chart.js":"^2.9.4","react":">=16.13.1 <19","react-dom":">=16.13.1 <19"},"devDependencies":{"@babel/core":"latest","@fluentui/react-components":"latest","@storybook/addon-actions":"next","@storybook/addon-essentials":"next","@storybook/addon-links":"next","@storybook/addons":"next","@storybook/react":"next","@storybook/theming":"next","@types/chart.js":"^2.9.29","@types/faker":"^5.1.2","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.18","@types/react":"18.x","@types/react-dom":"18.x","@types/react-test-renderer":"latest","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.19","expect":"latest","faker":"github:thure/faker.js#v5.1.2","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":"18.x","react-dom":"18.x","react-test-renderer":"latest","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.1.0-next.2","@fluent-blocks/schemas":"9.1.0-next.2","@fluentui/react-tabster":"latest","lodash":"latest"},"scripts":{"build":"just-scripts build","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"node ./scripts/prebuildsb.js && build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","readme":"\"Fluent\n\n### [Open Storybook ↗︎][storybook]\n\nFluent Blocks is a React implementation of [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs for app development based on [`@fluentui/react-components`][fluentui-v9]. This project succeeds [`@fluentui/react-teams`][react-teams].\n\nThis package provides a set of components developers can use to build fully interactive & accessible experiences using whatever React coding convention they prefer, rendering experiences that match Fluent & UI Kit designs.\n\n## ⚠️ In active development\n\nThis project’s API is subject to unannounced breaking changes and is not yet on any release cycle.\n\n## Development & contributing\n\nIf you’d like to run the development environment or contribute to this project, please see [the Contributing file](CONTRIBUTING.md).\n\n## Getting started\n\nUsing TypeScript and an IDE that supports type inspections will make using this project much easier!\n\n1. Add `react@17`, `react-dom@17`, and `@fluentui/react-components@latest` if they’re not in your project already\n2. Add `chart.js@^2.9.4` if you want to use charts from this package\n3. Depending on your package manager, you may need to add `@fluent-blocks/basic-icons` to use icons\n4. Finally, install this package, `@fluent-blocks/react@alpha`, using your package manager\n\nNow anywhere you can use React, you can use Fluent Blocks. If you want to delegate the entire viewport to Fluent Blocks, use the `View` component on its own:\n\n```tsx\nimport { View, Escape } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n …for real this time.\n ,\n secondary: {\n actionId: 'start',\n label: 'Get started',\n icon: 'arrow_right',\n iconPosition: 'after'\n }\n }\n }\n },\n ],\n }}/>,\n document.getElementById('root')\n)\n```\n\nIf you want to use Fluent Blocks’ intermediary components, wrap where any will render in a single `FluentBlocksProvider` (there only needs to be one on the page):\n\n```tsx\nimport { FluentBlocksProvider, Illustration } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n \n ,\n document.getElementById('root')\n)\n```\n\n## How design pattern usage is validated through types\n\nSince the goal of this library is to aid in implementing experiences that conform to [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs and principles, it brings with it those design systems’ opinions. Each component has a concept for what kind of properties & content it accepts, which can be provided in one of two ways:\n\n1. As serializeable **props**, e.g. `{icon: 'fluent', size: 24}`\n1. As a JSX **element**, e.g. ``\n\nThe bolded terms are used in the TypeScript types for the components in this project, e.g. a valid icon instance matches `IconPropsOrElement`, which is either 1) `IconProps`, or 2) `IconElement`.\n\nFor consistency between the two syntaxes, the `children` prop and its implicit nesting equivalent in JSX is avoided in favor of named content props that parallel the serializeable syntax.\n\nSome top-level components like `View` will check the props it was provided and provide a detailed error if the props are incorrect in any way. All other components won’t check for issues and will simply refuse to render unexpected content. In either case, developers can explicitly mark where exceptions should be made using the `Escape` component described below.\n\n## Escaping validation\n\nThese components won’t render a component that has unexpected props or content, unless you use `Escape`. If you feel the need to use a pattern not provided by this project, you can do so using the `Escape` component as a JSX element in any of a component’s content props that aren’t “tightly-bound”, e.g.:\n\n```tsx\n// Only Escape imported from this package will render,\n// so make sure you’ve imported it:\nimport { Section, Escape } from '@fluentui/react-blocks';\n\n\n You can put anything here\n and it will be rendered.\n ,\n ]}\n/>\n```\n\n### Exceptions: tightly bound components\n\nA component may ignore `Escape` only if it is “tightly-bound” with another component. Components are tightly-bound when they make sense only when used together, e.g. `Layout` and `LayoutItem` where `Layout` will only render `LayoutItems` in its `items` prop. If you need to render special content in such a situation, you can either replace the entire parent with `Escape`, or use `Escape` as the _content_ of one of the children.\n\n### Escape inclusively, and share your designs!\n\nMake sure the content you add using `Escape` conforms to [WCAG 2.1][wcag] and is designed inclusively.\n\nIf you would like to share your pattern with the community, [we’d welcome your contribution](CONTRIBUTING.md)! We’d all thank you to submit PR’s that extend this project with your accessible high-quality patterns.\n\n## Concepts\n\nThis library harmonizes the patterns in Fluent and the UI Kit with concepts from web layout & interactivity by delivering components organized into these categories:\n\n- General components based on [formatting context][fmtctx]:\n - `Block` vs `Inline`\n- Specialized clusters of components with shared interactivity considerations:\n - **Media**, e.g.:\n - `Illustration`\n - `Chart`\n - **Inputs**, e.g.:\n - `RadioGroup`\n - `ShortTextInput`\n- **Surfaces**, each of which expect to be unique in a given view\n- **Views**, the top-level components which render an entire UI in a viewport\n\nAny component may also have **Exemplars**, which render the same component but with a specialized API surface optimized for a specific use-case for the pattern, e.g. `Widget` always renders a `Card` though its props are based on the more constrained scope of content for cards in a dashboard from the UI Kit.\n\n## Icons\n\nThis project supports using icons from [`fluentui-system-icons`][fluent-icons] through SVG sprites implemented in [an experimental fork of that project](https://github.com/thure/fluentui-system-icons/tree/master/packages/svg-sprites). The `Icon` component will render an SVG of the appropriate size containing a `use` element with an `href` to the appropriate sprite, e.g.:\n\n```tsx\n// If used wherever `InlineSequence` or `IconPropsOrElement` is accepted,\n// both the props syntax and element syntax will be rendered the same way.\nconst catIcon =\n { icon: 'animal_cat', size: 24, variant: 'outline' } ||\n \n```\n\nThis project currently expects any requests to `/sprites/**` to serve an SVG sprite with the appropriate content, which for the Storybook development server is proxied to a specific release on jsDelivr.\n\nIn your own project, we recommend serving just the sprites you need locally if possible. Do not use proxies for icons in production.\n\n[figma-fluent]: https://www.figma.com/community/file/836828295772957889/Microsoft-Fluent-Web\n[figma-uikit]: https://www.figma.com/community/file/916836509871353159/Microsoft-Teams-UI-Kit\n[fluent-icons]: https://github.com/microsoft/fluentui-system-icons\n[fluentui-v9]: https://www.npmjs.com/package/@fluentui/react-components\n[react-teams]: https://www.npmjs.com/package/@fluentui/react-teams\n[storybook]: https://aka.ms/fluent-blocks-storybook\n[wcag]: https://www.w3.org/TR/WCAG21\n[fmtctx]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow\n","_resolved":"","_integrity":"","_from":"file:fluent-blocks-react-9.1.0-next.2.tgz","description":"\"Fluent","bugs":{"url":"https://github.com/OfficeDev/fluent-blocks/issues"},"homepage":"https://github.com/OfficeDev/fluent-blocks#readme","_id":"@fluent-blocks/react@9.1.0-next.2","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-hXBTKZKDARA0o+cMFe3IgqtU6NsO2dRho6QQ+WhekyiRfTjYxFVxK18cBEBaOQVKBMR4l0XsANHnVoNGl7genQ==","shasum":"5e7299a8a9ba5779a8083a61cd5f6033ddad8b65","tarball":"https://registry.npmjs.org/@fluent-blocks/react/-/react-9.1.0-next.2.tgz","fileCount":336,"unpackedSize":662023,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICy+bNbP4NrGlefOKdkwoyDb7QqmDIIeel9MsAs24q1kAiAZS/SqyvpvpAD4XulGJNSj6suDe1b/HPl/ZwJuEcwzGw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZ5VeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFzhAAj0VkgIUK3k3f5MCN+Asvl6BUS+frNzW1f5wi8a3cltg8bpN0\r\nxM5KDPWMdQSsNs8qptNhe7VMnmnssECLIv6pOFY8g08qWxByghHsxsDj179C\r\nWhw2cnIlvAzFAyWah+fWyjvS4xfdnvQLDI5UufPEfkgBvTXE48g6+lPiZx6H\r\nDmYVode+Zb0Xz0m0ecZ3SrT0DefzJAZa69xSq2bIPOAHNZf47IK927YySjxL\r\n0taSBzv9eTCOr9DubWc75/7wolXmtfg3Q1TNikeYFfUhyvVCPlVRjMYJVxU1\r\nJIdj0sWT1P19Nh8+b5aS3ieEHcW1GNBLF5RqCc2igS9vV8v3znvkf0J1FPzd\r\nq3P095/RdRm3XskQVUykpR92uaT+zz4VPm8w0Dmtv/T5ee4XYzUK93OU8XKk\r\n/T50J3HMLXlO97HD/5QROCdaOEQuyeQehJH8Fr9CLFBygEq1kj/R8C7zx6Ue\r\nN8vHN61N8XKNLw2NW+rIVS6WgGj5IcLrCKvCuG98oz/5fP/dcMztCGW0xPIm\r\naL5SlVWiclKQLGtXP/kzemddcRZgUoaiPUCS+eVdhYRDd3yrmCWbGhr37+Dn\r\nmDU86ZP1kCjCym3wM9BYsdLQKAlb7AXwcUSVyNQLqeGaXaEb+zLZejuZ/APq\r\nJmLib78jXa45kUlqfuO8IbtJz2WDYqk502U=\r\n=MVzG\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"msdstwg","email":"willshown@microsoft.com"},"directories":{},"maintainers":[{"name":"msdstwg","email":"willshown@microsoft.com"},{"name":"thure","email":"npm@willshown.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_9.1.0-next.2_1650955614337_0.15525423827924323"},"_hasShrinkwrap":false},"9.1.0-next.3":{"name":"@fluent-blocks/react","version":"9.1.0-next.3","repository":{"type":"git","url":"git+ssh://git@github.com/OfficeDev/fluent-blocks.git"},"authors":["Will Shown ","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^6"},"peerDependencies":{"@fluentui/react-components":"latest","@types/react":">=16.13.1 <19","@types/react-dom":">=16.13.1 <19","chart.js":"^2.9.4","react":">=16.13.1 <19","react-dom":">=16.13.1 <19"},"devDependencies":{"@babel/core":"latest","@fluentui/react-components":"latest","@storybook/addon-actions":"next","@storybook/addon-essentials":"next","@storybook/addon-links":"next","@storybook/addons":"next","@storybook/react":"next","@storybook/theming":"next","@types/chart.js":"^2.9.29","@types/faker":"^5.1.2","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.18","@types/react":"18.x","@types/react-dom":"18.x","@types/react-test-renderer":"latest","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.19","expect":"latest","faker":"github:thure/faker.js#v5.1.2","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":"18.x","react-dom":"18.x","react-test-renderer":"latest","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.1.0-next.2","@fluent-blocks/colors":"9.1.0-next.1","@fluent-blocks/schemas":"9.1.0-next.3","@fluentui/react-tabster":"latest","lodash":"latest"},"scripts":{"build":"just-scripts build","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"node ./scripts/prebuildsb.js && build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","readme":"\"Fluent\n\n### [Open Storybook ↗︎][storybook]\n\nFluent Blocks is a React implementation of [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs for app development based on [`@fluentui/react-components`][fluentui-v9]. This project succeeds [`@fluentui/react-teams`][react-teams].\n\nThis package provides a set of components developers can use to build fully interactive & accessible experiences using whatever React coding convention they prefer, rendering experiences that match Fluent & UI Kit designs.\n\n## ⚠️ In active development\n\nThis project’s API is subject to unannounced breaking changes and is not yet on any release cycle.\n\n## Development & contributing\n\nIf you’d like to run the development environment or contribute to this project, please see [the Contributing file](CONTRIBUTING.md).\n\n## Getting started\n\nUsing TypeScript and an IDE that supports type inspections will make using this project much easier!\n\n1. Add `react@17`, `react-dom@17`, and `@fluentui/react-components@latest` if they’re not in your project already\n2. Add `chart.js@^2.9.4` if you want to use charts from this package\n3. Depending on your package manager, you may need to add `@fluent-blocks/basic-icons` to use icons\n4. Finally, install this package, `@fluent-blocks/react@alpha`, using your package manager\n\nNow anywhere you can use React, you can use Fluent Blocks. If you want to delegate the entire viewport to Fluent Blocks, use the `View` component on its own:\n\n```tsx\nimport { View, Escape } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n …for real this time.\n ,\n secondary: {\n actionId: 'start',\n label: 'Get started',\n icon: 'arrow_right',\n iconPosition: 'after'\n }\n }\n }\n },\n ],\n }}/>,\n document.getElementById('root')\n)\n```\n\nIf you want to use Fluent Blocks’ intermediary components, wrap where any will render in a single `FluentBlocksProvider` (there only needs to be one on the page):\n\n```tsx\nimport { FluentBlocksProvider, Illustration } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n \n ,\n document.getElementById('root')\n)\n```\n\n## How design pattern usage is validated through types\n\nSince the goal of this library is to aid in implementing experiences that conform to [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs and principles, it brings with it those design systems’ opinions. Each component has a concept for what kind of properties & content it accepts, which can be provided in one of two ways:\n\n1. As serializeable **props**, e.g. `{icon: 'fluent', size: 24}`\n1. As a JSX **element**, e.g. ``\n\nThe bolded terms are used in the TypeScript types for the components in this project, e.g. a valid icon instance matches `IconPropsOrElement`, which is either 1) `IconProps`, or 2) `IconElement`.\n\nFor consistency between the two syntaxes, the `children` prop and its implicit nesting equivalent in JSX is avoided in favor of named content props that parallel the serializeable syntax.\n\nSome top-level components like `View` will check the props it was provided and provide a detailed error if the props are incorrect in any way. All other components won’t check for issues and will simply refuse to render unexpected content. In either case, developers can explicitly mark where exceptions should be made using the `Escape` component described below.\n\n## Escaping validation\n\nThese components won’t render a component that has unexpected props or content, unless you use `Escape`. If you feel the need to use a pattern not provided by this project, you can do so using the `Escape` component as a JSX element in any of a component’s content props that aren’t “tightly-bound”, e.g.:\n\n```tsx\n// Only Escape imported from this package will render,\n// so make sure you’ve imported it:\nimport { Section, Escape } from '@fluentui/react-blocks';\n\n\n You can put anything here\n and it will be rendered.\n ,\n ]}\n/>\n```\n\n### Exceptions: tightly bound components\n\nA component may ignore `Escape` only if it is “tightly-bound” with another component. Components are tightly-bound when they make sense only when used together, e.g. `Layout` and `LayoutItem` where `Layout` will only render `LayoutItems` in its `items` prop. If you need to render special content in such a situation, you can either replace the entire parent with `Escape`, or use `Escape` as the _content_ of one of the children.\n\n### Escape inclusively, and share your designs!\n\nMake sure the content you add using `Escape` conforms to [WCAG 2.1][wcag] and is designed inclusively.\n\nIf you would like to share your pattern with the community, [we’d welcome your contribution](CONTRIBUTING.md)! We’d all thank you to submit PR’s that extend this project with your accessible high-quality patterns.\n\n## Concepts\n\nThis library harmonizes the patterns in Fluent and the UI Kit with concepts from web layout & interactivity by delivering components organized into these categories:\n\n- General components based on [formatting context][fmtctx]:\n - `Block` vs `Inline`\n- Specialized clusters of components with shared interactivity considerations:\n - **Media**, e.g.:\n - `Illustration`\n - `Chart`\n - **Inputs**, e.g.:\n - `RadioGroup`\n - `ShortTextInput`\n- **Surfaces**, each of which expect to be unique in a given view\n- **Views**, the top-level components which render an entire UI in a viewport\n\nAny component may also have **Exemplars**, which render the same component but with a specialized API surface optimized for a specific use-case for the pattern, e.g. `Widget` always renders a `Card` though its props are based on the more constrained scope of content for cards in a dashboard from the UI Kit.\n\n## Icons\n\nThis project supports using icons from [`fluentui-system-icons`][fluent-icons] through SVG sprites implemented in [an experimental fork of that project](https://github.com/thure/fluentui-system-icons/tree/master/packages/svg-sprites). The `Icon` component will render an SVG of the appropriate size containing a `use` element with an `href` to the appropriate sprite, e.g.:\n\n```tsx\n// If used wherever `InlineSequence` or `IconPropsOrElement` is accepted,\n// both the props syntax and element syntax will be rendered the same way.\nconst catIcon =\n { icon: 'animal_cat', size: 24, variant: 'outline' } ||\n \n```\n\nThis project currently expects any requests to `/sprites/**` to serve an SVG sprite with the appropriate content, which for the Storybook development server is proxied to a specific release on jsDelivr.\n\nIn your own project, we recommend serving just the sprites you need locally if possible. Do not use proxies for icons in production.\n\n[figma-fluent]: https://www.figma.com/community/file/836828295772957889/Microsoft-Fluent-Web\n[figma-uikit]: https://www.figma.com/community/file/916836509871353159/Microsoft-Teams-UI-Kit\n[fluent-icons]: https://github.com/microsoft/fluentui-system-icons\n[fluentui-v9]: https://www.npmjs.com/package/@fluentui/react-components\n[react-teams]: https://www.npmjs.com/package/@fluentui/react-teams\n[storybook]: https://aka.ms/fluent-blocks-storybook\n[wcag]: https://www.w3.org/TR/WCAG21\n[fmtctx]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow\n","_resolved":"","_integrity":"","_from":"file:fluent-blocks-react-9.1.0-next.3.tgz","description":"\"Fluent","bugs":{"url":"https://github.com/OfficeDev/fluent-blocks/issues"},"homepage":"https://github.com/OfficeDev/fluent-blocks#readme","_id":"@fluent-blocks/react@9.1.0-next.3","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-ytRK0ZV/lo8qKNSIrTP+XHFpV3k7InF3JSoD21okRM3PdOdXfLVQsDrfxInIwJ03gva/rrQ4DBNNQE+2wnD3NA==","shasum":"5f3be8e4c6a14a3befb2915f29e83a3ac8d42180","tarball":"https://registry.npmjs.org/@fluent-blocks/react/-/react-9.1.0-next.3.tgz","fileCount":340,"unpackedSize":668219,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFPffLzq7LGPhEj7xh8M6tQhRzjVkKVTN8CKbmPkyBxBAiEAvfvC2z1NT6v6yiQfCfpbxZbRWVq1Ti7gsqIC2w4Rw/0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicuteACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqusQ/+OV2wGEs4DIZ7D8Yq1KlS9r4ApV7FXXmuXCS9oVsmxbXGFuG1\r\nRVT7jlqZ7OXzfctrxMGh6+uCpWJZOllBOWFhVpmzHshqV2Iofuumaf5NbnQ8\r\nltjvtdqa8YKn9v0JCBLTgjcFvNiPsw2vdnsQQmFAXv05l8o5Up/2hE20mUZ/\r\nJPxZ86YDwXXL+29E3k2Xzu066t3mmVNYyxwF2rMfSnAt8p9jfV85yvqU4od5\r\nc0jkmhx5z6cdceltp5ee1Aiuo6Z6w9P2Z9NaGI64m41/qFh47vTk6D3Lxbue\r\n0k4UmlP2tYUU32sXgKMCXKl1naBD3dGeHWvgijCvkNHLMirJwFiMz4HtpboU\r\nSutoXs22SSPj5UqtQTL8XFzYtJF6Pom4rJF0OKZd0MczMXYGBM71jlNIlObP\r\nTSOyzZUm+qpQFiaNo4EVmH3fIxTQUwWfDLiwBUUWGKA/8N8HkAqZRaEnVr95\r\nR3Zewk4mIEXYHkN3AVLH37A+Symde++2utow3s3m1BsB+CaOAP12TsDHkGjK\r\nK5zFRu1btu00eatQku4GjsfOTPQ226wm9l2r3asIqHXsXSBXt33DbYOj9NeD\r\nM8kdRaNwK0LqyQIMRlzGmmfZK91WT93MkbLK7iLGbL5os/HgOHCWUBUgA/Mz\r\n2Fq8c8FYtit0m8nF5LKzYXeJ09YROsbF+aU=\r\n=/np9\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"msdstwg","email":"willshown@microsoft.com"},"directories":{},"maintainers":[{"name":"msdstwg","email":"willshown@microsoft.com"},{"name":"thure","email":"npm@willshown.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_9.1.0-next.3_1651698525914_0.9099127229403667"},"_hasShrinkwrap":false},"9.1.0-next.4":{"name":"@fluent-blocks/react","version":"9.1.0-next.4","repository":{"type":"git","url":"git+ssh://git@github.com/OfficeDev/fluent-blocks.git"},"authors":["Will Shown ","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^6"},"peerDependencies":{"@fluentui/react-components":"latest","@types/react":">=16.13.1 <19","@types/react-dom":">=16.13.1 <19","chart.js":"^2.9.4","react":">=16.13.1 <19","react-dom":">=16.13.1 <19"},"devDependencies":{"@babel/core":"latest","@fluentui/react-components":"^9.0.0-rc.10","@storybook/addon-actions":"next","@storybook/addon-essentials":"next","@storybook/addon-links":"next","@storybook/addons":"next","@storybook/react":"next","@storybook/theming":"next","@types/chart.js":"^2.9.29","@types/faker":"^5.1.2","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.18","@types/react":"18.x","@types/react-dom":"18.x","@types/react-test-renderer":"latest","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.19","expect":"latest","faker":"github:thure/faker.js#v5.1.2","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":"18.x","react-dom":"18.x","react-test-renderer":"latest","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.1.0-next.2","@fluent-blocks/colors":"9.1.0-next.1","@fluent-blocks/schemas":"9.1.0-next.3","@fluentui/react-tabster":"latest","lodash":"latest"},"scripts":{"build":"just-scripts build","fluentui:upgrade":"pnpm update @fluentui/react-components","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"node ./scripts/prebuildsb.js && build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","readme":"\"Fluent\n\n### [Open Storybook ↗︎][storybook]\n\nFluent Blocks is a React implementation of [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs for app development based on [`@fluentui/react-components`][fluentui-v9]. This project succeeds [`@fluentui/react-teams`][react-teams].\n\nThis package provides a set of components developers can use to build fully interactive & accessible experiences using whatever React coding convention they prefer, rendering experiences that match Fluent & UI Kit designs.\n\n## ⚠️ In active development\n\nThis project’s API is subject to unannounced breaking changes and is not yet on any release cycle.\n\n## Development & contributing\n\nIf you’d like to run the development environment or contribute to this project, please see [the Contributing file](CONTRIBUTING.md).\n\n## Getting started\n\nUsing TypeScript and an IDE that supports type inspections will make using this project much easier!\n\n1. Add `react@17`, `react-dom@17`, and `@fluentui/react-components@latest` if they’re not in your project already\n2. Add `chart.js@^2.9.4` if you want to use charts from this package\n3. Depending on your package manager, you may need to add `@fluent-blocks/basic-icons` to use icons\n4. Finally, install this package, `@fluent-blocks/react`, using your package manager\n\nNow anywhere you can use React, you can use Fluent Blocks. If you want to delegate the entire viewport to Fluent Blocks, use the `View` component on its own:\n\n```tsx\nimport { View, Escape } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n …for real this time.\n ,\n secondary: {\n actionId: 'start',\n label: 'Get started',\n icon: 'arrow_right',\n iconPosition: 'after'\n }\n }\n }\n },\n ],\n }}/>,\n document.getElementById('root')\n)\n```\n\nIf you want to use Fluent Blocks’ intermediary components, wrap where any will render in a single `FluentBlocksProvider` (there only needs to be one on the page):\n\n```tsx\nimport { FluentBlocksProvider, Illustration } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n \n ,\n document.getElementById('root')\n)\n```\n\n## How design pattern usage is validated through types\n\nSince the goal of this library is to aid in implementing experiences that conform to [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs and principles, it brings with it those design systems’ opinions. Each component has a concept for what kind of properties & content it accepts, which can be provided in one of two ways:\n\n1. As serializeable **props**, e.g. `{icon: 'fluent', size: 24}`\n1. As a JSX **element**, e.g. ``\n\nThe bolded terms are used in the TypeScript types for the components in this project, e.g. a valid icon instance matches `IconPropsOrElement`, which is either 1) `IconProps`, or 2) `IconElement`.\n\nFor consistency between the two syntaxes, the `children` prop and its implicit nesting equivalent in JSX is avoided in favor of named content props that parallel the serializeable syntax.\n\nSome top-level components like `View` will check the props it was provided and provide a detailed error if the props are incorrect in any way. All other components won’t check for issues and will simply refuse to render unexpected content. In either case, developers can explicitly mark where exceptions should be made using the `Escape` component described below.\n\n## Escaping validation\n\nThese components won’t render a component that has unexpected props or content, unless you use `Escape`. If you feel the need to use a pattern not provided by this project, you can do so using the `Escape` component as a JSX element in any of a component’s content props that aren’t “tightly-bound”, e.g.:\n\n```tsx\n// Only Escape imported from this package will render,\n// so make sure you’ve imported it:\nimport { Section, Escape } from '@fluentui/react-blocks';\n\n\n You can put anything here\n and it will be rendered.\n ,\n ]}\n/>\n```\n\n### Exceptions: tightly bound components\n\nA component may ignore `Escape` only if it is “tightly-bound” with another component. Components are tightly-bound when they make sense only when used together, e.g. `Layout` and `LayoutItem` where `Layout` will only render `LayoutItems` in its `items` prop. If you need to render special content in such a situation, you can either replace the entire parent with `Escape`, or use `Escape` as the _content_ of one of the children.\n\n### Escape inclusively, and share your designs!\n\nMake sure the content you add using `Escape` conforms to [WCAG 2.1][wcag] and is designed inclusively.\n\nIf you would like to share your pattern with the community, [we’d welcome your contribution](CONTRIBUTING.md)! We’d all thank you to submit PR’s that extend this project with your accessible high-quality patterns.\n\n## Concepts\n\nThis library harmonizes the patterns in Fluent and the UI Kit with concepts from web layout & interactivity by delivering components organized into these categories:\n\n- General components based on [formatting context][fmtctx]:\n - `Block` vs `Inline`\n- Specialized clusters of components with shared interactivity considerations:\n - **Media**, e.g.:\n - `Illustration`\n - `Chart`\n - **Inputs**, e.g.:\n - `RadioGroup`\n - `ShortTextInput`\n- **Surfaces**, each of which expect to be unique in a given view\n- **Views**, the top-level components which render an entire UI in a viewport\n\nAny component may also have **Exemplars**, which render the same component but with a specialized API surface optimized for a specific use-case for the pattern, e.g. `Widget` always renders a `Card` though its props are based on the more constrained scope of content for cards in a dashboard from the UI Kit.\n\n## Icons\n\nThis project supports using icons from [`fluentui-system-icons`][fluent-icons] through SVG sprites implemented in [an experimental fork of that project](https://github.com/thure/fluentui-system-icons/tree/master/packages/svg-sprites). The `Icon` component will render an SVG of the appropriate size containing a `use` element with an `href` to the appropriate sprite, e.g.:\n\n```tsx\n// If used wherever `InlineSequence` or `IconPropsOrElement` is accepted,\n// both the props syntax and element syntax will be rendered the same way.\nconst catIcon =\n { icon: 'animal_cat', size: 24, variant: 'outline' } ||\n \n```\n\nThis project currently expects any requests to `/sprites/**` to serve an SVG sprite with the appropriate content, which for the Storybook development server is proxied to a specific release on jsDelivr.\n\nIn your own project, we recommend serving just the sprites you need locally if possible. Do not use proxies for icons in production.\n\n[figma-fluent]: https://www.figma.com/community/file/836828295772957889/Microsoft-Fluent-Web\n[figma-uikit]: https://www.figma.com/community/file/916836509871353159/Microsoft-Teams-UI-Kit\n[fluent-icons]: https://github.com/microsoft/fluentui-system-icons\n[fluentui-v9]: https://www.npmjs.com/package/@fluentui/react-components\n[react-teams]: https://www.npmjs.com/package/@fluentui/react-teams\n[storybook]: https://aka.ms/fluent-blocks-storybook\n[wcag]: https://www.w3.org/TR/WCAG21\n[fmtctx]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow\n","_resolved":"","_integrity":"","_from":"file:fluent-blocks-react-9.1.0-next.4.tgz","description":"\"Fluent","bugs":{"url":"https://github.com/OfficeDev/fluent-blocks/issues"},"homepage":"https://github.com/OfficeDev/fluent-blocks#readme","_id":"@fluent-blocks/react@9.1.0-next.4","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-bLxOFUk4bopDHueEB6lEW3dQPKEabJXpifiqh4ieWj3eDfQorwbRCIgxgVIpkKOHX7Q3kFNqgWsjjARpnylwNw==","shasum":"27b999679e75e1bd4709b350430d1d7dea99c621","tarball":"https://registry.npmjs.org/@fluent-blocks/react/-/react-9.1.0-next.4.tgz","fileCount":340,"unpackedSize":668018,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMMyiJSN8eKBRbrvOGnULobQ4YcSldDDCiE497SqobrwIgexCIW/IC3Pa5cHb6hwM7sRFTOJmZa8rodasmiysTYQE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieflPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/Gg/+IaX0IUh8Sy5WtMAIbtei5VWPM+XcWnTF/tHoY0iITG5Qs9DC\r\nJ/GHUaK1txB2VRwNhvgj1HF2wDuF9ASj+AtDQUEV6Wie5ULEUDF5/J4PR49n\r\nhVFmS3fHGZxCUcz5TQWIWFGQFYncktldV5Sn0Wyr/jlxTPXjNYbr+yNOawSN\r\nfIa9MFA7xIIdGAmjWmq8ADI8WATly0WWUsttA+g5X3t5ENCQvPc2kAkpoIFX\r\nR+Un2S/Npam20ZCOMFt1MnckZMm9J1Wxk1gKG0udfgUv5i7ZtezcrCjP2orU\r\nRoEGyQh2yPw0xzIzRCLQly9u8iOLFPvKMeE4EUIrXznIs8EwBU5gaKRyCzpA\r\nu67yIKGVNmAAWpk2SynrU0b3CCj/O4oWpBytYam3ngmna9xGPjyGykqEgg/m\r\njLPoTUgTvJHtBJQXYoqlZHyF8+coXwZWmVB4i7CYGNr+luoLQLnPLq54gKmX\r\nTfc79g16Io1EwynmXDzY9GJCDwfQK0MTlENbJuJXPveZZTKZ4fSV2/WkEuEl\r\nYtuVhMCdgTVNcYI+VO8c+YVjILW82buwkQRegbIR8gV2VVnDCgOrrBWOw8LH\r\n+l8wCO+Y4/juYx27vNJ5PUcIINA6srOHzxBdIIlsAMYib6ldAtOhjQ0etG6j\r\n9Nq6amQGiJJANshPQPTN62MGyeM7m22aChE=\r\n=gLMk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"msdstwg","email":"willshown@microsoft.com"},"directories":{},"maintainers":[{"name":"msdstwg","email":"willshown@microsoft.com"},{"name":"thure","email":"npm@willshown.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_9.1.0-next.4_1652160847003_0.3325148099873598"},"_hasShrinkwrap":false},"9.1.0":{"name":"@fluent-blocks/react","version":"9.1.0","repository":{"type":"git","url":"git+ssh://git@github.com/OfficeDev/fluent-blocks.git"},"authors":["Will Shown ","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^6"},"peerDependencies":{"@fluentui/react-components":"latest","@types/react":">=16.13.1 <19","@types/react-dom":">=16.13.1 <19","chart.js":"^2.9.4","react":">=16.13.1 <19","react-dom":">=16.13.1 <19"},"devDependencies":{"@babel/core":"latest","@fluentui/react-components":"^9.0.0-rc.10","@storybook/addon-actions":"next","@storybook/addon-essentials":"next","@storybook/addon-links":"next","@storybook/addons":"next","@storybook/react":"next","@storybook/theming":"next","@types/chart.js":"^2.9.29","@types/faker":"^5.1.2","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.18","@types/react":"18.x","@types/react-dom":"18.x","@types/react-test-renderer":"latest","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.19","expect":"latest","faker":"github:thure/faker.js#v5.1.2","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":"18.x","react-dom":"18.x","react-test-renderer":"latest","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.1.0","@fluent-blocks/colors":"9.1.0","@fluent-blocks/schemas":"9.1.0","@fluentui/react-tabster":"latest","lodash":"latest"},"scripts":{"build":"just-scripts build","fluentui:upgrade":"pnpm update @fluentui/react-components","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"node ./scripts/prebuildsb.js && build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","_resolved":"","_integrity":"","_from":"file:fluent-blocks-react-9.1.0.tgz","description":"\"Fluent","bugs":{"url":"https://github.com/OfficeDev/fluent-blocks/issues"},"homepage":"https://github.com/OfficeDev/fluent-blocks#readme","_id":"@fluent-blocks/react@9.1.0","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-yTpO4DkHfTGoxrn8660Fy1Q39e20rgyNLWVy8r0/mh11zIL9QAXRDHx9GXuyMD7RPyIevlVKQNnyCkgXApwdmA==","shasum":"6f99d650b11e067db3179fee9941b5ebdae4a3ad","tarball":"https://registry.npmjs.org/@fluent-blocks/react/-/react-9.1.0.tgz","fileCount":340,"unpackedSize":667990,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID808uIkJDKXZGnOEq9HirxjXR4rFiMApq6a3nwtBYwPAiEA1bC8DmGu1+GyUnUs+BZHnVyacIgqLSR84im+yx3+p6k="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiehgeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+Gg//fc6Rzac/5Pvm1Id7zT7ZEZDvfOd1twGSSCq1PeRTEap4PZTQ\r\nuTcgHW1GVeWaT1gO81Csjq0om0Mg9YPs1FMRkG7Pdx+pUnVhbTr6BvfmJVwm\r\naj3uZ0kZQUboRF3B4acD/YK70L1lK71xELHkcksEP7AJ0rpqG8v0mPQxeK8c\r\nDAoCA1ONA0q1qXyvVKINXbOUNmQ+FspaGv6bqbMJPS59BRGWOTcl0fICk7Fh\r\nvJtrsx6v64mpOTOimpJRQmSQHU36RFnQRM0Qa5R7+F7RDw8ncqV19qfhgQtJ\r\nXZQx4gX5m0BP7Iq+aGRkdYtEMEzg9yReHPNawAd9OVqFN8VvdJo5mSWajpi+\r\no0w6UGwXinv8X2uZG25N3WOTHmF5AmsITsHLR865cIxiJFw+nB/br4sPQd7g\r\nm8Z3on+PbmlN2NlPVGD+LjDWKtiqjRuVBEbTpETW3Xj1z67Mucrf0s+x+d9J\r\n2Bcyo3bU/ihfkFfqo8IKDhZJb7P9gb4qyEazAduaFhp1y6b7C8D4+eMfATZc\r\nrHEjIA/lwQdDYKbw0Gbr7h9E9jXZ9qWkWrh9z78fBNeckejGLGN4KvieLLzt\r\ns9FIefRYtinQlPLzq8EccobtecUEIbzO98aHT71WXfygb1JbyToM1jLi3hBI\r\nMZBDyscnWx0rQplizI00oitJwj8LX9M2oWs=\r\n=2RrN\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"msdstwg","email":"willshown@microsoft.com"},"directories":{},"maintainers":[{"name":"msdstwg","email":"willshown@microsoft.com"},{"name":"thure","email":"npm@willshown.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_9.1.0_1652168734557_0.902740972737258"},"_hasShrinkwrap":false},"9.1.1":{"name":"@fluent-blocks/react","version":"9.1.1","repository":{"type":"git","url":"git+ssh://git@github.com/OfficeDev/fluent-blocks.git"},"authors":["Will Shown ","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^6"},"peerDependencies":{"@fluentui/react-components":"9.0.0-rc.10","@types/react":">=16.13.1 <19","@types/react-dom":">=16.13.1 <19","chart.js":"^2.9.4","react":">=16.13.1 <19","react-dom":">=16.13.1 <19"},"devDependencies":{"@babel/core":"latest","@fluentui/react-components":"9.0.0-rc.10","@storybook/addon-actions":"next","@storybook/addon-essentials":"next","@storybook/addon-links":"next","@storybook/addons":"next","@storybook/react":"next","@storybook/theming":"next","@types/chart.js":"^2.9.29","@types/faker":"^5.1.2","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.18","@types/react":"18.x","@types/react-dom":"18.x","@types/react-test-renderer":"latest","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.19","expect":"latest","faker":"github:thure/faker.js#v5.1.2","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":"18.x","react-dom":"18.x","react-test-renderer":"latest","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.1.0","@fluent-blocks/colors":"9.1.0","@fluent-blocks/schemas":"9.1.0","@fluentui/react-tabster":"9.0.0-rc.9","lodash":"^4.17.21"},"scripts":{"build":"just-scripts build","fluentui:upgrade":"pnpm update @fluentui/react-components","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"node ./scripts/prebuildsb.js && build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","_resolved":"","_integrity":"","_from":"file:fluent-blocks-react-9.1.1.tgz","description":"\"Fluent","bugs":{"url":"https://github.com/OfficeDev/fluent-blocks/issues"},"homepage":"https://github.com/OfficeDev/fluent-blocks#readme","_id":"@fluent-blocks/react@9.1.1","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-9evT2CYuO2LCo/O4k+fSIyigxeTEHXsB9J4hYyaOJ00q7tXAgingkPe7ZV67WH14mrtWgwzDVd9NGsaN2iwMTg==","shasum":"59ad5e428bca18903e64ed2b6df9b7e277c54c08","tarball":"https://registry.npmjs.org/@fluent-blocks/react/-/react-9.1.1.tgz","fileCount":340,"unpackedSize":668000,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFz2z+odqzRJ6f/7xzC1/AUzYBNo3WkPt9OlKmsQ0wnNAiEA8LWnzQ8ZLKbvrlelCkS2LgMsqo2/rSOnCXDpytKoquM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieqjBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQ7RAAis++o2ZVHx2Dobjrw/jPmQrc371m+Q+tSrUlgPslqOXg6lDy\r\nDS8UxSobVXPtWToW/rhNbVSxH0wpS2qwaBQvi26hwf8UsyiXNkg+pZTfO5OX\r\nyGOR2fz9MxUbU06HDcRcWnJT84xMfyCzz3BJusL8gsiC6WNPCFEY5XMpfk+Q\r\nW/rCLFsGUmekVVe9haH/XMgkpHH/g337mRbiBEjf9EcdOF5kls24cf7WeV7a\r\nsihgXXIjOjifxlhm6i1CskfvGJxzl0Iny6BCKAnK1iPKAb3T3iFF62mg++Aw\r\nEFNcctgm+7v3v2Lcaxynv8NKBrg4vUdbCaYRebIsIJDTl52w6ohC0FKz2gff\r\ndT7hv8mBBdggLDiB84xavYfg2NOouVTXml+H4NoTzw/IBnCRlEPAc/EnPfTs\r\nG7HOYvyJtf6wPAHU0AK05X5KIsdOMm4B31X0QLDQ5IOSVLFiMXIS0+1JRim2\r\n/PWlSUf/Dm/4jFjVj/1UB1vRjSdCLLT+1Kodt+zNkrJqv8p4FiGD9AuhzOsk\r\n1nhFbgLDApR0drj3UmCENn1NX8ex9aSENEKuq4AnXo3sa4ikYBQe87SDsyLx\r\nb23HPLhpkhpTsE7vvwL653F/ep8z4JIJ5g4njvvgO88DGpqENTTfS/SJadEq\r\ntxJ/dg/sm82kRnzSfoInk5eqzFfrCTG7z80=\r\n=fVRE\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"msdstwg","email":"willshown@microsoft.com"},"directories":{},"maintainers":[{"name":"msdstwg","email":"willshown@microsoft.com"},{"name":"thure","email":"npm@willshown.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_9.1.1_1652205761257_0.5163041466042617"},"_hasShrinkwrap":false},"9.1.2":{"name":"@fluent-blocks/react","version":"9.1.2","repository":{"type":"git","url":"git+ssh://git@github.com/OfficeDev/fluent-blocks.git"},"authors":["Will Shown ","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^6"},"peerDependencies":{"@fluentui/react-components":"9.0.0-rc.10","@types/react":">=16.13.1 <19","@types/react-dom":">=16.13.1 <19","chart.js":"^2.9.4","react":">=16.13.1 <19","react-dom":">=16.13.1 <19"},"devDependencies":{"@babel/core":"latest","@fluentui/react-components":"9.0.0-rc.10","@storybook/addon-actions":"next","@storybook/addon-essentials":"next","@storybook/addon-links":"next","@storybook/addons":"next","@storybook/react":"next","@storybook/theming":"next","@types/chart.js":"^2.9.29","@types/faker":"^5.1.2","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.18","@types/react":"18.x","@types/react-dom":"18.x","@types/react-test-renderer":"latest","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.19","expect":"latest","faker":"github:thure/faker.js#v5.1.2","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":"18.x","react-dom":"18.x","react-test-renderer":"latest","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.1.1","@fluent-blocks/colors":"9.1.0","@fluent-blocks/schemas":"9.1.0","@fluentui/react-tabster":"9.0.0-rc.9","lodash":"^4.17.21"},"scripts":{"build":"just-scripts build","fluentui:upgrade":"pnpm update @fluentui/react-components","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"node ./scripts/prebuildsb.js && build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","_resolved":"","_integrity":"","_from":"file:fluent-blocks-react-9.1.2.tgz","description":"\"Fluent","bugs":{"url":"https://github.com/OfficeDev/fluent-blocks/issues"},"homepage":"https://github.com/OfficeDev/fluent-blocks#readme","_id":"@fluent-blocks/react@9.1.2","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-Yfl8rDPYb9uoQUPN9QXNFWAs8/BmP7nosUsLwCsiErUGQmc0zlK/LenyPmEJwpVakCA0PxkNe/nXWn/16wu0eA==","shasum":"a473d11e71a2f3500063c9da60f35e0af9218cc3","tarball":"https://registry.npmjs.org/@fluent-blocks/react/-/react-9.1.2.tgz","fileCount":340,"unpackedSize":668000,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEMugZnyHMGpCC+1Q4IoGGIZRnRefEwOx/wIqptTYMRQAiEAjhv5yoViZplBvlCk4OQpKHIsXqGzii9jOqc8OTOQYpQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieq3iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpgJg//X8/FYcdxfcQPk6agt1EVqEGToi9FeTAUVdGbUBCMIUIg83GV\r\nW0pZyvo9bYSAin4LGHnVyQUSwxTTjkufv1OMNA3CaREZhAb5hVs3Uah30RO0\r\nl3PhtxMVKYhE++pHI9ldE0yJqqZ48sONCXZjniRA2m0omBBIrgDjnV8kKPkC\r\nRwDkRsz7hKMUsENDu0sE4txMSzJfdBEyF8aazlMiG/YSQL6HBNMQlQwiFmCf\r\nP00SUQZDMqN7jMJ3xTrzxf/6tbqnW75QL/VswdUcwNIRUrJowkEWwZfxZDOb\r\n9UrLDNMlDEQlVbeXyyzy3JBkmuDSPQnsr24fV+FWnoGosBZYrJjUyR2uPuKS\r\nLMq0HjpJLm2WTYzV5dDji38BAwcCuIxEEFC9I9Vft94dSR6vB1NxdBe+K2Uf\r\nlyjNiU+7fe92Wao535GlansFvFNDM2+eISCQp4nEN2J9I+9ITMrwnxTic3ox\r\nKggbW0Mn++4yw4Dy7O2AJ4hNfNcO1mARNk5XoAUVf4XIWnOmyNyY+Dz/M8Y5\r\ngaK02sAoF4bwwMTqCTaueSDPsiZgxoEztqti3BQ2i5o877C7cceOVpc/fSPo\r\nMlkSpal2lERu40KdFv0xjiPPgtRg/f2zdePSokPOT3eJERrd8uHYj5JTdFAO\r\nzPgewl9+2r6vMqANhJKM+9fbDW5K3L9Ogxo=\r\n=Lore\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"msdstwg","email":"willshown@microsoft.com"},"directories":{},"maintainers":[{"name":"msdstwg","email":"willshown@microsoft.com"},{"name":"thure","email":"npm@willshown.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_9.1.2_1652207074424_0.5589294232400295"},"_hasShrinkwrap":false},"9.1.3":{"name":"@fluent-blocks/react","version":"9.1.3","repository":{"type":"git","url":"git+ssh://git@github.com/OfficeDev/fluent-blocks.git"},"authors":["Will Shown ","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^6"},"peerDependencies":{"@fluentui/react-components":"9.0.0-rc.10","@types/react":">=16.13.1 <19","@types/react-dom":">=16.13.1 <19","chart.js":"^2.9.4","react":">=16.13.1 <19","react-dom":">=16.13.1 <19"},"devDependencies":{"@babel/core":"latest","@fluentui/react-components":"9.0.0-rc.10","@storybook/addon-actions":"next","@storybook/addon-essentials":"next","@storybook/addon-links":"next","@storybook/addons":"next","@storybook/react":"next","@storybook/theming":"next","@types/chart.js":"^2.9.29","@types/faker":"^5.1.2","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.18","@types/react":"18.x","@types/react-dom":"18.x","@types/react-test-renderer":"latest","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.19","expect":"latest","faker":"github:thure/faker.js#v5.1.2","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":"18.x","react-dom":"18.x","react-test-renderer":"latest","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.1.2","@fluent-blocks/colors":"9.1.0","@fluent-blocks/schemas":"9.1.0","@fluentui/react-tabster":"9.0.0-rc.9","lodash":"^4.17.21"},"scripts":{"build":"just-scripts build","fluentui:upgrade":"pnpm update @fluentui/react-components","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"cd ../icons && pnpm bundle && cd .. && cp icons/basic-icons.svg react/.storybook/public/basic-icons.svg && cd react && build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","_resolved":"","_integrity":"","_from":"file:fluent-blocks-react-9.1.3.tgz","description":"\"Fluent","bugs":{"url":"https://github.com/OfficeDev/fluent-blocks/issues"},"homepage":"https://github.com/OfficeDev/fluent-blocks#readme","_id":"@fluent-blocks/react@9.1.3","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-L3Gy8GFTQAsd73JAlC1+TS8HUOuR0pGe4D7qi1EGD37DS0hoy0aLtMC2hxxe7f+eoNTUoKtuy6dRUVx4xrZoTQ==","shasum":"0d76fcee086cba6e2a9b2b183194bc702d944dbc","tarball":"https://registry.npmjs.org/@fluent-blocks/react/-/react-9.1.3.tgz","fileCount":340,"unpackedSize":668087,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICRxqTe5MkB9WStJhXq4LTo6tc4Ai2Ch92yvUsh1RTxSAiEAv9Y+n1ipOsJvyXrvzN5ayILtWN13LZDQY+J0hB0DFMQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiesFNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzIhAAkDyrFemSyNssHq96jPQUJc6nyqHhsUyJ46u5TX7mHq0xRUTU\r\nIWkRO47InCYQLnm8EWejVqG8gBQwQL31lB3h5v4DznwVwV9cCKY3LQzMlPwM\r\nrknXYHWEUQV2zAfeAm8vbsN3mX+4BQmifVxP07Sg5GpWF6GFFUEyLRd9O8L0\r\nE840pIif5orCIib2iKFbhOtJKchVlvCp9z2me2uJypiW16TADdhjo0Go30JB\r\nluw2ZVCrKpHlYFXCHoPmYWqqCjvyfsy6Wzl6frykPJAen+AUZ4VQi0zQ43EE\r\nPipOs2lW1jcfw0anctoHCmo2XWtqCgYppBlxc/xX9Bpd/mw5SoiccQU3U8E+\r\nEF6FjoQZ6gpVIU2xWSFgtXfgBVKTjT4FYTnBBhxnPNHuD8vE1UF3VGIRuh6z\r\nrVK0lYs0HkZM91sRfhHf2GIJPpjPR2ttO/3UWSCI8MsjpKxxuwXzJOAFeZ+u\r\nAQlyp/Uch1jDfm/oyzVAbdufDueiKGKUuVQxbGPEhpYOQ5r9xfXPWsqozOqA\r\n68PxZX0Rk53e35WeX+MMBhOXMLymxAhpDH/nECqvO8wD/yjCeyGsUr0IXotd\r\nu2bRIQNKkRwiOFw2+ctJYf3w/+JbxZUJt/tTmlmKKIYFgFneW0GZQ8QtB4Sq\r\nEpagYNwb0w5Bt2vFR6HoTh+Wkwe44HqwXR4=\r\n=R2lp\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"msdstwg","email":"willshown@microsoft.com"},"directories":{},"maintainers":[{"name":"msdstwg","email":"willshown@microsoft.com"},{"name":"thure","email":"npm@willshown.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_9.1.3_1652212045484_0.9625042664749675"},"_hasShrinkwrap":false},"9.2.0-next.0":{"name":"@fluent-blocks/react","version":"9.2.0-next.0","repository":{"type":"git","url":"git+ssh://git@github.com/OfficeDev/fluent-blocks.git"},"authors":["Will Shown ","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^7"},"peerDependencies":{"@fluentui/react-components":"9.0.0-rc.14","chart.js":"^2.9.4","react":">=16.13.1 <19","react-dom":">=16.13.1 <19"},"devDependencies":{"@babel/core":"latest","@fluentui/react-components":"9.0.0-rc.14","@playwright/test":"latest","@storybook/addon-actions":"^6.5.5","@storybook/addon-essentials":"^6.5.5","@storybook/addon-links":"^6.5.5","@storybook/addons":"^6.5.5","@storybook/react":"^6.5.5","@storybook/theming":"^6.5.5","@types/chart.js":"^2.9.37","@types/faker":"^5.5.9","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.35","@types/react":"18.x","@types/react-dom":"18.x","@types/react-test-renderer":"latest","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.20","faker":"github:thure/faker.js#v5.1.2","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":"18.x","react-dom":"18.x","react-test-renderer":"latest","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.1.3-next.0","@fluent-blocks/colors":"9.1.1-next.0","@fluent-blocks/schemas":"9.2.0-next.0","@fluentui/react-tabster":"9.0.0-rc.13","@react-hook/resize-observer":"^1.2.5","lodash":"^4.17.21"},"scripts":{"build":"just-scripts build","fluentui:upgrade":"pnpm update @fluentui/react-components","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"cd ../icons && pnpm bundle && cd .. && cp icons/basic-icons.svg react/.storybook/public/basic-icons.svg && cd react && build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","_resolved":"","_integrity":"","_from":"file:fluent-blocks-react-9.2.0-next.0.tgz","readme":"\"Fluent\n\n### [Open Storybook ↗︎][storybook]\n\nFluent Blocks is a React implementation of [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs for app development based on [`@fluentui/react-components`][fluentui-v9]. This project succeeds [`@fluentui/react-teams`][react-teams].\n\nThis package provides a set of components developers can use to build fully interactive & accessible experiences using whatever React coding convention they prefer, rendering experiences that match Fluent & UI Kit designs.\n\n## ⚠️ In active development\n\nThis project’s API is subject to unannounced breaking changes and is not yet on any release cycle.\n\n## Development & contributing\n\nIf you’d like to run the development environment or contribute to this project, please see [the Contributing file](CONTRIBUTING.md).\n\n## Getting started\n\nUsing TypeScript and an IDE that supports type inspections will make using this project much easier!\n\n1. Add `react@17`, `react-dom@17`, and `@fluentui/react-components@latest` if they’re not in your project already\n2. Add `chart.js@^2.9.4` if you want to use charts from this package\n3. Depending on your package manager, you may need to add `@fluent-blocks/basic-icons` to use icons\n4. Install this package, `@fluent-blocks/react`, using your package manager\n\nNow anywhere you can use React, you can use Fluent Blocks. If you want to delegate the entire viewport to Fluent Blocks, use the `View` component on its own:\n\n```tsx\nimport { View, Escape } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n …for real this time.\n ,\n secondary: {\n actionId: 'start',\n label: 'Get started',\n icon: 'arrow_right',\n iconPosition: 'after'\n }\n }\n }\n },\n ],\n }}/>,\n document.getElementById('root')\n)\n```\n\nIf you want to use Fluent Blocks’ intermediary components, wrap where any will render in a single `FluentBlocksProvider` (there only needs to be one on the page):\n\n```tsx\nimport { FluentBlocksProvider, Illustration } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n \n ,\n document.getElementById('root')\n)\n```\n\nIn order to get the right background coverage and overflow behavior, you should apply `height: 100%` and `overflow: hidden` to the Fluent Blocks React root, and any parents of the Fluent Blocks React root should occupy the full height of whatever space Fluent Blocks should occupy.\n\nIf Fluent Blocks will render alone on the page, these rules are sufficient:\n\n```css\nhtml, body, #root {\n height: 100%;\n}\n#root {\n overflow: hidden;\n}\n```\n\n## How design pattern usage is validated through types\n\nSince the goal of this library is to aid in implementing experiences that conform to [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs and principles, it brings with it those design systems’ opinions. Each component has a concept for what kind of properties & content it accepts, which can be provided in one of two ways:\n\n1. As serializeable **props**, e.g. `{icon: 'fluent', size: 24}`\n1. As a JSX **element**, e.g. ``\n\nThe bolded terms are used in the TypeScript types for the components in this project, e.g. a valid icon instance matches `IconPropsOrElement`, which is either 1) `IconProps`, or 2) `IconElement`.\n\nFor consistency between the two syntaxes, the `children` prop and its implicit nesting equivalent in JSX is avoided in favor of named content props that parallel the serializeable syntax.\n\nSome top-level components like `View` will check the props it was provided and provide a detailed error if the props are incorrect in any way. All other components won’t check for issues and will simply refuse to render unexpected content. In either case, developers can explicitly mark where exceptions should be made using the `Escape` component described below.\n\n## Escaping validation\n\nThese components won’t render a component that has unexpected props or content, unless you use `Escape`. If you feel the need to use a pattern not provided by this project, you can do so using the `Escape` component as a JSX element in any of a component’s content props that aren’t “tightly-bound”, e.g.:\n\n```tsx\n// Only Escape imported from this package will render,\n// so make sure you’ve imported it:\nimport { Section, Escape } from '@fluentui/react-blocks';\n\n\n You can put anything here\n and it will be rendered.\n ,\n ]}\n/>\n```\n\n### Exceptions: tightly bound components\n\nA component may ignore `Escape` only if it is “tightly-bound” with another component. Components are tightly-bound when they make sense only when used together, e.g. `Layout` and `LayoutItem` where `Layout` will only render `LayoutItems` in its `items` prop. If you need to render special content in such a situation, you can either replace the entire parent with `Escape`, or use `Escape` as the _content_ of one of the children.\n\n### Escape inclusively, and share your designs!\n\nMake sure the content you add using `Escape` conforms to [WCAG 2.1][wcag] and is designed inclusively.\n\nIf you would like to share your pattern with the community, [we’d welcome your contribution](CONTRIBUTING.md)! We’d all thank you to submit PR’s that extend this project with your accessible high-quality patterns.\n\n## Concepts\n\nThis library harmonizes the patterns in Fluent and the UI Kit with concepts from web layout & interactivity by delivering components organized into these categories:\n\n- General components based on [formatting context][fmtctx]:\n - `Block` vs `Inline`\n- Specialized clusters of components with shared interactivity considerations:\n - **Media**, e.g.:\n - `Illustration`\n - `Chart`\n - **Inputs**, e.g.:\n - `RadioGroup`\n - `ShortTextInput`\n- **Surfaces**, each of which expect to be unique in a given view\n- **Views**, the top-level components which render an entire UI in a viewport\n\nAny component may also have **Exemplars**, which render the same component but with a specialized API surface optimized for a specific use-case for the pattern, e.g. `Widget` always renders a `Card` though its props are based on the more constrained scope of content for cards in a dashboard from the UI Kit.\n\n## Icons\n\nThis project supports using icons from [`fluentui-system-icons`][fluent-icons] through SVG sprites implemented in [an experimental fork of that project](https://github.com/thure/fluentui-system-icons/tree/master/packages/svg-sprites). The `Icon` component will render an SVG of the appropriate size containing a `use` element with an `href` to the appropriate sprite, e.g.:\n\n```tsx\n// If used wherever `InlineSequence` or `IconPropsOrElement` is accepted,\n// both the props syntax and element syntax will be rendered the same way.\nconst catIcon =\n { icon: 'animal_cat', size: 24, variant: 'outline' } ||\n \n```\n\nThis project currently expects any requests to `/sprites/**` to serve an SVG sprite with the appropriate content, which for the Storybook development server is proxied to a specific release on jsDelivr.\n\nIn your own project, we recommend serving just the sprites you need locally if possible. Do not use proxies for icons in production.\n\n[figma-fluent]: https://www.figma.com/community/file/836828295772957889/Microsoft-Fluent-Web\n[figma-uikit]: https://www.figma.com/community/file/916836509871353159/Microsoft-Teams-UI-Kit\n[fluent-icons]: https://github.com/microsoft/fluentui-system-icons\n[fluentui-v9]: https://www.npmjs.com/package/@fluentui/react-components\n[react-teams]: https://www.npmjs.com/package/@fluentui/react-teams\n[storybook]: https://aka.ms/fluent-blocks-storybook\n[wcag]: https://www.w3.org/TR/WCAG21\n[fmtctx]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow\n","readmeFilename":"README.md","description":"\"Fluent","bugs":{"url":"https://github.com/OfficeDev/fluent-blocks/issues"},"homepage":"https://github.com/OfficeDev/fluent-blocks#readme","_id":"@fluent-blocks/react@9.2.0-next.0","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-VzM/tbe+DcjkrLleEcvCFmYdrjNxlQKj6M+sVI0fpJzxUWUp0jOBgOXtTakMDJhJgdrO5YlcCP27cLbgaMGSFQ==","shasum":"1fc0f227829e019034e15789825e59ddd47f3f18","tarball":"https://registry.npmjs.org/@fluent-blocks/react/-/react-9.2.0-next.0.tgz","fileCount":420,"unpackedSize":759892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTcymEw0xHaOijcO1L2zR8XFdAX6VJi1LxE4TiVIC2WQIhAPliFV/y8clXjHBFk2pjCYBIyon4RCdCD3AQXeKEUscT"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqk0oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoCUw/7BZgnkOB5uvEfeuyBogZvHsxVwy0iqXlLs1xnhSp7o/pD/siz\r\nE4oOKmAt8+k2v85Jr0ibdYlga1XRZKC2u2YPjykOtEcGgn+9AHBjL8xWKZ2K\r\nkj6XzqhQI07R53m1RJ0sJA+kvs5HBnb4dqPSQDh3DcsMLyujP1frYZzaqa7Y\r\nkbcPKw4H2q5w9GbGHuCoQsiLr6Rhg1jUwpJMUd11+6mFWtKG9rHYLix7vpcj\r\nV5ncfo3U2nNooSMG6t3g355xhgdVXzP0fJiUmZ3DRFdbD+TrZSmX0W9T+1gA\r\nLAztkuahcz7oBjeWwWY0qikhLdJt+l8BMD3DVutPW4c6hcF0U6xbONOOVCq1\r\n6GYwd4B1QsePP5Nc12F0O7YhslLdQwmuEctVcAT6A06M5M7bMGU0Iftg/x9P\r\nHdBOkJ9uWRUQsrOybpwPGwllTW6hYjhFWA+fvLUMAyF1AW1KyiQC8iqkacUQ\r\nAvH1ubz3PFVNMKv6RGh/teOST7iiqI22yJHXgZgcuM40mC5Mj7U09RWfY8qp\r\n3D/z0C3oG3jL8a3UuTHiI13ybGplu4C3kCbkV0bC2DSW2Dm+JgcXOu/HS3y8\r\n3b2cIYJJZR0tLS0WPJTy0l8sR/QLU3TZ0gj0Shc2SAxwbrgtD5NxLKbjSqD3\r\nAwdG740tzc8Xu3d0u8CCVMo5oqX20RPnOMI=\r\n=GxwL\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"msdstwg","email":"willshown@microsoft.com"},"directories":{},"maintainers":[{"name":"msdstwg","email":"willshown@microsoft.com"},{"name":"thure","email":"npm@willshown.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_9.2.0-next.0_1655328040578_0.9909427617254689"},"_hasShrinkwrap":false},"9.2.0-next.1":{"name":"@fluent-blocks/react","version":"9.2.0-next.1","repository":{"type":"git","url":"git+ssh://git@github.com/OfficeDev/fluent-blocks.git"},"authors":["Will Shown ","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^7"},"peerDependencies":{"@fluentui/react-components":"9.0.0-rc.14","chart.js":"^2.9.4","react":"^16.14.0, 17.x, 18.x","react-dom":"^16.14.0, 17.x, 18.x"},"devDependencies":{"@babel/core":"latest","@fluentui/react-components":"9.0.0-rc.14","@playwright/test":"latest","@storybook/addon-actions":"^6.5.9","@storybook/addon-essentials":"^6.5.9","@storybook/addon-links":"^6.5.9","@storybook/addons":"^6.5.9","@storybook/react":"^6.5.9","@storybook/theming":"^6.5.9","@types/chart.js":"^2.9.37","@types/faker":"^5.5.9","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.35","@types/react":"18.x","@types/react-dom":"18.x","@types/react-test-renderer":"latest","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.20","faker":"github:thure/faker.js#v5.1.2","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":"18.x","react-dom":"18.x","react-test-renderer":"latest","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.1.3-next.0","@fluent-blocks/colors":"9.1.1-next.0","@fluent-blocks/schemas":"9.2.0-next.0","@fluentui/react-tabster":"9.0.0-rc.13","@react-hook/resize-observer":"^1.2.5","lodash":"^4.17.21"},"scripts":{"build":"just-scripts build","fluentui:upgrade":"pnpm update @fluentui/react-components","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"cd ../icons && pnpm bundle && cd .. && cp icons/basic-icons.svg react/.storybook/public/basic-icons.svg && cd react && build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","_resolved":"","_integrity":"","_from":"file:fluent-blocks-react-9.2.0-next.1.tgz","readme":"\"Fluent\n\n### [Open Storybook ↗︎][storybook]\n\nFluent Blocks is a React implementation of [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs for app development based on [`@fluentui/react-components`][fluentui-v9]. This project succeeds [`@fluentui/react-teams`][react-teams].\n\nThis package provides a set of components developers can use to build fully interactive & accessible experiences using whatever React coding convention they prefer, rendering experiences that match Fluent & UI Kit designs.\n\n## ⚠️ In active development\n\nThis project’s API is subject to unannounced breaking changes and is not yet on any release cycle.\n\n## Development & contributing\n\nIf you’d like to run the development environment or contribute to this project, please see [the Contributing file](CONTRIBUTING.md).\n\n## Getting started\n\nUsing TypeScript and an IDE that supports type inspections will make using this project much easier!\n\n1. Add `react@17`, `react-dom@17`, and `@fluentui/react-components@latest` if they’re not in your project already\n2. Add `chart.js@^2.9.4` if you want to use charts from this package\n3. Depending on your package manager, you may need to add `@fluent-blocks/basic-icons` to use icons\n4. Install this package, `@fluent-blocks/react`, using your package manager\n\nNow anywhere you can use React, you can use Fluent Blocks. If you want to delegate the entire viewport to Fluent Blocks, use the `View` component on its own:\n\n```tsx\nimport { View, Escape } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n …for real this time.\n ,\n secondary: {\n actionId: 'start',\n label: 'Get started',\n icon: 'arrow_right',\n iconPosition: 'after'\n }\n }\n }\n },\n ],\n }}/>,\n document.getElementById('root')\n)\n```\n\nIf you want to use Fluent Blocks’ intermediary components, wrap where any will render in a single `FluentBlocksProvider` (there only needs to be one on the page):\n\n```tsx\nimport { FluentBlocksProvider, Illustration } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n \n ,\n document.getElementById('root')\n)\n```\n\nIn order to get the right background coverage and overflow behavior, you should apply `height: 100%` and `overflow: hidden` to the Fluent Blocks React root, and any parents of the Fluent Blocks React root should occupy the full height of whatever space Fluent Blocks should occupy.\n\nIf Fluent Blocks will render alone on the page, these rules are sufficient:\n\n```css\nhtml, body, #root {\n height: 100%;\n}\n#root {\n overflow: hidden;\n}\n```\n\n## How design pattern usage is validated through types\n\nSince the goal of this library is to aid in implementing experiences that conform to [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs and principles, it brings with it those design systems’ opinions. Each component has a concept for what kind of properties & content it accepts, which can be provided in one of two ways:\n\n1. As serializeable **props**, e.g. `{icon: 'fluent', size: 24}`\n1. As a JSX **element**, e.g. ``\n\nThe bolded terms are used in the TypeScript types for the components in this project, e.g. a valid icon instance matches `IconPropsOrElement`, which is either 1) `IconProps`, or 2) `IconElement`.\n\nFor consistency between the two syntaxes, the `children` prop and its implicit nesting equivalent in JSX is avoided in favor of named content props that parallel the serializeable syntax.\n\nSome top-level components like `View` will check the props it was provided and provide a detailed error if the props are incorrect in any way. All other components won’t check for issues and will simply refuse to render unexpected content. In either case, developers can explicitly mark where exceptions should be made using the `Escape` component described below.\n\n## Escaping validation\n\nThese components won’t render a component that has unexpected props or content, unless you use `Escape`. If you feel the need to use a pattern not provided by this project, you can do so using the `Escape` component as a JSX element in any of a component’s content props that aren’t “tightly-bound”, e.g.:\n\n```tsx\n// Only Escape imported from this package will render,\n// so make sure you’ve imported it:\nimport { Section, Escape } from '@fluentui/react-blocks';\n\n\n You can put anything here\n and it will be rendered.\n ,\n ]}\n/>\n```\n\n### Exceptions: tightly bound components\n\nA component may ignore `Escape` only if it is “tightly-bound” with another component. Components are tightly-bound when they make sense only when used together, e.g. `Layout` and `LayoutItem` where `Layout` will only render `LayoutItems` in its `items` prop. If you need to render special content in such a situation, you can either replace the entire parent with `Escape`, or use `Escape` as the _content_ of one of the children.\n\n### Escape inclusively, and share your designs!\n\nMake sure the content you add using `Escape` conforms to [WCAG 2.1][wcag] and is designed inclusively.\n\nIf you would like to share your pattern with the community, [we’d welcome your contribution](CONTRIBUTING.md)! We’d all thank you to submit PR’s that extend this project with your accessible high-quality patterns.\n\n## Concepts\n\nThis library harmonizes the patterns in Fluent and the UI Kit with concepts from web layout & interactivity by delivering components organized into these categories:\n\n- General components based on [formatting context][fmtctx]:\n - `Block` vs `Inline`\n- Specialized clusters of components with shared interactivity considerations:\n - **Media**, e.g.:\n - `Illustration`\n - `Chart`\n - **Inputs**, e.g.:\n - `RadioGroup`\n - `ShortTextInput`\n- **Surfaces**, each of which expect to be unique in a given view\n- **Views**, the top-level components which render an entire UI in a viewport\n\nAny component may also have **Exemplars**, which render the same component but with a specialized API surface optimized for a specific use-case for the pattern, e.g. `Widget` always renders a `Card` though its props are based on the more constrained scope of content for cards in a dashboard from the UI Kit.\n\n## Icons\n\nThis project supports using icons from [`fluentui-system-icons`][fluent-icons] through SVG sprites implemented in [an experimental fork of that project](https://github.com/thure/fluentui-system-icons/tree/master/packages/svg-sprites). The `Icon` component will render an SVG of the appropriate size containing a `use` element with an `href` to the appropriate sprite, e.g.:\n\n```tsx\n// If used wherever `InlineSequence` or `IconPropsOrElement` is accepted,\n// both the props syntax and element syntax will be rendered the same way.\nconst catIcon =\n { icon: 'animal_cat', size: 24, variant: 'outline' } ||\n \n```\n\nThis project currently expects any requests to `/sprites/**` to serve an SVG sprite with the appropriate content, which for the Storybook development server is proxied to a specific release on jsDelivr.\n\nIn your own project, we recommend serving just the sprites you need locally if possible. Do not use proxies for icons in production.\n\n[figma-fluent]: https://www.figma.com/community/file/836828295772957889/Microsoft-Fluent-Web\n[figma-uikit]: https://www.figma.com/community/file/916836509871353159/Microsoft-Teams-UI-Kit\n[fluent-icons]: https://github.com/microsoft/fluentui-system-icons\n[fluentui-v9]: https://www.npmjs.com/package/@fluentui/react-components\n[react-teams]: https://www.npmjs.com/package/@fluentui/react-teams\n[storybook]: https://aka.ms/fluent-blocks-storybook\n[wcag]: https://www.w3.org/TR/WCAG21\n[fmtctx]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow\n","readmeFilename":"README.md","description":"\"Fluent","bugs":{"url":"https://github.com/OfficeDev/fluent-blocks/issues"},"homepage":"https://github.com/OfficeDev/fluent-blocks#readme","_id":"@fluent-blocks/react@9.2.0-next.1","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-mT8CTW1XQxXd7kzUn3tYdsoIBnPnRdjmBgI3aCooIojRcF4unfu2phnPFXakR3YnJ9qz07Xd5SnP5Z/yiXHkDQ==","shasum":"0d2b944d8eef7a76f581f56b18ccf60c93fbf20f","tarball":"https://registry.npmjs.org/@fluent-blocks/react/-/react-9.2.0-next.1.tgz","fileCount":420,"unpackedSize":759906,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAGjF4X9dwBbZJ+5w87ZbB6k6EoHmpc1AVRmy9INoVlnAiALJpdgpRHzpjCRBvpxEANK4vBYe8ZHa5CsmWjL6Hm/Gg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJirN//ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrzSw/+Kw10AnwRamI1w3u4UX9sVJz4+JzX+DiJgbQrVpjeg22HytH1\r\nJ+m2sh2y/XXzr2qA/OXxTeTLIlEu3jB322SAfwX863AxyD0+Pw3096kMnB3T\r\nnTV/JfYSmCNkvOD0k8NJLN9Ctga+xnDPrNkPhwvYWe/9nKv8CCk5aJJVTOWL\r\nqmMa+G79sVUv/pT7GpZRvomOuRbM8aBFMqFrRT7oHsrnK1QdO0rCPfcWBC5h\r\nszWqOxK7GxgD8f6517bAdATFXFUX2yWdGJebHVj922EJ36B8OZVY+sP70qtF\r\nr55H8L33VyBcdI1YoctwxzpwhpF8P+zlYZnLQwnJKFQ5tvBPX7GYD4j18FBN\r\n14CkfXGadWsghZzA3nmzdWhlLDChi+BR80RmUyBe03YLo0JqeuLrVwdiBhGl\r\noLpZnIB+6mBzc1ZBOiG6mZhDWvGBrXfNuJGlywTsyl/Aq0X16qOB+Q0zUe0+\r\nIOOs9cjWad6/iEiQPddrk9A4x8tXC9/qz751oRd5Cnzn4mDrCkpvZv57ay1Q\r\nj92kLVwEGDRW5Ex2bfWnePUsfe0HjAHukfx2eSzmbC5G1sp3haS9/DZOoO4O\r\n7/AEmXQKqDE2aQJHcf3ZwvGyEkdu+nAZB9MvELuP6ueJub7pazPxk/Zz6uqi\r\nkVvvKHJCMA8s+wU+IzeqUe+rzDwmIr8KWoo=\r\n=7HfR\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"msdstwg","email":"willshown@microsoft.com"},"directories":{},"maintainers":[{"name":"msdstwg","email":"willshown@microsoft.com"},{"name":"thure","email":"npm@willshown.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_9.2.0-next.1_1655496703225_0.2293466257622332"},"_hasShrinkwrap":false},"9.2.0-next.2":{"name":"@fluent-blocks/react","version":"9.2.0-next.2","repository":{"type":"git","url":"git+ssh://git@github.com/OfficeDev/fluent-blocks.git"},"authors":["Will Shown ","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^7"},"peerDependencies":{"@fluentui/react-components":"9.0.0-rc.14","chart.js":"^2.9.4","react":"^16.14.0, 17.x, 18.x","react-dom":"^16.14.0, 17.x, 18.x"},"devDependencies":{"@babel/core":"latest","@fluentui/react-components":"9.0.0-rc.14","@playwright/test":"latest","@storybook/addon-actions":"^6.5.9","@storybook/addon-essentials":"^6.5.9","@storybook/addon-links":"^6.5.9","@storybook/addons":"^6.5.9","@storybook/react":"^6.5.9","@storybook/theming":"^6.5.9","@types/chart.js":"^2.9.37","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.35","@types/react":"18.x","@types/react-dom":"18.x","@types/react-test-renderer":"latest","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.20","@faker-js/faker":"^7.3.0","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":"18.x","react-dom":"18.x","react-test-renderer":"latest","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.1.3-next.1","@fluent-blocks/colors":"9.1.1-next.0","@fluent-blocks/schemas":"9.2.0-next.2","@fluentui/react-tabster":"9.0.0-rc.13","@react-hook/resize-observer":"^1.2.5","alea":"^1.0.1","lodash":"^4.17.21"},"scripts":{"build":"just-scripts build","fluentui:upgrade":"pnpm update @fluentui/react-components","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"cd ../icons && pnpm bundle && cd .. && cp icons/basic-icons.svg react/.storybook/public/basic-icons.svg && cd react && build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","_resolved":"","_integrity":"","_from":"file:fluent-blocks-react-9.2.0-next.2.tgz","readme":"\"Fluent\n\n### [Open Storybook ↗︎][storybook]\n\nFluent Blocks is a React implementation of [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs for app development based on [`@fluentui/react-components`][fluentui-v9]. This project succeeds [`@fluentui/react-teams`][react-teams].\n\nThis package provides a set of components developers can use to build fully interactive & accessible experiences using whatever React coding convention they prefer, rendering experiences that match Fluent & UI Kit designs.\n\n## ⚠️ In active development\n\nThis project’s API is subject to unannounced breaking changes and is not yet on any release cycle.\n\n## Development & contributing\n\nIf you’d like to run the development environment or contribute to this project, please see [the Contributing file](CONTRIBUTING.md).\n\n## Getting started\n\nUsing TypeScript and an IDE that supports type inspections will make using this project much easier!\n\n1. Add `react@17`, `react-dom@17`, and `@fluentui/react-components@latest` if they’re not in your project already\n2. Add `chart.js@^2.9.4` if you want to use charts from this package\n3. Depending on your package manager, you may need to add `@fluent-blocks/basic-icons` to use icons\n4. Install this package, `@fluent-blocks/react`, using your package manager\n\nNow anywhere you can use React, you can use Fluent Blocks. If you want to delegate the entire viewport to Fluent Blocks, use the `View` component on its own:\n\n```tsx\nimport { View, Escape } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n …for real this time.\n ,\n secondary: {\n actionId: 'start',\n label: 'Get started',\n icon: 'arrow_right',\n iconPosition: 'after'\n }\n }\n }\n },\n ],\n }}/>,\n document.getElementById('root')\n)\n```\n\nIf you want to use Fluent Blocks’ intermediary components, wrap where any will render in a single `FluentBlocksProvider` (there only needs to be one on the page):\n\n```tsx\nimport { FluentBlocksProvider, Illustration } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n \n ,\n document.getElementById('root')\n)\n```\n\nIn order to get the right background coverage and overflow behavior, you should apply `height: 100%` and `overflow: hidden` to the Fluent Blocks React root, and any parents of the Fluent Blocks React root should occupy the full height of whatever space Fluent Blocks should occupy.\n\nIf Fluent Blocks will render alone on the page, these rules are sufficient:\n\n```css\nhtml, body, #root {\n height: 100%;\n}\n#root {\n overflow: hidden;\n}\n```\n\n## How design pattern usage is validated through types\n\nSince the goal of this library is to aid in implementing experiences that conform to [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs and principles, it brings with it those design systems’ opinions. Each component has a concept for what kind of properties & content it accepts, which can be provided in one of two ways:\n\n1. As serializeable **props**, e.g. `{icon: 'fluent', size: 24}`\n1. As a JSX **element**, e.g. ``\n\nThe bolded terms are used in the TypeScript types for the components in this project, e.g. a valid icon instance matches `IconPropsOrElement`, which is either 1) `IconProps`, or 2) `IconElement`.\n\nFor consistency between the two syntaxes, the `children` prop and its implicit nesting equivalent in JSX is avoided in favor of named content props that parallel the serializeable syntax.\n\nSome top-level components like `View` will check the props it was provided and provide a detailed error if the props are incorrect in any way. All other components won’t check for issues and will simply refuse to render unexpected content. In either case, developers can explicitly mark where exceptions should be made using the `Escape` component described below.\n\n## Escaping validation\n\nThese components won’t render a component that has unexpected props or content, unless you use `Escape`. If you feel the need to use a pattern not provided by this project, you can do so using the `Escape` component as a JSX element in any of a component’s content props that aren’t “tightly-bound”, e.g.:\n\n```tsx\n// Only Escape imported from this package will render,\n// so make sure you’ve imported it:\nimport { Section, Escape } from '@fluentui/react-blocks';\n\n\n You can put anything here\n and it will be rendered.\n ,\n ]}\n/>\n```\n\n### Exceptions: tightly bound components\n\nA component may ignore `Escape` only if it is “tightly-bound” with another component. Components are tightly-bound when they make sense only when used together, e.g. `Layout` and `LayoutItem` where `Layout` will only render `LayoutItems` in its `items` prop. If you need to render special content in such a situation, you can either replace the entire parent with `Escape`, or use `Escape` as the _content_ of one of the children.\n\n### Escape inclusively, and share your designs!\n\nMake sure the content you add using `Escape` conforms to [WCAG 2.1][wcag] and is designed inclusively.\n\nIf you would like to share your pattern with the community, [we’d welcome your contribution](CONTRIBUTING.md)! We’d all thank you to submit PR’s that extend this project with your accessible high-quality patterns.\n\n## Concepts\n\nThis library harmonizes the patterns in Fluent and the UI Kit with concepts from web layout & interactivity by delivering components organized into these categories:\n\n- General components based on [formatting context][fmtctx]:\n - `Block` vs `Inline`\n- Specialized clusters of components with shared interactivity considerations:\n - **Media**, e.g.:\n - `Illustration`\n - `Chart`\n - **Inputs**, e.g.:\n - `RadioGroup`\n - `ShortTextInput`\n- **Surfaces**, each of which expect to be unique in a given view\n- **Views**, the top-level components which render an entire UI in a viewport\n\nAny component may also have **Exemplars**, which render the same component but with a specialized API surface optimized for a specific use-case for the pattern, e.g. `Widget` always renders a `Card` though its props are based on the more constrained scope of content for cards in a dashboard from the UI Kit.\n\n## Icons\n\nThis project supports using icons from [`fluentui-system-icons`][fluent-icons] through SVG sprites implemented in [an experimental fork of that project](https://github.com/thure/fluentui-system-icons/tree/master/packages/svg-sprites). The `Icon` component will render an SVG of the appropriate size containing a `use` element with an `href` to the appropriate sprite, e.g.:\n\n```tsx\n// If used wherever `InlineSequence` or `IconPropsOrElement` is accepted,\n// both the props syntax and element syntax will be rendered the same way.\nconst catIcon =\n { icon: 'animal_cat', size: 24, variant: 'outline' } ||\n \n```\n\nThis project currently expects any requests to `/sprites/**` to serve an SVG sprite with the appropriate content, which for the Storybook development server is proxied to a specific release on jsDelivr.\n\nIn your own project, we recommend serving just the sprites you need locally if possible. Do not use proxies for icons in production.\n\n[figma-fluent]: https://www.figma.com/community/file/836828295772957889/Microsoft-Fluent-Web\n[figma-uikit]: https://www.figma.com/community/file/916836509871353159/Microsoft-Teams-UI-Kit\n[fluent-icons]: https://github.com/microsoft/fluentui-system-icons\n[fluentui-v9]: https://www.npmjs.com/package/@fluentui/react-components\n[react-teams]: https://www.npmjs.com/package/@fluentui/react-teams\n[storybook]: https://aka.ms/fluent-blocks-storybook\n[wcag]: https://www.w3.org/TR/WCAG21\n[fmtctx]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow\n","readmeFilename":"README.md","description":"\"Fluent","bugs":{"url":"https://github.com/OfficeDev/fluent-blocks/issues"},"homepage":"https://github.com/OfficeDev/fluent-blocks#readme","_id":"@fluent-blocks/react@9.2.0-next.2","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-xWXz3q1ZGXXgaoTZSiEyhqVpN8WrK1E7JsrM3zF4m4G2f7FYmbcfp4bWYEfhD4lQ8Eo3f7f+OktFbdIB7wLj/Q==","shasum":"f9ca64c289c609806350c4219a40b8077e4186b5","tarball":"https://registry.npmjs.org/@fluent-blocks/react/-/react-9.2.0-next.2.tgz","fileCount":412,"unpackedSize":773437,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCHLDbxngRH4/p4UjH2e7PLV/oAG26P+jh7gK4Z/MvWjwIhAKfhZodRfQWYdrUygYRq4cRg/1kqvq6Iw7R8trkqDmXK"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJislaUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmohxg//T4KyLuwGnW15hhDqProeqSsNUbsK7CTsO/1cH/7yquOl3TLk\r\nsbqC35xXt1Het7eUOzEwFACJDMU0D6PRn1vFpNYPDgg7SE1Wdv1t3msEEoPh\r\nAvHA9R2cgq4FW821H/QgIXD7lGWcJEcOg+fGUUAzugWUf5zLew0ZcRJ+i06W\r\np386l9kXxgfkR82Wlt6HDdQG+7tXRH6NK9yUQLTHgOcUoAb6MKBErhHnS3qS\r\n1z2BHj10ho9inIFrs1PJ36YMe2MFrpUohAdw9F6UA/VI7Q9sZoy8NPS8kXxm\r\nBKSLkImJeotBEn+XAbI2/oJKEQczWwtd5b4t8Z5Ge6VbVF1QhFLRqhQhbgel\r\nbhgxFRWVT+LgwY9YWwltkLgx2SNl7OchVi85U/tSKTddpVUDGDmGhIHYxZx3\r\nJ05mygMDtbE33UOm2bx3gNUhOC4I6oJs1OqFtVnv9whM0pyl8KYlD2m8gwji\r\nqSAAsXCSvPkT/4wVW1gELgUEu0GXnjsMsMIyftMUq7oBMyeHKfK2XwUba5zX\r\nTta6VSdY2nSdovwbXbjwYcrTplXBSRuYVTL00mrKVwBVjwX5Yj4LR3oVGEpI\r\nhiS8nJxhQ9pR+Ss2pI0Sy0Q+wL4QTSHDj2PkgwvMqZw3wRyt657NTpNpxOMy\r\nw3h6uaFzH8EuWwzSCIK1/WLMWY00V4Cl9sQ=\r\n=oTNd\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"msdstwg","email":"willshown@microsoft.com"},"directories":{},"maintainers":[{"name":"msdstwg","email":"willshown@microsoft.com"},{"name":"thure","email":"npm@willshown.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_9.2.0-next.2_1655854740567_0.2927147990259944"},"_hasShrinkwrap":false},"9.2.0-next.3":{"name":"@fluent-blocks/react","version":"9.2.0-next.3","repository":{"type":"git","url":"git+ssh://git@github.com/OfficeDev/fluent-blocks.git"},"authors":["Will Shown ","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^7"},"peerDependencies":{"@fluentui/react-components":"9.0.0-rc.14","chart.js":"^2.9.4","react":"^16.14.0, 17.x, 18.x","react-dom":"^16.14.0, 17.x, 18.x"},"devDependencies":{"@babel/core":"latest","@fluentui/react-components":"9.0.0-rc.14","@playwright/test":"latest","@storybook/addon-actions":"^6.5.9","@storybook/addon-essentials":"^6.5.9","@storybook/addon-links":"^6.5.9","@storybook/addons":"^6.5.9","@storybook/react":"^6.5.9","@storybook/theming":"^6.5.9","@types/chart.js":"^2.9.37","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.35","@types/react":"18.x","@types/react-dom":"18.x","@types/react-test-renderer":"latest","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.20","@faker-js/faker":"^7.3.0","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":"18.x","react-dom":"18.x","react-test-renderer":"latest","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.1.3-next.1","@fluent-blocks/colors":"9.1.1-next.0","@fluent-blocks/schemas":"9.2.0-next.3","@fluentui/react-tabster":"9.0.0-rc.13","@react-hook/resize-observer":"^1.2.5","alea":"^1.0.1","lodash":"^4.17.21"},"scripts":{"build":"just-scripts build","fluentui:upgrade":"pnpm update @fluentui/react-components","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"cd ../icons && pnpm bundle && cd .. && cp icons/basic-icons.svg react/.storybook/public/basic-icons.svg && cd react && build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","_resolved":"","_integrity":"","_from":"file:fluent-blocks-react-9.2.0-next.3.tgz","readme":"\"Fluent\n\n### [Open Storybook ↗︎][storybook]\n\nFluent Blocks is a React implementation of [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs for app development based on [`@fluentui/react-components`][fluentui-v9]. This project succeeds [`@fluentui/react-teams`][react-teams].\n\nThis package provides a set of components developers can use to build fully interactive & accessible experiences using whatever React coding convention they prefer, rendering experiences that match Fluent & UI Kit designs.\n\n## ⚠️ In active development\n\nThis project’s API is subject to unannounced breaking changes and is not yet on any release cycle.\n\n## Development & contributing\n\nIf you’d like to run the development environment or contribute to this project, please see [the Contributing file](CONTRIBUTING.md).\n\n## Getting started\n\nUsing TypeScript and an IDE that supports type inspections will make using this project much easier!\n\n1. Add `react@17`, `react-dom@17`, and `@fluentui/react-components@latest` if they’re not in your project already\n2. Add `chart.js@^2.9.4` if you want to use charts from this package\n3. Depending on your package manager, you may need to add `@fluent-blocks/basic-icons` to use icons\n4. Install this package, `@fluent-blocks/react`, using your package manager\n\nNow anywhere you can use React, you can use Fluent Blocks. If you want to delegate the entire viewport to Fluent Blocks, use the `View` component on its own:\n\n```tsx\nimport { View, Escape } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n …for real this time.\n ,\n secondary: {\n actionId: 'start',\n label: 'Get started',\n icon: 'arrow_right',\n iconPosition: 'after'\n }\n }\n }\n },\n ],\n }}/>,\n document.getElementById('root')\n)\n```\n\nIf you want to use Fluent Blocks’ intermediary components, wrap where any will render in a single `FluentBlocksProvider` (there only needs to be one on the page):\n\n```tsx\nimport { FluentBlocksProvider, Illustration } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n \n ,\n document.getElementById('root')\n)\n```\n\nIn order to get the right background coverage and overflow behavior, you should apply `height: 100%` and `overflow: hidden` to the Fluent Blocks React root, and any parents of the Fluent Blocks React root should occupy the full height of whatever space Fluent Blocks should occupy.\n\nIf Fluent Blocks will render alone on the page, these rules are sufficient:\n\n```css\nhtml, body, #root {\n height: 100%;\n}\n#root {\n overflow: hidden;\n}\n```\n\n## How design pattern usage is validated through types\n\nSince the goal of this library is to aid in implementing experiences that conform to [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs and principles, it brings with it those design systems’ opinions. Each component has a concept for what kind of properties & content it accepts, which can be provided in one of two ways:\n\n1. As serializeable **props**, e.g. `{icon: 'fluent', size: 24}`\n1. As a JSX **element**, e.g. ``\n\nThe bolded terms are used in the TypeScript types for the components in this project, e.g. a valid icon instance matches `IconPropsOrElement`, which is either 1) `IconProps`, or 2) `IconElement`.\n\nFor consistency between the two syntaxes, the `children` prop and its implicit nesting equivalent in JSX is avoided in favor of named content props that parallel the serializeable syntax.\n\nSome top-level components like `View` will check the props it was provided and provide a detailed error if the props are incorrect in any way. All other components won’t check for issues and will simply refuse to render unexpected content. In either case, developers can explicitly mark where exceptions should be made using the `Escape` component described below.\n\n## Escaping validation\n\nThese components won’t render a component that has unexpected props or content, unless you use `Escape`. If you feel the need to use a pattern not provided by this project, you can do so using the `Escape` component as a JSX element in any of a component’s content props that aren’t “tightly-bound”, e.g.:\n\n```tsx\n// Only Escape imported from this package will render,\n// so make sure you’ve imported it:\nimport { Section, Escape } from '@fluentui/react-blocks';\n\n\n You can put anything here\n and it will be rendered.\n ,\n ]}\n/>\n```\n\n### Exceptions: tightly bound components\n\nA component may ignore `Escape` only if it is “tightly-bound” with another component. Components are tightly-bound when they make sense only when used together, e.g. `Layout` and `LayoutItem` where `Layout` will only render `LayoutItems` in its `items` prop. If you need to render special content in such a situation, you can either replace the entire parent with `Escape`, or use `Escape` as the _content_ of one of the children.\n\n### Escape inclusively, and share your designs!\n\nMake sure the content you add using `Escape` conforms to [WCAG 2.1][wcag] and is designed inclusively.\n\nIf you would like to share your pattern with the community, [we’d welcome your contribution](CONTRIBUTING.md)! We’d all thank you to submit PR’s that extend this project with your accessible high-quality patterns.\n\n## Concepts\n\nThis library harmonizes the patterns in Fluent and the UI Kit with concepts from web layout & interactivity by delivering components organized into these categories:\n\n- General components based on [formatting context][fmtctx]:\n - `Block` vs `Inline`\n- Specialized clusters of components with shared interactivity considerations:\n - **Media**, e.g.:\n - `Illustration`\n - `Chart`\n - **Inputs**, e.g.:\n - `RadioGroup`\n - `ShortTextInput`\n- **Surfaces**, each of which expect to be unique in a given view\n- **Views**, the top-level components which render an entire UI in a viewport\n\nAny component may also have **Exemplars**, which render the same component but with a specialized API surface optimized for a specific use-case for the pattern, e.g. `Widget` always renders a `Card` though its props are based on the more constrained scope of content for cards in a dashboard from the UI Kit.\n\n## Icons\n\nThis project supports using icons from [`fluentui-system-icons`][fluent-icons] through SVG sprites implemented in [an experimental fork of that project](https://github.com/thure/fluentui-system-icons/tree/master/packages/svg-sprites). The `Icon` component will render an SVG of the appropriate size containing a `use` element with an `href` to the appropriate sprite, e.g.:\n\n```tsx\n// If used wherever `InlineSequence` or `IconPropsOrElement` is accepted,\n// both the props syntax and element syntax will be rendered the same way.\nconst catIcon =\n { icon: 'animal_cat', size: 24, variant: 'outline' } ||\n \n```\n\nThis project currently expects any requests to `/sprites/**` to serve an SVG sprite with the appropriate content, which for the Storybook development server is proxied to a specific release on jsDelivr.\n\nIn your own project, we recommend serving just the sprites you need locally if possible. Do not use proxies for icons in production.\n\n[figma-fluent]: https://www.figma.com/community/file/836828295772957889/Microsoft-Fluent-Web\n[figma-uikit]: https://www.figma.com/community/file/916836509871353159/Microsoft-Teams-UI-Kit\n[fluent-icons]: https://github.com/microsoft/fluentui-system-icons\n[fluentui-v9]: https://www.npmjs.com/package/@fluentui/react-components\n[react-teams]: https://www.npmjs.com/package/@fluentui/react-teams\n[storybook]: https://aka.ms/fluent-blocks-storybook\n[wcag]: https://www.w3.org/TR/WCAG21\n[fmtctx]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow\n","readmeFilename":"README.md","description":"\"Fluent","bugs":{"url":"https://github.com/OfficeDev/fluent-blocks/issues"},"homepage":"https://github.com/OfficeDev/fluent-blocks#readme","_id":"@fluent-blocks/react@9.2.0-next.3","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-bgT7L31BAuibW3Zv5EGQC4hvPFcXnfG6SefptHtoPKozso0ugQxNbAIoNjX5lET5+jH8zQAYP1LmW0jSlX82dw==","shasum":"c18365ffefc4d0d5cef599d05a57a2ae975411fe","tarball":"https://registry.npmjs.org/@fluent-blocks/react/-/react-9.2.0-next.3.tgz","fileCount":412,"unpackedSize":774567,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCS8y0gWytkNB4bAX6548wOXaqs5lvbpQ8xA1SSDbUJvQIhAInjfEkUj2jzZoWj2hgIeQcjZL2taV32FIUGq1IzhNcy"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJitBODACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqbGQ//bP6M5SUew9coujiXE/Blsx52ruEEm8ukzUcBY8oVxv+ibeuA\r\nP7QhKYYaC5ZKDSmKweHmNpjSO70R7/Qnc5spQWPN4LUcih2dLRu8r+j8z5PZ\r\nv9CjwNnd8GsTlDc7AnJcxDZKLC4MHqJYyB8vtiWJ2b3hFqGCSX047BGPUAjU\r\ns6ZMDQFqnODOa2oX5NsowF0ko0N+Q8xCycH9B225i92Zi0tchPIUtDTa7zAc\r\nrv83TeTwJlGcIa3hUSvrAxfH4C+aBdL4plyBO4441GKg7P2+66R3mCOziapp\r\n4u3qxylaVh+sQVsY6RBcgmflAD9yRmvQEULxqb7K6hmuPgGDD/znaR9AGeL0\r\nvtEJDAa+v69jFwPoEtNwa1Ajw9hBrx9BpiGmtTMU3CDy+0LCRwASvmHb7ueQ\r\nZhozhSI+9PDcGxdEpINdr3WRGHHsVUzmLYRQmBCjb3zV9exBZeFN1XtHTWYq\r\n+K2AFKwS/v61rBiCt4bE1e36vwbIvM5hzYRiRbhaAVXYJcMw4s4ktXx7xB5H\r\nWwmTTnSfmzXDrvSgkfl+OsQc0RcjyBtrd6GZh/h2BHXKSegRNPEW1u8JhAvW\r\n1weWsiMN5MLx7EpbwoCV/7/SjYx6+Mk6iQV7bUbxBXS6+aswVKikhJHcrET/\r\nWnWhq0PgUJuDY4qvDD/V/R5vVPWHkI0nXpc=\r\n=LOh5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"msdstwg","email":"willshown@microsoft.com"},"directories":{},"maintainers":[{"name":"msdstwg","email":"willshown@microsoft.com"},{"name":"thure","email":"npm@willshown.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_9.2.0-next.3_1655968642996_0.6256990514186809"},"_hasShrinkwrap":false},"9.2.0-next.4":{"name":"@fluent-blocks/react","version":"9.2.0-next.4","repository":{"type":"git","url":"git+ssh://git@github.com/OfficeDev/fluent-blocks.git"},"authors":["Will Shown ","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^7"},"peerDependencies":{"@fluentui/react-components":"9.0.0-rc.14","chart.js":"^2.9.4","react":"^16.14.0, 17.x, 18.x","react-dom":"^16.14.0, 17.x, 18.x"},"devDependencies":{"@babel/core":"latest","@fluentui/react-components":"9.0.0-rc.14","@playwright/test":"latest","@storybook/addon-actions":"^6.5.9","@storybook/addon-essentials":"^6.5.9","@storybook/addon-links":"^6.5.9","@storybook/addons":"^6.5.9","@storybook/react":"^6.5.9","@storybook/theming":"^6.5.9","@types/chart.js":"^2.9.37","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.35","@types/react":"18.x","@types/react-dom":"18.x","@types/react-test-renderer":"latest","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.20","@faker-js/faker":"^7.3.0","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":"18.x","react-dom":"18.x","react-test-renderer":"latest","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.1.3-next.1","@fluent-blocks/colors":"9.1.1-next.0","@fluent-blocks/schemas":"9.2.0-next.3","@fluentui/react-tabster":"9.0.0-rc.13","@react-hook/resize-observer":"^1.2.5","alea":"^1.0.1","lodash":"^4.17.21"},"scripts":{"build":"just-scripts build","fluentui:upgrade":"pnpm update @fluentui/react-components","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"cd ../icons && pnpm bundle && cd .. && cp icons/basic-icons.svg react/.storybook/public/basic-icons.svg && cd react && build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","_resolved":"","_integrity":"","_from":"file:fluent-blocks-react-9.2.0-next.4.tgz","readme":"\"Fluent\n\n### [Open Storybook ↗︎][storybook]\n\nFluent Blocks is a React implementation of [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs for app development based on [`@fluentui/react-components`][fluentui-v9]. This project succeeds [`@fluentui/react-teams`][react-teams].\n\nThis package provides a set of components developers can use to build fully interactive & accessible experiences using whatever React coding convention they prefer, rendering experiences that match Fluent & UI Kit designs.\n\n## ⚠️ In active development\n\nThis project’s API is subject to unannounced breaking changes and is not yet on any release cycle.\n\n## Development & contributing\n\nIf you’d like to run the development environment or contribute to this project, please see [the Contributing file](CONTRIBUTING.md).\n\n## Getting started\n\nUsing TypeScript and an IDE that supports type inspections will make using this project much easier!\n\n1. Add `react@17`, `react-dom@17`, and `@fluentui/react-components@latest` if they’re not in your project already\n2. Add `chart.js@^2.9.4` if you want to use charts from this package\n3. Depending on your package manager, you may need to add `@fluent-blocks/basic-icons` to use icons\n4. Install this package, `@fluent-blocks/react`, using your package manager\n\nNow anywhere you can use React, you can use Fluent Blocks. If you want to delegate the entire viewport to Fluent Blocks, use the `View` component on its own:\n\n```tsx\nimport { View, Escape } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n …for real this time.\n ,\n secondary: {\n actionId: 'start',\n label: 'Get started',\n icon: 'arrow_right',\n iconPosition: 'after'\n }\n }\n }\n },\n ],\n }}/>,\n document.getElementById('root')\n)\n```\n\nIf you want to use Fluent Blocks’ intermediary components, wrap where any will render in a single `FluentBlocksProvider` (there only needs to be one on the page):\n\n```tsx\nimport { FluentBlocksProvider, Illustration } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n \n ,\n document.getElementById('root')\n)\n```\n\nIn order to get the right background coverage and overflow behavior, you should apply `height: 100%` and `overflow: hidden` to the Fluent Blocks React root, and any parents of the Fluent Blocks React root should occupy the full height of whatever space Fluent Blocks should occupy.\n\nIf Fluent Blocks will render alone on the page, these rules are sufficient:\n\n```css\nhtml, body, #root {\n height: 100%;\n}\n#root {\n overflow: hidden;\n}\n```\n\n## How design pattern usage is validated through types\n\nSince the goal of this library is to aid in implementing experiences that conform to [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs and principles, it brings with it those design systems’ opinions. Each component has a concept for what kind of properties & content it accepts, which can be provided in one of two ways:\n\n1. As serializeable **props**, e.g. `{icon: 'fluent', size: 24}`\n1. As a JSX **element**, e.g. ``\n\nThe bolded terms are used in the TypeScript types for the components in this project, e.g. a valid icon instance matches `IconPropsOrElement`, which is either 1) `IconProps`, or 2) `IconElement`.\n\nFor consistency between the two syntaxes, the `children` prop and its implicit nesting equivalent in JSX is avoided in favor of named content props that parallel the serializeable syntax.\n\nSome top-level components like `View` will check the props it was provided and provide a detailed error if the props are incorrect in any way. All other components won’t check for issues and will simply refuse to render unexpected content. In either case, developers can explicitly mark where exceptions should be made using the `Escape` component described below.\n\n## Escaping validation\n\nThese components won’t render a component that has unexpected props or content, unless you use `Escape`. If you feel the need to use a pattern not provided by this project, you can do so using the `Escape` component as a JSX element in any of a component’s content props that aren’t “tightly-bound”, e.g.:\n\n```tsx\n// Only Escape imported from this package will render,\n// so make sure you’ve imported it:\nimport { Section, Escape } from '@fluentui/react-blocks';\n\n\n You can put anything here\n and it will be rendered.\n ,\n ]}\n/>\n```\n\n### Exceptions: tightly bound components\n\nA component may ignore `Escape` only if it is “tightly-bound” with another component. Components are tightly-bound when they make sense only when used together, e.g. `Layout` and `LayoutItem` where `Layout` will only render `LayoutItems` in its `items` prop. If you need to render special content in such a situation, you can either replace the entire parent with `Escape`, or use `Escape` as the _content_ of one of the children.\n\n### Escape inclusively, and share your designs!\n\nMake sure the content you add using `Escape` conforms to [WCAG 2.1][wcag] and is designed inclusively.\n\nIf you would like to share your pattern with the community, [we’d welcome your contribution](CONTRIBUTING.md)! We’d all thank you to submit PR’s that extend this project with your accessible high-quality patterns.\n\n## Concepts\n\nThis library harmonizes the patterns in Fluent and the UI Kit with concepts from web layout & interactivity by delivering components organized into these categories:\n\n- General components based on [formatting context][fmtctx]:\n - `Block` vs `Inline`\n- Specialized clusters of components with shared interactivity considerations:\n - **Media**, e.g.:\n - `Illustration`\n - `Chart`\n - **Inputs**, e.g.:\n - `RadioGroup`\n - `ShortTextInput`\n- **Surfaces**, each of which expect to be unique in a given view\n- **Views**, the top-level components which render an entire UI in a viewport\n\nAny component may also have **Exemplars**, which render the same component but with a specialized API surface optimized for a specific use-case for the pattern, e.g. `Widget` always renders a `Card` though its props are based on the more constrained scope of content for cards in a dashboard from the UI Kit.\n\n## Icons\n\nThis project supports using icons from [`fluentui-system-icons`][fluent-icons] through SVG sprites implemented in [an experimental fork of that project](https://github.com/thure/fluentui-system-icons/tree/master/packages/svg-sprites). The `Icon` component will render an SVG of the appropriate size containing a `use` element with an `href` to the appropriate sprite, e.g.:\n\n```tsx\n// If used wherever `InlineSequence` or `IconPropsOrElement` is accepted,\n// both the props syntax and element syntax will be rendered the same way.\nconst catIcon =\n { icon: 'animal_cat', size: 24, variant: 'outline' } ||\n \n```\n\nThis project currently expects any requests to `/sprites/**` to serve an SVG sprite with the appropriate content, which for the Storybook development server is proxied to a specific release on jsDelivr.\n\nIn your own project, we recommend serving just the sprites you need locally if possible. Do not use proxies for icons in production.\n\n[figma-fluent]: https://www.figma.com/community/file/836828295772957889/Microsoft-Fluent-Web\n[figma-uikit]: https://www.figma.com/community/file/916836509871353159/Microsoft-Teams-UI-Kit\n[fluent-icons]: https://github.com/microsoft/fluentui-system-icons\n[fluentui-v9]: https://www.npmjs.com/package/@fluentui/react-components\n[react-teams]: https://www.npmjs.com/package/@fluentui/react-teams\n[storybook]: https://aka.ms/fluent-blocks-storybook\n[wcag]: https://www.w3.org/TR/WCAG21\n[fmtctx]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow\n","readmeFilename":"README.md","description":"\"Fluent","bugs":{"url":"https://github.com/OfficeDev/fluent-blocks/issues"},"homepage":"https://github.com/OfficeDev/fluent-blocks#readme","_id":"@fluent-blocks/react@9.2.0-next.4","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-F+9I3ntca0yyahDYfrMZ+AVqrMsoEag7LHWevYbive7jb5fzNr8xudpbxxlxClt0l1irFfUqWIgBwAn9zT8wGw==","shasum":"58c48866bc2c1f94565674828d6c92505e136f56","tarball":"https://registry.npmjs.org/@fluent-blocks/react/-/react-9.2.0-next.4.tgz","fileCount":412,"unpackedSize":773987,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICXi9nToESRBscd+azdN24Q3HhcAO+aGDMrSYcn4kMCEAiEAmkql6Yi5KnDoeRfbcFrLGq7x43/LDK9s7FoYNijZhL8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivAXNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZig//eI28lhsl0uX0TpS328SVDa+Ea7ig+TwasmJ1rDgbeIf6Xldh\r\n2ce3xpyeupusAhrj44HMT9IT2POt7JA6Bn7s4aJw//mMRpWJw+9u1lWQkK5x\r\nMkUJM5D+Vm33/5COCLkWkTaf973Rul5CEstRzbRg84fQCIiJymMhJ5V04Rdf\r\n26XryHLCtG4umXaGPvC/pwu1C9KE23zeAQQT9jfRMdH5mZ/Z4w8AKM/CcaYK\r\nk6Fq3JpZrJo+2h1Zu0xw6AXBhxPuUv2OUWlN+rB7DfZko9kJnEl1fVE1ifoo\r\nqB2IGdqZxF6qBrEI0z0DJHsp2IPwLw+fjz8rtqXyPWppKcke+h7+TPvRyElt\r\nDy26dZQdn9RkeA66uf5059aV1Cl+l4T2Dr0SDzbXM96Io9rdgt+v0SV9px3a\r\nw6v7DLIow5mHapZDTWcvilVxVj+w6AmL9t/Mg7WrDh9d36ywb83H7D7zuQUA\r\npKqZ0WtJQl18UTLuwBFWR7YgYD5WYxEDkxUmrDNBfXAw+dmQ0F0cBagcAs43\r\nOXQ9qx0Y1RJoOYSOGgBhPiasW352MgbrE+QdmtnboxZJHTKJ5x0W6Z7+BZ7i\r\n1ay8DtXTpiJdOwcbRfB+Q8CmcWux16T6W+NkWtpElcMAlwZYbnM4aPOQxLlL\r\nOArmLNIjT56bsWnE4zLqzUpD+cFAS+HzFkU=\r\n=+tGm\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"msdstwg","email":"willshown@microsoft.com"},"directories":{},"maintainers":[{"name":"msdstwg","email":"willshown@microsoft.com"},{"name":"thure","email":"npm@willshown.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_9.2.0-next.4_1656489421542_0.18289579764546926"},"_hasShrinkwrap":false},"9.2.0-next.5":{"name":"@fluent-blocks/react","version":"9.2.0-next.5","repository":{"type":"git","url":"git+ssh://git@github.com/OfficeDev/fluent-blocks.git"},"authors":["Will Shown ","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^7"},"peerDependencies":{"@fluentui/react-components":"9.0.0-rc.14","chart.js":"^2.9.4","react":"^16.14.0, 17.x, 18.x","react-dom":"^16.14.0, 17.x, 18.x"},"devDependencies":{"@babel/core":"latest","@fluentui/react-components":"9.0.0-rc.14","@playwright/test":"latest","@storybook/addon-actions":"^6.5.9","@storybook/addon-essentials":"^6.5.9","@storybook/addon-links":"^6.5.9","@storybook/addons":"^6.5.9","@storybook/react":"^6.5.9","@storybook/theming":"^6.5.9","@types/chart.js":"^2.9.37","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.35","@types/react":"18.x","@types/react-dom":"18.x","@types/react-test-renderer":"latest","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.20","@faker-js/faker":"^7.3.0","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":"18.x","react-dom":"18.x","react-test-renderer":"latest","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.1.3-next.1","@fluent-blocks/colors":"9.1.1-next.0","@fluent-blocks/schemas":"9.2.0-next.3","@fluentui/react-tabster":"9.0.0-rc.13","@react-hook/resize-observer":"^1.2.5","alea":"^1.0.1","lodash":"^4.17.21"},"scripts":{"build":"just-scripts build","fluentui:upgrade":"pnpm update @fluentui/react-components","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"cd ../icons && pnpm bundle && cd .. && cp icons/basic-icons.svg react/.storybook/public/basic-icons.svg && cd react && build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","_resolved":"","_integrity":"","_from":"file:fluent-blocks-react-9.2.0-next.5.tgz","readme":"\"Fluent\n\n### [Open Storybook ↗︎][storybook]\n\nFluent Blocks is a React implementation of [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs for app development based on [`@fluentui/react-components`][fluentui-v9]. This project succeeds [`@fluentui/react-teams`][react-teams].\n\nThis package provides a set of components developers can use to build fully interactive & accessible experiences using whatever React coding convention they prefer, rendering experiences that match Fluent & UI Kit designs.\n\n## ⚠️ In active development\n\nThis project’s API is subject to unannounced breaking changes and is not yet on any release cycle.\n\n## Development & contributing\n\nIf you’d like to run the development environment or contribute to this project, please see [the Contributing file](CONTRIBUTING.md).\n\n## Getting started\n\nUsing TypeScript and an IDE that supports type inspections will make using this project much easier!\n\n1. Add `react@17`, `react-dom@17`, and `@fluentui/react-components@latest` if they’re not in your project already\n2. Add `chart.js@^2.9.4` if you want to use charts from this package\n3. Depending on your package manager, you may need to add `@fluent-blocks/basic-icons` to use icons\n4. Install this package, `@fluent-blocks/react`, using your package manager\n\nNow anywhere you can use React, you can use Fluent Blocks. If you want to delegate the entire viewport to Fluent Blocks, use the `View` component on its own:\n\n```tsx\nimport { View, Escape } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n …for real this time.\n ,\n secondary: {\n actionId: 'start',\n label: 'Get started',\n icon: 'arrow_right',\n iconPosition: 'after'\n }\n }\n }\n },\n ],\n }}/>,\n document.getElementById('root')\n)\n```\n\nIf you want to use Fluent Blocks’ intermediary components, wrap where any will render in a single `FluentBlocksProvider` (there only needs to be one on the page):\n\n```tsx\nimport { FluentBlocksProvider, Illustration } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n \n ,\n document.getElementById('root')\n)\n```\n\nIn order to get the right background coverage and overflow behavior, you should apply `height: 100%` and `overflow: hidden` to the Fluent Blocks React root, and any parents of the Fluent Blocks React root should occupy the full height of whatever space Fluent Blocks should occupy.\n\nIf Fluent Blocks will render alone on the page, these rules are sufficient:\n\n```css\nhtml, body, #root {\n height: 100%;\n}\n#root {\n overflow: hidden;\n}\n```\n\n## How design pattern usage is validated through types\n\nSince the goal of this library is to aid in implementing experiences that conform to [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs and principles, it brings with it those design systems’ opinions. Each component has a concept for what kind of properties & content it accepts, which can be provided in one of two ways:\n\n1. As serializeable **props**, e.g. `{icon: 'fluent', size: 24}`\n1. As a JSX **element**, e.g. ``\n\nThe bolded terms are used in the TypeScript types for the components in this project, e.g. a valid icon instance matches `IconPropsOrElement`, which is either 1) `IconProps`, or 2) `IconElement`.\n\nFor consistency between the two syntaxes, the `children` prop and its implicit nesting equivalent in JSX is avoided in favor of named content props that parallel the serializeable syntax.\n\nSome top-level components like `View` will check the props it was provided and provide a detailed error if the props are incorrect in any way. All other components won’t check for issues and will simply refuse to render unexpected content. In either case, developers can explicitly mark where exceptions should be made using the `Escape` component described below.\n\n## Escaping validation\n\nThese components won’t render a component that has unexpected props or content, unless you use `Escape`. If you feel the need to use a pattern not provided by this project, you can do so using the `Escape` component as a JSX element in any of a component’s content props that aren’t “tightly-bound”, e.g.:\n\n```tsx\n// Only Escape imported from this package will render,\n// so make sure you’ve imported it:\nimport { Section, Escape } from '@fluentui/react-blocks';\n\n\n You can put anything here\n and it will be rendered.\n ,\n ]}\n/>\n```\n\n### Exceptions: tightly bound components\n\nA component may ignore `Escape` only if it is “tightly-bound” with another component. Components are tightly-bound when they make sense only when used together, e.g. `Layout` and `LayoutItem` where `Layout` will only render `LayoutItems` in its `items` prop. If you need to render special content in such a situation, you can either replace the entire parent with `Escape`, or use `Escape` as the _content_ of one of the children.\n\n### Escape inclusively, and share your designs!\n\nMake sure the content you add using `Escape` conforms to [WCAG 2.1][wcag] and is designed inclusively.\n\nIf you would like to share your pattern with the community, [we’d welcome your contribution](CONTRIBUTING.md)! We’d all thank you to submit PR’s that extend this project with your accessible high-quality patterns.\n\n## Concepts\n\nThis library harmonizes the patterns in Fluent and the UI Kit with concepts from web layout & interactivity by delivering components organized into these categories:\n\n- General components based on [formatting context][fmtctx]:\n - `Block` vs `Inline`\n- Specialized clusters of components with shared interactivity considerations:\n - **Media**, e.g.:\n - `Illustration`\n - `Chart`\n - **Inputs**, e.g.:\n - `RadioGroup`\n - `ShortTextInput`\n- **Surfaces**, each of which expect to be unique in a given view\n- **Views**, the top-level components which render an entire UI in a viewport\n\nAny component may also have **Exemplars**, which render the same component but with a specialized API surface optimized for a specific use-case for the pattern, e.g. `Widget` always renders a `Card` though its props are based on the more constrained scope of content for cards in a dashboard from the UI Kit.\n\n## Icons\n\nThis project supports using icons from [`fluentui-system-icons`][fluent-icons] through SVG sprites implemented in [an experimental fork of that project](https://github.com/thure/fluentui-system-icons/tree/master/packages/svg-sprites). The `Icon` component will render an SVG of the appropriate size containing a `use` element with an `href` to the appropriate sprite, e.g.:\n\n```tsx\n// If used wherever `InlineSequence` or `IconPropsOrElement` is accepted,\n// both the props syntax and element syntax will be rendered the same way.\nconst catIcon =\n { icon: 'animal_cat', size: 24, variant: 'outline' } ||\n \n```\n\nThis project currently expects any requests to `/sprites/**` to serve an SVG sprite with the appropriate content, which for the Storybook development server is proxied to a specific release on jsDelivr.\n\nIn your own project, we recommend serving just the sprites you need locally if possible. Do not use proxies for icons in production.\n\n[figma-fluent]: https://www.figma.com/community/file/836828295772957889/Microsoft-Fluent-Web\n[figma-uikit]: https://www.figma.com/community/file/916836509871353159/Microsoft-Teams-UI-Kit\n[fluent-icons]: https://github.com/microsoft/fluentui-system-icons\n[fluentui-v9]: https://www.npmjs.com/package/@fluentui/react-components\n[react-teams]: https://www.npmjs.com/package/@fluentui/react-teams\n[storybook]: https://aka.ms/fluent-blocks-storybook\n[wcag]: https://www.w3.org/TR/WCAG21\n[fmtctx]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow\n","readmeFilename":"README.md","description":"\"Fluent","bugs":{"url":"https://github.com/OfficeDev/fluent-blocks/issues"},"homepage":"https://github.com/OfficeDev/fluent-blocks#readme","_id":"@fluent-blocks/react@9.2.0-next.5","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-fhqdumtIGy99y95zHYqqq2pGWJL935JqQARDrqDAj4xPn/NDC2Ypo6rOPeo945QCVIwUbQMKCFCHeqkVPY284g==","shasum":"7950a955d716131efeba7ea473e3471111277fd2","tarball":"https://registry.npmjs.org/@fluent-blocks/react/-/react-9.2.0-next.5.tgz","fileCount":412,"unpackedSize":774147,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwdUurE+sINrfLvST3jSZhU/2obcggkcC5zHzJn20TQAIgYfy6sJIYIEuzdlFPti7d8af4iZVkwkLENYRTXm8tuZs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivBHtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZTxAAhzlvfL+RvTDw0MshjnV2xW9HpidlmFQgRl2xIaleZGw4EZCA\r\nGgLVV1Z1T5m4camBGHuZw1prWyM9xa2AHxbUCD0Jreq4oO/2hyugYZqmrIfQ\r\nRS3oJO4Mgp/seUoteVuucEh2QsdrFX3h4+WOUFHomrvRoaeeJZseMTlKq00e\r\ngC88LySa31u8pRjDTYueEtd5m3fcjFNGwOuWqNwxl8jS/7lJ9riYv6jBzDmT\r\nLoo/x9s1XxP76NkkTdNxvaL63p9qqLKG/3XBIieSIJQozSYJXCFjh2r5Z//g\r\nsnNQCU4IBm4KbNwHHi1SrDVV4NAaLYHMF/rCfEwosOvbKXbIGXwA6VlEE7Rl\r\nt5BHIuVBagPBX6N4D9Wku8FGcXxndDAn2xhWzrIWdfdF0pLEJUie9OTwweoQ\r\ntwg6HHnO2HACWzAda8AztdtFGEWNfOs+Yzx7F/mV4MnogIsdyrkiwD+OoxtS\r\nGBrhD9IQmPHeTC8KJ3uoWRGAPqJuSIZHdFcfVuqCZPvEaJSYEQM5wJ2fubzY\r\nRkJHBtWdywCPtrxKcNM06XZyvA6ZohOuv/81MC46IqDuIMUijOGsNcgf/VAT\r\nEJfW38HvKTpSTS8/SUzYIe/vLwkrCAln14wFgJCBxKFsnRaEtDdoQQC9DIrg\r\nziJPDFjgNR2ZKY7FNuD+fbrk4Fr1FGA0KmM=\r\n=/w1L\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"msdstwg","email":"willshown@microsoft.com"},"directories":{},"maintainers":[{"name":"msdstwg","email":"willshown@microsoft.com"},{"name":"thure","email":"npm@willshown.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_9.2.0-next.5_1656492525335_0.4131412431199053"},"_hasShrinkwrap":false},"9.2.0-next.6":{"name":"@fluent-blocks/react","version":"9.2.0-next.6","repository":{"type":"git","url":"git+ssh://git@github.com/OfficeDev/fluent-blocks.git"},"authors":["Will Shown ","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^7"},"peerDependencies":{"chart.js":"^2.9.4","react":"^16.14.0, 17.x, 18.x","react-dom":"^16.14.0, 17.x, 18.x"},"devDependencies":{"@babel/core":"latest","@faker-js/faker":"^7.3.0","@playwright/test":"latest","@storybook/addon-actions":"^6.5.9","@storybook/addon-essentials":"^6.5.9","@storybook/addon-links":"^6.5.9","@storybook/addons":"^6.5.9","@storybook/react":"^6.5.9","@storybook/theming":"^6.5.9","@types/chart.js":"^2.9.37","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.35","@types/react":"18.x","@types/react-dom":"18.x","@types/react-test-renderer":"latest","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.20","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":"18.x","react-dom":"18.x","react-test-renderer":"latest","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.1.3-next.1","@fluent-blocks/colors":"9.1.1-next.0","@fluent-blocks/schemas":"9.2.0-next.3","@fluentui/react-components":"~9.0.1","@fluentui/react-tabster":"~9.0.1","@react-hook/resize-observer":"^1.2.5","alea":"^1.0.1","lodash":"^4.17.21"},"scripts":{"build":"just-scripts build","fluentui:upgrade":"pnpm update @fluentui/react-components","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"cd ../icons && pnpm bundle && cd .. && cp icons/basic-icons.svg react/.storybook/public/basic-icons.svg && cd react && build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","_resolved":"","_integrity":"","_from":"file:fluent-blocks-react-9.2.0-next.6.tgz","readme":"\"Fluent\n\n### [Open Storybook ↗︎][storybook]\n\nFluent Blocks is a React implementation of [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs for app development based on [`@fluentui/react-components`][fluentui-v9]. This project succeeds [`@fluentui/react-teams`][react-teams].\n\nThis package provides a set of components developers can use to build fully interactive & accessible experiences using whatever React coding convention they prefer, rendering experiences that match Fluent & UI Kit designs.\n\n## ⚠️ In active development\n\nThis project’s API is subject to unannounced breaking changes and is not yet on any release cycle.\n\n## Development & contributing\n\nIf you’d like to run the development environment or contribute to this project, please see [the Contributing file](CONTRIBUTING.md).\n\n## Getting started\n\nUsing TypeScript and an IDE that supports type inspections will make using this project much easier!\n\n1. Add `react@17`, `react-dom@17`, and `@fluentui/react-components@latest` if they’re not in your project already\n2. Add `chart.js@^2.9.4` if you want to use charts from this package\n3. Depending on your package manager, you may need to add `@fluent-blocks/basic-icons` to use icons\n4. Install this package, `@fluent-blocks/react`, using your package manager\n\nNow anywhere you can use React, you can use Fluent Blocks. If you want to delegate the entire viewport to Fluent Blocks, use the `View` component on its own:\n\n```tsx\nimport { View, Escape } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n …for real this time.\n ,\n secondary: {\n actionId: 'start',\n label: 'Get started',\n icon: 'arrow_right',\n iconPosition: 'after'\n }\n }\n }\n },\n ],\n }}/>,\n document.getElementById('root')\n)\n```\n\nIf you want to use Fluent Blocks’ intermediary components, wrap where any will render in a single `FluentBlocksProvider` (there only needs to be one on the page):\n\n```tsx\nimport { FluentBlocksProvider, Illustration } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n \n ,\n document.getElementById('root')\n)\n```\n\nIn order to get the right background coverage and overflow behavior, you should apply `height: 100%` and `overflow: hidden` to the Fluent Blocks React root, and any parents of the Fluent Blocks React root should occupy the full height of whatever space Fluent Blocks should occupy.\n\nIf Fluent Blocks will render alone on the page, these rules are sufficient:\n\n```css\nhtml, body, #root {\n height: 100%;\n}\n#root {\n overflow: hidden;\n}\n```\n\n## How design pattern usage is validated through types\n\nSince the goal of this library is to aid in implementing experiences that conform to [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs and principles, it brings with it those design systems’ opinions. Each component has a concept for what kind of properties & content it accepts, which can be provided in one of two ways:\n\n1. As serializeable **props**, e.g. `{icon: 'fluent', size: 24}`\n1. As a JSX **element**, e.g. ``\n\nThe bolded terms are used in the TypeScript types for the components in this project, e.g. a valid icon instance matches `IconPropsOrElement`, which is either 1) `IconProps`, or 2) `IconElement`.\n\nFor consistency between the two syntaxes, the `children` prop and its implicit nesting equivalent in JSX is avoided in favor of named content props that parallel the serializeable syntax.\n\nSome top-level components like `View` will check the props it was provided and provide a detailed error if the props are incorrect in any way. All other components won’t check for issues and will simply refuse to render unexpected content. In either case, developers can explicitly mark where exceptions should be made using the `Escape` component described below.\n\n## Escaping validation\n\nThese components won’t render a component that has unexpected props or content, unless you use `Escape`. If you feel the need to use a pattern not provided by this project, you can do so using the `Escape` component as a JSX element in any of a component’s content props that aren’t “tightly-bound”, e.g.:\n\n```tsx\n// Only Escape imported from this package will render,\n// so make sure you’ve imported it:\nimport { Section, Escape } from '@fluentui/react-blocks';\n\n\n You can put anything here\n and it will be rendered.\n ,\n ]}\n/>\n```\n\n### Exceptions: tightly bound components\n\nA component may ignore `Escape` only if it is “tightly-bound” with another component. Components are tightly-bound when they make sense only when used together, e.g. `Layout` and `LayoutItem` where `Layout` will only render `LayoutItems` in its `items` prop. If you need to render special content in such a situation, you can either replace the entire parent with `Escape`, or use `Escape` as the _content_ of one of the children.\n\n### Escape inclusively, and share your designs!\n\nMake sure the content you add using `Escape` conforms to [WCAG 2.1][wcag] and is designed inclusively.\n\nIf you would like to share your pattern with the community, [we’d welcome your contribution](CONTRIBUTING.md)! We’d all thank you to submit PR’s that extend this project with your accessible high-quality patterns.\n\n## Concepts\n\nThis library harmonizes the patterns in Fluent and the UI Kit with concepts from web layout & interactivity by delivering components organized into these categories:\n\n- General components based on [formatting context][fmtctx]:\n - `Block` vs `Inline`\n- Specialized clusters of components with shared interactivity considerations:\n - **Media**, e.g.:\n - `Illustration`\n - `Chart`\n - **Inputs**, e.g.:\n - `RadioGroup`\n - `ShortTextInput`\n- **Surfaces**, each of which expect to be unique in a given view\n- **Views**, the top-level components which render an entire UI in a viewport\n\nAny component may also have **Exemplars**, which render the same component but with a specialized API surface optimized for a specific use-case for the pattern, e.g. `Widget` always renders a `Card` though its props are based on the more constrained scope of content for cards in a dashboard from the UI Kit.\n\n## Icons\n\nThis project supports using icons from [`fluentui-system-icons`][fluent-icons] through SVG sprites implemented in [an experimental fork of that project](https://github.com/thure/fluentui-system-icons/tree/master/packages/svg-sprites). The `Icon` component will render an SVG of the appropriate size containing a `use` element with an `href` to the appropriate sprite, e.g.:\n\n```tsx\n// If used wherever `InlineSequence` or `IconPropsOrElement` is accepted,\n// both the props syntax and element syntax will be rendered the same way.\nconst catIcon =\n { icon: 'animal_cat', size: 24, variant: 'outline' } ||\n \n```\n\nThis project currently expects any requests to `/sprites/**` to serve an SVG sprite with the appropriate content, which for the Storybook development server is proxied to a specific release on jsDelivr.\n\nIn your own project, we recommend serving just the sprites you need locally if possible. Do not use proxies for icons in production.\n\n[figma-fluent]: https://www.figma.com/community/file/836828295772957889/Microsoft-Fluent-Web\n[figma-uikit]: https://www.figma.com/community/file/916836509871353159/Microsoft-Teams-UI-Kit\n[fluent-icons]: https://github.com/microsoft/fluentui-system-icons\n[fluentui-v9]: https://www.npmjs.com/package/@fluentui/react-components\n[react-teams]: https://www.npmjs.com/package/@fluentui/react-teams\n[storybook]: https://aka.ms/fluent-blocks-storybook\n[wcag]: https://www.w3.org/TR/WCAG21\n[fmtctx]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow\n","readmeFilename":"README.md","description":"\"Fluent","bugs":{"url":"https://github.com/OfficeDev/fluent-blocks/issues"},"homepage":"https://github.com/OfficeDev/fluent-blocks#readme","_id":"@fluent-blocks/react@9.2.0-next.6","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-NFmq+y7SJnsuVfJ6tVzgWLnFbdq+Ug6wtCisXKiNsVzd0CVOaf/eSN4zcZ5mT0fwLN6jPpcttWxE0xWOUn/VzQ==","shasum":"83e439cc5c621a3c7f62884ba471c9d1c0d352f1","tarball":"https://registry.npmjs.org/@fluent-blocks/react/-/react-9.2.0-next.6.tgz","fileCount":416,"unpackedSize":786140,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAthDlV80hEIy8BWpRhGqMrmvVLW5x0JzQPIkN6IuMoAAiA3WZLmoCMUKYaOEg+aBIAsvF0vPb/iy5Y/5kB/OFDbgQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiwMtxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpAABAAn4LWqohAqsXAgcGypv57Qy0mlAQaI5jYCWhr5+yWs/iws31A\r\nAyS3GS4juB20VJR1LInzlZzqyYVkEQEAq0+gF22JhoWAWgOQ1X9/oTfK7Rdy\r\n/DL7h04Ua6a35TeASLcFcyDNWCsMD3aouSTRYXKMUgoKHml6hWtT7FDQS8P2\r\nFJa8V/tPSgcwGxXwP4RhrZgQzJuv2V+e4B6lyEezKc5TMaE+7Q2yUMrB49Ps\r\nZd4KuMjBk6Lt/tqPd1CD4Jvo5Qubl/B4hld0OZLj7JqUoDkrTpRzHrkO+G0f\r\ngUBuqOGprwJmfW3tRjjiSjpHI9x6+2iYTziPU4LxwDILMn+f8pp6MbtnZ7pY\r\nkYPMMWecq0Y1icN9kifMduArfqj4fTxXIWXNhUFxp+KDUm/CmLx3V2RfMdTr\r\nEsBI2rq4XhQ/WUMyU0QFfvpQYXoXwj1KMQmzc04XdzaB+VCRZ7sHYNmVL06r\r\n+PEJiBGtoIly18Unhp1JFVZkjNH39p6C+LjUhJ9UZ6ok75ZTK8iQ3t4c+4O7\r\nTDoG3hqFLwhbW3Aasocyd6S+D62RFNU69+2JMDh+EIPK723ZEy5Kh3+OxZnz\r\nfCT3e5DF5MQ9uatmgvkM0/IKF9MtRShetjwg+i0AaEAZ0lUsioN13agcvlST\r\nzFI///3WbAF7bVywMlGBuRQCqIUZVW396Is=\r\n=iYoo\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"msdstwg","email":"willshown@microsoft.com"},"directories":{},"maintainers":[{"name":"msdstwg","email":"willshown@microsoft.com"},{"name":"thure","email":"npm@willshown.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_9.2.0-next.6_1656802160903_0.004267129705629813"},"_hasShrinkwrap":false},"9.2.0-next.7":{"name":"@fluent-blocks/react","version":"9.2.0-next.7","repository":{"type":"git","url":"git+ssh://git@github.com/OfficeDev/fluent-blocks.git"},"authors":["Will Shown ","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^7"},"peerDependencies":{"chart.js":"^2.9.4","react":"^16.14.0, 17.x, 18.x","react-dom":"^16.14.0, 17.x, 18.x"},"devDependencies":{"@babel/core":"latest","@faker-js/faker":"^7.3.0","@playwright/test":"latest","@storybook/addon-actions":"^6.5.9","@storybook/addon-essentials":"^6.5.9","@storybook/addon-links":"^6.5.9","@storybook/addons":"^6.5.9","@storybook/react":"^6.5.9","@storybook/theming":"^6.5.9","@types/chart.js":"^2.9.37","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.35","@types/react":"18.x","@types/react-dom":"18.x","@types/react-test-renderer":"latest","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.20","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":"18.x","react-dom":"18.x","react-test-renderer":"latest","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.1.3-next.1","@fluent-blocks/colors":"9.1.1-next.0","@fluent-blocks/schemas":"9.2.0-next.3","@fluentui/react-components":"~9.0.1","@fluentui/react-tabster":"~9.0.1","@react-hook/resize-observer":"^1.2.5","alea":"^1.0.1","lodash":"^4.17.21"},"scripts":{"build":"just-scripts build","fluentui:upgrade":"pnpm update @fluentui/react-components","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"cd ../icons && pnpm bundle && cd .. && cp icons/basic-icons.svg react/.storybook/public/basic-icons.svg && cd react && build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","_resolved":"","_integrity":"","_from":"file:fluent-blocks-react-9.2.0-next.7.tgz","readme":"\"Fluent\n\n### [Open Storybook ↗︎][storybook]\n\nFluent Blocks is a React implementation of [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs for app development based on [`@fluentui/react-components`][fluentui-v9]. This project succeeds [`@fluentui/react-teams`][react-teams].\n\nThis package provides a set of components developers can use to build fully interactive & accessible experiences using whatever React coding convention they prefer, rendering experiences that match Fluent & UI Kit designs.\n\n## ⚠️ In active development\n\nThis project’s API is subject to unannounced breaking changes and is not yet on any release cycle.\n\n## Development & contributing\n\nIf you’d like to run the development environment or contribute to this project, please see [the Contributing file](CONTRIBUTING.md).\n\n## Getting started\n\nUsing TypeScript and an IDE that supports type inspections will make using this project much easier!\n\n1. Add `react@17`, `react-dom@17`, and `@fluentui/react-components@latest` if they’re not in your project already\n2. Add `chart.js@^2.9.4` if you want to use charts from this package\n3. Depending on your package manager, you may need to add `@fluent-blocks/basic-icons` to use icons\n4. Install this package, `@fluent-blocks/react`, using your package manager\n\nNow anywhere you can use React, you can use Fluent Blocks. If you want to delegate the entire viewport to Fluent Blocks, use the `View` component on its own:\n\n```tsx\nimport { View, Escape } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n …for real this time.\n ,\n secondary: {\n actionId: 'start',\n label: 'Get started',\n icon: 'arrow_right',\n iconPosition: 'after'\n }\n }\n }\n },\n ],\n }}/>,\n document.getElementById('root')\n)\n```\n\nIf you want to use Fluent Blocks’ intermediary components, wrap where any will render in a single `FluentBlocksProvider` (there only needs to be one on the page):\n\n```tsx\nimport { FluentBlocksProvider, Illustration } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n \n ,\n document.getElementById('root')\n)\n```\n\nIn order to get the right background coverage and overflow behavior, you should apply `height: 100%` and `overflow: hidden` to the Fluent Blocks React root, and any parents of the Fluent Blocks React root should occupy the full height of whatever space Fluent Blocks should occupy.\n\nIf Fluent Blocks will render alone on the page, these rules are sufficient:\n\n```css\nhtml, body, #root {\n height: 100%;\n}\n#root {\n overflow: hidden;\n}\n```\n\n## How design pattern usage is validated through types\n\nSince the goal of this library is to aid in implementing experiences that conform to [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs and principles, it brings with it those design systems’ opinions. Each component has a concept for what kind of properties & content it accepts, which can be provided in one of two ways:\n\n1. As serializeable **props**, e.g. `{icon: 'fluent', size: 24}`\n1. As a JSX **element**, e.g. ``\n\nThe bolded terms are used in the TypeScript types for the components in this project, e.g. a valid icon instance matches `IconPropsOrElement`, which is either 1) `IconProps`, or 2) `IconElement`.\n\nFor consistency between the two syntaxes, the `children` prop and its implicit nesting equivalent in JSX is avoided in favor of named content props that parallel the serializeable syntax.\n\nSome top-level components like `View` will check the props it was provided and provide a detailed error if the props are incorrect in any way. All other components won’t check for issues and will simply refuse to render unexpected content. In either case, developers can explicitly mark where exceptions should be made using the `Escape` component described below.\n\n## Escaping validation\n\nThese components won’t render a component that has unexpected props or content, unless you use `Escape`. If you feel the need to use a pattern not provided by this project, you can do so using the `Escape` component as a JSX element in any of a component’s content props that aren’t “tightly-bound”, e.g.:\n\n```tsx\n// Only Escape imported from this package will render,\n// so make sure you’ve imported it:\nimport { Section, Escape } from '@fluentui/react-blocks';\n\n\n You can put anything here\n and it will be rendered.\n ,\n ]}\n/>\n```\n\n### Exceptions: tightly bound components\n\nA component may ignore `Escape` only if it is “tightly-bound” with another component. Components are tightly-bound when they make sense only when used together, e.g. `Layout` and `LayoutItem` where `Layout` will only render `LayoutItems` in its `items` prop. If you need to render special content in such a situation, you can either replace the entire parent with `Escape`, or use `Escape` as the _content_ of one of the children.\n\n### Escape inclusively, and share your designs!\n\nMake sure the content you add using `Escape` conforms to [WCAG 2.1][wcag] and is designed inclusively.\n\nIf you would like to share your pattern with the community, [we’d welcome your contribution](CONTRIBUTING.md)! We’d all thank you to submit PR’s that extend this project with your accessible high-quality patterns.\n\n## Concepts\n\nThis library harmonizes the patterns in Fluent and the UI Kit with concepts from web layout & interactivity by delivering components organized into these categories:\n\n- General components based on [formatting context][fmtctx]:\n - `Block` vs `Inline`\n- Specialized clusters of components with shared interactivity considerations:\n - **Media**, e.g.:\n - `Illustration`\n - `Chart`\n - **Inputs**, e.g.:\n - `RadioGroup`\n - `ShortTextInput`\n- **Surfaces**, each of which expect to be unique in a given view\n- **Views**, the top-level components which render an entire UI in a viewport\n\nAny component may also have **Exemplars**, which render the same component but with a specialized API surface optimized for a specific use-case for the pattern, e.g. `Widget` always renders a `Card` though its props are based on the more constrained scope of content for cards in a dashboard from the UI Kit.\n\n## Icons\n\nThis project supports using icons from [`fluentui-system-icons`][fluent-icons] through SVG sprites implemented in [an experimental fork of that project](https://github.com/thure/fluentui-system-icons/tree/master/packages/svg-sprites). The `Icon` component will render an SVG of the appropriate size containing a `use` element with an `href` to the appropriate sprite, e.g.:\n\n```tsx\n// If used wherever `InlineSequence` or `IconPropsOrElement` is accepted,\n// both the props syntax and element syntax will be rendered the same way.\nconst catIcon =\n { icon: 'animal_cat', size: 24, variant: 'outline' } ||\n \n```\n\nThis project currently expects any requests to `/sprites/**` to serve an SVG sprite with the appropriate content, which for the Storybook development server is proxied to a specific release on jsDelivr.\n\nIn your own project, we recommend serving just the sprites you need locally if possible. Do not use proxies for icons in production.\n\n[figma-fluent]: https://www.figma.com/community/file/836828295772957889/Microsoft-Fluent-Web\n[figma-uikit]: https://www.figma.com/community/file/916836509871353159/Microsoft-Teams-UI-Kit\n[fluent-icons]: https://github.com/microsoft/fluentui-system-icons\n[fluentui-v9]: https://www.npmjs.com/package/@fluentui/react-components\n[react-teams]: https://www.npmjs.com/package/@fluentui/react-teams\n[storybook]: https://aka.ms/fluent-blocks-storybook\n[wcag]: https://www.w3.org/TR/WCAG21\n[fmtctx]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow\n","readmeFilename":"README.md","description":"\"Fluent","bugs":{"url":"https://github.com/OfficeDev/fluent-blocks/issues"},"homepage":"https://github.com/OfficeDev/fluent-blocks#readme","_id":"@fluent-blocks/react@9.2.0-next.7","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-eheq+ecpJt8EEfVytFeHIdXHLfEqS38QuU47D40OKWjSi7RPrJn55Ju2szuQqhkq8kcmUkThlq9qv842lKd2mw==","shasum":"21d3730724dd9e699f662c1ca3a1eeb2828fe841","tarball":"https://registry.npmjs.org/@fluent-blocks/react/-/react-9.2.0-next.7.tgz","fileCount":416,"unpackedSize":787525,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB201JOkDPaV0e/rQzcj5NuAQdxdMiBJuy8G1CKIvjZCAiEA5oy8zaHHDPREpODfEDzUsJzpYhzThlhlqZwNWqaG0cY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiwOZ8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqlNg/8DnQvZ+eDbwXaQb3yFiRE/5cea6zsschzC0R5AcT0527mSXIs\r\n4qqIRpHBk7gZGWDP3FQ9A7QiYLmH4UZ5TIpOndx7Fo7eYfCms3MOcftt/U/a\r\nKneDhhyk8ljGNdvMI256+nlfaZlwFu3+gmWprLR7TwZUIVv4H8UU5VOzRbpU\r\nFvSw9gPqtmw9NCoDCl0Odc0j+e7fk/egKTyG+YPEtvvBbZvg/PG50FxsFDBV\r\nhi/s10U14nkEUjOrZUa/2GzSiP85sekF3doShwsmLZJJNVS+so/jAHfMiBvU\r\nP9BPJcACWfaZ1N8VXZRARrEOJdCXcwgvYtr2XGPSmxmcd/u8RZYzjorjDIIx\r\nci0dUHKtiC8VJpNLBUp9tEAzotz0CDkgtjVVSe56VbNtd4PJNgDgs9/z/91w\r\nMfae47ggLVOQZctr1lzZNkrqEY4UrrAPaYnGHBBB8+fohK4wo0G1k5GcpPIJ\r\nUS1V7OpGswufmndgb3+N//KoofaZeq4LZjhROq27aOvEaVsjDnfiDSA3u8qq\r\n0oHc8ixihbNB+P9aNT7Lbfvg0EUkaylmScgzig+7+me7F4u1TcDeyQ0MHLNU\r\ncl1BDZRpvNGSt7NQeGSU3bx0VA6aQa/R+S+p0rl4bKDP3MbmljDEryAngdfP\r\nMekWb3bGcTJ3m53VhfMSRIX4MJ/0SYTiCXU=\r\n=1Fkq\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"msdstwg","email":"willshown@microsoft.com"},"directories":{},"maintainers":[{"name":"msdstwg","email":"willshown@microsoft.com"},{"name":"thure","email":"npm@willshown.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_9.2.0-next.7_1656809084463_0.8141678143441824"},"_hasShrinkwrap":false},"9.2.0-next.8":{"name":"@fluent-blocks/react","version":"9.2.0-next.8","repository":{"type":"git","url":"git+ssh://git@github.com/OfficeDev/fluent-blocks.git"},"authors":["Will Shown ","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^7"},"peerDependencies":{"chart.js":"^2.9.4","react":"^16.14.0, 17.x, 18.x","react-dom":"^16.14.0, 17.x, 18.x"},"devDependencies":{"@babel/core":"latest","@faker-js/faker":"^7.3.0","@playwright/test":"latest","@storybook/addon-actions":"^6.5.9","@storybook/addon-essentials":"^6.5.9","@storybook/addon-links":"^6.5.9","@storybook/addons":"^6.5.9","@storybook/react":"^6.5.9","@storybook/theming":"^6.5.9","@types/chart.js":"^2.9.37","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.35","@types/react":"18.x","@types/react-dom":"18.x","@types/react-test-renderer":"latest","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.20","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":"18.x","react-dom":"18.x","react-test-renderer":"latest","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.1.3-next.1","@fluent-blocks/colors":"9.1.1-next.0","@fluent-blocks/schemas":"9.2.0-next.3","@fluentui/react-components":"~9.0.1","@fluentui/react-tabster":"~9.0.1","@react-hook/resize-observer":"^1.2.5","alea":"^1.0.1","lodash":"^4.17.21"},"scripts":{"build":"just-scripts build","fluentui:upgrade":"pnpm update @fluentui/react-components","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"cd ../icons && pnpm bundle && cd .. && cp icons/basic-icons.svg react/.storybook/public/basic-icons.svg && cd react && build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","_resolved":"","_integrity":"","_from":"file:fluent-blocks-react-9.2.0-next.8.tgz","readme":"\"Fluent\n\n### [Open Storybook ↗︎][storybook]\n\nFluent Blocks is a React implementation of [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs for app development based on [`@fluentui/react-components`][fluentui-v9]. This project succeeds [`@fluentui/react-teams`][react-teams].\n\nThis package provides a set of components developers can use to build fully interactive & accessible experiences using whatever React coding convention they prefer, rendering experiences that match Fluent & UI Kit designs.\n\n## ⚠️ In active development\n\nThis project’s API is subject to unannounced breaking changes and is not yet on any release cycle.\n\n## Development & contributing\n\nIf you’d like to run the development environment or contribute to this project, please see [the Contributing file](CONTRIBUTING.md).\n\n## Getting started\n\nUsing TypeScript and an IDE that supports type inspections will make using this project much easier!\n\n1. Add `react@17`, `react-dom@17`, and `@fluentui/react-components@latest` if they’re not in your project already\n2. Add `chart.js@^2.9.4` if you want to use charts from this package\n3. Depending on your package manager, you may need to add `@fluent-blocks/basic-icons` to use icons\n4. Install this package, `@fluent-blocks/react`, using your package manager\n\nNow anywhere you can use React, you can use Fluent Blocks. If you want to delegate the entire viewport to Fluent Blocks, use the `View` component on its own:\n\n```tsx\nimport { View, Escape } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n …for real this time.\n ,\n secondary: {\n actionId: 'start',\n label: 'Get started',\n icon: 'arrow_right',\n iconPosition: 'after'\n }\n }\n }\n },\n ],\n }}/>,\n document.getElementById('root')\n)\n```\n\nIf you want to use Fluent Blocks’ intermediary components, wrap where any will render in a single `FluentBlocksProvider` (there only needs to be one on the page):\n\n```tsx\nimport { FluentBlocksProvider, Illustration } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n \n ,\n document.getElementById('root')\n)\n```\n\nIn order to get the right background coverage and overflow behavior, you should apply `height: 100%` and `overflow: hidden` to the Fluent Blocks React root, and any parents of the Fluent Blocks React root should occupy the full height of whatever space Fluent Blocks should occupy.\n\nIf Fluent Blocks will render alone on the page, these rules are sufficient:\n\n```css\nhtml, body, #root {\n height: 100%;\n}\n#root {\n overflow: hidden;\n}\n```\n\n## How design pattern usage is validated through types\n\nSince the goal of this library is to aid in implementing experiences that conform to [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs and principles, it brings with it those design systems’ opinions. Each component has a concept for what kind of properties & content it accepts, which can be provided in one of two ways:\n\n1. As serializeable **props**, e.g. `{icon: 'fluent', size: 24}`\n1. As a JSX **element**, e.g. ``\n\nThe bolded terms are used in the TypeScript types for the components in this project, e.g. a valid icon instance matches `IconPropsOrElement`, which is either 1) `IconProps`, or 2) `IconElement`.\n\nFor consistency between the two syntaxes, the `children` prop and its implicit nesting equivalent in JSX is avoided in favor of named content props that parallel the serializeable syntax.\n\nSome top-level components like `View` will check the props it was provided and provide a detailed error if the props are incorrect in any way. All other components won’t check for issues and will simply refuse to render unexpected content. In either case, developers can explicitly mark where exceptions should be made using the `Escape` component described below.\n\n## Escaping validation\n\nThese components won’t render a component that has unexpected props or content, unless you use `Escape`. If you feel the need to use a pattern not provided by this project, you can do so using the `Escape` component as a JSX element in any of a component’s content props that aren’t “tightly-bound”, e.g.:\n\n```tsx\n// Only Escape imported from this package will render,\n// so make sure you’ve imported it:\nimport { Section, Escape } from '@fluentui/react-blocks';\n\n\n You can put anything here\n and it will be rendered.\n ,\n ]}\n/>\n```\n\n### Exceptions: tightly bound components\n\nA component may ignore `Escape` only if it is “tightly-bound” with another component. Components are tightly-bound when they make sense only when used together, e.g. `Layout` and `LayoutItem` where `Layout` will only render `LayoutItems` in its `items` prop. If you need to render special content in such a situation, you can either replace the entire parent with `Escape`, or use `Escape` as the _content_ of one of the children.\n\n### Escape inclusively, and share your designs!\n\nMake sure the content you add using `Escape` conforms to [WCAG 2.1][wcag] and is designed inclusively.\n\nIf you would like to share your pattern with the community, [we’d welcome your contribution](CONTRIBUTING.md)! We’d all thank you to submit PR’s that extend this project with your accessible high-quality patterns.\n\n## Concepts\n\nThis library harmonizes the patterns in Fluent and the UI Kit with concepts from web layout & interactivity by delivering components organized into these categories:\n\n- General components based on [formatting context][fmtctx]:\n - `Block` vs `Inline`\n- Specialized clusters of components with shared interactivity considerations:\n - **Media**, e.g.:\n - `Illustration`\n - `Chart`\n - **Inputs**, e.g.:\n - `RadioGroup`\n - `ShortTextInput`\n- **Surfaces**, each of which expect to be unique in a given view\n- **Views**, the top-level components which render an entire UI in a viewport\n\nAny component may also have **Exemplars**, which render the same component but with a specialized API surface optimized for a specific use-case for the pattern, e.g. `Widget` always renders a `Card` though its props are based on the more constrained scope of content for cards in a dashboard from the UI Kit.\n\n## Icons\n\nThis project supports using icons from [`fluentui-system-icons`][fluent-icons] through SVG sprites implemented in [an experimental fork of that project](https://github.com/thure/fluentui-system-icons/tree/master/packages/svg-sprites). The `Icon` component will render an SVG of the appropriate size containing a `use` element with an `href` to the appropriate sprite, e.g.:\n\n```tsx\n// If used wherever `InlineSequence` or `IconPropsOrElement` is accepted,\n// both the props syntax and element syntax will be rendered the same way.\nconst catIcon =\n { icon: 'animal_cat', size: 24, variant: 'outline' } ||\n \n```\n\nThis project currently expects any requests to `/sprites/**` to serve an SVG sprite with the appropriate content, which for the Storybook development server is proxied to a specific release on jsDelivr.\n\nIn your own project, we recommend serving just the sprites you need locally if possible. Do not use proxies for icons in production.\n\n[figma-fluent]: https://www.figma.com/community/file/836828295772957889/Microsoft-Fluent-Web\n[figma-uikit]: https://www.figma.com/community/file/916836509871353159/Microsoft-Teams-UI-Kit\n[fluent-icons]: https://github.com/microsoft/fluentui-system-icons\n[fluentui-v9]: https://www.npmjs.com/package/@fluentui/react-components\n[react-teams]: https://www.npmjs.com/package/@fluentui/react-teams\n[storybook]: https://aka.ms/fluent-blocks-storybook\n[wcag]: https://www.w3.org/TR/WCAG21\n[fmtctx]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow\n","readmeFilename":"README.md","description":"\"Fluent","bugs":{"url":"https://github.com/OfficeDev/fluent-blocks/issues"},"homepage":"https://github.com/OfficeDev/fluent-blocks#readme","_id":"@fluent-blocks/react@9.2.0-next.8","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-/YuItuoV9dg86xjZ8tpoTEalBN9jyDgn5Z4ktOEWteK0EAXDopKEplHMMZxLBboUbeB+JzIhIjnTnLsPAsJ6ow==","shasum":"bd8d879adb4d93a141b71256f398ca0661a9b9d3","tarball":"https://registry.npmjs.org/@fluent-blocks/react/-/react-9.2.0-next.8.tgz","fileCount":416,"unpackedSize":788061,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEGwLcvV+BhAx/6PkOIoS3qrN76LgbppOlrhoMfhNU4TAiEA8Aphxa3o7HvYg02sYKUpvi7TBkZSIK8VIxYr6DqpB6Y="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiw1h+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqoMA/9HB+4xwtigKKgL1MJBxgZBsKa7GLssY6xt26zGNby/UYPknOc\r\n7XOFEfznfcOB76XQ5pFZOPKArMGukrE4KgZV9pQ2Y28ej8FFLtNrK+keT3Ue\r\n7wRKi68eJGT/fof/Mp5SDBv4/qXu77d7VGvrSQnzZj0yMuAIaTyLzMj19udH\r\nY1JLNQ3SEu3ruSBPZ+7GkZTRn8kuJLvpSWP2rNqhn8z0jia9fip2VmtB8JR7\r\nnLYwJPua9F8brfsvUBZkXN62CtbfFTDYB/ucbX2pek++CBqXmbo+1GvNKJrg\r\nuMJe46WKukZLV19XixPtzQzlFuQUV1/n91H2tFXknSvAAQcbxXFWkcPRZJg0\r\na8lApoHEM9mPRmxoi2Tn5Qy17yK0QM9W5d8BpSrrfufGk+VWHxjZuVRFDe8H\r\n9MhLQiXf1XU0GaszTOiR/QgiI33fHrWbUO8N4i+3HojXDfuaHsUaev/tfKXw\r\nTBmkqM1DdJIvZUp0qrSn5hkvW2Cyr+F8WAW1WjxDgPKdvQrrhmfKNQHkJZFU\r\nhpFdrODw5CSV3KC9FmcMXIADOG8FlfS/ODMxPw+M0mDvykMkC9Mzgzm9SB8r\r\n5qVvEkO2n8mX8R7c9evAOZiFutBkKX6aSORuTN6dx4Xktjk7t1I0ic0qmnIT\r\nRdUEFL1qSqS0FPSvQDxoQW1w51ne3Dpu0yI=\r\n=Up8P\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"msdstwg","email":"willshown@microsoft.com"},"directories":{},"maintainers":[{"name":"msdstwg","email":"willshown@microsoft.com"},{"name":"thure","email":"npm@willshown.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_9.2.0-next.8_1656969342465_0.32465195921391854"},"_hasShrinkwrap":false},"9.2.0-next.9":{"name":"@fluent-blocks/react","version":"9.2.0-next.9","repository":{"type":"git","url":"git+ssh://git@github.com/OfficeDev/fluent-blocks.git"},"authors":["Will Shown ","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^7"},"peerDependencies":{"chart.js":"^2.9.4","react":"^16.14.0, 17.x, 18.x","react-dom":"^16.14.0, 17.x, 18.x"},"devDependencies":{"@babel/core":"latest","@faker-js/faker":"^7.3.0","@playwright/test":"latest","@storybook/addon-actions":"^6.5.9","@storybook/addon-essentials":"^6.5.9","@storybook/addon-links":"^6.5.9","@storybook/addons":"^6.5.9","@storybook/react":"^6.5.9","@storybook/theming":"^6.5.9","@types/chart.js":"^2.9.37","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.35","@types/react":"18.x","@types/react-dom":"18.x","@types/react-test-renderer":"latest","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.20","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":"18.x","react-dom":"18.x","react-test-renderer":"latest","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.1.3-next.2","@fluent-blocks/colors":"9.2.0-next.1","@fluent-blocks/schemas":"9.2.0-next.9","@fluentui/react-components":"~9.0.1","@fluentui/react-tabster":"~9.0.1","@react-hook/resize-observer":"^1.2.5","alea":"^1.0.1","lodash":"^4.17.21"},"scripts":{"build":"just-scripts build","fluentui:upgrade":"pnpm update @fluentui/react-components","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"cd ../icons && pnpm bundle && cd .. && cp icons/basic-icons.svg react/.storybook/public/basic-icons.svg && cd react && build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","_resolved":"","_integrity":"","_from":"file:fluent-blocks-react-9.2.0-next.9.tgz","readme":"\"Fluent\n\"Fluent\n\n### [Open Storybook ↗︎][storybook]\n\nFluent Blocks is a React implementation of [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs for app development based on [`@fluentui/react-components`][fluentui-v9]. This project succeeds [`@fluentui/react-teams`][react-teams].\n\nThis package provides a set of components developers can use to build fully interactive & accessible experiences using whatever React coding convention they prefer, rendering experiences that match Fluent & UI Kit designs.\n\n## ⚠️ Not yet recommended for production\n\nThis project is still being vetted. If you want to use Fluent Blocks, please bear in mind even non-prereleases don’t yet come with any particular guarantees.\n\nFor the best experience specify a specific version of Fluent Blocks when installing instead of using `~`/`^`/`*`, tags, or ranges. If you encounter issues or when you want to use new features, migrate to a newer version with care.\n\n## Getting help & contributing\n\nIf you encounter issues, have questions, or want to participate, please don’t hesitate to [write an issue on Github][issues]. You can also [join us on Teams in our community channel][channel].\n\nIf you’d like to run the development environment or contribute to this project, please see [the Contributing file](CONTRIBUTING.md).\n\n## Getting started\n\nUsing TypeScript and an IDE that supports type inspections will make using this project much easier!\n\n1. Add `react@17`, `react-dom@17` if they’re not in your project already\n - Versions of React from `^16.14.0` up to `18` are supported, in case your project already uses a version in that range\n3. Depending on your bundler you may need to add `chart.js@^2.9.4`, which you’ll need anyway if you want to use charts from this package\n5. Install this package and the icons sprite **with `--save-exact`** using your package manager:\n - NPM: `npm install --save --save-exact @fluent-blocks/react @fluent-blocks/basic-icons`\n - Yarn: `yarn add --exact @fluent-blocks/react @fluent-blocks/basic-icons`\n - PNPM: `pnpm add --save-exact @fluent-blocks/react @fluent-blocks/basic-icons`\n\nFluent Blocks comes with `@fluentui/react-components@~9.0.1` as a dependency — if you anticipate wanting to use components from that library in your project alongside Fluent Blocks, you should also add it as a direct dependency.\n\nNow anywhere you can use React, you can use Fluent Blocks. If you want to delegate the entire viewport to Fluent Blocks, use the `View` component on its own:\n\n```tsx\nimport { View, Escape } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n …for real this time.\n ,\n secondary: {\n actionId: 'start',\n label: 'Get started',\n icon: 'arrow_right',\n iconPosition: 'after'\n }\n }\n }\n },\n ],\n }}/>,\n document.getElementById('root')\n)\n```\n\nIf you want to use Fluent Blocks’ intermediary components, wrap where any will render in a single `FluentBlocksProvider` (there only needs to be one on the page):\n\n```tsx\nimport { FluentBlocksProvider, Illustration } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n \n ,\n document.getElementById('root')\n)\n```\n\nIn order to get the right background coverage and overflow behavior, you should apply `height: 100%` and `overflow: hidden` to the Fluent Blocks React root, and any parents of the Fluent Blocks React root should occupy the full height of whatever space Fluent Blocks should occupy.\n\nIf Fluent Blocks will render alone on the page, these rules are sufficient:\n\n```css\nhtml, body, #root {\n height: 100%;\n}\n#root {\n overflow: hidden;\n}\n```\n\n## How design pattern usage is validated through types\n\nSince the goal of this library is to aid in implementing experiences that conform to [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs and principles, it brings with it those design systems’ opinions. Each component has a concept for what kind of properties & content it accepts, which can be provided in one of two ways:\n\n1. As serializeable **props**, e.g. `{icon: 'fluent', size: 24}`\n1. As a JSX **element**, e.g. ``\n\nThe bolded terms are used in the TypeScript types for the components in this project, e.g. a valid icon instance matches `IconPropsOrElement`, which is either 1) `IconProps`, or 2) `IconElement`.\n\nFor consistency between the two syntaxes, the `children` prop and its implicit nesting equivalent in JSX is avoided in favor of named content props that parallel the serializeable syntax.\n\nSome top-level components like `View` will check the props it was provided and provide a detailed error if the props are incorrect in any way. All other components won’t check for issues and will simply refuse to render unexpected content. In either case, developers can explicitly mark where exceptions should be made using the `Escape` component described below.\n\n## Escaping validation\n\nThese components won’t render a component that has unexpected props or content, unless you use `Escape`. If you feel the need to use a pattern not provided by this project, you can do so using the `Escape` component as a JSX element in any of a component’s content props that aren’t “tightly-bound”, e.g.:\n\n```tsx\n// Only Escape imported from this package will render,\n// so make sure you’ve imported it:\nimport { Section, Escape } from '@fluentui/react-blocks';\n\n\n You can put anything here\n and it will be rendered.\n ,\n ]}\n/>\n```\n\n### Exceptions: tightly bound components\n\nA component may ignore `Escape` only if it is “tightly-bound” with another component. Components are tightly-bound when they make sense only when used together, e.g. `Layout` and `LayoutItem` where `Layout` will only render `LayoutItems` in its `items` prop. If you need to render special content in such a situation, you can either replace the entire parent with `Escape`, or use `Escape` as the _content_ of one of the children.\n\n### Escape inclusively, and share your designs!\n\nMake sure the content you add using `Escape` conforms to [WCAG 2.1][wcag] and is designed inclusively.\n\nIf you would like to share your pattern with the community, [we’d welcome your contribution](CONTRIBUTING.md)! We’d all thank you to submit PR’s that extend this project with your accessible high-quality patterns.\n\n## Concepts\n\nThis library harmonizes the patterns in Fluent and the UI Kit with concepts from web layout & interactivity by delivering components organized into these categories:\n\n- General components based on [formatting context][fmtctx]:\n - `Block` vs `Inline`\n- Specialized clusters of components with shared interactivity considerations:\n - **Media**, e.g.:\n - `Illustration`\n - `Chart`\n - **Inputs**, e.g.:\n - `RadioGroup`\n - `ShortTextInput`\n- **Surfaces**, each of which expect to be unique in a given view\n- **Views**, the top-level components which render an entire UI in a viewport\n\nAny component may also have **Exemplars**, which render the same component but with a specialized API surface optimized for a specific use-case for the pattern, e.g. `Widget` always renders a `Card` though its props are based on the more constrained scope of content for cards in a dashboard from the UI Kit.\n\n## Icons\n\nThis project supports using icons from [`fluentui-system-icons`][fluent-icons] through `@fluent-blocks/basic-icons`.\n\nFirst, give Fluent Blocks’ Provider or View a URL to where your project serves the SVG sprite included in `@fluent-blocks/basic-icons`:\n\n```tsx\nimport {View} from '@fluent-blocks/react'\n\nconst iconSpriteUrl = require('@fluent-blocks/basic-icons/basic-icons.svg')\n\nreturn \n```\n\nThe `Icon`/`{icon: …}` component will render an SVG of the appropriate size containing a `use` element with an `href` to the appropriate sprite, e.g.:\n\n```tsx\n// If used wherever `InlineSequence` or `IconPropsOrElement` is accepted,\n// both the props syntax and element syntax will be rendered the same way.\nconst catIcon =\n { icon: 'animal_cat', size: 24, variant: 'outline' } ||\n \n```\n\nIn your own project, we recommend serving just the sprites you need locally if possible. Do not use proxies for icons in production.\n\n[channel]: https://teams.microsoft.com/l/team/19%3atKKC3lewTMtk4IopGy7Seq7fok-lNW7lGEK-HmzfaKY1%40thread.tacv2/conversations?groupId=4f925ae9-c713-434b-a1f6-44b58ac57210&tenantId=72f988bf-86f1-41af-91ab-2d7cd011db47\n[issues]: https://github.com/OfficeDev/fluent-blocks/issues\n[figma-fluent]: https://www.figma.com/community/file/836828295772957889/Microsoft-Fluent-Web\n[figma-uikit]: https://www.figma.com/community/file/916836509871353159/Microsoft-Teams-UI-Kit\n[fluent-icons]: https://github.com/microsoft/fluentui-system-icons\n[fluentui-v9]: https://www.npmjs.com/package/@fluentui/react-components\n[react-teams]: https://www.npmjs.com/package/@fluentui/react-teams\n[storybook]: https://aka.ms/fluent-blocks-storybook\n[wcag]: https://www.w3.org/TR/WCAG21\n[fmtctx]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow\n","readmeFilename":"README.md","description":"\"Fluent \"Fluent","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^7"},"peerDependencies":{"chart.js":"^2.9.4","react":"^16.14.0, 17.x, 18.x","react-dom":"^16.14.0, 17.x, 18.x"},"devDependencies":{"@babel/core":"latest","@faker-js/faker":"^7.3.0","@playwright/test":"latest","@storybook/addon-actions":"^6.5.9","@storybook/addon-essentials":"^6.5.9","@storybook/addon-links":"^6.5.9","@storybook/addons":"^6.5.9","@storybook/react":"^6.5.9","@storybook/theming":"^6.5.9","@types/chart.js":"^2.9.37","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.35","@types/react":"18.x","@types/react-dom":"18.x","@types/react-test-renderer":"latest","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.20","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":"18.x","react-dom":"18.x","react-test-renderer":"latest","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.1.3","@fluent-blocks/colors":"9.2.0","@fluent-blocks/schemas":"9.2.0","@fluentui/react-components":"~9.0.1","@fluentui/react-tabster":"~9.0.1","@react-hook/resize-observer":"^1.2.5","alea":"^1.0.1","lodash":"^4.17.21"},"scripts":{"build":"just-scripts build","fluentui:upgrade":"pnpm update @fluentui/react-components","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"cd ../icons && pnpm bundle && cd .. && cp icons/basic-icons.svg react/.storybook/public/basic-icons.svg && cd react && build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","_resolved":"","_integrity":"","_from":"file:fluent-blocks-react-9.2.0.tgz","description":"\"Fluent \"Fluent","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^7"},"peerDependencies":{"chart.js":"^2.9.4","react":"^16.14.0, 17.x, 18.x","react-dom":"^16.14.0, 17.x, 18.x"},"devDependencies":{"@babel/core":"latest","@faker-js/faker":"^7.3.0","@playwright/test":"latest","@storybook/addon-actions":"^6.5.9","@storybook/addon-essentials":"^6.5.9","@storybook/addon-links":"^6.5.9","@storybook/addons":"^6.5.9","@storybook/react":"^6.5.9","@storybook/theming":"^6.5.9","@types/chart.js":"^2.9.37","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.35","@types/react":"18.x","@types/react-dom":"18.x","@types/react-test-renderer":"latest","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.20","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":"18.x","react-dom":"18.x","react-test-renderer":"latest","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.1.3","@fluent-blocks/colors":"9.2.0","@fluent-blocks/schemas":"9.3.0-next.0","@fluentui/react-components":"~9.0.1","@fluentui/react-tabster":"~9.0.1","@react-hook/resize-observer":"^1.2.5","alea":"^1.0.1","lodash":"^4.17.21"},"scripts":{"build":"just-scripts build","fluentui:upgrade":"pnpm update @fluentui/react-components","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"cd ../icons && pnpm bundle && cd .. && cp icons/basic-icons.svg react/.storybook/public/basic-icons.svg && cd react && build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","_resolved":"","_integrity":"","_from":"file:fluent-blocks-react-9.3.0-next.0.tgz","readme":"\"Fluent\n\"Fluent\n\n### [Open Storybook ↗︎][storybook]\n\nFluent Blocks is a React implementation of [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs for app development based on [`@fluentui/react-components`][fluentui-v9]. This project succeeds [`@fluentui/react-teams`][react-teams].\n\nThis package provides a set of components developers can use to build fully interactive & accessible experiences using whatever React coding convention they prefer, rendering experiences that match Fluent & UI Kit designs.\n\n## ⚠️ Not yet recommended for production\n\nThis project is still being vetted. If you want to use Fluent Blocks, please bear in mind even non-prereleases don’t yet come with any particular guarantees.\n\nFor the best experience specify a specific version of Fluent Blocks when installing instead of using `~`/`^`/`*`, tags, or ranges. If you encounter issues or when you want to use new features, migrate to a newer version with care.\n\n## Getting help & contributing\n\nIf you encounter issues, have questions, or want to participate, please don’t hesitate to [write an issue on Github][issues]. You can also [join us on Teams in our community channel][channel].\n\nIf you’d like to run the development environment or contribute to this project, please see [the Contributing file](CONTRIBUTING.md).\n\n## Getting started\n\nUsing TypeScript and an IDE that supports type inspections will make using this project much easier!\n\n1. Add `react@17`, `react-dom@17` if they’re not in your project already\n - Versions of React from `^16.14.0` up to `18` are supported, in case your project already uses a version in that range\n3. Depending on your bundler you may need to add `chart.js@^2.9.4`, which you’ll need anyway if you want to use charts from this package\n5. Install this package and the icons sprite **with `--save-exact`** using your package manager:\n - NPM: `npm install --save --save-exact @fluent-blocks/react @fluent-blocks/basic-icons`\n - Yarn: `yarn add --exact @fluent-blocks/react @fluent-blocks/basic-icons`\n - PNPM: `pnpm add --save-exact @fluent-blocks/react @fluent-blocks/basic-icons`\n\nFluent Blocks comes with `@fluentui/react-components@~9.0.1` as a dependency — if you anticipate wanting to use components from that library in your project alongside Fluent Blocks, you should also add it as a direct dependency.\n\nNow anywhere you can use React, you can use Fluent Blocks. If you want to delegate the entire viewport to Fluent Blocks, use the `View` component on its own:\n\n```tsx\nimport { View, Escape } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n …for real this time.\n ,\n secondary: {\n actionId: 'start',\n label: 'Get started',\n icon: 'arrow_right',\n iconPosition: 'after'\n }\n }\n }\n },\n ],\n }}/>,\n document.getElementById('root')\n)\n```\n\nIf you want to use Fluent Blocks’ intermediary components, wrap where any will render in a single `FluentBlocksProvider` (there only needs to be one on the page):\n\n```tsx\nimport { FluentBlocksProvider, Illustration } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n \n ,\n document.getElementById('root')\n)\n```\n\nIn order to get the right background coverage and overflow behavior, you should apply `height: 100%` and `overflow: hidden` to the Fluent Blocks React root, and any parents of the Fluent Blocks React root should occupy the full height of whatever space Fluent Blocks should occupy.\n\nIf Fluent Blocks will render alone on the page, these rules are sufficient:\n\n```css\nhtml, body, #root {\n height: 100%;\n}\n#root {\n overflow: hidden;\n}\n```\n\n## How design pattern usage is validated through types\n\nSince the goal of this library is to aid in implementing experiences that conform to [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs and principles, it brings with it those design systems’ opinions. Each component has a concept for what kind of properties & content it accepts, which can be provided in one of two ways:\n\n1. As serializeable **props**, e.g. `{icon: 'fluent', size: 24}`\n1. As a JSX **element**, e.g. ``\n\nThe bolded terms are used in the TypeScript types for the components in this project, e.g. a valid icon instance matches `IconPropsOrElement`, which is either 1) `IconProps`, or 2) `IconElement`.\n\nFor consistency between the two syntaxes, the `children` prop and its implicit nesting equivalent in JSX is avoided in favor of named content props that parallel the serializeable syntax.\n\nSome top-level components like `View` will check the props it was provided and provide a detailed error if the props are incorrect in any way. All other components won’t check for issues and will simply refuse to render unexpected content. In either case, developers can explicitly mark where exceptions should be made using the `Escape` component described below.\n\n## Escaping validation\n\nThese components won’t render a component that has unexpected props or content, unless you use `Escape`. If you feel the need to use a pattern not provided by this project, you can do so using the `Escape` component as a JSX element in any of a component’s content props that aren’t “tightly-bound”, e.g.:\n\n```tsx\n// Only Escape imported from this package will render,\n// so make sure you’ve imported it:\nimport { Section, Escape } from '@fluentui/react-blocks';\n\n\n You can put anything here\n and it will be rendered.\n ,\n ]}\n/>\n```\n\n### Exceptions: tightly bound components\n\nA component may ignore `Escape` only if it is “tightly-bound” with another component. Components are tightly-bound when they make sense only when used together, e.g. `Layout` and `LayoutItem` where `Layout` will only render `LayoutItems` in its `items` prop. If you need to render special content in such a situation, you can either replace the entire parent with `Escape`, or use `Escape` as the _content_ of one of the children.\n\n### Escape inclusively, and share your designs!\n\nMake sure the content you add using `Escape` conforms to [WCAG 2.1][wcag] and is designed inclusively.\n\nIf you would like to share your pattern with the community, [we’d welcome your contribution](CONTRIBUTING.md)! We’d all thank you to submit PR’s that extend this project with your accessible high-quality patterns.\n\n## Concepts\n\nThis library harmonizes the patterns in Fluent and the UI Kit with concepts from web layout & interactivity by delivering components organized into these categories:\n\n- General components based on [formatting context][fmtctx]:\n - `Block` vs `Inline`\n- Specialized clusters of components with shared interactivity considerations:\n - **Media**, e.g.:\n - `Illustration`\n - `Chart`\n - **Inputs**, e.g.:\n - `RadioGroup`\n - `ShortTextInput`\n- **Surfaces**, each of which expect to be unique in a given view\n- **Views**, the top-level components which render an entire UI in a viewport\n\nAny component may also have **Exemplars**, which render the same component but with a specialized API surface optimized for a specific use-case for the pattern, e.g. `Widget` always renders a `Card` though its props are based on the more constrained scope of content for cards in a dashboard from the UI Kit.\n\n## Icons\n\nThis project supports using icons from [`fluentui-system-icons`][fluent-icons] through `@fluent-blocks/basic-icons`.\n\nFirst, give Fluent Blocks’ Provider or View a URL to where your project serves the SVG sprite included in `@fluent-blocks/basic-icons`:\n\n```tsx\nimport {View} from '@fluent-blocks/react'\n\nconst iconSpriteUrl = require('@fluent-blocks/basic-icons/basic-icons.svg')\n\nreturn \n```\n\nThe `Icon`/`{icon: …}` component will render an SVG of the appropriate size containing a `use` element with an `href` to the appropriate sprite, e.g.:\n\n```tsx\n// If used wherever `InlineSequence` or `IconPropsOrElement` is accepted,\n// both the props syntax and element syntax will be rendered the same way.\nconst catIcon =\n { icon: 'animal_cat', size: 24, variant: 'outline' } ||\n \n```\n\nIn your own project, we recommend serving just the sprites you need locally if possible. Do not use proxies for icons in production.\n\n[channel]: https://teams.microsoft.com/l/team/19%3atKKC3lewTMtk4IopGy7Seq7fok-lNW7lGEK-HmzfaKY1%40thread.tacv2/conversations?groupId=4f925ae9-c713-434b-a1f6-44b58ac57210&tenantId=72f988bf-86f1-41af-91ab-2d7cd011db47\n[issues]: https://github.com/OfficeDev/fluent-blocks/issues\n[figma-fluent]: https://www.figma.com/community/file/836828295772957889/Microsoft-Fluent-Web\n[figma-uikit]: https://www.figma.com/community/file/916836509871353159/Microsoft-Teams-UI-Kit\n[fluent-icons]: https://github.com/microsoft/fluentui-system-icons\n[fluentui-v9]: https://www.npmjs.com/package/@fluentui/react-components\n[react-teams]: https://www.npmjs.com/package/@fluentui/react-teams\n[storybook]: https://aka.ms/fluent-blocks-storybook\n[wcag]: https://www.w3.org/TR/WCAG21\n[fmtctx]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow\n","readmeFilename":"README.md","description":"\"Fluent \"Fluent","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^7"},"peerDependencies":{"chart.js":"^2.9.4","react":"^16.14.0, 17.x, 18.x","react-dom":"^16.14.0, 17.x, 18.x"},"devDependencies":{"@babel/core":"latest","@faker-js/faker":"^7.3.0","@playwright/test":"latest","@storybook/addon-actions":"^6.5.9","@storybook/addon-essentials":"^6.5.9","@storybook/addon-links":"^6.5.9","@storybook/addons":"^6.5.9","@storybook/react":"^6.5.9","@storybook/theming":"^6.5.9","@types/chart.js":"^2.9.37","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.35","@types/react":"18.x","@types/react-dom":"18.x","@types/react-test-renderer":"latest","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.20","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":"18.x","react-dom":"18.x","react-test-renderer":"latest","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.1.3","@fluent-blocks/colors":"9.2.0","@fluent-blocks/schemas":"9.3.0-next.1","@fluentui/react-components":"~9.0.1","@fluentui/react-tabster":"~9.0.1","@react-hook/resize-observer":"^1.2.5","alea":"^1.0.1","lodash":"^4.17.21"},"scripts":{"build":"just-scripts build","fluentui:upgrade":"pnpm update @fluentui/react-components","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"cd ../icons && pnpm bundle && cd .. && cp icons/basic-icons.svg react/.storybook/public/basic-icons.svg && cd react && build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","_resolved":"","_integrity":"","_from":"file:fluent-blocks-react-9.3.0-next.1.tgz","readme":"\"Fluent\n\"Fluent\n\n### [Open Storybook ↗︎][storybook]\n\nFluent Blocks is a React implementation of [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs for app development based on [`@fluentui/react-components`][fluentui-v9]. This project succeeds [`@fluentui/react-teams`][react-teams].\n\nThis package provides a set of components developers can use to build fully interactive & accessible experiences using whatever React coding convention they prefer, rendering experiences that match Fluent & UI Kit designs.\n\n## ⚠️ Not yet recommended for production\n\nThis project is still being vetted. If you want to use Fluent Blocks, please bear in mind even non-prereleases don’t yet come with any particular guarantees.\n\nFor the best experience specify a specific version of Fluent Blocks when installing instead of using `~`/`^`/`*`, tags, or ranges. If you encounter issues or when you want to use new features, migrate to a newer version with care.\n\n## Getting help & contributing\n\nIf you encounter issues, have questions, or want to participate, please don’t hesitate to [write an issue on Github][issues]. You can also [join us on Teams in our community channel][channel].\n\nIf you’d like to run the development environment or contribute to this project, please see [the Contributing file](CONTRIBUTING.md).\n\n## Getting started\n\nUsing TypeScript and an IDE that supports type inspections will make using this project much easier!\n\n1. Add `react@17`, `react-dom@17` if they’re not in your project already\n - Versions of React from `^16.14.0` up to `18` are supported, in case your project already uses a version in that range\n3. Depending on your bundler you may need to add `chart.js@^2.9.4`, which you’ll need anyway if you want to use charts from this package\n5. Install this package and the icons sprite **with `--save-exact`** using your package manager:\n - NPM: `npm install --save --save-exact @fluent-blocks/react @fluent-blocks/basic-icons`\n - Yarn: `yarn add --exact @fluent-blocks/react @fluent-blocks/basic-icons`\n - PNPM: `pnpm add --save-exact @fluent-blocks/react @fluent-blocks/basic-icons`\n\nFluent Blocks comes with `@fluentui/react-components@~9.0.1` as a dependency — if you anticipate wanting to use components from that library in your project alongside Fluent Blocks, you should also add it as a direct dependency.\n\nNow anywhere you can use React, you can use Fluent Blocks. If you want to delegate the entire viewport to Fluent Blocks, use the `View` component on its own:\n\n```tsx\nimport { View, Escape } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n …for real this time.\n ,\n secondary: {\n actionId: 'start',\n label: 'Get started',\n icon: 'arrow_right',\n iconPosition: 'after'\n }\n }\n }\n },\n ],\n }}/>,\n document.getElementById('root')\n)\n```\n\nIf you want to use Fluent Blocks’ intermediary components, wrap where any will render in a single `FluentBlocksProvider` (there only needs to be one on the page):\n\n```tsx\nimport { FluentBlocksProvider, Illustration } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n \n ,\n document.getElementById('root')\n)\n```\n\nIn order to get the right background coverage and overflow behavior, you should apply `height: 100%` and `overflow: hidden` to the Fluent Blocks React root, and any parents of the Fluent Blocks React root should occupy the full height of whatever space Fluent Blocks should occupy.\n\nIf Fluent Blocks will render alone on the page, these rules are sufficient:\n\n```css\nhtml, body, #root {\n height: 100%;\n}\n#root {\n overflow: hidden;\n}\n```\n\n## How design pattern usage is validated through types\n\nSince the goal of this library is to aid in implementing experiences that conform to [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs and principles, it brings with it those design systems’ opinions. Each component has a concept for what kind of properties & content it accepts, which can be provided in one of two ways:\n\n1. As serializeable **props**, e.g. `{icon: 'fluent', size: 24}`\n1. As a JSX **element**, e.g. ``\n\nThe bolded terms are used in the TypeScript types for the components in this project, e.g. a valid icon instance matches `IconPropsOrElement`, which is either 1) `IconProps`, or 2) `IconElement`.\n\nFor consistency between the two syntaxes, the `children` prop and its implicit nesting equivalent in JSX is avoided in favor of named content props that parallel the serializeable syntax.\n\nSome top-level components like `View` will check the props it was provided and provide a detailed error if the props are incorrect in any way. All other components won’t check for issues and will simply refuse to render unexpected content. In either case, developers can explicitly mark where exceptions should be made using the `Escape` component described below.\n\n## Escaping validation\n\nThese components won’t render a component that has unexpected props or content, unless you use `Escape`. If you feel the need to use a pattern not provided by this project, you can do so using the `Escape` component as a JSX element in any of a component’s content props that aren’t “tightly-bound”, e.g.:\n\n```tsx\n// Only Escape imported from this package will render,\n// so make sure you’ve imported it:\nimport { Section, Escape } from '@fluentui/react-blocks';\n\n\n You can put anything here\n and it will be rendered.\n ,\n ]}\n/>\n```\n\n### Exceptions: tightly bound components\n\nA component may ignore `Escape` only if it is “tightly-bound” with another component. Components are tightly-bound when they make sense only when used together, e.g. `Layout` and `LayoutItem` where `Layout` will only render `LayoutItems` in its `items` prop. If you need to render special content in such a situation, you can either replace the entire parent with `Escape`, or use `Escape` as the _content_ of one of the children.\n\n### Escape inclusively, and share your designs!\n\nMake sure the content you add using `Escape` conforms to [WCAG 2.1][wcag] and is designed inclusively.\n\nIf you would like to share your pattern with the community, [we’d welcome your contribution](CONTRIBUTING.md)! We’d all thank you to submit PR’s that extend this project with your accessible high-quality patterns.\n\n## Concepts\n\nThis library harmonizes the patterns in Fluent and the UI Kit with concepts from web layout & interactivity by delivering components organized into these categories:\n\n- General components based on [formatting context][fmtctx]:\n - `Block` vs `Inline`\n- Specialized clusters of components with shared interactivity considerations:\n - **Media**, e.g.:\n - `Illustration`\n - `Chart`\n - **Inputs**, e.g.:\n - `RadioGroup`\n - `ShortTextInput`\n- **Surfaces**, each of which expect to be unique in a given view\n- **Views**, the top-level components which render an entire UI in a viewport\n\nAny component may also have **Exemplars**, which render the same component but with a specialized API surface optimized for a specific use-case for the pattern, e.g. `Widget` always renders a `Card` though its props are based on the more constrained scope of content for cards in a dashboard from the UI Kit.\n\n## Icons\n\nThis project supports using icons from [`fluentui-system-icons`][fluent-icons] through `@fluent-blocks/basic-icons`.\n\nFirst, give Fluent Blocks’ Provider or View a URL to where your project serves the SVG sprite included in `@fluent-blocks/basic-icons`:\n\n```tsx\nimport {View} from '@fluent-blocks/react'\n\nconst iconSpriteUrl = require('@fluent-blocks/basic-icons/basic-icons.svg')\n\nreturn \n```\n\nThe `Icon`/`{icon: …}` component will render an SVG of the appropriate size containing a `use` element with an `href` to the appropriate sprite, e.g.:\n\n```tsx\n// If used wherever `InlineSequence` or `IconPropsOrElement` is accepted,\n// both the props syntax and element syntax will be rendered the same way.\nconst catIcon =\n { icon: 'animal_cat', size: 24, variant: 'outline' } ||\n \n```\n\nIn your own project, we recommend serving just the sprites you need locally if possible. Do not use proxies for icons in production.\n\n[channel]: https://teams.microsoft.com/l/team/19%3atKKC3lewTMtk4IopGy7Seq7fok-lNW7lGEK-HmzfaKY1%40thread.tacv2/conversations?groupId=4f925ae9-c713-434b-a1f6-44b58ac57210&tenantId=72f988bf-86f1-41af-91ab-2d7cd011db47\n[issues]: https://github.com/OfficeDev/fluent-blocks/issues\n[figma-fluent]: https://www.figma.com/community/file/836828295772957889/Microsoft-Fluent-Web\n[figma-uikit]: https://www.figma.com/community/file/916836509871353159/Microsoft-Teams-UI-Kit\n[fluent-icons]: https://github.com/microsoft/fluentui-system-icons\n[fluentui-v9]: https://www.npmjs.com/package/@fluentui/react-components\n[react-teams]: https://www.npmjs.com/package/@fluentui/react-teams\n[storybook]: https://aka.ms/fluent-blocks-storybook\n[wcag]: https://www.w3.org/TR/WCAG21\n[fmtctx]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow\n","readmeFilename":"README.md","description":"\"Fluent \"Fluent","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^7"},"peerDependencies":{"chart.js":"^2.9.4","react":"^16.14.0, 17.x, 18.x","react-dom":"^16.14.0, 17.x, 18.x"},"devDependencies":{"@babel/core":"latest","@faker-js/faker":"^7.3.0","@playwright/test":"latest","@storybook/addon-actions":"^6.5.9","@storybook/addon-essentials":"^6.5.9","@storybook/addon-links":"^6.5.9","@storybook/addons":"^6.5.9","@storybook/react":"^6.5.9","@storybook/theming":"^6.5.9","@types/chart.js":"^2.9.37","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.35","@types/react":"18.x","@types/react-dom":"18.x","@types/react-test-renderer":"latest","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.20","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":"18.x","react-dom":"18.x","react-test-renderer":"latest","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.1.3","@fluent-blocks/colors":"9.2.0","@fluent-blocks/schemas":"9.3.0-next.2","@fluentui/react-components":"~9.0.1","@fluentui/react-tabster":"~9.0.1","@react-hook/resize-observer":"^1.2.5","alea":"^1.0.1","lodash":"^4.17.21"},"scripts":{"build":"just-scripts build","fluentui:upgrade":"pnpm update @fluentui/react-components","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"cd ../icons && pnpm bundle && cd .. && cp icons/basic-icons.svg react/.storybook/public/basic-icons.svg && cd react && build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","_resolved":"","_integrity":"","_from":"file:fluent-blocks-react-9.3.0-next.2.tgz","readme":"\"Fluent\n\"Fluent\n\n### [Open Storybook ↗︎][storybook]\n\nFluent Blocks is a React implementation of [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs for app development based on [`@fluentui/react-components`][fluentui-v9]. This project succeeds [`@fluentui/react-teams`][react-teams].\n\nThis package provides a set of components developers can use to build fully interactive & accessible experiences using whatever React coding convention they prefer, rendering experiences that match Fluent & UI Kit designs.\n\n## ⚠️ Not yet recommended for production\n\nThis project is still being vetted. If you want to use Fluent Blocks, please bear in mind even non-prereleases don’t yet come with any particular guarantees.\n\nFor the best experience specify a specific version of Fluent Blocks when installing instead of using `~`/`^`/`*`, tags, or ranges. If you encounter issues or when you want to use new features, migrate to a newer version with care.\n\n## Getting help & contributing\n\nIf you encounter issues, have questions, or want to participate, please don’t hesitate to [write an issue on Github][issues]. You can also [join us on Teams in our community channel][channel].\n\nIf you’d like to run the development environment or contribute to this project, please see [the Contributing file](CONTRIBUTING.md).\n\n## Getting started\n\nUsing TypeScript and an IDE that supports type inspections will make using this project much easier!\n\n1. Add `react@17`, `react-dom@17` if they’re not in your project already\n - Versions of React from `^16.14.0` up to `18` are supported, in case your project already uses a version in that range\n3. Depending on your bundler you may need to add `chart.js@^2.9.4`, which you’ll need anyway if you want to use charts from this package\n5. Install this package and the icons sprite **with `--save-exact`** using your package manager:\n - NPM: `npm install --save --save-exact @fluent-blocks/react @fluent-blocks/basic-icons`\n - Yarn: `yarn add --exact @fluent-blocks/react @fluent-blocks/basic-icons`\n - PNPM: `pnpm add --save-exact @fluent-blocks/react @fluent-blocks/basic-icons`\n\nFluent Blocks comes with `@fluentui/react-components@~9.0.1` as a dependency — if you anticipate wanting to use components from that library in your project alongside Fluent Blocks, you should also add it as a direct dependency.\n\nNow anywhere you can use React, you can use Fluent Blocks. If you want to delegate the entire viewport to Fluent Blocks, use the `View` component on its own:\n\n```tsx\nimport { View, Escape } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n …for real this time.\n ,\n secondary: {\n actionId: 'start',\n label: 'Get started',\n icon: 'arrow_right',\n iconPosition: 'after'\n }\n }\n }\n },\n ],\n }}/>,\n document.getElementById('root')\n)\n```\n\nIf you want to use Fluent Blocks’ intermediary components, wrap where any will render in a single `FluentBlocksProvider` (there only needs to be one on the page):\n\n```tsx\nimport { FluentBlocksProvider, Illustration } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n \n ,\n document.getElementById('root')\n)\n```\n\nIn order to get the right background coverage and overflow behavior, you should apply `height: 100%` and `overflow: hidden` to the Fluent Blocks React root, and any parents of the Fluent Blocks React root should occupy the full height of whatever space Fluent Blocks should occupy.\n\nIf Fluent Blocks will render alone on the page, these rules are sufficient:\n\n```css\nhtml, body, #root {\n height: 100%;\n}\n#root {\n overflow: hidden;\n}\n```\n\n## How design pattern usage is validated through types\n\nSince the goal of this library is to aid in implementing experiences that conform to [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs and principles, it brings with it those design systems’ opinions. Each component has a concept for what kind of properties & content it accepts, which can be provided in one of two ways:\n\n1. As serializeable **props**, e.g. `{icon: 'fluent', size: 24}`\n1. As a JSX **element**, e.g. ``\n\nThe bolded terms are used in the TypeScript types for the components in this project, e.g. a valid icon instance matches `IconPropsOrElement`, which is either 1) `IconProps`, or 2) `IconElement`.\n\nFor consistency between the two syntaxes, the `children` prop and its implicit nesting equivalent in JSX is avoided in favor of named content props that parallel the serializeable syntax.\n\nSome top-level components like `View` will check the props it was provided and provide a detailed error if the props are incorrect in any way. All other components won’t check for issues and will simply refuse to render unexpected content. In either case, developers can explicitly mark where exceptions should be made using the `Escape` component described below.\n\n## Escaping validation\n\nThese components won’t render a component that has unexpected props or content, unless you use `Escape`. If you feel the need to use a pattern not provided by this project, you can do so using the `Escape` component as a JSX element in any of a component’s content props that aren’t “tightly-bound”, e.g.:\n\n```tsx\n// Only Escape imported from this package will render,\n// so make sure you’ve imported it:\nimport { Section, Escape } from '@fluentui/react-blocks';\n\n\n You can put anything here\n and it will be rendered.\n ,\n ]}\n/>\n```\n\n### Exceptions: tightly bound components\n\nA component may ignore `Escape` only if it is “tightly-bound” with another component. Components are tightly-bound when they make sense only when used together, e.g. `Layout` and `LayoutItem` where `Layout` will only render `LayoutItems` in its `items` prop. If you need to render special content in such a situation, you can either replace the entire parent with `Escape`, or use `Escape` as the _content_ of one of the children.\n\n### Escape inclusively, and share your designs!\n\nMake sure the content you add using `Escape` conforms to [WCAG 2.1][wcag] and is designed inclusively.\n\nIf you would like to share your pattern with the community, [we’d welcome your contribution](CONTRIBUTING.md)! We’d all thank you to submit PR’s that extend this project with your accessible high-quality patterns.\n\n## Concepts\n\nThis library harmonizes the patterns in Fluent and the UI Kit with concepts from web layout & interactivity by delivering components organized into these categories:\n\n- General components based on [formatting context][fmtctx]:\n - `Block` vs `Inline`\n- Specialized clusters of components with shared interactivity considerations:\n - **Media**, e.g.:\n - `Illustration`\n - `Chart`\n - **Inputs**, e.g.:\n - `RadioGroup`\n - `ShortTextInput`\n- **Surfaces**, each of which expect to be unique in a given view\n- **Views**, the top-level components which render an entire UI in a viewport\n\nAny component may also have **Exemplars**, which render the same component but with a specialized API surface optimized for a specific use-case for the pattern, e.g. `Widget` always renders a `Card` though its props are based on the more constrained scope of content for cards in a dashboard from the UI Kit.\n\n## Icons\n\nThis project supports using icons from [`fluentui-system-icons`][fluent-icons] through `@fluent-blocks/basic-icons`.\n\nFirst, give Fluent Blocks’ Provider or View a URL to where your project serves the SVG sprite included in `@fluent-blocks/basic-icons`:\n\n```tsx\nimport {View} from '@fluent-blocks/react'\n\nconst iconSpriteUrl = require('@fluent-blocks/basic-icons/basic-icons.svg')\n\nreturn \n```\n\nThe `Icon`/`{icon: …}` component will render an SVG of the appropriate size containing a `use` element with an `href` to the appropriate sprite, e.g.:\n\n```tsx\n// If used wherever `InlineSequence` or `IconPropsOrElement` is accepted,\n// both the props syntax and element syntax will be rendered the same way.\nconst catIcon =\n { icon: 'animal_cat', size: 24, variant: 'outline' } ||\n \n```\n\nIn your own project, we recommend serving just the sprites you need locally if possible. Do not use proxies for icons in production.\n\n[channel]: https://teams.microsoft.com/l/team/19%3atKKC3lewTMtk4IopGy7Seq7fok-lNW7lGEK-HmzfaKY1%40thread.tacv2/conversations?groupId=4f925ae9-c713-434b-a1f6-44b58ac57210&tenantId=72f988bf-86f1-41af-91ab-2d7cd011db47\n[issues]: https://github.com/OfficeDev/fluent-blocks/issues\n[figma-fluent]: https://www.figma.com/community/file/836828295772957889/Microsoft-Fluent-Web\n[figma-uikit]: https://www.figma.com/community/file/916836509871353159/Microsoft-Teams-UI-Kit\n[fluent-icons]: https://github.com/microsoft/fluentui-system-icons\n[fluentui-v9]: https://www.npmjs.com/package/@fluentui/react-components\n[react-teams]: https://www.npmjs.com/package/@fluentui/react-teams\n[storybook]: https://aka.ms/fluent-blocks-storybook\n[wcag]: https://www.w3.org/TR/WCAG21\n[fmtctx]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow\n","readmeFilename":"README.md","description":"\"Fluent \"Fluent","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^7"},"peerDependencies":{"chart.js":"^2.9.4","react":"^16.14.0, 17.x, 18.x","react-dom":"^16.14.0, 17.x, 18.x"},"devDependencies":{"@babel/core":"latest","@faker-js/faker":"^7.3.0","@playwright/test":"latest","@storybook/addon-actions":"^6.5.9","@storybook/addon-essentials":"^6.5.9","@storybook/addon-links":"^6.5.9","@storybook/addons":"^6.5.9","@storybook/react":"^6.5.9","@storybook/theming":"^6.5.9","@types/chart.js":"^2.9.37","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.35","@types/react":"18.x","@types/react-dom":"18.x","@types/react-test-renderer":"latest","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.20","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":"18.x","react-dom":"18.x","react-test-renderer":"latest","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.1.3","@fluent-blocks/colors":"9.2.0","@fluent-blocks/schemas":"9.3.0-next.3","@fluentui/react-components":"~9.0.1","@fluentui/react-tabster":"~9.0.1","@react-hook/resize-observer":"^1.2.5","alea":"^1.0.1","lodash":"^4.17.21"},"scripts":{"build":"just-scripts build","fluentui:upgrade":"pnpm update @fluentui/react-components","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"cd ../icons && pnpm bundle && cd .. && cp icons/basic-icons.svg react/.storybook/public/basic-icons.svg && cd react && build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","_resolved":"","_integrity":"","_from":"file:fluent-blocks-react-9.3.0-next.3.tgz","readme":"\"Fluent\n\"Fluent\n\n### [Open Storybook ↗︎][storybook]\n\nFluent Blocks is a React implementation of [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs for app development based on [`@fluentui/react-components`][fluentui-v9]. This project succeeds [`@fluentui/react-teams`][react-teams].\n\nThis package provides a set of components developers can use to build fully interactive & accessible experiences using whatever React coding convention they prefer, rendering experiences that match Fluent & UI Kit designs.\n\n## ⚠️ Not yet recommended for production\n\nThis project is still being vetted. If you want to use Fluent Blocks, please bear in mind even non-prereleases don’t yet come with any particular guarantees.\n\nFor the best experience specify a specific version of Fluent Blocks when installing instead of using `~`/`^`/`*`, tags, or ranges. If you encounter issues or when you want to use new features, migrate to a newer version with care.\n\n## Getting help & contributing\n\nIf you encounter issues, have questions, or want to participate, please don’t hesitate to [write an issue on Github][issues]. You can also [join us on Teams in our community channel][channel].\n\nIf you’d like to run the development environment or contribute to this project, please see [the Contributing file](CONTRIBUTING.md).\n\n## Getting started\n\nUsing TypeScript and an IDE that supports type inspections will make using this project much easier!\n\n1. Add `react@17`, `react-dom@17` if they’re not in your project already\n - Versions of React from `^16.14.0` up to `18` are supported, in case your project already uses a version in that range\n3. Depending on your bundler you may need to add `chart.js@^2.9.4`, which you’ll need anyway if you want to use charts from this package\n5. Install this package and the icons sprite **with `--save-exact`** using your package manager:\n - NPM: `npm install --save --save-exact @fluent-blocks/react @fluent-blocks/basic-icons`\n - Yarn: `yarn add --exact @fluent-blocks/react @fluent-blocks/basic-icons`\n - PNPM: `pnpm add --save-exact @fluent-blocks/react @fluent-blocks/basic-icons`\n\nFluent Blocks comes with `@fluentui/react-components@~9.0.1` as a dependency — if you anticipate wanting to use components from that library in your project alongside Fluent Blocks, you should also add it as a direct dependency.\n\nNow anywhere you can use React, you can use Fluent Blocks. If you want to delegate the entire viewport to Fluent Blocks, use the `View` component on its own:\n\n```tsx\nimport { View, Escape } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n …for real this time.\n ,\n secondary: {\n actionId: 'start',\n label: 'Get started',\n icon: 'arrow_right',\n iconPosition: 'after'\n }\n }\n }\n },\n ],\n }}/>,\n document.getElementById('root')\n)\n```\n\nIf you want to use Fluent Blocks’ intermediary components, wrap where any will render in a single `FluentBlocksProvider` (there only needs to be one on the page):\n\n```tsx\nimport { FluentBlocksProvider, Illustration } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n \n ,\n document.getElementById('root')\n)\n```\n\nIn order to get the right background coverage and overflow behavior, you should apply `height: 100%` and `overflow: hidden` to the Fluent Blocks React root, and any parents of the Fluent Blocks React root should occupy the full height of whatever space Fluent Blocks should occupy.\n\nIf Fluent Blocks will render alone on the page, these rules are sufficient:\n\n```css\nhtml, body, #root {\n height: 100%;\n}\n#root {\n overflow: hidden;\n}\n```\n\n## How design pattern usage is validated through types\n\nSince the goal of this library is to aid in implementing experiences that conform to [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs and principles, it brings with it those design systems’ opinions. Each component has a concept for what kind of properties & content it accepts, which can be provided in one of two ways:\n\n1. As serializeable **props**, e.g. `{icon: 'fluent', size: 24}`\n1. As a JSX **element**, e.g. ``\n\nThe bolded terms are used in the TypeScript types for the components in this project, e.g. a valid icon instance matches `IconPropsOrElement`, which is either 1) `IconProps`, or 2) `IconElement`.\n\nFor consistency between the two syntaxes, the `children` prop and its implicit nesting equivalent in JSX is avoided in favor of named content props that parallel the serializeable syntax.\n\nSome top-level components like `View` will check the props it was provided and provide a detailed error if the props are incorrect in any way. All other components won’t check for issues and will simply refuse to render unexpected content. In either case, developers can explicitly mark where exceptions should be made using the `Escape` component described below.\n\n## Escaping validation\n\nThese components won’t render a component that has unexpected props or content, unless you use `Escape`. If you feel the need to use a pattern not provided by this project, you can do so using the `Escape` component as a JSX element in any of a component’s content props that aren’t “tightly-bound”, e.g.:\n\n```tsx\n// Only Escape imported from this package will render,\n// so make sure you’ve imported it:\nimport { Section, Escape } from '@fluentui/react-blocks';\n\n\n You can put anything here\n and it will be rendered.\n ,\n ]}\n/>\n```\n\n### Exceptions: tightly bound components\n\nA component may ignore `Escape` only if it is “tightly-bound” with another component. Components are tightly-bound when they make sense only when used together, e.g. `Layout` and `LayoutItem` where `Layout` will only render `LayoutItems` in its `items` prop. If you need to render special content in such a situation, you can either replace the entire parent with `Escape`, or use `Escape` as the _content_ of one of the children.\n\n### Escape inclusively, and share your designs!\n\nMake sure the content you add using `Escape` conforms to [WCAG 2.1][wcag] and is designed inclusively.\n\nIf you would like to share your pattern with the community, [we’d welcome your contribution](CONTRIBUTING.md)! We’d all thank you to submit PR’s that extend this project with your accessible high-quality patterns.\n\n## Concepts\n\nThis library harmonizes the patterns in Fluent and the UI Kit with concepts from web layout & interactivity by delivering components organized into these categories:\n\n- General components based on [formatting context][fmtctx]:\n - `Block` vs `Inline`\n- Specialized clusters of components with shared interactivity considerations:\n - **Media**, e.g.:\n - `Illustration`\n - `Chart`\n - **Inputs**, e.g.:\n - `RadioGroup`\n - `ShortTextInput`\n- **Surfaces**, each of which expect to be unique in a given view\n- **Views**, the top-level components which render an entire UI in a viewport\n\nAny component may also have **Exemplars**, which render the same component but with a specialized API surface optimized for a specific use-case for the pattern, e.g. `Widget` always renders a `Card` though its props are based on the more constrained scope of content for cards in a dashboard from the UI Kit.\n\n## Icons\n\nThis project supports using icons from [`fluentui-system-icons`][fluent-icons] through `@fluent-blocks/basic-icons`.\n\nFirst, give Fluent Blocks’ Provider or View a URL to where your project serves the SVG sprite included in `@fluent-blocks/basic-icons`:\n\n```tsx\nimport {View} from '@fluent-blocks/react'\n\nconst iconSpriteUrl = require('@fluent-blocks/basic-icons/basic-icons.svg')\n\nreturn \n```\n\nThe `Icon`/`{icon: …}` component will render an SVG of the appropriate size containing a `use` element with an `href` to the appropriate sprite, e.g.:\n\n```tsx\n// If used wherever `InlineSequence` or `IconPropsOrElement` is accepted,\n// both the props syntax and element syntax will be rendered the same way.\nconst catIcon =\n { icon: 'animal_cat', size: 24, variant: 'outline' } ||\n \n```\n\nIn your own project, we recommend serving just the sprites you need locally if possible. Do not use proxies for icons in production.\n\n[channel]: https://teams.microsoft.com/l/team/19%3atKKC3lewTMtk4IopGy7Seq7fok-lNW7lGEK-HmzfaKY1%40thread.tacv2/conversations?groupId=4f925ae9-c713-434b-a1f6-44b58ac57210&tenantId=72f988bf-86f1-41af-91ab-2d7cd011db47\n[issues]: https://github.com/OfficeDev/fluent-blocks/issues\n[figma-fluent]: https://www.figma.com/community/file/836828295772957889/Microsoft-Fluent-Web\n[figma-uikit]: https://www.figma.com/community/file/916836509871353159/Microsoft-Teams-UI-Kit\n[fluent-icons]: https://github.com/microsoft/fluentui-system-icons\n[fluentui-v9]: https://www.npmjs.com/package/@fluentui/react-components\n[react-teams]: https://www.npmjs.com/package/@fluentui/react-teams\n[storybook]: https://aka.ms/fluent-blocks-storybook\n[wcag]: https://www.w3.org/TR/WCAG21\n[fmtctx]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow\n","readmeFilename":"README.md","description":"\"Fluent \"Fluent","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^7"},"peerDependencies":{"chart.js":"^2.9.4","react":"^16.14.0, 17.x, 18.x","react-dom":"^16.14.0, 17.x, 18.x"},"devDependencies":{"@babel/core":"latest","@faker-js/faker":"^7.3.0","@playwright/test":"latest","@storybook/addon-actions":"^6.5.9","@storybook/addon-essentials":"^6.5.9","@storybook/addon-links":"^6.5.9","@storybook/addons":"^6.5.9","@storybook/react":"^6.5.9","@storybook/theming":"^6.5.9","@types/chart.js":"^2.9.37","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.35","@types/react":"18.x","@types/react-dom":"18.x","@types/react-test-renderer":"latest","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.20","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":"18.x","react-dom":"18.x","react-test-renderer":"latest","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.1.3","@fluent-blocks/colors":"9.2.0","@fluent-blocks/schemas":"9.3.0-next.3","@fluentui/react-components":"~9.0.1","@fluentui/react-tabster":"~9.0.1","@react-hook/resize-observer":"^1.2.5","alea":"^1.0.1","lodash":"^4.17.21"},"scripts":{"build":"just-scripts build","fluentui:upgrade":"pnpm update @fluentui/react-components","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"cd ../icons && pnpm bundle && cd .. && cp icons/basic-icons.svg react/.storybook/public/basic-icons.svg && cd react && build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","_resolved":"","_integrity":"","_from":"file:fluent-blocks-react-9.3.0-next.4.tgz","readme":"\"Fluent\n\"Fluent\n\n### [Open Storybook ↗︎][storybook]\n\nFluent Blocks is a React implementation of [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs for app development based on [`@fluentui/react-components`][fluentui-v9]. This project succeeds [`@fluentui/react-teams`][react-teams].\n\nThis package provides a set of components developers can use to build fully interactive & accessible experiences using whatever React coding convention they prefer, rendering experiences that match Fluent & UI Kit designs.\n\n## ⚠️ Not yet recommended for production\n\nThis project is still being vetted. If you want to use Fluent Blocks, please bear in mind even non-prereleases don’t yet come with any particular guarantees.\n\nFor the best experience specify a specific version of Fluent Blocks when installing instead of using `~`/`^`/`*`, tags, or ranges. If you encounter issues or when you want to use new features, migrate to a newer version with care.\n\n## Getting help & contributing\n\nIf you encounter issues, have questions, or want to participate, please don’t hesitate to [write an issue on Github][issues]. You can also [join us on Teams in our community channel][channel].\n\nIf you’d like to run the development environment or contribute to this project, please see [the Contributing file](CONTRIBUTING.md).\n\n## Getting started\n\nUsing TypeScript and an IDE that supports type inspections will make using this project much easier!\n\n1. Add `react@17`, `react-dom@17` if they’re not in your project already\n - Versions of React from `^16.14.0` up to `18` are supported, in case your project already uses a version in that range\n3. Depending on your bundler you may need to add `chart.js@^2.9.4`, which you’ll need anyway if you want to use charts from this package\n5. Install this package and the icons sprite **with `--save-exact`** using your package manager:\n - NPM: `npm install --save --save-exact @fluent-blocks/react @fluent-blocks/basic-icons`\n - Yarn: `yarn add --exact @fluent-blocks/react @fluent-blocks/basic-icons`\n - PNPM: `pnpm add --save-exact @fluent-blocks/react @fluent-blocks/basic-icons`\n\nFluent Blocks comes with `@fluentui/react-components@~9.0.1` as a dependency — if you anticipate wanting to use components from that library in your project alongside Fluent Blocks, you should also add it as a direct dependency.\n\nNow anywhere you can use React, you can use Fluent Blocks. If you want to delegate the entire viewport to Fluent Blocks, use the `View` component on its own:\n\n```tsx\nimport { View, Escape } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n …for real this time.\n ,\n secondary: {\n actionId: 'start',\n label: 'Get started',\n icon: 'arrow_right',\n iconPosition: 'after'\n }\n }\n }\n },\n ],\n }}/>,\n document.getElementById('root')\n)\n```\n\nIf you want to use Fluent Blocks’ intermediary components, wrap where any will render in a single `FluentBlocksProvider` (there only needs to be one on the page):\n\n```tsx\nimport { FluentBlocksProvider, Illustration } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n \n ,\n document.getElementById('root')\n)\n```\n\nIn order to get the right background coverage and overflow behavior, you should apply `height: 100%` and `overflow: hidden` to the Fluent Blocks React root, and any parents of the Fluent Blocks React root should occupy the full height of whatever space Fluent Blocks should occupy.\n\nIf Fluent Blocks will render alone on the page, these rules are sufficient:\n\n```css\nhtml, body, #root {\n height: 100%;\n}\n#root {\n overflow: hidden;\n}\n```\n\n## How design pattern usage is validated through types\n\nSince the goal of this library is to aid in implementing experiences that conform to [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs and principles, it brings with it those design systems’ opinions. Each component has a concept for what kind of properties & content it accepts, which can be provided in one of two ways:\n\n1. As serializeable **props**, e.g. `{icon: 'fluent', size: 24}`\n1. As a JSX **element**, e.g. ``\n\nThe bolded terms are used in the TypeScript types for the components in this project, e.g. a valid icon instance matches `IconPropsOrElement`, which is either 1) `IconProps`, or 2) `IconElement`.\n\nFor consistency between the two syntaxes, the `children` prop and its implicit nesting equivalent in JSX is avoided in favor of named content props that parallel the serializeable syntax.\n\nSome top-level components like `View` will check the props it was provided and provide a detailed error if the props are incorrect in any way. All other components won’t check for issues and will simply refuse to render unexpected content. In either case, developers can explicitly mark where exceptions should be made using the `Escape` component described below.\n\n## Escaping validation\n\nThese components won’t render a component that has unexpected props or content, unless you use `Escape`. If you feel the need to use a pattern not provided by this project, you can do so using the `Escape` component as a JSX element in any of a component’s content props that aren’t “tightly-bound”, e.g.:\n\n```tsx\n// Only Escape imported from this package will render,\n// so make sure you’ve imported it:\nimport { Section, Escape } from '@fluentui/react-blocks';\n\n\n You can put anything here\n and it will be rendered.\n ,\n ]}\n/>\n```\n\n### Exceptions: tightly bound components\n\nA component may ignore `Escape` only if it is “tightly-bound” with another component. Components are tightly-bound when they make sense only when used together, e.g. `Layout` and `LayoutItem` where `Layout` will only render `LayoutItems` in its `items` prop. If you need to render special content in such a situation, you can either replace the entire parent with `Escape`, or use `Escape` as the _content_ of one of the children.\n\n### Escape inclusively, and share your designs!\n\nMake sure the content you add using `Escape` conforms to [WCAG 2.1][wcag] and is designed inclusively.\n\nIf you would like to share your pattern with the community, [we’d welcome your contribution](CONTRIBUTING.md)! We’d all thank you to submit PR’s that extend this project with your accessible high-quality patterns.\n\n## Concepts\n\nThis library harmonizes the patterns in Fluent and the UI Kit with concepts from web layout & interactivity by delivering components organized into these categories:\n\n- General components based on [formatting context][fmtctx]:\n - `Block` vs `Inline`\n- Specialized clusters of components with shared interactivity considerations:\n - **Media**, e.g.:\n - `Illustration`\n - `Chart`\n - **Inputs**, e.g.:\n - `RadioGroup`\n - `ShortTextInput`\n- **Surfaces**, each of which expect to be unique in a given view\n- **Views**, the top-level components which render an entire UI in a viewport\n\nAny component may also have **Exemplars**, which render the same component but with a specialized API surface optimized for a specific use-case for the pattern, e.g. `Widget` always renders a `Card` though its props are based on the more constrained scope of content for cards in a dashboard from the UI Kit.\n\n## Icons\n\nThis project supports using icons from [`fluentui-system-icons`][fluent-icons] through `@fluent-blocks/basic-icons`.\n\nFirst, give Fluent Blocks’ Provider or View a URL to where your project serves the SVG sprite included in `@fluent-blocks/basic-icons`:\n\n```tsx\nimport {View} from '@fluent-blocks/react'\n\nconst iconSpriteUrl = require('@fluent-blocks/basic-icons/basic-icons.svg')\n\nreturn \n```\n\nThe `Icon`/`{icon: …}` component will render an SVG of the appropriate size containing a `use` element with an `href` to the appropriate sprite, e.g.:\n\n```tsx\n// If used wherever `InlineSequence` or `IconPropsOrElement` is accepted,\n// both the props syntax and element syntax will be rendered the same way.\nconst catIcon =\n { icon: 'animal_cat', size: 24, variant: 'outline' } ||\n \n```\n\nIn your own project, we recommend serving just the sprites you need locally if possible. Do not use proxies for icons in production.\n\n[channel]: https://teams.microsoft.com/l/team/19%3atKKC3lewTMtk4IopGy7Seq7fok-lNW7lGEK-HmzfaKY1%40thread.tacv2/conversations?groupId=4f925ae9-c713-434b-a1f6-44b58ac57210&tenantId=72f988bf-86f1-41af-91ab-2d7cd011db47\n[issues]: https://github.com/OfficeDev/fluent-blocks/issues\n[figma-fluent]: https://www.figma.com/community/file/836828295772957889/Microsoft-Fluent-Web\n[figma-uikit]: https://www.figma.com/community/file/916836509871353159/Microsoft-Teams-UI-Kit\n[fluent-icons]: https://github.com/microsoft/fluentui-system-icons\n[fluentui-v9]: https://www.npmjs.com/package/@fluentui/react-components\n[react-teams]: https://www.npmjs.com/package/@fluentui/react-teams\n[storybook]: https://aka.ms/fluent-blocks-storybook\n[wcag]: https://www.w3.org/TR/WCAG21\n[fmtctx]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow\n","readmeFilename":"README.md","description":"\"Fluent \"Fluent","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^7"},"peerDependencies":{"chart.js":"^2.9.4","react":"^16.14.0, 17.x, 18.x","react-dom":"^16.14.0, 17.x, 18.x"},"devDependencies":{"@babel/core":"latest","@faker-js/faker":"^7.3.0","@playwright/test":"latest","@storybook/addon-actions":"^6.5.9","@storybook/addon-essentials":"^6.5.9","@storybook/addon-links":"^6.5.9","@storybook/addons":"^6.5.9","@storybook/react":"^6.5.9","@storybook/theming":"^6.5.9","@types/chart.js":"^2.9.37","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.35","@types/react":"18.x","@types/react-dom":"18.x","@types/react-test-renderer":"latest","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.20","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":"18.x","react-dom":"18.x","react-test-renderer":"latest","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.1.3","@fluent-blocks/colors":"9.2.0","@fluent-blocks/schemas":"9.3.0-next.3","@fluentui/react-components":"~9.0.1","@fluentui/react-tabster":"~9.0.1","@react-hook/resize-observer":"^1.2.5","alea":"^1.0.1","lodash":"^4.17.21"},"scripts":{"build":"just-scripts build","fluentui:upgrade":"pnpm update @fluentui/react-components","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"cd ../icons && pnpm bundle && cd .. && cp icons/basic-icons.svg react/.storybook/public/basic-icons.svg && cd react && build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","_resolved":"","_integrity":"","_from":"file:fluent-blocks-react-9.3.0-next.5.tgz","readme":"\"Fluent\n\"Fluent\n\n### [Open Storybook ↗︎][storybook]\n\nFluent Blocks is a React implementation of [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs for app development based on [`@fluentui/react-components`][fluentui-v9]. This project succeeds [`@fluentui/react-teams`][react-teams].\n\nThis package provides a set of components developers can use to build fully interactive & accessible experiences using whatever React coding convention they prefer, rendering experiences that match Fluent & UI Kit designs.\n\n## ⚠️ Not yet recommended for production\n\nThis project is still being vetted. If you want to use Fluent Blocks, please bear in mind even non-prereleases don’t yet come with any particular guarantees.\n\nFor the best experience specify a specific version of Fluent Blocks when installing instead of using `~`/`^`/`*`, tags, or ranges. If you encounter issues or when you want to use new features, migrate to a newer version with care.\n\n## Getting help & contributing\n\nIf you encounter issues, have questions, or want to participate, please don’t hesitate to [write an issue on Github][issues]. You can also [join us on Teams in our community channel][channel].\n\nIf you’d like to run the development environment or contribute to this project, please see [the Contributing file](CONTRIBUTING.md).\n\n## Getting started\n\nUsing TypeScript and an IDE that supports type inspections will make using this project much easier!\n\n1. Add `react@17`, `react-dom@17` if they’re not in your project already\n - Versions of React from `^16.14.0` up to `18` are supported, in case your project already uses a version in that range\n3. Depending on your bundler you may need to add `chart.js@^2.9.4`, which you’ll need anyway if you want to use charts from this package\n5. Install this package and the icons sprite **with `--save-exact`** using your package manager:\n - NPM: `npm install --save --save-exact @fluent-blocks/react @fluent-blocks/basic-icons`\n - Yarn: `yarn add --exact @fluent-blocks/react @fluent-blocks/basic-icons`\n - PNPM: `pnpm add --save-exact @fluent-blocks/react @fluent-blocks/basic-icons`\n\nFluent Blocks comes with `@fluentui/react-components@~9.0.1` as a dependency — if you anticipate wanting to use components from that library in your project alongside Fluent Blocks, you should also add it as a direct dependency.\n\nNow anywhere you can use React, you can use Fluent Blocks. If you want to delegate the entire viewport to Fluent Blocks, use the `View` component on its own:\n\n```tsx\nimport { View, Escape } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n …for real this time.\n ,\n secondary: {\n actionId: 'start',\n label: 'Get started',\n icon: 'arrow_right',\n iconPosition: 'after'\n }\n }\n }\n },\n ],\n }}/>,\n document.getElementById('root')\n)\n```\n\nIf you want to use Fluent Blocks’ intermediary components, wrap where any will render in a single `FluentBlocksProvider` (there only needs to be one on the page):\n\n```tsx\nimport { FluentBlocksProvider, Illustration } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n \n ,\n document.getElementById('root')\n)\n```\n\nIn order to get the right background coverage and overflow behavior, you should apply `height: 100%` and `overflow: hidden` to the Fluent Blocks React root, and any parents of the Fluent Blocks React root should occupy the full height of whatever space Fluent Blocks should occupy.\n\nIf Fluent Blocks will render alone on the page, these rules are sufficient:\n\n```css\nhtml, body, #root {\n height: 100%;\n}\n#root {\n overflow: hidden;\n}\n```\n\n## How design pattern usage is validated through types\n\nSince the goal of this library is to aid in implementing experiences that conform to [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs and principles, it brings with it those design systems’ opinions. Each component has a concept for what kind of properties & content it accepts, which can be provided in one of two ways:\n\n1. As serializeable **props**, e.g. `{icon: 'fluent', size: 24}`\n1. As a JSX **element**, e.g. ``\n\nThe bolded terms are used in the TypeScript types for the components in this project, e.g. a valid icon instance matches `IconPropsOrElement`, which is either 1) `IconProps`, or 2) `IconElement`.\n\nFor consistency between the two syntaxes, the `children` prop and its implicit nesting equivalent in JSX is avoided in favor of named content props that parallel the serializeable syntax.\n\nSome top-level components like `View` will check the props it was provided and provide a detailed error if the props are incorrect in any way. All other components won’t check for issues and will simply refuse to render unexpected content. In either case, developers can explicitly mark where exceptions should be made using the `Escape` component described below.\n\n## Escaping validation\n\nThese components won’t render a component that has unexpected props or content, unless you use `Escape`. If you feel the need to use a pattern not provided by this project, you can do so using the `Escape` component as a JSX element in any of a component’s content props that aren’t “tightly-bound”, e.g.:\n\n```tsx\n// Only Escape imported from this package will render,\n// so make sure you’ve imported it:\nimport { Section, Escape } from '@fluentui/react-blocks';\n\n\n You can put anything here\n and it will be rendered.\n ,\n ]}\n/>\n```\n\n### Exceptions: tightly bound components\n\nA component may ignore `Escape` only if it is “tightly-bound” with another component. Components are tightly-bound when they make sense only when used together, e.g. `Layout` and `LayoutItem` where `Layout` will only render `LayoutItems` in its `items` prop. If you need to render special content in such a situation, you can either replace the entire parent with `Escape`, or use `Escape` as the _content_ of one of the children.\n\n### Escape inclusively, and share your designs!\n\nMake sure the content you add using `Escape` conforms to [WCAG 2.1][wcag] and is designed inclusively.\n\nIf you would like to share your pattern with the community, [we’d welcome your contribution](CONTRIBUTING.md)! We’d all thank you to submit PR’s that extend this project with your accessible high-quality patterns.\n\n## Concepts\n\nThis library harmonizes the patterns in Fluent and the UI Kit with concepts from web layout & interactivity by delivering components organized into these categories:\n\n- General components based on [formatting context][fmtctx]:\n - `Block` vs `Inline`\n- Specialized clusters of components with shared interactivity considerations:\n - **Media**, e.g.:\n - `Illustration`\n - `Chart`\n - **Inputs**, e.g.:\n - `RadioGroup`\n - `ShortTextInput`\n- **Surfaces**, each of which expect to be unique in a given view\n- **Views**, the top-level components which render an entire UI in a viewport\n\nAny component may also have **Exemplars**, which render the same component but with a specialized API surface optimized for a specific use-case for the pattern, e.g. `Widget` always renders a `Card` though its props are based on the more constrained scope of content for cards in a dashboard from the UI Kit.\n\n## Icons\n\nThis project supports using icons from [`fluentui-system-icons`][fluent-icons] through `@fluent-blocks/basic-icons`.\n\nFirst, give Fluent Blocks’ Provider or View a URL to where your project serves the SVG sprite included in `@fluent-blocks/basic-icons`:\n\n```tsx\nimport {View} from '@fluent-blocks/react'\n\nconst iconSpriteUrl = require('@fluent-blocks/basic-icons/basic-icons.svg')\n\nreturn \n```\n\nThe `Icon`/`{icon: …}` component will render an SVG of the appropriate size containing a `use` element with an `href` to the appropriate sprite, e.g.:\n\n```tsx\n// If used wherever `InlineSequence` or `IconPropsOrElement` is accepted,\n// both the props syntax and element syntax will be rendered the same way.\nconst catIcon =\n { icon: 'animal_cat', size: 24, variant: 'outline' } ||\n \n```\n\nIn your own project, we recommend serving just the sprites you need locally if possible. Do not use proxies for icons in production.\n\n[channel]: https://teams.microsoft.com/l/team/19%3atKKC3lewTMtk4IopGy7Seq7fok-lNW7lGEK-HmzfaKY1%40thread.tacv2/conversations?groupId=4f925ae9-c713-434b-a1f6-44b58ac57210&tenantId=72f988bf-86f1-41af-91ab-2d7cd011db47\n[issues]: https://github.com/OfficeDev/fluent-blocks/issues\n[figma-fluent]: https://www.figma.com/community/file/836828295772957889/Microsoft-Fluent-Web\n[figma-uikit]: https://www.figma.com/community/file/916836509871353159/Microsoft-Teams-UI-Kit\n[fluent-icons]: https://github.com/microsoft/fluentui-system-icons\n[fluentui-v9]: https://www.npmjs.com/package/@fluentui/react-components\n[react-teams]: https://www.npmjs.com/package/@fluentui/react-teams\n[storybook]: https://aka.ms/fluent-blocks-storybook\n[wcag]: https://www.w3.org/TR/WCAG21\n[fmtctx]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow\n","readmeFilename":"README.md","description":"\"Fluent \"Fluent","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^7"},"peerDependencies":{"chart.js":"^2.9.4","react":"^16.14.0, 17.x, 18.x","react-dom":"^16.14.0, 17.x, 18.x"},"devDependencies":{"@babel/core":"latest","@faker-js/faker":"^7.3.0","@playwright/test":"latest","@storybook/addon-actions":"^6.5.9","@storybook/addon-essentials":"^6.5.9","@storybook/addon-links":"^6.5.9","@storybook/addons":"^6.5.9","@storybook/react":"^6.5.9","@storybook/theming":"^6.5.9","@types/chart.js":"^2.9.37","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.35","@types/react":"18.x","@types/react-dom":"18.x","@types/react-test-renderer":"latest","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.20","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":"18.x","react-dom":"18.x","react-test-renderer":"latest","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.1.3","@fluent-blocks/colors":"9.2.0","@fluent-blocks/schemas":"9.3.0-next.3","@fluentui/react-components":"~9.1.1","@fluentui/react-tabster":"~9.0.3","@react-hook/resize-observer":"^1.2.5","alea":"^1.0.1","lodash":"^4.17.21"},"scripts":{"build":"just-scripts build","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"cd ../icons && pnpm bundle && cd .. && cp icons/basic-icons.svg react/.storybook/public/basic-icons.svg && cd react && build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","_resolved":"","_integrity":"","_from":"file:fluent-blocks-react-9.3.0-next.6.tgz","readme":"\"Fluent\n\"Fluent\n\n### [Open Storybook ↗︎][storybook]\n\nFluent Blocks is a React implementation of [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs for app development based on [`@fluentui/react-components`][fluentui-v9]. This project succeeds [`@fluentui/react-teams`][react-teams].\n\nThis package provides a set of components developers can use to build fully interactive & accessible experiences using whatever React coding convention they prefer, rendering experiences that match Fluent & UI Kit designs.\n\n## ⚠️ Not yet recommended for production\n\nThis project is still being vetted. If you want to use Fluent Blocks, please bear in mind even non-prereleases don’t yet come with any particular guarantees.\n\nFor the best experience specify a specific version of Fluent Blocks when installing instead of using `~`/`^`/`*`, tags, or ranges. If you encounter issues or when you want to use new features, migrate to a newer version with care.\n\n## Getting help & contributing\n\nIf you encounter issues, have questions, or want to participate, please don’t hesitate to [write an issue on Github][issues]. You can also [join us on Teams in our community channel][channel].\n\nIf you’d like to run the development environment or contribute to this project, please see [the Contributing file](CONTRIBUTING.md).\n\n## Getting started\n\nUsing TypeScript and an IDE that supports type inspections will make using this project much easier!\n\n1. Add `react@17`, `react-dom@17` if they’re not in your project already\n - Versions of React from `^16.14.0` up to `18` are supported, in case your project already uses a version in that range\n3. Depending on your bundler you may need to add `chart.js@^2.9.4`, which you’ll need anyway if you want to use charts from this package\n5. Install this package and the icons sprite **with `--save-exact`** using your package manager:\n - NPM: `npm install --save --save-exact @fluent-blocks/react @fluent-blocks/basic-icons`\n - Yarn: `yarn add --exact @fluent-blocks/react @fluent-blocks/basic-icons`\n - PNPM: `pnpm add --save-exact @fluent-blocks/react @fluent-blocks/basic-icons`\n\nFluent Blocks comes with `@fluentui/react-components@~9.1.1` as a dependency — if you anticipate wanting to use components from that library in your project alongside Fluent Blocks, you should also add it as a direct dependency.\n\nNow anywhere you can use React, you can use Fluent Blocks. If you want to delegate the entire viewport to Fluent Blocks, use the `View` component on its own:\n\n```tsx\nimport { View, Escape } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n …for real this time.\n ,\n secondary: {\n actionId: 'start',\n label: 'Get started',\n icon: 'arrow_right',\n iconPosition: 'after'\n }\n }\n }\n },\n ],\n }}/>,\n document.getElementById('root')\n)\n```\n\nIf you want to use Fluent Blocks’ intermediary components, wrap where any will render in a single `FluentBlocksProvider` (there only needs to be one on the page):\n\n```tsx\nimport { FluentBlocksProvider, Illustration } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n \n ,\n document.getElementById('root')\n)\n```\n\nIn order to get the right background coverage and overflow behavior, you should apply `height: 100%` and `overflow: hidden` to the Fluent Blocks React root, and any parents of the Fluent Blocks React root should occupy the full height of whatever space Fluent Blocks should occupy.\n\nIf Fluent Blocks will render alone on the page, these rules are sufficient:\n\n```css\nhtml, body, #root {\n height: 100%;\n}\n#root {\n overflow: hidden;\n}\n```\n\n## How design pattern usage is validated through types\n\nSince the goal of this library is to aid in implementing experiences that conform to [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs and principles, it brings with it those design systems’ opinions. Each component has a concept for what kind of properties & content it accepts, which can be provided in one of two ways:\n\n1. As serializeable **props**, e.g. `{icon: 'fluent', size: 24}`\n1. As a JSX **element**, e.g. ``\n\nThe bolded terms are used in the TypeScript types for the components in this project, e.g. a valid icon instance matches `IconPropsOrElement`, which is either 1) `IconProps`, or 2) `IconElement`.\n\nFor consistency between the two syntaxes, the `children` prop and its implicit nesting equivalent in JSX is avoided in favor of named content props that parallel the serializeable syntax.\n\nSome top-level components like `View` will check the props it was provided and provide a detailed error if the props are incorrect in any way. All other components won’t check for issues and will simply refuse to render unexpected content. In either case, developers can explicitly mark where exceptions should be made using the `Escape` component described below.\n\n## Escaping validation\n\nThese components won’t render a component that has unexpected props or content, unless you use `Escape`. If you feel the need to use a pattern not provided by this project, you can do so using the `Escape` component as a JSX element in any of a component’s content props that aren’t “tightly-bound”, e.g.:\n\n```tsx\n// Only Escape imported from this package will render,\n// so make sure you’ve imported it:\nimport { Section, Escape } from '@fluentui/react-blocks';\n\n\n You can put anything here\n and it will be rendered.\n ,\n ]}\n/>\n```\n\n### Exceptions: tightly bound components\n\nA component may ignore `Escape` only if it is “tightly-bound” with another component. Components are tightly-bound when they make sense only when used together, e.g. `Layout` and `LayoutItem` where `Layout` will only render `LayoutItems` in its `items` prop. If you need to render special content in such a situation, you can either replace the entire parent with `Escape`, or use `Escape` as the _content_ of one of the children.\n\n### Escape inclusively, and share your designs!\n\nMake sure the content you add using `Escape` conforms to [WCAG 2.1][wcag] and is designed inclusively.\n\nIf you would like to share your pattern with the community, [we’d welcome your contribution](CONTRIBUTING.md)! We’d all thank you to submit PR’s that extend this project with your accessible high-quality patterns.\n\n## Concepts\n\nThis library harmonizes the patterns in Fluent and the UI Kit with concepts from web layout & interactivity by delivering components organized into these categories:\n\n- General components based on [formatting context][fmtctx]:\n - `Block` vs `Inline`\n- Specialized clusters of components with shared interactivity considerations:\n - **Media**, e.g.:\n - `Illustration`\n - `Chart`\n - **Inputs**, e.g.:\n - `RadioGroup`\n - `ShortTextInput`\n- **Surfaces**, each of which expect to be unique in a given view\n- **Views**, the top-level components which render an entire UI in a viewport\n\nAny component may also have **Exemplars**, which render the same component but with a specialized API surface optimized for a specific use-case for the pattern, e.g. `Widget` always renders a `Card` though its props are based on the more constrained scope of content for cards in a dashboard from the UI Kit.\n\n## Icons\n\nThis project supports using icons from [`fluentui-system-icons`][fluent-icons] through `@fluent-blocks/basic-icons`.\n\nFirst, give Fluent Blocks’ Provider or View a URL to where your project serves the SVG sprite included in `@fluent-blocks/basic-icons`:\n\n```tsx\nimport {View} from '@fluent-blocks/react'\n\nconst iconSpriteUrl = require('@fluent-blocks/basic-icons/basic-icons.svg')\n\nreturn \n```\n\nThe `Icon`/`{icon: …}` component will render an SVG of the appropriate size containing a `use` element with an `href` to the appropriate sprite, e.g.:\n\n```tsx\n// If used wherever `InlineSequence` or `IconPropsOrElement` is accepted,\n// both the props syntax and element syntax will be rendered the same way.\nconst catIcon =\n { icon: 'animal_cat', size: 24, variant: 'outline' } ||\n \n```\n\nIn your own project, we recommend serving just the sprites you need locally if possible. Do not use proxies for icons in production.\n\n[channel]: https://teams.microsoft.com/l/team/19%3atKKC3lewTMtk4IopGy7Seq7fok-lNW7lGEK-HmzfaKY1%40thread.tacv2/conversations?groupId=4f925ae9-c713-434b-a1f6-44b58ac57210&tenantId=72f988bf-86f1-41af-91ab-2d7cd011db47\n[issues]: https://github.com/OfficeDev/fluent-blocks/issues\n[figma-fluent]: https://www.figma.com/community/file/836828295772957889/Microsoft-Fluent-Web\n[figma-uikit]: https://www.figma.com/community/file/916836509871353159/Microsoft-Teams-UI-Kit\n[fluent-icons]: https://github.com/microsoft/fluentui-system-icons\n[fluentui-v9]: https://www.npmjs.com/package/@fluentui/react-components\n[react-teams]: https://www.npmjs.com/package/@fluentui/react-teams\n[storybook]: https://aka.ms/fluent-blocks-storybook\n[wcag]: https://www.w3.org/TR/WCAG21\n[fmtctx]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow\n","readmeFilename":"README.md","description":"\"Fluent \"Fluent","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^7"},"peerDependencies":{"chart.js":"^2.9.4","react":"^16.14.0, 17.x, 18.x","react-dom":"^16.14.0, 17.x, 18.x"},"devDependencies":{"@babel/core":"latest","@faker-js/faker":"^7.3.0","@playwright/test":"latest","@storybook/addon-actions":"^6.5.9","@storybook/addon-essentials":"^6.5.9","@storybook/addon-links":"^6.5.9","@storybook/addons":"^6.5.9","@storybook/react":"^6.5.9","@storybook/theming":"^6.5.9","@types/chart.js":"^2.9.37","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.35","@types/react":"18.x","@types/react-dom":"18.x","@types/react-test-renderer":"latest","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.20","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":"18.x","react-dom":"18.x","react-test-renderer":"latest","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.1.3","@fluent-blocks/colors":"9.2.0","@fluent-blocks/schemas":"9.3.0-next.7","@fluentui/react-components":"~9.1.1","@fluentui/react-tabster":"~9.0.3","@react-hook/resize-observer":"^1.2.5","alea":"^1.0.1","lodash":"^4.17.21"},"scripts":{"build":"just-scripts build","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"cd ../icons && pnpm bundle && cd .. && cp icons/basic-icons.svg react/.storybook/public/basic-icons.svg && cd react && build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","_resolved":"","_integrity":"","_from":"file:fluent-blocks-react-9.3.0-next.7.tgz","readme":"\"Fluent\n\"Fluent\n\n### [Open Storybook ↗︎][storybook]\n\nFluent Blocks is a React implementation of [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs for app development based on [`@fluentui/react-components`][fluentui-v9]. This project succeeds [`@fluentui/react-teams`][react-teams].\n\nThis package provides a set of components developers can use to build fully interactive & accessible experiences using whatever React coding convention they prefer, rendering experiences that match Fluent & UI Kit designs.\n\n## ⚠️ Not yet recommended for production\n\nThis project is still being vetted. If you want to use Fluent Blocks, please bear in mind even non-prereleases don’t yet come with any particular guarantees.\n\nFor the best experience specify a specific version of Fluent Blocks when installing instead of using `~`/`^`/`*`, tags, or ranges. If you encounter issues or when you want to use new features, migrate to a newer version with care.\n\n## Getting help & contributing\n\nIf you encounter issues, have questions, or want to participate, please don’t hesitate to [write an issue on Github][issues]. You can also [join us on Teams in our community channel][channel].\n\nIf you’d like to run the development environment or contribute to this project, please see [the Contributing file](CONTRIBUTING.md).\n\n## Getting started\n\nUsing TypeScript and an IDE that supports type inspections will make using this project much easier!\n\n1. Add `react@17`, `react-dom@17` if they’re not in your project already\n - Versions of React from `^16.14.0` up to `18` are supported, in case your project already uses a version in that range\n3. Depending on your bundler you may need to add `chart.js@^2.9.4`, which you’ll need anyway if you want to use charts from this package\n5. Install this package and the icons sprite **with `--save-exact`** using your package manager:\n - NPM: `npm install --save --save-exact @fluent-blocks/react @fluent-blocks/basic-icons`\n - Yarn: `yarn add --exact @fluent-blocks/react @fluent-blocks/basic-icons`\n - PNPM: `pnpm add --save-exact @fluent-blocks/react @fluent-blocks/basic-icons`\n\nFluent Blocks comes with `@fluentui/react-components@~9.1.1` as a dependency — if you anticipate wanting to use components from that library in your project alongside Fluent Blocks, you should also add it as a direct dependency.\n\nNow anywhere you can use React, you can use Fluent Blocks. If you want to delegate the entire viewport to Fluent Blocks, use the `View` component on its own:\n\n```tsx\nimport { View, Escape } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n …for real this time.\n ,\n secondary: {\n actionId: 'start',\n label: 'Get started',\n icon: 'arrow_right',\n iconPosition: 'after'\n }\n }\n }\n },\n ],\n }}/>,\n document.getElementById('root')\n)\n```\n\nIf you want to use Fluent Blocks’ intermediary components, wrap where any will render in a single `FluentBlocksProvider` (there only needs to be one on the page):\n\n```tsx\nimport { FluentBlocksProvider, Illustration } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n \n ,\n document.getElementById('root')\n)\n```\n\nIn order to get the right background coverage and overflow behavior, you should apply `height: 100%` and `overflow: hidden` to the Fluent Blocks React root, and any parents of the Fluent Blocks React root should occupy the full height of whatever space Fluent Blocks should occupy.\n\nIf Fluent Blocks will render alone on the page, these rules are sufficient:\n\n```css\nhtml, body, #root {\n height: 100%;\n}\n#root {\n overflow: hidden;\n}\n```\n\n## How design pattern usage is validated through types\n\nSince the goal of this library is to aid in implementing experiences that conform to [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs and principles, it brings with it those design systems’ opinions. Each component has a concept for what kind of properties & content it accepts, which can be provided in one of two ways:\n\n1. As serializeable **props**, e.g. `{icon: 'fluent', size: 24}`\n1. As a JSX **element**, e.g. ``\n\nThe bolded terms are used in the TypeScript types for the components in this project, e.g. a valid icon instance matches `IconPropsOrElement`, which is either 1) `IconProps`, or 2) `IconElement`.\n\nFor consistency between the two syntaxes, the `children` prop and its implicit nesting equivalent in JSX is avoided in favor of named content props that parallel the serializeable syntax.\n\nSome top-level components like `View` will check the props it was provided and provide a detailed error if the props are incorrect in any way. All other components won’t check for issues and will simply refuse to render unexpected content. In either case, developers can explicitly mark where exceptions should be made using the `Escape` component described below.\n\n## Escaping validation\n\nThese components won’t render a component that has unexpected props or content, unless you use `Escape`. If you feel the need to use a pattern not provided by this project, you can do so using the `Escape` component as a JSX element in any of a component’s content props that aren’t “tightly-bound”, e.g.:\n\n```tsx\n// Only Escape imported from this package will render,\n// so make sure you’ve imported it:\nimport { Section, Escape } from '@fluentui/react-blocks';\n\n\n You can put anything here\n and it will be rendered.\n ,\n ]}\n/>\n```\n\n### Exceptions: tightly bound components\n\nA component may ignore `Escape` only if it is “tightly-bound” with another component. Components are tightly-bound when they make sense only when used together, e.g. `Layout` and `LayoutItem` where `Layout` will only render `LayoutItems` in its `items` prop. If you need to render special content in such a situation, you can either replace the entire parent with `Escape`, or use `Escape` as the _content_ of one of the children.\n\n### Escape inclusively, and share your designs!\n\nMake sure the content you add using `Escape` conforms to [WCAG 2.1][wcag] and is designed inclusively.\n\nIf you would like to share your pattern with the community, [we’d welcome your contribution](CONTRIBUTING.md)! We’d all thank you to submit PR’s that extend this project with your accessible high-quality patterns.\n\n## Concepts\n\nThis library harmonizes the patterns in Fluent and the UI Kit with concepts from web layout & interactivity by delivering components organized into these categories:\n\n- General components based on [formatting context][fmtctx]:\n - `Block` vs `Inline`\n- Specialized clusters of components with shared interactivity considerations:\n - **Media**, e.g.:\n - `Illustration`\n - `Chart`\n - **Inputs**, e.g.:\n - `RadioGroup`\n - `ShortTextInput`\n- **Surfaces**, each of which expect to be unique in a given view\n- **Views**, the top-level components which render an entire UI in a viewport\n\nAny component may also have **Exemplars**, which render the same component but with a specialized API surface optimized for a specific use-case for the pattern, e.g. `Widget` always renders a `Card` though its props are based on the more constrained scope of content for cards in a dashboard from the UI Kit.\n\n## Icons\n\nThis project supports using icons from [`fluentui-system-icons`][fluent-icons] through `@fluent-blocks/basic-icons`.\n\nFirst, give Fluent Blocks’ Provider or View a URL to where your project serves the SVG sprite included in `@fluent-blocks/basic-icons`:\n\n```tsx\nimport {View} from '@fluent-blocks/react'\n\nconst iconSpriteUrl = require('@fluent-blocks/basic-icons/basic-icons.svg')\n\nreturn \n```\n\nThe `Icon`/`{icon: …}` component will render an SVG of the appropriate size containing a `use` element with an `href` to the appropriate sprite, e.g.:\n\n```tsx\n// If used wherever `InlineSequence` or `IconPropsOrElement` is accepted,\n// both the props syntax and element syntax will be rendered the same way.\nconst catIcon =\n { icon: 'animal_cat', size: 24, variant: 'outline' } ||\n \n```\n\nIn your own project, we recommend serving just the sprites you need locally if possible. Do not use proxies for icons in production.\n\n[channel]: https://teams.microsoft.com/l/team/19%3atKKC3lewTMtk4IopGy7Seq7fok-lNW7lGEK-HmzfaKY1%40thread.tacv2/conversations?groupId=4f925ae9-c713-434b-a1f6-44b58ac57210&tenantId=72f988bf-86f1-41af-91ab-2d7cd011db47\n[issues]: https://github.com/OfficeDev/fluent-blocks/issues\n[figma-fluent]: https://www.figma.com/community/file/836828295772957889/Microsoft-Fluent-Web\n[figma-uikit]: https://www.figma.com/community/file/916836509871353159/Microsoft-Teams-UI-Kit\n[fluent-icons]: https://github.com/microsoft/fluentui-system-icons\n[fluentui-v9]: https://www.npmjs.com/package/@fluentui/react-components\n[react-teams]: https://www.npmjs.com/package/@fluentui/react-teams\n[storybook]: https://aka.ms/fluent-blocks-storybook\n[wcag]: https://www.w3.org/TR/WCAG21\n[fmtctx]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow\n","readmeFilename":"README.md","description":"\"Fluent \"Fluent","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^7"},"peerDependencies":{"chart.js":"^2.9.4","react":"^16.14.0, 17.x, 18.x","react-dom":"^16.14.0, 17.x, 18.x"},"devDependencies":{"@babel/core":"latest","@faker-js/faker":"^7.3.0","@playwright/test":"latest","@storybook/addon-actions":"^6.5.9","@storybook/addon-essentials":"^6.5.9","@storybook/addon-links":"^6.5.9","@storybook/addons":"^6.5.9","@storybook/react":"^6.5.9","@storybook/theming":"^6.5.9","@types/chart.js":"^2.9.37","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.35","@types/react":"18.x","@types/react-dom":"18.x","@types/react-test-renderer":"latest","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.20","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":"18.x","react-dom":"18.x","react-test-renderer":"latest","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.1.3","@fluent-blocks/colors":"9.2.0","@fluent-blocks/schemas":"9.3.0-next.8","@fluentui/react-components":"~9.1.1","@fluentui/react-tabster":"~9.0.3","@react-hook/resize-observer":"^1.2.5","alea":"^1.0.1","lodash":"^4.17.21"},"scripts":{"build":"just-scripts build","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"cd ../icons && pnpm bundle && cd .. && cp icons/basic-icons.svg react/.storybook/public/basic-icons.svg && cd react && build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","_resolved":"","_integrity":"","_from":"file:fluent-blocks-react-9.3.0-next.8.tgz","readme":"\"Fluent\n\"Fluent\n\n### [Open Storybook ↗︎][storybook]\n\nFluent Blocks is a React implementation of [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs for app development based on [`@fluentui/react-components`][fluentui-v9]. This project succeeds [`@fluentui/react-teams`][react-teams].\n\nThis package provides a set of components developers can use to build fully interactive & accessible experiences using whatever React coding convention they prefer, rendering experiences that match Fluent & UI Kit designs.\n\n## ⚠️ Not yet recommended for production\n\nThis project is still being vetted. If you want to use Fluent Blocks, please bear in mind even non-prereleases don’t yet come with any particular guarantees.\n\nFor the best experience specify a specific version of Fluent Blocks when installing instead of using `~`/`^`/`*`, tags, or ranges. If you encounter issues or when you want to use new features, migrate to a newer version with care.\n\n## Getting help & contributing\n\nIf you encounter issues, have questions, or want to participate, please don’t hesitate to [write an issue on Github][issues]. You can also [join us on Teams in our community channel][channel].\n\nIf you’d like to run the development environment or contribute to this project, please see [the Contributing file](CONTRIBUTING.md).\n\n## Getting started\n\nUsing TypeScript and an IDE that supports type inspections will make using this project much easier!\n\n1. Add `react@17`, `react-dom@17` if they’re not in your project already\n - Versions of React from `^16.14.0` up to `18` are supported, in case your project already uses a version in that range\n3. Depending on your bundler you may need to add `chart.js@^2.9.4`, which you’ll need anyway if you want to use charts from this package\n5. Install this package and the icons sprite **with `--save-exact`** using your package manager:\n - NPM: `npm install --save --save-exact @fluent-blocks/react @fluent-blocks/basic-icons`\n - Yarn: `yarn add --exact @fluent-blocks/react @fluent-blocks/basic-icons`\n - PNPM: `pnpm add --save-exact @fluent-blocks/react @fluent-blocks/basic-icons`\n\nFluent Blocks comes with `@fluentui/react-components@~9.1.1` as a dependency — if you anticipate wanting to use components from that library in your project alongside Fluent Blocks, you should also add it as a direct dependency.\n\nNow anywhere you can use React, you can use Fluent Blocks. If you want to delegate the entire viewport to Fluent Blocks, use the `View` component on its own:\n\n```tsx\nimport { View, Escape } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n …for real this time.\n ,\n secondary: {\n actionId: 'start',\n label: 'Get started',\n icon: 'arrow_right',\n iconPosition: 'after'\n }\n }\n }\n },\n ],\n }}/>,\n document.getElementById('root')\n)\n```\n\nIf you want to use Fluent Blocks’ intermediary components, wrap where any will render in a single `FluentBlocksProvider` (there only needs to be one on the page):\n\n```tsx\nimport { FluentBlocksProvider, Illustration } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n \n ,\n document.getElementById('root')\n)\n```\n\nIn order to get the right background coverage and overflow behavior, you should apply `height: 100%` and `overflow: hidden` to the Fluent Blocks React root, and any parents of the Fluent Blocks React root should occupy the full height of whatever space Fluent Blocks should occupy.\n\nIf Fluent Blocks will render alone on the page, these rules are sufficient:\n\n```css\nhtml, body, #root {\n height: 100%;\n}\n#root {\n overflow: hidden;\n}\n```\n\n## How design pattern usage is validated through types\n\nSince the goal of this library is to aid in implementing experiences that conform to [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs and principles, it brings with it those design systems’ opinions. Each component has a concept for what kind of properties & content it accepts, which can be provided in one of two ways:\n\n1. As serializeable **props**, e.g. `{icon: 'fluent', size: 24}`\n1. As a JSX **element**, e.g. ``\n\nThe bolded terms are used in the TypeScript types for the components in this project, e.g. a valid icon instance matches `IconPropsOrElement`, which is either 1) `IconProps`, or 2) `IconElement`.\n\nFor consistency between the two syntaxes, the `children` prop and its implicit nesting equivalent in JSX is avoided in favor of named content props that parallel the serializeable syntax.\n\nSome top-level components like `View` will check the props it was provided and provide a detailed error if the props are incorrect in any way. All other components won’t check for issues and will simply refuse to render unexpected content. In either case, developers can explicitly mark where exceptions should be made using the `Escape` component described below.\n\n## Escaping validation\n\nThese components won’t render a component that has unexpected props or content, unless you use `Escape`. If you feel the need to use a pattern not provided by this project, you can do so using the `Escape` component as a JSX element in any of a component’s content props that aren’t “tightly-bound”, e.g.:\n\n```tsx\n// Only Escape imported from this package will render,\n// so make sure you’ve imported it:\nimport { Section, Escape } from '@fluentui/react-blocks';\n\n\n You can put anything here\n and it will be rendered.\n ,\n ]}\n/>\n```\n\n### Exceptions: tightly bound components\n\nA component may ignore `Escape` only if it is “tightly-bound” with another component. Components are tightly-bound when they make sense only when used together, e.g. `Layout` and `LayoutItem` where `Layout` will only render `LayoutItems` in its `items` prop. If you need to render special content in such a situation, you can either replace the entire parent with `Escape`, or use `Escape` as the _content_ of one of the children.\n\n### Escape inclusively, and share your designs!\n\nMake sure the content you add using `Escape` conforms to [WCAG 2.1][wcag] and is designed inclusively.\n\nIf you would like to share your pattern with the community, [we’d welcome your contribution](CONTRIBUTING.md)! We’d all thank you to submit PR’s that extend this project with your accessible high-quality patterns.\n\n## Concepts\n\nThis library harmonizes the patterns in Fluent and the UI Kit with concepts from web layout & interactivity by delivering components organized into these categories:\n\n- General components based on [formatting context][fmtctx]:\n - `Block` vs `Inline`\n- Specialized clusters of components with shared interactivity considerations:\n - **Media**, e.g.:\n - `Illustration`\n - `Chart`\n - **Inputs**, e.g.:\n - `RadioGroup`\n - `ShortTextInput`\n- **Surfaces**, each of which expect to be unique in a given view\n- **Views**, the top-level components which render an entire UI in a viewport\n\nAny component may also have **Exemplars**, which render the same component but with a specialized API surface optimized for a specific use-case for the pattern, e.g. `Widget` always renders a `Card` though its props are based on the more constrained scope of content for cards in a dashboard from the UI Kit.\n\n## Icons\n\nThis project supports using icons from [`fluentui-system-icons`][fluent-icons] through `@fluent-blocks/basic-icons`.\n\nFirst, give Fluent Blocks’ Provider or View a URL to where your project serves the SVG sprite included in `@fluent-blocks/basic-icons`:\n\n```tsx\nimport {View} from '@fluent-blocks/react'\n\nconst iconSpriteUrl = require('@fluent-blocks/basic-icons/basic-icons.svg')\n\nreturn \n```\n\nThe `Icon`/`{icon: …}` component will render an SVG of the appropriate size containing a `use` element with an `href` to the appropriate sprite, e.g.:\n\n```tsx\n// If used wherever `InlineSequence` or `IconPropsOrElement` is accepted,\n// both the props syntax and element syntax will be rendered the same way.\nconst catIcon =\n { icon: 'animal_cat', size: 24, variant: 'outline' } ||\n \n```\n\nIn your own project, we recommend serving just the sprites you need locally if possible. Do not use proxies for icons in production.\n\n[channel]: https://teams.microsoft.com/l/team/19%3atKKC3lewTMtk4IopGy7Seq7fok-lNW7lGEK-HmzfaKY1%40thread.tacv2/conversations?groupId=4f925ae9-c713-434b-a1f6-44b58ac57210&tenantId=72f988bf-86f1-41af-91ab-2d7cd011db47\n[issues]: https://github.com/OfficeDev/fluent-blocks/issues\n[figma-fluent]: https://www.figma.com/community/file/836828295772957889/Microsoft-Fluent-Web\n[figma-uikit]: https://www.figma.com/community/file/916836509871353159/Microsoft-Teams-UI-Kit\n[fluent-icons]: https://github.com/microsoft/fluentui-system-icons\n[fluentui-v9]: https://www.npmjs.com/package/@fluentui/react-components\n[react-teams]: https://www.npmjs.com/package/@fluentui/react-teams\n[storybook]: https://aka.ms/fluent-blocks-storybook\n[wcag]: https://www.w3.org/TR/WCAG21\n[fmtctx]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow\n","readmeFilename":"README.md","description":"\"Fluent \"Fluent","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^7"},"peerDependencies":{"chart.js":"^2.9.4","react":"^16.14.0, 17.x, 18.x","react-dom":"^16.14.0, 17.x, 18.x"},"devDependencies":{"@babel/core":"latest","@faker-js/faker":"^7.3.0","@playwright/test":"latest","@storybook/addon-actions":"^6.5.9","@storybook/addon-essentials":"^6.5.9","@storybook/addon-links":"^6.5.9","@storybook/addons":"^6.5.9","@storybook/react":"^6.5.9","@storybook/theming":"^6.5.9","@types/chart.js":"^2.9.37","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.35","@types/react":"18.x","@types/react-dom":"18.x","@types/react-test-renderer":"latest","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.20","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":"18.x","react-dom":"18.x","react-test-renderer":"latest","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.1.3","@fluent-blocks/colors":"9.2.0","@fluent-blocks/schemas":"9.3.0-next.9","@fluentui/react-components":"~9.1.1","@fluentui/react-tabster":"~9.0.3","@react-hook/resize-observer":"^1.2.5","alea":"^1.0.1","lodash":"^4.17.21"},"scripts":{"build":"just-scripts build","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"cd ../icons && pnpm bundle && cd .. && cp icons/basic-icons.svg react/.storybook/public/basic-icons.svg && cd react && build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","_resolved":"","_integrity":"","_from":"file:fluent-blocks-react-9.3.0-next.9.tgz","readme":"\"Fluent\n\"Fluent\n\n### [Open Storybook ↗︎][storybook]\n\nFluent Blocks is a React implementation of [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs for app development based on [`@fluentui/react-components`][fluentui-v9]. This project succeeds [`@fluentui/react-teams`][react-teams].\n\nThis package provides a set of components developers can use to build fully interactive & accessible experiences using whatever React coding convention they prefer, rendering experiences that match Fluent & UI Kit designs.\n\n## ⚠️ Not yet recommended for production\n\nThis project is still being vetted. If you want to use Fluent Blocks, please bear in mind even non-prereleases don’t yet come with any particular guarantees.\n\nFor the best experience specify a specific version of Fluent Blocks when installing instead of using `~`/`^`/`*`, tags, or ranges. If you encounter issues or when you want to use new features, migrate to a newer version with care.\n\n## Getting help & contributing\n\nIf you encounter issues, have questions, or want to participate, please don’t hesitate to [write an issue on Github][issues]. You can also [join us on Teams in our community channel][channel].\n\nIf you’d like to run the development environment or contribute to this project, please see [the Contributing file](CONTRIBUTING.md).\n\n## Getting started\n\nUsing TypeScript and an IDE that supports type inspections will make using this project much easier!\n\n1. Add `react@17`, `react-dom@17` if they’re not in your project already\n - Versions of React from `^16.14.0` up to `18` are supported, in case your project already uses a version in that range\n3. Depending on your bundler you may need to add `chart.js@^2.9.4`, which you’ll need anyway if you want to use charts from this package\n5. Install this package and the icons sprite **with `--save-exact`** using your package manager:\n - NPM: `npm install --save --save-exact @fluent-blocks/react @fluent-blocks/basic-icons`\n - Yarn: `yarn add --exact @fluent-blocks/react @fluent-blocks/basic-icons`\n - PNPM: `pnpm add --save-exact @fluent-blocks/react @fluent-blocks/basic-icons`\n\nFluent Blocks comes with `@fluentui/react-components@~9.1.1` as a dependency — if you anticipate wanting to use components from that library in your project alongside Fluent Blocks, you should also add it as a direct dependency.\n\nNow anywhere you can use React, you can use Fluent Blocks. If you want to delegate the entire viewport to Fluent Blocks, use the `View` component on its own:\n\n```tsx\nimport { View, Escape } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n …for real this time.\n ,\n secondary: {\n actionId: 'start',\n label: 'Get started',\n icon: 'arrow_right',\n iconPosition: 'after'\n }\n }\n }\n },\n ],\n }}/>,\n document.getElementById('root')\n)\n```\n\nIf you want to use Fluent Blocks’ intermediary components, wrap where any will render in a single `FluentBlocksProvider` (there only needs to be one on the page):\n\n```tsx\nimport { FluentBlocksProvider, Illustration } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n \n ,\n document.getElementById('root')\n)\n```\n\nIn order to get the right background coverage and overflow behavior, you should apply `height: 100%` and `overflow: hidden` to the Fluent Blocks React root, and any parents of the Fluent Blocks React root should occupy the full height of whatever space Fluent Blocks should occupy.\n\nIf Fluent Blocks will render alone on the page, these rules are sufficient:\n\n```css\nhtml, body, #root {\n height: 100%;\n}\n#root {\n overflow: hidden;\n}\n```\n\n## How design pattern usage is validated through types\n\nSince the goal of this library is to aid in implementing experiences that conform to [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs and principles, it brings with it those design systems’ opinions. Each component has a concept for what kind of properties & content it accepts, which can be provided in one of two ways:\n\n1. As serializeable **props**, e.g. `{icon: 'fluent', size: 24}`\n1. As a JSX **element**, e.g. ``\n\nThe bolded terms are used in the TypeScript types for the components in this project, e.g. a valid icon instance matches `IconPropsOrElement`, which is either 1) `IconProps`, or 2) `IconElement`.\n\nFor consistency between the two syntaxes, the `children` prop and its implicit nesting equivalent in JSX is avoided in favor of named content props that parallel the serializeable syntax.\n\nSome top-level components like `View` will check the props it was provided and provide a detailed error if the props are incorrect in any way. All other components won’t check for issues and will simply refuse to render unexpected content. In either case, developers can explicitly mark where exceptions should be made using the `Escape` component described below.\n\n## Escaping validation\n\nThese components won’t render a component that has unexpected props or content, unless you use `Escape`. If you feel the need to use a pattern not provided by this project, you can do so using the `Escape` component as a JSX element in any of a component’s content props that aren’t “tightly-bound”, e.g.:\n\n```tsx\n// Only Escape imported from this package will render,\n// so make sure you’ve imported it:\nimport { Section, Escape } from '@fluentui/react-blocks';\n\n\n You can put anything here\n and it will be rendered.\n ,\n ]}\n/>\n```\n\n### Exceptions: tightly bound components\n\nA component may ignore `Escape` only if it is “tightly-bound” with another component. Components are tightly-bound when they make sense only when used together, e.g. `Layout` and `LayoutItem` where `Layout` will only render `LayoutItems` in its `items` prop. If you need to render special content in such a situation, you can either replace the entire parent with `Escape`, or use `Escape` as the _content_ of one of the children.\n\n### Escape inclusively, and share your designs!\n\nMake sure the content you add using `Escape` conforms to [WCAG 2.1][wcag] and is designed inclusively.\n\nIf you would like to share your pattern with the community, [we’d welcome your contribution](CONTRIBUTING.md)! We’d all thank you to submit PR’s that extend this project with your accessible high-quality patterns.\n\n## Concepts\n\nThis library harmonizes the patterns in Fluent and the UI Kit with concepts from web layout & interactivity by delivering components organized into these categories:\n\n- General components based on [formatting context][fmtctx]:\n - `Block` vs `Inline`\n- Specialized clusters of components with shared interactivity considerations:\n - **Media**, e.g.:\n - `Illustration`\n - `Chart`\n - **Inputs**, e.g.:\n - `RadioGroup`\n - `ShortTextInput`\n- **Surfaces**, each of which expect to be unique in a given view\n- **Views**, the top-level components which render an entire UI in a viewport\n\nAny component may also have **Exemplars**, which render the same component but with a specialized API surface optimized for a specific use-case for the pattern, e.g. `Widget` always renders a `Card` though its props are based on the more constrained scope of content for cards in a dashboard from the UI Kit.\n\n## Icons\n\nThis project supports using icons from [`fluentui-system-icons`][fluent-icons] through `@fluent-blocks/basic-icons`.\n\nFirst, give Fluent Blocks’ Provider or View a URL to where your project serves the SVG sprite included in `@fluent-blocks/basic-icons`:\n\n```tsx\nimport {View} from '@fluent-blocks/react'\n\nconst iconSpriteUrl = require('@fluent-blocks/basic-icons/basic-icons.svg')\n\nreturn \n```\n\nThe `Icon`/`{icon: …}` component will render an SVG of the appropriate size containing a `use` element with an `href` to the appropriate sprite, e.g.:\n\n```tsx\n// If used wherever `InlineSequence` or `IconPropsOrElement` is accepted,\n// both the props syntax and element syntax will be rendered the same way.\nconst catIcon =\n { icon: 'animal_cat', size: 24, variant: 'outline' } ||\n \n```\n\nIn your own project, we recommend serving just the sprites you need locally if possible. Do not use proxies for icons in production.\n\n[channel]: https://teams.microsoft.com/l/team/19%3atKKC3lewTMtk4IopGy7Seq7fok-lNW7lGEK-HmzfaKY1%40thread.tacv2/conversations?groupId=4f925ae9-c713-434b-a1f6-44b58ac57210&tenantId=72f988bf-86f1-41af-91ab-2d7cd011db47\n[issues]: https://github.com/OfficeDev/fluent-blocks/issues\n[figma-fluent]: https://www.figma.com/community/file/836828295772957889/Microsoft-Fluent-Web\n[figma-uikit]: https://www.figma.com/community/file/916836509871353159/Microsoft-Teams-UI-Kit\n[fluent-icons]: https://github.com/microsoft/fluentui-system-icons\n[fluentui-v9]: https://www.npmjs.com/package/@fluentui/react-components\n[react-teams]: https://www.npmjs.com/package/@fluentui/react-teams\n[storybook]: https://aka.ms/fluent-blocks-storybook\n[wcag]: https://www.w3.org/TR/WCAG21\n[fmtctx]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow\n","readmeFilename":"README.md","description":"\"Fluent \"Fluent","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^7"},"peerDependencies":{"chart.js":"^2.9.4","react":"^16.14.0, 17.x, 18.x","react-dom":"^16.14.0, 17.x, 18.x"},"devDependencies":{"@babel/core":"latest","@faker-js/faker":"^7.3.0","@playwright/test":"latest","@storybook/addon-actions":"^6.5.9","@storybook/addon-essentials":"^6.5.9","@storybook/addon-links":"^6.5.9","@storybook/addons":"^6.5.9","@storybook/react":"^6.5.9","@storybook/theming":"^6.5.9","@types/chart.js":"^2.9.37","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.35","@types/react":"18.x","@types/react-dom":"18.x","@types/react-test-renderer":"latest","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.20","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":"18.x","react-dom":"18.x","react-test-renderer":"latest","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.1.3","@fluent-blocks/colors":"9.2.0","@fluent-blocks/schemas":"9.3.0-next.10","@fluentui/react-components":"~9.1.1","@fluentui/react-tabster":"~9.0.3","@react-hook/resize-observer":"^1.2.5","alea":"^1.0.1","lodash":"^4.17.21"},"scripts":{"build":"just-scripts build","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"cd ../icons && pnpm bundle && cd .. && cp icons/basic-icons.svg react/.storybook/public/basic-icons.svg && cd react && build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","_resolved":"","_integrity":"","_from":"file:fluent-blocks-react-9.3.0-next.10.tgz","readme":"\"Fluent\n\"Fluent\n\n### [Open Storybook ↗︎][storybook]\n\nFluent Blocks is a React implementation of [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs for app development based on [`@fluentui/react-components`][fluentui-v9]. This project succeeds [`@fluentui/react-teams`][react-teams].\n\nThis package provides a set of components developers can use to build fully interactive & accessible experiences using whatever React coding convention they prefer, rendering experiences that match Fluent & UI Kit designs.\n\n## ⚠️ Not yet recommended for production\n\nThis project is still being vetted. If you want to use Fluent Blocks, please bear in mind even non-prereleases don’t yet come with any particular guarantees.\n\nFor the best experience specify a specific version of Fluent Blocks when installing instead of using `~`/`^`/`*`, tags, or ranges. If you encounter issues or when you want to use new features, migrate to a newer version with care.\n\n## Getting help & contributing\n\nIf you encounter issues, have questions, or want to participate, please don’t hesitate to [write an issue on Github][issues]. You can also [join us on Teams in our community channel][channel].\n\nIf you’d like to run the development environment or contribute to this project, please see [the Contributing file](CONTRIBUTING.md).\n\n## Getting started\n\nUsing TypeScript and an IDE that supports type inspections will make using this project much easier!\n\n1. Add `react@17`, `react-dom@17` if they’re not in your project already\n - Versions of React from `^16.14.0` up to `18` are supported, in case your project already uses a version in that range\n3. Depending on your bundler you may need to add `chart.js@^2.9.4`, which you’ll need anyway if you want to use charts from this package\n5. Install this package and the icons sprite **with `--save-exact`** using your package manager:\n - NPM: `npm install --save --save-exact @fluent-blocks/react @fluent-blocks/basic-icons`\n - Yarn: `yarn add --exact @fluent-blocks/react @fluent-blocks/basic-icons`\n - PNPM: `pnpm add --save-exact @fluent-blocks/react @fluent-blocks/basic-icons`\n\nFluent Blocks comes with `@fluentui/react-components@~9.1.1` as a dependency — if you anticipate wanting to use components from that library in your project alongside Fluent Blocks, you should also add it as a direct dependency.\n\nNow anywhere you can use React, you can use Fluent Blocks. If you want to delegate the entire viewport to Fluent Blocks, use the `View` component on its own:\n\n```tsx\nimport { View, Escape } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n …for real this time.\n ,\n secondary: {\n actionId: 'start',\n label: 'Get started',\n icon: 'arrow_right',\n iconPosition: 'after'\n }\n }\n }\n },\n ],\n }}/>,\n document.getElementById('root')\n)\n```\n\nIf you want to use Fluent Blocks’ intermediary components, wrap where any will render in a single `FluentBlocksProvider` (there only needs to be one on the page):\n\n```tsx\nimport { FluentBlocksProvider, Illustration } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n \n ,\n document.getElementById('root')\n)\n```\n\nIn order to get the right background coverage and overflow behavior, you should apply `height: 100%` and `overflow: hidden` to the Fluent Blocks React root, and any parents of the Fluent Blocks React root should occupy the full height of whatever space Fluent Blocks should occupy.\n\nIf Fluent Blocks will render alone on the page, these rules are sufficient:\n\n```css\nhtml, body, #root {\n height: 100%;\n}\n#root {\n overflow: hidden;\n}\n```\n\n## How design pattern usage is validated through types\n\nSince the goal of this library is to aid in implementing experiences that conform to [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs and principles, it brings with it those design systems’ opinions. Each component has a concept for what kind of properties & content it accepts, which can be provided in one of two ways:\n\n1. As serializeable **props**, e.g. `{icon: 'fluent', size: 24}`\n1. As a JSX **element**, e.g. ``\n\nThe bolded terms are used in the TypeScript types for the components in this project, e.g. a valid icon instance matches `IconPropsOrElement`, which is either 1) `IconProps`, or 2) `IconElement`.\n\nFor consistency between the two syntaxes, the `children` prop and its implicit nesting equivalent in JSX is avoided in favor of named content props that parallel the serializeable syntax.\n\nSome top-level components like `View` will check the props it was provided and provide a detailed error if the props are incorrect in any way. All other components won’t check for issues and will simply refuse to render unexpected content. In either case, developers can explicitly mark where exceptions should be made using the `Escape` component described below.\n\n## Escaping validation\n\nThese components won’t render a component that has unexpected props or content, unless you use `Escape`. If you feel the need to use a pattern not provided by this project, you can do so using the `Escape` component as a JSX element in any of a component’s content props that aren’t “tightly-bound”, e.g.:\n\n```tsx\n// Only Escape imported from this package will render,\n// so make sure you’ve imported it:\nimport { Section, Escape } from '@fluentui/react-blocks';\n\n\n You can put anything here\n and it will be rendered.\n ,\n ]}\n/>\n```\n\n### Exceptions: tightly bound components\n\nA component may ignore `Escape` only if it is “tightly-bound” with another component. Components are tightly-bound when they make sense only when used together, e.g. `Layout` and `LayoutItem` where `Layout` will only render `LayoutItems` in its `items` prop. If you need to render special content in such a situation, you can either replace the entire parent with `Escape`, or use `Escape` as the _content_ of one of the children.\n\n### Escape inclusively, and share your designs!\n\nMake sure the content you add using `Escape` conforms to [WCAG 2.1][wcag] and is designed inclusively.\n\nIf you would like to share your pattern with the community, [we’d welcome your contribution](CONTRIBUTING.md)! We’d all thank you to submit PR’s that extend this project with your accessible high-quality patterns.\n\n## Concepts\n\nThis library harmonizes the patterns in Fluent and the UI Kit with concepts from web layout & interactivity by delivering components organized into these categories:\n\n- General components based on [formatting context][fmtctx]:\n - `Block` vs `Inline`\n- Specialized clusters of components with shared interactivity considerations:\n - **Media**, e.g.:\n - `Illustration`\n - `Chart`\n - **Inputs**, e.g.:\n - `RadioGroup`\n - `ShortTextInput`\n- **Surfaces**, each of which expect to be unique in a given view\n- **Views**, the top-level components which render an entire UI in a viewport\n\nAny component may also have **Exemplars**, which render the same component but with a specialized API surface optimized for a specific use-case for the pattern, e.g. `Widget` always renders a `Card` though its props are based on the more constrained scope of content for cards in a dashboard from the UI Kit.\n\n## Icons\n\nThis project supports using icons from [`fluentui-system-icons`][fluent-icons] through `@fluent-blocks/basic-icons`.\n\nFirst, give Fluent Blocks’ Provider or View a URL to where your project serves the SVG sprite included in `@fluent-blocks/basic-icons`:\n\n```tsx\nimport {View} from '@fluent-blocks/react'\n\nconst iconSpriteUrl = require('@fluent-blocks/basic-icons/basic-icons.svg')\n\nreturn \n```\n\nThe `Icon`/`{icon: …}` component will render an SVG of the appropriate size containing a `use` element with an `href` to the appropriate sprite, e.g.:\n\n```tsx\n// If used wherever `InlineSequence` or `IconPropsOrElement` is accepted,\n// both the props syntax and element syntax will be rendered the same way.\nconst catIcon =\n { icon: 'animal_cat', size: 24, variant: 'outline' } ||\n \n```\n\nIn your own project, we recommend serving just the sprites you need locally if possible. Do not use proxies for icons in production.\n\n[channel]: https://teams.microsoft.com/l/team/19%3atKKC3lewTMtk4IopGy7Seq7fok-lNW7lGEK-HmzfaKY1%40thread.tacv2/conversations?groupId=4f925ae9-c713-434b-a1f6-44b58ac57210&tenantId=72f988bf-86f1-41af-91ab-2d7cd011db47\n[issues]: https://github.com/OfficeDev/fluent-blocks/issues\n[figma-fluent]: https://www.figma.com/community/file/836828295772957889/Microsoft-Fluent-Web\n[figma-uikit]: https://www.figma.com/community/file/916836509871353159/Microsoft-Teams-UI-Kit\n[fluent-icons]: https://github.com/microsoft/fluentui-system-icons\n[fluentui-v9]: https://www.npmjs.com/package/@fluentui/react-components\n[react-teams]: https://www.npmjs.com/package/@fluentui/react-teams\n[storybook]: https://aka.ms/fluent-blocks-storybook\n[wcag]: https://www.w3.org/TR/WCAG21\n[fmtctx]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow\n","readmeFilename":"README.md","description":"\"Fluent \"Fluent","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^7"},"peerDependencies":{"chart.js":"^2.9.4","react":"^16.14.0, 17.x, 18.x","react-dom":"^16.14.0, 17.x, 18.x"},"devDependencies":{"@babel/core":"latest","@faker-js/faker":"^7.3.0","@playwright/test":"latest","@storybook/addon-actions":"^6.5.9","@storybook/addon-essentials":"^6.5.9","@storybook/addon-links":"^6.5.9","@storybook/addons":"^6.5.9","@storybook/react":"^6.5.9","@storybook/theming":"^6.5.9","@types/chart.js":"^2.9.37","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.35","@types/react":"18.x","@types/react-dom":"18.x","@types/react-test-renderer":"latest","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.20","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":"18.x","react-dom":"18.x","react-test-renderer":"latest","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.1.3","@fluent-blocks/colors":"9.2.0","@fluent-blocks/schemas":"9.3.0-next.10","@fluentui/react-components":"~9.1.1","@fluentui/react-tabster":"~9.0.3","@react-hook/resize-observer":"^1.2.5","alea":"^1.0.1","lodash":"^4.17.21"},"scripts":{"build":"just-scripts build","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"cd ../icons && pnpm bundle && cd .. && cp icons/basic-icons.svg react/.storybook/public/basic-icons.svg && cd react && build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","_resolved":"","_integrity":"","_from":"file:fluent-blocks-react-9.3.0-next.11.tgz","readme":"\"Fluent\n\"Fluent\n\n### [Open Storybook ↗︎][storybook]\n\nFluent Blocks is a React implementation of [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs for app development based on [`@fluentui/react-components`][fluentui-v9]. This project succeeds [`@fluentui/react-teams`][react-teams].\n\nThis package provides a set of components developers can use to build fully interactive & accessible experiences using whatever React coding convention they prefer, rendering experiences that match Fluent & UI Kit designs.\n\n## ⚠️ Not yet recommended for production\n\nThis project is still being vetted. If you want to use Fluent Blocks, please bear in mind even non-prereleases don’t yet come with any particular guarantees.\n\nFor the best experience specify a specific version of Fluent Blocks when installing instead of using `~`/`^`/`*`, tags, or ranges. If you encounter issues or when you want to use new features, migrate to a newer version with care.\n\n## Getting help & contributing\n\nIf you encounter issues, have questions, or want to participate, please don’t hesitate to [write an issue on Github][issues]. You can also [join us on Teams in our community channel][channel].\n\nIf you’d like to run the development environment or contribute to this project, please see [the Contributing file](CONTRIBUTING.md).\n\n## Getting started\n\nUsing TypeScript and an IDE that supports type inspections will make using this project much easier!\n\n1. Add `react@17`, `react-dom@17` if they’re not in your project already\n - Versions of React from `^16.14.0` up to `18` are supported, in case your project already uses a version in that range\n3. Depending on your bundler you may need to add `chart.js@^2.9.4`, which you’ll need anyway if you want to use charts from this package\n5. Install this package and the icons sprite **with `--save-exact`** using your package manager:\n - NPM: `npm install --save --save-exact @fluent-blocks/react @fluent-blocks/basic-icons`\n - Yarn: `yarn add --exact @fluent-blocks/react @fluent-blocks/basic-icons`\n - PNPM: `pnpm add --save-exact @fluent-blocks/react @fluent-blocks/basic-icons`\n\nFluent Blocks comes with `@fluentui/react-components@~9.1.1` as a dependency — if you anticipate wanting to use components from that library in your project alongside Fluent Blocks, you should also add it as a direct dependency.\n\nNow anywhere you can use React, you can use Fluent Blocks. If you want to delegate the entire viewport to Fluent Blocks, use the `View` component on its own:\n\n```tsx\nimport { View, Escape } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n …for real this time.\n ,\n secondary: {\n actionId: 'start',\n label: 'Get started',\n icon: 'arrow_right',\n iconPosition: 'after'\n }\n }\n }\n },\n ],\n }}/>,\n document.getElementById('root')\n)\n```\n\nIf you want to use Fluent Blocks’ intermediary components, wrap where any will render in a single `FluentBlocksProvider` (there only needs to be one on the page):\n\n```tsx\nimport { FluentBlocksProvider, Illustration } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n \n ,\n document.getElementById('root')\n)\n```\n\nIn order to get the right background coverage and overflow behavior, you should apply `height: 100%` and `overflow: hidden` to the Fluent Blocks React root, and any parents of the Fluent Blocks React root should occupy the full height of whatever space Fluent Blocks should occupy.\n\nIf Fluent Blocks will render alone on the page, these rules are sufficient:\n\n```css\nhtml, body, #root {\n height: 100%;\n}\n#root {\n overflow: hidden;\n}\n```\n\n## How design pattern usage is validated through types\n\nSince the goal of this library is to aid in implementing experiences that conform to [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs and principles, it brings with it those design systems’ opinions. Each component has a concept for what kind of properties & content it accepts, which can be provided in one of two ways:\n\n1. As serializeable **props**, e.g. `{icon: 'fluent', size: 24}`\n1. As a JSX **element**, e.g. ``\n\nThe bolded terms are used in the TypeScript types for the components in this project, e.g. a valid icon instance matches `IconPropsOrElement`, which is either 1) `IconProps`, or 2) `IconElement`.\n\nFor consistency between the two syntaxes, the `children` prop and its implicit nesting equivalent in JSX is avoided in favor of named content props that parallel the serializeable syntax.\n\nSome top-level components like `View` will check the props it was provided and provide a detailed error if the props are incorrect in any way. All other components won’t check for issues and will simply refuse to render unexpected content. In either case, developers can explicitly mark where exceptions should be made using the `Escape` component described below.\n\n## Escaping validation\n\nThese components won’t render a component that has unexpected props or content, unless you use `Escape`. If you feel the need to use a pattern not provided by this project, you can do so using the `Escape` component as a JSX element in any of a component’s content props that aren’t “tightly-bound”, e.g.:\n\n```tsx\n// Only Escape imported from this package will render,\n// so make sure you’ve imported it:\nimport { Section, Escape } from '@fluentui/react-blocks';\n\n\n You can put anything here\n and it will be rendered.\n ,\n ]}\n/>\n```\n\n### Exceptions: tightly bound components\n\nA component may ignore `Escape` only if it is “tightly-bound” with another component. Components are tightly-bound when they make sense only when used together, e.g. `Layout` and `LayoutItem` where `Layout` will only render `LayoutItems` in its `items` prop. If you need to render special content in such a situation, you can either replace the entire parent with `Escape`, or use `Escape` as the _content_ of one of the children.\n\n### Escape inclusively, and share your designs!\n\nMake sure the content you add using `Escape` conforms to [WCAG 2.1][wcag] and is designed inclusively.\n\nIf you would like to share your pattern with the community, [we’d welcome your contribution](CONTRIBUTING.md)! We’d all thank you to submit PR’s that extend this project with your accessible high-quality patterns.\n\n## Concepts\n\nThis library harmonizes the patterns in Fluent and the UI Kit with concepts from web layout & interactivity by delivering components organized into these categories:\n\n- General components based on [formatting context][fmtctx]:\n - `Block` vs `Inline`\n- Specialized clusters of components with shared interactivity considerations:\n - **Media**, e.g.:\n - `Illustration`\n - `Chart`\n - **Inputs**, e.g.:\n - `RadioGroup`\n - `ShortTextInput`\n- **Surfaces**, each of which expect to be unique in a given view\n- **Views**, the top-level components which render an entire UI in a viewport\n\nAny component may also have **Exemplars**, which render the same component but with a specialized API surface optimized for a specific use-case for the pattern, e.g. `Widget` always renders a `Card` though its props are based on the more constrained scope of content for cards in a dashboard from the UI Kit.\n\n## Icons\n\nThis project supports using icons from [`fluentui-system-icons`][fluent-icons] through `@fluent-blocks/basic-icons`.\n\nFirst, give Fluent Blocks’ Provider or View a URL to where your project serves the SVG sprite included in `@fluent-blocks/basic-icons`:\n\n```tsx\nimport {View} from '@fluent-blocks/react'\n\nconst iconSpriteUrl = require('@fluent-blocks/basic-icons/basic-icons.svg')\n\nreturn \n```\n\nThe `Icon`/`{icon: …}` component will render an SVG of the appropriate size containing a `use` element with an `href` to the appropriate sprite, e.g.:\n\n```tsx\n// If used wherever `InlineSequence` or `IconPropsOrElement` is accepted,\n// both the props syntax and element syntax will be rendered the same way.\nconst catIcon =\n { icon: 'animal_cat', size: 24, variant: 'outline' } ||\n \n```\n\nIn your own project, we recommend serving just the sprites you need locally if possible. Do not use proxies for icons in production.\n\n[channel]: https://teams.microsoft.com/l/team/19%3atKKC3lewTMtk4IopGy7Seq7fok-lNW7lGEK-HmzfaKY1%40thread.tacv2/conversations?groupId=4f925ae9-c713-434b-a1f6-44b58ac57210&tenantId=72f988bf-86f1-41af-91ab-2d7cd011db47\n[issues]: https://github.com/OfficeDev/fluent-blocks/issues\n[figma-fluent]: https://www.figma.com/community/file/836828295772957889/Microsoft-Fluent-Web\n[figma-uikit]: https://www.figma.com/community/file/916836509871353159/Microsoft-Teams-UI-Kit\n[fluent-icons]: https://github.com/microsoft/fluentui-system-icons\n[fluentui-v9]: https://www.npmjs.com/package/@fluentui/react-components\n[react-teams]: https://www.npmjs.com/package/@fluentui/react-teams\n[storybook]: https://aka.ms/fluent-blocks-storybook\n[wcag]: https://www.w3.org/TR/WCAG21\n[fmtctx]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow\n","readmeFilename":"README.md","description":"\"Fluent \"Fluent","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^7"},"peerDependencies":{"chart.js":"^2.9.4","react":"^16.14.0, 17.x, 18.x","react-dom":"^16.14.0, 17.x, 18.x"},"devDependencies":{"@babel/core":"latest","@faker-js/faker":"^7.3.0","@playwright/test":"latest","@storybook/addon-actions":"^6.5.9","@storybook/addon-essentials":"^6.5.9","@storybook/addon-links":"^6.5.9","@storybook/addons":"^6.5.9","@storybook/react":"^6.5.9","@storybook/theming":"^6.5.9","@types/chart.js":"^2.9.37","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.35","@types/react":"18.x","@types/react-dom":"18.x","@types/react-test-renderer":"latest","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.20","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":"18.x","react-dom":"18.x","react-test-renderer":"latest","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.2.0-next.0","@fluent-blocks/colors":"9.2.0","@fluent-blocks/schemas":"9.3.0-next.10","@fluentui/react-components":"~9.1.1","@fluentui/react-tabster":"~9.0.3","@react-hook/resize-observer":"^1.2.5","alea":"^1.0.1","lodash":"^4.17.21"},"scripts":{"build":"just-scripts build","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"cd ../icons && pnpm bundle && cd .. && cp icons/basic-icons.svg react/.storybook/public/basic-icons.svg && cd react && build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","_resolved":"","_integrity":"","_from":"file:fluent-blocks-react-9.3.0-next.12.tgz","readme":"\"Fluent\n\"Fluent\n\n### [Open Storybook ↗︎][storybook]\n\nFluent Blocks is a React implementation of [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs for app development based on [`@fluentui/react-components`][fluentui-v9]. This project succeeds [`@fluentui/react-teams`][react-teams].\n\nThis package provides a set of components developers can use to build fully interactive & accessible experiences using whatever React coding convention they prefer, rendering experiences that match Fluent & UI Kit designs.\n\n## ⚠️ Not yet recommended for production\n\nThis project is still being vetted. If you want to use Fluent Blocks, please bear in mind even non-prereleases don’t yet come with any particular guarantees.\n\nFor the best experience specify a specific version of Fluent Blocks when installing instead of using `~`/`^`/`*`, tags, or ranges. If you encounter issues or when you want to use new features, migrate to a newer version with care.\n\n## Getting help & contributing\n\nIf you encounter issues, have questions, or want to participate, please don’t hesitate to [write an issue on Github][issues]. You can also [join us on Teams in our community channel][channel].\n\nIf you’d like to run the development environment or contribute to this project, please see [the Contributing file](CONTRIBUTING.md).\n\n## Getting started\n\nUsing TypeScript and an IDE that supports type inspections will make using this project much easier!\n\n1. Add `react@17`, `react-dom@17` if they’re not in your project already\n - Versions of React from `^16.14.0` up to `18` are supported, in case your project already uses a version in that range\n3. Depending on your bundler you may need to add `chart.js@^2.9.4`, which you’ll need anyway if you want to use charts from this package\n5. Install this package and the icons sprite **with `--save-exact`** using your package manager:\n - NPM: `npm install --save --save-exact @fluent-blocks/react @fluent-blocks/basic-icons`\n - Yarn: `yarn add --exact @fluent-blocks/react @fluent-blocks/basic-icons`\n - PNPM: `pnpm add --save-exact @fluent-blocks/react @fluent-blocks/basic-icons`\n\nFluent Blocks comes with `@fluentui/react-components@~9.1.1` as a dependency — if you anticipate wanting to use components from that library in your project alongside Fluent Blocks, you should also add it as a direct dependency.\n\nNow anywhere you can use React, you can use Fluent Blocks. If you want to delegate the entire viewport to Fluent Blocks, use the `View` component on its own:\n\n```tsx\nimport { View, Escape } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n …for real this time.\n ,\n secondary: {\n actionId: 'start',\n label: 'Get started',\n icon: 'arrow_right',\n iconPosition: 'after'\n }\n }\n }\n },\n ],\n }}/>,\n document.getElementById('root')\n)\n```\n\nIf you want to use Fluent Blocks’ intermediary components, wrap where any will render in a single `FluentBlocksProvider` (there only needs to be one on the page):\n\n```tsx\nimport { FluentBlocksProvider, Illustration } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n \n ,\n document.getElementById('root')\n)\n```\n\nIn order to get the right background coverage and overflow behavior, you should apply `height: 100%` and `overflow: hidden` to the Fluent Blocks React root, and any parents of the Fluent Blocks React root should occupy the full height of whatever space Fluent Blocks should occupy.\n\nIf Fluent Blocks will render alone on the page, these rules are sufficient:\n\n```css\nhtml, body, #root {\n height: 100%;\n}\n#root {\n overflow: hidden;\n}\n```\n\n## How design pattern usage is validated through types\n\nSince the goal of this library is to aid in implementing experiences that conform to [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs and principles, it brings with it those design systems’ opinions. Each component has a concept for what kind of properties & content it accepts, which can be provided in one of two ways:\n\n1. As serializeable **props**, e.g. `{icon: 'fluent', size: 24}`\n1. As a JSX **element**, e.g. ``\n\nThe bolded terms are used in the TypeScript types for the components in this project, e.g. a valid icon instance matches `IconPropsOrElement`, which is either 1) `IconProps`, or 2) `IconElement`.\n\nFor consistency between the two syntaxes, the `children` prop and its implicit nesting equivalent in JSX is avoided in favor of named content props that parallel the serializeable syntax.\n\nSome top-level components like `View` will check the props it was provided and provide a detailed error if the props are incorrect in any way. All other components won’t check for issues and will simply refuse to render unexpected content. In either case, developers can explicitly mark where exceptions should be made using the `Escape` component described below.\n\n## Escaping validation\n\nThese components won’t render a component that has unexpected props or content, unless you use `Escape`. If you feel the need to use a pattern not provided by this project, you can do so using the `Escape` component as a JSX element in any of a component’s content props that aren’t “tightly-bound”, e.g.:\n\n```tsx\n// Only Escape imported from this package will render,\n// so make sure you’ve imported it:\nimport { Section, Escape } from '@fluentui/react-blocks';\n\n\n You can put anything here\n and it will be rendered.\n ,\n ]}\n/>\n```\n\n### Exceptions: tightly bound components\n\nA component may ignore `Escape` only if it is “tightly-bound” with another component. Components are tightly-bound when they make sense only when used together, e.g. `Layout` and `LayoutItem` where `Layout` will only render `LayoutItems` in its `items` prop. If you need to render special content in such a situation, you can either replace the entire parent with `Escape`, or use `Escape` as the _content_ of one of the children.\n\n### Escape inclusively, and share your designs!\n\nMake sure the content you add using `Escape` conforms to [WCAG 2.1][wcag] and is designed inclusively.\n\nIf you would like to share your pattern with the community, [we’d welcome your contribution](CONTRIBUTING.md)! We’d all thank you to submit PR’s that extend this project with your accessible high-quality patterns.\n\n## Concepts\n\nThis library harmonizes the patterns in Fluent and the UI Kit with concepts from web layout & interactivity by delivering components organized into these categories:\n\n- General components based on [formatting context][fmtctx]:\n - `Block` vs `Inline`\n- Specialized clusters of components with shared interactivity considerations:\n - **Media**, e.g.:\n - `Illustration`\n - `Chart`\n - **Inputs**, e.g.:\n - `RadioGroup`\n - `ShortTextInput`\n- **Surfaces**, each of which expect to be unique in a given view\n- **Views**, the top-level components which render an entire UI in a viewport\n\nAny component may also have **Exemplars**, which render the same component but with a specialized API surface optimized for a specific use-case for the pattern, e.g. `Widget` always renders a `Card` though its props are based on the more constrained scope of content for cards in a dashboard from the UI Kit.\n\n## Icons\n\nThis project supports using icons from [`fluentui-system-icons`][fluent-icons] through `@fluent-blocks/basic-icons`.\n\nFirst, give Fluent Blocks’ Provider or View a URL to where your project serves the SVG sprite included in `@fluent-blocks/basic-icons`:\n\n```tsx\nimport {View} from '@fluent-blocks/react'\n\nconst iconSpriteUrl = require('@fluent-blocks/basic-icons/basic-icons.svg')\n\nreturn \n```\n\nThe `Icon`/`{icon: …}` component will render an SVG of the appropriate size containing a `use` element with an `href` to the appropriate sprite, e.g.:\n\n```tsx\n// If used wherever `InlineSequence` or `IconPropsOrElement` is accepted,\n// both the props syntax and element syntax will be rendered the same way.\nconst catIcon =\n { icon: 'animal_cat', size: 24, variant: 'outline' } ||\n \n```\n\nIn your own project, we recommend serving just the sprites you need locally if possible. Do not use proxies for icons in production.\n\n[channel]: https://teams.microsoft.com/l/team/19%3atKKC3lewTMtk4IopGy7Seq7fok-lNW7lGEK-HmzfaKY1%40thread.tacv2/conversations?groupId=4f925ae9-c713-434b-a1f6-44b58ac57210&tenantId=72f988bf-86f1-41af-91ab-2d7cd011db47\n[issues]: https://github.com/OfficeDev/fluent-blocks/issues\n[figma-fluent]: https://www.figma.com/community/file/836828295772957889/Microsoft-Fluent-Web\n[figma-uikit]: https://www.figma.com/community/file/916836509871353159/Microsoft-Teams-UI-Kit\n[fluent-icons]: https://github.com/microsoft/fluentui-system-icons\n[fluentui-v9]: https://www.npmjs.com/package/@fluentui/react-components\n[react-teams]: https://www.npmjs.com/package/@fluentui/react-teams\n[storybook]: https://aka.ms/fluent-blocks-storybook\n[wcag]: https://www.w3.org/TR/WCAG21\n[fmtctx]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow\n","readmeFilename":"README.md","description":"\"Fluent \"Fluent","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^7"},"peerDependencies":{"chart.js":"^2.9.4","react":"^16.14.0, 17.x, 18.x","react-dom":"^16.14.0, 17.x, 18.x"},"devDependencies":{"@babel/core":"latest","@faker-js/faker":"^7.3.0","@playwright/test":"latest","@storybook/addon-actions":"^6.5.9","@storybook/addon-essentials":"^6.5.9","@storybook/addon-links":"^6.5.9","@storybook/addons":"^6.5.9","@storybook/react":"^6.5.9","@storybook/theming":"^6.5.9","@types/chart.js":"^2.9.37","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.35","@types/react":"18.x","@types/react-dom":"18.x","@types/react-test-renderer":"latest","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.20","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":"18.x","react-dom":"18.x","react-test-renderer":"latest","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.2.0-next.0","@fluent-blocks/colors":"9.2.0","@fluent-blocks/schemas":"9.3.0-next.10","@fluentui/react-components":"~9.1.1","@fluentui/react-tabster":"~9.0.3","@react-hook/resize-observer":"^1.2.5","alea":"^1.0.1","lodash":"^4.17.21"},"scripts":{"build":"just-scripts build","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"cd ../icons && pnpm bundle && cd .. && cp icons/basic-icons.svg react/.storybook/public/basic-icons.svg && cd react && build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","_resolved":"","_integrity":"","_from":"file:fluent-blocks-react-9.3.0-next.13.tgz","readme":"\"Fluent\n\"Fluent\n\n### [Open Storybook ↗︎][storybook]\n\nFluent Blocks is a React implementation of [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs for app development based on [`@fluentui/react-components`][fluentui-v9]. This project succeeds [`@fluentui/react-teams`][react-teams].\n\nThis package provides a set of components developers can use to build fully interactive & accessible experiences using whatever React coding convention they prefer, rendering experiences that match Fluent & UI Kit designs.\n\n## ⚠️ Not yet recommended for production\n\nThis project is still being vetted. If you want to use Fluent Blocks, please bear in mind even non-prereleases don’t yet come with any particular guarantees.\n\nFor the best experience specify a specific version of Fluent Blocks when installing instead of using `~`/`^`/`*`, tags, or ranges. If you encounter issues or when you want to use new features, migrate to a newer version with care.\n\n## Getting help & contributing\n\nIf you encounter issues, have questions, or want to participate, please don’t hesitate to [write an issue on Github][issues]. You can also [join us on Teams in our community channel][channel].\n\nIf you’d like to run the development environment or contribute to this project, please see [the Contributing file](CONTRIBUTING.md).\n\n## Getting started\n\nUsing TypeScript and an IDE that supports type inspections will make using this project much easier!\n\n1. Add `react@17`, `react-dom@17` if they’re not in your project already\n - Versions of React from `^16.14.0` up to `18` are supported, in case your project already uses a version in that range\n3. Depending on your bundler you may need to add `chart.js@^2.9.4`, which you’ll need anyway if you want to use charts from this package\n5. Install this package and the icons sprite **with `--save-exact`** using your package manager:\n - NPM: `npm install --save --save-exact @fluent-blocks/react @fluent-blocks/basic-icons`\n - Yarn: `yarn add --exact @fluent-blocks/react @fluent-blocks/basic-icons`\n - PNPM: `pnpm add --save-exact @fluent-blocks/react @fluent-blocks/basic-icons`\n\nFluent Blocks comes with `@fluentui/react-components@~9.1.1` as a dependency — if you anticipate wanting to use components from that library in your project alongside Fluent Blocks, you should also add it as a direct dependency.\n\nNow anywhere you can use React, you can use Fluent Blocks. If you want to delegate the entire viewport to Fluent Blocks, use the `View` component on its own:\n\n```tsx\nimport { View, Escape } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n …for real this time.\n ,\n secondary: {\n actionId: 'start',\n label: 'Get started',\n icon: 'arrow_right',\n iconPosition: 'after'\n }\n }\n }\n },\n ],\n }}/>,\n document.getElementById('root')\n)\n```\n\nIf you want to use Fluent Blocks’ intermediary components, wrap where any will render in a single `FluentBlocksProvider` (there only needs to be one on the page):\n\n```tsx\nimport { FluentBlocksProvider, Illustration } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n \n ,\n document.getElementById('root')\n)\n```\n\nIn order to get the right background coverage and overflow behavior, you should apply `height: 100%` and `overflow: hidden` to the Fluent Blocks React root, and any parents of the Fluent Blocks React root should occupy the full height of whatever space Fluent Blocks should occupy.\n\nIf Fluent Blocks will render alone on the page, these rules are sufficient:\n\n```css\nhtml, body, #root {\n height: 100%;\n}\n#root {\n overflow: hidden;\n}\n```\n\n## How design pattern usage is validated through types\n\nSince the goal of this library is to aid in implementing experiences that conform to [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs and principles, it brings with it those design systems’ opinions. Each component has a concept for what kind of properties & content it accepts, which can be provided in one of two ways:\n\n1. As serializeable **props**, e.g. `{icon: 'fluent', size: 24}`\n1. As a JSX **element**, e.g. ``\n\nThe bolded terms are used in the TypeScript types for the components in this project, e.g. a valid icon instance matches `IconPropsOrElement`, which is either 1) `IconProps`, or 2) `IconElement`.\n\nFor consistency between the two syntaxes, the `children` prop and its implicit nesting equivalent in JSX is avoided in favor of named content props that parallel the serializeable syntax.\n\nSome top-level components like `View` will check the props it was provided and provide a detailed error if the props are incorrect in any way. All other components won’t check for issues and will simply refuse to render unexpected content. In either case, developers can explicitly mark where exceptions should be made using the `Escape` component described below.\n\n## Escaping validation\n\nThese components won’t render a component that has unexpected props or content, unless you use `Escape`. If you feel the need to use a pattern not provided by this project, you can do so using the `Escape` component as a JSX element in any of a component’s content props that aren’t “tightly-bound”, e.g.:\n\n```tsx\n// Only Escape imported from this package will render,\n// so make sure you’ve imported it:\nimport { Section, Escape } from '@fluentui/react-blocks';\n\n\n You can put anything here\n and it will be rendered.\n ,\n ]}\n/>\n```\n\n### Exceptions: tightly bound components\n\nA component may ignore `Escape` only if it is “tightly-bound” with another component. Components are tightly-bound when they make sense only when used together, e.g. `Layout` and `LayoutItem` where `Layout` will only render `LayoutItems` in its `items` prop. If you need to render special content in such a situation, you can either replace the entire parent with `Escape`, or use `Escape` as the _content_ of one of the children.\n\n### Escape inclusively, and share your designs!\n\nMake sure the content you add using `Escape` conforms to [WCAG 2.1][wcag] and is designed inclusively.\n\nIf you would like to share your pattern with the community, [we’d welcome your contribution](CONTRIBUTING.md)! We’d all thank you to submit PR’s that extend this project with your accessible high-quality patterns.\n\n## Concepts\n\nThis library harmonizes the patterns in Fluent and the UI Kit with concepts from web layout & interactivity by delivering components organized into these categories:\n\n- General components based on [formatting context][fmtctx]:\n - `Block` vs `Inline`\n- Specialized clusters of components with shared interactivity considerations:\n - **Media**, e.g.:\n - `Illustration`\n - `Chart`\n - **Inputs**, e.g.:\n - `RadioGroup`\n - `ShortTextInput`\n- **Surfaces**, each of which expect to be unique in a given view\n- **Views**, the top-level components which render an entire UI in a viewport\n\nAny component may also have **Exemplars**, which render the same component but with a specialized API surface optimized for a specific use-case for the pattern, e.g. `Widget` always renders a `Card` though its props are based on the more constrained scope of content for cards in a dashboard from the UI Kit.\n\n## Icons\n\nThis project supports using icons from [`fluentui-system-icons`][fluent-icons] through `@fluent-blocks/basic-icons`.\n\nFirst, give Fluent Blocks’ Provider or View a URL to where your project serves the SVG sprite included in `@fluent-blocks/basic-icons`:\n\n```tsx\nimport {View} from '@fluent-blocks/react'\n\nconst iconSpriteUrl = require('@fluent-blocks/basic-icons/basic-icons.svg')\n\nreturn \n```\n\nThe `Icon`/`{icon: …}` component will render an SVG of the appropriate size containing a `use` element with an `href` to the appropriate sprite, e.g.:\n\n```tsx\n// If used wherever `InlineSequence` or `IconPropsOrElement` is accepted,\n// both the props syntax and element syntax will be rendered the same way.\nconst catIcon =\n { icon: 'animal_cat', size: 24, variant: 'outline' } ||\n \n```\n\nIn your own project, we recommend serving just the sprites you need locally if possible. Do not use proxies for icons in production.\n\n[channel]: https://teams.microsoft.com/l/team/19%3atKKC3lewTMtk4IopGy7Seq7fok-lNW7lGEK-HmzfaKY1%40thread.tacv2/conversations?groupId=4f925ae9-c713-434b-a1f6-44b58ac57210&tenantId=72f988bf-86f1-41af-91ab-2d7cd011db47\n[issues]: https://github.com/OfficeDev/fluent-blocks/issues\n[figma-fluent]: https://www.figma.com/community/file/836828295772957889/Microsoft-Fluent-Web\n[figma-uikit]: https://www.figma.com/community/file/916836509871353159/Microsoft-Teams-UI-Kit\n[fluent-icons]: https://github.com/microsoft/fluentui-system-icons\n[fluentui-v9]: https://www.npmjs.com/package/@fluentui/react-components\n[react-teams]: https://www.npmjs.com/package/@fluentui/react-teams\n[storybook]: https://aka.ms/fluent-blocks-storybook\n[wcag]: https://www.w3.org/TR/WCAG21\n[fmtctx]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow\n","readmeFilename":"README.md","description":"\"Fluent \"Fluent","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^7"},"peerDependencies":{"chart.js":"^2.9.4","react":"^16.14.0, 17.x, 18.x","react-dom":"^16.14.0, 17.x, 18.x"},"devDependencies":{"@babel/core":"latest","@faker-js/faker":"^7.3.0","@playwright/test":"latest","@storybook/addon-actions":"^6.5.9","@storybook/addon-essentials":"^6.5.9","@storybook/addon-links":"^6.5.9","@storybook/addons":"^6.5.9","@storybook/react":"^6.5.9","@storybook/theming":"^6.5.9","@types/chart.js":"^2.9.37","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.35","@types/react":"18.x","@types/react-dom":"18.x","@types/react-test-renderer":"latest","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.20","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":"18.x","react-dom":"18.x","react-test-renderer":"latest","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.2.0-next.0","@fluent-blocks/colors":"9.2.0","@fluent-blocks/schemas":"9.3.0-next.10","@fluentui/react-components":"~9.2.0","@fluentui/react-tabster":"~9.1.0","@react-hook/resize-observer":"^1.2.5","alea":"^1.0.1","lodash":"^4.17.21"},"scripts":{"build":"just-scripts build","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"cd ../icons && pnpm bundle && cd .. && cp icons/basic-icons.svg react/.storybook/public/basic-icons.svg && cd react && build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","_resolved":"","_integrity":"","_from":"file:fluent-blocks-react-9.3.0-next.14.tgz","readme":"\"Fluent\n\"Fluent\n\n### [Open Storybook ↗︎][storybook]\n\nFluent Blocks is a React implementation of [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs for app development based on [`@fluentui/react-components`][fluentui-v9]. This project succeeds [`@fluentui/react-teams`][react-teams].\n\nThis package provides a set of components developers can use to build fully interactive & accessible experiences using whatever React coding convention they prefer, rendering experiences that match Fluent & UI Kit designs.\n\n## ⚠️ Not yet recommended for production\n\nThis project is still being vetted. If you want to use Fluent Blocks, please bear in mind even non-prereleases don’t yet come with any particular guarantees.\n\nFor the best experience specify a specific version of Fluent Blocks when installing instead of using `~`/`^`/`*`, tags, or ranges. If you encounter issues or when you want to use new features, migrate to a newer version with care.\n\n## Getting help & contributing\n\nIf you encounter issues, have questions, or want to participate, please don’t hesitate to [write an issue on Github][issues]. You can also [join us on Teams in our community channel][channel].\n\nIf you’d like to run the development environment or contribute to this project, please see [the Contributing file](CONTRIBUTING.md).\n\n## Getting started\n\nUsing TypeScript and an IDE that supports type inspections will make using this project much easier!\n\n1. Add `react@17`, `react-dom@17` if they’re not in your project already\n - Versions of React from `^16.14.0` up to `18` are supported, in case your project already uses a version in that range\n3. Depending on your bundler you may need to add `chart.js@^2.9.4`, which you’ll need anyway if you want to use charts from this package\n5. Install this package and the icons sprite **with `--save-exact`** using your package manager:\n - NPM: `npm install --save --save-exact @fluent-blocks/react @fluent-blocks/basic-icons`\n - Yarn: `yarn add --exact @fluent-blocks/react @fluent-blocks/basic-icons`\n - PNPM: `pnpm add --save-exact @fluent-blocks/react @fluent-blocks/basic-icons`\n\nFluent Blocks comes with `@fluentui/react-components@~9.1.1` as a dependency — if you anticipate wanting to use components from that library in your project alongside Fluent Blocks, you should also add it as a direct dependency.\n\nNow anywhere you can use React, you can use Fluent Blocks. If you want to delegate the entire viewport to Fluent Blocks, use the `View` component on its own:\n\n```tsx\nimport { View, Escape } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n …for real this time.\n ,\n secondary: {\n actionId: 'start',\n label: 'Get started',\n icon: 'arrow_right',\n iconPosition: 'after'\n }\n }\n }\n },\n ],\n }}/>,\n document.getElementById('root')\n)\n```\n\nIf you want to use Fluent Blocks’ intermediary components, wrap where any will render in a single `FluentBlocksProvider` (there only needs to be one on the page):\n\n```tsx\nimport { FluentBlocksProvider, Illustration } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n \n ,\n document.getElementById('root')\n)\n```\n\nIn order to get the right background coverage and overflow behavior, you should apply `height: 100%` and `overflow: hidden` to the Fluent Blocks React root, and any parents of the Fluent Blocks React root should occupy the full height of whatever space Fluent Blocks should occupy.\n\nIf Fluent Blocks will render alone on the page, these rules are sufficient:\n\n```css\nhtml, body, #root {\n height: 100%;\n}\n#root {\n overflow: hidden;\n}\n```\n\n## How design pattern usage is validated through types\n\nSince the goal of this library is to aid in implementing experiences that conform to [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs and principles, it brings with it those design systems’ opinions. Each component has a concept for what kind of properties & content it accepts, which can be provided in one of two ways:\n\n1. As serializeable **props**, e.g. `{icon: 'fluent', size: 24}`\n1. As a JSX **element**, e.g. ``\n\nThe bolded terms are used in the TypeScript types for the components in this project, e.g. a valid icon instance matches `IconPropsOrElement`, which is either 1) `IconProps`, or 2) `IconElement`.\n\nFor consistency between the two syntaxes, the `children` prop and its implicit nesting equivalent in JSX is avoided in favor of named content props that parallel the serializeable syntax.\n\nSome top-level components like `View` will check the props it was provided and provide a detailed error if the props are incorrect in any way. All other components won’t check for issues and will simply refuse to render unexpected content. In either case, developers can explicitly mark where exceptions should be made using the `Escape` component described below.\n\n## Escaping validation\n\nThese components won’t render a component that has unexpected props or content, unless you use `Escape`. If you feel the need to use a pattern not provided by this project, you can do so using the `Escape` component as a JSX element in any of a component’s content props that aren’t “tightly-bound”, e.g.:\n\n```tsx\n// Only Escape imported from this package will render,\n// so make sure you’ve imported it:\nimport { Section, Escape } from '@fluentui/react-blocks';\n\n\n You can put anything here\n and it will be rendered.\n ,\n ]}\n/>\n```\n\n### Exceptions: tightly bound components\n\nA component may ignore `Escape` only if it is “tightly-bound” with another component. Components are tightly-bound when they make sense only when used together, e.g. `Layout` and `LayoutItem` where `Layout` will only render `LayoutItems` in its `items` prop. If you need to render special content in such a situation, you can either replace the entire parent with `Escape`, or use `Escape` as the _content_ of one of the children.\n\n### Escape inclusively, and share your designs!\n\nMake sure the content you add using `Escape` conforms to [WCAG 2.1][wcag] and is designed inclusively.\n\nIf you would like to share your pattern with the community, [we’d welcome your contribution](CONTRIBUTING.md)! We’d all thank you to submit PR’s that extend this project with your accessible high-quality patterns.\n\n## Concepts\n\nThis library harmonizes the patterns in Fluent and the UI Kit with concepts from web layout & interactivity by delivering components organized into these categories:\n\n- General components based on [formatting context][fmtctx]:\n - `Block` vs `Inline`\n- Specialized clusters of components with shared interactivity considerations:\n - **Media**, e.g.:\n - `Illustration`\n - `Chart`\n - **Inputs**, e.g.:\n - `RadioGroup`\n - `ShortTextInput`\n- **Surfaces**, each of which expect to be unique in a given view\n- **Views**, the top-level components which render an entire UI in a viewport\n\nAny component may also have **Exemplars**, which render the same component but with a specialized API surface optimized for a specific use-case for the pattern, e.g. `Widget` always renders a `Card` though its props are based on the more constrained scope of content for cards in a dashboard from the UI Kit.\n\n## Icons\n\nThis project supports using icons from [`fluentui-system-icons`][fluent-icons] through `@fluent-blocks/basic-icons`.\n\nFirst, give Fluent Blocks’ Provider or View a URL to where your project serves the SVG sprite included in `@fluent-blocks/basic-icons`:\n\n```tsx\nimport {View} from '@fluent-blocks/react'\n\nconst iconSpriteUrl = require('@fluent-blocks/basic-icons/basic-icons.svg')\n\nreturn \n```\n\nThe `Icon`/`{icon: …}` component will render an SVG of the appropriate size containing a `use` element with an `href` to the appropriate sprite, e.g.:\n\n```tsx\n// If used wherever `InlineSequence` or `IconPropsOrElement` is accepted,\n// both the props syntax and element syntax will be rendered the same way.\nconst catIcon =\n { icon: 'animal_cat', size: 24, variant: 'outline' } ||\n \n```\n\nIn your own project, we recommend serving just the sprites you need locally if possible. Do not use proxies for icons in production.\n\n[channel]: https://teams.microsoft.com/l/team/19%3atKKC3lewTMtk4IopGy7Seq7fok-lNW7lGEK-HmzfaKY1%40thread.tacv2/conversations?groupId=4f925ae9-c713-434b-a1f6-44b58ac57210&tenantId=72f988bf-86f1-41af-91ab-2d7cd011db47\n[issues]: https://github.com/OfficeDev/fluent-blocks/issues\n[figma-fluent]: https://www.figma.com/community/file/836828295772957889/Microsoft-Fluent-Web\n[figma-uikit]: https://www.figma.com/community/file/916836509871353159/Microsoft-Teams-UI-Kit\n[fluent-icons]: https://github.com/microsoft/fluentui-system-icons\n[fluentui-v9]: https://www.npmjs.com/package/@fluentui/react-components\n[react-teams]: https://www.npmjs.com/package/@fluentui/react-teams\n[storybook]: https://aka.ms/fluent-blocks-storybook\n[wcag]: https://www.w3.org/TR/WCAG21\n[fmtctx]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow\n","readmeFilename":"README.md","description":"\"Fluent \"Fluent","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^7"},"peerDependencies":{"chart.js":"^2.9.4","react":"^16.14.0, 17.x, 18.x","react-dom":"^16.14.0, 17.x, 18.x"},"devDependencies":{"@babel/core":"latest","@faker-js/faker":"^7.3.0","@playwright/test":"latest","@storybook/addon-actions":"^6.5.10","@storybook/addon-essentials":"^6.5.10","@storybook/addon-links":"^6.5.10","@storybook/addons":"^6.5.10","@storybook/react":"^6.5.10","@storybook/theming":"^6.5.10","@types/chart.js":"^2.9.37","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.35","@types/react":"18.x","@types/react-dom":"18.x","@types/react-test-renderer":"latest","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.20","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":"18.x","react-dom":"18.x","react-test-renderer":"latest","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.2.0-next.0","@fluent-blocks/colors":"9.2.0","@fluent-blocks/schemas":"9.3.0-next.15","@fluentui/react-components":"~9.2.0","@fluentui/react-tabster":"~9.1.0","@react-hook/resize-observer":"^1.2.5","alea":"^1.0.1","lodash":"^4.17.21"},"scripts":{"build":"just-scripts build","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"cd ../icons && pnpm bundle && cd .. && cp icons/basic-icons.svg react/.storybook/public/basic-icons.svg && cd react && build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","_resolved":"","_integrity":"","_from":"file:fluent-blocks-react-9.3.0-next.15.tgz","readme":"\"Fluent\n\"Fluent\n\n### [Open Storybook ↗︎][storybook]\n\nFluent Blocks is a React implementation of [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs for app development based on [`@fluentui/react-components`][fluentui-v9]. This project succeeds [`@fluentui/react-teams`][react-teams].\n\nThis package provides a set of components developers can use to build fully interactive & accessible experiences using whatever React coding convention they prefer, rendering experiences that match Fluent & UI Kit designs.\n\n## ⚠️ Not yet recommended for production\n\nThis project is still being vetted. If you want to use Fluent Blocks, please bear in mind even non-prereleases don’t yet come with any particular guarantees.\n\nFor the best experience specify a specific version of Fluent Blocks when installing instead of using `~`/`^`/`*`, tags, or ranges. If you encounter issues or when you want to use new features, migrate to a newer version with care.\n\n## Getting help & contributing\n\nIf you encounter issues, have questions, or want to participate, please don’t hesitate to [write an issue on Github][issues]. You can also [join us on Teams in our community channel][channel].\n\nIf you’d like to run the development environment or contribute to this project, please see [the Contributing file](CONTRIBUTING.md).\n\n## Getting started\n\nUsing TypeScript and an IDE that supports type inspections will make using this project much easier!\n\n1. Add `react@17`, `react-dom@17` if they’re not in your project already\n - Versions of React from `^16.14.0` up to `18` are supported, in case your project already uses a version in that range\n3. Depending on your bundler you may need to add `chart.js@^2.9.4`, which you’ll need anyway if you want to use charts from this package\n5. Install this package and the icons sprite **with `--save-exact`** using your package manager:\n - NPM: `npm install --save --save-exact @fluent-blocks/react @fluent-blocks/basic-icons`\n - Yarn: `yarn add --exact @fluent-blocks/react @fluent-blocks/basic-icons`\n - PNPM: `pnpm add --save-exact @fluent-blocks/react @fluent-blocks/basic-icons`\n\nFluent Blocks comes with `@fluentui/react-components@~9.1.1` as a dependency — if you anticipate wanting to use components from that library in your project alongside Fluent Blocks, you should also add it as a direct dependency.\n\nNow anywhere you can use React, you can use Fluent Blocks. If you want to delegate the entire viewport to Fluent Blocks, use the `View` component on its own:\n\n```tsx\nimport { View, Escape } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n …for real this time.\n ,\n secondary: {\n actionId: 'start',\n label: 'Get started',\n icon: 'arrow_right',\n iconPosition: 'after'\n }\n }\n }\n },\n ],\n }}/>,\n document.getElementById('root')\n)\n```\n\nIf you want to use Fluent Blocks’ intermediary components, wrap where any will render in a single `FluentBlocksProvider` (there only needs to be one on the page):\n\n```tsx\nimport { FluentBlocksProvider, Illustration } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n \n ,\n document.getElementById('root')\n)\n```\n\nIn order to get the right background coverage and overflow behavior, you should apply `height: 100%` and `overflow: hidden` to the Fluent Blocks React root, and any parents of the Fluent Blocks React root should occupy the full height of whatever space Fluent Blocks should occupy.\n\nIf Fluent Blocks will render alone on the page, these rules are sufficient:\n\n```css\nhtml, body, #root {\n height: 100%;\n}\n#root {\n overflow: hidden;\n}\n```\n\n## How design pattern usage is validated through types\n\nSince the goal of this library is to aid in implementing experiences that conform to [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs and principles, it brings with it those design systems’ opinions. Each component has a concept for what kind of properties & content it accepts, which can be provided in one of two ways:\n\n1. As serializeable **props**, e.g. `{icon: 'fluent', size: 24}`\n1. As a JSX **element**, e.g. ``\n\nThe bolded terms are used in the TypeScript types for the components in this project, e.g. a valid icon instance matches `IconPropsOrElement`, which is either 1) `IconProps`, or 2) `IconElement`.\n\nFor consistency between the two syntaxes, the `children` prop and its implicit nesting equivalent in JSX is avoided in favor of named content props that parallel the serializeable syntax.\n\nSome top-level components like `View` will check the props it was provided and provide a detailed error if the props are incorrect in any way. All other components won’t check for issues and will simply refuse to render unexpected content. In either case, developers can explicitly mark where exceptions should be made using the `Escape` component described below.\n\n## Escaping validation\n\nThese components won’t render a component that has unexpected props or content, unless you use `Escape`. If you feel the need to use a pattern not provided by this project, you can do so using the `Escape` component as a JSX element in any of a component’s content props that aren’t “tightly-bound”, e.g.:\n\n```tsx\n// Only Escape imported from this package will render,\n// so make sure you’ve imported it:\nimport { Section, Escape } from '@fluentui/react-blocks';\n\n\n You can put anything here\n and it will be rendered.\n ,\n ]}\n/>\n```\n\n### Exceptions: tightly bound components\n\nA component may ignore `Escape` only if it is “tightly-bound” with another component. Components are tightly-bound when they make sense only when used together, e.g. `Layout` and `LayoutItem` where `Layout` will only render `LayoutItems` in its `items` prop. If you need to render special content in such a situation, you can either replace the entire parent with `Escape`, or use `Escape` as the _content_ of one of the children.\n\n### Escape inclusively, and share your designs!\n\nMake sure the content you add using `Escape` conforms to [WCAG 2.1][wcag] and is designed inclusively.\n\nIf you would like to share your pattern with the community, [we’d welcome your contribution](CONTRIBUTING.md)! We’d all thank you to submit PR’s that extend this project with your accessible high-quality patterns.\n\n## Concepts\n\nThis library harmonizes the patterns in Fluent and the UI Kit with concepts from web layout & interactivity by delivering components organized into these categories:\n\n- General components based on [formatting context][fmtctx]:\n - `Block` vs `Inline`\n- Specialized clusters of components with shared interactivity considerations:\n - **Media**, e.g.:\n - `Illustration`\n - `Chart`\n - **Inputs**, e.g.:\n - `RadioGroup`\n - `ShortTextInput`\n- **Surfaces**, each of which expect to be unique in a given view\n- **Views**, the top-level components which render an entire UI in a viewport\n\nAny component may also have **Exemplars**, which render the same component but with a specialized API surface optimized for a specific use-case for the pattern, e.g. `Widget` always renders a `Card` though its props are based on the more constrained scope of content for cards in a dashboard from the UI Kit.\n\n## Icons\n\nThis project supports using icons from [`fluentui-system-icons`][fluent-icons] through `@fluent-blocks/basic-icons`.\n\nFirst, give Fluent Blocks’ Provider or View a URL to where your project serves the SVG sprite included in `@fluent-blocks/basic-icons`:\n\n```tsx\nimport {View} from '@fluent-blocks/react'\n\nconst iconSpriteUrl = require('@fluent-blocks/basic-icons/basic-icons.svg')\n\nreturn \n```\n\nThe `Icon`/`{icon: …}` component will render an SVG of the appropriate size containing a `use` element with an `href` to the appropriate sprite, e.g.:\n\n```tsx\n// If used wherever `InlineSequence` or `IconPropsOrElement` is accepted,\n// both the props syntax and element syntax will be rendered the same way.\nconst catIcon =\n { icon: 'animal_cat', size: 24, variant: 'outline' } ||\n \n```\n\nIn your own project, we recommend serving just the sprites you need locally if possible. Do not use proxies for icons in production.\n\n[channel]: https://teams.microsoft.com/l/team/19%3atKKC3lewTMtk4IopGy7Seq7fok-lNW7lGEK-HmzfaKY1%40thread.tacv2/conversations?groupId=4f925ae9-c713-434b-a1f6-44b58ac57210&tenantId=72f988bf-86f1-41af-91ab-2d7cd011db47\n[issues]: https://github.com/OfficeDev/fluent-blocks/issues\n[figma-fluent]: https://www.figma.com/community/file/836828295772957889/Microsoft-Fluent-Web\n[figma-uikit]: https://www.figma.com/community/file/916836509871353159/Microsoft-Teams-UI-Kit\n[fluent-icons]: https://github.com/microsoft/fluentui-system-icons\n[fluentui-v9]: https://www.npmjs.com/package/@fluentui/react-components\n[react-teams]: https://www.npmjs.com/package/@fluentui/react-teams\n[storybook]: https://aka.ms/fluent-blocks-storybook\n[wcag]: https://www.w3.org/TR/WCAG21\n[fmtctx]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow\n","readmeFilename":"README.md","description":"\"Fluent \"Fluent","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^7"},"peerDependencies":{"chart.js":"^2.9.4","react":"^16.14.0, 17.x, 18.x","react-dom":"^16.14.0, 17.x, 18.x"},"devDependencies":{"@babel/core":"latest","@faker-js/faker":"^7.3.0","@playwright/test":"latest","@storybook/addon-actions":"^6.5.10","@storybook/addon-essentials":"^6.5.10","@storybook/addon-links":"^6.5.10","@storybook/addons":"^6.5.10","@storybook/react":"^6.5.10","@storybook/theming":"^6.5.10","@types/chart.js":"^2.9.37","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.35","@types/react":"18.x","@types/react-dom":"18.x","@types/react-test-renderer":"latest","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.20","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":"18.x","react-dom":"18.x","react-test-renderer":"latest","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.2.0-next.0","@fluent-blocks/colors":"9.2.0","@fluent-blocks/schemas":"9.3.0-next.16","@fluentui/react-components":"~9.2.0","@fluentui/react-tabster":"~9.1.0","@react-hook/resize-observer":"^1.2.5","alea":"^1.0.1","lodash":"^4.17.21"},"scripts":{"build":"just-scripts build","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"cd ../icons && pnpm bundle && cd .. && cp icons/basic-icons.svg react/.storybook/public/basic-icons.svg && cd react && build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","_resolved":"","_integrity":"","_from":"file:fluent-blocks-react-9.3.0-next.16.tgz","readme":"\"Fluent\n\"Fluent\n\n### [Open Storybook ↗︎][storybook]\n\nFluent Blocks is a React implementation of [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs for app development based on [`@fluentui/react-components`][fluentui-v9]. This project succeeds [`@fluentui/react-teams`][react-teams].\n\nThis package provides a set of components developers can use to build fully interactive & accessible experiences using whatever React coding convention they prefer, rendering experiences that match Fluent & UI Kit designs.\n\n## ⚠️ Not yet recommended for production\n\nThis project is still being vetted. If you want to use Fluent Blocks, please bear in mind even non-prereleases don’t yet come with any particular guarantees.\n\nFor the best experience specify a specific version of Fluent Blocks when installing instead of using `~`/`^`/`*`, tags, or ranges. If you encounter issues or when you want to use new features, migrate to a newer version with care.\n\n## Getting help & contributing\n\nIf you encounter issues, have questions, or want to participate, please don’t hesitate to [write an issue on Github][issues]. You can also [join us on Teams in our community channel][channel].\n\nIf you’d like to run the development environment or contribute to this project, please see [the Contributing file](CONTRIBUTING.md).\n\n## Getting started\n\nUsing TypeScript and an IDE that supports type inspections will make using this project much easier!\n\n1. Add `react@17`, `react-dom@17` if they’re not in your project already\n - Versions of React from `^16.14.0` up to `18` are supported, in case your project already uses a version in that range\n3. Depending on your bundler you may need to add `chart.js@^2.9.4`, which you’ll need anyway if you want to use charts from this package\n5. Install this package and the icons sprite **with `--save-exact`** using your package manager:\n - NPM: `npm install --save --save-exact @fluent-blocks/react @fluent-blocks/basic-icons`\n - Yarn: `yarn add --exact @fluent-blocks/react @fluent-blocks/basic-icons`\n - PNPM: `pnpm add --save-exact @fluent-blocks/react @fluent-blocks/basic-icons`\n\nFluent Blocks comes with `@fluentui/react-components@~9.1.1` as a dependency — if you anticipate wanting to use components from that library in your project alongside Fluent Blocks, you should also add it as a direct dependency.\n\nNow anywhere you can use React, you can use Fluent Blocks. If you want to delegate the entire viewport to Fluent Blocks, use the `View` component on its own:\n\n```tsx\nimport { View, Escape } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n …for real this time.\n ,\n secondary: {\n actionId: 'start',\n label: 'Get started',\n icon: 'arrow_right',\n iconPosition: 'after'\n }\n }\n }\n },\n ],\n }}/>,\n document.getElementById('root')\n)\n```\n\nIf you want to use Fluent Blocks’ intermediary components, wrap where any will render in a single `FluentBlocksProvider` (there only needs to be one on the page):\n\n```tsx\nimport { FluentBlocksProvider, Illustration } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n \n ,\n document.getElementById('root')\n)\n```\n\nIn order to get the right background coverage and overflow behavior, you should apply `height: 100%` and `overflow: hidden` to the Fluent Blocks React root, and any parents of the Fluent Blocks React root should occupy the full height of whatever space Fluent Blocks should occupy.\n\nIf Fluent Blocks will render alone on the page, these rules are sufficient:\n\n```css\nhtml, body, #root {\n height: 100%;\n}\n#root {\n overflow: hidden;\n}\n```\n\n## How design pattern usage is validated through types\n\nSince the goal of this library is to aid in implementing experiences that conform to [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs and principles, it brings with it those design systems’ opinions. Each component has a concept for what kind of properties & content it accepts, which can be provided in one of two ways:\n\n1. As serializeable **props**, e.g. `{icon: 'fluent', size: 24}`\n1. As a JSX **element**, e.g. ``\n\nThe bolded terms are used in the TypeScript types for the components in this project, e.g. a valid icon instance matches `IconPropsOrElement`, which is either 1) `IconProps`, or 2) `IconElement`.\n\nFor consistency between the two syntaxes, the `children` prop and its implicit nesting equivalent in JSX is avoided in favor of named content props that parallel the serializeable syntax.\n\nSome top-level components like `View` will check the props it was provided and provide a detailed error if the props are incorrect in any way. All other components won’t check for issues and will simply refuse to render unexpected content. In either case, developers can explicitly mark where exceptions should be made using the `Escape` component described below.\n\n## Escaping validation\n\nThese components won’t render a component that has unexpected props or content, unless you use `Escape`. If you feel the need to use a pattern not provided by this project, you can do so using the `Escape` component as a JSX element in any of a component’s content props that aren’t “tightly-bound”, e.g.:\n\n```tsx\n// Only Escape imported from this package will render,\n// so make sure you’ve imported it:\nimport { Section, Escape } from '@fluentui/react-blocks';\n\n\n You can put anything here\n and it will be rendered.\n ,\n ]}\n/>\n```\n\n### Exceptions: tightly bound components\n\nA component may ignore `Escape` only if it is “tightly-bound” with another component. Components are tightly-bound when they make sense only when used together, e.g. `Layout` and `LayoutItem` where `Layout` will only render `LayoutItems` in its `items` prop. If you need to render special content in such a situation, you can either replace the entire parent with `Escape`, or use `Escape` as the _content_ of one of the children.\n\n### Escape inclusively, and share your designs!\n\nMake sure the content you add using `Escape` conforms to [WCAG 2.1][wcag] and is designed inclusively.\n\nIf you would like to share your pattern with the community, [we’d welcome your contribution](CONTRIBUTING.md)! We’d all thank you to submit PR’s that extend this project with your accessible high-quality patterns.\n\n## Concepts\n\nThis library harmonizes the patterns in Fluent and the UI Kit with concepts from web layout & interactivity by delivering components organized into these categories:\n\n- General components based on [formatting context][fmtctx]:\n - `Block` vs `Inline`\n- Specialized clusters of components with shared interactivity considerations:\n - **Media**, e.g.:\n - `Illustration`\n - `Chart`\n - **Inputs**, e.g.:\n - `RadioGroup`\n - `ShortTextInput`\n- **Surfaces**, each of which expect to be unique in a given view\n- **Views**, the top-level components which render an entire UI in a viewport\n\nAny component may also have **Exemplars**, which render the same component but with a specialized API surface optimized for a specific use-case for the pattern, e.g. `Widget` always renders a `Card` though its props are based on the more constrained scope of content for cards in a dashboard from the UI Kit.\n\n## Icons\n\nThis project supports using icons from [`fluentui-system-icons`][fluent-icons] through `@fluent-blocks/basic-icons`.\n\nFirst, give Fluent Blocks’ Provider or View a URL to where your project serves the SVG sprite included in `@fluent-blocks/basic-icons`:\n\n```tsx\nimport {View} from '@fluent-blocks/react'\n\nconst iconSpriteUrl = require('@fluent-blocks/basic-icons/basic-icons.svg')\n\nreturn \n```\n\nThe `Icon`/`{icon: …}` component will render an SVG of the appropriate size containing a `use` element with an `href` to the appropriate sprite, e.g.:\n\n```tsx\n// If used wherever `InlineSequence` or `IconPropsOrElement` is accepted,\n// both the props syntax and element syntax will be rendered the same way.\nconst catIcon =\n { icon: 'animal_cat', size: 24, variant: 'outline' } ||\n \n```\n\nIn your own project, we recommend serving just the sprites you need locally if possible. Do not use proxies for icons in production.\n\n[channel]: https://teams.microsoft.com/l/team/19%3atKKC3lewTMtk4IopGy7Seq7fok-lNW7lGEK-HmzfaKY1%40thread.tacv2/conversations?groupId=4f925ae9-c713-434b-a1f6-44b58ac57210&tenantId=72f988bf-86f1-41af-91ab-2d7cd011db47\n[issues]: https://github.com/OfficeDev/fluent-blocks/issues\n[figma-fluent]: https://www.figma.com/community/file/836828295772957889/Microsoft-Fluent-Web\n[figma-uikit]: https://www.figma.com/community/file/916836509871353159/Microsoft-Teams-UI-Kit\n[fluent-icons]: https://github.com/microsoft/fluentui-system-icons\n[fluentui-v9]: https://www.npmjs.com/package/@fluentui/react-components\n[react-teams]: https://www.npmjs.com/package/@fluentui/react-teams\n[storybook]: https://aka.ms/fluent-blocks-storybook\n[wcag]: https://www.w3.org/TR/WCAG21\n[fmtctx]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow\n","readmeFilename":"README.md","description":"\"Fluent \"Fluent","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^7"},"peerDependencies":{"chart.js":"^2.9.4","react":"^16.14.0, 17.x, 18.x","react-dom":"^16.14.0, 17.x, 18.x"},"devDependencies":{"@babel/core":"latest","@faker-js/faker":"^7.3.0","@playwright/test":"latest","@storybook/addon-actions":"^6.5.10","@storybook/addon-essentials":"^6.5.10","@storybook/addon-links":"^6.5.10","@storybook/addons":"^6.5.10","@storybook/react":"^6.5.10","@storybook/theming":"^6.5.10","@types/chart.js":"^2.9.37","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.35","@types/react":"18.x","@types/react-dom":"18.x","@types/react-test-renderer":"latest","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.20","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":"18.x","react-dom":"18.x","react-test-renderer":"latest","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.2.0-next.0","@fluent-blocks/colors":"9.2.0","@fluent-blocks/schemas":"9.3.0-next.17","@fluentui/react-components":"~9.2.0","@fluentui/react-tabster":"~9.1.0","@react-hook/resize-observer":"^1.2.5","alea":"^1.0.1","lodash":"^4.17.21"},"scripts":{"build":"just-scripts build","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"cd ../icons && pnpm bundle && cd .. && cp icons/basic-icons.svg react/.storybook/public/basic-icons.svg && cd react && build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","_resolved":"","_integrity":"","_from":"file:fluent-blocks-react-9.3.0-next.17.tgz","readme":"\"Fluent\n\"Fluent\n\n### [Open Storybook ↗︎][storybook]\n\nFluent Blocks is a React implementation of [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs for app development based on [`@fluentui/react-components`][fluentui-v9]. This project succeeds [`@fluentui/react-teams`][react-teams].\n\nThis package provides a set of components developers can use to build fully interactive & accessible experiences using whatever React coding convention they prefer, rendering experiences that match Fluent & UI Kit designs.\n\n## ⚠️ Not yet recommended for production\n\nThis project is still being vetted. If you want to use Fluent Blocks, please bear in mind even non-prereleases don’t yet come with any particular guarantees.\n\nFor the best experience specify a specific version of Fluent Blocks when installing instead of using `~`/`^`/`*`, tags, or ranges. If you encounter issues or when you want to use new features, migrate to a newer version with care.\n\n## Getting help & contributing\n\nIf you encounter issues, have questions, or want to participate, please don’t hesitate to [write an issue on Github][issues]. You can also [join us on Teams in our community channel][channel].\n\nIf you’d like to run the development environment or contribute to this project, please see [the Contributing file](CONTRIBUTING.md).\n\n## Getting started\n\nUsing TypeScript and an IDE that supports type inspections will make using this project much easier!\n\n1. Add `react@17`, `react-dom@17` if they’re not in your project already\n - Versions of React from `^16.14.0` up to `18` are supported, in case your project already uses a version in that range\n3. Depending on your bundler you may need to add `chart.js@^2.9.4`, which you’ll need anyway if you want to use charts from this package\n5. Install this package and the icons sprite **with `--save-exact`** using your package manager:\n - NPM: `npm install --save --save-exact @fluent-blocks/react @fluent-blocks/basic-icons`\n - Yarn: `yarn add --exact @fluent-blocks/react @fluent-blocks/basic-icons`\n - PNPM: `pnpm add --save-exact @fluent-blocks/react @fluent-blocks/basic-icons`\n\nFluent Blocks comes with `@fluentui/react-components@~9.1.1` as a dependency — if you anticipate wanting to use components from that library in your project alongside Fluent Blocks, you should also add it as a direct dependency.\n\nNow anywhere you can use React, you can use Fluent Blocks. If you want to delegate the entire viewport to Fluent Blocks, use the `View` component on its own:\n\n```tsx\nimport { View, Escape } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n …for real this time.\n ,\n secondary: {\n actionId: 'start',\n label: 'Get started',\n icon: 'arrow_right',\n iconPosition: 'after'\n }\n }\n }\n },\n ],\n }}/>,\n document.getElementById('root')\n)\n```\n\nIf you want to use Fluent Blocks’ intermediary components, wrap where any will render in a single `FluentBlocksProvider` (there only needs to be one on the page):\n\n```tsx\nimport { FluentBlocksProvider, Illustration } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n \n ,\n document.getElementById('root')\n)\n```\n\nIn order to get the right background coverage and overflow behavior, you should apply `height: 100%` and `overflow: hidden` to the Fluent Blocks React root, and any parents of the Fluent Blocks React root should occupy the full height of whatever space Fluent Blocks should occupy.\n\nIf Fluent Blocks will render alone on the page, these rules are sufficient:\n\n```css\nhtml, body, #root {\n height: 100%;\n}\n#root {\n overflow: hidden;\n}\n```\n\n## How design pattern usage is validated through types\n\nSince the goal of this library is to aid in implementing experiences that conform to [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs and principles, it brings with it those design systems’ opinions. Each component has a concept for what kind of properties & content it accepts, which can be provided in one of two ways:\n\n1. As serializeable **props**, e.g. `{icon: 'fluent', size: 24}`\n1. As a JSX **element**, e.g. ``\n\nThe bolded terms are used in the TypeScript types for the components in this project, e.g. a valid icon instance matches `IconPropsOrElement`, which is either 1) `IconProps`, or 2) `IconElement`.\n\nFor consistency between the two syntaxes, the `children` prop and its implicit nesting equivalent in JSX is avoided in favor of named content props that parallel the serializeable syntax.\n\nSome top-level components like `View` will check the props it was provided and provide a detailed error if the props are incorrect in any way. All other components won’t check for issues and will simply refuse to render unexpected content. In either case, developers can explicitly mark where exceptions should be made using the `Escape` component described below.\n\n## Escaping validation\n\nThese components won’t render a component that has unexpected props or content, unless you use `Escape`. If you feel the need to use a pattern not provided by this project, you can do so using the `Escape` component as a JSX element in any of a component’s content props that aren’t “tightly-bound”, e.g.:\n\n```tsx\n// Only Escape imported from this package will render,\n// so make sure you’ve imported it:\nimport { Section, Escape } from '@fluentui/react-blocks';\n\n\n You can put anything here\n and it will be rendered.\n ,\n ]}\n/>\n```\n\n### Exceptions: tightly bound components\n\nA component may ignore `Escape` only if it is “tightly-bound” with another component. Components are tightly-bound when they make sense only when used together, e.g. `Layout` and `LayoutItem` where `Layout` will only render `LayoutItems` in its `items` prop. If you need to render special content in such a situation, you can either replace the entire parent with `Escape`, or use `Escape` as the _content_ of one of the children.\n\n### Escape inclusively, and share your designs!\n\nMake sure the content you add using `Escape` conforms to [WCAG 2.1][wcag] and is designed inclusively.\n\nIf you would like to share your pattern with the community, [we’d welcome your contribution](CONTRIBUTING.md)! We’d all thank you to submit PR’s that extend this project with your accessible high-quality patterns.\n\n## Concepts\n\nThis library harmonizes the patterns in Fluent and the UI Kit with concepts from web layout & interactivity by delivering components organized into these categories:\n\n- General components based on [formatting context][fmtctx]:\n - `Block` vs `Inline`\n- Specialized clusters of components with shared interactivity considerations:\n - **Media**, e.g.:\n - `Illustration`\n - `Chart`\n - **Inputs**, e.g.:\n - `RadioGroup`\n - `ShortTextInput`\n- **Surfaces**, each of which expect to be unique in a given view\n- **Views**, the top-level components which render an entire UI in a viewport\n\nAny component may also have **Exemplars**, which render the same component but with a specialized API surface optimized for a specific use-case for the pattern, e.g. `Widget` always renders a `Card` though its props are based on the more constrained scope of content for cards in a dashboard from the UI Kit.\n\n## Icons\n\nThis project supports using icons from [`fluentui-system-icons`][fluent-icons] through `@fluent-blocks/basic-icons`.\n\nFirst, give Fluent Blocks’ Provider or View a URL to where your project serves the SVG sprite included in `@fluent-blocks/basic-icons`:\n\n```tsx\nimport {View} from '@fluent-blocks/react'\n\nconst iconSpriteUrl = require('@fluent-blocks/basic-icons/basic-icons.svg')\n\nreturn \n```\n\nThe `Icon`/`{icon: …}` component will render an SVG of the appropriate size containing a `use` element with an `href` to the appropriate sprite, e.g.:\n\n```tsx\n// If used wherever `InlineSequence` or `IconPropsOrElement` is accepted,\n// both the props syntax and element syntax will be rendered the same way.\nconst catIcon =\n { icon: 'animal_cat', size: 24, variant: 'outline' } ||\n \n```\n\nIn your own project, we recommend serving just the sprites you need locally if possible. Do not use proxies for icons in production.\n\n[channel]: https://teams.microsoft.com/l/team/19%3atKKC3lewTMtk4IopGy7Seq7fok-lNW7lGEK-HmzfaKY1%40thread.tacv2/conversations?groupId=4f925ae9-c713-434b-a1f6-44b58ac57210&tenantId=72f988bf-86f1-41af-91ab-2d7cd011db47\n[issues]: https://github.com/OfficeDev/fluent-blocks/issues\n[figma-fluent]: https://www.figma.com/community/file/836828295772957889/Microsoft-Fluent-Web\n[figma-uikit]: https://www.figma.com/community/file/916836509871353159/Microsoft-Teams-UI-Kit\n[fluent-icons]: https://github.com/microsoft/fluentui-system-icons\n[fluentui-v9]: https://www.npmjs.com/package/@fluentui/react-components\n[react-teams]: https://www.npmjs.com/package/@fluentui/react-teams\n[storybook]: https://aka.ms/fluent-blocks-storybook\n[wcag]: https://www.w3.org/TR/WCAG21\n[fmtctx]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow\n","readmeFilename":"README.md","description":"\"Fluent \"Fluent","Zhenya Savchenko "],"license":"MIT","main":"cjs/index.js","engines":{"node":">=12.0.0 <17.0.0","pnpm":"^7"},"peerDependencies":{"chart.js":"^2.9.4","react":"^16.14.0, 17.x, 18.x","react-dom":"^16.14.0, 17.x, 18.x"},"devDependencies":{"@babel/core":"latest","@faker-js/faker":"^7.3.0","@playwright/test":"latest","@storybook/addon-actions":"^6.5.10","@storybook/addon-essentials":"^6.5.10","@storybook/addon-links":"^6.5.10","@storybook/addons":"^6.5.10","@storybook/react":"^6.5.10","@storybook/theming":"^6.5.10","@types/chart.js":"^2.9.37","@types/lodash":"latest","@types/mocha":"latest","@types/node":"^17.0.35","@types/react":"18.x","@types/react-dom":"18.x","@types/react-test-renderer":"latest","babel-loader":"latest","chart.js":"^2.9.4","chromatic":"latest","csstype":"^2.6.20","http-proxy-middleware":"latest","just-scripts":"latest","mocha":"latest","playwright-chromium":"latest","react":"18.x","react-dom":"18.x","react-test-renderer":"latest","start-server-and-test":"latest","ts-mocha":"latest","ts-node":"latest","typescript":">=4.4.0 <5.0.0","webpack":"latest"},"dependencies":{"@fluent-blocks/basic-icons":"9.2.0-next.0","@fluent-blocks/colors":"9.2.0","@fluent-blocks/schemas":"9.3.0-next.17","@fluentui/react-components":"~9.2.0","@fluentui/react-tabster":"~9.1.0","@react-hook/resize-observer":"^1.2.5","alea":"^1.0.1","lodash":"^4.17.21"},"scripts":{"build":"just-scripts build","storybook:upgrade":"pnpm update \"@storybook/*\"","storybook:build":"cd ../icons && pnpm bundle && cd .. && cp icons/basic-icons.svg react/.storybook/public/basic-icons.svg && cd react && build-storybook","storybook:start":"start-storybook -p 4000","storybook:start-ci":"start-storybook -p 4000 --ci --quiet","dev":"pnpm storybook:start","test":"start-server-and-test 'pnpm storybook:start-ci' http://localhost:4000 'pnpm test:run'","test:run":"ts-mocha -p ./tsconfig.test.json --require src/setup.test.ts src/**/*.test.tsx","check":"tsc --noEmit"},"module":"esm/index.js","types":"types/index.d.ts","_resolved":"","_integrity":"","_from":"file:fluent-blocks-react-9.3.0-next.18.tgz","readme":"\"Fluent\n\"Fluent\n\n### [Open Storybook ↗︎][storybook]\n\nFluent Blocks is a React implementation of [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs for app development based on [`@fluentui/react-components`][fluentui-v9]. This project succeeds [`@fluentui/react-teams`][react-teams].\n\nThis package provides a set of components developers can use to build fully interactive & accessible experiences using whatever React coding convention they prefer, rendering experiences that match Fluent & UI Kit designs.\n\n## ⚠️ Not yet recommended for production\n\nThis project is still being vetted. If you want to use Fluent Blocks, please bear in mind even non-prereleases don’t yet come with any particular guarantees.\n\nFor the best experience specify a specific version of Fluent Blocks when installing instead of using `~`/`^`/`*`, tags, or ranges. If you encounter issues or when you want to use new features, migrate to a newer version with care.\n\n## Getting help & contributing\n\nIf you encounter issues, have questions, or want to participate, please don’t hesitate to [write an issue on Github][issues]. You can also [join us on Teams in our community channel][channel].\n\nIf you’d like to run the development environment or contribute to this project, please see [the Contributing file](CONTRIBUTING.md).\n\n## Getting started\n\nUsing TypeScript and an IDE that supports type inspections will make using this project much easier!\n\n1. Add `react@17`, `react-dom@17` if they’re not in your project already\n - Versions of React from `^16.14.0` up to `18` are supported, in case your project already uses a version in that range\n3. Depending on your bundler you may need to add `chart.js@^2.9.4`, which you’ll need anyway if you want to use charts from this package\n5. Install this package and the icons sprite **with `--save-exact`** using your package manager:\n - NPM: `npm install --save --save-exact @fluent-blocks/react @fluent-blocks/basic-icons`\n - Yarn: `yarn add --exact @fluent-blocks/react @fluent-blocks/basic-icons`\n - PNPM: `pnpm add --save-exact @fluent-blocks/react @fluent-blocks/basic-icons`\n\nFluent Blocks comes with `@fluentui/react-components@~9.1.1` as a dependency — if you anticipate wanting to use components from that library in your project alongside Fluent Blocks, you should also add it as a direct dependency.\n\nNow anywhere you can use React, you can use Fluent Blocks. If you want to delegate the entire viewport to Fluent Blocks, use the `View` component on its own:\n\n```tsx\nimport { View, Escape } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n …for real this time.\n ,\n secondary: {\n actionId: 'start',\n label: 'Get started',\n icon: 'arrow_right',\n iconPosition: 'after'\n }\n }\n }\n },\n ],\n }}/>,\n document.getElementById('root')\n)\n```\n\nIf you want to use Fluent Blocks’ intermediary components, wrap where any will render in a single `FluentBlocksProvider` (there only needs to be one on the page):\n\n```tsx\nimport { FluentBlocksProvider, Illustration } from '@fluent-blocks/react';\nimport basicIcons from '@fluent-blocks/basic-icons/basic-icons.svg';\nimport { render } from 'react-dom'\n\nrender(\n \n \n ,\n document.getElementById('root')\n)\n```\n\nIn order to get the right background coverage and overflow behavior, you should apply `height: 100%` and `overflow: hidden` to the Fluent Blocks React root, and any parents of the Fluent Blocks React root should occupy the full height of whatever space Fluent Blocks should occupy.\n\nIf Fluent Blocks will render alone on the page, these rules are sufficient:\n\n```css\nhtml, body, #root {\n height: 100%;\n}\n#root {\n overflow: hidden;\n}\n```\n\n## How design pattern usage is validated through types\n\nSince the goal of this library is to aid in implementing experiences that conform to [Fluent][figma-fluent] & [UI Kit][figma-uikit] designs and principles, it brings with it those design systems’ opinions. Each component has a concept for what kind of properties & content it accepts, which can be provided in one of two ways:\n\n1. As serializeable **props**, e.g. `{icon: 'fluent', size: 24}`\n1. As a JSX **element**, e.g. ``\n\nThe bolded terms are used in the TypeScript types for the components in this project, e.g. a valid icon instance matches `IconPropsOrElement`, which is either 1) `IconProps`, or 2) `IconElement`.\n\nFor consistency between the two syntaxes, the `children` prop and its implicit nesting equivalent in JSX is avoided in favor of named content props that parallel the serializeable syntax.\n\nSome top-level components like `View` will check the props it was provided and provide a detailed error if the props are incorrect in any way. All other components won’t check for issues and will simply refuse to render unexpected content. In either case, developers can explicitly mark where exceptions should be made using the `Escape` component described below.\n\n## Escaping validation\n\nThese components won’t render a component that has unexpected props or content, unless you use `Escape`. If you feel the need to use a pattern not provided by this project, you can do so using the `Escape` component as a JSX element in any of a component’s content props that aren’t “tightly-bound”, e.g.:\n\n```tsx\n// Only Escape imported from this package will render,\n// so make sure you’ve imported it:\nimport { Section, Escape } from '@fluentui/react-blocks';\n\n\n You can put anything here\n and it will be rendered.\n ,\n ]}\n/>\n```\n\n### Exceptions: tightly bound components\n\nA component may ignore `Escape` only if it is “tightly-bound” with another component. Components are tightly-bound when they make sense only when used together, e.g. `Layout` and `LayoutItem` where `Layout` will only render `LayoutItems` in its `items` prop. If you need to render special content in such a situation, you can either replace the entire parent with `Escape`, or use `Escape` as the _content_ of one of the children.\n\n### Escape inclusively, and share your designs!\n\nMake sure the content you add using `Escape` conforms to [WCAG 2.1][wcag] and is designed inclusively.\n\nIf you would like to share your pattern with the community, [we’d welcome your contribution](CONTRIBUTING.md)! We’d all thank you to submit PR’s that extend this project with your accessible high-quality patterns.\n\n## Concepts\n\nThis library harmonizes the patterns in Fluent and the UI Kit with concepts from web layout & interactivity by delivering components organized into these categories:\n\n- General components based on [formatting context][fmtctx]:\n - `Block` vs `Inline`\n- Specialized clusters of components with shared interactivity considerations:\n - **Media**, e.g.:\n - `Illustration`\n - `Chart`\n - **Inputs**, e.g.:\n - `RadioGroup`\n - `ShortTextInput`\n- **Surfaces**, each of which expect to be unique in a given view\n- **Views**, the top-level components which render an entire UI in a viewport\n\nAny component may also have **Exemplars**, which render the same component but with a specialized API surface optimized for a specific use-case for the pattern, e.g. `Widget` always renders a `Card` though its props are based on the more constrained scope of content for cards in a dashboard from the UI Kit.\n\n## Icons\n\nThis project supports using icons from [`fluentui-system-icons`][fluent-icons] through `@fluent-blocks/basic-icons`.\n\nFirst, give Fluent Blocks’ Provider or View a URL to where your project serves the SVG sprite included in `@fluent-blocks/basic-icons`:\n\n```tsx\nimport {View} from '@fluent-blocks/react'\n\nconst iconSpriteUrl = require('@fluent-blocks/basic-icons/basic-icons.svg')\n\nreturn \n```\n\nThe `Icon`/`{icon: …}` component will render an SVG of the appropriate size containing a `use` element with an `href` to the appropriate sprite, e.g.:\n\n```tsx\n// If used wherever `InlineSequence` or `IconPropsOrElement` is accepted,\n// both the props syntax and element syntax will be rendered the same way.\nconst catIcon =\n { icon: 'animal_cat', size: 24, variant: 'outline' } ||\n \n```\n\nIn your own project, we recommend serving just the sprites you need locally if possible. Do not use proxies for icons in production.\n\n[channel]: https://teams.microsoft.com/l/team/19%3atKKC3lewTMtk4IopGy7Seq7fok-lNW7lGEK-HmzfaKY1%40thread.tacv2/conversations?groupId=4f925ae9-c713-434b-a1f6-44b58ac57210&tenantId=72f988bf-86f1-41af-91ab-2d7cd011db47\n[issues]: https://github.com/OfficeDev/fluent-blocks/issues\n[figma-fluent]: https://www.figma.com/community/file/836828295772957889/Microsoft-Fluent-Web\n[figma-uikit]: https://www.figma.com/community/file/916836509871353159/Microsoft-Teams-UI-Kit\n[fluent-icons]: https://github.com/microsoft/fluentui-system-icons\n[fluentui-v9]: https://www.npmjs.com/package/@fluentui/react-components\n[react-teams]: https://www.npmjs.com/package/@fluentui/react-teams\n[storybook]: https://aka.ms/fluent-blocks-storybook\n[wcag]: https://www.w3.org/TR/WCAG21\n[fmtctx]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow\n","readmeFilename":"README.md","description":"\"Fluent \"Fluent