@fluentui/react-storybook-addon 0.5.1 → 0.6.0

package/lib-commonjs/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":["FluentDocsPage","useStyles","makeStyles","divider","height","backgroundColor","border","margin","wrapper","display","gap","toc","flexBasis","flexShrink","container","width","flexGrow","globalTogglesContainer","columnGap","tokens","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","Link","href","target","key","img","alt","src","Text","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","InfoFilled","RenderArgsTable","hideArgsTable","showSlotsApi","showNativePropsApi","p","b","span","role","br","ArgsTable","of","RenderPrimaryStory","primaryStory","skipPrimaryStory","hr","HeaderMdx","id","nameToHash","Primary","primaryStoryContext","context","React","useContext","DocsContext","docsPageConfig","getDocsPageConfig","stories","componentStories","getStoryContext","assertStoryMetaValues","dir","parameters","globals","DIR_ID","selectedTheme","themes","find","theme","THEME_ID","Boolean","docs","Title","Subtitle","Description","Stories","tableOfContents","showTableOfContents","dirSwitcher","showDirSwitcher","themePicker","showThemePicker","copyAsMarkdown","showCopyAsMarkdown","argTable","ThemePicker","selectedThemeId","DirSwitch","CopyAsMarkdownButton","storyId","Toc","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":["FluentDocsPage","useStyles","makeStyles","divider","height","backgroundColor","border","margin","wrapper","display","gap","toc","flexBasis","flexShrink","container","width","flexGrow","globalTogglesContainer","columnGap","tokens","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","Link","href","target","key","img","alt","src","Text","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","InfoFilled","RenderArgsTable","hideArgsTable","showSlotsApi","showNativePropsApi","p","b","span","role","br","ArgTypes","of","RenderPrimaryStory","primaryStory","skipPrimaryStory","hr","HeaderMdx","id","nameToHash","Primary","primaryStoryContext","context","React","useContext","DocsContext","docsPageConfig","getDocsPageConfig","stories","componentStories","getStoryContext","assertStoryMetaValues","dir","parameters","globals","DIR_ID","selectedTheme","themes","find","theme","THEME_ID","Boolean","docs","Title","Subtitle","Description","Stories","tableOfContents","showTableOfContents","dirSwitcher","showDirSwitcher","themePicker","showThemePicker","copyAsMarkdown","showCopyAsMarkdown","argTable","ThemePicker","selectedThemeId","DirSwitch","CopyAsMarkdownButton","storyId","Toc","Error","componentId","join"],"mappings":"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"}

package/lib-commonjs/docs/FluentStory.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FluentStory", {
+    enumerable: true,
+    get: function() {
+        return FluentStory;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const iframeStyle = {
+    width: '100%',
+    border: 'none'
+};
+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-commonjs/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":["FluentStory","iframeStyle","width","border","id","height","div","className","iframe","title","src","style"],"mappings":";;;;+BAmBaA;;;eAAAA;;;;iEAnBU;AAGvB,MAAMC,cAAmC;IACvCC,OAAO;IACPC,QAAQ;AACV;AAaO,MAAMH,cAAc,CAAC,EAAEI,EAAE,EAAEC,MAAM,EAAoB;IAC1D,qBACE,qBAACC;QAAIC,WAAU;qBACb,qBAACC;QAAOC,OAAOL;QAAIM,KAAK,CAAC,eAAe,EAAEN,GAAG,WAAW,CAAC;QAAEO,OAAOV;QAAaI,QAAQA;;AAG7F"}

package/lib-commonjs/docs/ThemePicker.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "ThemePicker", {
 });
 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 _reactmenu = require("@fluentui/react-menu");
 const _reactbutton = require("@fluentui/react-button");
 const _react1 = require("@griffel/react");

