@fluentui/react-storybook-addon 0.5.1 → 0.6.0

package/CHANGELOG.md

@@ -1,12 +1,28 @@
 # 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 Tue, 03 Mar 2026 13:15:56 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v0.6.0)
+
+Tue, 03 Mar 2026 13:15:56 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/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/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"}

package/lib/docs/DirSwitch.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { addons } from '@storybook/preview-api';
+import { addons } from 'storybook/preview-api';
 import { Label } from '@fluentui/react-label';
 import { Switch } from '@fluentui/react-switch';
 import { useId } from '@fluentui/react-utilities';

package/lib/docs/DirSwitch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/docs/DirSwitch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { addons } from '@storybook/preview-api';\n\nimport { Label } from '@fluentui/react-label';\nimport { Switch, type SwitchProps } from '@fluentui/react-switch';\nimport { useId } from '@fluentui/react-utilities';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport { makeStyles } from '@griffel/react';\n\nimport { DIR_ID } from '../constants';\n\nconst useStyles = makeStyles({\n  container: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'start',\n  },\n  label: {\n    ...typographyStyles.subtitle2,\n  },\n});\n\n/**\n * Dir switch used in the react-components docs header\n */\nexport const DirSwitch: React.FC<{ dir?: 'ltr' | 'rtl' }> = ({ dir }) => {\n  const switchId = useId('dir-switch');\n\n  const styles = useStyles();\n\n  const [currentDir, setCurrentDir] = React.useState(dir);\n  const checked = currentDir === 'rtl';\n\n  const setGlobalDir = (newDir: 'ltr' | 'rtl'): void => {\n    addons.getChannel().emit('updateGlobals', { globals: { [DIR_ID]: newDir } });\n  };\n\n  const onChange = React.useCallback<NonNullable<SwitchProps['onChange']>>((_, data) => {\n    const newDir = data.checked ? 'rtl' : 'ltr';\n    setGlobalDir(newDir);\n    setCurrentDir(newDir);\n  }, []);\n\n  return (\n    <div className={styles.container}>\n      <Label className={styles.label} htmlFor={currentDir === 'ltr' ? undefined : switchId}>\n        LTR\n      </Label>\n      <Switch checked={checked} id={switchId} onChange={onChange} />\n      <Label className={styles.label} htmlFor={currentDir === 'rtl' ? switchId : undefined}>\n        RTL\n      </Label>\n    </div>\n  );\n};\n"],"names":["React","addons","Label","Switch","useId","typographyStyles","makeStyles","DIR_ID","useStyles","container","alignItems","display","justifyContent","label","subtitle2","DirSwitch","dir","switchId","styles","currentDir","setCurrentDir","useState","checked","setGlobalDir","newDir","getChannel","emit","globals","onChange","useCallback","_","data","div","className","htmlFor","undefined","id"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,yBAAyB;AAEhD,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,MAAM,QAA0B,yBAAyB;AAClE,SAASC,KAAK,QAAQ,4BAA4B;AAClD,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,UAAU,QAAQ,iBAAiB;AAE5C,SAASC,MAAM,QAAQ,eAAe;AAEtC,MAAMC,YAAYF,WAAW;IAC3BG,WAAW;QACTC,YAAY;QACZC,SAAS;QACTC,gBAAgB;IAClB;IACAC,OAAO;QACL,GAAGR,iBAAiBS,SAAS;IAC/B;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,YAA+C,CAAC,EAAEC,GAAG,EAAE;IAClE,MAAMC,WAAWb,MAAM;IAEvB,MAAMc,SAASV;IAEf,MAAM,CAACW,YAAYC,cAAc,GAAGpB,MAAMqB,QAAQ,CAACL;IACnD,MAAMM,UAAUH,eAAe;IAE/B,MAAMI,eAAe,CAACC;QACpBvB,OAAOwB,UAAU,GAAGC,IAAI,CAAC,iBAAiB;YAAEC,SAAS;gBAAE,CAACpB,OAAO,EAAEiB;YAAO;QAAE;IAC5E;IAEA,MAAMI,WAAW5B,MAAM6B,WAAW,CAAuC,CAACC,GAAGC;QAC3E,MAAMP,SAASO,KAAKT,OAAO,GAAG,QAAQ;QACtCC,aAAaC;QACbJ,cAAcI;IAChB,GAAG,EAAE;IAEL,qBACE,oBAACQ;QAAIC,WAAWf,OAAOT,SAAS;qBAC9B,oBAACP;QAAM+B,WAAWf,OAAOL,KAAK;QAAEqB,SAASf,eAAe,QAAQgB,YAAYlB;OAAU,sBAGtF,oBAACd;QAAOmB,SAASA;QAASc,IAAInB;QAAUW,UAAUA;sBAClD,oBAAC1B;QAAM+B,WAAWf,OAAOL,KAAK;QAAEqB,SAASf,eAAe,QAAQF,WAAWkB;OAAW;AAK5F,EAAE"}
+{"version":3,"sources":["../src/docs/DirSwitch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { addons } from 'storybook/preview-api';\n\nimport { Label } from '@fluentui/react-label';\nimport { Switch, type SwitchProps } from '@fluentui/react-switch';\nimport { useId } from '@fluentui/react-utilities';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport { makeStyles } from '@griffel/react';\n\nimport { DIR_ID } from '../constants';\n\nconst useStyles = makeStyles({\n  container: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'start',\n  },\n  label: {\n    ...typographyStyles.subtitle2,\n  },\n});\n\n/**\n * Dir switch used in the react-components docs header\n */\nexport const DirSwitch: React.FC<{ dir?: 'ltr' | 'rtl' }> = ({ dir }) => {\n  const switchId = useId('dir-switch');\n\n  const styles = useStyles();\n\n  const [currentDir, setCurrentDir] = React.useState(dir);\n  const checked = currentDir === 'rtl';\n\n  const setGlobalDir = (newDir: 'ltr' | 'rtl'): void => {\n    addons.getChannel().emit('updateGlobals', { globals: { [DIR_ID]: newDir } });\n  };\n\n  const onChange = React.useCallback<NonNullable<SwitchProps['onChange']>>((_, data) => {\n    const newDir = data.checked ? 'rtl' : 'ltr';\n    setGlobalDir(newDir);\n    setCurrentDir(newDir);\n  }, []);\n\n  return (\n    <div className={styles.container}>\n      <Label className={styles.label} htmlFor={currentDir === 'ltr' ? undefined : switchId}>\n        LTR\n      </Label>\n      <Switch checked={checked} id={switchId} onChange={onChange} />\n      <Label className={styles.label} htmlFor={currentDir === 'rtl' ? switchId : undefined}>\n        RTL\n      </Label>\n    </div>\n  );\n};\n"],"names":["React","addons","Label","Switch","useId","typographyStyles","makeStyles","DIR_ID","useStyles","container","alignItems","display","justifyContent","label","subtitle2","DirSwitch","dir","switchId","styles","currentDir","setCurrentDir","useState","checked","setGlobalDir","newDir","getChannel","emit","globals","onChange","useCallback","_","data","div","className","htmlFor","undefined","id"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,MAAM,QAA0B,yBAAyB;AAClE,SAASC,KAAK,QAAQ,4BAA4B;AAClD,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,UAAU,QAAQ,iBAAiB;AAE5C,SAASC,MAAM,QAAQ,eAAe;AAEtC,MAAMC,YAAYF,WAAW;IAC3BG,WAAW;QACTC,YAAY;QACZC,SAAS;QACTC,gBAAgB;IAClB;IACAC,OAAO;QACL,GAAGR,iBAAiBS,SAAS;IAC/B;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,YAA+C,CAAC,EAAEC,GAAG,EAAE;IAClE,MAAMC,WAAWb,MAAM;IAEvB,MAAMc,SAASV;IAEf,MAAM,CAACW,YAAYC,cAAc,GAAGpB,MAAMqB,QAAQ,CAACL;IACnD,MAAMM,UAAUH,eAAe;IAE/B,MAAMI,eAAe,CAACC;QACpBvB,OAAOwB,UAAU,GAAGC,IAAI,CAAC,iBAAiB;YAAEC,SAAS;gBAAE,CAACpB,OAAO,EAAEiB;YAAO;QAAE;IAC5E;IAEA,MAAMI,WAAW5B,MAAM6B,WAAW,CAAuC,CAACC,GAAGC;QAC3E,MAAMP,SAASO,KAAKT,OAAO,GAAG,QAAQ;QACtCC,aAAaC;QACbJ,cAAcI;IAChB,GAAG,EAAE;IAEL,qBACE,oBAACQ;QAAIC,WAAWf,OAAOT,SAAS;qBAC9B,oBAACP;QAAM+B,WAAWf,OAAOL,KAAK;QAAEqB,SAASf,eAAe,QAAQgB,YAAYlB;OAAU,sBAGtF,oBAACd;QAAOmB,SAASA;QAASc,IAAInB;QAAUW,UAAUA;sBAClD,oBAAC1B;QAAM+B,WAAWf,OAAOL,KAAK;QAAEqB,SAASf,eAAe,QAAQF,WAAWkB;OAAW;AAK5F,EAAE"}

package/lib/docs/FluentCanvas.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { makeStyles } from '@griffel/react';
+const useStyles = makeStyles({
+    canvas: {
+        padding: '20px',
+        boxSizing: 'border-box',
+        overflow: 'auto'
+    }
+});
+/**
+ * Canvas component to wrap stories in a styled container.
+ * Provides a similar experience to Storybook's v7 `Canvas` component.
+ */ export const FluentCanvas = (props)=>{
+    const styles = useStyles();
+    return /*#__PURE__*/ React.createElement("div", {
+        className: "sbdocs-preview"
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: styles.canvas,
+        ...props
+    }));
+};

package/lib/docs/FluentCanvas.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/docs/FluentCanvas.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { makeStyles } from '@griffel/react';\n\nconst useStyles = makeStyles({\n  canvas: {\n    padding: '20px',\n    boxSizing: 'border-box',\n    overflow: 'auto',\n  },\n});\n\n/**\n * Canvas component to wrap stories in a styled container.\n * Provides a similar experience to Storybook's v7 `Canvas` component.\n */\nexport const FluentCanvas = (props: React.ComponentProps<'div'>): JSXElement => {\n  const styles = useStyles();\n\n  return (\n    <div className=\"sbdocs-preview\">\n      <div className={styles.canvas} {...props} />\n    </div>\n  );\n};\n"],"names":["React","makeStyles","useStyles","canvas","padding","boxSizing","overflow","FluentCanvas","props","styles","div","className"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,UAAU,QAAQ,iBAAiB;AAE5C,MAAMC,YAAYD,WAAW;IAC3BE,QAAQ;QACNC,SAAS;QACTC,WAAW;QACXC,UAAU;IACZ;AACF;AAEA;;;CAGC,GACD,OAAO,MAAMC,eAAe,CAACC;IAC3B,MAAMC,SAASP;IAEf,qBACE,oBAACQ;QAAIC,WAAU;qBACb,oBAACD;QAAIC,WAAWF,OAAON,MAAM;QAAG,GAAGK,KAAK;;AAG9C,EAAE"}

package/lib/docs/FluentDocsContainer.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DocsContainer } from '@storybook/addon-docs';
+import { DocsContainer } from '@storybook/addon-docs/blocks';
 import { webLightTheme } from '@fluentui/react-theme';
 import { FluentProvider } from '@fluentui/react-provider';
 import { isDocsEnabled } from './utils';

package/lib/docs/FluentDocsContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/docs/FluentDocsContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { DocsContainer, type DocsContextProps } from '@storybook/addon-docs';\nimport { webLightTheme } from '@fluentui/react-theme';\nimport { FluentProvider } from '@fluentui/react-provider';\n\nimport { isDocsEnabled } from './utils';\n\ninterface FluentDocsContainerProps {\n  context: DocsContextProps;\n  children: React.ReactNode;\n}\n\n/**\n * A container that wraps storybook's native docs container to add extra components to the docs experience\n */\nexport const FluentDocsContainer: React.FC<FluentDocsContainerProps> = ({ children, context }) => {\n  if (isDocsEnabled(context)) {\n    return (\n      <>\n        {/** TODO add table of contents */}\n        <FluentProvider className=\"sb-unstyled\" style={{ backgroundColor: 'transparent' }} theme={webLightTheme}>\n          <DocsContainer context={context}>{children}</DocsContainer>\n        </FluentProvider>\n      </>\n    );\n  }\n\n  // If docs container is not enabled, fall back to Storybook's default DocsContainer\n  return <DocsContainer context={context}>{children}</DocsContainer>;\n};\n"],"names":["React","DocsContainer","webLightTheme","FluentProvider","isDocsEnabled","FluentDocsContainer","children","context","className","style","backgroundColor","theme"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAA+B,wBAAwB;AAC7E,SAASC,aAAa,QAAQ,wBAAwB;AACtD,SAASC,cAAc,QAAQ,2BAA2B;AAE1D,SAASC,aAAa,QAAQ,UAAU;AAOxC;;CAEC,GACD,OAAO,MAAMC,sBAA0D,CAAC,EAAEC,QAAQ,EAAEC,OAAO,EAAE;IAC3F,IAAIH,cAAcG,UAAU;QAC1B,qBACE,wDAEE,oBAACJ;YAAeK,WAAU;YAAcC,OAAO;gBAAEC,iBAAiB;YAAc;YAAGC,OAAOT;yBACxF,oBAACD;YAAcM,SAASA;WAAUD;IAI1C;IAEA,mFAAmF;IACnF,qBAAO,oBAACL;QAAcM,SAASA;OAAUD;AAC3C,EAAE"}
+{"version":3,"sources":["../src/docs/FluentDocsContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { DocsContainer, type DocsContextProps } from '@storybook/addon-docs/blocks';\nimport { webLightTheme } from '@fluentui/react-theme';\nimport { FluentProvider } from '@fluentui/react-provider';\n\nimport { isDocsEnabled } from './utils';\n\ninterface FluentDocsContainerProps {\n  context: DocsContextProps;\n  children: React.ReactNode;\n}\n\n/**\n * A container that wraps storybook's native docs container to add extra components to the docs experience\n */\nexport const FluentDocsContainer: React.FC<FluentDocsContainerProps> = ({ children, context }) => {\n  if (isDocsEnabled(context)) {\n    return (\n      <>\n        {/** TODO add table of contents */}\n        <FluentProvider className=\"sb-unstyled\" style={{ backgroundColor: 'transparent' }} theme={webLightTheme}>\n          <DocsContainer context={context}>{children}</DocsContainer>\n        </FluentProvider>\n      </>\n    );\n  }\n\n  // If docs container is not enabled, fall back to Storybook's default DocsContainer\n  return <DocsContainer context={context}>{children}</DocsContainer>;\n};\n"],"names":["React","DocsContainer","webLightTheme","FluentProvider","isDocsEnabled","FluentDocsContainer","children","context","className","style","backgroundColor","theme"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAA+B,+BAA+B;AACpF,SAASC,aAAa,QAAQ,wBAAwB;AACtD,SAASC,cAAc,QAAQ,2BAA2B;AAE1D,SAASC,aAAa,QAAQ,UAAU;AAOxC;;CAEC,GACD,OAAO,MAAMC,sBAA0D,CAAC,EAAEC,QAAQ,EAAEC,OAAO,EAAE;IAC3F,IAAIH,cAAcG,UAAU;QAC1B,qBACE,wDAEE,oBAACJ;YAAeK,WAAU;YAAcC,OAAO;gBAAEC,iBAAiB;YAAc;YAAGC,OAAOT;yBACxF,oBAACD;YAAcM,SAASA;WAAUD;IAI1C;IAEA,mFAAmF;IACnF,qBAAO,oBAACL;QAAcM,SAASA;OAAUD;AAC3C,EAAE"}

package/lib/docs/FluentDocsPage.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DocsContext, ArgsTable, Title, Subtitle, Description, HeaderMdx, Primary, Stories } from '@storybook/addon-docs';
+import { DocsContext, ArgTypes, Title, Subtitle, Description, HeaderMdx, Primary, Stories } from '@storybook/addon-docs/blocks';
 import { tokens } from '@fluentui/react-theme';
 import { Link } from '@fluentui/react-link';
 import { Text } from '@fluentui/react-text';
@@ -130,37 +130,51 @@ const slotRegex = /as\?:\s*"([^"]+)"/;
     const hasArgAsProp = options.nativePropsApi ? ((_story_argTypes_as = story.argTypes.as) === null || _story_argTypes_as === void 0 ? void 0 : (_story_argTypes_as_type = _story_argTypes_as.type) === null || _story_argTypes_as_type === void 0 ? void 0 : _story_argTypes_as_type.name) === 'enum' : false;
     const argAsProp = hasArgAsProp ? story.argTypes.as.type.value : null;
     let hasArgAsSlot = false;
-    const transformPropsWithSlotShorthand = (props)=>{
-        Object.entries(props).forEach(([key, argType])=>{
-            var _argType_type;
-            const value = argType === null || argType === void 0 ? void 0 : (_argType_type = argType.type) === null || _argType_type === void 0 ? void 0 : _argType_type.name;
-            const match = value.match(slotRegex);
-            // Transformation for Slot with `AlternateAs` specified (mutates DocGen Object reference)
-            if (match) {
-                props[key].type.name = `Slot<\"${match[1]}\">`;
-            } else if (value.includes('WithSlotShorthandValue')) {
-                props[key].type.name = `Slot`;
+    const transformArgTypeNameWithSlotShorthand = (typeName)=>{
+        const match = typeName.match(slotRegex);
+        if (match) {
+            hasArgAsSlot = true;
+            return `Slot<\"${match[1]}\">`;
+        }
+        if (typeName.includes('WithSlotShorthandValue')) {
+            hasArgAsSlot = true;
+            return `Slot`;
+        }
+        return typeName;
+    };
+    /**
+   * Transform the arg types with slot shorthand (mutates the arg types object reference)
+   * This is necessary to ensure that the arg types are correctly displayed in the docs page
+   */ const transformArgTypesWithSlotShorthand = (argTypes)=>{
+        Object.values(argTypes).forEach((argType)=>{
+            var _argType_table_type, _argType_table, _argType_type;
+            // Transform the type summary if it exists
+            if (argType === null || argType === void 0 ? void 0 : (_argType_table = argType.table) === null || _argType_table === void 0 ? void 0 : (_argType_table_type = _argType_table.type) === null || _argType_table_type === void 0 ? void 0 : _argType_table_type.summary) {
+                argType.table.type.summary = transformArgTypeNameWithSlotShorthand(argType.table.type.summary);
             }
-            if (value.includes('Slot')) {
-                hasArgAsSlot = true;
+            // Transform the type name if it exists
+            if (argType === null || argType === void 0 ? void 0 : (_argType_type = argType.type) === null || _argType_type === void 0 ? void 0 : _argType_type.name) {
+                argType.type.name = transformArgTypeNameWithSlotShorthand(argType.type.name);
             }
         });
     };
-    const transformComponent = (component)=>{
+    const transformComponentDocGenProps = (component)=>{
         var _component___docgenInfo;
         const docGenProps = component === null || component === void 0 ? void 0 : (_component___docgenInfo = component.__docgenInfo) === null || _component___docgenInfo === void 0 ? void 0 : _component___docgenInfo.props;
         if (docGenProps) {
-            transformPropsWithSlotShorthand(docGenProps);
+            transformArgTypesWithSlotShorthand(docGenProps);
         }
     };
-    const component = story.component;
-    const subcomponents = story.subcomponents;
+    const component = story.moduleExport;
     if (options.slotsApi) {
-        transformComponent(component);
-        if (subcomponents) {
-            Object.values(subcomponents).forEach((subcomponent)=>{
-                transformComponent(subcomponent);
-            });
+        // Transform the arg types with slot shorthand (mutates the arg types object reference)
+        transformArgTypesWithSlotShorthand(story.argTypes);
+        // Transform the component doc gen props with slot shorthand (mutates the component doc gen props object reference)
+        transformComponentDocGenProps(component);
+        // Transform the subcomponents doc gen props with slot shorthand
+        // (mutates the subcomponents doc gen props object reference)
+        if (story.subcomponents) {
+            Object.values(story.subcomponents).forEach(transformComponentDocGenProps);
         }
     }
     return {
@@ -196,7 +210,7 @@ const RenderArgsTable = ({ story, hideArgsTable, showSlotsApi, showNativePropsAp
         role: "presentation"
     }, "🙌")), /*#__PURE__*/ React.createElement("br", null), /*#__PURE__*/ React.createElement("span", null, "Slots in Fluent UI React components are designed to be modified or replaced, providing a flexible approach to customizing components. Each slot is exposed as a top-level prop and can be filled with primitive values, JSX/TSX, props objects, or render functions. This allows for more dynamic and reusable component structures, similar to slots in other frameworks.", ' ', /*#__PURE__*/ React.createElement(Link, {
         href: "/?path=/docs/concepts-developer-customizing-components-with-slots--docs"
-    }, "Customizing components with slots", ' '))))), /*#__PURE__*/ React.createElement(ArgsTable, {
+    }, "Customizing components with slots", ' '))))), /*#__PURE__*/ React.createElement(ArgTypes, {
         of: component
     }));
 };

package/lib/docs/FluentDocsPage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/docs/FluentDocsPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  DocsContext,\n  ArgsTable,\n  Title,\n  Subtitle,\n  Description,\n  HeaderMdx,\n  Primary,\n  Stories,\n  type DocsContextProps,\n} from '@storybook/addon-docs';\nimport type { PreparedStory, Renderer, SBEnumType } from '@storybook/types';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { Link } from '@fluentui/react-link';\nimport { Text } from '@fluentui/react-text';\nimport { makeStyles } from '@griffel/react';\nimport { InfoFilled } from '@fluentui/react-icons';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport { DIR_ID, THEME_ID } from '../constants';\nimport { themes } from '../theme';\n\nimport { getDocsPageConfig } from './utils';\nimport { DirSwitch } from './DirSwitch';\nimport { ThemePicker } from './ThemePicker';\nimport { Toc, nameToHash } from './Toc';\nimport { CopyAsMarkdownButton } from './CopyAsMarkdownButton';\n\ntype PrimaryStory = PreparedStory<Renderer>;\n\nconst useStyles = makeStyles({\n  divider: {\n    height: '1px',\n    backgroundColor: '#e1dfdd',\n    border: '0px none',\n    margin: '48px 0px',\n  },\n  wrapper: {\n    display: 'flex',\n    gap: '16px',\n  },\n  toc: {\n    flexBasis: '200px',\n    flexShrink: 0,\n    [`@media screen and (max-width: 1000px)`]: {\n      display: 'none',\n    },\n  },\n  container: {\n    // without a width, this div grows wider than its parent\n    width: '200px',\n    flexGrow: 1,\n  },\n  globalTogglesContainer: {\n    columnGap: tokens.spacingHorizontalXXXL,\n    display: 'flex',\n  },\n  description: {\n    display: 'grid',\n    gridTemplateColumns: '1fr min-content',\n  },\n  additionalInfoWrapper: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: tokens.spacingVerticalM,\n  },\n  additionalInfo: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: tokens.spacingVerticalM,\n    border: `1px solid ${tokens.colorNeutralStroke1}`,\n    borderRadius: tokens.borderRadiusMedium,\n    padding: tokens.spacingHorizontalM,\n    margin: `0 ${tokens.spacingHorizontalM}`,\n  },\n  additionalInfoIcon: {\n    alignSelf: 'center',\n    color: tokens.colorBrandForeground1,\n    fontSize: '24px',\n    marginRight: tokens.spacingHorizontalM,\n  },\n  additionalInfoMessage: {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: tokens.spacingVerticalXS,\n  },\n  infoIcon: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: tokens.spacingVerticalXS,\n    flex: 1,\n  },\n});\n\nconst useVideoClasses = makeStyles({\n  container: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: tokens.spacingHorizontalMNudge,\n  },\n  preview: {\n    borderRadius: tokens.borderRadiusSmall,\n    display: 'flex',\n    flexDirection: 'column',\n    gap: tokens.spacingHorizontalM,\n    padding: tokens.spacingHorizontalM,\n    backgroundColor: tokens.colorNeutralBackground2,\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground2Hover,\n    },\n  },\n  image: {\n    width: '200px',\n  },\n});\n\nconst VideoPreviews: React.FC<{\n  videos: {\n    href: string;\n    preview: string;\n    source: 'youtube';\n    title: string;\n  }[];\n}> = props => {\n  const { videos } = props;\n  const classes = useVideoClasses();\n\n  return (\n    <div className={classes.container}>\n      {videos.map(video => (\n        <Link className={classes.preview} href={video.href} target=\"_blank\" key={video.href}>\n          <img alt={`Video: ${video.preview}`} src={video.preview} className={classes.image} />\n          <Text>{video.title}</Text>\n        </Link>\n      ))}\n    </div>\n  );\n};\n\nconst getNativeElementsList = (elements: SBEnumType['value']): React.ReactElement => {\n  const elementsArr = elements?.map((el, idx) => [\n    <code key={idx}>{`<${el}>`}</code>,\n    idx !== elements.length - 1 ? ', ' : ' ',\n  ]);\n\n  return (\n    <>\n      {elementsArr}\n      {elementsArr.length > 1 ? 'elements' : 'element'}\n    </>\n  );\n};\n\nconst slotRegex = /as\\?:\\s*\"([^\"]+)\"/;\n/**\n * NOTE: this function mutates original story argTypes including all story subcomponents if they are present\n */\nfunction withSlotEnhancer(story: PreparedStory, options: { slotsApi?: boolean; nativePropsApi?: boolean }) {\n  const hasArgAsProp = options.nativePropsApi ? story.argTypes.as?.type?.name === 'enum' : false;\n  const argAsProp = hasArgAsProp ? (story.argTypes.as.type as SBEnumType).value : null;\n  let hasArgAsSlot = false;\n\n  type InternalComponentApi = {\n    __docgenInfo: {\n      props?: Record<string, { type: { name: string } }>;\n    };\n    [k: string]: unknown;\n  };\n\n  const transformPropsWithSlotShorthand = (props: Record<string, { type: { name: string } }>) => {\n    Object.entries(props).forEach(([key, argType]) => {\n      const value: string = argType?.type?.name;\n\n      const match = value.match(slotRegex);\n\n      // Transformation for Slot with `AlternateAs` specified (mutates DocGen Object reference)\n      if (match) {\n        props[key].type.name = `Slot<\\\"${match[1]}\\\">`;\n      }\n      // Transformation for Slot with `WithSlotShorthandValue` (mutates DocGen Object reference)\n      else if (value.includes('WithSlotShorthandValue')) {\n        props[key].type.name = `Slot`;\n      }\n\n      if (value.includes('Slot')) {\n        hasArgAsSlot = true;\n      }\n    });\n  };\n\n  const transformComponent = (component: InternalComponentApi) => {\n    const docGenProps = component?.__docgenInfo?.props;\n    if (docGenProps) {\n      transformPropsWithSlotShorthand(docGenProps);\n    }\n  };\n\n  const component = story.component as InternalComponentApi;\n  const subcomponents = story.subcomponents as Record<string, InternalComponentApi>;\n\n  if (options.slotsApi) {\n    transformComponent(component);\n    if (subcomponents) {\n      Object.values(subcomponents).forEach(subcomponent => {\n        transformComponent(subcomponent);\n      });\n    }\n  }\n\n  return { component, hasArgAsSlot, hasArgAsProp, argAsProp };\n}\n\nconst AdditionalApiDocs: React.FC<{ children: React.ReactElement | React.ReactElement[] }> = ({ children }) => {\n  const styles = useStyles();\n  return (\n    <div className={styles.additionalInfo}>\n      <div className={styles.additionalInfoMessage}>\n        <InfoFilled className={styles.additionalInfoIcon} />\n        <div className={styles.infoIcon}>{children}</div>\n      </div>\n    </div>\n  );\n};\n\nconst RenderArgsTable = ({\n  story,\n  hideArgsTable,\n  showSlotsApi,\n  showNativePropsApi,\n}: {\n  story: PrimaryStory;\n  hideArgsTable: boolean;\n  showSlotsApi?: boolean;\n  showNativePropsApi?: boolean;\n}) => {\n  const { component, hasArgAsProp, hasArgAsSlot, argAsProp } = withSlotEnhancer(story, {\n    slotsApi: showSlotsApi,\n    nativePropsApi: showNativePropsApi,\n  });\n  const styles = useStyles();\n\n  return hideArgsTable ? null : (\n    <>\n      <div className={styles.additionalInfoWrapper}>\n        {hasArgAsProp && (\n          <AdditionalApiDocs>\n            <p>\n              <b>\n                Native props are supported <span role=\"presentation\">🙌</span>\n                <br />\n              </b>\n              <span>\n                All HTML attributes native to the\n                {getNativeElementsList(argAsProp!)}, including all <code>aria-*</code> and <code>data-*</code>{' '}\n                attributes, can be applied as native props on this component.\n              </span>\n            </p>\n          </AdditionalApiDocs>\n        )}\n        {hasArgAsSlot && (\n          <AdditionalApiDocs>\n            <p>\n              <b>\n                Customizing components with slots <span role=\"presentation\">🙌</span>\n              </b>\n              <br />\n              <span>\n                Slots in Fluent UI React components are designed to be modified or replaced, providing a flexible\n                approach to customizing components. Each slot is exposed as a top-level prop and can be filled with\n                primitive values, JSX/TSX, props objects, or render functions. This allows for more dynamic and reusable\n                component structures, similar to slots in other frameworks.{' '}\n                <Link href=\"/?path=/docs/concepts-developer-customizing-components-with-slots--docs\">\n                  Customizing components with slots{' '}\n                </Link>\n              </span>\n            </p>\n          </AdditionalApiDocs>\n        )}\n      </div>\n      <ArgsTable of={component} />\n    </>\n  );\n};\n\nconst RenderPrimaryStory = ({\n  primaryStory,\n  skipPrimaryStory,\n}: {\n  primaryStory: PrimaryStory;\n  skipPrimaryStory: boolean;\n}) => {\n  const styles = useStyles();\n  return skipPrimaryStory ? null : (\n    <>\n      <hr className={styles.divider} />\n      <HeaderMdx as=\"h3\" id={nameToHash(primaryStory.name)}>\n        {primaryStory.name}\n      </HeaderMdx>\n      <Primary />\n    </>\n  );\n};\n\nexport const FluentDocsPage = (): JSXElement => {\n  const context = React.useContext(DocsContext);\n\n  // Get the fluent docs page configuration from context\n  const docsPageConfig = getDocsPageConfig(context);\n\n  const stories = context.componentStories();\n\n  const primaryStory = stories[0];\n  const primaryStoryContext = context.getStoryContext(primaryStory);\n\n  assertStoryMetaValues(primaryStory);\n\n  const dir = primaryStoryContext.parameters?.dir ?? primaryStoryContext.globals?.[DIR_ID] ?? 'ltr';\n  const selectedTheme = themes.find(theme => theme.id === primaryStoryContext.globals![THEME_ID]);\n\n  const hideArgsTable = Boolean(primaryStoryContext.parameters?.docs?.hideArgsTable);\n  const skipPrimaryStory = Boolean(primaryStoryContext.parameters?.docs?.skipPrimaryStory);\n\n  const videos = primaryStoryContext.parameters?.videos ?? null;\n  const styles = useStyles();\n\n  // If docs page is disabled, return Storybook's default docs page\n  if (!docsPageConfig) {\n    return (\n      <div className=\"sb-unstyled\">\n        <Title />\n        <Subtitle />\n        <Description />\n        <RenderPrimaryStory primaryStory={primaryStory} skipPrimaryStory={skipPrimaryStory} />\n        <RenderArgsTable story={primaryStory} hideArgsTable={hideArgsTable} />\n        <Stories />\n      </div>\n    );\n  }\n\n  // Determine what to show based on configuration\n  const {\n    tableOfContents: showTableOfContents,\n    dirSwitcher: showDirSwitcher,\n    themePicker: showThemePicker,\n    copyAsMarkdown: showCopyAsMarkdown,\n    argTable,\n  } = docsPageConfig;\n\n  // DEBUG\n  // console.log('FluentDocsPage', context);\n  // console.table(stories.map((s: StoreItem) => ({ id: s.id, kind: s.kind, name: s.name, story: s.story })));\n  // console.table(\n  //   Object.values((context as any).argTypes).map(arg => ({\n  //     name: arg.name,\n  //     description: arg.description,\n  //     type: arg.table?.type?.summary ?? '?',\n  //     default: arg.table?.defaultValue?.summary ?? '-',\n  //   })),\n  // );\n\n  return (\n    <div className=\"sb-unstyled\">\n      <Title />\n      <div className={styles.wrapper}>\n        <div className={styles.container}>\n          {(showThemePicker || showDirSwitcher || showCopyAsMarkdown) && (\n            <div className={styles.globalTogglesContainer}>\n              {showThemePicker && <ThemePicker selectedThemeId={selectedTheme?.id} />}\n              {showDirSwitcher && <DirSwitch dir={dir} />}\n              {showCopyAsMarkdown && <CopyAsMarkdownButton storyId={primaryStory.id} />}\n            </div>\n          )}\n          <Subtitle />\n          <div className={styles.description}>\n            <Description />\n            {videos && <VideoPreviews videos={videos} />}\n          </div>\n          <RenderPrimaryStory primaryStory={primaryStory} skipPrimaryStory={skipPrimaryStory} />\n          <RenderArgsTable\n            story={primaryStory}\n            hideArgsTable={hideArgsTable}\n            showSlotsApi={argTable.slotsApi}\n            showNativePropsApi={argTable.nativePropsApi}\n          />\n          <Stories />\n        </div>\n        {showTableOfContents && (\n          <div className={styles.toc}>\n            <Toc stories={stories} />\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nfunction assertStoryMetaValues(story: ReturnType<DocsContextProps['componentStories']>[number]) {\n  if (story.component === null) {\n    throw new Error(\n      [\n        '🚨 Invalid Story Meta declaration:',\n        `- primaryStory.component of componentId:${story.componentId} is \"null\"`,\n        '- to resolve this error, please update \"component\" property value in your story definition to reference a React Component or remove it if it is not needed.',\n      ].join('\\n'),\n    );\n  }\n}\n"],"names":["React","DocsContext","ArgsTable","Title","Subtitle","Description","HeaderMdx","Primary","Stories","tokens","Link","Text","makeStyles","InfoFilled","DIR_ID","THEME_ID","themes","getDocsPageConfig","DirSwitch","ThemePicker","Toc","nameToHash","CopyAsMarkdownButton","useStyles","divider","height","backgroundColor","border","margin","wrapper","display","gap","toc","flexBasis","flexShrink","container","width","flexGrow","globalTogglesContainer","columnGap","spacingHorizontalXXXL","description","gridTemplateColumns","additionalInfoWrapper","flexDirection","spacingVerticalM","additionalInfo","colorNeutralStroke1","borderRadius","borderRadiusMedium","padding","spacingHorizontalM","additionalInfoIcon","alignSelf","color","colorBrandForeground1","fontSize","marginRight","additionalInfoMessage","alignItems","spacingVerticalXS","infoIcon","flex","useVideoClasses","spacingHorizontalMNudge","preview","borderRadiusSmall","colorNeutralBackground2","colorNeutralBackground2Hover","image","VideoPreviews","props","videos","classes","div","className","map","video","href","target","key","img","alt","src","title","getNativeElementsList","elements","elementsArr","el","idx","code","length","slotRegex","withSlotEnhancer","story","options","hasArgAsProp","nativePropsApi","argTypes","as","type","name","argAsProp","value","hasArgAsSlot","transformPropsWithSlotShorthand","Object","entries","forEach","argType","match","includes","transformComponent","component","docGenProps","__docgenInfo","subcomponents","slotsApi","values","subcomponent","AdditionalApiDocs","children","styles","RenderArgsTable","hideArgsTable","showSlotsApi","showNativePropsApi","p","b","span","role","br","of","RenderPrimaryStory","primaryStory","skipPrimaryStory","hr","id","FluentDocsPage","primaryStoryContext","context","useContext","docsPageConfig","stories","componentStories","getStoryContext","assertStoryMetaValues","dir","parameters","globals","selectedTheme","find","theme","Boolean","docs","tableOfContents","showTableOfContents","dirSwitcher","showDirSwitcher","themePicker","showThemePicker","copyAsMarkdown","showCopyAsMarkdown","argTable","selectedThemeId","storyId","Error","componentId","join"],"mappings":"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"}
+{"version":3,"sources":["../src/docs/FluentDocsPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  DocsContext,\n  ArgTypes,\n  Title,\n  Subtitle,\n  Description,\n  HeaderMdx,\n  Primary,\n  Stories,\n  type DocsContextProps,\n} from '@storybook/addon-docs/blocks';\nimport type { PreparedStory, Renderer, SBEnumType } from 'storybook/internal/types';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { Link } from '@fluentui/react-link';\nimport { Text } from '@fluentui/react-text';\nimport { makeStyles } from '@griffel/react';\nimport { InfoFilled } from '@fluentui/react-icons';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport { DIR_ID, THEME_ID } from '../constants';\nimport { themes } from '../theme';\n\nimport { getDocsPageConfig } from './utils';\nimport { DirSwitch } from './DirSwitch';\nimport { ThemePicker } from './ThemePicker';\nimport { Toc, nameToHash } from './Toc';\nimport { CopyAsMarkdownButton } from './CopyAsMarkdownButton';\n\ntype PrimaryStory = PreparedStory<Renderer>;\n\nconst useStyles = makeStyles({\n  divider: {\n    height: '1px',\n    backgroundColor: '#e1dfdd',\n    border: '0px none',\n    margin: '48px 0px',\n  },\n  wrapper: {\n    display: 'flex',\n    gap: '16px',\n  },\n  toc: {\n    flexBasis: '200px',\n    flexShrink: 0,\n    [`@media screen and (max-width: 1000px)`]: {\n      display: 'none',\n    },\n  },\n  container: {\n    // without a width, this div grows wider than its parent\n    width: '200px',\n    flexGrow: 1,\n  },\n  globalTogglesContainer: {\n    columnGap: tokens.spacingHorizontalXXXL,\n    display: 'flex',\n  },\n  description: {\n    display: 'grid',\n    gridTemplateColumns: '1fr min-content',\n  },\n  additionalInfoWrapper: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: tokens.spacingVerticalM,\n  },\n  additionalInfo: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: tokens.spacingVerticalM,\n    border: `1px solid ${tokens.colorNeutralStroke1}`,\n    borderRadius: tokens.borderRadiusMedium,\n    padding: tokens.spacingHorizontalM,\n    margin: `0 ${tokens.spacingHorizontalM}`,\n  },\n  additionalInfoIcon: {\n    alignSelf: 'center',\n    color: tokens.colorBrandForeground1,\n    fontSize: '24px',\n    marginRight: tokens.spacingHorizontalM,\n  },\n  additionalInfoMessage: {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: tokens.spacingVerticalXS,\n  },\n  infoIcon: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: tokens.spacingVerticalXS,\n    flex: 1,\n  },\n});\n\nconst useVideoClasses = makeStyles({\n  container: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: tokens.spacingHorizontalMNudge,\n  },\n  preview: {\n    borderRadius: tokens.borderRadiusSmall,\n    display: 'flex',\n    flexDirection: 'column',\n    gap: tokens.spacingHorizontalM,\n    padding: tokens.spacingHorizontalM,\n    backgroundColor: tokens.colorNeutralBackground2,\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground2Hover,\n    },\n  },\n  image: {\n    width: '200px',\n  },\n});\n\nconst VideoPreviews: React.FC<{\n  videos: {\n    href: string;\n    preview: string;\n    source: 'youtube';\n    title: string;\n  }[];\n}> = props => {\n  const { videos } = props;\n  const classes = useVideoClasses();\n\n  return (\n    <div className={classes.container}>\n      {videos.map(video => (\n        <Link className={classes.preview} href={video.href} target=\"_blank\" key={video.href}>\n          <img alt={`Video: ${video.preview}`} src={video.preview} className={classes.image} />\n          <Text>{video.title}</Text>\n        </Link>\n      ))}\n    </div>\n  );\n};\n\nconst getNativeElementsList = (elements: SBEnumType['value']): React.ReactElement => {\n  const elementsArr = elements?.map((el, idx) => [\n    <code key={idx}>{`<${el}>`}</code>,\n    idx !== elements.length - 1 ? ', ' : ' ',\n  ]);\n\n  return (\n    <>\n      {elementsArr}\n      {elementsArr.length > 1 ? 'elements' : 'element'}\n    </>\n  );\n};\n\nconst slotRegex = /as\\?:\\s*\"([^\"]+)\"/;\n/**\n * NOTE: this function mutates original story argTypes including all story subcomponents if they are present\n */\nfunction withSlotEnhancer(story: PreparedStory, options: { slotsApi?: boolean; nativePropsApi?: boolean }) {\n  const hasArgAsProp = options.nativePropsApi ? story.argTypes.as?.type?.name === 'enum' : false;\n  const argAsProp = hasArgAsProp ? (story.argTypes.as.type as SBEnumType).value : null;\n  let hasArgAsSlot = false;\n\n  type ArgTypes = Record<\n    string,\n    {\n      table?: { type: { summary?: string } };\n      type: { name?: string };\n    }\n  >;\n\n  type InternalComponentApi = {\n    __docgenInfo: {\n      props?: ArgTypes;\n    };\n  };\n\n  const transformArgTypeNameWithSlotShorthand = (typeName: string) => {\n    const match = typeName.match(slotRegex);\n\n    if (match) {\n      hasArgAsSlot = true;\n      return `Slot<\\\"${match[1]}\\\">`;\n    }\n\n    if (typeName.includes('WithSlotShorthandValue')) {\n      hasArgAsSlot = true;\n      return `Slot`;\n    }\n\n    return typeName;\n  };\n\n  /**\n   * Transform the arg types with slot shorthand (mutates the arg types object reference)\n   * This is necessary to ensure that the arg types are correctly displayed in the docs page\n   */\n  const transformArgTypesWithSlotShorthand = (argTypes: ArgTypes) => {\n    Object.values(argTypes).forEach(argType => {\n      // Transform the type summary if it exists\n      if (argType?.table?.type?.summary) {\n        argType.table.type.summary = transformArgTypeNameWithSlotShorthand(argType.table.type.summary);\n      }\n      // Transform the type name if it exists\n      if (argType?.type?.name) {\n        argType.type.name = transformArgTypeNameWithSlotShorthand(argType.type.name);\n      }\n    });\n  };\n\n  const transformComponentDocGenProps = (component: InternalComponentApi) => {\n    const docGenProps = component?.__docgenInfo?.props;\n    if (docGenProps) {\n      transformArgTypesWithSlotShorthand(docGenProps);\n    }\n  };\n\n  const component = story.moduleExport;\n\n  if (options.slotsApi) {\n    // Transform the arg types with slot shorthand (mutates the arg types object reference)\n    transformArgTypesWithSlotShorthand(story.argTypes as ArgTypes);\n\n    // Transform the component doc gen props with slot shorthand (mutates the component doc gen props object reference)\n    transformComponentDocGenProps(component);\n\n    // Transform the subcomponents doc gen props with slot shorthand\n    // (mutates the subcomponents doc gen props object reference)\n    if (story.subcomponents) {\n      Object.values(story.subcomponents).forEach(transformComponentDocGenProps);\n    }\n  }\n\n  return { component, hasArgAsSlot, hasArgAsProp, argAsProp };\n}\n\nconst AdditionalApiDocs: React.FC<{ children: React.ReactElement | React.ReactElement[] }> = ({ children }) => {\n  const styles = useStyles();\n  return (\n    <div className={styles.additionalInfo}>\n      <div className={styles.additionalInfoMessage}>\n        <InfoFilled className={styles.additionalInfoIcon} />\n        <div className={styles.infoIcon}>{children}</div>\n      </div>\n    </div>\n  );\n};\n\nconst RenderArgsTable = ({\n  story,\n  hideArgsTable,\n  showSlotsApi,\n  showNativePropsApi,\n}: {\n  story: PrimaryStory;\n  hideArgsTable: boolean;\n  showSlotsApi?: boolean;\n  showNativePropsApi?: boolean;\n}) => {\n  const { component, hasArgAsProp, hasArgAsSlot, argAsProp } = withSlotEnhancer(story, {\n    slotsApi: showSlotsApi,\n    nativePropsApi: showNativePropsApi,\n  });\n  const styles = useStyles();\n\n  return hideArgsTable ? null : (\n    <>\n      <div className={styles.additionalInfoWrapper}>\n        {hasArgAsProp && (\n          <AdditionalApiDocs>\n            <p>\n              <b>\n                Native props are supported <span role=\"presentation\">🙌</span>\n                <br />\n              </b>\n              <span>\n                All HTML attributes native to the\n                {getNativeElementsList(argAsProp!)}, including all <code>aria-*</code> and <code>data-*</code>{' '}\n                attributes, can be applied as native props on this component.\n              </span>\n            </p>\n          </AdditionalApiDocs>\n        )}\n        {hasArgAsSlot && (\n          <AdditionalApiDocs>\n            <p>\n              <b>\n                Customizing components with slots <span role=\"presentation\">🙌</span>\n              </b>\n              <br />\n              <span>\n                Slots in Fluent UI React components are designed to be modified or replaced, providing a flexible\n                approach to customizing components. Each slot is exposed as a top-level prop and can be filled with\n                primitive values, JSX/TSX, props objects, or render functions. This allows for more dynamic and reusable\n                component structures, similar to slots in other frameworks.{' '}\n                <Link href=\"/?path=/docs/concepts-developer-customizing-components-with-slots--docs\">\n                  Customizing components with slots{' '}\n                </Link>\n              </span>\n            </p>\n          </AdditionalApiDocs>\n        )}\n      </div>\n      <ArgTypes of={component} />\n    </>\n  );\n};\n\nconst RenderPrimaryStory = ({\n  primaryStory,\n  skipPrimaryStory,\n}: {\n  primaryStory: PrimaryStory;\n  skipPrimaryStory: boolean;\n}) => {\n  const styles = useStyles();\n  return skipPrimaryStory ? null : (\n    <>\n      <hr className={styles.divider} />\n      <HeaderMdx as=\"h3\" id={nameToHash(primaryStory.name)}>\n        {primaryStory.name}\n      </HeaderMdx>\n      <Primary />\n    </>\n  );\n};\n\nexport const FluentDocsPage = (): JSXElement => {\n  const context = React.useContext(DocsContext);\n\n  // Get the fluent docs page configuration from context\n  const docsPageConfig = getDocsPageConfig(context);\n\n  const stories = context.componentStories();\n\n  const primaryStory = stories[0];\n  const primaryStoryContext = context.getStoryContext(primaryStory);\n\n  assertStoryMetaValues(primaryStory);\n\n  const dir = primaryStoryContext.parameters?.dir ?? primaryStoryContext.globals?.[DIR_ID] ?? 'ltr';\n  const selectedTheme = themes.find(theme => theme.id === primaryStoryContext.globals![THEME_ID]);\n\n  const hideArgsTable = Boolean(primaryStoryContext.parameters?.docs?.hideArgsTable);\n  const skipPrimaryStory = Boolean(primaryStoryContext.parameters?.docs?.skipPrimaryStory);\n\n  const videos = primaryStoryContext.parameters?.videos ?? null;\n  const styles = useStyles();\n\n  // If docs page is disabled, return Storybook's default docs page\n  if (!docsPageConfig) {\n    return (\n      <div className=\"sb-unstyled\">\n        <Title />\n        <Subtitle />\n        <Description />\n        <RenderPrimaryStory primaryStory={primaryStory} skipPrimaryStory={skipPrimaryStory} />\n        <RenderArgsTable story={primaryStory} hideArgsTable={hideArgsTable} />\n        <Stories />\n      </div>\n    );\n  }\n\n  // Determine what to show based on configuration\n  const {\n    tableOfContents: showTableOfContents,\n    dirSwitcher: showDirSwitcher,\n    themePicker: showThemePicker,\n    copyAsMarkdown: showCopyAsMarkdown,\n    argTable,\n  } = docsPageConfig;\n\n  // DEBUG\n  // console.log('FluentDocsPage', context);\n  // console.table(stories.map((s: StoreItem) => ({ id: s.id, kind: s.kind, name: s.name, story: s.story })));\n  // console.table(\n  //   Object.values((context as any).argTypes).map(arg => ({\n  //     name: arg.name,\n  //     description: arg.description,\n  //     type: arg.table?.type?.summary ?? '?',\n  //     default: arg.table?.defaultValue?.summary ?? '-',\n  //   })),\n  // );\n\n  return (\n    <div className=\"sb-unstyled\">\n      <Title />\n      <div className={styles.wrapper}>\n        <div className={styles.container}>\n          {(showThemePicker || showDirSwitcher || showCopyAsMarkdown) && (\n            <div className={styles.globalTogglesContainer}>\n              {showThemePicker && <ThemePicker selectedThemeId={selectedTheme?.id} />}\n              {showDirSwitcher && <DirSwitch dir={dir} />}\n              {showCopyAsMarkdown && <CopyAsMarkdownButton storyId={primaryStory.id} />}\n            </div>\n          )}\n          <Subtitle />\n          <div className={styles.description}>\n            <Description />\n            {videos && <VideoPreviews videos={videos} />}\n          </div>\n          <RenderPrimaryStory\n            primaryStory={primaryStory as unknown as PrimaryStory}\n            skipPrimaryStory={skipPrimaryStory}\n          />\n          <RenderArgsTable\n            story={primaryStory as unknown as PrimaryStory}\n            hideArgsTable={hideArgsTable}\n            showSlotsApi={argTable.slotsApi}\n            showNativePropsApi={argTable.nativePropsApi}\n          />\n          <Stories />\n        </div>\n        {showTableOfContents && (\n          <div className={styles.toc}>\n            <Toc stories={stories} />\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nfunction assertStoryMetaValues(story: ReturnType<DocsContextProps['componentStories']>[number]) {\n  if (story.component === null) {\n    throw new Error(\n      [\n        '🚨 Invalid Story Meta declaration:',\n        `- primaryStory.component of componentId:${story.componentId} is \"null\"`,\n        '- to resolve this error, please update \"component\" property value in your story definition to reference a React Component or remove it if it is not needed.',\n      ].join('\\n'),\n    );\n  }\n}\n"],"names":["React","DocsContext","ArgTypes","Title","Subtitle","Description","HeaderMdx","Primary","Stories","tokens","Link","Text","makeStyles","InfoFilled","DIR_ID","THEME_ID","themes","getDocsPageConfig","DirSwitch","ThemePicker","Toc","nameToHash","CopyAsMarkdownButton","useStyles","divider","height","backgroundColor","border","margin","wrapper","display","gap","toc","flexBasis","flexShrink","container","width","flexGrow","globalTogglesContainer","columnGap","spacingHorizontalXXXL","description","gridTemplateColumns","additionalInfoWrapper","flexDirection","spacingVerticalM","additionalInfo","colorNeutralStroke1","borderRadius","borderRadiusMedium","padding","spacingHorizontalM","additionalInfoIcon","alignSelf","color","colorBrandForeground1","fontSize","marginRight","additionalInfoMessage","alignItems","spacingVerticalXS","infoIcon","flex","useVideoClasses","spacingHorizontalMNudge","preview","borderRadiusSmall","colorNeutralBackground2","colorNeutralBackground2Hover","image","VideoPreviews","props","videos","classes","div","className","map","video","href","target","key","img","alt","src","title","getNativeElementsList","elements","elementsArr","el","idx","code","length","slotRegex","withSlotEnhancer","story","options","hasArgAsProp","nativePropsApi","argTypes","as","type","name","argAsProp","value","hasArgAsSlot","transformArgTypeNameWithSlotShorthand","typeName","match","includes","transformArgTypesWithSlotShorthand","Object","values","forEach","argType","table","summary","transformComponentDocGenProps","component","docGenProps","__docgenInfo","moduleExport","slotsApi","subcomponents","AdditionalApiDocs","children","styles","RenderArgsTable","hideArgsTable","showSlotsApi","showNativePropsApi","p","b","span","role","br","of","RenderPrimaryStory","primaryStory","skipPrimaryStory","hr","id","FluentDocsPage","primaryStoryContext","context","useContext","docsPageConfig","stories","componentStories","getStoryContext","assertStoryMetaValues","dir","parameters","globals","selectedTheme","find","theme","Boolean","docs","tableOfContents","showTableOfContents","dirSwitcher","showDirSwitcher","themePicker","showThemePicker","copyAsMarkdown","showCopyAsMarkdown","argTable","selectedThemeId","storyId","Error","componentId","join"],"mappings":"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"}

package/lib/docs/FluentStory.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+const iframeStyle = {
+    width: '100%',
+    border: 'none'
+};
+/**
+ * Story component to render stories in an iframe.
+ * Provides a similar experience to Storybook's v7 `Story` component.
+ */ export const FluentStory = ({ id, height })=>{
+    return /*#__PURE__*/ React.createElement("div", {
+        className: "sb-story sb-unstyled"
+    }, /*#__PURE__*/ React.createElement("iframe", {
+        title: id,
+        src: `iframe.html?id=${id}&mode=story`,
+        style: iframeStyle,
+        height: height
+    }));
+};

package/lib/docs/FluentStory.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/docs/FluentStory.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nconst iframeStyle: React.CSSProperties = {\n  width: '100%',\n  border: 'none',\n};\n\ntype FluentStoryProps = {\n  /** The unique identifier for the story */\n  id: string;\n  /** The height of the iframe */\n  height?: string | number;\n};\n\n/**\n * Story component to render stories in an iframe.\n * Provides a similar experience to Storybook's v7 `Story` component.\n */\nexport const FluentStory = ({ id, height }: FluentStoryProps): JSXElement => {\n  return (\n    <div className=\"sb-story sb-unstyled\">\n      <iframe title={id} src={`iframe.html?id=${id}&mode=story`} style={iframeStyle} height={height} />\n    </div>\n  );\n};\n"],"names":["React","iframeStyle","width","border","FluentStory","id","height","div","className","iframe","title","src","style"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,cAAmC;IACvCC,OAAO;IACPC,QAAQ;AACV;AASA;;;CAGC,GACD,OAAO,MAAMC,cAAc,CAAC,EAAEC,EAAE,EAAEC,MAAM,EAAoB;IAC1D,qBACE,oBAACC;QAAIC,WAAU;qBACb,oBAACC;QAAOC,OAAOL;QAAIM,KAAK,CAAC,eAAe,EAAEN,GAAG,WAAW,CAAC;QAAEO,OAAOX;QAAaK,QAAQA;;AAG7F,EAAE"}

package/lib/docs/ThemePicker.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { addons } from '@storybook/preview-api';
+import { addons } from 'storybook/preview-api';
 import { Menu, MenuItemRadio, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-menu';
 import { MenuButton } from '@fluentui/react-button';
 import { makeStyles } from '@griffel/react';

package/lib/docs/ThemePicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/docs/ThemePicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { addons } from '@storybook/preview-api';\n\nimport { Menu, MenuItemRadio, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-menu';\nimport type { MenuProps } from '@fluentui/react-menu';\nimport { MenuButton } from '@fluentui/react-button';\nimport { makeStyles } from '@griffel/react';\n\nimport { themes, ThemeIds, THEME_ID } from '..';\n\nconst useStyles = makeStyles({\n  menuButton: {\n    minWidth: '210px',\n    justifyContent: 'flex-start',\n  },\n\n  chevronIcon: {\n    marginLeft: 'auto',\n  },\n\n  menuPopover: {\n    minWidth: '210px',\n  },\n});\n\n/**\n * Theme picker used in the react-components docs header\n */\nexport const ThemePicker: React.FC<{ selectedThemeId?: string }> = ({ selectedThemeId }) => {\n  const styles = useStyles();\n  const [currentThemeId, setCurrentThemeId] = React.useState(selectedThemeId ?? null);\n\n  const setGlobalTheme = (themeId: ThemeIds): void => {\n    addons.getChannel().emit('updateGlobals', { globals: { [THEME_ID]: themeId } });\n  };\n  const onCheckedValueChange: MenuProps['onCheckedValueChange'] = (e, data) => {\n    const newThemeId = data.checkedItems[0] as ThemeIds;\n    setGlobalTheme(newThemeId);\n    setCurrentThemeId(newThemeId);\n  };\n\n  const selectedTheme = themes.find(theme => theme.id === currentThemeId);\n\n  return (\n    <Menu\n      // eslint-disable-next-line react/jsx-no-bind\n      onCheckedValueChange={onCheckedValueChange}\n      checkedValues={{ theme: selectedThemeId ? [selectedThemeId] : [] }}\n      positioning={{ autoSize: true }}\n    >\n      <MenuTrigger>\n        <MenuButton className={styles.menuButton} menuIcon={{ className: styles.chevronIcon }}>\n          {selectedTheme?.label ?? 'Theme'}\n        </MenuButton>\n      </MenuTrigger>\n      <MenuPopover className={styles.menuPopover}>\n        <MenuList>\n          {themes.map(theme => (\n            <MenuItemRadio name=\"theme\" value={theme.id} key={theme.id}>\n              {theme.label}\n            </MenuItemRadio>\n          ))}\n        </MenuList>\n      </MenuPopover>\n    </Menu>\n  );\n};\n"],"names":["React","addons","Menu","MenuItemRadio","MenuList","MenuPopover","MenuTrigger","MenuButton","makeStyles","themes","THEME_ID","useStyles","menuButton","minWidth","justifyContent","chevronIcon","marginLeft","menuPopover","ThemePicker","selectedThemeId","styles","currentThemeId","setCurrentThemeId","useState","setGlobalTheme","themeId","getChannel","emit","globals","onCheckedValueChange","e","data","newThemeId","checkedItems","selectedTheme","find","theme","id","checkedValues","positioning","autoSize","className","menuIcon","label","map","name","value","key"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,yBAAyB;AAEhD,SAASC,IAAI,EAAEC,aAAa,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,WAAW,QAAQ,uBAAuB;AAE/F,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,UAAU,QAAQ,iBAAiB;AAE5C,SAASC,MAAM,EAAYC,QAAQ,QAAQ,KAAK;AAEhD,MAAMC,YAAYH,WAAW;IAC3BI,YAAY;QACVC,UAAU;QACVC,gBAAgB;IAClB;IAEAC,aAAa;QACXC,YAAY;IACd;IAEAC,aAAa;QACXJ,UAAU;IACZ;AACF;AAEA;;CAEC,GACD,OAAO,MAAMK,cAAsD,CAAC,EAAEC,eAAe,EAAE;IACrF,MAAMC,SAAST;IACf,MAAM,CAACU,gBAAgBC,kBAAkB,GAAGtB,MAAMuB,QAAQ,CAACJ,4BAAAA,6BAAAA,kBAAmB;IAE9E,MAAMK,iBAAiB,CAACC;QACtBxB,OAAOyB,UAAU,GAAGC,IAAI,CAAC,iBAAiB;YAAEC,SAAS;gBAAE,CAAClB,SAAS,EAAEe;YAAQ;QAAE;IAC/E;IACA,MAAMI,uBAA0D,CAACC,GAAGC;QAClE,MAAMC,aAAaD,KAAKE,YAAY,CAAC,EAAE;QACvCT,eAAeQ;QACfV,kBAAkBU;IACpB;IAEA,MAAME,gBAAgBzB,OAAO0B,IAAI,CAACC,CAAAA,QAASA,MAAMC,EAAE,KAAKhB;QAW/Ca;IATT,qBACE,oBAAChC;QACC,6CAA6C;QAC7C2B,sBAAsBA;QACtBS,eAAe;YAAEF,OAAOjB,kBAAkB;gBAACA;aAAgB,GAAG,EAAE;QAAC;QACjEoB,aAAa;YAAEC,UAAU;QAAK;qBAE9B,oBAAClC,iCACC,oBAACC;QAAWkC,WAAWrB,OAAOR,UAAU;QAAE8B,UAAU;YAAED,WAAWrB,OAAOL,WAAW;QAAC;OACjFmB,CAAAA,uBAAAA,0BAAAA,oCAAAA,cAAeS,KAAK,cAApBT,kCAAAA,uBAAwB,yBAG7B,oBAAC7B;QAAYoC,WAAWrB,OAAOH,WAAW;qBACxC,oBAACb,gBACEK,OAAOmC,GAAG,CAACR,CAAAA,sBACV,oBAACjC;YAAc0C,MAAK;YAAQC,OAAOV,MAAMC,EAAE;YAAEU,KAAKX,MAAMC,EAAE;WACvDD,MAAMO,KAAK;AAO1B,EAAE"}
+{"version":3,"sources":["../src/docs/ThemePicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { addons } from 'storybook/preview-api';\n\nimport { Menu, MenuItemRadio, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-menu';\nimport type { MenuProps } from '@fluentui/react-menu';\nimport { MenuButton } from '@fluentui/react-button';\nimport { makeStyles } from '@griffel/react';\n\nimport { themes, ThemeIds, THEME_ID } from '..';\n\nconst useStyles = makeStyles({\n  menuButton: {\n    minWidth: '210px',\n    justifyContent: 'flex-start',\n  },\n\n  chevronIcon: {\n    marginLeft: 'auto',\n  },\n\n  menuPopover: {\n    minWidth: '210px',\n  },\n});\n\n/**\n * Theme picker used in the react-components docs header\n */\nexport const ThemePicker: React.FC<{ selectedThemeId?: string }> = ({ selectedThemeId }) => {\n  const styles = useStyles();\n  const [currentThemeId, setCurrentThemeId] = React.useState(selectedThemeId ?? null);\n\n  const setGlobalTheme = (themeId: ThemeIds): void => {\n    addons.getChannel().emit('updateGlobals', { globals: { [THEME_ID]: themeId } });\n  };\n  const onCheckedValueChange: MenuProps['onCheckedValueChange'] = (e, data) => {\n    const newThemeId = data.checkedItems[0] as ThemeIds;\n    setGlobalTheme(newThemeId);\n    setCurrentThemeId(newThemeId);\n  };\n\n  const selectedTheme = themes.find(theme => theme.id === currentThemeId);\n\n  return (\n    <Menu\n      // eslint-disable-next-line react/jsx-no-bind\n      onCheckedValueChange={onCheckedValueChange}\n      checkedValues={{ theme: selectedThemeId ? [selectedThemeId] : [] }}\n      positioning={{ autoSize: true }}\n    >\n      <MenuTrigger>\n        <MenuButton className={styles.menuButton} menuIcon={{ className: styles.chevronIcon }}>\n          {selectedTheme?.label ?? 'Theme'}\n        </MenuButton>\n      </MenuTrigger>\n      <MenuPopover className={styles.menuPopover}>\n        <MenuList>\n          {themes.map(theme => (\n            <MenuItemRadio name=\"theme\" value={theme.id} key={theme.id}>\n              {theme.label}\n            </MenuItemRadio>\n          ))}\n        </MenuList>\n      </MenuPopover>\n    </Menu>\n  );\n};\n"],"names":["React","addons","Menu","MenuItemRadio","MenuList","MenuPopover","MenuTrigger","MenuButton","makeStyles","themes","THEME_ID","useStyles","menuButton","minWidth","justifyContent","chevronIcon","marginLeft","menuPopover","ThemePicker","selectedThemeId","styles","currentThemeId","setCurrentThemeId","useState","setGlobalTheme","themeId","getChannel","emit","globals","onCheckedValueChange","e","data","newThemeId","checkedItems","selectedTheme","find","theme","id","checkedValues","positioning","autoSize","className","menuIcon","label","map","name","value","key"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,SAASC,IAAI,EAAEC,aAAa,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,WAAW,QAAQ,uBAAuB;AAE/F,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,UAAU,QAAQ,iBAAiB;AAE5C,SAASC,MAAM,EAAYC,QAAQ,QAAQ,KAAK;AAEhD,MAAMC,YAAYH,WAAW;IAC3BI,YAAY;QACVC,UAAU;QACVC,gBAAgB;IAClB;IAEAC,aAAa;QACXC,YAAY;IACd;IAEAC,aAAa;QACXJ,UAAU;IACZ;AACF;AAEA;;CAEC,GACD,OAAO,MAAMK,cAAsD,CAAC,EAAEC,eAAe,EAAE;IACrF,MAAMC,SAAST;IACf,MAAM,CAACU,gBAAgBC,kBAAkB,GAAGtB,MAAMuB,QAAQ,CAACJ,4BAAAA,6BAAAA,kBAAmB;IAE9E,MAAMK,iBAAiB,CAACC;QACtBxB,OAAOyB,UAAU,GAAGC,IAAI,CAAC,iBAAiB;YAAEC,SAAS;gBAAE,CAAClB,SAAS,EAAEe;YAAQ;QAAE;IAC/E;IACA,MAAMI,uBAA0D,CAACC,GAAGC;QAClE,MAAMC,aAAaD,KAAKE,YAAY,CAAC,EAAE;QACvCT,eAAeQ;QACfV,kBAAkBU;IACpB;IAEA,MAAME,gBAAgBzB,OAAO0B,IAAI,CAACC,CAAAA,QAASA,MAAMC,EAAE,KAAKhB;QAW/Ca;IATT,qBACE,oBAAChC;QACC,6CAA6C;QAC7C2B,sBAAsBA;QACtBS,eAAe;YAAEF,OAAOjB,kBAAkB;gBAACA;aAAgB,GAAG,EAAE;QAAC;QACjEoB,aAAa;YAAEC,UAAU;QAAK;qBAE9B,oBAAClC,iCACC,oBAACC;QAAWkC,WAAWrB,OAAOR,UAAU;QAAE8B,UAAU;YAAED,WAAWrB,OAAOL,WAAW;QAAC;OACjFmB,CAAAA,uBAAAA,0BAAAA,oCAAAA,cAAeS,KAAK,cAApBT,kCAAAA,uBAAwB,yBAG7B,oBAAC7B;QAAYoC,WAAWrB,OAAOH,WAAW;qBACxC,oBAACb,gBACEK,OAAOmC,GAAG,CAACR,CAAAA,sBACV,oBAACjC;YAAc0C,MAAK;YAAQC,OAAOV,MAAMC,EAAE;YAAEU,KAAKX,MAAMC,EAAE;WACvDD,MAAMO,KAAK;AAO1B,EAAE"}

package/lib/docs/Toc.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { addons } from '@storybook/preview-api';
-import { NAVIGATE_URL } from '@storybook/core-events';
+import { addons } from 'storybook/manager-api';
+import { NAVIGATE_URL } from 'storybook/internal/core-events';
 import { makeStyles } from '@griffel/react';
 const useTocStyles = makeStyles({
     root: {

package/lib/docs/Toc.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/docs/Toc.tsx"],"sourcesContent":["import * as React from 'react';\nimport { addons } from '@storybook/preview-api';\nimport { NAVIGATE_URL } from '@storybook/core-events';\n\nimport { makeStyles } from '@griffel/react';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nconst useTocStyles = makeStyles({\n  root: {\n    top: '64px',\n    position: 'sticky',\n    marginLeft: '40px',\n  },\n  heading: {\n    fontSize: '11px',\n    fontWeight: 'bold',\n    textTransform: 'uppercase',\n    marginBottom: '20px',\n  },\n  ol: {\n    position: 'relative',\n    listStyleType: 'none',\n    marginLeft: 0,\n    marginTop: 0,\n    paddingInlineStart: '20px',\n    '& li': {\n      marginBottom: '15px',\n      lineHeight: '16px',\n    },\n    '& a': {\n      textDecorationLine: 'none',\n      color: '#201F1E',\n      fontSize: '14px',\n      ':hover': {\n        color: '#201F1E',\n      },\n    },\n    '&:before': {\n      content: '\"\"',\n      position: 'absolute',\n      left: 0,\n      height: '100%',\n      width: '3px',\n      backgroundColor: '#EDEBE9',\n      borderRadius: '4px',\n    },\n  },\n  selected: {\n    position: 'relative',\n    '&:after': {\n      content: '\"\"',\n      position: 'absolute',\n      left: '-20px',\n      top: 0,\n      bottom: 0,\n      width: '3px',\n      backgroundColor: '#436DCD',\n      borderRadius: '4px',\n    },\n  },\n});\n\ntype TocItem = { name: string; id: string; selected?: boolean };\n\n// // Alternative approach to navigate - rerenders the iframe\n// // Usage: selectStory({ story: s.name, kind: s.kind });\n// const selectStory = (story: { kind: string; story: string }) => {\n//   console.log('Select Story', story);\n//   addons.getChannel().emit(SELECT_STORY, story);\n// };\n\nconst navigate = (url: string) => {\n  addons.getChannel().emit(NAVIGATE_URL, url);\n};\n\nexport const nameToHash = (id: string): string => id.toLowerCase().replace(/[^a-z0-9]/gi, '-');\n\nexport const Toc = ({ stories }: { stories: TocItem[] }): JSXElement => {\n  const [selected, setSelected] = React.useState('');\n  const isNavigating = React.useRef<boolean>(false);\n\n  React.useEffect(() => {\n    // eslint-disable-next-line @nx/workspace-no-restricted-globals\n    const observer = new IntersectionObserver(\n      (entries: IntersectionObserverEntry[]) => {\n        if (isNavigating.current) {\n          isNavigating.current = false;\n          return;\n        }\n        for (const entry of entries) {\n          const { intersectionRatio, target } = entry;\n          if (intersectionRatio > 0.5) {\n            setSelected(target.id);\n            return;\n          }\n        }\n      },\n      {\n        threshold: [0.5],\n      },\n    );\n\n    stories.forEach(link => {\n      // eslint-disable-next-line @nx/workspace-no-restricted-globals\n      const element = document.getElementById(nameToHash(link.name));\n      if (element) {\n        observer.observe(element);\n      }\n    });\n\n    return () => observer.disconnect();\n  }, [stories]);\n\n  const tocItems = stories.map(item => {\n    return { ...item, selected: nameToHash(item.name) === selected };\n  });\n  const tocClasses = useTocStyles();\n  return (\n    <nav className={tocClasses.root}>\n      <h3 className={tocClasses.heading}>On this page</h3>\n      <ol className={tocClasses.ol}>\n        {tocItems.map(s => {\n          const name = nameToHash(s.name);\n          return (\n            <li className={s.selected ? tocClasses.selected : ''} key={s.id}>\n              <a\n                href={`#${name}`}\n                target=\"_self\"\n                onClick={e => {\n                  isNavigating.current = true;\n                  navigate(`#${name}`);\n                  setSelected(name);\n                }}\n              >\n                {s.name}\n              </a>\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n"],"names":["React","addons","NAVIGATE_URL","makeStyles","useTocStyles","root","top","position","marginLeft","heading","fontSize","fontWeight","textTransform","marginBottom","ol","listStyleType","marginTop","paddingInlineStart","lineHeight","textDecorationLine","color","content","left","height","width","backgroundColor","borderRadius","selected","bottom","navigate","url","getChannel","emit","nameToHash","id","toLowerCase","replace","Toc","stories","setSelected","useState","isNavigating","useRef","useEffect","observer","IntersectionObserver","entries","current","entry","intersectionRatio","target","threshold","forEach","link","element","document","getElementById","name","observe","disconnect","tocItems","map","item","tocClasses","nav","className","h3","s","li","key","a","href","onClick","e"],"mappings":"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"}
+{"version":3,"sources":["../src/docs/Toc.tsx"],"sourcesContent":["import * as React from 'react';\nimport { addons } from 'storybook/manager-api';\nimport { NAVIGATE_URL } from 'storybook/internal/core-events';\n\nimport { makeStyles } from '@griffel/react';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nconst useTocStyles = makeStyles({\n  root: {\n    top: '64px',\n    position: 'sticky',\n    marginLeft: '40px',\n  },\n  heading: {\n    fontSize: '11px',\n    fontWeight: 'bold',\n    textTransform: 'uppercase',\n    marginBottom: '20px',\n  },\n  ol: {\n    position: 'relative',\n    listStyleType: 'none',\n    marginLeft: 0,\n    marginTop: 0,\n    paddingInlineStart: '20px',\n    '& li': {\n      marginBottom: '15px',\n      lineHeight: '16px',\n    },\n    '& a': {\n      textDecorationLine: 'none',\n      color: '#201F1E',\n      fontSize: '14px',\n      ':hover': {\n        color: '#201F1E',\n      },\n    },\n    '&:before': {\n      content: '\"\"',\n      position: 'absolute',\n      left: 0,\n      height: '100%',\n      width: '3px',\n      backgroundColor: '#EDEBE9',\n      borderRadius: '4px',\n    },\n  },\n  selected: {\n    position: 'relative',\n    '&:after': {\n      content: '\"\"',\n      position: 'absolute',\n      left: '-20px',\n      top: 0,\n      bottom: 0,\n      width: '3px',\n      backgroundColor: '#436DCD',\n      borderRadius: '4px',\n    },\n  },\n});\n\ntype TocItem = { name: string; id: string; selected?: boolean };\n\n// // Alternative approach to navigate - rerenders the iframe\n// // Usage: selectStory({ story: s.name, kind: s.kind });\n// const selectStory = (story: { kind: string; story: string }) => {\n//   console.log('Select Story', story);\n//   addons.getChannel().emit(SELECT_STORY, story);\n// };\n\nconst navigate = (url: string) => {\n  addons.getChannel().emit(NAVIGATE_URL, url);\n};\n\nexport const nameToHash = (id: string): string => id.toLowerCase().replace(/[^a-z0-9]/gi, '-');\n\nexport const Toc = ({ stories }: { stories: TocItem[] }): JSXElement => {\n  const [selected, setSelected] = React.useState('');\n  const isNavigating = React.useRef<boolean>(false);\n\n  React.useEffect(() => {\n    // eslint-disable-next-line @nx/workspace-no-restricted-globals\n    const observer = new IntersectionObserver(\n      (entries: IntersectionObserverEntry[]) => {\n        if (isNavigating.current) {\n          isNavigating.current = false;\n          return;\n        }\n        for (const entry of entries) {\n          const { intersectionRatio, target } = entry;\n          if (intersectionRatio > 0.5) {\n            setSelected(target.id);\n            return;\n          }\n        }\n      },\n      {\n        threshold: [0.5],\n      },\n    );\n\n    stories.forEach(link => {\n      // eslint-disable-next-line @nx/workspace-no-restricted-globals\n      const element = document.getElementById(nameToHash(link.name));\n      if (element) {\n        observer.observe(element);\n      }\n    });\n\n    return () => observer.disconnect();\n  }, [stories]);\n\n  const tocItems = stories.map(item => {\n    return { ...item, selected: nameToHash(item.name) === selected };\n  });\n  const tocClasses = useTocStyles();\n  return (\n    <nav className={tocClasses.root}>\n      <h3 className={tocClasses.heading}>On this page</h3>\n      <ol className={tocClasses.ol}>\n        {tocItems.map(s => {\n          const name = nameToHash(s.name);\n          return (\n            <li className={s.selected ? tocClasses.selected : ''} key={s.id}>\n              <a\n                href={`#${name}`}\n                target=\"_self\"\n                onClick={e => {\n                  isNavigating.current = true;\n                  navigate(`#${name}`);\n                  setSelected(name);\n                }}\n              >\n                {s.name}\n              </a>\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n"],"names":["React","addons","NAVIGATE_URL","makeStyles","useTocStyles","root","top","position","marginLeft","heading","fontSize","fontWeight","textTransform","marginBottom","ol","listStyleType","marginTop","paddingInlineStart","lineHeight","textDecorationLine","color","content","left","height","width","backgroundColor","borderRadius","selected","bottom","navigate","url","getChannel","emit","nameToHash","id","toLowerCase","replace","Toc","stories","setSelected","useState","isNavigating","useRef","useEffect","observer","IntersectionObserver","entries","current","entry","intersectionRatio","target","threshold","forEach","link","element","document","getElementById","name","observe","disconnect","tocItems","map","item","tocClasses","nav","className","h3","s","li","key","a","href","onClick","e"],"mappings":"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"}

package/lib/docs/index.js

@@ -1,2 +1,4 @@
+export { FluentCanvas } from './FluentCanvas';
 export { FluentDocsContainer } from './FluentDocsContainer';
 export { FluentDocsPage } from './FluentDocsPage';
+export { FluentStory } from './FluentStory';