{"_id":"@fluentui/react-swatch-picker-preview","_rev":"50-7a8ce1a004ad14d5d2864a33cbd86ada","name":"@fluentui/react-swatch-picker-preview","dist-tags":{"nightly":"0.0.0-nightly-20240516-0406.1","latest":"0.6.0"},"versions":{"0.0.0-nightly-20240327-0404.1":{"name":"@fluentui/react-swatch-picker-preview","version":"0.0.0-nightly-20240327-0404.1","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.0.0-nightly-20240327-0404.1","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"311872f379db3dec3621b8fd7c851cf23dfe71cd","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.0.0-nightly-20240327-0404.1.tgz","fileCount":4,"integrity":"sha512-M75/2RDP7gQ9DdyUfhTvIYceFWACy9K747seeHzvs3BJ1U4TAelBStDuvb/IOg3mh0oacuQhPiFgnKCGStNs8w==","signatures":[{"sig":"MEUCIQCK+/AlwQx+KGS9F2My3qpV9vgIY4YLg7Y+qy4XFKkzhwIgEGNhfLkAkt0VkJbBKOWJFXFvuyyreYNwbD7PEEjAxJY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7777},"main":"lib-commonjs/index.js","module":"lib/index.js","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"853fa1ab97d1c60d130bf7d321ed9e2b695eb64a","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.2.4","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.19.1","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.224","@fluentui/react-theme":"0.0.0-nightly-20240327-0404.1","@fluentui/react-tabster":"0.0.0-nightly-20240327-0404.1","@fluentui/react-utilities":"0.0.0-nightly-20240327-0404.1","@fluentui/react-jsx-runtime":"0.0.0-nightly-20240327-0404.1","@fluentui/react-shared-contexts":"0.0.0-nightly-20240327-0404.1","@fluentui/react-context-selector":"0.0.0-nightly-20240327-0404.1"},"_hasShrinkwrap":false,"devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"0.0.0-nightly-20240327-0404.1","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"0.0.0-nightly-20240327-0404.1"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.0.0-nightly-20240327-0404.1_1711513356912_0.44202049189348425","host":"s3://npm-registry-packages"}},"0.1.0":{"name":"@fluentui/react-swatch-picker-preview","version":"0.1.0","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.1.0","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"28ef1cfd326f626d20478626c1fe0b864e4456db","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.1.0.tgz","fileCount":129,"integrity":"sha512-RxprvBtVBIodrOfb/I//VWY4bNOr0bXxhJf/9Yb/rN2CDARRbgZVJkHSUz66nX6hYXiLG39Jp2STBvJmhLrM3w==","signatures":[{"sig":"MEUCIHz8AO7n8u980BQQ9dAJ/H54MRHCgobDnFL+4WtZLakOAiEAklzd7GQpQ9YwBEsaGI19+rhC9qvVYx02PCwKK1E6sX4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214161},"main":"lib-commonjs/index.js","module":"lib/index.js","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"ec5313264f812777f4db8018ad33b3fe3b3cf574","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","prerelease"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.2.4","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.19.1","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.224","@fluentui/react-theme":"^9.1.19","@fluentui/react-tabster":"^9.19.5","@fluentui/react-utilities":"^9.18.5","@fluentui/react-jsx-runtime":"^9.0.34","@fluentui/react-shared-contexts":"^9.15.2","@fluentui/react-context-selector":"^9.1.56"},"_hasShrinkwrap":false,"devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"*","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"*"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.1.0_1711535364623_0.40221979423611365","host":"s3://npm-registry-packages"}},"0.0.0-nightly-20240328-0407.1":{"name":"@fluentui/react-swatch-picker-preview","version":"0.0.0-nightly-20240328-0407.1","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.0.0-nightly-20240328-0407.1","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"f5e79e2bc6c7c4702b5e102384fff43569494331","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.0.0-nightly-20240328-0407.1.tgz","fileCount":4,"integrity":"sha512-KfBGSDygJIv7NpGNacXLoR6thTUOsu0y6jY+aNapHg1wUezEICSlhWgJp7eBiyNqkdGyjtxx4OYhy8bfz7kSTw==","signatures":[{"sig":"MEYCIQDG0uBe01a7FFkhUaT3cS30L/YN1vGbIu6BhnD4vLL4DAIhAPjviToshVPQLe8/qGRY2XG7LmrmVfF4FRyDik5ObK4x","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8249},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-swatch-picker-preview\n\n**React Swatch Picker components for [Fluent UI React](https://react.fluentui.dev/)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\nThe SwatchPicker is used in graphic and text editors. It allows user to choose a needed color, image or pattern.\nThe SwatchPicker can be integrated within a popover or used as a standalone feature.\n\n## Usage\n\nTo import React SwatchPicker components:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n```\n\nSimple example of SwatchPicker Usage:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n\nexport const App = () => {\n  const [selectedValue, setSelectedValue] = React.useState('00B053');\n  const [selectedColor, setSelectedColor] = React.useState('#00B053');\n  const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {\n    setSelectedValue(data.selectedValue);\n    setSelectedColor(data.selectedColor);\n  };\n\n  return (\n    <>\n      <SwatchPicker aria-label=\"SwatchPicker default\" selectedValue={selectedValue} onSelectionChange={handleSelect}>\n        <ColorSwatch color=\"#FF1921\" value=\"FF1921\" aria-label=\"red\" />\n        <ColorSwatch color=\"#FFC12E\" value=\"FFC12E\" aria-label=\"orange\" />\n        <ColorSwatch color=\"#FEFF37\" value=\"FEFF37\" aria-label=\"yellow\" />\n        <ColorSwatch disabled color=\"#90D057\" value=\"90D057\" aria-label=\"light green\" />\n        <ColorSwatch color=\"#00B053\" value=\"00B053\" aria-label=\"green\" />\n        <ColorSwatch color=\"#00AFED\" value=\"00AFED\" aria-label=\"light blue\" />\n        <ColorSwatch color=\"#006EBD\" value=\"006EBD\" aria-label=\"blue\" />\n        <ColorSwatch color=\"#011F5E\" value=\"011F5E\" aria-label=\"dark blue\" />\n        <ColorSwatch color=\"#712F9E\" value=\"712F9E\" aria-label=\"purple\" />\n      </SwatchPicker>\n\n      <div\n        style={{\n          backgroundColor: selectedColor,\n        }}\n      />\n    </>\n  );\n};\n```\n\n## Specification\n\nSee the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.\n\n## API\n\nFor information about the components, please refer to the API documentation.\n","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"36e07adb7d10614c121cdd6c7a1dcc8c75a77ecb","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.2.4","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.19.1","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.224","@fluentui/react-theme":"0.0.0-nightly-20240328-0407.1","@fluentui/react-tabster":"0.0.0-nightly-20240328-0407.1","@fluentui/react-utilities":"0.0.0-nightly-20240328-0407.1","@fluentui/react-jsx-runtime":"0.0.0-nightly-20240328-0407.1","@fluentui/react-shared-contexts":"0.0.0-nightly-20240328-0407.1","@fluentui/react-context-selector":"0.0.0-nightly-20240328-0407.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"0.0.0-nightly-20240328-0407.1","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"0.0.0-nightly-20240328-0407.1"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.0.0-nightly-20240328-0407.1_1711600000140_0.14268257296538445","host":"s3://npm-registry-packages"}},"0.2.0":{"name":"@fluentui/react-swatch-picker-preview","version":"0.2.0","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.2.0","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"328e6dd5d0f18efdbdf89bbec57b2a815d3f7f04","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.2.0.tgz","fileCount":129,"integrity":"sha512-NtiGAX1Bh7wdfzPy8OIunGF4FI1jSH5kDBWjsTnxKs3kvu8SrXrmDBA0igMEBwU89OZf09w5wgUjYEgTv90/FQ==","signatures":[{"sig":"MEQCIHmSanpoP4r8/q49W8LRgQYfwVOHMmywPvYxftmZ1H3IAiBgP6BROCUpHO7B/YucddYuWBNZGw+4JCg8oMjfPMn7rw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":217587},"main":"lib-commonjs/index.js","module":"lib/index.js","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"a697cff7f93952d4c31fb135812a7fa3a19e2aee","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","prerelease"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.2.4","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.19.1","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.224","@fluentui/react-theme":"^9.1.19","@fluentui/react-tabster":"^9.19.5","@fluentui/react-utilities":"^9.18.5","@fluentui/react-jsx-runtime":"^9.0.34","@fluentui/react-shared-contexts":"^9.15.2","@fluentui/react-context-selector":"^9.1.56"},"_hasShrinkwrap":false,"devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"*","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"*"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.2.0_1711622627793_0.4681804429752938","host":"s3://npm-registry-packages"}},"0.0.0-nightly-20240329-0405.1":{"name":"@fluentui/react-swatch-picker-preview","version":"0.0.0-nightly-20240329-0405.1","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.0.0-nightly-20240329-0405.1","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"58d1c19233fe5d99f875bfb8825b127fb7cae9b6","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.0.0-nightly-20240329-0405.1.tgz","fileCount":4,"integrity":"sha512-wd64FStHUw4AetMywQqJJPhYJwuP8sUcgRlYke9lbrIKuNuz4R1PnE1RDlg9DVrai5fGEHyFli+zxq33hK8eaQ==","signatures":[{"sig":"MEUCIEIRSUZA/zQWM5IX9W9E8hGICUu5f/U23Jc314WQTSXTAiEA2CmLUZB+j5CrfPuGpyaqbKYKM7aTlxON2RoAoAq2mag=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8747},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-swatch-picker-preview\n\n**React Swatch Picker components for [Fluent UI React](https://react.fluentui.dev/)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\nThe SwatchPicker is used in graphic and text editors. It allows user to choose a needed color, image or pattern.\nThe SwatchPicker can be integrated within a popover or used as a standalone feature.\n\n## Usage\n\nTo import React SwatchPicker components:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n```\n\nSimple example of SwatchPicker Usage:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n\nexport const App = () => {\n  const [selectedValue, setSelectedValue] = React.useState('00B053');\n  const [selectedColor, setSelectedColor] = React.useState('#00B053');\n  const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {\n    setSelectedValue(data.selectedValue);\n    setSelectedColor(data.selectedColor);\n  };\n\n  return (\n    <>\n      <SwatchPicker aria-label=\"SwatchPicker default\" selectedValue={selectedValue} onSelectionChange={handleSelect}>\n        <ColorSwatch color=\"#FF1921\" value=\"FF1921\" aria-label=\"red\" />\n        <ColorSwatch color=\"#FFC12E\" value=\"FFC12E\" aria-label=\"orange\" />\n        <ColorSwatch color=\"#FEFF37\" value=\"FEFF37\" aria-label=\"yellow\" />\n        <ColorSwatch disabled color=\"#90D057\" value=\"90D057\" aria-label=\"light green\" />\n        <ColorSwatch color=\"#00B053\" value=\"00B053\" aria-label=\"green\" />\n        <ColorSwatch color=\"#00AFED\" value=\"00AFED\" aria-label=\"light blue\" />\n        <ColorSwatch color=\"#006EBD\" value=\"006EBD\" aria-label=\"blue\" />\n        <ColorSwatch color=\"#011F5E\" value=\"011F5E\" aria-label=\"dark blue\" />\n        <ColorSwatch color=\"#712F9E\" value=\"712F9E\" aria-label=\"purple\" />\n      </SwatchPicker>\n\n      <div\n        style={{\n          backgroundColor: selectedColor,\n        }}\n      />\n    </>\n  );\n};\n```\n\n## Specification\n\nSee the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.\n\n## API\n\nFor information about the components, please refer to the API documentation.\n","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"83c02b31f67e8786438f914715ef6c6415969f53","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","bundle-size":"monosize measure","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.2.4","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.19.1","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.224","@fluentui/react-theme":"0.0.0-nightly-20240329-0405.1","@fluentui/react-tabster":"0.0.0-nightly-20240329-0405.1","@fluentui/react-utilities":"0.0.0-nightly-20240329-0405.1","@fluentui/react-jsx-runtime":"0.0.0-nightly-20240329-0405.1","@fluentui/react-shared-contexts":"0.0.0-nightly-20240329-0405.1","@fluentui/react-context-selector":"0.0.0-nightly-20240329-0405.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"0.0.0-nightly-20240329-0405.1","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"0.0.0-nightly-20240329-0405.1"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.0.0-nightly-20240329-0405.1_1711686261757_0.2540496881601366","host":"s3://npm-registry-packages"}},"0.0.0-nightly-20240401-0408.1":{"name":"@fluentui/react-swatch-picker-preview","version":"0.0.0-nightly-20240401-0408.1","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.0.0-nightly-20240401-0408.1","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"027952780c112ad34c7f17d47f3ba62eb86c22f3","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.0.0-nightly-20240401-0408.1.tgz","fileCount":4,"integrity":"sha512-8Xj+8EFW8L9AJog6TLAna86mt0pB2wl2AEZQ658KiXkYRUkNplNNG2hpZXuVVwCYIByAZ4DnLhzVhOkxKtpv4Q==","signatures":[{"sig":"MEYCIQCYwZH2wlOttKtq1hte/FMYqMWShxvcnwx7JW2mrKST8gIhAINMidoeobPRgmZGv8/6Cb3pdZpKEy9F99FxFlvyxmGh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8747},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-swatch-picker-preview\n\n**React Swatch Picker components for [Fluent UI React](https://react.fluentui.dev/)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\nThe SwatchPicker is used in graphic and text editors. It allows user to choose a needed color, image or pattern.\nThe SwatchPicker can be integrated within a popover or used as a standalone feature.\n\n## Usage\n\nTo import React SwatchPicker components:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n```\n\nSimple example of SwatchPicker Usage:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n\nexport const App = () => {\n  const [selectedValue, setSelectedValue] = React.useState('00B053');\n  const [selectedColor, setSelectedColor] = React.useState('#00B053');\n  const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {\n    setSelectedValue(data.selectedValue);\n    setSelectedColor(data.selectedColor);\n  };\n\n  return (\n    <>\n      <SwatchPicker aria-label=\"SwatchPicker default\" selectedValue={selectedValue} onSelectionChange={handleSelect}>\n        <ColorSwatch color=\"#FF1921\" value=\"FF1921\" aria-label=\"red\" />\n        <ColorSwatch color=\"#FFC12E\" value=\"FFC12E\" aria-label=\"orange\" />\n        <ColorSwatch color=\"#FEFF37\" value=\"FEFF37\" aria-label=\"yellow\" />\n        <ColorSwatch disabled color=\"#90D057\" value=\"90D057\" aria-label=\"light green\" />\n        <ColorSwatch color=\"#00B053\" value=\"00B053\" aria-label=\"green\" />\n        <ColorSwatch color=\"#00AFED\" value=\"00AFED\" aria-label=\"light blue\" />\n        <ColorSwatch color=\"#006EBD\" value=\"006EBD\" aria-label=\"blue\" />\n        <ColorSwatch color=\"#011F5E\" value=\"011F5E\" aria-label=\"dark blue\" />\n        <ColorSwatch color=\"#712F9E\" value=\"712F9E\" aria-label=\"purple\" />\n      </SwatchPicker>\n\n      <div\n        style={{\n          backgroundColor: selectedColor,\n        }}\n      />\n    </>\n  );\n};\n```\n\n## Specification\n\nSee the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.\n\n## API\n\nFor information about the components, please refer to the API documentation.\n","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"032369404388b9151d67ba03daea14684a7fcc54","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","bundle-size":"monosize measure","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.2.4","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.19.1","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.224","@fluentui/react-theme":"0.0.0-nightly-20240401-0408.1","@fluentui/react-tabster":"0.0.0-nightly-20240401-0408.1","@fluentui/react-utilities":"0.0.0-nightly-20240401-0408.1","@fluentui/react-jsx-runtime":"0.0.0-nightly-20240401-0408.1","@fluentui/react-shared-contexts":"0.0.0-nightly-20240401-0408.1","@fluentui/react-context-selector":"0.0.0-nightly-20240401-0408.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"0.0.0-nightly-20240401-0408.1","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"0.0.0-nightly-20240401-0408.1"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.0.0-nightly-20240401-0408.1_1711945563358_0.2753530911139388","host":"s3://npm-registry-packages"}},"0.0.0-nightly-20240402-0405.1":{"name":"@fluentui/react-swatch-picker-preview","version":"0.0.0-nightly-20240402-0405.1","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.0.0-nightly-20240402-0405.1","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"808f066e9592d64ba99efbe1da6dc655620490db","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.0.0-nightly-20240402-0405.1.tgz","fileCount":4,"integrity":"sha512-rrYfpoboFKM9/L0+XDwRFm1XOc9PtXAulNDe2htzc3BArxHLZ37Qj6M5Ui3EOG7o+J1L/YwIEj0TcUtE0AePYQ==","signatures":[{"sig":"MEUCIQDrCnWiVO5ACdZv6TnQzmM5nijlOF+ZCH9BBo/2QVk6RAIgLHJzB7SuCUX4cJ6S3nPDyTolFn/F+6rumd71TuanQCg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8747},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-swatch-picker-preview\n\n**React Swatch Picker components for [Fluent UI React](https://react.fluentui.dev/)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\nThe SwatchPicker is used in graphic and text editors. It allows user to choose a needed color, image or pattern.\nThe SwatchPicker can be integrated within a popover or used as a standalone feature.\n\n## Usage\n\nTo import React SwatchPicker components:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n```\n\nSimple example of SwatchPicker Usage:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n\nexport const App = () => {\n  const [selectedValue, setSelectedValue] = React.useState('00B053');\n  const [selectedColor, setSelectedColor] = React.useState('#00B053');\n  const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {\n    setSelectedValue(data.selectedValue);\n    setSelectedColor(data.selectedColor);\n  };\n\n  return (\n    <>\n      <SwatchPicker aria-label=\"SwatchPicker default\" selectedValue={selectedValue} onSelectionChange={handleSelect}>\n        <ColorSwatch color=\"#FF1921\" value=\"FF1921\" aria-label=\"red\" />\n        <ColorSwatch color=\"#FFC12E\" value=\"FFC12E\" aria-label=\"orange\" />\n        <ColorSwatch color=\"#FEFF37\" value=\"FEFF37\" aria-label=\"yellow\" />\n        <ColorSwatch disabled color=\"#90D057\" value=\"90D057\" aria-label=\"light green\" />\n        <ColorSwatch color=\"#00B053\" value=\"00B053\" aria-label=\"green\" />\n        <ColorSwatch color=\"#00AFED\" value=\"00AFED\" aria-label=\"light blue\" />\n        <ColorSwatch color=\"#006EBD\" value=\"006EBD\" aria-label=\"blue\" />\n        <ColorSwatch color=\"#011F5E\" value=\"011F5E\" aria-label=\"dark blue\" />\n        <ColorSwatch color=\"#712F9E\" value=\"712F9E\" aria-label=\"purple\" />\n      </SwatchPicker>\n\n      <div\n        style={{\n          backgroundColor: selectedColor,\n        }}\n      />\n    </>\n  );\n};\n```\n\n## Specification\n\nSee the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.\n\n## API\n\nFor information about the components, please refer to the API documentation.\n","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"383b07c263b320e9c5e159896e3a3b82c94e3e94","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","bundle-size":"monosize measure","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.2.4","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.19.1","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.224","@fluentui/react-theme":"0.0.0-nightly-20240402-0405.1","@fluentui/react-tabster":"0.0.0-nightly-20240402-0405.1","@fluentui/react-utilities":"0.0.0-nightly-20240402-0405.1","@fluentui/react-jsx-runtime":"0.0.0-nightly-20240402-0405.1","@fluentui/react-shared-contexts":"0.0.0-nightly-20240402-0405.1","@fluentui/react-context-selector":"0.0.0-nightly-20240402-0405.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"0.0.0-nightly-20240402-0405.1","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"0.0.0-nightly-20240402-0405.1"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.0.0-nightly-20240402-0405.1_1712032076621_0.22810828509529868","host":"s3://npm-registry-packages"}},"0.2.1":{"name":"@fluentui/react-swatch-picker-preview","version":"0.2.1","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.2.1","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"d283258e05b8ca7230ea64fcfc413e1f56b844a6","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.2.1.tgz","fileCount":129,"integrity":"sha512-Z/XXFcPEkdMUcG/DweNmKwPvkI6ss1gjBSstkk5bsRC8x+eCHsSOf/yMGLM3TELLLlewZHuJSqIuDY+yyZ64/g==","signatures":[{"sig":"MEUCIQD8qQpq/eUCoyLUdK+FYw7qvK9ADudFrw8W7lc9BQ+T8gIgCj99Y9NEzzm7Ln/QgkwQUfx7tyx6kPimDzcR3/8Ymv8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":218547},"main":"lib-commonjs/index.js","module":"lib/index.js","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"39be3880226fd063eaeb69574bf2f646fbb785c9","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","bundle-size":"monosize measure","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","prerelease"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.2.4","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.19.1","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.224","@fluentui/react-theme":"^9.1.19","@fluentui/react-tabster":"^9.19.6","@fluentui/react-utilities":"^9.18.6","@fluentui/react-jsx-runtime":"^9.0.35","@fluentui/react-shared-contexts":"^9.16.0","@fluentui/react-context-selector":"^9.1.57"},"_hasShrinkwrap":false,"devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"*","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"*"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.2.1_1712050964222_0.8694670032912666","host":"s3://npm-registry-packages"}},"0.0.0-nightly-20240403-0405.1":{"name":"@fluentui/react-swatch-picker-preview","version":"0.0.0-nightly-20240403-0405.1","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.0.0-nightly-20240403-0405.1","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"13b17b48253cffd740960d3958a20303bd927095","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.0.0-nightly-20240403-0405.1.tgz","fileCount":4,"integrity":"sha512-86QQh8WzLUsx0pvH/ZtQmIwnIarlREB91EOFk1CcYqNOcDMdgl4u3cHY0JdLaqZb4eYvfotytpm03PkLRWc7pg==","signatures":[{"sig":"MEUCIQDgfJ8BZS6sNYE17YHeMSVXhFbUQ8fshZVC0f0ePkdhvQIgX8rzGJLOJZo0ITdaoVfM7wcDsi1sk4t/gE4foEAampM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9668},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-swatch-picker-preview\n\n**React Swatch Picker components for [Fluent UI React](https://react.fluentui.dev/)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\nThe SwatchPicker is used in graphic and text editors. It allows user to choose a needed color, image or pattern.\nThe SwatchPicker can be integrated within a popover or used as a standalone feature.\n\n## Usage\n\nTo import React SwatchPicker components:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n```\n\nSimple example of SwatchPicker Usage:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n\nexport const App = () => {\n  const [selectedValue, setSelectedValue] = React.useState('00B053');\n  const [selectedColor, setSelectedColor] = React.useState('#00B053');\n  const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {\n    setSelectedValue(data.selectedValue);\n    setSelectedColor(data.selectedColor);\n  };\n\n  return (\n    <>\n      <SwatchPicker aria-label=\"SwatchPicker default\" selectedValue={selectedValue} onSelectionChange={handleSelect}>\n        <ColorSwatch color=\"#FF1921\" value=\"FF1921\" aria-label=\"red\" />\n        <ColorSwatch color=\"#FFC12E\" value=\"FFC12E\" aria-label=\"orange\" />\n        <ColorSwatch color=\"#FEFF37\" value=\"FEFF37\" aria-label=\"yellow\" />\n        <ColorSwatch disabled color=\"#90D057\" value=\"90D057\" aria-label=\"light green\" />\n        <ColorSwatch color=\"#00B053\" value=\"00B053\" aria-label=\"green\" />\n        <ColorSwatch color=\"#00AFED\" value=\"00AFED\" aria-label=\"light blue\" />\n        <ColorSwatch color=\"#006EBD\" value=\"006EBD\" aria-label=\"blue\" />\n        <ColorSwatch color=\"#011F5E\" value=\"011F5E\" aria-label=\"dark blue\" />\n        <ColorSwatch color=\"#712F9E\" value=\"712F9E\" aria-label=\"purple\" />\n      </SwatchPicker>\n\n      <div\n        style={{\n          backgroundColor: selectedColor,\n        }}\n      />\n    </>\n  );\n};\n```\n\n## Specification\n\nSee the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.\n\n## API\n\nFor information about the components, please refer to the API documentation.\n","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"f279a999470c9691c5a9fdcd26f528635aa562ea","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","bundle-size":"monosize measure","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.2.4","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.19.1","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.224","@fluentui/react-theme":"0.0.0-nightly-20240403-0405.1","@fluentui/react-tabster":"0.0.0-nightly-20240403-0405.1","@fluentui/react-utilities":"0.0.0-nightly-20240403-0405.1","@fluentui/react-jsx-runtime":"0.0.0-nightly-20240403-0405.1","@fluentui/react-shared-contexts":"0.0.0-nightly-20240403-0405.1","@fluentui/react-context-selector":"0.0.0-nightly-20240403-0405.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"0.0.0-nightly-20240403-0405.1","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"0.0.0-nightly-20240403-0405.1"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.0.0-nightly-20240403-0405.1_1712118209386_0.22495447801445123","host":"s3://npm-registry-packages"}},"0.0.0-nightly-20240404-0406.1":{"name":"@fluentui/react-swatch-picker-preview","version":"0.0.0-nightly-20240404-0406.1","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.0.0-nightly-20240404-0406.1","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"41b47b01a41e433dc068cb16f16706816478fb54","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.0.0-nightly-20240404-0406.1.tgz","fileCount":4,"integrity":"sha512-JRc/ZCbfGQKWc3QYaq5Qb/9BfDtg9aHEa8yJUgu5Dbj0bI187q4k3HNrpHMpAJHnGz6/Pi2JvUT6nrSeIlxUWw==","signatures":[{"sig":"MEQCIE1LhS2QehjU5aaWnftlBN8+VZ8SCt1nIF8lSJ171lXaAiBeufG4BUqU+nvySNwQ5RAHdr8Gqrzw9l+QLQemML2wIA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9668},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-swatch-picker-preview\n\n**React Swatch Picker components for [Fluent UI React](https://react.fluentui.dev/)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\nThe SwatchPicker is used in graphic and text editors. It allows user to choose a needed color, image or pattern.\nThe SwatchPicker can be integrated within a popover or used as a standalone feature.\n\n## Usage\n\nTo import React SwatchPicker components:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n```\n\nSimple example of SwatchPicker Usage:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n\nexport const App = () => {\n  const [selectedValue, setSelectedValue] = React.useState('00B053');\n  const [selectedColor, setSelectedColor] = React.useState('#00B053');\n  const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {\n    setSelectedValue(data.selectedValue);\n    setSelectedColor(data.selectedColor);\n  };\n\n  return (\n    <>\n      <SwatchPicker aria-label=\"SwatchPicker default\" selectedValue={selectedValue} onSelectionChange={handleSelect}>\n        <ColorSwatch color=\"#FF1921\" value=\"FF1921\" aria-label=\"red\" />\n        <ColorSwatch color=\"#FFC12E\" value=\"FFC12E\" aria-label=\"orange\" />\n        <ColorSwatch color=\"#FEFF37\" value=\"FEFF37\" aria-label=\"yellow\" />\n        <ColorSwatch disabled color=\"#90D057\" value=\"90D057\" aria-label=\"light green\" />\n        <ColorSwatch color=\"#00B053\" value=\"00B053\" aria-label=\"green\" />\n        <ColorSwatch color=\"#00AFED\" value=\"00AFED\" aria-label=\"light blue\" />\n        <ColorSwatch color=\"#006EBD\" value=\"006EBD\" aria-label=\"blue\" />\n        <ColorSwatch color=\"#011F5E\" value=\"011F5E\" aria-label=\"dark blue\" />\n        <ColorSwatch color=\"#712F9E\" value=\"712F9E\" aria-label=\"purple\" />\n      </SwatchPicker>\n\n      <div\n        style={{\n          backgroundColor: selectedColor,\n        }}\n      />\n    </>\n  );\n};\n```\n\n## Specification\n\nSee the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.\n\n## API\n\nFor information about the components, please refer to the API documentation.\n","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"37528d970be402ffd3370a157042fdd6603571ab","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","bundle-size":"monosize measure","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.2.4","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.19.1","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.224","@fluentui/react-theme":"0.0.0-nightly-20240404-0406.1","@fluentui/react-tabster":"0.0.0-nightly-20240404-0406.1","@fluentui/react-utilities":"0.0.0-nightly-20240404-0406.1","@fluentui/react-jsx-runtime":"0.0.0-nightly-20240404-0406.1","@fluentui/react-shared-contexts":"0.0.0-nightly-20240404-0406.1","@fluentui/react-context-selector":"0.0.0-nightly-20240404-0406.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"0.0.0-nightly-20240404-0406.1","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"0.0.0-nightly-20240404-0406.1"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.0.0-nightly-20240404-0406.1_1712204824940_0.31815595656388385","host":"s3://npm-registry-packages"}},"0.0.0-nightly-20240405-0409.1":{"name":"@fluentui/react-swatch-picker-preview","version":"0.0.0-nightly-20240405-0409.1","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.0.0-nightly-20240405-0409.1","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"3612455f75ddc8b917e52ce2facb502d21494737","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.0.0-nightly-20240405-0409.1.tgz","fileCount":4,"integrity":"sha512-Fa+lEo7yI/o/35LeRiMY1VGg3Q0+AI+wi2MQ+TyXjY8KCSUWRlkMCPi1ketbLGxBvTZM1Bfos72SQetXfi8CQw==","signatures":[{"sig":"MEYCIQCPhncyGzXqwN5kwIYGhdZYaKRy3GyaE+kd6o4JCb/ZzgIhAOMLhTM62u/CBuNAHoBMfrmP38PWQoWJUS1pw3qfSG+n","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9668},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-swatch-picker-preview\n\n**React Swatch Picker components for [Fluent UI React](https://react.fluentui.dev/)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\nThe SwatchPicker is used in graphic and text editors. It allows user to choose a needed color, image or pattern.\nThe SwatchPicker can be integrated within a popover or used as a standalone feature.\n\n## Usage\n\nTo import React SwatchPicker components:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n```\n\nSimple example of SwatchPicker Usage:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n\nexport const App = () => {\n  const [selectedValue, setSelectedValue] = React.useState('00B053');\n  const [selectedColor, setSelectedColor] = React.useState('#00B053');\n  const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {\n    setSelectedValue(data.selectedValue);\n    setSelectedColor(data.selectedColor);\n  };\n\n  return (\n    <>\n      <SwatchPicker aria-label=\"SwatchPicker default\" selectedValue={selectedValue} onSelectionChange={handleSelect}>\n        <ColorSwatch color=\"#FF1921\" value=\"FF1921\" aria-label=\"red\" />\n        <ColorSwatch color=\"#FFC12E\" value=\"FFC12E\" aria-label=\"orange\" />\n        <ColorSwatch color=\"#FEFF37\" value=\"FEFF37\" aria-label=\"yellow\" />\n        <ColorSwatch disabled color=\"#90D057\" value=\"90D057\" aria-label=\"light green\" />\n        <ColorSwatch color=\"#00B053\" value=\"00B053\" aria-label=\"green\" />\n        <ColorSwatch color=\"#00AFED\" value=\"00AFED\" aria-label=\"light blue\" />\n        <ColorSwatch color=\"#006EBD\" value=\"006EBD\" aria-label=\"blue\" />\n        <ColorSwatch color=\"#011F5E\" value=\"011F5E\" aria-label=\"dark blue\" />\n        <ColorSwatch color=\"#712F9E\" value=\"712F9E\" aria-label=\"purple\" />\n      </SwatchPicker>\n\n      <div\n        style={{\n          backgroundColor: selectedColor,\n        }}\n      />\n    </>\n  );\n};\n```\n\n## Specification\n\nSee the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.\n\n## API\n\nFor information about the components, please refer to the API documentation.\n","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"fc876c8691374f93f2fb81e85bef3d187761971b","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","bundle-size":"monosize measure","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.2.4","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.19.1","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.224","@fluentui/react-theme":"0.0.0-nightly-20240405-0409.1","@fluentui/react-tabster":"0.0.0-nightly-20240405-0409.1","@fluentui/react-utilities":"0.0.0-nightly-20240405-0409.1","@fluentui/react-jsx-runtime":"0.0.0-nightly-20240405-0409.1","@fluentui/react-shared-contexts":"0.0.0-nightly-20240405-0409.1","@fluentui/react-context-selector":"0.0.0-nightly-20240405-0409.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"0.0.0-nightly-20240405-0409.1","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"0.0.0-nightly-20240405-0409.1"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.0.0-nightly-20240405-0409.1_1712291372741_0.7906842716118749","host":"s3://npm-registry-packages"}},"0.0.0-nightly-20240408-0406.1":{"name":"@fluentui/react-swatch-picker-preview","version":"0.0.0-nightly-20240408-0406.1","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.0.0-nightly-20240408-0406.1","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"4bf4da0174ae2bb506f573f8a19bf52c3825ea2a","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.0.0-nightly-20240408-0406.1.tgz","fileCount":4,"integrity":"sha512-JCkPfKrMo7Dl7LQKjJf5vvy9EobqfoW7gE6OYAIovErxYfTBFBVTlqyRgkYNdY1AuQ6kMsmHzvbph14rpXChCQ==","signatures":[{"sig":"MEYCIQCFJDCuZq4RPQdtijIRmtQaXzHIvLIEmzVMOc207XBJ1AIhAL5AyV28dOSc3gA+nzoV6W3YDbyJRmXn12CZGU9r9JBA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9668},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-swatch-picker-preview\n\n**React Swatch Picker components for [Fluent UI React](https://react.fluentui.dev/)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\nThe SwatchPicker is used in graphic and text editors. It allows user to choose a needed color, image or pattern.\nThe SwatchPicker can be integrated within a popover or used as a standalone feature.\n\n## Usage\n\nTo import React SwatchPicker components:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n```\n\nSimple example of SwatchPicker Usage:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n\nexport const App = () => {\n  const [selectedValue, setSelectedValue] = React.useState('00B053');\n  const [selectedColor, setSelectedColor] = React.useState('#00B053');\n  const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {\n    setSelectedValue(data.selectedValue);\n    setSelectedColor(data.selectedColor);\n  };\n\n  return (\n    <>\n      <SwatchPicker aria-label=\"SwatchPicker default\" selectedValue={selectedValue} onSelectionChange={handleSelect}>\n        <ColorSwatch color=\"#FF1921\" value=\"FF1921\" aria-label=\"red\" />\n        <ColorSwatch color=\"#FFC12E\" value=\"FFC12E\" aria-label=\"orange\" />\n        <ColorSwatch color=\"#FEFF37\" value=\"FEFF37\" aria-label=\"yellow\" />\n        <ColorSwatch disabled color=\"#90D057\" value=\"90D057\" aria-label=\"light green\" />\n        <ColorSwatch color=\"#00B053\" value=\"00B053\" aria-label=\"green\" />\n        <ColorSwatch color=\"#00AFED\" value=\"00AFED\" aria-label=\"light blue\" />\n        <ColorSwatch color=\"#006EBD\" value=\"006EBD\" aria-label=\"blue\" />\n        <ColorSwatch color=\"#011F5E\" value=\"011F5E\" aria-label=\"dark blue\" />\n        <ColorSwatch color=\"#712F9E\" value=\"712F9E\" aria-label=\"purple\" />\n      </SwatchPicker>\n\n      <div\n        style={{\n          backgroundColor: selectedColor,\n        }}\n      />\n    </>\n  );\n};\n```\n\n## Specification\n\nSee the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.\n\n## API\n\nFor information about the components, please refer to the API documentation.\n","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"c3e6c2ea530ec065ed5ca34249dff30ce7880bed","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","bundle-size":"monosize measure","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.2.4","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.19.1","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.224","@fluentui/react-theme":"0.0.0-nightly-20240408-0406.1","@fluentui/react-tabster":"0.0.0-nightly-20240408-0406.1","@fluentui/react-utilities":"0.0.0-nightly-20240408-0406.1","@fluentui/react-jsx-runtime":"0.0.0-nightly-20240408-0406.1","@fluentui/react-shared-contexts":"0.0.0-nightly-20240408-0406.1","@fluentui/react-context-selector":"0.0.0-nightly-20240408-0406.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"0.0.0-nightly-20240408-0406.1","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"0.0.0-nightly-20240408-0406.1"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.0.0-nightly-20240408-0406.1_1712550336532_0.23181683940632758","host":"s3://npm-registry-packages"}},"0.0.0-nightly-20240409-0405.1":{"name":"@fluentui/react-swatch-picker-preview","version":"0.0.0-nightly-20240409-0405.1","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.0.0-nightly-20240409-0405.1","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"00a3bd960033b1ed777cb6f39a06a1901f907efb","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.0.0-nightly-20240409-0405.1.tgz","fileCount":4,"integrity":"sha512-BMWM5NTgjQdpdcT+L/7hzgmn5LI5FtnsS6+AwIXvUEuiDqadcTisvDb3Ze4FwCIHxYaSns3vvu2epLfpVjIyLA==","signatures":[{"sig":"MEUCIQCFh1WBF/H+z8ePz+Sk4A0m3XBSo9NO7hkOAML+PfxIdQIgBKxQA5F3OmHzVO/80D2UQB0zsl2H+dJ4OA6w5fsl8Jo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9668},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-swatch-picker-preview\n\n**React Swatch Picker components for [Fluent UI React](https://react.fluentui.dev/)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\nThe SwatchPicker is used in graphic and text editors. It allows user to choose a needed color, image or pattern.\nThe SwatchPicker can be integrated within a popover or used as a standalone feature.\n\n## Usage\n\nTo import React SwatchPicker components:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n```\n\nSimple example of SwatchPicker Usage:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n\nexport const App = () => {\n  const [selectedValue, setSelectedValue] = React.useState('00B053');\n  const [selectedColor, setSelectedColor] = React.useState('#00B053');\n  const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {\n    setSelectedValue(data.selectedValue);\n    setSelectedColor(data.selectedColor);\n  };\n\n  return (\n    <>\n      <SwatchPicker aria-label=\"SwatchPicker default\" selectedValue={selectedValue} onSelectionChange={handleSelect}>\n        <ColorSwatch color=\"#FF1921\" value=\"FF1921\" aria-label=\"red\" />\n        <ColorSwatch color=\"#FFC12E\" value=\"FFC12E\" aria-label=\"orange\" />\n        <ColorSwatch color=\"#FEFF37\" value=\"FEFF37\" aria-label=\"yellow\" />\n        <ColorSwatch disabled color=\"#90D057\" value=\"90D057\" aria-label=\"light green\" />\n        <ColorSwatch color=\"#00B053\" value=\"00B053\" aria-label=\"green\" />\n        <ColorSwatch color=\"#00AFED\" value=\"00AFED\" aria-label=\"light blue\" />\n        <ColorSwatch color=\"#006EBD\" value=\"006EBD\" aria-label=\"blue\" />\n        <ColorSwatch color=\"#011F5E\" value=\"011F5E\" aria-label=\"dark blue\" />\n        <ColorSwatch color=\"#712F9E\" value=\"712F9E\" aria-label=\"purple\" />\n      </SwatchPicker>\n\n      <div\n        style={{\n          backgroundColor: selectedColor,\n        }}\n      />\n    </>\n  );\n};\n```\n\n## Specification\n\nSee the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.\n\n## API\n\nFor information about the components, please refer to the API documentation.\n","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"c706c4e6fef32968118c128d19500b9c82163e9d","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","bundle-size":"monosize measure","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.2.4","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.19.1","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.224","@fluentui/react-theme":"0.0.0-nightly-20240409-0405.1","@fluentui/react-tabster":"0.0.0-nightly-20240409-0405.1","@fluentui/react-utilities":"0.0.0-nightly-20240409-0405.1","@fluentui/react-jsx-runtime":"0.0.0-nightly-20240409-0405.1","@fluentui/react-shared-contexts":"0.0.0-nightly-20240409-0405.1","@fluentui/react-context-selector":"0.0.0-nightly-20240409-0405.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"0.0.0-nightly-20240409-0405.1","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"0.0.0-nightly-20240409-0405.1"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.0.0-nightly-20240409-0405.1_1712636590089_0.6469899650683473","host":"s3://npm-registry-packages"}},"0.0.0-nightly-20240411-0405.1":{"name":"@fluentui/react-swatch-picker-preview","version":"0.0.0-nightly-20240411-0405.1","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.0.0-nightly-20240411-0405.1","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"13a5defdb6d3ed7a336d187fb68203efd49782ef","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.0.0-nightly-20240411-0405.1.tgz","fileCount":4,"integrity":"sha512-jGZILrsGGTCTiqmZhc4fw0largJLSdZp5DnpOlyXKgXcdV1yA0wyMJkjnLWap7duK2bjQovaInoKZjggJaZCjg==","signatures":[{"sig":"MEUCIQDK4ZT6J0RdG/5J8kRGK/h0liCsrm5e75Nz4lyIiemlJgIgJMGxwXowN8Gmy8wSAXM6xO1CSXzUh4mFODVQ/RTfv5w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9668},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-swatch-picker-preview\n\n**React Swatch Picker components for [Fluent UI React](https://react.fluentui.dev/)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\nThe SwatchPicker is used in graphic and text editors. It allows user to choose a needed color, image or pattern.\nThe SwatchPicker can be integrated within a popover or used as a standalone feature.\n\n## Usage\n\nTo import React SwatchPicker components:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n```\n\nSimple example of SwatchPicker Usage:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n\nexport const App = () => {\n  const [selectedValue, setSelectedValue] = React.useState('00B053');\n  const [selectedColor, setSelectedColor] = React.useState('#00B053');\n  const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {\n    setSelectedValue(data.selectedValue);\n    setSelectedColor(data.selectedColor);\n  };\n\n  return (\n    <>\n      <SwatchPicker aria-label=\"SwatchPicker default\" selectedValue={selectedValue} onSelectionChange={handleSelect}>\n        <ColorSwatch color=\"#FF1921\" value=\"FF1921\" aria-label=\"red\" />\n        <ColorSwatch color=\"#FFC12E\" value=\"FFC12E\" aria-label=\"orange\" />\n        <ColorSwatch color=\"#FEFF37\" value=\"FEFF37\" aria-label=\"yellow\" />\n        <ColorSwatch disabled color=\"#90D057\" value=\"90D057\" aria-label=\"light green\" />\n        <ColorSwatch color=\"#00B053\" value=\"00B053\" aria-label=\"green\" />\n        <ColorSwatch color=\"#00AFED\" value=\"00AFED\" aria-label=\"light blue\" />\n        <ColorSwatch color=\"#006EBD\" value=\"006EBD\" aria-label=\"blue\" />\n        <ColorSwatch color=\"#011F5E\" value=\"011F5E\" aria-label=\"dark blue\" />\n        <ColorSwatch color=\"#712F9E\" value=\"712F9E\" aria-label=\"purple\" />\n      </SwatchPicker>\n\n      <div\n        style={{\n          backgroundColor: selectedColor,\n        }}\n      />\n    </>\n  );\n};\n```\n\n## Specification\n\nSee the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.\n\n## API\n\nFor information about the components, please refer to the API documentation.\n","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"af2e4b609b1b648dc559fece22c0005fcb49dc03","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","bundle-size":"monosize measure","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.2.4","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.19.1","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.224","@fluentui/react-theme":"0.0.0-nightly-20240411-0405.1","@fluentui/react-tabster":"0.0.0-nightly-20240411-0405.1","@fluentui/react-utilities":"0.0.0-nightly-20240411-0405.1","@fluentui/react-jsx-runtime":"0.0.0-nightly-20240411-0405.1","@fluentui/react-shared-contexts":"0.0.0-nightly-20240411-0405.1","@fluentui/react-context-selector":"0.0.0-nightly-20240411-0405.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"0.0.0-nightly-20240411-0405.1","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"0.0.0-nightly-20240411-0405.1"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.0.0-nightly-20240411-0405.1_1712809745657_0.6015393201126855","host":"s3://npm-registry-packages"}},"0.0.0-nightly-20240415-0407.1":{"name":"@fluentui/react-swatch-picker-preview","version":"0.0.0-nightly-20240415-0407.1","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.0.0-nightly-20240415-0407.1","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"2ef52d7884f0d3acffd618419129ff06997d96e0","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.0.0-nightly-20240415-0407.1.tgz","fileCount":4,"integrity":"sha512-R+KHOvZLLl+FR2+4gA6dDfP/jXCP/BIcXIq6/WgjOceScpjr2LeE4rC3oiW2C/9qwVuyhkle1QE7IHINrxv2qA==","signatures":[{"sig":"MEQCIBnIICBQbGGSC/JiCrvcaS4QDzSWjkgkZoOwpffIFWfoAiA5JAhJwsuXFQ31XWnXXRsA+kf1AXFl7MWWUXs7YcKYZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9751},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-swatch-picker-preview\n\n**React Swatch Picker components for [Fluent UI React](https://react.fluentui.dev/)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\nThe SwatchPicker is used in graphic and text editors. It allows user to choose a needed color, image or pattern.\nThe SwatchPicker can be integrated within a popover or used as a standalone feature.\n\n## Usage\n\nTo import React SwatchPicker components:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n```\n\nSimple example of SwatchPicker Usage:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n\nexport const App = () => {\n  const [selectedValue, setSelectedValue] = React.useState('00B053');\n  const [selectedColor, setSelectedColor] = React.useState('#00B053');\n  const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {\n    setSelectedValue(data.selectedValue);\n    setSelectedColor(data.selectedColor);\n  };\n\n  return (\n    <>\n      <SwatchPicker aria-label=\"SwatchPicker default\" selectedValue={selectedValue} onSelectionChange={handleSelect}>\n        <ColorSwatch color=\"#FF1921\" value=\"FF1921\" aria-label=\"red\" />\n        <ColorSwatch color=\"#FFC12E\" value=\"FFC12E\" aria-label=\"orange\" />\n        <ColorSwatch color=\"#FEFF37\" value=\"FEFF37\" aria-label=\"yellow\" />\n        <ColorSwatch disabled color=\"#90D057\" value=\"90D057\" aria-label=\"light green\" />\n        <ColorSwatch color=\"#00B053\" value=\"00B053\" aria-label=\"green\" />\n        <ColorSwatch color=\"#00AFED\" value=\"00AFED\" aria-label=\"light blue\" />\n        <ColorSwatch color=\"#006EBD\" value=\"006EBD\" aria-label=\"blue\" />\n        <ColorSwatch color=\"#011F5E\" value=\"011F5E\" aria-label=\"dark blue\" />\n        <ColorSwatch color=\"#712F9E\" value=\"712F9E\" aria-label=\"purple\" />\n      </SwatchPicker>\n\n      <div\n        style={{\n          backgroundColor: selectedColor,\n        }}\n      />\n    </>\n  );\n};\n```\n\n## Specification\n\nSee the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.\n\n## API\n\nFor information about the components, please refer to the [API documentation](https://react.fluentui.dev/?path=/docs/preview-components-swatchpicker--default).\n","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"dec4821f1d3c18316aa5e0306b6ad1193dccdcc5","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","bundle-size":"monosize measure","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.5.0","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.20.1","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.224","@fluentui/react-theme":"0.0.0-nightly-20240415-0407.1","@fluentui/react-tabster":"0.0.0-nightly-20240415-0407.1","@fluentui/react-utilities":"0.0.0-nightly-20240415-0407.1","@fluentui/react-jsx-runtime":"0.0.0-nightly-20240415-0407.1","@fluentui/react-shared-contexts":"0.0.0-nightly-20240415-0407.1","@fluentui/react-context-selector":"0.0.0-nightly-20240415-0407.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"0.0.0-nightly-20240415-0407.1","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"0.0.0-nightly-20240415-0407.1"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.0.0-nightly-20240415-0407.1_1713155008552_0.5593009341374053","host":"s3://npm-registry-packages"}},"0.0.0-nightly-20240417-0406.1":{"name":"@fluentui/react-swatch-picker-preview","version":"0.0.0-nightly-20240417-0406.1","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.0.0-nightly-20240417-0406.1","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"84fdaa7b633721c8ab1a84c0ced9326673d82e95","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.0.0-nightly-20240417-0406.1.tgz","fileCount":4,"integrity":"sha512-9UQn3J9CUrh/srMgs3xbbjL5wEy+cdaQlwX4/n6Ps6nzo4aXMWgdbiCvBo/ssf6l8n1QHb7Opd1Yc9SVCRvRYw==","signatures":[{"sig":"MEUCIQClxN/OYusG1/3DBc7y6xQLtKYZ+dWiqYqEmH7f7RPMaAIgQUo2JsNmoms/HPW/XM6fPPiUc4ycYEoVPISRCsTObnM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9751},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-swatch-picker-preview\n\n**React Swatch Picker components for [Fluent UI React](https://react.fluentui.dev/)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\nThe SwatchPicker is used in graphic and text editors. It allows user to choose a needed color, image or pattern.\nThe SwatchPicker can be integrated within a popover or used as a standalone feature.\n\n## Usage\n\nTo import React SwatchPicker components:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n```\n\nSimple example of SwatchPicker Usage:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n\nexport const App = () => {\n  const [selectedValue, setSelectedValue] = React.useState('00B053');\n  const [selectedColor, setSelectedColor] = React.useState('#00B053');\n  const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {\n    setSelectedValue(data.selectedValue);\n    setSelectedColor(data.selectedColor);\n  };\n\n  return (\n    <>\n      <SwatchPicker aria-label=\"SwatchPicker default\" selectedValue={selectedValue} onSelectionChange={handleSelect}>\n        <ColorSwatch color=\"#FF1921\" value=\"FF1921\" aria-label=\"red\" />\n        <ColorSwatch color=\"#FFC12E\" value=\"FFC12E\" aria-label=\"orange\" />\n        <ColorSwatch color=\"#FEFF37\" value=\"FEFF37\" aria-label=\"yellow\" />\n        <ColorSwatch disabled color=\"#90D057\" value=\"90D057\" aria-label=\"light green\" />\n        <ColorSwatch color=\"#00B053\" value=\"00B053\" aria-label=\"green\" />\n        <ColorSwatch color=\"#00AFED\" value=\"00AFED\" aria-label=\"light blue\" />\n        <ColorSwatch color=\"#006EBD\" value=\"006EBD\" aria-label=\"blue\" />\n        <ColorSwatch color=\"#011F5E\" value=\"011F5E\" aria-label=\"dark blue\" />\n        <ColorSwatch color=\"#712F9E\" value=\"712F9E\" aria-label=\"purple\" />\n      </SwatchPicker>\n\n      <div\n        style={{\n          backgroundColor: selectedColor,\n        }}\n      />\n    </>\n  );\n};\n```\n\n## Specification\n\nSee the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.\n\n## API\n\nFor information about the components, please refer to the [API documentation](https://react.fluentui.dev/?path=/docs/preview-components-swatchpicker--default).\n","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"712993a9113cfc4ad56230cb890ff89c70010d26","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","bundle-size":"monosize measure","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.5.0","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.20.1","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.224","@fluentui/react-theme":"0.0.0-nightly-20240417-0406.1","@fluentui/react-tabster":"0.0.0-nightly-20240417-0406.1","@fluentui/react-utilities":"0.0.0-nightly-20240417-0406.1","@fluentui/react-jsx-runtime":"0.0.0-nightly-20240417-0406.1","@fluentui/react-shared-contexts":"0.0.0-nightly-20240417-0406.1","@fluentui/react-context-selector":"0.0.0-nightly-20240417-0406.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"0.0.0-nightly-20240417-0406.1","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"0.0.0-nightly-20240417-0406.1"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.0.0-nightly-20240417-0406.1_1713327946642_0.4827545238742077","host":"s3://npm-registry-packages"}},"0.3.0":{"name":"@fluentui/react-swatch-picker-preview","version":"0.3.0","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.3.0","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"ec323715fff18a1faf1704bd2162bd79cea29486","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.3.0.tgz","fileCount":157,"integrity":"sha512-1Q2DPpdCIzww6JW2+qUu9k6BT1Vs5u4pveOC8+kSehiSnCU022V5C1maW74y3AKk7r8YKQFXAo3bP7+3qkGgzA==","signatures":[{"sig":"MEQCIG71OYOX6LjzjcPA6fdIg2StQJoeoTScjCX7N0xxCmyNAiBYAjthFQNfJj9m+FqyyzF+JKIMdn1u6+DVrXyUbIg4nw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":262118},"main":"lib-commonjs/index.js","module":"lib/index.js","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"b888e953937a13b1135987f81abbfa909688fbe7","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","bundle-size":"monosize measure","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","prerelease"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.5.0","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.20.1","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.235","@fluentui/react-theme":"^9.1.19","@fluentui/react-tabster":"^9.20.0","@fluentui/react-utilities":"^9.18.6","@fluentui/react-jsx-runtime":"^9.0.35","@fluentui/react-shared-contexts":"^9.16.0","@fluentui/react-context-selector":"^9.1.57"},"_hasShrinkwrap":false,"devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"*","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"*"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.3.0_1713390789184_0.8156255518709936","host":"s3://npm-registry-packages"}},"0.0.0-nightly-20240418-0406.1":{"name":"@fluentui/react-swatch-picker-preview","version":"0.0.0-nightly-20240418-0406.1","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.0.0-nightly-20240418-0406.1","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"e0229ea1ec920fe067921a30871cea5762e4756f","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.0.0-nightly-20240418-0406.1.tgz","fileCount":4,"integrity":"sha512-xkIZKM3BAv0e2u8m1LRlkEzg2bsRAmLpwwss47VhEHxk+DpfOqshLBbQ8IK/ePjj87DKjBPlWCehATYlJv1kSA==","signatures":[{"sig":"MEYCIQD11FTraLTL3IwkVLp4avvayjVAy+WOvAbjJNB3LFsgVQIhALM/R3yPtTDRn91EHlueWUtytNqQhUc1E41BawRVlql1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":10750},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-swatch-picker-preview\n\n**React Swatch Picker components for [Fluent UI React](https://react.fluentui.dev/)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\nThe SwatchPicker is used in graphic and text editors. It allows user to choose a needed color, image or pattern.\nThe SwatchPicker can be integrated within a popover or used as a standalone feature.\n\n## Usage\n\nTo import React SwatchPicker components:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n```\n\nSimple example of SwatchPicker Usage:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n\nexport const App = () => {\n  const [selectedValue, setSelectedValue] = React.useState('00B053');\n  const [selectedColor, setSelectedColor] = React.useState('#00B053');\n  const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {\n    setSelectedValue(data.selectedValue);\n    setSelectedColor(data.selectedColor);\n  };\n\n  return (\n    <>\n      <SwatchPicker aria-label=\"SwatchPicker default\" selectedValue={selectedValue} onSelectionChange={handleSelect}>\n        <ColorSwatch color=\"#FF1921\" value=\"FF1921\" aria-label=\"red\" />\n        <ColorSwatch color=\"#FFC12E\" value=\"FFC12E\" aria-label=\"orange\" />\n        <ColorSwatch color=\"#FEFF37\" value=\"FEFF37\" aria-label=\"yellow\" />\n        <ColorSwatch disabled color=\"#90D057\" value=\"90D057\" aria-label=\"light green\" />\n        <ColorSwatch color=\"#00B053\" value=\"00B053\" aria-label=\"green\" />\n        <ColorSwatch color=\"#00AFED\" value=\"00AFED\" aria-label=\"light blue\" />\n        <ColorSwatch color=\"#006EBD\" value=\"006EBD\" aria-label=\"blue\" />\n        <ColorSwatch color=\"#011F5E\" value=\"011F5E\" aria-label=\"dark blue\" />\n        <ColorSwatch color=\"#712F9E\" value=\"712F9E\" aria-label=\"purple\" />\n      </SwatchPicker>\n\n      <div\n        style={{\n          backgroundColor: selectedColor,\n        }}\n      />\n    </>\n  );\n};\n```\n\n## Specification\n\nSee the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.\n\n## API\n\nFor information about the components, please refer to the [API documentation](https://react.fluentui.dev/?path=/docs/preview-components-swatchpicker--default).\n","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"d8802f618107c0946703a66d45e5e64578e6c94e","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","bundle-size":"monosize measure","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.5.0","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.20.1","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.235","@fluentui/react-theme":"0.0.0-nightly-20240418-0406.1","@fluentui/react-tabster":"0.0.0-nightly-20240418-0406.1","@fluentui/react-utilities":"0.0.0-nightly-20240418-0406.1","@fluentui/react-jsx-runtime":"0.0.0-nightly-20240418-0406.1","@fluentui/react-shared-contexts":"0.0.0-nightly-20240418-0406.1","@fluentui/react-context-selector":"0.0.0-nightly-20240418-0406.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"0.0.0-nightly-20240418-0406.1","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"0.0.0-nightly-20240418-0406.1"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.0.0-nightly-20240418-0406.1_1713414196208_0.9277731029864957","host":"s3://npm-registry-packages"}},"0.0.0-nightly-20240419-0408.1":{"name":"@fluentui/react-swatch-picker-preview","version":"0.0.0-nightly-20240419-0408.1","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.0.0-nightly-20240419-0408.1","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"a06bf22f9506f1eab47de7e280a6d750d4e6ad0f","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.0.0-nightly-20240419-0408.1.tgz","fileCount":4,"integrity":"sha512-FWo9uuVOsISISDEyitqoPdjDKiigK23uMenM1U4CtABmAgGQGpIW1IH6s7PzMAZqjL0uTRi9oS4V/Te9U21x1Q==","signatures":[{"sig":"MEQCIDo4OMzLHpzGKCLdl2MqIOhhoqwDsXRbNDuRmi7Lihz4AiAgSO9W29wyglUVxnvuZiMok5vkOILgO/btPul1L5pHzw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":10750},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-swatch-picker-preview\n\n**React Swatch Picker components for [Fluent UI React](https://react.fluentui.dev/)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\nThe SwatchPicker is used in graphic and text editors. It allows user to choose a needed color, image or pattern.\nThe SwatchPicker can be integrated within a popover or used as a standalone feature.\n\n## Usage\n\nTo import React SwatchPicker components:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n```\n\nSimple example of SwatchPicker Usage:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n\nexport const App = () => {\n  const [selectedValue, setSelectedValue] = React.useState('00B053');\n  const [selectedColor, setSelectedColor] = React.useState('#00B053');\n  const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {\n    setSelectedValue(data.selectedValue);\n    setSelectedColor(data.selectedColor);\n  };\n\n  return (\n    <>\n      <SwatchPicker aria-label=\"SwatchPicker default\" selectedValue={selectedValue} onSelectionChange={handleSelect}>\n        <ColorSwatch color=\"#FF1921\" value=\"FF1921\" aria-label=\"red\" />\n        <ColorSwatch color=\"#FFC12E\" value=\"FFC12E\" aria-label=\"orange\" />\n        <ColorSwatch color=\"#FEFF37\" value=\"FEFF37\" aria-label=\"yellow\" />\n        <ColorSwatch disabled color=\"#90D057\" value=\"90D057\" aria-label=\"light green\" />\n        <ColorSwatch color=\"#00B053\" value=\"00B053\" aria-label=\"green\" />\n        <ColorSwatch color=\"#00AFED\" value=\"00AFED\" aria-label=\"light blue\" />\n        <ColorSwatch color=\"#006EBD\" value=\"006EBD\" aria-label=\"blue\" />\n        <ColorSwatch color=\"#011F5E\" value=\"011F5E\" aria-label=\"dark blue\" />\n        <ColorSwatch color=\"#712F9E\" value=\"712F9E\" aria-label=\"purple\" />\n      </SwatchPicker>\n\n      <div\n        style={{\n          backgroundColor: selectedColor,\n        }}\n      />\n    </>\n  );\n};\n```\n\n## Specification\n\nSee the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.\n\n## API\n\nFor information about the components, please refer to the [API documentation](https://react.fluentui.dev/?path=/docs/preview-components-swatchpicker--default).\n","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"5680c3965447ca6b08258b2669a2f9fc229fc311","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","bundle-size":"monosize measure","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.5.0","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.20.1","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.235","@fluentui/react-theme":"0.0.0-nightly-20240419-0408.1","@fluentui/react-tabster":"0.0.0-nightly-20240419-0408.1","@fluentui/react-utilities":"0.0.0-nightly-20240419-0408.1","@fluentui/react-jsx-runtime":"0.0.0-nightly-20240419-0408.1","@fluentui/react-shared-contexts":"0.0.0-nightly-20240419-0408.1","@fluentui/react-context-selector":"0.0.0-nightly-20240419-0408.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"0.0.0-nightly-20240419-0408.1","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"0.0.0-nightly-20240419-0408.1"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.0.0-nightly-20240419-0408.1_1713500810711_0.6829979281319747","host":"s3://npm-registry-packages"}},"0.0.0-nightly-20240422-0407.1":{"name":"@fluentui/react-swatch-picker-preview","version":"0.0.0-nightly-20240422-0407.1","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.0.0-nightly-20240422-0407.1","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"10ed6532125e4961b48eaac7cbbd4f8bcbda102f","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.0.0-nightly-20240422-0407.1.tgz","fileCount":4,"integrity":"sha512-naRDzTqjv5X3NdCK0CBkVQEHsON2bDJiyDHA1w6mGu+VmdUo+m31Rt/SCqxLUfBPkeOYmPmtsY4yHUUTitTlzg==","signatures":[{"sig":"MEYCIQCVTSWUJMAQB9XEQaDRaE65bmfOxccRdaPHitRYTfBYuAIhAPGlB54lxZsuftJsOdDs1ZS4vvuHEd/sO2/lJpnzzThs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":10750},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-swatch-picker-preview\n\n**React Swatch Picker components for [Fluent UI React](https://react.fluentui.dev/)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\nThe SwatchPicker is used in graphic and text editors. It allows user to choose a needed color, image or pattern.\nThe SwatchPicker can be integrated within a popover or used as a standalone feature.\n\n## Usage\n\nTo import React SwatchPicker components:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n```\n\nSimple example of SwatchPicker Usage:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n\nexport const App = () => {\n  const [selectedValue, setSelectedValue] = React.useState('00B053');\n  const [selectedColor, setSelectedColor] = React.useState('#00B053');\n  const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {\n    setSelectedValue(data.selectedValue);\n    setSelectedColor(data.selectedColor);\n  };\n\n  return (\n    <>\n      <SwatchPicker aria-label=\"SwatchPicker default\" selectedValue={selectedValue} onSelectionChange={handleSelect}>\n        <ColorSwatch color=\"#FF1921\" value=\"FF1921\" aria-label=\"red\" />\n        <ColorSwatch color=\"#FFC12E\" value=\"FFC12E\" aria-label=\"orange\" />\n        <ColorSwatch color=\"#FEFF37\" value=\"FEFF37\" aria-label=\"yellow\" />\n        <ColorSwatch disabled color=\"#90D057\" value=\"90D057\" aria-label=\"light green\" />\n        <ColorSwatch color=\"#00B053\" value=\"00B053\" aria-label=\"green\" />\n        <ColorSwatch color=\"#00AFED\" value=\"00AFED\" aria-label=\"light blue\" />\n        <ColorSwatch color=\"#006EBD\" value=\"006EBD\" aria-label=\"blue\" />\n        <ColorSwatch color=\"#011F5E\" value=\"011F5E\" aria-label=\"dark blue\" />\n        <ColorSwatch color=\"#712F9E\" value=\"712F9E\" aria-label=\"purple\" />\n      </SwatchPicker>\n\n      <div\n        style={{\n          backgroundColor: selectedColor,\n        }}\n      />\n    </>\n  );\n};\n```\n\n## Specification\n\nSee the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.\n\n## API\n\nFor information about the components, please refer to the [API documentation](https://react.fluentui.dev/?path=/docs/preview-components-swatchpicker--default).\n","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"1467e8a7b790eab9660f1de497224ac93a134210","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","bundle-size":"monosize measure","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.5.0","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.20.1","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.235","@fluentui/react-theme":"0.0.0-nightly-20240422-0407.1","@fluentui/react-tabster":"0.0.0-nightly-20240422-0407.1","@fluentui/react-utilities":"0.0.0-nightly-20240422-0407.1","@fluentui/react-jsx-runtime":"0.0.0-nightly-20240422-0407.1","@fluentui/react-shared-contexts":"0.0.0-nightly-20240422-0407.1","@fluentui/react-context-selector":"0.0.0-nightly-20240422-0407.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"0.0.0-nightly-20240422-0407.1","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"0.0.0-nightly-20240422-0407.1"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.0.0-nightly-20240422-0407.1_1713760150692_0.1090050555735349","host":"s3://npm-registry-packages"}},"0.0.0-nightly-20240423-0406.1":{"name":"@fluentui/react-swatch-picker-preview","version":"0.0.0-nightly-20240423-0406.1","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.0.0-nightly-20240423-0406.1","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"77f033f2f5fb6ddd5ab9b191d13e0270c23736fc","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.0.0-nightly-20240423-0406.1.tgz","fileCount":4,"integrity":"sha512-qrKMIIFiccmC3MFhkmkxvhUt1YG072D4cazJBwaJzRdyeWt3mcBP+RtZAIkxeiOfA95TINCWP/0OxQp21fXF/A==","signatures":[{"sig":"MEUCIEdGgBOU9+AVSTrbKJDX8HNvGdwA58gQ0I2kb0ypyCqBAiEA51EdNFMR6/U+71vdIPJEGIK+mRQArA7pffFxwjO036w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":10750},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-swatch-picker-preview\n\n**React Swatch Picker components for [Fluent UI React](https://react.fluentui.dev/)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\nThe SwatchPicker is used in graphic and text editors. It allows user to choose a needed color, image or pattern.\nThe SwatchPicker can be integrated within a popover or used as a standalone feature.\n\n## Usage\n\nTo import React SwatchPicker components:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n```\n\nSimple example of SwatchPicker Usage:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n\nexport const App = () => {\n  const [selectedValue, setSelectedValue] = React.useState('00B053');\n  const [selectedColor, setSelectedColor] = React.useState('#00B053');\n  const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {\n    setSelectedValue(data.selectedValue);\n    setSelectedColor(data.selectedColor);\n  };\n\n  return (\n    <>\n      <SwatchPicker aria-label=\"SwatchPicker default\" selectedValue={selectedValue} onSelectionChange={handleSelect}>\n        <ColorSwatch color=\"#FF1921\" value=\"FF1921\" aria-label=\"red\" />\n        <ColorSwatch color=\"#FFC12E\" value=\"FFC12E\" aria-label=\"orange\" />\n        <ColorSwatch color=\"#FEFF37\" value=\"FEFF37\" aria-label=\"yellow\" />\n        <ColorSwatch disabled color=\"#90D057\" value=\"90D057\" aria-label=\"light green\" />\n        <ColorSwatch color=\"#00B053\" value=\"00B053\" aria-label=\"green\" />\n        <ColorSwatch color=\"#00AFED\" value=\"00AFED\" aria-label=\"light blue\" />\n        <ColorSwatch color=\"#006EBD\" value=\"006EBD\" aria-label=\"blue\" />\n        <ColorSwatch color=\"#011F5E\" value=\"011F5E\" aria-label=\"dark blue\" />\n        <ColorSwatch color=\"#712F9E\" value=\"712F9E\" aria-label=\"purple\" />\n      </SwatchPicker>\n\n      <div\n        style={{\n          backgroundColor: selectedColor,\n        }}\n      />\n    </>\n  );\n};\n```\n\n## Specification\n\nSee the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.\n\n## API\n\nFor information about the components, please refer to the [API documentation](https://react.fluentui.dev/?path=/docs/preview-components-swatchpicker--default).\n","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"146af5e17a89e969794ae0b65f98b78e8dfed0d7","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","bundle-size":"monosize measure","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.5.0","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.20.2","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.235","@fluentui/react-theme":"0.0.0-nightly-20240423-0406.1","@fluentui/react-tabster":"0.0.0-nightly-20240423-0406.1","@fluentui/react-utilities":"0.0.0-nightly-20240423-0406.1","@fluentui/react-jsx-runtime":"0.0.0-nightly-20240423-0406.1","@fluentui/react-shared-contexts":"0.0.0-nightly-20240423-0406.1","@fluentui/react-context-selector":"0.0.0-nightly-20240423-0406.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"0.0.0-nightly-20240423-0406.1","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"0.0.0-nightly-20240423-0406.1"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.0.0-nightly-20240423-0406.1_1713846267933_0.9855003876509167","host":"s3://npm-registry-packages"}},"0.4.0":{"name":"@fluentui/react-swatch-picker-preview","version":"0.4.0","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.4.0","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"4ac6d5f9f667e935b1e1b61b842e71bdd1f05f2b","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.4.0.tgz","fileCount":157,"integrity":"sha512-BTQCGyAT0VRVZD2VcghfnToWYkS1/D3HGybWhp50EiQGTrNw2sJzjlhE3OYD5X3zl+81fK0Ad+/AWVfdGqiyTA==","signatures":[{"sig":"MEUCIQCT9VWIRwR5nhDi7YFch8jLvRg0cypYoNnV1ZnQ2K93kQIgO6xka0iCAmxkRRFv40Bl3xZqviCxPjWf/7ZGRdgkh1A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":259759},"main":"lib-commonjs/index.js","module":"lib/index.js","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"120868a45d3be46d3e8213083d9ecce435e83acf","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","bundle-size":"monosize measure","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","prerelease"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.5.0","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.20.2","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.235","@fluentui/react-theme":"^9.1.19","@fluentui/react-tabster":"^9.20.1","@fluentui/react-utilities":"^9.18.7","@fluentui/react-jsx-runtime":"^9.0.36","@fluentui/react-shared-contexts":"^9.17.0","@fluentui/react-context-selector":"^9.1.58"},"_hasShrinkwrap":false,"devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"*","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"*"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.4.0_1713860208820_0.7959915085643907","host":"s3://npm-registry-packages"}},"0.0.0-nightly-20240424-0405.1":{"name":"@fluentui/react-swatch-picker-preview","version":"0.0.0-nightly-20240424-0405.1","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.0.0-nightly-20240424-0405.1","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"a31de2ffb2133126c595e4921ef81a3db0405978","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.0.0-nightly-20240424-0405.1.tgz","fileCount":4,"integrity":"sha512-JlRDLTm9fAbzzNJ0dyyijnja4fFjTnUECG30YIaWuewoPeC4XT6x3eEu4elxI4S0mD91862BvgIgJ2ZohMYCwA==","signatures":[{"sig":"MEQCIANeH/MXx60zirS6BPRfdCn6bgU+iA6vSeeQ3G5bohXfAiAYoS1bcb1TebwET00y6GKaEh0Dag0RcKYn2Fqz5Hrblw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":11814},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-swatch-picker-preview\n\n**React Swatch Picker components for [Fluent UI React](https://react.fluentui.dev/)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\nThe SwatchPicker is used in graphic and text editors. It allows user to choose a needed color, image or pattern.\nThe SwatchPicker can be integrated within a popover or used as a standalone feature.\n\n## Usage\n\nTo import React SwatchPicker components:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n```\n\nSimple example of SwatchPicker Usage:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n\nexport const App = () => {\n  const [selectedValue, setSelectedValue] = React.useState('00B053');\n  const [selectedColor, setSelectedColor] = React.useState('#00B053');\n  const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {\n    setSelectedValue(data.selectedValue);\n    setSelectedColor(data.selectedColor);\n  };\n\n  return (\n    <>\n      <SwatchPicker aria-label=\"SwatchPicker default\" selectedValue={selectedValue} onSelectionChange={handleSelect}>\n        <ColorSwatch color=\"#FF1921\" value=\"FF1921\" aria-label=\"red\" />\n        <ColorSwatch color=\"#FFC12E\" value=\"FFC12E\" aria-label=\"orange\" />\n        <ColorSwatch color=\"#FEFF37\" value=\"FEFF37\" aria-label=\"yellow\" />\n        <ColorSwatch disabled color=\"#90D057\" value=\"90D057\" aria-label=\"light green\" />\n        <ColorSwatch color=\"#00B053\" value=\"00B053\" aria-label=\"green\" />\n        <ColorSwatch color=\"#00AFED\" value=\"00AFED\" aria-label=\"light blue\" />\n        <ColorSwatch color=\"#006EBD\" value=\"006EBD\" aria-label=\"blue\" />\n        <ColorSwatch color=\"#011F5E\" value=\"011F5E\" aria-label=\"dark blue\" />\n        <ColorSwatch color=\"#712F9E\" value=\"712F9E\" aria-label=\"purple\" />\n      </SwatchPicker>\n\n      <div\n        style={{\n          backgroundColor: selectedColor,\n        }}\n      />\n    </>\n  );\n};\n```\n\n## Specification\n\nSee the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.\n\n## API\n\nFor information about the components, please refer to the [API documentation](https://react.fluentui.dev/?path=/docs/preview-components-swatchpicker--default).\n","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"2ec82eb44fb3494f17826e27efa6c7390476a43c","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","bundle-size":"monosize measure","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.5.0","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.20.2","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.235","@fluentui/react-theme":"0.0.0-nightly-20240424-0405.1","@fluentui/react-tabster":"0.0.0-nightly-20240424-0405.1","@fluentui/react-utilities":"0.0.0-nightly-20240424-0405.1","@fluentui/react-jsx-runtime":"0.0.0-nightly-20240424-0405.1","@fluentui/react-shared-contexts":"0.0.0-nightly-20240424-0405.1","@fluentui/react-context-selector":"0.0.0-nightly-20240424-0405.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"0.0.0-nightly-20240424-0405.1","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"0.0.0-nightly-20240424-0405.1"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.0.0-nightly-20240424-0405.1_1713932667939_0.13247265998964264","host":"s3://npm-registry-packages"}},"0.0.0-nightly-20240425-0408.1":{"name":"@fluentui/react-swatch-picker-preview","version":"0.0.0-nightly-20240425-0408.1","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.0.0-nightly-20240425-0408.1","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"68bc500fbaec2ba725e4bfee2d176faec2085782","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.0.0-nightly-20240425-0408.1.tgz","fileCount":4,"integrity":"sha512-+ztCYGdoheBiBamBCsWL2ahK507kmIAJJkG1vJKxfWdMduisWdMbz3s4O/LpyI+eflMAmr8r8BI5Kuxn7DcW2w==","signatures":[{"sig":"MEUCIFakMmbK95e5R4e+vQA9GoTvzZdQO3M2J8ZocFrycJ/1AiEApMTX9eVWUahlTiO6xqeMRij56MZTL5uW2CCeFgGDmj4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":11814},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-swatch-picker-preview\n\n**React Swatch Picker components for [Fluent UI React](https://react.fluentui.dev/)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\nThe SwatchPicker is used in graphic and text editors. It allows user to choose a needed color, image or pattern.\nThe SwatchPicker can be integrated within a popover or used as a standalone feature.\n\n## Usage\n\nTo import React SwatchPicker components:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n```\n\nSimple example of SwatchPicker Usage:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n\nexport const App = () => {\n  const [selectedValue, setSelectedValue] = React.useState('00B053');\n  const [selectedColor, setSelectedColor] = React.useState('#00B053');\n  const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {\n    setSelectedValue(data.selectedValue);\n    setSelectedColor(data.selectedColor);\n  };\n\n  return (\n    <>\n      <SwatchPicker aria-label=\"SwatchPicker default\" selectedValue={selectedValue} onSelectionChange={handleSelect}>\n        <ColorSwatch color=\"#FF1921\" value=\"FF1921\" aria-label=\"red\" />\n        <ColorSwatch color=\"#FFC12E\" value=\"FFC12E\" aria-label=\"orange\" />\n        <ColorSwatch color=\"#FEFF37\" value=\"FEFF37\" aria-label=\"yellow\" />\n        <ColorSwatch disabled color=\"#90D057\" value=\"90D057\" aria-label=\"light green\" />\n        <ColorSwatch color=\"#00B053\" value=\"00B053\" aria-label=\"green\" />\n        <ColorSwatch color=\"#00AFED\" value=\"00AFED\" aria-label=\"light blue\" />\n        <ColorSwatch color=\"#006EBD\" value=\"006EBD\" aria-label=\"blue\" />\n        <ColorSwatch color=\"#011F5E\" value=\"011F5E\" aria-label=\"dark blue\" />\n        <ColorSwatch color=\"#712F9E\" value=\"712F9E\" aria-label=\"purple\" />\n      </SwatchPicker>\n\n      <div\n        style={{\n          backgroundColor: selectedColor,\n        }}\n      />\n    </>\n  );\n};\n```\n\n## Specification\n\nSee the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.\n\n## API\n\nFor information about the components, please refer to the [API documentation](https://react.fluentui.dev/?path=/docs/preview-components-swatchpicker--default).\n","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"1ad82d3471a2df5372e3f3c654449af6a1c5be9d","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","bundle-size":"monosize measure","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.5.0","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.20.2","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.235","@fluentui/react-theme":"0.0.0-nightly-20240425-0408.1","@fluentui/react-tabster":"0.0.0-nightly-20240425-0408.1","@fluentui/react-utilities":"0.0.0-nightly-20240425-0408.1","@fluentui/react-jsx-runtime":"0.0.0-nightly-20240425-0408.1","@fluentui/react-shared-contexts":"0.0.0-nightly-20240425-0408.1","@fluentui/react-context-selector":"0.0.0-nightly-20240425-0408.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"0.0.0-nightly-20240425-0408.1","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"0.0.0-nightly-20240425-0408.1"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.0.0-nightly-20240425-0408.1_1714019082974_0.9363811639387998","host":"s3://npm-registry-packages"}},"0.0.0-nightly-20240426-0405.1":{"name":"@fluentui/react-swatch-picker-preview","version":"0.0.0-nightly-20240426-0405.1","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.0.0-nightly-20240426-0405.1","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"fa7bbf7c49c31d1533099e2a7c5cfcb183389f7f","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.0.0-nightly-20240426-0405.1.tgz","fileCount":4,"integrity":"sha512-8p6Y6CRX1janjz8Z2j4csWb9eVoFQ/lSf0il7KYV+D1iLS6TE58xEjmM7PWNZQy6aSvGVoQjmYMwNtsRBw01rQ==","signatures":[{"sig":"MEUCIEkasQw1a2CexmdqZ4iQ/PeeDOwRfX5RXnf1TkL18cSCAiEAmiL9PB8qgrVVqAupDPcmKGv3z5TDJbQ3wltI7Z7GB7Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":11814},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-swatch-picker-preview\n\n**React Swatch Picker components for [Fluent UI React](https://react.fluentui.dev/)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\nThe SwatchPicker is used in graphic and text editors. It allows user to choose a needed color, image or pattern.\nThe SwatchPicker can be integrated within a popover or used as a standalone feature.\n\n## Usage\n\nTo import React SwatchPicker components:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n```\n\nSimple example of SwatchPicker Usage:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n\nexport const App = () => {\n  const [selectedValue, setSelectedValue] = React.useState('00B053');\n  const [selectedColor, setSelectedColor] = React.useState('#00B053');\n  const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {\n    setSelectedValue(data.selectedValue);\n    setSelectedColor(data.selectedColor);\n  };\n\n  return (\n    <>\n      <SwatchPicker aria-label=\"SwatchPicker default\" selectedValue={selectedValue} onSelectionChange={handleSelect}>\n        <ColorSwatch color=\"#FF1921\" value=\"FF1921\" aria-label=\"red\" />\n        <ColorSwatch color=\"#FFC12E\" value=\"FFC12E\" aria-label=\"orange\" />\n        <ColorSwatch color=\"#FEFF37\" value=\"FEFF37\" aria-label=\"yellow\" />\n        <ColorSwatch disabled color=\"#90D057\" value=\"90D057\" aria-label=\"light green\" />\n        <ColorSwatch color=\"#00B053\" value=\"00B053\" aria-label=\"green\" />\n        <ColorSwatch color=\"#00AFED\" value=\"00AFED\" aria-label=\"light blue\" />\n        <ColorSwatch color=\"#006EBD\" value=\"006EBD\" aria-label=\"blue\" />\n        <ColorSwatch color=\"#011F5E\" value=\"011F5E\" aria-label=\"dark blue\" />\n        <ColorSwatch color=\"#712F9E\" value=\"712F9E\" aria-label=\"purple\" />\n      </SwatchPicker>\n\n      <div\n        style={{\n          backgroundColor: selectedColor,\n        }}\n      />\n    </>\n  );\n};\n```\n\n## Specification\n\nSee the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.\n\n## API\n\nFor information about the components, please refer to the [API documentation](https://react.fluentui.dev/?path=/docs/preview-components-swatchpicker--default).\n","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"508ed5cdce6113ea5ab55eb271fd55fea509e49c","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","bundle-size":"monosize measure","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.5.0","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.20.2","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.235","@fluentui/react-theme":"0.0.0-nightly-20240426-0405.1","@fluentui/react-tabster":"0.0.0-nightly-20240426-0405.1","@fluentui/react-utilities":"0.0.0-nightly-20240426-0405.1","@fluentui/react-jsx-runtime":"0.0.0-nightly-20240426-0405.1","@fluentui/react-shared-contexts":"0.0.0-nightly-20240426-0405.1","@fluentui/react-context-selector":"0.0.0-nightly-20240426-0405.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"0.0.0-nightly-20240426-0405.1","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"0.0.0-nightly-20240426-0405.1"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.0.0-nightly-20240426-0405.1_1714105614616_0.40356016268534467","host":"s3://npm-registry-packages"}},"0.0.0-nightly-20240429-0407.1":{"name":"@fluentui/react-swatch-picker-preview","version":"0.0.0-nightly-20240429-0407.1","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.0.0-nightly-20240429-0407.1","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"b80d89890dbae1a3fa11efe58af09d033f30e26d","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.0.0-nightly-20240429-0407.1.tgz","fileCount":4,"integrity":"sha512-GmJC4tsJXgRwR97xrQbFj/1AIdHGEs3H9n3iHJcqNyM5btYhZPJtDOCUxuBCaM8wBokJnwlm4f8/Rj1tW2NNLw==","signatures":[{"sig":"MEQCIBINGqGzWXyRkybrMbsw10hCT+RMgKLeGNdLPwkv0jqaAiAi9Y6GxZ9AYs4IEOslmJMy1BHY3hWGzCMWi/JfLBcjQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":11814},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-swatch-picker-preview\n\n**React Swatch Picker components for [Fluent UI React](https://react.fluentui.dev/)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\nThe SwatchPicker is used in graphic and text editors. It allows user to choose a needed color, image or pattern.\nThe SwatchPicker can be integrated within a popover or used as a standalone feature.\n\n## Usage\n\nTo import React SwatchPicker components:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n```\n\nSimple example of SwatchPicker Usage:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n\nexport const App = () => {\n  const [selectedValue, setSelectedValue] = React.useState('00B053');\n  const [selectedColor, setSelectedColor] = React.useState('#00B053');\n  const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {\n    setSelectedValue(data.selectedValue);\n    setSelectedColor(data.selectedColor);\n  };\n\n  return (\n    <>\n      <SwatchPicker aria-label=\"SwatchPicker default\" selectedValue={selectedValue} onSelectionChange={handleSelect}>\n        <ColorSwatch color=\"#FF1921\" value=\"FF1921\" aria-label=\"red\" />\n        <ColorSwatch color=\"#FFC12E\" value=\"FFC12E\" aria-label=\"orange\" />\n        <ColorSwatch color=\"#FEFF37\" value=\"FEFF37\" aria-label=\"yellow\" />\n        <ColorSwatch disabled color=\"#90D057\" value=\"90D057\" aria-label=\"light green\" />\n        <ColorSwatch color=\"#00B053\" value=\"00B053\" aria-label=\"green\" />\n        <ColorSwatch color=\"#00AFED\" value=\"00AFED\" aria-label=\"light blue\" />\n        <ColorSwatch color=\"#006EBD\" value=\"006EBD\" aria-label=\"blue\" />\n        <ColorSwatch color=\"#011F5E\" value=\"011F5E\" aria-label=\"dark blue\" />\n        <ColorSwatch color=\"#712F9E\" value=\"712F9E\" aria-label=\"purple\" />\n      </SwatchPicker>\n\n      <div\n        style={{\n          backgroundColor: selectedColor,\n        }}\n      />\n    </>\n  );\n};\n```\n\n## Specification\n\nSee the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.\n\n## API\n\nFor information about the components, please refer to the [API documentation](https://react.fluentui.dev/?path=/docs/preview-components-swatchpicker--default).\n","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"eb9d265a679e0ca32e6b4442633dbb213e6cd243","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","bundle-size":"monosize measure","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.5.0","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.20.2","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.235","@fluentui/react-theme":"0.0.0-nightly-20240429-0407.1","@fluentui/react-tabster":"0.0.0-nightly-20240429-0407.1","@fluentui/react-utilities":"0.0.0-nightly-20240429-0407.1","@fluentui/react-jsx-runtime":"0.0.0-nightly-20240429-0407.1","@fluentui/react-shared-contexts":"0.0.0-nightly-20240429-0407.1","@fluentui/react-context-selector":"0.0.0-nightly-20240429-0407.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"0.0.0-nightly-20240429-0407.1","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"0.0.0-nightly-20240429-0407.1"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.0.0-nightly-20240429-0407.1_1714364665376_0.7831795362828755","host":"s3://npm-registry-packages"}},"0.0.0-nightly-20240430-0406.1":{"name":"@fluentui/react-swatch-picker-preview","version":"0.0.0-nightly-20240430-0406.1","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.0.0-nightly-20240430-0406.1","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"b8117fbe1e03150ae79b10bc058de58cc2904a1b","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.0.0-nightly-20240430-0406.1.tgz","fileCount":4,"integrity":"sha512-BQrR6Lcq1uEOTjghimPcXWCDcAcw6sFhrbzWpSJn+eL93dH7fKke7AhL8JX/MImBGfoEU6dC/1SxMfzKbNtQig==","signatures":[{"sig":"MEUCIH9TKCqljm/Ixa0Kn2Z8KNgcrOKGq1VQTJpsJbZGgdA6AiEA/viEmaky8Ol4bi2jmEVapDBZrn3oMWviQyDV3vQV63s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":11814},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-swatch-picker-preview\n\n**React Swatch Picker components for [Fluent UI React](https://react.fluentui.dev/)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\nThe SwatchPicker is used in graphic and text editors. It allows user to choose a needed color, image or pattern.\nThe SwatchPicker can be integrated within a popover or used as a standalone feature.\n\n## Usage\n\nTo import React SwatchPicker components:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n```\n\nSimple example of SwatchPicker Usage:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n\nexport const App = () => {\n  const [selectedValue, setSelectedValue] = React.useState('00B053');\n  const [selectedColor, setSelectedColor] = React.useState('#00B053');\n  const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {\n    setSelectedValue(data.selectedValue);\n    setSelectedColor(data.selectedColor);\n  };\n\n  return (\n    <>\n      <SwatchPicker aria-label=\"SwatchPicker default\" selectedValue={selectedValue} onSelectionChange={handleSelect}>\n        <ColorSwatch color=\"#FF1921\" value=\"FF1921\" aria-label=\"red\" />\n        <ColorSwatch color=\"#FFC12E\" value=\"FFC12E\" aria-label=\"orange\" />\n        <ColorSwatch color=\"#FEFF37\" value=\"FEFF37\" aria-label=\"yellow\" />\n        <ColorSwatch disabled color=\"#90D057\" value=\"90D057\" aria-label=\"light green\" />\n        <ColorSwatch color=\"#00B053\" value=\"00B053\" aria-label=\"green\" />\n        <ColorSwatch color=\"#00AFED\" value=\"00AFED\" aria-label=\"light blue\" />\n        <ColorSwatch color=\"#006EBD\" value=\"006EBD\" aria-label=\"blue\" />\n        <ColorSwatch color=\"#011F5E\" value=\"011F5E\" aria-label=\"dark blue\" />\n        <ColorSwatch color=\"#712F9E\" value=\"712F9E\" aria-label=\"purple\" />\n      </SwatchPicker>\n\n      <div\n        style={{\n          backgroundColor: selectedColor,\n        }}\n      />\n    </>\n  );\n};\n```\n\n## Specification\n\nSee the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.\n\n## API\n\nFor information about the components, please refer to the [API documentation](https://react.fluentui.dev/?path=/docs/preview-components-swatchpicker--default).\n","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"7b15f81487e6599238af033c9da52974bae7c7c7","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","bundle-size":"monosize measure","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.5.0","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.20.2","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.235","@fluentui/react-theme":"0.0.0-nightly-20240430-0406.1","@fluentui/react-tabster":"0.0.0-nightly-20240430-0406.1","@fluentui/react-utilities":"0.0.0-nightly-20240430-0406.1","@fluentui/react-jsx-runtime":"0.0.0-nightly-20240430-0406.1","@fluentui/react-shared-contexts":"0.0.0-nightly-20240430-0406.1","@fluentui/react-context-selector":"0.0.0-nightly-20240430-0406.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"0.0.0-nightly-20240430-0406.1","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"0.0.0-nightly-20240430-0406.1"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.0.0-nightly-20240430-0406.1_1714451252564_0.7383514820596893","host":"s3://npm-registry-packages"}},"0.0.0-nightly-20240501-0406.1":{"name":"@fluentui/react-swatch-picker-preview","version":"0.0.0-nightly-20240501-0406.1","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.0.0-nightly-20240501-0406.1","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"7e15678e51e0b2dc6393085819d8b1ce34afff83","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.0.0-nightly-20240501-0406.1.tgz","fileCount":4,"integrity":"sha512-ZY3Z2tJPiiYIGXt20/e4tzVxNe9HQUsXV/uGiRxUKFfGa3YuqBT/UI9lIz7QEIMCEOtS9Hl5AhE4kCeETPNMxQ==","signatures":[{"sig":"MEUCIGcZo4vcMseoy0pqxAhT5Zifj6IWomUEZ+V0EJw2OTAcAiEAzuyh9SB8hGypajrDRI3aw08Aq9dYfP3Sz3UeC8bNNSM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":11814},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-swatch-picker-preview\n\n**React Swatch Picker components for [Fluent UI React](https://react.fluentui.dev/)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\nThe SwatchPicker is used in graphic and text editors. It allows user to choose a needed color, image or pattern.\nThe SwatchPicker can be integrated within a popover or used as a standalone feature.\n\n## Usage\n\nTo import React SwatchPicker components:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n```\n\nSimple example of SwatchPicker Usage:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n\nexport const App = () => {\n  const [selectedValue, setSelectedValue] = React.useState('00B053');\n  const [selectedColor, setSelectedColor] = React.useState('#00B053');\n  const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {\n    setSelectedValue(data.selectedValue);\n    setSelectedColor(data.selectedColor);\n  };\n\n  return (\n    <>\n      <SwatchPicker aria-label=\"SwatchPicker default\" selectedValue={selectedValue} onSelectionChange={handleSelect}>\n        <ColorSwatch color=\"#FF1921\" value=\"FF1921\" aria-label=\"red\" />\n        <ColorSwatch color=\"#FFC12E\" value=\"FFC12E\" aria-label=\"orange\" />\n        <ColorSwatch color=\"#FEFF37\" value=\"FEFF37\" aria-label=\"yellow\" />\n        <ColorSwatch disabled color=\"#90D057\" value=\"90D057\" aria-label=\"light green\" />\n        <ColorSwatch color=\"#00B053\" value=\"00B053\" aria-label=\"green\" />\n        <ColorSwatch color=\"#00AFED\" value=\"00AFED\" aria-label=\"light blue\" />\n        <ColorSwatch color=\"#006EBD\" value=\"006EBD\" aria-label=\"blue\" />\n        <ColorSwatch color=\"#011F5E\" value=\"011F5E\" aria-label=\"dark blue\" />\n        <ColorSwatch color=\"#712F9E\" value=\"712F9E\" aria-label=\"purple\" />\n      </SwatchPicker>\n\n      <div\n        style={{\n          backgroundColor: selectedColor,\n        }}\n      />\n    </>\n  );\n};\n```\n\n## Specification\n\nSee the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.\n\n## API\n\nFor information about the components, please refer to the [API documentation](https://react.fluentui.dev/?path=/docs/preview-components-swatchpicker--default).\n","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"53baeaca9dc08fa4429a1a4a13030b6d04310775","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","bundle-size":"monosize measure","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.5.0","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.20.2","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.237","@fluentui/react-theme":"0.0.0-nightly-20240501-0406.1","@fluentui/react-tabster":"0.0.0-nightly-20240501-0406.1","@fluentui/react-utilities":"0.0.0-nightly-20240501-0406.1","@fluentui/react-jsx-runtime":"0.0.0-nightly-20240501-0406.1","@fluentui/react-shared-contexts":"0.0.0-nightly-20240501-0406.1","@fluentui/react-context-selector":"0.0.0-nightly-20240501-0406.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"0.0.0-nightly-20240501-0406.1","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"0.0.0-nightly-20240501-0406.1"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.0.0-nightly-20240501-0406.1_1714537456512_0.3501885000971947","host":"s3://npm-registry-packages"}},"0.0.0-nightly-20240502-0405.1":{"name":"@fluentui/react-swatch-picker-preview","version":"0.0.0-nightly-20240502-0405.1","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.0.0-nightly-20240502-0405.1","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"9e795021d50775b0eccf6b0bc2022e1c280d6026","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.0.0-nightly-20240502-0405.1.tgz","fileCount":4,"integrity":"sha512-sMiETR/ks5MEgDttFMwLWimvfo9eKnaSBmVx4imN9KpCZQBiFBdNMRi3azPjqs6aDSy6LkV8BGxhCDoxxItqrw==","signatures":[{"sig":"MEUCIAgNAs1JWTAdyS76Bi03vMMuwHceRUSP94NX/zrCfbdaAiEAm+eU3oGFQRCKBI7zoXZRuhN5ak7dnSqiWm6vIQpRrzw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":11814},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-swatch-picker-preview\n\n**React Swatch Picker components for [Fluent UI React](https://react.fluentui.dev/)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\nThe SwatchPicker is used in graphic and text editors. It allows user to choose a needed color, image or pattern.\nThe SwatchPicker can be integrated within a popover or used as a standalone feature.\n\n## Usage\n\nTo import React SwatchPicker components:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n```\n\nSimple example of SwatchPicker Usage:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n\nexport const App = () => {\n  const [selectedValue, setSelectedValue] = React.useState('00B053');\n  const [selectedColor, setSelectedColor] = React.useState('#00B053');\n  const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {\n    setSelectedValue(data.selectedValue);\n    setSelectedColor(data.selectedColor);\n  };\n\n  return (\n    <>\n      <SwatchPicker aria-label=\"SwatchPicker default\" selectedValue={selectedValue} onSelectionChange={handleSelect}>\n        <ColorSwatch color=\"#FF1921\" value=\"FF1921\" aria-label=\"red\" />\n        <ColorSwatch color=\"#FFC12E\" value=\"FFC12E\" aria-label=\"orange\" />\n        <ColorSwatch color=\"#FEFF37\" value=\"FEFF37\" aria-label=\"yellow\" />\n        <ColorSwatch disabled color=\"#90D057\" value=\"90D057\" aria-label=\"light green\" />\n        <ColorSwatch color=\"#00B053\" value=\"00B053\" aria-label=\"green\" />\n        <ColorSwatch color=\"#00AFED\" value=\"00AFED\" aria-label=\"light blue\" />\n        <ColorSwatch color=\"#006EBD\" value=\"006EBD\" aria-label=\"blue\" />\n        <ColorSwatch color=\"#011F5E\" value=\"011F5E\" aria-label=\"dark blue\" />\n        <ColorSwatch color=\"#712F9E\" value=\"712F9E\" aria-label=\"purple\" />\n      </SwatchPicker>\n\n      <div\n        style={{\n          backgroundColor: selectedColor,\n        }}\n      />\n    </>\n  );\n};\n```\n\n## Specification\n\nSee the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.\n\n## API\n\nFor information about the components, please refer to the [API documentation](https://react.fluentui.dev/?path=/docs/preview-components-swatchpicker--default).\n","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"a4d942fed844dbf02dbda091f13228505ad622c6","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","bundle-size":"monosize measure","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.5.0","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.20.2","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.237","@fluentui/react-theme":"0.0.0-nightly-20240502-0405.1","@fluentui/react-tabster":"0.0.0-nightly-20240502-0405.1","@fluentui/react-utilities":"0.0.0-nightly-20240502-0405.1","@fluentui/react-jsx-runtime":"0.0.0-nightly-20240502-0405.1","@fluentui/react-shared-contexts":"0.0.0-nightly-20240502-0405.1","@fluentui/react-context-selector":"0.0.0-nightly-20240502-0405.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"0.0.0-nightly-20240502-0405.1","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"0.0.0-nightly-20240502-0405.1"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.0.0-nightly-20240502-0405.1_1714623818657_0.14725337204312594","host":"s3://npm-registry-packages"}},"0.4.1":{"name":"@fluentui/react-swatch-picker-preview","version":"0.4.1","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.4.1","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"be271bafb989a022b28aaefd0a3e73137942d988","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.4.1.tgz","fileCount":157,"integrity":"sha512-b077ftt2/gx0XcLOuriXTjcirDX0mJGeru7BhqtbAjKitwz/d3WxM1idXOlf+imBFTQFrAn38e+zS1FE1/gT7Q==","signatures":[{"sig":"MEYCIQCr76IDy1+Egsv/XGDTklWb9VkK7868j6PJQgop+LfPHwIhALxxGDXb/gnqnAgiYav4c5vH1PKy8sGl+fXY361e9swO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":260323},"main":"lib-commonjs/index.js","module":"lib/index.js","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"b578776220e522122e17f9e89c0f19d92d3b4b92","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","bundle-size":"monosize measure","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","prerelease"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.5.0","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.20.2","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.237","@fluentui/react-theme":"^9.1.19","@fluentui/react-tabster":"^9.21.0","@fluentui/react-utilities":"^9.18.7","@fluentui/react-jsx-runtime":"^9.0.36","@fluentui/react-shared-contexts":"^9.17.0","@fluentui/react-context-selector":"^9.1.58"},"_hasShrinkwrap":false,"devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"*","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"*"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.4.1_1714649672865_0.6464890556560103","host":"s3://npm-registry-packages"}},"0.0.0-nightly-20240503-0405.1":{"name":"@fluentui/react-swatch-picker-preview","version":"0.0.0-nightly-20240503-0405.1","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.0.0-nightly-20240503-0405.1","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"eea1a240b417a648e11d54340f80e22139c951f0","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.0.0-nightly-20240503-0405.1.tgz","fileCount":4,"integrity":"sha512-cdnFLPOZWdPcWuiWfrKeotc4cfHP6Q2OoPJoNvbhKbLGHEiIuxze6oXgEn1ZL6RamsnT9UbWh/z4xaOtacZI6g==","signatures":[{"sig":"MEQCIAeEHNFj6vNF8AeTLHRT0XPCnQqP7syzHUgtqKoSfLJcAiAugf+KDOw2/GLrFrA5fUZU2uCSdT3a6+GsNfoN70h2dw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12378},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-swatch-picker-preview\n\n**React Swatch Picker components for [Fluent UI React](https://react.fluentui.dev/)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\nThe SwatchPicker is used in graphic and text editors. It allows user to choose a needed color, image or pattern.\nThe SwatchPicker can be integrated within a popover or used as a standalone feature.\n\n## Usage\n\nTo import React SwatchPicker components:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n```\n\nSimple example of SwatchPicker Usage:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n\nexport const App = () => {\n  const [selectedValue, setSelectedValue] = React.useState('00B053');\n  const [selectedColor, setSelectedColor] = React.useState('#00B053');\n  const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {\n    setSelectedValue(data.selectedValue);\n    setSelectedColor(data.selectedColor);\n  };\n\n  return (\n    <>\n      <SwatchPicker aria-label=\"SwatchPicker default\" selectedValue={selectedValue} onSelectionChange={handleSelect}>\n        <ColorSwatch color=\"#FF1921\" value=\"FF1921\" aria-label=\"red\" />\n        <ColorSwatch color=\"#FFC12E\" value=\"FFC12E\" aria-label=\"orange\" />\n        <ColorSwatch color=\"#FEFF37\" value=\"FEFF37\" aria-label=\"yellow\" />\n        <ColorSwatch disabled color=\"#90D057\" value=\"90D057\" aria-label=\"light green\" />\n        <ColorSwatch color=\"#00B053\" value=\"00B053\" aria-label=\"green\" />\n        <ColorSwatch color=\"#00AFED\" value=\"00AFED\" aria-label=\"light blue\" />\n        <ColorSwatch color=\"#006EBD\" value=\"006EBD\" aria-label=\"blue\" />\n        <ColorSwatch color=\"#011F5E\" value=\"011F5E\" aria-label=\"dark blue\" />\n        <ColorSwatch color=\"#712F9E\" value=\"712F9E\" aria-label=\"purple\" />\n      </SwatchPicker>\n\n      <div\n        style={{\n          backgroundColor: selectedColor,\n        }}\n      />\n    </>\n  );\n};\n```\n\n## Specification\n\nSee the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.\n\n## API\n\nFor information about the components, please refer to the [API documentation](https://react.fluentui.dev/?path=/docs/preview-components-swatchpicker--default).\n","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"d40a2263f47dccd5cce27661249112516bbe49f1","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","bundle-size":"monosize measure","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.5.0","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.20.2","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.237","@fluentui/react-theme":"0.0.0-nightly-20240503-0405.1","@fluentui/react-tabster":"0.0.0-nightly-20240503-0405.1","@fluentui/react-utilities":"0.0.0-nightly-20240503-0405.1","@fluentui/react-jsx-runtime":"0.0.0-nightly-20240503-0405.1","@fluentui/react-shared-contexts":"0.0.0-nightly-20240503-0405.1","@fluentui/react-context-selector":"0.0.0-nightly-20240503-0405.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"0.0.0-nightly-20240503-0405.1","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"0.0.0-nightly-20240503-0405.1"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.0.0-nightly-20240503-0405.1_1714710205905_0.667257282884157","host":"s3://npm-registry-packages"}},"0.0.0-nightly-20240506-0407.1":{"name":"@fluentui/react-swatch-picker-preview","version":"0.0.0-nightly-20240506-0407.1","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.0.0-nightly-20240506-0407.1","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"09e3b09261660deae1ee03f6bb0e368a993acca9","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.0.0-nightly-20240506-0407.1.tgz","fileCount":4,"integrity":"sha512-F08FxjSdMNqvVQuqkP1qrs/KcS6G4GIIiaD3j3TLHotNAJQhd312rhROaWw+jvCPg4NFQfMIog/Z90W4BdSk1w==","signatures":[{"sig":"MEUCIQCDrsZpGtfg7tLNTtxVSwpWBEd/Fk5SjXSZTDYJJEUo+gIgEKSnxIYkYWEPvjddBUbTmpKAde3l5FBM+A6I/jLbegM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12378},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-swatch-picker-preview\n\n**React Swatch Picker components for [Fluent UI React](https://react.fluentui.dev/)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\nThe SwatchPicker is used in graphic and text editors. It allows user to choose a needed color, image or pattern.\nThe SwatchPicker can be integrated within a popover or used as a standalone feature.\n\n## Usage\n\nTo import React SwatchPicker components:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n```\n\nSimple example of SwatchPicker Usage:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n\nexport const App = () => {\n  const [selectedValue, setSelectedValue] = React.useState('00B053');\n  const [selectedColor, setSelectedColor] = React.useState('#00B053');\n  const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {\n    setSelectedValue(data.selectedValue);\n    setSelectedColor(data.selectedColor);\n  };\n\n  return (\n    <>\n      <SwatchPicker aria-label=\"SwatchPicker default\" selectedValue={selectedValue} onSelectionChange={handleSelect}>\n        <ColorSwatch color=\"#FF1921\" value=\"FF1921\" aria-label=\"red\" />\n        <ColorSwatch color=\"#FFC12E\" value=\"FFC12E\" aria-label=\"orange\" />\n        <ColorSwatch color=\"#FEFF37\" value=\"FEFF37\" aria-label=\"yellow\" />\n        <ColorSwatch disabled color=\"#90D057\" value=\"90D057\" aria-label=\"light green\" />\n        <ColorSwatch color=\"#00B053\" value=\"00B053\" aria-label=\"green\" />\n        <ColorSwatch color=\"#00AFED\" value=\"00AFED\" aria-label=\"light blue\" />\n        <ColorSwatch color=\"#006EBD\" value=\"006EBD\" aria-label=\"blue\" />\n        <ColorSwatch color=\"#011F5E\" value=\"011F5E\" aria-label=\"dark blue\" />\n        <ColorSwatch color=\"#712F9E\" value=\"712F9E\" aria-label=\"purple\" />\n      </SwatchPicker>\n\n      <div\n        style={{\n          backgroundColor: selectedColor,\n        }}\n      />\n    </>\n  );\n};\n```\n\n## Specification\n\nSee the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.\n\n## API\n\nFor information about the components, please refer to the [API documentation](https://react.fluentui.dev/?path=/docs/preview-components-swatchpicker--default).\n","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"009b73a64e0a0577e7c620a48bf89fde468a8573","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","bundle-size":"monosize measure","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.5.0","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.20.2","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.237","@fluentui/react-theme":"0.0.0-nightly-20240506-0407.1","@fluentui/react-tabster":"0.0.0-nightly-20240506-0407.1","@fluentui/react-utilities":"0.0.0-nightly-20240506-0407.1","@fluentui/react-jsx-runtime":"0.0.0-nightly-20240506-0407.1","@fluentui/react-shared-contexts":"0.0.0-nightly-20240506-0407.1","@fluentui/react-context-selector":"0.0.0-nightly-20240506-0407.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"0.0.0-nightly-20240506-0407.1","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"0.0.0-nightly-20240506-0407.1"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.0.0-nightly-20240506-0407.1_1714969551450_0.8102892359031728","host":"s3://npm-registry-packages"}},"0.4.2":{"name":"@fluentui/react-swatch-picker-preview","version":"0.4.2","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.4.2","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"99fcb3558388928e51df413a4f6b8151dafce15e","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.4.2.tgz","fileCount":157,"integrity":"sha512-qYeWpx/Ex0/sOP3CwYwH6ZIWL8ZbxWcSPTWYN8utEEaeBlUmMlNtAtTr2R6EbovMAGBw3glOqfMbZft0iVzOcQ==","signatures":[{"sig":"MEUCIFBs7ZjrLs4y7lxaUWArcfM4TginhfBMdech13PIxzafAiEAxcOavOaiBfdxeOrrr0G1ViJTTFMiRVT9qwLNY/5vBb8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":261244},"main":"lib-commonjs/index.js","module":"lib/index.js","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"16b1c50437919a44f8143c05c2a5fb9b39e03dc2","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","bundle-size":"monosize measure","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","prerelease"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.5.0","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.20.2","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.237","@fluentui/react-theme":"^9.1.19","@fluentui/react-tabster":"^9.21.1","@fluentui/react-utilities":"^9.18.8","@fluentui/react-jsx-runtime":"^9.0.37","@fluentui/react-shared-contexts":"^9.18.0","@fluentui/react-context-selector":"^9.1.59"},"_hasShrinkwrap":false,"devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"*","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"*"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.4.2_1715000088425_0.3260422925726787","host":"s3://npm-registry-packages"}},"0.0.0-nightly-20240507-0407.1":{"name":"@fluentui/react-swatch-picker-preview","version":"0.0.0-nightly-20240507-0407.1","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.0.0-nightly-20240507-0407.1","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"b8e8b3346dba7280018925a74e47cf0f7e309839","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.0.0-nightly-20240507-0407.1.tgz","fileCount":4,"integrity":"sha512-hBgzyVp1APGLaGtdscBPClALU9iPsWo5PfKR5vfokrK/W2tB/mlo0KjfWRWFI7Y58XWq3Om3q0+QwE2AUxHf/g==","signatures":[{"sig":"MEUCIQDk1jOOmv3sK3uFDP898DreumMvVeTXIzabxg5gAUKKCAIgZzBDiiqfBkl9GdyPusox75u/06pPp1YVSSjpTQlbK8c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13299},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-swatch-picker-preview\n\n**React Swatch Picker components for [Fluent UI React](https://react.fluentui.dev/)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\nThe SwatchPicker is used in graphic and text editors. It allows user to choose a needed color, image or pattern.\nThe SwatchPicker can be integrated within a popover or used as a standalone feature.\n\n## Usage\n\nTo import React SwatchPicker components:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n```\n\nSimple example of SwatchPicker Usage:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n\nexport const App = () => {\n  const [selectedValue, setSelectedValue] = React.useState('00B053');\n  const [selectedColor, setSelectedColor] = React.useState('#00B053');\n  const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {\n    setSelectedValue(data.selectedValue);\n    setSelectedColor(data.selectedColor);\n  };\n\n  return (\n    <>\n      <SwatchPicker aria-label=\"SwatchPicker default\" selectedValue={selectedValue} onSelectionChange={handleSelect}>\n        <ColorSwatch color=\"#FF1921\" value=\"FF1921\" aria-label=\"red\" />\n        <ColorSwatch color=\"#FFC12E\" value=\"FFC12E\" aria-label=\"orange\" />\n        <ColorSwatch color=\"#FEFF37\" value=\"FEFF37\" aria-label=\"yellow\" />\n        <ColorSwatch disabled color=\"#90D057\" value=\"90D057\" aria-label=\"light green\" />\n        <ColorSwatch color=\"#00B053\" value=\"00B053\" aria-label=\"green\" />\n        <ColorSwatch color=\"#00AFED\" value=\"00AFED\" aria-label=\"light blue\" />\n        <ColorSwatch color=\"#006EBD\" value=\"006EBD\" aria-label=\"blue\" />\n        <ColorSwatch color=\"#011F5E\" value=\"011F5E\" aria-label=\"dark blue\" />\n        <ColorSwatch color=\"#712F9E\" value=\"712F9E\" aria-label=\"purple\" />\n      </SwatchPicker>\n\n      <div\n        style={{\n          backgroundColor: selectedColor,\n        }}\n      />\n    </>\n  );\n};\n```\n\n## Specification\n\nSee the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.\n\n## API\n\nFor information about the components, please refer to the [API documentation](https://react.fluentui.dev/?path=/docs/preview-components-swatchpicker--default).\n","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"82d0a427ae96b603c427143a7fbf379dd9b22dff","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","bundle-size":"monosize measure","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.5.0","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.20.2","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.237","@fluentui/react-theme":"0.0.0-nightly-20240507-0407.1","@fluentui/react-tabster":"0.0.0-nightly-20240507-0407.1","@fluentui/react-utilities":"0.0.0-nightly-20240507-0407.1","@fluentui/react-jsx-runtime":"0.0.0-nightly-20240507-0407.1","@fluentui/react-shared-contexts":"0.0.0-nightly-20240507-0407.1","@fluentui/react-context-selector":"0.0.0-nightly-20240507-0407.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"0.0.0-nightly-20240507-0407.1","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"0.0.0-nightly-20240507-0407.1"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.0.0-nightly-20240507-0407.1_1715055895209_0.7574129590655707","host":"s3://npm-registry-packages"}},"0.0.0-nightly-20240508-0405.1":{"name":"@fluentui/react-swatch-picker-preview","version":"0.0.0-nightly-20240508-0405.1","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.0.0-nightly-20240508-0405.1","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"cf7cf508359e9d2e3c30da1992e5f56a26265f2a","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.0.0-nightly-20240508-0405.1.tgz","fileCount":4,"integrity":"sha512-WqB3pRmSXqNiVmKGrSn1hm51cRpJJrSaQjgXMNhqlHmnU8WNN1N081qRd4sz5EZT1p0YfvaFaqEN0BfardEO7w==","signatures":[{"sig":"MEQCIA1fRnF76CCQWhhjm0VqMrE00pdFPDJqx46Ie6XmpofNAiBdQV3p3CHoAvBl6TLBY7xJ+WRy/ZEu+iOu3ryCZIuQDw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13299},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-swatch-picker-preview\n\n**React Swatch Picker components for [Fluent UI React](https://react.fluentui.dev/)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\nThe SwatchPicker is used in graphic and text editors. It allows user to choose a needed color, image or pattern.\nThe SwatchPicker can be integrated within a popover or used as a standalone feature.\n\n## Usage\n\nTo import React SwatchPicker components:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n```\n\nSimple example of SwatchPicker Usage:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n\nexport const App = () => {\n  const [selectedValue, setSelectedValue] = React.useState('00B053');\n  const [selectedColor, setSelectedColor] = React.useState('#00B053');\n  const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {\n    setSelectedValue(data.selectedValue);\n    setSelectedColor(data.selectedColor);\n  };\n\n  return (\n    <>\n      <SwatchPicker aria-label=\"SwatchPicker default\" selectedValue={selectedValue} onSelectionChange={handleSelect}>\n        <ColorSwatch color=\"#FF1921\" value=\"FF1921\" aria-label=\"red\" />\n        <ColorSwatch color=\"#FFC12E\" value=\"FFC12E\" aria-label=\"orange\" />\n        <ColorSwatch color=\"#FEFF37\" value=\"FEFF37\" aria-label=\"yellow\" />\n        <ColorSwatch disabled color=\"#90D057\" value=\"90D057\" aria-label=\"light green\" />\n        <ColorSwatch color=\"#00B053\" value=\"00B053\" aria-label=\"green\" />\n        <ColorSwatch color=\"#00AFED\" value=\"00AFED\" aria-label=\"light blue\" />\n        <ColorSwatch color=\"#006EBD\" value=\"006EBD\" aria-label=\"blue\" />\n        <ColorSwatch color=\"#011F5E\" value=\"011F5E\" aria-label=\"dark blue\" />\n        <ColorSwatch color=\"#712F9E\" value=\"712F9E\" aria-label=\"purple\" />\n      </SwatchPicker>\n\n      <div\n        style={{\n          backgroundColor: selectedColor,\n        }}\n      />\n    </>\n  );\n};\n```\n\n## Specification\n\nSee the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.\n\n## API\n\nFor information about the components, please refer to the [API documentation](https://react.fluentui.dev/?path=/docs/preview-components-swatchpicker--default).\n","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"fedd9b28910034e36e196ca1b98d9c859e7edaa0","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","bundle-size":"monosize measure","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.5.0","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.20.2","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.237","@fluentui/react-theme":"0.0.0-nightly-20240508-0405.1","@fluentui/react-tabster":"0.0.0-nightly-20240508-0405.1","@fluentui/react-utilities":"0.0.0-nightly-20240508-0405.1","@fluentui/react-jsx-runtime":"0.0.0-nightly-20240508-0405.1","@fluentui/react-shared-contexts":"0.0.0-nightly-20240508-0405.1","@fluentui/react-context-selector":"0.0.0-nightly-20240508-0405.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"0.0.0-nightly-20240508-0405.1","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"0.0.0-nightly-20240508-0405.1"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.0.0-nightly-20240508-0405.1_1715142414553_0.17133167845371133","host":"s3://npm-registry-packages"}},"0.0.0-nightly-20240509-0405.1":{"name":"@fluentui/react-swatch-picker-preview","version":"0.0.0-nightly-20240509-0405.1","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.0.0-nightly-20240509-0405.1","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"d30df60c9f3961d298380fa0f2ef1ddfcbd5f5e7","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.0.0-nightly-20240509-0405.1.tgz","fileCount":4,"integrity":"sha512-nZ43zi3bjLE+IM4qU7wB5ReEElmWyT0kor3ApJCgKj2ugwgC3o9a6Q240A8+z+PUMyS5KTLbt26EBC1swXyV1Q==","signatures":[{"sig":"MEUCIHd2wVuXl2Rng/L2hxWkkoMZpBGdNSLjsbjouZy2mo2AAiEAiyUpRHtOfVC1xaJI7pXfzf8IQ7lp5XTgJEzqGilbfXM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13299},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-swatch-picker-preview\n\n**React Swatch Picker components for [Fluent UI React](https://react.fluentui.dev/)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\nThe SwatchPicker is used in graphic and text editors. It allows user to choose a needed color, image or pattern.\nThe SwatchPicker can be integrated within a popover or used as a standalone feature.\n\n## Usage\n\nTo import React SwatchPicker components:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n```\n\nSimple example of SwatchPicker Usage:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n\nexport const App = () => {\n  const [selectedValue, setSelectedValue] = React.useState('00B053');\n  const [selectedColor, setSelectedColor] = React.useState('#00B053');\n  const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {\n    setSelectedValue(data.selectedValue);\n    setSelectedColor(data.selectedColor);\n  };\n\n  return (\n    <>\n      <SwatchPicker aria-label=\"SwatchPicker default\" selectedValue={selectedValue} onSelectionChange={handleSelect}>\n        <ColorSwatch color=\"#FF1921\" value=\"FF1921\" aria-label=\"red\" />\n        <ColorSwatch color=\"#FFC12E\" value=\"FFC12E\" aria-label=\"orange\" />\n        <ColorSwatch color=\"#FEFF37\" value=\"FEFF37\" aria-label=\"yellow\" />\n        <ColorSwatch disabled color=\"#90D057\" value=\"90D057\" aria-label=\"light green\" />\n        <ColorSwatch color=\"#00B053\" value=\"00B053\" aria-label=\"green\" />\n        <ColorSwatch color=\"#00AFED\" value=\"00AFED\" aria-label=\"light blue\" />\n        <ColorSwatch color=\"#006EBD\" value=\"006EBD\" aria-label=\"blue\" />\n        <ColorSwatch color=\"#011F5E\" value=\"011F5E\" aria-label=\"dark blue\" />\n        <ColorSwatch color=\"#712F9E\" value=\"712F9E\" aria-label=\"purple\" />\n      </SwatchPicker>\n\n      <div\n        style={{\n          backgroundColor: selectedColor,\n        }}\n      />\n    </>\n  );\n};\n```\n\n## Specification\n\nSee the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.\n\n## API\n\nFor information about the components, please refer to the [API documentation](https://react.fluentui.dev/?path=/docs/preview-components-swatchpicker--default).\n","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"a0e52c3e9e44bc468b679dddd58a240e9d009771","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","bundle-size":"monosize measure","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.5.0","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.20.2","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.237","@fluentui/react-theme":"0.0.0-nightly-20240509-0405.1","@fluentui/react-tabster":"0.0.0-nightly-20240509-0405.1","@fluentui/react-utilities":"0.0.0-nightly-20240509-0405.1","@fluentui/react-jsx-runtime":"0.0.0-nightly-20240509-0405.1","@fluentui/react-shared-contexts":"0.0.0-nightly-20240509-0405.1","@fluentui/react-context-selector":"0.0.0-nightly-20240509-0405.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"0.0.0-nightly-20240509-0405.1","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"0.0.0-nightly-20240509-0405.1"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.0.0-nightly-20240509-0405.1_1715228582209_0.4709836153610327","host":"s3://npm-registry-packages"}},"0.4.3":{"name":"@fluentui/react-swatch-picker-preview","version":"0.4.3","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.4.3","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"4a2ce575e24e8ab5d775967871358d60c544970a","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.4.3.tgz","fileCount":157,"integrity":"sha512-Ul0FXNiKyF4fEoTDWDZgXhqXm/n6JXTTgbh/8ljz1GmZMgoQMK8HjItSbLmeb032uFBVNIGrwyKmyFoAV71A4g==","signatures":[{"sig":"MEQCIHorFXdXV0L0qSEdTOFBLbUMoaQAiuSNDo+SXH8X8WHAAiAe00x0EPsDYDnLB7mts5qZ3LvRB6+DXdL7dZj9Ayt7tw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":261666},"main":"lib-commonjs/index.js","module":"lib/index.js","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"b2b99644f821cb1b882314c68b493e1dd2e01f44","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","bundle-size":"monosize measure","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","prerelease"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.5.0","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.20.2","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.237","@fluentui/react-theme":"^9.1.19","@fluentui/react-tabster":"^9.21.2","@fluentui/react-utilities":"^9.18.8","@fluentui/react-jsx-runtime":"^9.0.37","@fluentui/react-shared-contexts":"^9.18.0","@fluentui/react-context-selector":"^9.1.59"},"_hasShrinkwrap":false,"devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"*","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"*"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.4.3_1715283305921_0.28630290404836845","host":"s3://npm-registry-packages"}},"0.0.0-nightly-20240510-0407.1":{"name":"@fluentui/react-swatch-picker-preview","version":"0.0.0-nightly-20240510-0407.1","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.0.0-nightly-20240510-0407.1","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"38043067c92166802cfd76931fa021202c7d244d","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.0.0-nightly-20240510-0407.1.tgz","fileCount":4,"integrity":"sha512-DoFm1v5pfshxe8gp0T86J6ZOkQ9xw0NcguND9xJlFTtiPivKmpc8RNWt24iHq/4hto7dJs4T2m23TQXRpQt7cA==","signatures":[{"sig":"MEUCIQC9+FbhdKVH8bous0jlMAnKchXews0fBnLtH4Vb8C1zkAIgd7Iwm7L12YKw5UMqLplmRMu1auTek6nNoJ5vNfhT7sg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13721},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-swatch-picker-preview\n\n**React Swatch Picker components for [Fluent UI React](https://react.fluentui.dev/)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\nThe SwatchPicker is used in graphic and text editors. It allows user to choose a needed color, image or pattern.\nThe SwatchPicker can be integrated within a popover or used as a standalone feature.\n\n## Usage\n\nTo import React SwatchPicker components:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n```\n\nSimple example of SwatchPicker Usage:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n\nexport const App = () => {\n  const [selectedValue, setSelectedValue] = React.useState('00B053');\n  const [selectedColor, setSelectedColor] = React.useState('#00B053');\n  const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {\n    setSelectedValue(data.selectedValue);\n    setSelectedColor(data.selectedColor);\n  };\n\n  return (\n    <>\n      <SwatchPicker aria-label=\"SwatchPicker default\" selectedValue={selectedValue} onSelectionChange={handleSelect}>\n        <ColorSwatch color=\"#FF1921\" value=\"FF1921\" aria-label=\"red\" />\n        <ColorSwatch color=\"#FFC12E\" value=\"FFC12E\" aria-label=\"orange\" />\n        <ColorSwatch color=\"#FEFF37\" value=\"FEFF37\" aria-label=\"yellow\" />\n        <ColorSwatch disabled color=\"#90D057\" value=\"90D057\" aria-label=\"light green\" />\n        <ColorSwatch color=\"#00B053\" value=\"00B053\" aria-label=\"green\" />\n        <ColorSwatch color=\"#00AFED\" value=\"00AFED\" aria-label=\"light blue\" />\n        <ColorSwatch color=\"#006EBD\" value=\"006EBD\" aria-label=\"blue\" />\n        <ColorSwatch color=\"#011F5E\" value=\"011F5E\" aria-label=\"dark blue\" />\n        <ColorSwatch color=\"#712F9E\" value=\"712F9E\" aria-label=\"purple\" />\n      </SwatchPicker>\n\n      <div\n        style={{\n          backgroundColor: selectedColor,\n        }}\n      />\n    </>\n  );\n};\n```\n\n## Specification\n\nSee the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.\n\n## API\n\nFor information about the components, please refer to the [API documentation](https://react.fluentui.dev/?path=/docs/preview-components-swatchpicker--default).\n","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"929b85ce9af2225973f9fa16123b087cdd8d0a46","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","bundle-size":"monosize measure","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.5.0","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.20.2","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.237","@fluentui/react-theme":"0.0.0-nightly-20240510-0407.1","@fluentui/react-tabster":"0.0.0-nightly-20240510-0407.1","@fluentui/react-utilities":"0.0.0-nightly-20240510-0407.1","@fluentui/react-jsx-runtime":"0.0.0-nightly-20240510-0407.1","@fluentui/react-shared-contexts":"0.0.0-nightly-20240510-0407.1","@fluentui/react-context-selector":"0.0.0-nightly-20240510-0407.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"0.0.0-nightly-20240510-0407.1","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"0.0.0-nightly-20240510-0407.1"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.0.0-nightly-20240510-0407.1_1715315132524_0.3363080793770936","host":"s3://npm-registry-packages"}},"0.0.0-nightly-20240513-0408.1":{"name":"@fluentui/react-swatch-picker-preview","version":"0.0.0-nightly-20240513-0408.1","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.0.0-nightly-20240513-0408.1","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"69c7927609350af805e07663779b22e83750a043","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.0.0-nightly-20240513-0408.1.tgz","fileCount":4,"integrity":"sha512-4JFgl90YCKSzCOB/iNOPb+P+D8uDzbotpuNinbyHuWghH+o6LhYPQSCUVKaZRnRfUkuAPJ3Lbzr6hUppVv3vwA==","signatures":[{"sig":"MEUCIHVrg0NqvmR13hjDX3954zh0F6dY7gcLuAB5OVFHriLCAiEAg5gzSZmZMyRn+cQSPK4ttEqR5/k355KmU/pl0aNYW4M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13721},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-swatch-picker-preview\n\n**React Swatch Picker components for [Fluent UI React](https://react.fluentui.dev/)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\nThe SwatchPicker is used in graphic and text editors. It allows user to choose a needed color, image or pattern.\nThe SwatchPicker can be integrated within a popover or used as a standalone feature.\n\n## Usage\n\nTo import React SwatchPicker components:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n```\n\nSimple example of SwatchPicker Usage:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n\nexport const App = () => {\n  const [selectedValue, setSelectedValue] = React.useState('00B053');\n  const [selectedColor, setSelectedColor] = React.useState('#00B053');\n  const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {\n    setSelectedValue(data.selectedValue);\n    setSelectedColor(data.selectedColor);\n  };\n\n  return (\n    <>\n      <SwatchPicker aria-label=\"SwatchPicker default\" selectedValue={selectedValue} onSelectionChange={handleSelect}>\n        <ColorSwatch color=\"#FF1921\" value=\"FF1921\" aria-label=\"red\" />\n        <ColorSwatch color=\"#FFC12E\" value=\"FFC12E\" aria-label=\"orange\" />\n        <ColorSwatch color=\"#FEFF37\" value=\"FEFF37\" aria-label=\"yellow\" />\n        <ColorSwatch disabled color=\"#90D057\" value=\"90D057\" aria-label=\"light green\" />\n        <ColorSwatch color=\"#00B053\" value=\"00B053\" aria-label=\"green\" />\n        <ColorSwatch color=\"#00AFED\" value=\"00AFED\" aria-label=\"light blue\" />\n        <ColorSwatch color=\"#006EBD\" value=\"006EBD\" aria-label=\"blue\" />\n        <ColorSwatch color=\"#011F5E\" value=\"011F5E\" aria-label=\"dark blue\" />\n        <ColorSwatch color=\"#712F9E\" value=\"712F9E\" aria-label=\"purple\" />\n      </SwatchPicker>\n\n      <div\n        style={{\n          backgroundColor: selectedColor,\n        }}\n      />\n    </>\n  );\n};\n```\n\n## Specification\n\nSee the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.\n\n## API\n\nFor information about the components, please refer to the [API documentation](https://react.fluentui.dev/?path=/docs/preview-components-swatchpicker--default).\n","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"c47321fd1fb69c5b9d8b5b5a14454708dae1541f","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","bundle-size":"monosize measure","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.5.0","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.20.2","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.237","@fluentui/react-theme":"0.0.0-nightly-20240513-0408.1","@fluentui/react-tabster":"0.0.0-nightly-20240513-0408.1","@fluentui/react-utilities":"0.0.0-nightly-20240513-0408.1","@fluentui/react-jsx-runtime":"0.0.0-nightly-20240513-0408.1","@fluentui/react-shared-contexts":"0.0.0-nightly-20240513-0408.1","@fluentui/react-context-selector":"0.0.0-nightly-20240513-0408.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"0.0.0-nightly-20240513-0408.1","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"0.0.0-nightly-20240513-0408.1"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.0.0-nightly-20240513-0408.1_1715574599978_0.46202111681014535","host":"s3://npm-registry-packages"}},"0.5.0":{"name":"@fluentui/react-swatch-picker-preview","version":"0.5.0","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.5.0","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"e85cbb1e569ce7f633219e23f412d12c20ed74a0","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.5.0.tgz","fileCount":161,"integrity":"sha512-XCdJZ3FitfZFQNvLlOHti6ofjR7UQzYyGI8j9yRad0XkvrDLkXr/SpsGtFpeBzm/V7vCq7I/rKZGP6xMIoN+Gw==","signatures":[{"sig":"MEQCIEQDyVLNTMipk12tBuOTiMDTV737IiKlAv2Papwws6xnAiAiS3IEmF7UOQlISoW+5fXVFbo+EKwIEkgnZhz3j63nqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":264701},"main":"lib-commonjs/index.js","module":"lib/index.js","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"8b5031cb903160673ff2f63c646e45817b3976d7","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","bundle-size":"monosize measure","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","prerelease"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.5.0","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.20.2","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.237","@fluentui/react-theme":"^9.1.19","@fluentui/react-tabster":"^9.21.2","@fluentui/react-utilities":"^9.18.8","@fluentui/react-jsx-runtime":"^9.0.37","@fluentui/react-shared-contexts":"^9.18.0","@fluentui/react-context-selector":"^9.1.59"},"_hasShrinkwrap":false,"devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"*","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"*"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.5.0_1715603640194_0.9865300602701816","host":"s3://npm-registry-packages"}},"0.0.0-nightly-20240514-0405.1":{"name":"@fluentui/react-swatch-picker-preview","version":"0.0.0-nightly-20240514-0405.1","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.0.0-nightly-20240514-0405.1","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"92625f425843554ce29a0f1274fa9c0fa6a42576","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.0.0-nightly-20240514-0405.1.tgz","fileCount":4,"integrity":"sha512-xlw/ePdV4j45rrhn/gk7vgsd4NmrZzjCYkaw3LXJzzY3kpkQbULdfD0wLxfIiQPYoeDJVsTfmRjel5JrX3pdnA==","signatures":[{"sig":"MEUCIDYQXF990t2SIxZbPCoe1MMZ4uS85k9emKBAlVIflOv7AiEApZjVW6th6/iVwG/WcBAJhNM0F7Flo2il8KVb12L49M4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":14171},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-swatch-picker-preview\n\n**React Swatch Picker components for [Fluent UI React](https://react.fluentui.dev/)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\nThe SwatchPicker is used in graphic and text editors. It allows user to choose a needed color, image or pattern.\nThe SwatchPicker can be integrated within a popover or used as a standalone feature.\n\n## Usage\n\nTo import React SwatchPicker components:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n```\n\nSimple example of SwatchPicker Usage:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n\nexport const App = () => {\n  const [selectedValue, setSelectedValue] = React.useState('00B053');\n  const [selectedColor, setSelectedColor] = React.useState('#00B053');\n  const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {\n    setSelectedValue(data.selectedValue);\n    setSelectedColor(data.selectedColor);\n  };\n\n  return (\n    <>\n      <SwatchPicker aria-label=\"SwatchPicker default\" selectedValue={selectedValue} onSelectionChange={handleSelect}>\n        <ColorSwatch color=\"#FF1921\" value=\"FF1921\" aria-label=\"red\" />\n        <ColorSwatch color=\"#FFC12E\" value=\"FFC12E\" aria-label=\"orange\" />\n        <ColorSwatch color=\"#FEFF37\" value=\"FEFF37\" aria-label=\"yellow\" />\n        <ColorSwatch disabled color=\"#90D057\" value=\"90D057\" aria-label=\"light green\" />\n        <ColorSwatch color=\"#00B053\" value=\"00B053\" aria-label=\"green\" />\n        <ColorSwatch color=\"#00AFED\" value=\"00AFED\" aria-label=\"light blue\" />\n        <ColorSwatch color=\"#006EBD\" value=\"006EBD\" aria-label=\"blue\" />\n        <ColorSwatch color=\"#011F5E\" value=\"011F5E\" aria-label=\"dark blue\" />\n        <ColorSwatch color=\"#712F9E\" value=\"712F9E\" aria-label=\"purple\" />\n      </SwatchPicker>\n\n      <div\n        style={{\n          backgroundColor: selectedColor,\n        }}\n      />\n    </>\n  );\n};\n```\n\n## Specification\n\nSee the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.\n\n## API\n\nFor information about the components, please refer to the [API documentation](https://react.fluentui.dev/?path=/docs/preview-components-swatchpicker--default).\n","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"e682520ae347556b4bfcd576a6af39c96a5d5efb","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","bundle-size":"monosize measure","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.5.0","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.20.2","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.239","@fluentui/react-theme":"0.0.0-nightly-20240514-0405.1","@fluentui/react-tabster":"0.0.0-nightly-20240514-0405.1","@fluentui/react-utilities":"0.0.0-nightly-20240514-0405.1","@fluentui/react-jsx-runtime":"0.0.0-nightly-20240514-0405.1","@fluentui/react-shared-contexts":"0.0.0-nightly-20240514-0405.1","@fluentui/react-context-selector":"0.0.0-nightly-20240514-0405.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"0.0.0-nightly-20240514-0405.1","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"0.0.0-nightly-20240514-0405.1"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.0.0-nightly-20240514-0405.1_1715660865092_0.8733915236673517","host":"s3://npm-registry-packages"}},"0.0.0-nightly-20240515-0405.1":{"name":"@fluentui/react-swatch-picker-preview","version":"0.0.0-nightly-20240515-0405.1","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.0.0-nightly-20240515-0405.1","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"34bec9485319485a79b92ad538b154c9ace924c0","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.0.0-nightly-20240515-0405.1.tgz","fileCount":4,"integrity":"sha512-7vd0UxG+5qkYEEeNyfoMF4iRXpy87qR16z6V7sv8FIeOmgq1h7azSyDJDitSSPB+itQvtoGjFvpDzyP1LjEYdA==","signatures":[{"sig":"MEUCIQD5BEtr9V1A3c9wGIDXIX04XkZVjo4pL6/+ZnuItb1BwwIgb9V3HArJ0jrdQ7AKunxn2NepWUCAr3O9GIwj3ESe2bg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":14171},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-swatch-picker-preview\n\n**React Swatch Picker components for [Fluent UI React](https://react.fluentui.dev/)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\nThe SwatchPicker is used in graphic and text editors. It allows user to choose a needed color, image or pattern.\nThe SwatchPicker can be integrated within a popover or used as a standalone feature.\n\n## Usage\n\nTo import React SwatchPicker components:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n```\n\nSimple example of SwatchPicker Usage:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n\nexport const App = () => {\n  const [selectedValue, setSelectedValue] = React.useState('00B053');\n  const [selectedColor, setSelectedColor] = React.useState('#00B053');\n  const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {\n    setSelectedValue(data.selectedValue);\n    setSelectedColor(data.selectedColor);\n  };\n\n  return (\n    <>\n      <SwatchPicker aria-label=\"SwatchPicker default\" selectedValue={selectedValue} onSelectionChange={handleSelect}>\n        <ColorSwatch color=\"#FF1921\" value=\"FF1921\" aria-label=\"red\" />\n        <ColorSwatch color=\"#FFC12E\" value=\"FFC12E\" aria-label=\"orange\" />\n        <ColorSwatch color=\"#FEFF37\" value=\"FEFF37\" aria-label=\"yellow\" />\n        <ColorSwatch disabled color=\"#90D057\" value=\"90D057\" aria-label=\"light green\" />\n        <ColorSwatch color=\"#00B053\" value=\"00B053\" aria-label=\"green\" />\n        <ColorSwatch color=\"#00AFED\" value=\"00AFED\" aria-label=\"light blue\" />\n        <ColorSwatch color=\"#006EBD\" value=\"006EBD\" aria-label=\"blue\" />\n        <ColorSwatch color=\"#011F5E\" value=\"011F5E\" aria-label=\"dark blue\" />\n        <ColorSwatch color=\"#712F9E\" value=\"712F9E\" aria-label=\"purple\" />\n      </SwatchPicker>\n\n      <div\n        style={{\n          backgroundColor: selectedColor,\n        }}\n      />\n    </>\n  );\n};\n```\n\n## Specification\n\nSee the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.\n\n## API\n\nFor information about the components, please refer to the [API documentation](https://react.fluentui.dev/?path=/docs/preview-components-swatchpicker--default).\n","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"dbb856a22fab6021463d58dd45839c80032d8bf8","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","bundle-size":"monosize measure","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.5.0","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.20.2","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.239","@fluentui/react-theme":"0.0.0-nightly-20240515-0405.1","@fluentui/react-tabster":"0.0.0-nightly-20240515-0405.1","@fluentui/react-utilities":"0.0.0-nightly-20240515-0405.1","@fluentui/react-jsx-runtime":"0.0.0-nightly-20240515-0405.1","@fluentui/react-shared-contexts":"0.0.0-nightly-20240515-0405.1","@fluentui/react-context-selector":"0.0.0-nightly-20240515-0405.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"0.0.0-nightly-20240515-0405.1","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"0.0.0-nightly-20240515-0405.1"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.0.0-nightly-20240515-0405.1_1715746962269_0.45840546762712675","host":"s3://npm-registry-packages"}},"0.0.0-nightly-20240516-0406.1":{"name":"@fluentui/react-swatch-picker-preview","version":"0.0.0-nightly-20240516-0406.1","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.0.0-nightly-20240516-0406.1","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"3f4a286e49a0c2bcb58b5273c90e18e3229f0295","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.0.0-nightly-20240516-0406.1.tgz","fileCount":4,"integrity":"sha512-/zJ8aepm/9N/iWEWSDVLiEc9cnM02ufHN4/adoQ0WxPXJ5qvjUjACihlocsrO2zPvj/s9RZlgtctw1ye7+DgCQ==","signatures":[{"sig":"MEUCIQDWlPsKNK/iSR9qoVzWDTdRWQbGQiUf4RcAJ9fugiLSFwIgO7NCjMZW07PCS3Ldss8VnwORPqGSaEdghT8+dbYfByU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":14171},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# @fluentui/react-swatch-picker-preview\n\n**React Swatch Picker components for [Fluent UI React](https://react.fluentui.dev/)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\nThe SwatchPicker is used in graphic and text editors. It allows user to choose a needed color, image or pattern.\nThe SwatchPicker can be integrated within a popover or used as a standalone feature.\n\n## Usage\n\nTo import React SwatchPicker components:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n```\n\nSimple example of SwatchPicker Usage:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n\nexport const App = () => {\n  const [selectedValue, setSelectedValue] = React.useState('00B053');\n  const [selectedColor, setSelectedColor] = React.useState('#00B053');\n  const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {\n    setSelectedValue(data.selectedValue);\n    setSelectedColor(data.selectedColor);\n  };\n\n  return (\n    <>\n      <SwatchPicker aria-label=\"SwatchPicker default\" selectedValue={selectedValue} onSelectionChange={handleSelect}>\n        <ColorSwatch color=\"#FF1921\" value=\"FF1921\" aria-label=\"red\" />\n        <ColorSwatch color=\"#FFC12E\" value=\"FFC12E\" aria-label=\"orange\" />\n        <ColorSwatch color=\"#FEFF37\" value=\"FEFF37\" aria-label=\"yellow\" />\n        <ColorSwatch disabled color=\"#90D057\" value=\"90D057\" aria-label=\"light green\" />\n        <ColorSwatch color=\"#00B053\" value=\"00B053\" aria-label=\"green\" />\n        <ColorSwatch color=\"#00AFED\" value=\"00AFED\" aria-label=\"light blue\" />\n        <ColorSwatch color=\"#006EBD\" value=\"006EBD\" aria-label=\"blue\" />\n        <ColorSwatch color=\"#011F5E\" value=\"011F5E\" aria-label=\"dark blue\" />\n        <ColorSwatch color=\"#712F9E\" value=\"712F9E\" aria-label=\"purple\" />\n      </SwatchPicker>\n\n      <div\n        style={{\n          backgroundColor: selectedColor,\n        }}\n      />\n    </>\n  );\n};\n```\n\n## Specification\n\nSee the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.\n\n## API\n\nFor information about the components, please refer to the [API documentation](https://react.fluentui.dev/?path=/docs/preview-components-swatchpicker--default).\n","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"de7311520559255c136d0151adf4a0b2a3f0ea39","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","bundle-size":"monosize measure","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.5.0","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.20.2","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.239","@fluentui/react-theme":"0.0.0-nightly-20240516-0406.1","@fluentui/react-tabster":"0.0.0-nightly-20240516-0406.1","@fluentui/react-utilities":"0.0.0-nightly-20240516-0406.1","@fluentui/react-jsx-runtime":"0.0.0-nightly-20240516-0406.1","@fluentui/react-shared-contexts":"0.0.0-nightly-20240516-0406.1","@fluentui/react-context-selector":"0.0.0-nightly-20240516-0406.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"0.0.0-nightly-20240516-0406.1","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"0.0.0-nightly-20240516-0406.1"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.0.0-nightly-20240516-0406.1_1715833520233_0.6749094411451089","host":"s3://npm-registry-packages"}},"0.6.0":{"name":"@fluentui/react-swatch-picker-preview","version":"0.6.0","license":"MIT","_id":"@fluentui/react-swatch-picker-preview@0.6.0","maintainers":[{"name":"sopranopillow","email":"esteban.230@hotmail.com"},{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"chrisdholt","email":"chrisholtco@gmail.com"},{"name":"miroslavstastny","email":"miroslav.stastny@gmail.com"},{"name":"levithomason","email":"me@levithomason.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"uifrnbot","email":"uifrnbot@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"layershifter","email":"a@fedyashov.com"},{"name":"ling1726","email":"lingfangao@hotmail.com"},{"name":"travisspomer","email":"travis+npm@greeneclipsesoftware.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"17fcb99a258b418edf0c8a6e019e2ec019550fff","tarball":"https://registry.npmjs.org/@fluentui/react-swatch-picker-preview/-/react-swatch-picker-preview-0.6.0.tgz","fileCount":161,"integrity":"sha512-inVDpMlWUUl3TaJ3AZuZdRd+ve57r54KMqqbNh5bomdcqPNvMfsFX06rYs2BkddeaNxjSQVmA7y3/1A1bVjVQw==","signatures":[{"sig":"MEQCIF5RGSuvm96l5A9d3Lm2cuWcKVshAFBKXoXaqtg7/zCXAiBxr+nsDE6XaTqfaKoensHSxgzJfd/vGK4nIn3c7xLuBg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":267724},"main":"lib-commonjs/index.js","module":"lib/index.js","exports":{".":{"node":"./lib-commonjs/index.js","types":"./dist/index.d.ts","import":"./lib/index.js","require":"./lib-commonjs/index.js"},"./package.json":"./package.json"},"gitHead":"3ae9ed772fbcedeff1a76e154f6eb7d515785698","scripts":{"e2e":"cypress run --component","lint":"just-scripts lint","test":"jest --passWithNoTests","build":"just-scripts build","clean":"just-scripts clean","start":"yarn storybook","test-ssr":"test-ssr \"./stories/**/*.stories.tsx\"","e2e:local":"cypress open --component","storybook":"start-storybook","type-check":"tsc -b tsconfig.json","bundle-size":"monosize measure","generate-api":"just-scripts generate-api"},"typings":"./dist/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"beachball":{"disallowedChangeTypes":["major","prerelease"]},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"10.5.0","description":"New fluentui react package","directories":{},"sideEffects":false,"_nodeVersion":"18.20.2","dependencies":{"@swc/helpers":"^0.5.1","@griffel/react":"^1.5.14","@fluentui/react-icons":"^2.0.239","@fluentui/react-theme":"^9.1.19","@fluentui/react-tabster":"^9.21.2","@fluentui/react-utilities":"^9.18.8","@fluentui/react-jsx-runtime":"^9.0.37","@fluentui/react-shared-contexts":"^9.18.0","@fluentui/react-context-selector":"^9.1.59"},"_hasShrinkwrap":false,"devDependencies":{"@fluentui/eslint-plugin":"*","@fluentui/scripts-tasks":"*","@fluentui/scripts-cypress":"*","@fluentui/react-conformance":"*","@fluentui/scripts-api-extractor":"*","@fluentui/react-conformance-griffel":"*"},"peerDependencies":{"react":">=16.8.0 <19.0.0","react-dom":">=16.8.0 <19.0.0","@types/react":">=16.8.0 <19.0.0","@types/react-dom":">=16.8.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-swatch-picker-preview_0.6.0_1715851409535_0.23516619379640913","host":"s3://npm-registry-packages"}}},"time":{"created":"2024-03-27T04:22:36.764Z","modified":"2026-07-24T19:29:37.400Z","0.0.0-nightly-20240327-0404.1":"2024-03-27T04:22:37.095Z","0.1.0":"2024-03-27T10:29:24.822Z","0.0.0-nightly-20240328-0407.1":"2024-03-28T04:26:40.283Z","0.2.0":"2024-03-28T10:43:48.008Z","0.0.0-nightly-20240329-0405.1":"2024-03-29T04:24:21.927Z","0.0.0-nightly-20240401-0408.1":"2024-04-01T04:26:03.490Z","0.0.0-nightly-20240402-0405.1":"2024-04-02T04:27:56.762Z","0.2.1":"2024-04-02T09:42:44.384Z","0.0.0-nightly-20240403-0405.1":"2024-04-03T04:23:29.581Z","0.0.0-nightly-20240404-0406.1":"2024-04-04T04:27:05.093Z","0.0.0-nightly-20240405-0409.1":"2024-04-05T04:29:32.895Z","0.0.0-nightly-20240408-0406.1":"2024-04-08T04:25:36.665Z","0.0.0-nightly-20240409-0405.1":"2024-04-09T04:23:10.226Z","0.0.0-nightly-20240411-0405.1":"2024-04-11T04:29:05.837Z","0.0.0-nightly-20240415-0407.1":"2024-04-15T04:23:28.754Z","0.0.0-nightly-20240417-0406.1":"2024-04-17T04:25:46.776Z","0.3.0":"2024-04-17T21:53:09.324Z","0.0.0-nightly-20240418-0406.1":"2024-04-18T04:23:16.364Z","0.0.0-nightly-20240419-0408.1":"2024-04-19T04:26:50.885Z","0.0.0-nightly-20240422-0407.1":"2024-04-22T04:29:10.851Z","0.0.0-nightly-20240423-0406.1":"2024-04-23T04:24:28.124Z","0.4.0":"2024-04-23T08:16:49.044Z","0.0.0-nightly-20240424-0405.1":"2024-04-24T04:24:28.071Z","0.0.0-nightly-20240425-0408.1":"2024-04-25T04:24:43.120Z","0.0.0-nightly-20240426-0405.1":"2024-04-26T04:26:54.802Z","0.0.0-nightly-20240429-0407.1":"2024-04-29T04:24:25.511Z","0.0.0-nightly-20240430-0406.1":"2024-04-30T04:27:32.701Z","0.0.0-nightly-20240501-0406.1":"2024-05-01T04:24:16.695Z","0.0.0-nightly-20240502-0405.1":"2024-05-02T04:23:38.818Z","0.4.1":"2024-05-02T11:34:33.151Z","0.0.0-nightly-20240503-0405.1":"2024-05-03T04:23:26.048Z","0.0.0-nightly-20240506-0407.1":"2024-05-06T04:25:51.590Z","0.4.2":"2024-05-06T12:54:48.595Z","0.0.0-nightly-20240507-0407.1":"2024-05-07T04:24:55.358Z","0.0.0-nightly-20240508-0405.1":"2024-05-08T04:26:54.701Z","0.0.0-nightly-20240509-0405.1":"2024-05-09T04:23:02.360Z","0.4.3":"2024-05-09T19:35:06.084Z","0.0.0-nightly-20240510-0407.1":"2024-05-10T04:25:32.665Z","0.0.0-nightly-20240513-0408.1":"2024-05-13T04:30:00.116Z","0.5.0":"2024-05-13T12:34:00.372Z","0.0.0-nightly-20240514-0405.1":"2024-05-14T04:27:45.231Z","0.0.0-nightly-20240515-0405.1":"2024-05-15T04:22:42.415Z","0.0.0-nightly-20240516-0406.1":"2024-05-16T04:25:20.372Z","0.6.0":"2024-05-16T09:23:29.735Z"},"bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"license":"MIT","homepage":"https://github.com/microsoft/fluentui#readme","repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"description":"New fluentui react package","maintainers":[{"email":"fui-svc@microsoft.com","name":"uifabricteam"},{"email":"uifrnbot@microsoft.com","name":"uifrnbot"},{"email":"npmjs@microsoft.com","name":"microsoft1es"},{"email":"microsoft-oss-publishing@microsoft.com","name":"microsoft-oss-releases"}],"readme":"# @fluentui/react-swatch-picker-preview\n\n**React Swatch Picker components for [Fluent UI React](https://react.fluentui.dev/)**\n\nThese are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.\n\nThe SwatchPicker is used in graphic and text editors. It allows user to choose a needed color, image or pattern.\nThe SwatchPicker can be integrated within a popover or used as a standalone feature.\n\n## Usage\n\nTo import React SwatchPicker components:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n```\n\nSimple example of SwatchPicker Usage:\n\n```tsx\nimport { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';\n\nexport const App = () => {\n  const [selectedValue, setSelectedValue] = React.useState('00B053');\n  const [selectedColor, setSelectedColor] = React.useState('#00B053');\n  const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {\n    setSelectedValue(data.selectedValue);\n    setSelectedColor(data.selectedColor);\n  };\n\n  return (\n    <>\n      <SwatchPicker aria-label=\"SwatchPicker default\" selectedValue={selectedValue} onSelectionChange={handleSelect}>\n        <ColorSwatch color=\"#FF1921\" value=\"FF1921\" aria-label=\"red\" />\n        <ColorSwatch color=\"#FFC12E\" value=\"FFC12E\" aria-label=\"orange\" />\n        <ColorSwatch color=\"#FEFF37\" value=\"FEFF37\" aria-label=\"yellow\" />\n        <ColorSwatch disabled color=\"#90D057\" value=\"90D057\" aria-label=\"light green\" />\n        <ColorSwatch color=\"#00B053\" value=\"00B053\" aria-label=\"green\" />\n        <ColorSwatch color=\"#00AFED\" value=\"00AFED\" aria-label=\"light blue\" />\n        <ColorSwatch color=\"#006EBD\" value=\"006EBD\" aria-label=\"blue\" />\n        <ColorSwatch color=\"#011F5E\" value=\"011F5E\" aria-label=\"dark blue\" />\n        <ColorSwatch color=\"#712F9E\" value=\"712F9E\" aria-label=\"purple\" />\n      </SwatchPicker>\n\n      <div\n        style={{\n          backgroundColor: selectedColor,\n        }}\n      />\n    </>\n  );\n};\n```\n\n## Specification\n\nSee the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.\n\n## API\n\nFor information about the components, please refer to the [API documentation](https://react.fluentui.dev/?path=/docs/preview-components-swatchpicker--default).\n","readmeFilename":"README.md"}