@fluentui/react-storybook-addon 0.5.1 → 0.6.0

package/lib/docs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/docs/index.ts"],"sourcesContent":["export { FluentDocsContainer } from './FluentDocsContainer';\nexport { FluentDocsPage } from './FluentDocsPage';\n"],"names":["FluentDocsContainer","FluentDocsPage"],"mappings":"AAAA,SAASA,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,cAAc,QAAQ,mBAAmB"}
+{"version":3,"sources":["../src/docs/index.ts"],"sourcesContent":["export { FluentCanvas } from './FluentCanvas';\nexport { FluentDocsContainer } from './FluentDocsContainer';\nexport { FluentDocsPage } from './FluentDocsPage';\nexport { FluentStory } from './FluentStory';\n"],"names":["FluentCanvas","FluentDocsContainer","FluentDocsPage","FluentStory"],"mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,WAAW,QAAQ,gBAAgB"}

package/lib/docs/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/docs/utils.ts"],"sourcesContent":["import { type DocsContextProps } from '@storybook/addon-docs';\n\nimport { type FluentParameters } from '../hooks';\n\nconst docsDefaults = {\n  copyAsMarkdown: true,\n  tableOfContents: true,\n  dirSwitcher: true,\n  themePicker: true,\n  argTable: {\n    slotsApi: true,\n    nativePropsApi: true,\n  },\n};\n\nfunction getDocsParametersConfig(\n  context: DocsContextProps,\n): NonNullable<FluentParameters['reactStorybookAddon']>['docs'] {\n  return context?.projectAnnotations?.parameters?.reactStorybookAddon?.docs;\n}\n\n/**\n * Checks if the docs page is enabled\n */\nexport function isDocsEnabled(context: DocsContextProps): boolean {\n  const docsConfig = getDocsParametersConfig(context);\n\n  // If docs is true, enable page\n  if (docsConfig === true) {\n    return true;\n  }\n\n  // If docs is an object, page is enabled\n  if (typeof docsConfig === 'object' && docsConfig !== null) {\n    return true;\n  }\n\n  // Default: disabled\n  return false;\n}\n\n/**\n * Gets the docs page configuration from context\n */\nexport function getDocsPageConfig(context: DocsContextProps): {\n  tableOfContents: boolean;\n  dirSwitcher: boolean;\n  themePicker: boolean;\n  copyAsMarkdown: boolean;\n  argTable: {\n    slotsApi: boolean;\n    nativePropsApi: boolean;\n  };\n} | null {\n  const docsConfig = getDocsParametersConfig(context);\n\n  // If docs is true, return default config (all enabled)\n  if (docsConfig === true) {\n    return docsDefaults;\n  }\n\n  // If docs is an object, extract the configuration directly\n  if (typeof docsConfig === 'object' && docsConfig !== null) {\n    return {\n      copyAsMarkdown: docsConfig.copyAsMarkdown !== false,\n      tableOfContents: docsConfig.tableOfContents !== false,\n      dirSwitcher: docsConfig.dirSwitcher !== false,\n      themePicker: docsConfig.themePicker !== false,\n      argTable: getArgTableConfig(docsConfig.argTable),\n    };\n  }\n\n  // Fallback\n  return null;\n}\n\n/**\n * Gets the argTable configuration with early exit pattern\n */\nfunction getArgTableConfig(argTableConfig: boolean | { slotsApi?: boolean; nativePropsApi?: boolean } | undefined) {\n  if (argTableConfig === false) {\n    return {\n      slotsApi: false,\n      nativePropsApi: false,\n    };\n  }\n\n  if (argTableConfig === true || argTableConfig === undefined) {\n    return {\n      slotsApi: true,\n      nativePropsApi: true,\n    };\n  }\n\n  if (typeof argTableConfig === 'object' && argTableConfig !== null) {\n    return {\n      slotsApi: argTableConfig.slotsApi !== false,\n      nativePropsApi: argTableConfig.nativePropsApi !== false,\n    };\n  }\n\n  // Fallback to default\n  return docsDefaults.argTable;\n}\n"],"names":["docsDefaults","copyAsMarkdown","tableOfContents","dirSwitcher","themePicker","argTable","slotsApi","nativePropsApi","getDocsParametersConfig","context","projectAnnotations","parameters","reactStorybookAddon","docs","isDocsEnabled","docsConfig","getDocsPageConfig","getArgTableConfig","argTableConfig","undefined"],"mappings":"AAIA,MAAMA,eAAe;IACnBC,gBAAgB;IAChBC,iBAAiB;IACjBC,aAAa;IACbC,aAAa;IACbC,UAAU;QACRC,UAAU;QACVC,gBAAgB;IAClB;AACF;AAEA,SAASC,wBACPC,OAAyB;QAElBA,4DAAAA,wCAAAA;IAAP,OAAOA,oBAAAA,+BAAAA,8BAAAA,QAASC,kBAAkB,cAA3BD,mDAAAA,yCAAAA,4BAA6BE,UAAU,cAAvCF,8DAAAA,6DAAAA,uCAAyCG,mBAAmB,cAA5DH,iFAAAA,2DAA8DI,IAAI;AAC3E;AAEA;;CAEC,GACD,OAAO,SAASC,cAAcL,OAAyB;IACrD,MAAMM,aAAaP,wBAAwBC;IAE3C,+BAA+B;IAC/B,IAAIM,eAAe,MAAM;QACvB,OAAO;IACT;IAEA,wCAAwC;IACxC,IAAI,OAAOA,eAAe,YAAYA,eAAe,MAAM;QACzD,OAAO;IACT;IAEA,oBAAoB;IACpB,OAAO;AACT;AAEA;;CAEC,GACD,OAAO,SAASC,kBAAkBP,OAAyB;IAUzD,MAAMM,aAAaP,wBAAwBC;IAE3C,uDAAuD;IACvD,IAAIM,eAAe,MAAM;QACvB,OAAOf;IACT;IAEA,2DAA2D;IAC3D,IAAI,OAAOe,eAAe,YAAYA,eAAe,MAAM;QACzD,OAAO;YACLd,gBAAgBc,WAAWd,cAAc,KAAK;YAC9CC,iBAAiBa,WAAWb,eAAe,KAAK;YAChDC,aAAaY,WAAWZ,WAAW,KAAK;YACxCC,aAAaW,WAAWX,WAAW,KAAK;YACxCC,UAAUY,kBAAkBF,WAAWV,QAAQ;QACjD;IACF;IAEA,WAAW;IACX,OAAO;AACT;AAEA;;CAEC,GACD,SAASY,kBAAkBC,cAAsF;IAC/G,IAAIA,mBAAmB,OAAO;QAC5B,OAAO;YACLZ,UAAU;YACVC,gBAAgB;QAClB;IACF;IAEA,IAAIW,mBAAmB,QAAQA,mBAAmBC,WAAW;QAC3D,OAAO;YACLb,UAAU;YACVC,gBAAgB;QAClB;IACF;IAEA,IAAI,OAAOW,mBAAmB,YAAYA,mBAAmB,MAAM;QACjE,OAAO;YACLZ,UAAUY,eAAeZ,QAAQ,KAAK;YACtCC,gBAAgBW,eAAeX,cAAc,KAAK;QACpD;IACF;IAEA,sBAAsB;IACtB,OAAOP,aAAaK,QAAQ;AAC9B"}
+{"version":3,"sources":["../src/docs/utils.ts"],"sourcesContent":["import { type DocsContextProps } from '@storybook/addon-docs/blocks';\n\nimport { type FluentParameters } from '../hooks';\n\nconst docsDefaults = {\n  copyAsMarkdown: true,\n  tableOfContents: true,\n  dirSwitcher: true,\n  themePicker: true,\n  argTable: {\n    slotsApi: true,\n    nativePropsApi: true,\n  },\n};\n\nfunction getDocsParametersConfig(\n  context: DocsContextProps,\n): NonNullable<FluentParameters['reactStorybookAddon']>['docs'] {\n  return context?.projectAnnotations?.parameters?.reactStorybookAddon?.docs;\n}\n\n/**\n * Checks if the docs page is enabled\n */\nexport function isDocsEnabled(context: DocsContextProps): boolean {\n  const docsConfig = getDocsParametersConfig(context);\n\n  // If docs is true, enable page\n  if (docsConfig === true) {\n    return true;\n  }\n\n  // If docs is an object, page is enabled\n  if (typeof docsConfig === 'object' && docsConfig !== null) {\n    return true;\n  }\n\n  // Default: disabled\n  return false;\n}\n\n/**\n * Gets the docs page configuration from context\n */\nexport function getDocsPageConfig(context: DocsContextProps): {\n  tableOfContents: boolean;\n  dirSwitcher: boolean;\n  themePicker: boolean;\n  copyAsMarkdown: boolean;\n  argTable: {\n    slotsApi: boolean;\n    nativePropsApi: boolean;\n  };\n} | null {\n  const docsConfig = getDocsParametersConfig(context);\n\n  // If docs is true, return default config (all enabled)\n  if (docsConfig === true) {\n    return docsDefaults;\n  }\n\n  // If docs is an object, extract the configuration directly\n  if (typeof docsConfig === 'object' && docsConfig !== null) {\n    return {\n      copyAsMarkdown: docsConfig.copyAsMarkdown !== false,\n      tableOfContents: docsConfig.tableOfContents !== false,\n      dirSwitcher: docsConfig.dirSwitcher !== false,\n      themePicker: docsConfig.themePicker !== false,\n      argTable: getArgTableConfig(docsConfig.argTable),\n    };\n  }\n\n  // Fallback\n  return null;\n}\n\n/**\n * Gets the argTable configuration with early exit pattern\n */\nfunction getArgTableConfig(argTableConfig: boolean | { slotsApi?: boolean; nativePropsApi?: boolean } | undefined) {\n  if (argTableConfig === false) {\n    return {\n      slotsApi: false,\n      nativePropsApi: false,\n    };\n  }\n\n  if (argTableConfig === true || argTableConfig === undefined) {\n    return {\n      slotsApi: true,\n      nativePropsApi: true,\n    };\n  }\n\n  if (typeof argTableConfig === 'object' && argTableConfig !== null) {\n    return {\n      slotsApi: argTableConfig.slotsApi !== false,\n      nativePropsApi: argTableConfig.nativePropsApi !== false,\n    };\n  }\n\n  // Fallback to default\n  return docsDefaults.argTable;\n}\n"],"names":["docsDefaults","copyAsMarkdown","tableOfContents","dirSwitcher","themePicker","argTable","slotsApi","nativePropsApi","getDocsParametersConfig","context","projectAnnotations","parameters","reactStorybookAddon","docs","isDocsEnabled","docsConfig","getDocsPageConfig","getArgTableConfig","argTableConfig","undefined"],"mappings":"AAIA,MAAMA,eAAe;IACnBC,gBAAgB;IAChBC,iBAAiB;IACjBC,aAAa;IACbC,aAAa;IACbC,UAAU;QACRC,UAAU;QACVC,gBAAgB;IAClB;AACF;AAEA,SAASC,wBACPC,OAAyB;QAElBA,4DAAAA,wCAAAA;IAAP,OAAOA,oBAAAA,+BAAAA,8BAAAA,QAASC,kBAAkB,cAA3BD,mDAAAA,yCAAAA,4BAA6BE,UAAU,cAAvCF,8DAAAA,6DAAAA,uCAAyCG,mBAAmB,cAA5DH,iFAAAA,2DAA8DI,IAAI;AAC3E;AAEA;;CAEC,GACD,OAAO,SAASC,cAAcL,OAAyB;IACrD,MAAMM,aAAaP,wBAAwBC;IAE3C,+BAA+B;IAC/B,IAAIM,eAAe,MAAM;QACvB,OAAO;IACT;IAEA,wCAAwC;IACxC,IAAI,OAAOA,eAAe,YAAYA,eAAe,MAAM;QACzD,OAAO;IACT;IAEA,oBAAoB;IACpB,OAAO;AACT;AAEA;;CAEC,GACD,OAAO,SAASC,kBAAkBP,OAAyB;IAUzD,MAAMM,aAAaP,wBAAwBC;IAE3C,uDAAuD;IACvD,IAAIM,eAAe,MAAM;QACvB,OAAOf;IACT;IAEA,2DAA2D;IAC3D,IAAI,OAAOe,eAAe,YAAYA,eAAe,MAAM;QACzD,OAAO;YACLd,gBAAgBc,WAAWd,cAAc,KAAK;YAC9CC,iBAAiBa,WAAWb,eAAe,KAAK;YAChDC,aAAaY,WAAWZ,WAAW,KAAK;YACxCC,aAAaW,WAAWX,WAAW,KAAK;YACxCC,UAAUY,kBAAkBF,WAAWV,QAAQ;QACjD;IACF;IAEA,WAAW;IACX,OAAO;AACT;AAEA;;CAEC,GACD,SAASY,kBAAkBC,cAAsF;IAC/G,IAAIA,mBAAmB,OAAO;QAC5B,OAAO;YACLZ,UAAU;YACVC,gBAAgB;QAClB;IACF;IAEA,IAAIW,mBAAmB,QAAQA,mBAAmBC,WAAW;QAC3D,OAAO;YACLb,UAAU;YACVC,gBAAgB;QAClB;IACF;IAEA,IAAI,OAAOW,mBAAmB,YAAYA,mBAAmB,MAAM;QACjE,OAAO;YACLZ,UAAUY,eAAeZ,QAAQ,KAAK;YACtCC,gBAAgBW,eAAeX,cAAc,KAAK;QACpD;IACF;IAEA,sBAAsB;IACtB,OAAOP,aAAaK,QAAQ;AAC9B"}

package/lib/hooks.js

@@ -1,4 +1,4 @@
-import { useGlobals as useStorybookGlobals } from '@storybook/manager-api';
+import { useGlobals as useStorybookGlobals } from 'storybook/manager-api';
 export function useGlobals() {
     return useStorybookGlobals();
 }

package/lib/hooks.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks.ts"],"sourcesContent":["import { useGlobals as useStorybookGlobals } from '@storybook/manager-api';\nimport { Args as StorybookArgs, StoryContext as StorybookContext, Parameters } from '@storybook/react';\n\nimport { DIR_ID, STRICT_MODE_ID, THEME_ID } from './constants';\nimport type { ThemeIds } from './theme';\n\nexport interface FluentStoryContext extends StorybookContext {\n  globals: FluentGlobals;\n  parameters: FluentParameters;\n}\n\n/**\n * Extends the storybook globals object to include fluent specific properties\n */\nexport interface FluentGlobals extends StorybookArgs {\n  [DIR_ID]?: 'ltr' | 'rtl';\n  [THEME_ID]?: ThemeIds;\n  [STRICT_MODE_ID]?: boolean;\n}\n\n/**\n * Extends the storybook parameters object to include fluent specific properties\n */\nexport interface FluentParameters extends Parameters {\n  dir?: 'ltr' | 'rtl';\n  fluentTheme?: ThemeIds;\n  mode?: 'default' | 'vr-test';\n  reactStorybookAddon?: {\n    disabledDecorators?: ['AriaLive' | 'FluentProvider' | 'ReactStrictMode'];\n    docs?: FluentDocsConfig;\n  };\n}\n\n/**\n * Configuration for docs components\n */\ntype FluentDocsConfig =\n  | boolean\n  | {\n      tableOfContents?: boolean;\n      dirSwitcher?: boolean;\n      themePicker?: boolean;\n      copyAsMarkdown?: boolean;\n      argTable?:\n        | boolean\n        | {\n            slotsApi?: boolean;\n            nativePropsApi?: boolean;\n          };\n    };\n\nexport function useGlobals(): [FluentGlobals, (newGlobals: FluentGlobals) => void] {\n  return useStorybookGlobals();\n}\n\nexport function parameters(options?: FluentParameters): FluentParameters {\n  return { dir: 'ltr', fluentTheme: 'web-light', mode: 'default', ...options };\n}\nexport function getParametersConfig(context: FluentStoryContext): FluentParameters['reactStorybookAddon'] {\n  return context?.parameters?.reactStorybookAddon;\n}\n"],"names":["useGlobals","useStorybookGlobals","parameters","options","dir","fluentTheme","mode","getParametersConfig","context","reactStorybookAddon"],"mappings":"AAAA,SAASA,cAAcC,mBAAmB,QAAQ,yBAAyB;AAmD3E,OAAO,SAASD;IACd,OAAOC;AACT;AAEA,OAAO,SAASC,WAAWC,OAA0B;IACnD,OAAO;QAAEC,KAAK;QAAOC,aAAa;QAAaC,MAAM;QAAW,GAAGH,OAAO;IAAC;AAC7E;AACA,OAAO,SAASI,oBAAoBC,OAA2B;QACtDA;IAAP,OAAOA,oBAAAA,+BAAAA,sBAAAA,QAASN,UAAU,cAAnBM,0CAAAA,oBAAqBC,mBAAmB;AACjD"}
+{"version":3,"sources":["../src/hooks.ts"],"sourcesContent":["import { useGlobals as useStorybookGlobals } from 'storybook/manager-api';\nimport { Args as StorybookArgs, StoryContext as StorybookContext, Parameters } from '@storybook/react-webpack5';\n\nimport { DIR_ID, STRICT_MODE_ID, THEME_ID } from './constants';\nimport type { ThemeIds } from './theme';\n\nexport interface FluentStoryContext extends StorybookContext {\n  globals: FluentGlobals;\n  parameters: FluentParameters;\n}\n\n/**\n * Extends the storybook globals object to include fluent specific properties\n */\nexport interface FluentGlobals extends StorybookArgs {\n  [DIR_ID]?: 'ltr' | 'rtl';\n  [THEME_ID]?: ThemeIds;\n  [STRICT_MODE_ID]?: boolean;\n}\n\n/**\n * Extends the storybook parameters object to include fluent specific properties\n */\nexport interface FluentParameters extends Parameters {\n  dir?: 'ltr' | 'rtl';\n  fluentTheme?: ThemeIds;\n  mode?: 'default' | 'vr-test';\n  reactStorybookAddon?: {\n    disabledDecorators?: ['AriaLive' | 'FluentProvider' | 'ReactStrictMode'];\n    docs?: FluentDocsConfig;\n  };\n}\n\n/**\n * Configuration for docs components\n */\ntype FluentDocsConfig =\n  | boolean\n  | {\n      tableOfContents?: boolean;\n      dirSwitcher?: boolean;\n      themePicker?: boolean;\n      copyAsMarkdown?: boolean;\n      argTable?:\n        | boolean\n        | {\n            slotsApi?: boolean;\n            nativePropsApi?: boolean;\n          };\n    };\n\nexport function useGlobals(): [FluentGlobals, (newGlobals: FluentGlobals) => void, FluentGlobals, FluentGlobals] {\n  return useStorybookGlobals();\n}\n\nexport function parameters(options?: FluentParameters): FluentParameters {\n  return { dir: 'ltr', fluentTheme: 'web-light', mode: 'default', ...options };\n}\nexport function getParametersConfig(context: FluentStoryContext): FluentParameters['reactStorybookAddon'] {\n  return context?.parameters?.reactStorybookAddon;\n}\n"],"names":["useGlobals","useStorybookGlobals","parameters","options","dir","fluentTheme","mode","getParametersConfig","context","reactStorybookAddon"],"mappings":"AAAA,SAASA,cAAcC,mBAAmB,QAAQ,wBAAwB;AAmD1E,OAAO,SAASD;IACd,OAAOC;AACT;AAEA,OAAO,SAASC,WAAWC,OAA0B;IACnD,OAAO;QAAEC,KAAK;QAAOC,aAAa;QAAaC,MAAM;QAAW,GAAGH,OAAO;IAAC;AAC7E;AACA,OAAO,SAASI,oBAAoBC,OAA2B;QACtDA;IAAP,OAAOA,oBAAAA,+BAAAA,sBAAAA,QAASN,UAAU,cAAnBM,0CAAAA,oBAAqBC,mBAAmB;AACjD"}

package/lib/index.js

@@ -1,3 +1,4 @@
 export { themes } from './theme';
 export { DIR_ID, THEME_ID } from './constants';
 export { parameters } from './hooks';
+export { FluentCanvas, FluentStory } from './docs';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export type { FluentGlobals, FluentParameters, FluentStoryContext } from './hooks';\nexport type { ThemeIds } from './theme';\nexport { themes } from './theme';\nexport { DIR_ID, THEME_ID } from './constants';\nexport { parameters } from './hooks';\n"],"names":["themes","DIR_ID","THEME_ID","parameters"],"mappings":"AAEA,SAASA,MAAM,QAAQ,UAAU;AACjC,SAASC,MAAM,EAAEC,QAAQ,QAAQ,cAAc;AAC/C,SAASC,UAAU,QAAQ,UAAU"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export type { FluentGlobals, FluentParameters, FluentStoryContext } from './hooks';\nexport type { ThemeIds } from './theme';\nexport { themes } from './theme';\nexport { DIR_ID, THEME_ID } from './constants';\nexport { parameters } from './hooks';\nexport { FluentCanvas, FluentStory } from './docs';\n"],"names":["themes","DIR_ID","THEME_ID","parameters","FluentCanvas","FluentStory"],"mappings":"AAEA,SAASA,MAAM,QAAQ,UAAU;AACjC,SAASC,MAAM,EAAEC,QAAQ,QAAQ,cAAc;AAC/C,SAASC,UAAU,QAAQ,UAAU;AACrC,SAASC,YAAY,EAAEC,WAAW,QAAQ,SAAS"}