package/lib-commonjs/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":["ThemePicker","useStyles","makeStyles","menuButton","minWidth","justifyContent","chevronIcon","marginLeft","menuPopover","selectedThemeId","styles","currentThemeId","setCurrentThemeId","React","useState","setGlobalTheme","themeId","addons","getChannel","emit","globals","THEME_ID","onCheckedValueChange","e","data","newThemeId","checkedItems","selectedTheme","themes","find","theme","id","Menu","checkedValues","positioning","autoSize","MenuTrigger","MenuButton","className","menuIcon","label","MenuPopover","MenuList","map","MenuItemRadio","name","value","key"],"mappings":";;;;+BA4BaA;;;eAAAA;;;;iEA5BU;4BACA;2BAEiD;6BAE7C;wBACA;kBAEgB;AAE3C,MAAMC,YAAYC,IAAAA,kBAAU,EAAC;IAC3BC,YAAY;QACVC,UAAU;QACVC,gBAAgB;IAClB;IAEAC,aAAa;QACXC,YAAY;IACd;IAEAC,aAAa;QACXJ,UAAU;IACZ;AACF;AAKO,MAAMJ,cAAsD,CAAC,EAAES,eAAe,EAAE;IACrF,MAAMC,SAAST;IACf,MAAM,CAACU,gBAAgBC,kBAAkB,GAAGC,OAAMC,QAAQ,CAACL,4BAAAA,6BAAAA,kBAAmB;IAE9E,MAAMM,iBAAiB,CAACC;QACtBC,kBAAM,CAACC,UAAU,GAAGC,IAAI,CAAC,iBAAiB;YAAEC,SAAS;gBAAE,CAACC,UAAQ,CAAC,EAAEL;YAAQ;QAAE;IAC/E;IACA,MAAMM,uBAA0D,CAACC,GAAGC;QAClE,MAAMC,aAAaD,KAAKE,YAAY,CAAC,EAAE;QACvCX,eAAeU;QACfb,kBAAkBa;IACpB;IAEA,MAAME,gBAAgBC,QAAM,CAACC,IAAI,CAACC,CAAAA,QAASA,MAAMC,EAAE,KAAKpB;QAW/CgB;IATT,qBACE,qBAACK,eAAI;QACH,6CAA6C;QAC7CV,sBAAsBA;QACtBW,eAAe;YAAEH,OAAOrB,kBAAkB;gBAACA;aAAgB,GAAG,EAAE;QAAC;QACjEyB,aAAa;YAAEC,UAAU;QAAK;qBAE9B,qBAACC,sBAAW,sBACV,qBAACC,uBAAU;QAACC,WAAW5B,OAAOP,UAAU;QAAEoC,UAAU;YAAED,WAAW5B,OAAOJ,WAAW;QAAC;OACjFqB,CAAAA,uBAAAA,0BAAAA,oCAAAA,cAAea,KAAK,cAApBb,kCAAAA,uBAAwB,yBAG7B,qBAACc,sBAAW;QAACH,WAAW5B,OAAOF,WAAW;qBACxC,qBAACkC,mBAAQ,QACNd,QAAM,CAACe,GAAG,CAACb,CAAAA,sBACV,qBAACc,wBAAa;YAACC,MAAK;YAAQC,OAAOhB,MAAMC,EAAE;YAAEgB,KAAKjB,MAAMC,EAAE;WACvDD,MAAMU,KAAK;AAO1B"}
+{"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":["ThemePicker","useStyles","makeStyles","menuButton","minWidth","justifyContent","chevronIcon","marginLeft","menuPopover","selectedThemeId","styles","currentThemeId","setCurrentThemeId","React","useState","setGlobalTheme","themeId","addons","getChannel","emit","globals","THEME_ID","onCheckedValueChange","e","data","newThemeId","checkedItems","selectedTheme","themes","find","theme","id","Menu","checkedValues","positioning","autoSize","MenuTrigger","MenuButton","className","menuIcon","label","MenuPopover","MenuList","map","MenuItemRadio","name","value","key"],"mappings":";;;;+BA4BaA;;;eAAAA;;;;iEA5BU;4BACA;2BAEiD;6BAE7C;wBACA;kBAEgB;AAE3C,MAAMC,YAAYC,IAAAA,kBAAU,EAAC;IAC3BC,YAAY;QACVC,UAAU;QACVC,gBAAgB;IAClB;IAEAC,aAAa;QACXC,YAAY;IACd;IAEAC,aAAa;QACXJ,UAAU;IACZ;AACF;AAKO,MAAMJ,cAAsD,CAAC,EAAES,eAAe,EAAE;IACrF,MAAMC,SAAST;IACf,MAAM,CAACU,gBAAgBC,kBAAkB,GAAGC,OAAMC,QAAQ,CAACL,4BAAAA,6BAAAA,kBAAmB;IAE9E,MAAMM,iBAAiB,CAACC;QACtBC,kBAAM,CAACC,UAAU,GAAGC,IAAI,CAAC,iBAAiB;YAAEC,SAAS;gBAAE,CAACC,UAAQ,CAAC,EAAEL;YAAQ;QAAE;IAC/E;IACA,MAAMM,uBAA0D,CAACC,GAAGC;QAClE,MAAMC,aAAaD,KAAKE,YAAY,CAAC,EAAE;QACvCX,eAAeU;QACfb,kBAAkBa;IACpB;IAEA,MAAME,gBAAgBC,QAAM,CAACC,IAAI,CAACC,CAAAA,QAASA,MAAMC,EAAE,KAAKpB;QAW/CgB;IATT,qBACE,qBAACK,eAAI;QACH,6CAA6C;QAC7CV,sBAAsBA;QACtBW,eAAe;YAAEH,OAAOrB,kBAAkB;gBAACA;aAAgB,GAAG,EAAE;QAAC;QACjEyB,aAAa;YAAEC,UAAU;QAAK;qBAE9B,qBAACC,sBAAW,sBACV,qBAACC,uBAAU;QAACC,WAAW5B,OAAOP,UAAU;QAAEoC,UAAU;YAAED,WAAW5B,OAAOJ,WAAW;QAAC;OACjFqB,CAAAA,uBAAAA,0BAAAA,oCAAAA,cAAea,KAAK,cAApBb,kCAAAA,uBAAwB,yBAG7B,qBAACc,sBAAW;QAACH,WAAW5B,OAAOF,WAAW;qBACxC,qBAACkC,mBAAQ,QACNd,QAAM,CAACe,GAAG,CAACb,CAAAA,sBACV,qBAACc,wBAAa;YAACC,MAAK;YAAQC,OAAOhB,MAAMC,EAAE;YAAEgB,KAAKjB,MAAMC,EAAE;WACvDD,MAAMU,KAAK;AAO1B"}

