@fluentui/react-storybook-addon 0.5.1 → 0.6.0-experimental.fluent-cli.20260409-f92690ecf6.0

package/CHANGELOG.md

@@ -1,12 +1,37 @@
 # Change Log - @fluentui/react-storybook-addon
 
-This log was last generated on Tue, 04 Nov 2025 14:46:31 GMT and should not be manually modified.
+This log was last generated on Thu, 09 Apr 2026 08:01:26 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.6.0-experimental.fluent-cli.20260409-f92690ecf6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v0.6.0-experimental.fluent-cli.20260409-f92690ecf6.0)
+
+Thu, 09 Apr 2026 08:01:26 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon_v0.6.0..@fluentui/react-storybook-addon_v0.6.0-experimental.fluent-cli.20260409-f92690ecf6.0)
+
+### Changes
+
+- Release experimental tools experimental.fluent-cli.20260409-f92690ecf6 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
+
+## [0.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v0.6.0)
+
+Tue, 03 Mar 2026 13:16:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon_v0.5.1..@fluentui/react-storybook-addon_v0.6.0)
+
+### Minor changes
+
+- feat: upgrade to storybook 9 ([PR #35459](https://github.com/microsoft/fluentui/pull/35459) by dmytrokirpa@microsoft.com)
+- BREAKING: upgrade storybook to v8 ([PR #35279](https://github.com/microsoft/fluentui/pull/35279) by dmytrokirpa@microsoft.com)
+
+### Patches
+
+- chore: migrate source to react 19 ([PR #35434](https://github.com/microsoft/fluentui/pull/35434) by martinhochel@microsoft.com)
+- chore: bump storybook to mitigate CVE ([PR #35748](https://github.com/microsoft/fluentui/pull/35748) by martinhochel@microsoft.com)
+- chore: Bump @griffel/react package. ([PR #35469](https://github.com/microsoft/fluentui/pull/35469) by estebanmu@microsoft.com)
+
 ## [0.5.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v0.5.1)
 
-Tue, 04 Nov 2025 14:46:31 GMT 
+Tue, 04 Nov 2025 14:47:00 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon_v0.5.0..@fluentui/react-storybook-addon_v0.5.1)
 
 ### Patches

package/README.md

@@ -38,6 +38,15 @@ export const ThemePicker: React.FC<{ context: FluentStoryContext }> = ({ context
 };
 ```
 
+### Shared Storybook Preview Styles
+
+The package ships a `styles.css` file with shared Storybook preview styles (docs layout, table formatting, theme-aware backgrounds, etc.). Import it once in your Storybook `preview.js`/`preview.ts`:
+
+```js
+// .storybook/preview.js
+import '@fluentui/react-storybook-addon/styles.css';
+```
+
 ### Augmented Docs Blocks
 
 This presets uses [custom docs container and page](https://storybook.js.org/docs/7/writing-docs/autodocs#customize-the-docs-container) for unified FluentUI experience including:

package/dist/index.d.ts

@@ -1,9 +1,17 @@
-import { Args } from '@storybook/react';
-import { Parameters as Parameters_2 } from '@storybook/react';
-import { StoryContext } from '@storybook/react';
+import { Args } from '@storybook/react-webpack5';
+import type { JSXElement } from '@fluentui/react-utilities';
+import { Parameters as Parameters_2 } from '@storybook/react-webpack5';
+import * as React_2 from 'react';
+import { StoryContext } from '@storybook/react-webpack5';
 
 export declare const DIR_ID: "storybook_fluentui-react-addon_dir";
 
+/**
+ * Canvas component to wrap stories in a styled container.
+ * Provides a similar experience to Storybook's v7 `Canvas` component.
+ */
+export declare const FluentCanvas: (props: React_2.ComponentProps<"div">) => JSXElement;
+
 /**
  * Configuration for docs components
  */
@@ -40,11 +48,24 @@ export declare interface FluentParameters extends Parameters_2 {
     };
 }
 
+/**
+ * Story component to render stories in an iframe.
+ * Provides a similar experience to Storybook's v7 `Story` component.
+ */
+export declare const FluentStory: ({ id, height }: FluentStoryProps) => JSXElement;
+
 export declare interface FluentStoryContext extends StoryContext {
     globals: FluentGlobals;
     parameters: FluentParameters;
 }
 
+declare type FluentStoryProps = {
+    /** The unique identifier for the story */
+    id: string;
+    /** The height of the iframe */
+    height?: string | number;
+};
+
 export declare function parameters(options?: FluentParameters): FluentParameters;
 
 declare const STRICT_MODE_ID: "storybook_fluentui-react-addon_strict-mode";

package/dist/styles.css

@@ -0,0 +1,470 @@
+#storybook-docs .sbdocs-content {
+  font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
+    sans-serif;
+  max-width: 1200px;
+}
+
+#storybook-docs h1.sbdocs-title {
+  font-family: inherit;
+  font-size: 44px;
+  line-height: 60px;
+  /* identical to box height, or 143% */
+  font-weight: 900;
+  letter-spacing: -0.04em;
+  color: #000000;
+  margin-top: 49px;
+}
+
+#storybook-docs details:not(.sbdocs-preview details) {
+  position: relative;
+  z-index: 99;
+}
+
+#storybook-docs .sbdocs p:not(.sbdocs-preview p) {
+  font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
+    sans-serif;
+  font-size: 18px;
+  line-height: 27px;
+  letter-spacing: -0.01em;
+  color: #000000;
+  margin-top: 24px;
+}
+
+#storybook-docs .sbdocs-wrapper {
+  background: white;
+  min-height: auto;
+}
+
+#storybook-docs .sbdocs-img.featured-image {
+  margin: 48px 0;
+  display: block;
+  border-radius: 24px;
+}
+
+#storybook-docs .sbdocs-img {
+  max-width: 100%;
+}
+
+#storybook-docs .sbdocs hr:not(.sbdocs-preview hr) {
+  margin: 48px 0;
+  height: 0;
+  border-top: 1px solid #ebebeb;
+}
+
+#storybook-docs .sbdocs h2:not(.sbdocs-preview h2) {
+  font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
+    sans-serif;
+  font-size: 24px;
+  line-height: 28px;
+  letter-spacing: -0.04em;
+  color: black;
+  border-top: 1px solid #ebebeb;
+  border-bottom: none;
+  margin: 48px 0 15px 0;
+  padding: 48px 0 0 0;
+}
+
+#storybook-docs .sbdocs h2 code:not(.sbdocs-preview h2 code) {
+  border-radius: 4px;
+  font-size: 20px;
+}
+
+#storybook-docs .sbdocs-h3 {
+  font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
+    sans-serif;
+  font-size: 18px;
+  line-height: 24px;
+  margin: 25px 0 0 0 !important;
+  letter-spacing: -0.01em;
+  color: #000000;
+}
+
+#storybook-docs .sbdocs-h3 code {
+  border-radius: 3px;
+  font-size: 16px;
+}
+
+/* Only apply to H3s inside of stories which have a parent with an ID */
+#storybook-docs [id] > .sbdocs-h3:before {
+  content: '';
+  display: block;
+  height: 40px;
+  margin: -40px 0 0;
+}
+
+#storybook-docs .sbdocs li:not(.sbdocs-preview li) {
+  font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
+    sans-serif;
+  font-size: 16px;
+  line-height: 150%;
+  letter-spacing: -0.01em;
+
+  /* Neutrals / Web / Gray 200 #1B1A19 */
+  color: #1b1a19;
+  margin-top: 8px;
+}
+
+#storybook-docs .sbdocs ul:not(.sbdocs-preview ul) {
+  margin: 12px 0;
+}
+
+#storybook-docs .sbdocs-ul li:not(.sbdocs-preview .sbdocs-ul li) {
+  list-style: none;
+  position: relative;
+}
+
+#storybook-docs .sbdocs-ul .sbdocs-li::before {
+  position: absolute;
+  content: '•';
+  color: #8d8d8d;
+  top: 0;
+  left: -15px;
+}
+
+#storybook-docs .sbdocs-ol .sbdocs-li::marker {
+  color: #8d8d8d;
+}
+
+#storybook-docs .sbdocs-preview {
+  border-radius: 16px;
+  background: var(--colorBrandBackgroundInverted, #fff);
+  padding: 0;
+  box-shadow: none;
+  border: 1px solid var(--colorNeutralStroke1, #e1dfdd);
+}
+
+#storybook-docs .sbdocs .docs-story div[scale] {
+  height: auto !important;
+}
+
+#storybook-docs .innerZoomElementWrapper {
+  padding: 30px;
+}
+
+#storybook-docs .sbdocs-preview > .os-host {
+  display: none;
+}
+
+#storybook-docs span + .sbdocs .docblock-argstable tbody tr td button {
+  color: #0078d4;
+  color: red;
+}
+
+#storybook-docs .docs-story + div {
+  background: #11100f;
+}
+
+#storybook-docs .sbdocs-content > div:last-child {
+  margin-bottom: 96px;
+}
+
+#storybook-docs .docs-story > div {
+  padding: 0;
+  background: none;
+}
+
+#storybook-docs .docs-story > div:last-child {
+  right: 31px;
+  border-radius: 24px;
+}
+
+.docs-story + div > div:last-child {
+  background: #000000;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 5px 5px 0px 0px;
+  right: 31px;
+}
+
+.docs-story + div > div:last-child > button {
+  color: white;
+  font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
+    sans-serif;
+  font-size: 14px;
+  line-height: 150%;
+  text-align: center;
+  letter-spacing: -0.01em;
+}
+
+#storybook-docs a.sbdocs-a {
+  color: #0078d4;
+  text-decoration: underline;
+}
+
+/* Styles for Github-flavored Markdown tables */
+#storybook-docs table:not(.docblock-argstable, .sbdocs-preview table) {
+  margin: 16px 0px;
+  font-size: 14px;
+  line-height: 24px;
+  padding: 0;
+  border-collapse: collapse;
+}
+
+#storybook-docs table:not(.docblock-argstable, .sbdocs-preview table) tr {
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+#storybook-docs table:not(.docblock-argstable, .sbdocs-preview table) th {
+  font-weight: bold;
+  color: rgb(51, 51, 51);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 6px 13px;
+}
+
+#storybook-docs table:not(.docblock-argstable, .sbdocs-preview table) td {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 6px 13px;
+}
+
+/*  */
+/* Args Table */
+/*  */
+
+#storybook-docs .docblock-argstable tbody {
+  box-shadow: none;
+  border-left: none;
+  border-right: none;
+}
+
+#storybook-docs .docblock-argstable-head th {
+  letter-spacing: -0.01em;
+  color: black;
+  font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
+    sans-serif;
+  font-size: 16px;
+  line-height: 150%;
+  font-weight: 600;
+}
+
+#storybook-docs thead.docblock-argstable-head {
+  border-bottom: 1px solid #edebe9;
+}
+
+#storybook-docs .docblock-argstable-body > tr > td:nth-child(4) {
+  display: none;
+}
+
+#storybook-docs .docblock-argstable-head > tr > th:nth-child(4) {
+  display: none;
+}
+
+#storybook-docs .docblock-argstable tbody tr {
+  border: none;
+}
+
+#storybook-docs table.docblock-argstable tbody.docblock-argstable-body td,
+#storybook-docs .docblock-argstable th {
+  padding-top: 12px;
+  padding-bottom: 12px;
+  padding-left: 16px;
+}
+
+#storybook-docs .docblock-argstable tbody tr td:nth-child(1) span {
+  font-weight: normal;
+  font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
+    sans-serif;
+  font-size: 16px;
+  line-height: 130%;
+  letter-spacing: -0.01em;
+  color: #616161;
+}
+
+#storybook-docs .docblock-argstable tbody tr td {
+  vertical-align: top;
+}
+
+#storybook-docs .docblock-argstable-body > tr > td > div > div > button {
+  color: #0078d4;
+  line-height: 21px;
+}
+
+#storybook-docs code:not(.sbdocs-preview code),
+#storybook-docs .docblock-argstable tbody tr td:nth-child(3) > div > span,
+#storybook-docs .docblock-argstable-body > tr > td:nth-child(2) > div:nth-child(2) span,
+#storybook-docs .docblock-argstable-body > tr > td:nth-child(2) > div:nth-child(1) > div > span,
+#storybook-docs .css-16d4d7t {
+  font-family: 'Cascadia Code', Menlo, 'Courier New', Courier, monospace;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 130%;
+  letter-spacing: -0.2px;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+
+#storybook-docs code.sbdocs-code,
+#storybook-docs .sbdocs-p code,
+#storybook-docs .sbdocs-li code,
+#storybook-docs .docblock-argstable code,
+#storybook-docs .docblock-argstable tbody tr td:nth-child(3) > div > span,
+#storybook-docs .docblock-argstable-body > tr > td:nth-child(2) > div:nth-child(2) span,
+#storybook-docs .docblock-argstable-body > tr > td:nth-child(2) > div:nth-child(1) > div > span,
+#storybook-docs .css-16d4d7t {
+  font-size: 14px;
+  background: #f0f0f0;
+  border-radius: 4px;
+  padding: 1px 4px;
+  margin: 0 3px 0 3px;
+  color: black;
+  border: none;
+  line-height: 1.5;
+}
+
+#storybook-docs .docblock-argstable code {
+  white-space: normal;
+}
+
+#storybook-docs code:not(.sbdocs-preview code) {
+  padding: 0.1em 0.2em;
+  display: inline-block;
+  background-color: rgba(17, 16, 15, 0.1);
+  border-radius: 2px;
+}
+
+.os-content-glue {
+  width: auto !important;
+}
+
+#storybook-docs .sbdocs-preview .prismjs {
+  overflow: hidden;
+}
+
+#storybook-docs .os-content .prismjs * {
+  font-family: 'Cascadia Code', Menlo, 'Courier New', Courier, monospace;
+  font-size: 14px;
+  line-height: 1.4em;
+}
+
+#storybook-docs .sbdocs-preview .prismjs code {
+  color: white;
+  background: #11100f;
+  margin: 0;
+  overflow-x: auto;
+}
+
+#storybook-docs .docblock-argstable-body td > div > p,
+#storybook-docs .docblock-argstable-body > tr > td:nth-child(2) p,
+#storybook-docs .docblock-argstable-body > tr > td:nth-child(2) > div:nth-child(1) > span {
+  font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
+    sans-serif;
+  font-size: 16px;
+  line-height: 130%;
+  color: black;
+  letter-spacing: -0.01em;
+}
+
+#storybook-docs .docblock-argstable tr > :nth-child(1) {
+  width: 4%;
+}
+
+#storybook-docs .docblock-argstable tr > :nth-child(2) {
+  width: 100%;
+}
+
+#storybook-docs .os-padding {
+  z-index: 0;
+}
+
+@font-face {
+  font-family: 'Segoe UI';
+  src: local('Segoe UI Light'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff2) format('woff2'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff) format('woff'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.ttf) format('truetype');
+  font-weight: 100;
+}
+
+@font-face {
+  font-family: 'Segoe UI';
+  src: local('Segoe UI Semilight'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff2) format('woff2'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff) format('woff'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.ttf) format('truetype');
+  font-weight: 200;
+}
+
+@font-face {
+  font-family: 'Segoe UI';
+  src: local('Segoe UI'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff2) format('woff2'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff) format('woff'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.ttf) format('truetype');
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: 'Segoe UI';
+  src: local('Segoe UI Semibold'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff2) format('woff2'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff) format('woff'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.ttf) format('truetype');
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: 'Segoe UI';
+  src: local('Segoe UI Bold'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff2) format('woff2'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff) format('woff'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.ttf) format('truetype');
+  font-weight: 700;
+}
+
+body,
+body h1,
+body h2,
+body p,
+body ul,
+body ul li {
+  font-family: 'Segoe UI' !important;
+}
+
+h1.fluent {
+  font-weight: 700;
+  font-size: 40px;
+  font-family: 'Segoe UI';
+  line-height: 60px;
+  letter-spacing: -0.16px;
+}
+
+h1.fluent .fluent-version {
+  display: block;
+  font-size: 24px;
+  /* --font-size-base-600 */
+  line-height: 32px;
+  color: #707070;
+  /* --color-neutral-foreground-3 */
+}
+
+h2.fluent {
+  font-weight: 600;
+  font-size: 24px;
+  font-family: 'Segoe UI';
+  line-height: 36px;
+  letter-spacing: -0.16px;
+}
+
+/* remove the docs wrapper bg to let page bg show through */
+/* remove unnecessary padding now that theme switcher is not taking up space */
+#storybook-docs .sbdocs-wrapper {
+  background: transparent !important;
+  padding: 0 48px;
+}
+
+/* sb-show-main is missing during page transitions causing a page shift */
+/* todo: cleanup once we no longer inherit docs-root */
+.sb-show-main.sb-main-fullscreen,
+.sb-main-fullscreen {
+  margin: 0;
+  padding: 0;
+  display: block;
+}
+
+/* remove loading overlay */
+.sb-preparing-story,
+.sb-preparing-docs,
+.sb-nopreview,
+.sb-errordisplay,
+.sidebar-container .search-field + div {
+  display: none !important;
+}

package/lib/components/DirectionSwitch.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { IconButton } from '@storybook/components';
-import { styled } from '@storybook/theming';
+import { IconButton } from 'storybook/internal/components';
+import { styled } from 'storybook/theming';
 import { DIR_ID } from '../constants';
 import { useGlobals } from '../hooks';
 const Monospace = styled.span({

package/lib/components/DirectionSwitch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DirectionSwitch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { IconButton } from '@storybook/components';\nimport { styled } from '@storybook/theming';\n\nimport { JSXElement } from '@fluentui/react-utilities';\nimport { DIR_ID } from '../constants';\nimport { useGlobals } from '../hooks';\n\nconst Monospace = styled.span({\n  fontFamily: \"'Cascadia Code', Menlo, 'Courier New', Courier, monospace\",\n  letterSpacing: '-0.05em',\n});\n\nexport const DirectionSwitch = (): JSXElement => {\n  const [globals, updateGlobals] = useGlobals();\n\n  const direction = globals[DIR_ID] ?? 'ltr';\n  const isLTR = direction === 'ltr';\n\n  const toggleDirection = React.useCallback(\n    () =>\n      updateGlobals({\n        [DIR_ID]: isLTR ? 'rtl' : 'ltr',\n      }),\n    [isLTR, updateGlobals],\n  );\n\n  return (\n    <IconButton key={DIR_ID} title=\"Change Direction\" onClick={toggleDirection}>\n      <div>\n        Direction: <Monospace>{direction.toUpperCase()}</Monospace>\n      </div>\n    </IconButton>\n  );\n};\n"],"names":["React","IconButton","styled","DIR_ID","useGlobals","Monospace","span","fontFamily","letterSpacing","DirectionSwitch","globals","updateGlobals","direction","isLTR","toggleDirection","useCallback","key","title","onClick","div","toUpperCase"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,wBAAwB;AACnD,SAASC,MAAM,QAAQ,qBAAqB;AAG5C,SAASC,MAAM,QAAQ,eAAe;AACtC,SAASC,UAAU,QAAQ,WAAW;AAEtC,MAAMC,YAAYH,OAAOI,IAAI,CAAC;IAC5BC,YAAY;IACZC,eAAe;AACjB;AAEA,OAAO,MAAMC,kBAAkB;IAC7B,MAAM,CAACC,SAASC,cAAc,GAAGP;QAEfM;IAAlB,MAAME,YAAYF,CAAAA,kBAAAA,OAAO,CAACP,OAAO,cAAfO,6BAAAA,kBAAmB;IACrC,MAAMG,QAAQD,cAAc;IAE5B,MAAME,kBAAkBd,MAAMe,WAAW,CACvC,IACEJ,cAAc;YACZ,CAACR,OAAO,EAAEU,QAAQ,QAAQ;QAC5B,IACF;QAACA;QAAOF;KAAc;IAGxB,qBACE,oBAACV;QAAWe,KAAKb;QAAQc,OAAM;QAAmBC,SAASJ;qBACzD,oBAACK,aAAI,6BACQ,oBAACd,iBAAWO,UAAUQ,WAAW;AAIpD,EAAE"}
+{"version":3,"sources":["../src/components/DirectionSwitch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { IconButton } from 'storybook/internal/components';\nimport { styled } from 'storybook/theming';\n\nimport { JSXElement } from '@fluentui/react-utilities';\nimport { DIR_ID } from '../constants';\nimport { useGlobals } from '../hooks';\n\nconst Monospace = styled.span({\n  fontFamily: \"'Cascadia Code', Menlo, 'Courier New', Courier, monospace\",\n  letterSpacing: '-0.05em',\n});\n\nexport const DirectionSwitch = (): JSXElement => {\n  const [globals, updateGlobals] = useGlobals();\n\n  const direction = globals[DIR_ID] ?? 'ltr';\n  const isLTR = direction === 'ltr';\n\n  const toggleDirection = React.useCallback(\n    () =>\n      updateGlobals({\n        [DIR_ID]: isLTR ? 'rtl' : 'ltr',\n      }),\n    [isLTR, updateGlobals],\n  );\n\n  return (\n    <IconButton key={DIR_ID} title=\"Change Direction\" onClick={toggleDirection}>\n      <div>\n        Direction: <Monospace>{direction.toUpperCase()}</Monospace>\n      </div>\n    </IconButton>\n  );\n};\n"],"names":["React","IconButton","styled","DIR_ID","useGlobals","Monospace","span","fontFamily","letterSpacing","DirectionSwitch","globals","updateGlobals","direction","isLTR","toggleDirection","useCallback","key","title","onClick","div","toUpperCase"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,gCAAgC;AAC3D,SAASC,MAAM,QAAQ,oBAAoB;AAG3C,SAASC,MAAM,QAAQ,eAAe;AACtC,SAASC,UAAU,QAAQ,WAAW;AAEtC,MAAMC,YAAYH,OAAOI,IAAI,CAAC;IAC5BC,YAAY;IACZC,eAAe;AACjB;AAEA,OAAO,MAAMC,kBAAkB;IAC7B,MAAM,CAACC,SAASC,cAAc,GAAGP;QAEfM;IAAlB,MAAME,YAAYF,CAAAA,kBAAAA,OAAO,CAACP,OAAO,cAAfO,6BAAAA,kBAAmB;IACrC,MAAMG,QAAQD,cAAc;IAE5B,MAAME,kBAAkBd,MAAMe,WAAW,CACvC,IACEJ,cAAc;YACZ,CAACR,OAAO,EAAEU,QAAQ,QAAQ;QAC5B,IACF;QAACA;QAAOF;KAAc;IAGxB,qBACE,oBAACV;QAAWe,KAAKb;QAAQc,OAAM;QAAmBC,SAASJ;qBACzD,oBAACK,aAAI,6BACQ,oBAACd,iBAAWO,UAAUQ,WAAW;AAIpD,EAAE"}

package/lib/components/ReactStrictMode.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { IconButton, Icons } from '@storybook/components';
+import { IconButton } from 'storybook/internal/components';
+import { LockIcon } from '@storybook/icons';
 import { STRICT_MODE_ID } from '../constants';
 import { useGlobals } from '../hooks';
 export const ReactStrictMode = ()=>{
@@ -17,7 +18,5 @@ export const ReactStrictMode = ()=>{
         active: isActive,
         title: "Toggle React Strict mode",
         onClick: toggleStrictMode
-    }, /*#__PURE__*/ React.createElement(Icons, {
-        icon: "lock"
-    }));
+    }, /*#__PURE__*/ React.createElement(LockIcon, null));
 };

package/lib/components/ReactStrictMode.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ReactStrictMode.tsx"],"sourcesContent":["import * as React from 'react';\nimport { IconButton, Icons } from '@storybook/components';\n\nimport { JSXElement } from '@fluentui/react-utilities';\nimport { STRICT_MODE_ID } from '../constants';\nimport { useGlobals } from '../hooks';\n\nexport const ReactStrictMode = (): JSXElement => {\n  const [globals, updateGlobals] = useGlobals();\n\n  const isActive = globals[STRICT_MODE_ID] ?? false;\n\n  const toggleStrictMode = React.useCallback(\n    () =>\n      updateGlobals({\n        [STRICT_MODE_ID]: !isActive,\n      }),\n    [isActive, updateGlobals],\n  );\n\n  return (\n    <IconButton key={STRICT_MODE_ID} active={isActive} title=\"Toggle React Strict mode\" onClick={toggleStrictMode}>\n      <Icons icon=\"lock\" />\n    </IconButton>\n  );\n};\n"],"names":["React","IconButton","Icons","STRICT_MODE_ID","useGlobals","ReactStrictMode","globals","updateGlobals","isActive","toggleStrictMode","useCallback","key","active","title","onClick","icon"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,KAAK,QAAQ,wBAAwB;AAG1D,SAASC,cAAc,QAAQ,eAAe;AAC9C,SAASC,UAAU,QAAQ,WAAW;AAEtC,OAAO,MAAMC,kBAAkB;IAC7B,MAAM,CAACC,SAASC,cAAc,GAAGH;QAEhBE;IAAjB,MAAME,WAAWF,CAAAA,0BAAAA,OAAO,CAACH,eAAe,cAAvBG,qCAAAA,0BAA2B;IAE5C,MAAMG,mBAAmBT,MAAMU,WAAW,CACxC,IACEH,cAAc;YACZ,CAACJ,eAAe,EAAE,CAACK;QACrB,IACF;QAACA;QAAUD;KAAc;IAG3B,qBACE,oBAACN;QAAWU,KAAKR;QAAgBS,QAAQJ;QAAUK,OAAM;QAA2BC,SAASL;qBAC3F,oBAACP;QAAMa,MAAK;;AAGlB,EAAE"}
+{"version":3,"sources":["../src/components/ReactStrictMode.tsx"],"sourcesContent":["import * as React from 'react';\nimport { IconButton } from 'storybook/internal/components';\nimport { LockIcon } from '@storybook/icons';\n\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { STRICT_MODE_ID } from '../constants';\nimport { useGlobals } from '../hooks';\n\nexport const ReactStrictMode = (): JSXElement => {\n  const [globals, updateGlobals] = useGlobals();\n\n  const isActive = globals[STRICT_MODE_ID] ?? false;\n\n  const toggleStrictMode = React.useCallback(\n    () =>\n      updateGlobals({\n        [STRICT_MODE_ID]: !isActive,\n      }),\n    [isActive, updateGlobals],\n  );\n\n  return (\n    <IconButton key={STRICT_MODE_ID} active={isActive} title=\"Toggle React Strict mode\" onClick={toggleStrictMode}>\n      <LockIcon />\n    </IconButton>\n  );\n};\n"],"names":["React","IconButton","LockIcon","STRICT_MODE_ID","useGlobals","ReactStrictMode","globals","updateGlobals","isActive","toggleStrictMode","useCallback","key","active","title","onClick"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,gCAAgC;AAC3D,SAASC,QAAQ,QAAQ,mBAAmB;AAG5C,SAASC,cAAc,QAAQ,eAAe;AAC9C,SAASC,UAAU,QAAQ,WAAW;AAEtC,OAAO,MAAMC,kBAAkB;IAC7B,MAAM,CAACC,SAASC,cAAc,GAAGH;QAEhBE;IAAjB,MAAME,WAAWF,CAAAA,0BAAAA,OAAO,CAACH,eAAe,cAAvBG,qCAAAA,0BAA2B;IAE5C,MAAMG,mBAAmBT,MAAMU,WAAW,CACxC,IACEH,cAAc;YACZ,CAACJ,eAAe,EAAE,CAACK;QACrB,IACF;QAACA;QAAUD;KAAc;IAG3B,qBACE,oBAACN;QAAWU,KAAKR;QAAgBS,QAAQJ;QAAUK,OAAM;QAA2BC,SAASL;qBAC3F,oBAACP;AAGP,EAAE"}

package/lib/components/ThemePicker.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { IconButton, Icons, TooltipLinkList, WithTooltip } from '@storybook/components';
-import { useParameter } from '@storybook/manager-api';
+import { IconButton, TooltipLinkList, WithTooltip } from 'storybook/internal/components';
+import { ArrowDownIcon } from '@storybook/icons';
+import { useParameter } from 'storybook/manager-api';
 import { themes, defaultTheme } from '../theme';
 import { THEME_ID } from '../constants';
 import { useGlobals } from '../hooks';
@@ -45,15 +46,13 @@ export const ThemePicker = ()=>{
     return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(WithTooltip, {
         placement: "top",
         trigger: "click",
-        closeOnClick: true,
+        closeOnOutsideClick: true,
         tooltip: renderTooltip
     }, /*#__PURE__*/ React.createElement(IconButton, {
         key: THEME_ID,
         title: "Change Fluent theme",
         active: isActive
-    }, /*#__PURE__*/ React.createElement(Icons, {
-        icon: "arrowdown"
-    }), /*#__PURE__*/ React.createElement("span", {
+    }, /*#__PURE__*/ React.createElement(ArrowDownIcon, null), /*#__PURE__*/ React.createElement("span", {
         style: {
             marginLeft: 5
         }

package/lib/components/ThemePicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ThemePicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { IconButton, Icons, TooltipLinkList, WithTooltip } from '@storybook/components';\nimport { useParameter } from '@storybook/manager-api';\n\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { ThemeIds, themes, defaultTheme } from '../theme';\nimport { THEME_ID } from '../constants';\nimport { useGlobals, FluentParameters } from '../hooks';\n\nexport interface ThemeSelectorItem {\n  id: string;\n  title: string;\n  onClick: () => void;\n  value: string;\n  active: boolean;\n}\n\nfunction createThemeItems(\n  value: typeof themes,\n  changeTheme: (id: ThemeIds) => void,\n  getCurrentTheme: () => ThemeIds,\n): ThemeSelectorItem[] {\n  return value.map(item => {\n    return {\n      id: item.id,\n      title: item.id === defaultTheme.id ? `${item.label} (Default)` : item.label,\n      onClick: () => {\n        changeTheme(item.id);\n      },\n      value: item.id,\n      active: getCurrentTheme() === item.id,\n    };\n  });\n}\n\nexport const ThemePicker = (): JSXElement => {\n  const [globals, updateGlobals] = useGlobals();\n  const fluentTheme: FluentParameters['fluentTheme'] = useParameter('fluentTheme');\n\n  const selectedThemeId = fluentTheme ? fluentTheme : globals[THEME_ID] ?? defaultTheme.id;\n  const selectedTheme = themes.find(entry => entry.id === selectedThemeId);\n\n  const isActive = selectedThemeId !== defaultTheme.id;\n\n  const setTheme = React.useCallback(\n    (id: ThemeIds) => {\n      updateGlobals({ [THEME_ID]: id });\n    },\n    [updateGlobals],\n  );\n\n  const renderTooltip = React.useCallback(\n    (props: { onHide: () => void }) => {\n      return (\n        <TooltipLinkList\n          links={createThemeItems(\n            themes,\n            id => {\n              setTheme(id);\n              props.onHide();\n            },\n            () => selectedThemeId,\n          )}\n        />\n      );\n    },\n    [selectedThemeId, setTheme],\n  );\n\n  return (\n    <>\n      <WithTooltip placement=\"top\" trigger=\"click\" closeOnClick tooltip={renderTooltip}>\n        <IconButton key={THEME_ID} title=\"Change Fluent theme\" active={isActive}>\n          <Icons icon=\"arrowdown\" />\n          <span style={{ marginLeft: 5 }}>Theme: {selectedTheme?.label}</span>\n        </IconButton>\n      </WithTooltip>\n    </>\n  );\n};\n"],"names":["React","IconButton","Icons","TooltipLinkList","WithTooltip","useParameter","themes","defaultTheme","THEME_ID","useGlobals","createThemeItems","value","changeTheme","getCurrentTheme","map","item","id","title","label","onClick","active","ThemePicker","globals","updateGlobals","fluentTheme","selectedThemeId","selectedTheme","find","entry","isActive","setTheme","useCallback","renderTooltip","props","links","onHide","placement","trigger","closeOnClick","tooltip","key","icon","span","style","marginLeft"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,KAAK,EAAEC,eAAe,EAAEC,WAAW,QAAQ,wBAAwB;AACxF,SAASC,YAAY,QAAQ,yBAAyB;AAGtD,SAAmBC,MAAM,EAAEC,YAAY,QAAQ,WAAW;AAC1D,SAASC,QAAQ,QAAQ,eAAe;AACxC,SAASC,UAAU,QAA0B,WAAW;AAUxD,SAASC,iBACPC,KAAoB,EACpBC,WAAmC,EACnCC,eAA+B;IAE/B,OAAOF,MAAMG,GAAG,CAACC,CAAAA;QACf,OAAO;YACLC,IAAID,KAAKC,EAAE;YACXC,OAAOF,KAAKC,EAAE,KAAKT,aAAaS,EAAE,GAAG,GAAGD,KAAKG,KAAK,CAAC,UAAU,CAAC,GAAGH,KAAKG,KAAK;YAC3EC,SAAS;gBACPP,YAAYG,KAAKC,EAAE;YACrB;YACAL,OAAOI,KAAKC,EAAE;YACdI,QAAQP,sBAAsBE,KAAKC,EAAE;QACvC;IACF;AACF;AAEA,OAAO,MAAMK,cAAc;IACzB,MAAM,CAACC,SAASC,cAAc,GAAGd;IACjC,MAAMe,cAA+CnB,aAAa;QAEdiB;IAApD,MAAMG,kBAAkBD,cAAcA,cAAcF,CAAAA,oBAAAA,OAAO,CAACd,SAAS,cAAjBc,+BAAAA,oBAAqBf,aAAaS,EAAE;IACxF,MAAMU,gBAAgBpB,OAAOqB,IAAI,CAACC,CAAAA,QAASA,MAAMZ,EAAE,KAAKS;IAExD,MAAMI,WAAWJ,oBAAoBlB,aAAaS,EAAE;IAEpD,MAAMc,WAAW9B,MAAM+B,WAAW,CAChC,CAACf;QACCO,cAAc;YAAE,CAACf,SAAS,EAAEQ;QAAG;IACjC,GACA;QAACO;KAAc;IAGjB,MAAMS,gBAAgBhC,MAAM+B,WAAW,CACrC,CAACE;QACC,qBACE,oBAAC9B;YACC+B,OAAOxB,iBACLJ,QACAU,CAAAA;gBACEc,SAASd;gBACTiB,MAAME,MAAM;YACd,GACA,IAAMV;;IAId,GACA;QAACA;QAAiBK;KAAS;IAG7B,qBACE,wDACE,oBAAC1B;QAAYgC,WAAU;QAAMC,SAAQ;QAAQC,cAAAA;QAAaC,SAASP;qBACjE,oBAAC/B;QAAWuC,KAAKhC;QAAUS,OAAM;QAAsBG,QAAQS;qBAC7D,oBAAC3B;QAAMuC,MAAK;sBACZ,oBAACC;QAAKC,OAAO;YAAEC,YAAY;QAAE;OAAG,WAAQlB,0BAAAA,oCAAAA,cAAeR,KAAK;AAKtE,EAAE"}
+{"version":3,"sources":["../src/components/ThemePicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { IconButton, TooltipLinkList, WithTooltip } from 'storybook/internal/components';\nimport { ArrowDownIcon } from '@storybook/icons';\nimport { useParameter } from 'storybook/manager-api';\n\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { ThemeIds, themes, defaultTheme } from '../theme';\nimport { THEME_ID } from '../constants';\nimport { useGlobals, FluentParameters } from '../hooks';\n\nexport interface ThemeSelectorItem {\n  id: string;\n  title: string;\n  onClick: () => void;\n  value: string;\n  active: boolean;\n}\n\nfunction createThemeItems(\n  value: typeof themes,\n  changeTheme: (id: ThemeIds) => void,\n  getCurrentTheme: () => ThemeIds,\n): ThemeSelectorItem[] {\n  return value.map(item => {\n    return {\n      id: item.id,\n      title: item.id === defaultTheme.id ? `${item.label} (Default)` : item.label,\n      onClick: () => {\n        changeTheme(item.id);\n      },\n      value: item.id,\n      active: getCurrentTheme() === item.id,\n    };\n  });\n}\n\nexport const ThemePicker = (): JSXElement => {\n  const [globals, updateGlobals] = useGlobals();\n  const fluentTheme: FluentParameters['fluentTheme'] = useParameter('fluentTheme');\n\n  const selectedThemeId = fluentTheme ? fluentTheme : globals[THEME_ID] ?? defaultTheme.id;\n  const selectedTheme = themes.find(entry => entry.id === selectedThemeId);\n\n  const isActive = selectedThemeId !== defaultTheme.id;\n\n  const setTheme = React.useCallback(\n    (id: ThemeIds) => {\n      updateGlobals({ [THEME_ID]: id });\n    },\n    [updateGlobals],\n  );\n\n  const renderTooltip = React.useCallback(\n    (props: { onHide: () => void }) => {\n      return (\n        <TooltipLinkList\n          links={createThemeItems(\n            themes,\n            id => {\n              setTheme(id);\n              props.onHide();\n            },\n            () => selectedThemeId,\n          )}\n        />\n      );\n    },\n    [selectedThemeId, setTheme],\n  );\n\n  return (\n    <>\n      <WithTooltip placement=\"top\" trigger=\"click\" closeOnOutsideClick tooltip={renderTooltip}>\n        <IconButton key={THEME_ID} title=\"Change Fluent theme\" active={isActive}>\n          <ArrowDownIcon />\n          <span style={{ marginLeft: 5 }}>Theme: {selectedTheme?.label}</span>\n        </IconButton>\n      </WithTooltip>\n    </>\n  );\n};\n"],"names":["React","IconButton","TooltipLinkList","WithTooltip","ArrowDownIcon","useParameter","themes","defaultTheme","THEME_ID","useGlobals","createThemeItems","value","changeTheme","getCurrentTheme","map","item","id","title","label","onClick","active","ThemePicker","globals","updateGlobals","fluentTheme","selectedThemeId","selectedTheme","find","entry","isActive","setTheme","useCallback","renderTooltip","props","links","onHide","placement","trigger","closeOnOutsideClick","tooltip","key","span","style","marginLeft"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,eAAe,EAAEC,WAAW,QAAQ,gCAAgC;AACzF,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,YAAY,QAAQ,wBAAwB;AAGrD,SAAmBC,MAAM,EAAEC,YAAY,QAAQ,WAAW;AAC1D,SAASC,QAAQ,QAAQ,eAAe;AACxC,SAASC,UAAU,QAA0B,WAAW;AAUxD,SAASC,iBACPC,KAAoB,EACpBC,WAAmC,EACnCC,eAA+B;IAE/B,OAAOF,MAAMG,GAAG,CAACC,CAAAA;QACf,OAAO;YACLC,IAAID,KAAKC,EAAE;YACXC,OAAOF,KAAKC,EAAE,KAAKT,aAAaS,EAAE,GAAG,GAAGD,KAAKG,KAAK,CAAC,UAAU,CAAC,GAAGH,KAAKG,KAAK;YAC3EC,SAAS;gBACPP,YAAYG,KAAKC,EAAE;YACrB;YACAL,OAAOI,KAAKC,EAAE;YACdI,QAAQP,sBAAsBE,KAAKC,EAAE;QACvC;IACF;AACF;AAEA,OAAO,MAAMK,cAAc;IACzB,MAAM,CAACC,SAASC,cAAc,GAAGd;IACjC,MAAMe,cAA+CnB,aAAa;QAEdiB;IAApD,MAAMG,kBAAkBD,cAAcA,cAAcF,CAAAA,oBAAAA,OAAO,CAACd,SAAS,cAAjBc,+BAAAA,oBAAqBf,aAAaS,EAAE;IACxF,MAAMU,gBAAgBpB,OAAOqB,IAAI,CAACC,CAAAA,QAASA,MAAMZ,EAAE,KAAKS;IAExD,MAAMI,WAAWJ,oBAAoBlB,aAAaS,EAAE;IAEpD,MAAMc,WAAW9B,MAAM+B,WAAW,CAChC,CAACf;QACCO,cAAc;YAAE,CAACf,SAAS,EAAEQ;QAAG;IACjC,GACA;QAACO;KAAc;IAGjB,MAAMS,gBAAgBhC,MAAM+B,WAAW,CACrC,CAACE;QACC,qBACE,oBAAC/B;YACCgC,OAAOxB,iBACLJ,QACAU,CAAAA;gBACEc,SAASd;gBACTiB,MAAME,MAAM;YACd,GACA,IAAMV;;IAId,GACA;QAACA;QAAiBK;KAAS;IAG7B,qBACE,wDACE,oBAAC3B;QAAYiC,WAAU;QAAMC,SAAQ;QAAQC,qBAAAA;QAAoBC,SAASP;qBACxE,oBAAC/B;QAAWuC,KAAKhC;QAAUS,OAAM;QAAsBG,QAAQS;qBAC7D,oBAACzB,oCACD,oBAACqC;QAAKC,OAAO;YAAEC,YAAY;QAAE;OAAG,WAAQjB,0BAAAA,oCAAAA,cAAeR,KAAK;AAKtE,EAAE"}