package/lib/preset/manager.js

@@ -1,4 +1,4 @@
-import { addons, types } from '@storybook/manager-api';
+import { addons, types } from 'storybook/manager-api';
 import { ADDON_ID, DIR_ID, STRICT_MODE_ID, THEME_ID } from '../constants';
 import { ThemePicker } from '../components/ThemePicker';
 import { ReactStrictMode } from '../components/ReactStrictMode';
@@ -6,20 +6,17 @@ import { DirectionSwitch } from '../components/DirectionSwitch';
 addons.register(ADDON_ID, ()=>{
     addons.add(THEME_ID, {
         title: 'Fluent Theme Picker',
-        // eslint-disable-next-line @typescript-eslint/no-deprecated
         type: types.TOOL,
         match: ({ viewMode })=>!!(viewMode && viewMode.match(/^(story|docs)$/)),
         render: ThemePicker
     });
     addons.add(DIR_ID, {
         title: 'Direction Switch',
-        // eslint-disable-next-line @typescript-eslint/no-deprecated
         type: types.TOOL,
         match: ({ viewMode })=>!!(viewMode && viewMode.match(/^(story|docs)$/)),
         render: DirectionSwitch
     });
     addons.add(STRICT_MODE_ID, {
-        // eslint-disable-next-line @typescript-eslint/no-deprecated
         type: types.TOOL,
         title: 'React Strict Mode',
         match: ({ viewMode })=>!!(viewMode && viewMode.match(/^(story|docs)$/)),

package/lib/preset/manager.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/preset/manager.ts"],"sourcesContent":["import { addons, types } from '@storybook/manager-api';\n\nimport { ADDON_ID, DIR_ID, STRICT_MODE_ID, THEME_ID } from '../constants';\nimport { ThemePicker } from '../components/ThemePicker';\nimport { ReactStrictMode } from '../components/ReactStrictMode';\nimport { DirectionSwitch } from '../components/DirectionSwitch';\n\naddons.register(ADDON_ID, () => {\n  addons.add(THEME_ID, {\n    title: 'Fluent Theme Picker',\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    type: types.TOOL,\n    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),\n    render: ThemePicker,\n  });\n  addons.add(DIR_ID, {\n    title: 'Direction Switch',\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    type: types.TOOL,\n    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),\n    render: DirectionSwitch,\n  });\n  addons.add(STRICT_MODE_ID, {\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    type: types.TOOL,\n    title: 'React Strict Mode',\n    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),\n    render: ReactStrictMode,\n  });\n});\n"],"names":["addons","types","ADDON_ID","DIR_ID","STRICT_MODE_ID","THEME_ID","ThemePicker","ReactStrictMode","DirectionSwitch","register","add","title","type","TOOL","match","viewMode","render"],"mappings":"AAAA,SAASA,MAAM,EAAEC,KAAK,QAAQ,yBAAyB;AAEvD,SAASC,QAAQ,EAAEC,MAAM,EAAEC,cAAc,EAAEC,QAAQ,QAAQ,eAAe;AAC1E,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,eAAe,QAAQ,gCAAgC;AAChE,SAASC,eAAe,QAAQ,gCAAgC;AAEhER,OAAOS,QAAQ,CAACP,UAAU;IACxBF,OAAOU,GAAG,CAACL,UAAU;QACnBM,OAAO;QACP,4DAA4D;QAC5DC,MAAMX,MAAMY,IAAI;QAChBC,OAAO,CAAC,EAAEC,QAAQ,EAAE,GAAK,CAAC,CAAEA,CAAAA,YAAYA,SAASD,KAAK,CAAC,iBAAgB;QACvEE,QAAQV;IACV;IACAN,OAAOU,GAAG,CAACP,QAAQ;QACjBQ,OAAO;QACP,4DAA4D;QAC5DC,MAAMX,MAAMY,IAAI;QAChBC,OAAO,CAAC,EAAEC,QAAQ,EAAE,GAAK,CAAC,CAAEA,CAAAA,YAAYA,SAASD,KAAK,CAAC,iBAAgB;QACvEE,QAAQR;IACV;IACAR,OAAOU,GAAG,CAACN,gBAAgB;QACzB,4DAA4D;QAC5DQ,MAAMX,MAAMY,IAAI;QAChBF,OAAO;QACPG,OAAO,CAAC,EAAEC,QAAQ,EAAE,GAAK,CAAC,CAAEA,CAAAA,YAAYA,SAASD,KAAK,CAAC,iBAAgB;QACvEE,QAAQT;IACV;AACF"}
+{"version":3,"sources":["../src/preset/manager.ts"],"sourcesContent":["import { addons, types } from 'storybook/manager-api';\n\nimport { ADDON_ID, DIR_ID, STRICT_MODE_ID, THEME_ID } from '../constants';\nimport { ThemePicker } from '../components/ThemePicker';\nimport { ReactStrictMode } from '../components/ReactStrictMode';\nimport { DirectionSwitch } from '../components/DirectionSwitch';\n\naddons.register(ADDON_ID, () => {\n  addons.add(THEME_ID, {\n    title: 'Fluent Theme Picker',\n\n    type: types.TOOL,\n    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),\n    render: ThemePicker,\n  });\n  addons.add(DIR_ID, {\n    title: 'Direction Switch',\n\n    type: types.TOOL,\n    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),\n    render: DirectionSwitch,\n  });\n  addons.add(STRICT_MODE_ID, {\n    type: types.TOOL,\n    title: 'React Strict Mode',\n    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),\n    render: ReactStrictMode,\n  });\n});\n"],"names":["addons","types","ADDON_ID","DIR_ID","STRICT_MODE_ID","THEME_ID","ThemePicker","ReactStrictMode","DirectionSwitch","register","add","title","type","TOOL","match","viewMode","render"],"mappings":"AAAA,SAASA,MAAM,EAAEC,KAAK,QAAQ,wBAAwB;AAEtD,SAASC,QAAQ,EAAEC,MAAM,EAAEC,cAAc,EAAEC,QAAQ,QAAQ,eAAe;AAC1E,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,eAAe,QAAQ,gCAAgC;AAChE,SAASC,eAAe,QAAQ,gCAAgC;AAEhER,OAAOS,QAAQ,CAACP,UAAU;IACxBF,OAAOU,GAAG,CAACL,UAAU;QACnBM,OAAO;QAEPC,MAAMX,MAAMY,IAAI;QAChBC,OAAO,CAAC,EAAEC,QAAQ,EAAE,GAAK,CAAC,CAAEA,CAAAA,YAAYA,SAASD,KAAK,CAAC,iBAAgB;QACvEE,QAAQV;IACV;IACAN,OAAOU,GAAG,CAACP,QAAQ;QACjBQ,OAAO;QAEPC,MAAMX,MAAMY,IAAI;QAChBC,OAAO,CAAC,EAAEC,QAAQ,EAAE,GAAK,CAAC,CAAEA,CAAAA,YAAYA,SAASD,KAAK,CAAC,iBAAgB;QACvEE,QAAQR;IACV;IACAR,OAAOU,GAAG,CAACN,gBAAgB;QACzBQ,MAAMX,MAAMY,IAAI;QAChBF,OAAO;QACPG,OAAO,CAAC,EAAEC,QAAQ,EAAE,GAAK,CAAC,CAAEA,CAAAA,YAAYA,SAASD,KAAK,CAAC,iBAAgB;QACvEE,QAAQT;IACV;AACF"}

package/lib/preset/preview.js

@@ -8,14 +8,14 @@ export const decorators = [
     withAriaLive,
     withReactStrictMode
 ];
-export const globals = {
+export const initialGlobals = {
     [THEME_ID]: undefined,
     [DIR_ID]: undefined,
     [STRICT_MODE_ID]: undefined
 }; // allow theme to be set by URL query param
 const preview = {
     decorators,
-    globals,
+    initialGlobals,
     parameters: {
         docs: {
             container: FluentDocsContainer,

package/lib/preset/preview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/preset/preview.ts"],"sourcesContent":["import type { Renderer, ProjectAnnotations } from '@storybook/types';\n\nimport { withFluentProvider } from '../decorators/withFluentProvider';\nimport { withReactStrictMode } from '../decorators/withReactStrictMode';\nimport { withAriaLive } from '../decorators/withAriaLive';\nimport { FluentDocsContainer, FluentDocsPage } from '../docs';\n\nimport { DIR_ID, STRICT_MODE_ID, THEME_ID } from '../constants';\n\nexport const decorators = [\n  withFluentProvider,\n  withAriaLive,\n  withReactStrictMode,\n] as ProjectAnnotations<Renderer>['decorators'];\nexport const globals = { [THEME_ID]: undefined, [DIR_ID]: undefined, [STRICT_MODE_ID]: undefined }; // allow theme to be set by URL query param\n\nconst preview: ProjectAnnotations<Renderer> = {\n  decorators,\n  globals,\n  parameters: {\n    docs: {\n      container: FluentDocsContainer,\n      page: FluentDocsPage,\n    },\n  },\n};\n\nexport default preview;\n"],"names":["withFluentProvider","withReactStrictMode","withAriaLive","FluentDocsContainer","FluentDocsPage","DIR_ID","STRICT_MODE_ID","THEME_ID","decorators","globals","undefined","preview","parameters","docs","container","page"],"mappings":"AAEA,SAASA,kBAAkB,QAAQ,mCAAmC;AACtE,SAASC,mBAAmB,QAAQ,oCAAoC;AACxE,SAASC,YAAY,QAAQ,6BAA6B;AAC1D,SAASC,mBAAmB,EAAEC,cAAc,QAAQ,UAAU;AAE9D,SAASC,MAAM,EAAEC,cAAc,EAAEC,QAAQ,QAAQ,eAAe;AAEhE,OAAO,MAAMC,aAAa;IACxBR;IACAE;IACAD;CACD,CAA+C;AAChD,OAAO,MAAMQ,UAAU;IAAE,CAACF,SAAS,EAAEG;IAAW,CAACL,OAAO,EAAEK;IAAW,CAACJ,eAAe,EAAEI;AAAU,EAAE,CAAC,2CAA2C;AAE/I,MAAMC,UAAwC;IAC5CH;IACAC;IACAG,YAAY;QACVC,MAAM;YACJC,WAAWX;YACXY,MAAMX;QACR;IACF;AACF;AAEA,eAAeO,QAAQ"}
+{"version":3,"sources":["../src/preset/preview.ts"],"sourcesContent":["import type { Preview } from '@storybook/react-webpack5';\n\nimport { withFluentProvider } from '../decorators/withFluentProvider';\nimport { withReactStrictMode } from '../decorators/withReactStrictMode';\nimport { withAriaLive } from '../decorators/withAriaLive';\nimport { FluentDocsContainer, FluentDocsPage } from '../docs';\n\nimport { DIR_ID, STRICT_MODE_ID, THEME_ID } from '../constants';\n\nexport const decorators = [withFluentProvider, withAriaLive, withReactStrictMode] as Preview['decorators'];\n\nexport const initialGlobals = { [THEME_ID]: undefined, [DIR_ID]: undefined, [STRICT_MODE_ID]: undefined }; // allow theme to be set by URL query param\n\nconst preview: Preview = {\n  decorators,\n  initialGlobals,\n  parameters: {\n    docs: {\n      container: FluentDocsContainer,\n      page: FluentDocsPage,\n    },\n  },\n};\n\nexport default preview;\n"],"names":["withFluentProvider","withReactStrictMode","withAriaLive","FluentDocsContainer","FluentDocsPage","DIR_ID","STRICT_MODE_ID","THEME_ID","decorators","initialGlobals","undefined","preview","parameters","docs","container","page"],"mappings":"AAEA,SAASA,kBAAkB,QAAQ,mCAAmC;AACtE,SAASC,mBAAmB,QAAQ,oCAAoC;AACxE,SAASC,YAAY,QAAQ,6BAA6B;AAC1D,SAASC,mBAAmB,EAAEC,cAAc,QAAQ,UAAU;AAE9D,SAASC,MAAM,EAAEC,cAAc,EAAEC,QAAQ,QAAQ,eAAe;AAEhE,OAAO,MAAMC,aAAa;IAACR;IAAoBE;IAAcD;CAAoB,CAA0B;AAE3G,OAAO,MAAMQ,iBAAiB;IAAE,CAACF,SAAS,EAAEG;IAAW,CAACL,OAAO,EAAEK;IAAW,CAACJ,eAAe,EAAEI;AAAU,EAAE,CAAC,2CAA2C;AAEtJ,MAAMC,UAAmB;IACvBH;IACAC;IACAG,YAAY;QACVC,MAAM;YACJC,WAAWX;YACXY,MAAMX;QACR;IACF;AACF;AAEA,eAAeO,QAAQ"}

package/lib-commonjs/components/DirectionSwitch.js

@@ -10,8 +10,8 @@ Object.defineProperty(exports, "DirectionSwitch", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _components = require("@storybook/components");
-const _theming = require("@storybook/theming");
+const _components = require("storybook/internal/components");
+const _theming = require("storybook/theming");
 const _constants = require("../constants");
 const _hooks = require("../hooks");
 const Monospace = _theming.styled.span({

package/lib-commonjs/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":["DirectionSwitch","Monospace","styled","span","fontFamily","letterSpacing","globals","updateGlobals","useGlobals","direction","DIR_ID","isLTR","toggleDirection","React","useCallback","IconButton","key","title","onClick","div","toUpperCase"],"mappings":";;;;+BAaaA;;;eAAAA;;;;iEAbU;4BACI;yBACJ;2BAGA;uBACI;AAE3B,MAAMC,YAAYC,eAAM,CAACC,IAAI,CAAC;IAC5BC,YAAY;IACZC,eAAe;AACjB;AAEO,MAAML,kBAAkB;IAC7B,MAAM,CAACM,SAASC,cAAc,GAAGC,IAAAA,iBAAU;QAEzBF;IAAlB,MAAMG,YAAYH,CAAAA,kBAAAA,OAAO,CAACI,iBAAM,CAAC,cAAfJ,6BAAAA,kBAAmB;IACrC,MAAMK,QAAQF,cAAc;IAE5B,MAAMG,kBAAkBC,OAAMC,WAAW,CACvC,IACEP,cAAc;YACZ,CAACG,iBAAM,CAAC,EAAEC,QAAQ,QAAQ;QAC5B,IACF;QAACA;QAAOJ;KAAc;IAGxB,qBACE,qBAACQ,sBAAU;QAACC,KAAKN,iBAAM;QAAEO,OAAM;QAAmBC,SAASN;qBACzD,qBAACO,aAAI,6BACQ,qBAAClB,iBAAWQ,UAAUW,WAAW;AAIpD"}
+{"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":["DirectionSwitch","Monospace","styled","span","fontFamily","letterSpacing","globals","updateGlobals","useGlobals","direction","DIR_ID","isLTR","toggleDirection","React","useCallback","IconButton","key","title","onClick","div","toUpperCase"],"mappings":";;;;+BAaaA;;;eAAAA;;;;iEAbU;4BACI;yBACJ;2BAGA;uBACI;AAE3B,MAAMC,YAAYC,eAAM,CAACC,IAAI,CAAC;IAC5BC,YAAY;IACZC,eAAe;AACjB;AAEO,MAAML,kBAAkB;IAC7B,MAAM,CAACM,SAASC,cAAc,GAAGC,IAAAA,iBAAU;QAEzBF;IAAlB,MAAMG,YAAYH,CAAAA,kBAAAA,OAAO,CAACI,iBAAM,CAAC,cAAfJ,6BAAAA,kBAAmB;IACrC,MAAMK,QAAQF,cAAc;IAE5B,MAAMG,kBAAkBC,OAAMC,WAAW,CACvC,IACEP,cAAc;YACZ,CAACG,iBAAM,CAAC,EAAEC,QAAQ,QAAQ;QAC5B,IACF;QAACA;QAAOJ;KAAc;IAGxB,qBACE,qBAACQ,sBAAU;QAACC,KAAKN,iBAAM;QAAEO,OAAM;QAAmBC,SAASN;qBACzD,qBAACO,aAAI,6BACQ,qBAAClB,iBAAWQ,UAAUW,WAAW;AAIpD"}

package/lib-commonjs/components/ReactStrictMode.js

@@ -10,7 +10,8 @@ Object.defineProperty(exports, "ReactStrictMode", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _components = require("@storybook/components");
+const _components = require("storybook/internal/components");
+const _icons = require("@storybook/icons");
 const _constants = require("../constants");
 const _hooks = require("../hooks");
 const ReactStrictMode = ()=>{
@@ -28,7 +29,5 @@ const ReactStrictMode = ()=>{
         active: isActive,
         title: "Toggle React Strict mode",
         onClick: toggleStrictMode
-    }, /*#__PURE__*/ _react.createElement(_components.Icons, {
-        icon: "lock"
-    }));
+    }, /*#__PURE__*/ _react.createElement(_icons.LockIcon, null));
 };

package/lib-commonjs/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":["ReactStrictMode","globals","updateGlobals","useGlobals","isActive","STRICT_MODE_ID","toggleStrictMode","React","useCallback","IconButton","key","active","title","onClick","Icons","icon"],"mappings":";;;;+BAOaA;;;eAAAA;;;;iEAPU;4BACW;2BAGH;uBACJ;AAEpB,MAAMA,kBAAkB;IAC7B,MAAM,CAACC,SAASC,cAAc,GAAGC,IAAAA,iBAAU;QAE1BF;IAAjB,MAAMG,WAAWH,CAAAA,0BAAAA,OAAO,CAACI,yBAAc,CAAC,cAAvBJ,qCAAAA,0BAA2B;IAE5C,MAAMK,mBAAmBC,OAAMC,WAAW,CACxC,IACEN,cAAc;YACZ,CAACG,yBAAc,CAAC,EAAE,CAACD;QACrB,IACF;QAACA;QAAUF;KAAc;IAG3B,qBACE,qBAACO,sBAAU;QAACC,KAAKL,yBAAc;QAAEM,QAAQP;QAAUQ,OAAM;QAA2BC,SAASP;qBAC3F,qBAACQ,iBAAK;QAACC,MAAK;;AAGlB"}
+{"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":["ReactStrictMode","globals","updateGlobals","useGlobals","isActive","STRICT_MODE_ID","toggleStrictMode","React","useCallback","IconButton","key","active","title","onClick","LockIcon"],"mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;4BACI;uBACF;2BAGM;uBACJ;AAEpB,MAAMA,kBAAkB;IAC7B,MAAM,CAACC,SAASC,cAAc,GAAGC,IAAAA,iBAAU;QAE1BF;IAAjB,MAAMG,WAAWH,CAAAA,0BAAAA,OAAO,CAACI,yBAAc,CAAC,cAAvBJ,qCAAAA,0BAA2B;IAE5C,MAAMK,mBAAmBC,OAAMC,WAAW,CACxC,IACEN,cAAc;YACZ,CAACG,yBAAc,CAAC,EAAE,CAACD;QACrB,IACF;QAACA;QAAUF;KAAc;IAG3B,qBACE,qBAACO,sBAAU;QAACC,KAAKL,yBAAc;QAAEM,QAAQP;QAAUQ,OAAM;QAA2BC,SAASP;qBAC3F,qBAACQ,eAAQ;AAGf"}

package/lib-commonjs/components/ThemePicker.js

@@ -10,8 +10,9 @@ Object.defineProperty(exports, "ThemePicker", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _components = require("@storybook/components");
-const _managerapi = require("@storybook/manager-api");
+const _components = require("storybook/internal/components");
+const _icons = require("@storybook/icons");
+const _managerapi = require("storybook/manager-api");
 const _theme = require("../theme");
 const _constants = require("../constants");
 const _hooks = require("../hooks");
@@ -56,15 +57,13 @@ const ThemePicker = ()=>{
     return /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement(_components.WithTooltip, {
         placement: "top",
         trigger: "click",
-        closeOnClick: true,
+        closeOnOutsideClick: true,
         tooltip: renderTooltip
     }, /*#__PURE__*/ _react.createElement(_components.IconButton, {
         key: _constants.THEME_ID,
         title: "Change Fluent theme",
         active: isActive
-    }, /*#__PURE__*/ _react.createElement(_components.Icons, {
-        icon: "arrowdown"
-    }), /*#__PURE__*/ _react.createElement("span", {
+    }, /*#__PURE__*/ _react.createElement(_icons.ArrowDownIcon, null), /*#__PURE__*/ _react.createElement("span", {
         style: {
             marginLeft: 5
         }

package/lib-commonjs/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":["ThemePicker","createThemeItems","value","changeTheme","getCurrentTheme","map","item","id","title","defaultTheme","label","onClick","active","globals","updateGlobals","useGlobals","fluentTheme","useParameter","selectedThemeId","THEME_ID","selectedTheme","themes","find","entry","isActive","setTheme","React","useCallback","renderTooltip","props","TooltipLinkList","links","onHide","WithTooltip","placement","trigger","closeOnClick","tooltip","IconButton","key","Icons","icon","span","style","marginLeft"],"mappings":";;;;+BAmCaA;;;eAAAA;;;;iEAnCU;4BACyC;4BACnC;uBAGkB;2BACtB;uBACoB;AAU7C,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,KAAKE,mBAAY,CAACF,EAAE,GAAG,GAAGD,KAAKI,KAAK,CAAC,UAAU,CAAC,GAAGJ,KAAKI,KAAK;YAC3EC,SAAS;gBACPR,YAAYG,KAAKC,EAAE;YACrB;YACAL,OAAOI,KAAKC,EAAE;YACdK,QAAQR,sBAAsBE,KAAKC,EAAE;QACvC;IACF;AACF;AAEO,MAAMP,cAAc;IACzB,MAAM,CAACa,SAASC,cAAc,GAAGC,IAAAA,iBAAU;IAC3C,MAAMC,cAA+CC,IAAAA,wBAAY,EAAC;QAEdJ;IAApD,MAAMK,kBAAkBF,cAAcA,cAAcH,CAAAA,oBAAAA,OAAO,CAACM,mBAAQ,CAAC,cAAjBN,+BAAAA,oBAAqBJ,mBAAY,CAACF,EAAE;IACxF,MAAMa,gBAAgBC,aAAM,CAACC,IAAI,CAACC,CAAAA,QAASA,MAAMhB,EAAE,KAAKW;IAExD,MAAMM,WAAWN,oBAAoBT,mBAAY,CAACF,EAAE;IAEpD,MAAMkB,WAAWC,OAAMC,WAAW,CAChC,CAACpB;QACCO,cAAc;YAAE,CAACK,mBAAQ,CAAC,EAAEZ;QAAG;IACjC,GACA;QAACO;KAAc;IAGjB,MAAMc,gBAAgBF,OAAMC,WAAW,CACrC,CAACE;QACC,qBACE,qBAACC,2BAAe;YACdC,OAAO9B,iBACLoB,aAAM,EACNd,CAAAA;gBACEkB,SAASlB;gBACTsB,MAAMG,MAAM;YACd,GACA,IAAMd;;IAId,GACA;QAACA;QAAiBO;KAAS;IAG7B,qBACE,0DACE,qBAACQ,uBAAW;QAACC,WAAU;QAAMC,SAAQ;QAAQC,cAAAA;QAAaC,SAAST;qBACjE,qBAACU,sBAAU;QAACC,KAAKpB,mBAAQ;QAAEX,OAAM;QAAsBI,QAAQY;qBAC7D,qBAACgB,iBAAK;QAACC,MAAK;sBACZ,qBAACC;QAAKC,OAAO;YAAEC,YAAY;QAAE;OAAG,WAAQxB,0BAAAA,oCAAAA,cAAeV,KAAK;AAKtE"}
+{"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":["ThemePicker","createThemeItems","value","changeTheme","getCurrentTheme","map","item","id","title","defaultTheme","label","onClick","active","globals","updateGlobals","useGlobals","fluentTheme","useParameter","selectedThemeId","THEME_ID","selectedTheme","themes","find","entry","isActive","setTheme","React","useCallback","renderTooltip","props","TooltipLinkList","links","onHide","WithTooltip","placement","trigger","closeOnOutsideClick","tooltip","IconButton","key","ArrowDownIcon","span","style","marginLeft"],"mappings":";;;;+BAoCaA;;;eAAAA;;;;iEApCU;4BACkC;uBAC3B;4BACD;uBAGkB;2BACtB;uBACoB;AAU7C,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,KAAKE,mBAAY,CAACF,EAAE,GAAG,GAAGD,KAAKI,KAAK,CAAC,UAAU,CAAC,GAAGJ,KAAKI,KAAK;YAC3EC,SAAS;gBACPR,YAAYG,KAAKC,EAAE;YACrB;YACAL,OAAOI,KAAKC,EAAE;YACdK,QAAQR,sBAAsBE,KAAKC,EAAE;QACvC;IACF;AACF;AAEO,MAAMP,cAAc;IACzB,MAAM,CAACa,SAASC,cAAc,GAAGC,IAAAA,iBAAU;IAC3C,MAAMC,cAA+CC,IAAAA,wBAAY,EAAC;QAEdJ;IAApD,MAAMK,kBAAkBF,cAAcA,cAAcH,CAAAA,oBAAAA,OAAO,CAACM,mBAAQ,CAAC,cAAjBN,+BAAAA,oBAAqBJ,mBAAY,CAACF,EAAE;IACxF,MAAMa,gBAAgBC,aAAM,CAACC,IAAI,CAACC,CAAAA,QAASA,MAAMhB,EAAE,KAAKW;IAExD,MAAMM,WAAWN,oBAAoBT,mBAAY,CAACF,EAAE;IAEpD,MAAMkB,WAAWC,OAAMC,WAAW,CAChC,CAACpB;QACCO,cAAc;YAAE,CAACK,mBAAQ,CAAC,EAAEZ;QAAG;IACjC,GACA;QAACO;KAAc;IAGjB,MAAMc,gBAAgBF,OAAMC,WAAW,CACrC,CAACE;QACC,qBACE,qBAACC,2BAAe;YACdC,OAAO9B,iBACLoB,aAAM,EACNd,CAAAA;gBACEkB,SAASlB;gBACTsB,MAAMG,MAAM;YACd,GACA,IAAMd;;IAId,GACA;QAACA;QAAiBO;KAAS;IAG7B,qBACE,0DACE,qBAACQ,uBAAW;QAACC,WAAU;QAAMC,SAAQ;QAAQC,qBAAAA;QAAoBC,SAAST;qBACxE,qBAACU,sBAAU;QAACC,KAAKpB,mBAAQ;QAAEX,OAAM;QAAsBI,QAAQY;qBAC7D,qBAACgB,oBAAa,uBACd,qBAACC;QAAKC,OAAO;YAAEC,YAAY;QAAE;OAAG,WAAQvB,0BAAAA,oCAAAA,cAAeV,KAAK;AAKtE"}

package/lib-commonjs/docs/DirSwitch.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "DirSwitch", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _previewapi = require("@storybook/preview-api");
+const _previewapi = require("storybook/preview-api");
 const _reactlabel = require("@fluentui/react-label");
 const _reactswitch = require("@fluentui/react-switch");
 const _reactutilities = require("@fluentui/react-utilities");

package/lib-commonjs/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":["DirSwitch","useStyles","makeStyles","container","alignItems","display","justifyContent","label","typographyStyles","subtitle2","dir","switchId","useId","styles","currentDir","setCurrentDir","React","useState","checked","setGlobalDir","newDir","addons","getChannel","emit","globals","DIR_ID","onChange","useCallback","_","data","div","className","Label","htmlFor","undefined","Switch","id"],"mappings":";;;;+BAyBaA;;;eAAAA;;;;iEAzBU;4BACA;4BAED;6BACmB;gCACnB;4BACW;wBACN;2BAEJ;AAEvB,MAAMC,YAAYC,IAAAA,kBAAU,EAAC;IAC3BC,WAAW;QACTC,YAAY;QACZC,SAAS;QACTC,gBAAgB;IAClB;IACAC,OAAO;QACL,GAAGC,4BAAgB,CAACC,SAAS;IAC/B;AACF;AAKO,MAAMT,YAA+C,CAAC,EAAEU,GAAG,EAAE;IAClE,MAAMC,WAAWC,IAAAA,qBAAK,EAAC;IAEvB,MAAMC,SAASZ;IAEf,MAAM,CAACa,YAAYC,cAAc,GAAGC,OAAMC,QAAQ,CAACP;IACnD,MAAMQ,UAAUJ,eAAe;IAE/B,MAAMK,eAAe,CAACC;QACpBC,kBAAM,CAACC,UAAU,GAAGC,IAAI,CAAC,iBAAiB;YAAEC,SAAS;gBAAE,CAACC,iBAAM,CAAC,EAAEL;YAAO;QAAE;IAC5E;IAEA,MAAMM,WAAWV,OAAMW,WAAW,CAAuC,CAACC,GAAGC;QAC3E,MAAMT,SAASS,KAAKX,OAAO,GAAG,QAAQ;QACtCC,aAAaC;QACbL,cAAcK;IAChB,GAAG,EAAE;IAEL,qBACE,qBAACU;QAAIC,WAAWlB,OAAOV,SAAS;qBAC9B,qBAAC6B,iBAAK;QAACD,WAAWlB,OAAON,KAAK;QAAE0B,SAASnB,eAAe,QAAQoB,YAAYvB;OAAU,sBAGtF,qBAACwB,mBAAM;QAACjB,SAASA;QAASkB,IAAIzB;QAAUe,UAAUA;sBAClD,qBAACM,iBAAK;QAACD,WAAWlB,OAAON,KAAK;QAAE0B,SAASnB,eAAe,QAAQH,WAAWuB;OAAW;AAK5F"}
+{"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":["DirSwitch","useStyles","makeStyles","container","alignItems","display","justifyContent","label","typographyStyles","subtitle2","dir","switchId","useId","styles","currentDir","setCurrentDir","React","useState","checked","setGlobalDir","newDir","addons","getChannel","emit","globals","DIR_ID","onChange","useCallback","_","data","div","className","Label","htmlFor","undefined","Switch","id"],"mappings":";;;;+BAyBaA;;;eAAAA;;;;iEAzBU;4BACA;4BAED;6BACmB;gCACnB;4BACW;wBACN;2BAEJ;AAEvB,MAAMC,YAAYC,IAAAA,kBAAU,EAAC;IAC3BC,WAAW;QACTC,YAAY;QACZC,SAAS;QACTC,gBAAgB;IAClB;IACAC,OAAO;QACL,GAAGC,4BAAgB,CAACC,SAAS;IAC/B;AACF;AAKO,MAAMT,YAA+C,CAAC,EAAEU,GAAG,EAAE;IAClE,MAAMC,WAAWC,IAAAA,qBAAK,EAAC;IAEvB,MAAMC,SAASZ;IAEf,MAAM,CAACa,YAAYC,cAAc,GAAGC,OAAMC,QAAQ,CAACP;IACnD,MAAMQ,UAAUJ,eAAe;IAE/B,MAAMK,eAAe,CAACC;QACpBC,kBAAM,CAACC,UAAU,GAAGC,IAAI,CAAC,iBAAiB;YAAEC,SAAS;gBAAE,CAACC,iBAAM,CAAC,EAAEL;YAAO;QAAE;IAC5E;IAEA,MAAMM,WAAWV,OAAMW,WAAW,CAAuC,CAACC,GAAGC;QAC3E,MAAMT,SAASS,KAAKX,OAAO,GAAG,QAAQ;QACtCC,aAAaC;QACbL,cAAcK;IAChB,GAAG,EAAE;IAEL,qBACE,qBAACU;QAAIC,WAAWlB,OAAOV,SAAS;qBAC9B,qBAAC6B,iBAAK;QAACD,WAAWlB,OAAON,KAAK;QAAE0B,SAASnB,eAAe,QAAQoB,YAAYvB;OAAU,sBAGtF,qBAACwB,mBAAM;QAACjB,SAASA;QAASkB,IAAIzB;QAAUe,UAAUA;sBAClD,qBAACM,iBAAK;QAACD,WAAWlB,OAAON,KAAK;QAAE0B,SAASnB,eAAe,QAAQH,WAAWuB;OAAW;AAK5F"}

package/lib-commonjs/docs/FluentCanvas.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FluentCanvas", {
+    enumerable: true,
+    get: function() {
+        return FluentCanvas;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _react1 = require("@griffel/react");
+const useStyles = (0, _react1.makeStyles)({
+    canvas: {
+        padding: '20px',
+        boxSizing: 'border-box',
+        overflow: 'auto'
+    }
+});
+const FluentCanvas = (props)=>{
+    const styles = useStyles();
+    return /*#__PURE__*/ _react.createElement("div", {
+        className: "sbdocs-preview"
+    }, /*#__PURE__*/ _react.createElement("div", {
+        className: styles.canvas,
+        ...props
+    }));
+};

package/lib-commonjs/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":["FluentCanvas","useStyles","makeStyles","canvas","padding","boxSizing","overflow","props","styles","div","className"],"mappings":";;;;+BAgBaA;;;eAAAA;;;;iEAhBU;wBAEI;AAE3B,MAAMC,YAAYC,IAAAA,kBAAU,EAAC;IAC3BC,QAAQ;QACNC,SAAS;QACTC,WAAW;QACXC,UAAU;IACZ;AACF;AAMO,MAAMN,eAAe,CAACO;IAC3B,MAAMC,SAASP;IAEf,qBACE,qBAACQ;QAAIC,WAAU;qBACb,qBAACD;QAAIC,WAAWF,OAAOL,MAAM;QAAG,GAAGI,KAAK;;AAG9C"}

package/lib-commonjs/docs/FluentDocsContainer.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "FluentDocsContainer", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _addondocs = require("@storybook/addon-docs");
+const _blocks = require("@storybook/addon-docs/blocks");
 const _reacttheme = require("@fluentui/react-theme");
 const _reactprovider = require("@fluentui/react-provider");
 const _utils = require("./utils");
@@ -22,12 +22,12 @@ const FluentDocsContainer = ({ children, context })=>{
                 backgroundColor: 'transparent'
             },
             theme: _reacttheme.webLightTheme
-        }, /*#__PURE__*/ _react.createElement(_addondocs.DocsContainer, {
+        }, /*#__PURE__*/ _react.createElement(_blocks.DocsContainer, {
             context: context
         }, children)));
     }
     // If docs container is not enabled, fall back to Storybook's default DocsContainer
-    return /*#__PURE__*/ _react.createElement(_addondocs.DocsContainer, {
+    return /*#__PURE__*/ _react.createElement(_blocks.DocsContainer, {
         context: context
     }, children);
 };

package/lib-commonjs/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":["FluentDocsContainer","children","context","isDocsEnabled","FluentProvider","className","style","backgroundColor","theme","webLightTheme","DocsContainer"],"mappings":";;;;+BAeaA;;;eAAAA;;;;iEAfU;2BAC8B;4BACvB;+BACC;uBAED;AAUvB,MAAMA,sBAA0D,CAAC,EAAEC,QAAQ,EAAEC,OAAO,EAAE;IAC3F,IAAIC,IAAAA,oBAAa,EAACD,UAAU;QAC1B,qBACE,0DAEE,qBAACE,6BAAc;YAACC,WAAU;YAAcC,OAAO;gBAAEC,iBAAiB;YAAc;YAAGC,OAAOC,yBAAa;yBACrG,qBAACC,wBAAa;YAACR,SAASA;WAAUD;IAI1C;IAEA,mFAAmF;IACnF,qBAAO,qBAACS,wBAAa;QAACR,SAASA;OAAUD;AAC3C"}
+{"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":["FluentDocsContainer","children","context","isDocsEnabled","FluentProvider","className","style","backgroundColor","theme","webLightTheme","DocsContainer"],"mappings":";;;;+BAeaA;;;eAAAA;;;;iEAfU;wBAC8B;4BACvB;+BACC;uBAED;AAUvB,MAAMA,sBAA0D,CAAC,EAAEC,QAAQ,EAAEC,OAAO,EAAE;IAC3F,IAAIC,IAAAA,oBAAa,EAACD,UAAU;QAC1B,qBACE,0DAEE,qBAACE,6BAAc;YAACC,WAAU;YAAcC,OAAO;gBAAEC,iBAAiB;YAAc;YAAGC,OAAOC,yBAAa;yBACrG,qBAACC,qBAAa;YAACR,SAASA;WAAUD;IAI1C;IAEA,mFAAmF;IACnF,qBAAO,qBAACS,qBAAa;QAACR,SAASA;OAAUD;AAC3C"}

package/lib-commonjs/docs/FluentDocsPage.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "FluentDocsPage", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _addondocs = require("@storybook/addon-docs");
+const _blocks = require("@storybook/addon-docs/blocks");
 const _reacttheme = require("@fluentui/react-theme");
 const _reactlink = require("@fluentui/react-link");
 const _reacttext = require("@fluentui/react-text");
@@ -141,37 +141,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 {
@@ -207,7 +221,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(_reactlink.Link, {
         href: "/?path=/docs/concepts-developer-customizing-components-with-slots--docs"
-    }, "Customizing components with slots", ' '))))), /*#__PURE__*/ _react.createElement(_addondocs.ArgsTable, {
+    }, "Customizing components with slots", ' '))))), /*#__PURE__*/ _react.createElement(_blocks.ArgTypes, {
         of: component
     }));
 };
@@ -215,14 +229,14 @@ const RenderPrimaryStory = ({ primaryStory, skipPrimaryStory })=>{
     const styles = useStyles();
     return skipPrimaryStory ? null : /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement("hr", {
         className: styles.divider
-    }), /*#__PURE__*/ _react.createElement(_addondocs.HeaderMdx, {
+    }), /*#__PURE__*/ _react.createElement(_blocks.HeaderMdx, {
         as: "h3",
         id: (0, _Toc.nameToHash)(primaryStory.name)
-    }, primaryStory.name), /*#__PURE__*/ _react.createElement(_addondocs.Primary, null));
+    }, primaryStory.name), /*#__PURE__*/ _react.createElement(_blocks.Primary, null));
 };
 const FluentDocsPage = ()=>{
     var _primaryStoryContext_parameters, _primaryStoryContext_globals, _primaryStoryContext_parameters_docs, _primaryStoryContext_parameters1, _primaryStoryContext_parameters_docs1, _primaryStoryContext_parameters2, _primaryStoryContext_parameters3;
-    const context = _react.useContext(_addondocs.DocsContext);
+    const context = _react.useContext(_blocks.DocsContext);
     // Get the fluent docs page configuration from context
     const docsPageConfig = (0, _utils.getDocsPageConfig)(context);
     const stories = context.componentStories();
@@ -241,13 +255,13 @@ const FluentDocsPage = ()=>{
     if (!docsPageConfig) {
         return /*#__PURE__*/ _react.createElement("div", {
             className: "sb-unstyled"
-        }, /*#__PURE__*/ _react.createElement(_addondocs.Title, null), /*#__PURE__*/ _react.createElement(_addondocs.Subtitle, null), /*#__PURE__*/ _react.createElement(_addondocs.Description, null), /*#__PURE__*/ _react.createElement(RenderPrimaryStory, {
+        }, /*#__PURE__*/ _react.createElement(_blocks.Title, null), /*#__PURE__*/ _react.createElement(_blocks.Subtitle, null), /*#__PURE__*/ _react.createElement(_blocks.Description, null), /*#__PURE__*/ _react.createElement(RenderPrimaryStory, {
             primaryStory: primaryStory,
             skipPrimaryStory: skipPrimaryStory
         }), /*#__PURE__*/ _react.createElement(RenderArgsTable, {
             story: primaryStory,
             hideArgsTable: hideArgsTable
-        }), /*#__PURE__*/ _react.createElement(_addondocs.Stories, null));
+        }), /*#__PURE__*/ _react.createElement(_blocks.Stories, null));
     }
     // Determine what to show based on configuration
     const { tableOfContents: showTableOfContents, dirSwitcher: showDirSwitcher, themePicker: showThemePicker, copyAsMarkdown: showCopyAsMarkdown, argTable } = docsPageConfig;