package/lib-commonjs/docs/Toc.js

@@ -18,8 +18,8 @@ _export(exports, {
 });
 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 _coreevents = require("@storybook/core-events");
+const _managerapi = require("storybook/manager-api");
+const _coreevents = require("storybook/internal/core-events");
 const _react1 = require("@griffel/react");
 const useTocStyles = (0, _react1.makeStyles)({
     root: {
@@ -82,7 +82,7 @@ const useTocStyles = (0, _react1.makeStyles)({
 //   addons.getChannel().emit(SELECT_STORY, story);
 // };
 const navigate = (url)=>{
-    _previewapi.addons.getChannel().emit(_coreevents.NAVIGATE_URL, url);
+    _managerapi.addons.getChannel().emit(_coreevents.NAVIGATE_URL, url);
 };
 const nameToHash = (id)=>id.toLowerCase().replace(/[^a-z0-9]/gi, '-');
 const Toc = ({ stories })=>{

package/lib-commonjs/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":["Toc","nameToHash","useTocStyles","makeStyles","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","addons","getChannel","emit","NAVIGATE_URL","id","toLowerCase","replace","stories","setSelected","React","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":["Toc","nameToHash","useTocStyles","makeStyles","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","addons","getChannel","emit","NAVIGATE_URL","id","toLowerCase","replace","stories","setSelected","React","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-commonjs/docs/index.js

@@ -9,12 +9,20 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    FluentCanvas: function() {
+        return _FluentCanvas.FluentCanvas;
+    },
     FluentDocsContainer: function() {
         return _FluentDocsContainer.FluentDocsContainer;
     },
     FluentDocsPage: function() {
         return _FluentDocsPage.FluentDocsPage;
+    },
+    FluentStory: function() {
+        return _FluentStory.FluentStory;
     }
 });
+const _FluentCanvas = require("./FluentCanvas");
 const _FluentDocsContainer = require("./FluentDocsContainer");
 const _FluentDocsPage = require("./FluentDocsPage");
+const _FluentStory = require("./FluentStory");

package/lib-commonjs/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":";;;;;;;;;;;IAASA,mBAAmB;eAAnBA,wCAAmB;;IACnBC,cAAc;eAAdA,8BAAc;;;qCADa;gCACL"}
+{"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":";;;;;;;;;;;IAASA,YAAY;eAAZA,0BAAY;;IACZC,mBAAmB;eAAnBA,wCAAmB;;IACnBC,cAAc;eAAdA,8BAAc;;IACdC,WAAW;eAAXA,wBAAW;;;8BAHS;qCACO;gCACL;6BACH"}

package/lib-commonjs/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":["getDocsPageConfig","isDocsEnabled","docsDefaults","copyAsMarkdown","tableOfContents","dirSwitcher","themePicker","argTable","slotsApi","nativePropsApi","getDocsParametersConfig","context","projectAnnotations","parameters","reactStorybookAddon","docs","docsConfig","getArgTableConfig","argTableConfig","undefined"],"mappings":";;;;;;;;;;;IA4CgBA,iBAAiB;eAAjBA;;IApBAC,aAAa;eAAbA;;;AApBhB,MAAMC,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;AAKO,SAASd,cAAcU,OAAyB;IACrD,MAAMK,aAAaN,wBAAwBC;IAE3C,+BAA+B;IAC/B,IAAIK,eAAe,MAAM;QACvB,OAAO;IACT;IAEA,wCAAwC;IACxC,IAAI,OAAOA,eAAe,YAAYA,eAAe,MAAM;QACzD,OAAO;IACT;IAEA,oBAAoB;IACpB,OAAO;AACT;AAKO,SAAShB,kBAAkBW,OAAyB;IAUzD,MAAMK,aAAaN,wBAAwBC;IAE3C,uDAAuD;IACvD,IAAIK,eAAe,MAAM;QACvB,OAAOd;IACT;IAEA,2DAA2D;IAC3D,IAAI,OAAOc,eAAe,YAAYA,eAAe,MAAM;QACzD,OAAO;YACLb,gBAAgBa,WAAWb,cAAc,KAAK;YAC9CC,iBAAiBY,WAAWZ,eAAe,KAAK;YAChDC,aAAaW,WAAWX,WAAW,KAAK;YACxCC,aAAaU,WAAWV,WAAW,KAAK;YACxCC,UAAUU,kBAAkBD,WAAWT,QAAQ;QACjD;IACF;IAEA,WAAW;IACX,OAAO;AACT;AAEA;;CAEC,GACD,SAASU,kBAAkBC,cAAsF;IAC/G,IAAIA,mBAAmB,OAAO;QAC5B,OAAO;YACLV,UAAU;YACVC,gBAAgB;QAClB;IACF;IAEA,IAAIS,mBAAmB,QAAQA,mBAAmBC,WAAW;QAC3D,OAAO;YACLX,UAAU;YACVC,gBAAgB;QAClB;IACF;IAEA,IAAI,OAAOS,mBAAmB,YAAYA,mBAAmB,MAAM;QACjE,OAAO;YACLV,UAAUU,eAAeV,QAAQ,KAAK;YACtCC,gBAAgBS,eAAeT,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":["getDocsPageConfig","isDocsEnabled","docsDefaults","copyAsMarkdown","tableOfContents","dirSwitcher","themePicker","argTable","slotsApi","nativePropsApi","getDocsParametersConfig","context","projectAnnotations","parameters","reactStorybookAddon","docs","docsConfig","getArgTableConfig","argTableConfig","undefined"],"mappings":";;;;;;;;;;;IA4CgBA,iBAAiB;eAAjBA;;IApBAC,aAAa;eAAbA;;;AApBhB,MAAMC,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;AAKO,SAASd,cAAcU,OAAyB;IACrD,MAAMK,aAAaN,wBAAwBC;IAE3C,+BAA+B;IAC/B,IAAIK,eAAe,MAAM;QACvB,OAAO;IACT;IAEA,wCAAwC;IACxC,IAAI,OAAOA,eAAe,YAAYA,eAAe,MAAM;QACzD,OAAO;IACT;IAEA,oBAAoB;IACpB,OAAO;AACT;AAKO,SAAShB,kBAAkBW,OAAyB;IAUzD,MAAMK,aAAaN,wBAAwBC;IAE3C,uDAAuD;IACvD,IAAIK,eAAe,MAAM;QACvB,OAAOd;IACT;IAEA,2DAA2D;IAC3D,IAAI,OAAOc,eAAe,YAAYA,eAAe,MAAM;QACzD,OAAO;YACLb,gBAAgBa,WAAWb,cAAc,KAAK;YAC9CC,iBAAiBY,WAAWZ,eAAe,KAAK;YAChDC,aAAaW,WAAWX,WAAW,KAAK;YACxCC,aAAaU,WAAWV,WAAW,KAAK;YACxCC,UAAUU,kBAAkBD,WAAWT,QAAQ;QACjD;IACF;IAEA,WAAW;IACX,OAAO;AACT;AAEA;;CAEC,GACD,SAASU,kBAAkBC,cAAsF;IAC/G,IAAIA,mBAAmB,OAAO;QAC5B,OAAO;YACLV,UAAU;YACVC,gBAAgB;QAClB;IACF;IAEA,IAAIS,mBAAmB,QAAQA,mBAAmBC,WAAW;QAC3D,OAAO;YACLX,UAAU;YACVC,gBAAgB;QAClB;IACF;IAEA,IAAI,OAAOS,mBAAmB,YAAYA,mBAAmB,MAAM;QACjE,OAAO;YACLV,UAAUU,eAAeV,QAAQ,KAAK;YACtCC,gBAAgBS,eAAeT,cAAc,KAAK;QACpD;IACF;IAEA,sBAAsB;IACtB,OAAOP,aAAaK,QAAQ;AAC9B"}

package/lib-commonjs/hooks.js

@@ -19,7 +19,7 @@ _export(exports, {
         return useGlobals;
     }
 });
-const _managerapi = require("@storybook/manager-api");
+const _managerapi = require("storybook/manager-api");
 function useGlobals() {
     return (0, _managerapi.useGlobals)();
 }

package/lib-commonjs/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":["getParametersConfig","parameters","useGlobals","useStorybookGlobals","options","dir","fluentTheme","mode","context","reactStorybookAddon"],"mappings":";;;;;;;;;;;IA0DgBA,mBAAmB;eAAnBA;;IAHAC,UAAU;eAAVA;;IAJAC,UAAU;eAAVA;;;4BAnDkC;AAmD3C,SAASA;IACd,OAAOC,IAAAA,sBAAmB;AAC5B;AAEO,SAASF,WAAWG,OAA0B;IACnD,OAAO;QAAEC,KAAK;QAAOC,aAAa;QAAaC,MAAM;QAAW,GAAGH,OAAO;IAAC;AAC7E;AACO,SAASJ,oBAAoBQ,OAA2B;QACtDA;IAAP,OAAOA,oBAAAA,+BAAAA,sBAAAA,QAASP,UAAU,cAAnBO,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":["getParametersConfig","parameters","useGlobals","useStorybookGlobals","options","dir","fluentTheme","mode","context","reactStorybookAddon"],"mappings":";;;;;;;;;;;IA0DgBA,mBAAmB;eAAnBA;;IAHAC,UAAU;eAAVA;;IAJAC,UAAU;eAAVA;;;4BAnDkC;AAmD3C,SAASA;IACd,OAAOC,IAAAA,sBAAmB;AAC5B;AAEO,SAASF,WAAWG,OAA0B;IACnD,OAAO;QAAEC,KAAK;QAAOC,aAAa;QAAaC,MAAM;QAAW,GAAGH,OAAO;IAAC;AAC7E;AACO,SAASJ,oBAAoBQ,OAA2B;QACtDA;IAAP,OAAOA,oBAAAA,+BAAAA,sBAAAA,QAASP,UAAU,cAAnBO,0CAAAA,oBAAqBC,mBAAmB;AACjD"}

package/lib-commonjs/index.js

@@ -12,6 +12,12 @@ _export(exports, {
     DIR_ID: function() {
         return _constants.DIR_ID;
     },
+    FluentCanvas: function() {
+        return _docs.FluentCanvas;
+    },
+    FluentStory: function() {
+        return _docs.FluentStory;
+    },
     THEME_ID: function() {
         return _constants.THEME_ID;
     },
@@ -25,3 +31,4 @@ _export(exports, {
 const _theme = require("./theme");
 const _constants = require("./constants");
 const _hooks = require("./hooks");
+const _docs = require("./docs");

package/lib-commonjs/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":["DIR_ID","THEME_ID","parameters","themes"],"mappings":";;;;;;;;;;;IAGSA,MAAM;eAANA,iBAAM;;IAAEC,QAAQ;eAARA,mBAAQ;;IAChBC,UAAU;eAAVA,iBAAU;;IAFVC,MAAM;eAANA,aAAM;;;uBAAQ;2BACU;uBACN"}
+{"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":["DIR_ID","FluentCanvas","FluentStory","THEME_ID","parameters","themes"],"mappings":";;;;;;;;;;;IAGSA,MAAM;eAANA,iBAAM;;IAENC,YAAY;eAAZA,kBAAY;;IAAEC,WAAW;eAAXA,iBAAW;;IAFjBC,QAAQ;eAARA,mBAAQ;;IAChBC,UAAU;eAAVA,iBAAU;;IAFVC,MAAM;eAANA,aAAM;;;uBAAQ;2BACU;uBACN;sBACe"}

package/lib-commonjs/preset/manager.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _managerapi = require("@storybook/manager-api");
+const _managerapi = require("storybook/manager-api");
 const _constants = require("../constants");
 const _ThemePicker = require("../components/ThemePicker");
 const _ReactStrictMode = require("../components/ReactStrictMode");
@@ -10,20 +10,17 @@ const _DirectionSwitch = require("../components/DirectionSwitch");
 _managerapi.addons.register(_constants.ADDON_ID, ()=>{
     _managerapi.addons.add(_constants.THEME_ID, {
         title: 'Fluent Theme Picker',
-        // eslint-disable-next-line @typescript-eslint/no-deprecated
         type: _managerapi.types.TOOL,
         match: ({ viewMode })=>!!(viewMode && viewMode.match(/^(story|docs)$/)),
         render: _ThemePicker.ThemePicker
     });
     _managerapi.addons.add(_constants.DIR_ID, {
         title: 'Direction Switch',
-        // eslint-disable-next-line @typescript-eslint/no-deprecated
         type: _managerapi.types.TOOL,
         match: ({ viewMode })=>!!(viewMode && viewMode.match(/^(story|docs)$/)),
         render: _DirectionSwitch.DirectionSwitch
     });
     _managerapi.addons.add(_constants.STRICT_MODE_ID, {
-        // eslint-disable-next-line @typescript-eslint/no-deprecated
         type: _managerapi.types.TOOL,
         title: 'React Strict Mode',
         match: ({ viewMode })=>!!(viewMode && viewMode.match(/^(story|docs)$/)),

package/lib-commonjs/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","register","ADDON_ID","add","THEME_ID","title","type","types","TOOL","match","viewMode","render","ThemePicker","DIR_ID","DirectionSwitch","STRICT_MODE_ID","ReactStrictMode"],"mappings":";;;;4BAA8B;2BAE6B;6BAC/B;iCACI;iCACA;AAEhCA,kBAAM,CAACC,QAAQ,CAACC,mBAAQ,EAAE;IACxBF,kBAAM,CAACG,GAAG,CAACC,mBAAQ,EAAE;QACnBC,OAAO;QACP,4DAA4D;QAC5DC,MAAMC,iBAAK,CAACC,IAAI;QAChBC,OAAO,CAAC,EAAEC,QAAQ,EAAE,GAAK,CAAC,CAAEA,CAAAA,YAAYA,SAASD,KAAK,CAAC,iBAAgB;QACvEE,QAAQC,wBAAW;IACrB;IACAZ,kBAAM,CAACG,GAAG,CAACU,iBAAM,EAAE;QACjBR,OAAO;QACP,4DAA4D;QAC5DC,MAAMC,iBAAK,CAACC,IAAI;QAChBC,OAAO,CAAC,EAAEC,QAAQ,EAAE,GAAK,CAAC,CAAEA,CAAAA,YAAYA,SAASD,KAAK,CAAC,iBAAgB;QACvEE,QAAQG,gCAAe;IACzB;IACAd,kBAAM,CAACG,GAAG,CAACY,yBAAc,EAAE;QACzB,4DAA4D;QAC5DT,MAAMC,iBAAK,CAACC,IAAI;QAChBH,OAAO;QACPI,OAAO,CAAC,EAAEC,QAAQ,EAAE,GAAK,CAAC,CAAEA,CAAAA,YAAYA,SAASD,KAAK,CAAC,iBAAgB;QACvEE,QAAQK,gCAAe;IACzB;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","register","ADDON_ID","add","THEME_ID","title","type","types","TOOL","match","viewMode","render","ThemePicker","DIR_ID","DirectionSwitch","STRICT_MODE_ID","ReactStrictMode"],"mappings":";;;;4BAA8B;2BAE6B;6BAC/B;iCACI;iCACA;AAEhCA,kBAAM,CAACC,QAAQ,CAACC,mBAAQ,EAAE;IACxBF,kBAAM,CAACG,GAAG,CAACC,mBAAQ,EAAE;QACnBC,OAAO;QAEPC,MAAMC,iBAAK,CAACC,IAAI;QAChBC,OAAO,CAAC,EAAEC,QAAQ,EAAE,GAAK,CAAC,CAAEA,CAAAA,YAAYA,SAASD,KAAK,CAAC,iBAAgB;QACvEE,QAAQC,wBAAW;IACrB;IACAZ,kBAAM,CAACG,GAAG,CAACU,iBAAM,EAAE;QACjBR,OAAO;QAEPC,MAAMC,iBAAK,CAACC,IAAI;QAChBC,OAAO,CAAC,EAAEC,QAAQ,EAAE,GAAK,CAAC,CAAEA,CAAAA,YAAYA,SAASD,KAAK,CAAC,iBAAgB;QACvEE,QAAQG,gCAAe;IACzB;IACAd,kBAAM,CAACG,GAAG,CAACY,yBAAc,EAAE;QACzBT,MAAMC,iBAAK,CAACC,IAAI;QAChBH,OAAO;QACPI,OAAO,CAAC,EAAEC,QAAQ,EAAE,GAAK,CAAC,CAAEA,CAAAA,YAAYA,SAASD,KAAK,CAAC,iBAAgB;QACvEE,QAAQK,gCAAe;IACzB;AACF"}

package/lib-commonjs/preset/preview.js

@@ -15,8 +15,8 @@ _export(exports, {
     default: function() {
         return _default;
     },
-    globals: function() {
-        return globals;
+    initialGlobals: function() {
+        return initialGlobals;
     }
 });
 const _withFluentProvider = require("../decorators/withFluentProvider");
@@ -29,14 +29,14 @@ const decorators = [
     _withAriaLive.withAriaLive,
     _withReactStrictMode.withReactStrictMode
 ];
-const globals = {
+const initialGlobals = {
     [_constants.THEME_ID]: undefined,
     [_constants.DIR_ID]: undefined,
     [_constants.STRICT_MODE_ID]: undefined
 }; // allow theme to be set by URL query param
 const preview = {
     decorators,
-    globals,
+    initialGlobals,
     parameters: {
         docs: {
             container: _docs.FluentDocsContainer,

package/lib-commonjs/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":["decorators","globals","withFluentProvider","withAriaLive","withReactStrictMode","THEME_ID","undefined","DIR_ID","STRICT_MODE_ID","preview","parameters","docs","container","FluentDocsContainer","page","FluentDocsPage"],"mappings":";;;;;;;;;;;IASaA,UAAU;eAAVA;;IAkBb,OAAuB;eAAvB;;IAbaC,OAAO;eAAPA;;;oCAZsB;qCACC;8BACP;sBACuB;2BAEH;AAE1C,MAAMD,aAAa;IACxBE,sCAAkB;IAClBC,0BAAY;IACZC,wCAAmB;CACpB;AACM,MAAMH,UAAU;IAAE,CAACI,mBAAQ,CAAC,EAAEC;IAAW,CAACC,iBAAM,CAAC,EAAED;IAAW,CAACE,yBAAc,CAAC,EAAEF;AAAU,GAAG,2CAA2C;AAE/I,MAAMG,UAAwC;IAC5CT;IACAC;IACAS,YAAY;QACVC,MAAM;YACJC,WAAWC,yBAAmB;YAC9BC,MAAMC,oBAAc;QACtB;IACF;AACF;MAEA,WAAeN"}
+{"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":["decorators","initialGlobals","withFluentProvider","withAriaLive","withReactStrictMode","THEME_ID","undefined","DIR_ID","STRICT_MODE_ID","preview","parameters","docs","container","FluentDocsContainer","page","FluentDocsPage"],"mappings":";;;;;;;;;;;IASaA,UAAU;eAAVA;;IAeb,OAAuB;eAAvB;;IAbaC,cAAc;eAAdA;;;oCATsB;qCACC;8BACP;sBACuB;2BAEH;AAE1C,MAAMD,aAAa;IAACE,sCAAkB;IAAEC,0BAAY;IAAEC,wCAAmB;CAAC;AAE1E,MAAMH,iBAAiB;IAAE,CAACI,mBAAQ,CAAC,EAAEC;IAAW,CAACC,iBAAM,CAAC,EAAED;IAAW,CAACE,yBAAc,CAAC,EAAEF;AAAU,GAAG,2CAA2C;AAEtJ,MAAMG,UAAmB;IACvBT;IACAC;IACAS,YAAY;QACVC,MAAM;YACJC,WAAWC,yBAAmB;YAC9BC,MAAMC,oBAAc;QACtB;IACF;AACF;MAEA,WAAeN"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-storybook-addon",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "fluentui react storybook addon",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -11,40 +11,33 @@
     "url": "https://github.com/microsoft/fluentui"
   },
   "license": "MIT",
-  "devDependencies": {
-    "@fluentui/eslint-plugin": "*",
-    "@fluentui/scripts-api-extractor": "*"
-  },
   "dependencies": {
-    "@fluentui/react-aria": "^9.17.4",
-    "@fluentui/react-button": "^9.6.10",
-    "@fluentui/react-menu": "^9.20.3",
-    "@fluentui/react-label": "^9.3.9",
-    "@fluentui/react-switch": "^9.4.9",
-    "@fluentui/react-text": "^9.6.9",
-    "@fluentui/react-link": "^9.6.9",
-    "@fluentui/react-provider": "^9.22.9",
-    "@fluentui/react-utilities": "^9.25.2",
-    "@fluentui/react-theme": "^9.2.0",
+    "@fluentui/react-aria": "^9.17.10",
+    "@fluentui/react-button": "^9.8.2",
+    "@fluentui/react-menu": "^9.22.0",
+    "@fluentui/react-label": "^9.3.15",
+    "@fluentui/react-switch": "^9.6.0",
+    "@fluentui/react-text": "^9.6.15",
+    "@fluentui/react-link": "^9.7.4",
+    "@fluentui/react-provider": "^9.22.15",
+    "@fluentui/react-utilities": "^9.26.2",
+    "@fluentui/react-theme": "^9.2.1",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-shared-contexts": "^9.25.2",
-    "@fluentui/react-spinner": "^9.7.9",
-    "@fluentui/react-toast": "^9.7.6",
-    "@griffel/react": "^1.5.22",
+    "@fluentui/react-shared-contexts": "^9.26.2",
+    "@fluentui/react-spinner": "^9.7.15",
+    "@fluentui/react-toast": "^9.7.14",
+    "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
-    "@storybook/addon-docs": "^7.6.20",
-    "@storybook/components": "^7.6.20",
-    "@storybook/core-events": "^7.6.20",
-    "@storybook/preview-api": "^7.6.20",
-    "@storybook/manager-api": "^7.6.20",
-    "@storybook/react": "^7.6.20",
-    "@storybook/theming": "^7.6.20",
+    "@storybook/addon-docs": "^9.1.17",
+    "@storybook/icons": "^1.3.2",
+    "@storybook/react-webpack5": "^9.1.17",
     "@types/react-dom": ">=16.9.0 <20.0.0",
     "@types/react": ">=16.14.0 <20.0.0",
     "react-dom": ">=16.14.0 <20.0.0",
-    "react": ">=16.14.0 <20.0.0"
+    "react": ">=16.14.0 <20.0.0",
+    "storybook": "^9.1.17"
   },
   "beachball": {
     "disallowedChangeTypes": [