@@ -264,7 +278,7 @@ const FluentDocsPage = ()=>{
     // );
     return /*#__PURE__*/ _react.createElement("div", {
         className: "sb-unstyled"
-    }, /*#__PURE__*/ _react.createElement(_addondocs.Title, null), /*#__PURE__*/ _react.createElement("div", {
+    }, /*#__PURE__*/ _react.createElement(_blocks.Title, null), /*#__PURE__*/ _react.createElement("div", {
         className: styles.wrapper
     }, /*#__PURE__*/ _react.createElement("div", {
         className: styles.container
@@ -276,9 +290,9 @@ const FluentDocsPage = ()=>{
         dir: dir
     }), showCopyAsMarkdown && /*#__PURE__*/ _react.createElement(_CopyAsMarkdownButton.CopyAsMarkdownButton, {
         storyId: primaryStory.id
-    })), /*#__PURE__*/ _react.createElement(_addondocs.Subtitle, null), /*#__PURE__*/ _react.createElement("div", {
+    })), /*#__PURE__*/ _react.createElement(_blocks.Subtitle, null), /*#__PURE__*/ _react.createElement("div", {
         className: styles.description
-    }, /*#__PURE__*/ _react.createElement(_addondocs.Description, null), videos && /*#__PURE__*/ _react.createElement(VideoPreviews, {
+    }, /*#__PURE__*/ _react.createElement(_blocks.Description, null), videos && /*#__PURE__*/ _react.createElement(VideoPreviews, {
         videos: videos
     })), /*#__PURE__*/ _react.createElement(RenderPrimaryStory, {
         primaryStory: primaryStory,
@@ -288,7 +302,7 @@ const FluentDocsPage = ()=>{
         hideArgsTable: hideArgsTable,
         showSlotsApi: argTable.slotsApi,
         showNativePropsApi: argTable.nativePropsApi
-    }), /*#__PURE__*/ _react.createElement(_addondocs.Stories, null)), showTableOfContents && /*#__PURE__*/ _react.createElement("div", {
+    }), /*#__PURE__*/ _react.createElement(_blocks.Stories, null)), showTableOfContents && /*#__PURE__*/ _react.createElement("div", {
         className: styles.toc
     }, /*#__PURE__*/ _react.createElement(_Toc.Toc, {
         stories: stories