@fluentui/react-storybook-addon 0.5.0 → 0.6.0

package/lib-commonjs/decorators/withFluentProvider.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "withFluentProvider", {
+    enumerable: true,
+    get: function() {
+        return withFluentProvider;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactprovider = require("@fluentui/react-provider");
+const _reacttheme = require("@fluentui/react-theme");
+const _theme = require("../theme");
+const _constants = require("../constants");
+const _isDecoratorDisabled = require("../utils/isDecoratorDisabled");
+const themes = {
+    'web-light': _reacttheme.webLightTheme,
+    'web-dark': _reacttheme.webDarkTheme,
+    'teams-light': _reacttheme.teamsLightTheme,
+    'teams-dark': _reacttheme.teamsDarkTheme,
+    'teams-high-contrast': _reacttheme.teamsHighContrastTheme,
+    'teams-light-v21': _reacttheme.teamsLightV21Theme,
+    'teams-dark-v21': _reacttheme.teamsDarkV21Theme
+};
+const findTheme = (themeId)=>{
+    return themeId ? themes[themeId] : null;
+};
+const withFluentProvider = (StoryFn, context)=>{
+    const { globals, parameters } = context;
+    const { mode } = parameters;
+    if ((0, _isDecoratorDisabled.isDecoratorDisabled)(context, 'FluentProvider')) {
+        return StoryFn();
+    }
+    const isVrTest = mode === 'vr-test';
+    var _parameters_dir, _ref;
+    const dir = (_ref = (_parameters_dir = parameters.dir) !== null && _parameters_dir !== void 0 ? _parameters_dir : globals[_constants.DIR_ID]) !== null && _ref !== void 0 ? _ref : 'ltr';
+    const globalTheme = findTheme(globals[_constants.THEME_ID]);
+    const paramTheme = findTheme(parameters.fluentTheme);
+    var _ref1;
+    const theme = (_ref1 = paramTheme !== null && paramTheme !== void 0 ? paramTheme : globalTheme) !== null && _ref1 !== void 0 ? _ref1 : themes[_theme.defaultTheme.id];
+    return /*#__PURE__*/ _react.createElement(_reactprovider.FluentProvider, {
+        theme: theme,
+        dir: dir
+    }, isVrTest ? StoryFn() : /*#__PURE__*/ _react.createElement(FluentExampleContainer, {
+        theme: theme
+    }, StoryFn()));
+};
+const FluentExampleContainer = (props)=>{
+    const { theme } = props;
+    const backgroundColor = theme.colorNeutralBackground2;
+    return /*#__PURE__*/ _react.createElement("div", {
+        style: {
+            padding: '48px 24px',
+            backgroundColor
+        }
+    }, props.children);
+};

package/lib-commonjs/decorators/withFluentProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/decorators/withFluentProvider.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { FluentProvider } from '@fluentui/react-provider';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport {\n  Theme,\n  teamsDarkTheme,\n  teamsDarkV21Theme,\n  teamsHighContrastTheme,\n  teamsLightTheme,\n  teamsLightV21Theme,\n  webDarkTheme,\n  webLightTheme,\n} from '@fluentui/react-theme';\nimport { defaultTheme, ThemeIds } from '../theme';\nimport { DIR_ID, THEME_ID } from '../constants';\nimport { FluentStoryContext } from '../hooks';\nimport { isDecoratorDisabled } from '../utils/isDecoratorDisabled';\n\nconst themes: Record<ThemeIds, Theme> = {\n  'web-light': webLightTheme,\n  'web-dark': webDarkTheme,\n  'teams-light': teamsLightTheme,\n  'teams-dark': teamsDarkTheme,\n  'teams-high-contrast': teamsHighContrastTheme,\n  'teams-light-v21': teamsLightV21Theme,\n  'teams-dark-v21': teamsDarkV21Theme,\n} as const;\n\nconst findTheme = (themeId?: ThemeIds) => {\n  return themeId ? themes[themeId] : null;\n};\n\nexport const withFluentProvider = (StoryFn: () => JSXElement, context: FluentStoryContext): JSXElement => {\n  const { globals, parameters } = context;\n  const { mode } = parameters;\n\n  if (isDecoratorDisabled(context, 'FluentProvider')) {\n    return StoryFn();\n  }\n\n  const isVrTest = mode === 'vr-test';\n  const dir = parameters.dir ?? globals[DIR_ID] ?? 'ltr';\n  const globalTheme = findTheme(globals[THEME_ID]);\n  const paramTheme = findTheme(parameters.fluentTheme);\n  const theme = paramTheme ?? globalTheme ?? themes[defaultTheme.id];\n\n  return (\n    <FluentProvider theme={theme} dir={dir}>\n      {isVrTest ? StoryFn() : <FluentExampleContainer theme={theme}>{StoryFn()}</FluentExampleContainer>}\n    </FluentProvider>\n  );\n};\n\nconst FluentExampleContainer: React.FC<{ children: React.ReactNode; theme: Theme }> = props => {\n  const { theme } = props;\n\n  const backgroundColor = theme.colorNeutralBackground2;\n  return <div style={{ padding: '48px 24px', backgroundColor }}>{props.children}</div>;\n};\n"],"names":["withFluentProvider","themes","webLightTheme","webDarkTheme","teamsLightTheme","teamsDarkTheme","teamsHighContrastTheme","teamsLightV21Theme","teamsDarkV21Theme","findTheme","themeId","StoryFn","context","globals","parameters","mode","isDecoratorDisabled","isVrTest","dir","DIR_ID","globalTheme","THEME_ID","paramTheme","fluentTheme","theme","defaultTheme","id","FluentProvider","FluentExampleContainer","props","backgroundColor","colorNeutralBackground2","div","style","padding","children"],"mappings":";;;;+BAiCaA;;;eAAAA;;;;iEAjCU;+BAEQ;4BAWxB;uBACgC;2BACN;qCAEG;AAEpC,MAAMC,SAAkC;IACtC,aAAaC,yBAAa;IAC1B,YAAYC,wBAAY;IACxB,eAAeC,2BAAe;IAC9B,cAAcC,0BAAc;IAC5B,uBAAuBC,kCAAsB;IAC7C,mBAAmBC,8BAAkB;IACrC,kBAAkBC,6BAAiB;AACrC;AAEA,MAAMC,YAAY,CAACC;IACjB,OAAOA,UAAUT,MAAM,CAACS,QAAQ,GAAG;AACrC;AAEO,MAAMV,qBAAqB,CAACW,SAA2BC;IAC5D,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAE,GAAGF;IAChC,MAAM,EAAEG,IAAI,EAAE,GAAGD;IAEjB,IAAIE,IAAAA,wCAAmB,EAACJ,SAAS,mBAAmB;QAClD,OAAOD;IACT;IAEA,MAAMM,WAAWF,SAAS;QACdD,iBAAAA;IAAZ,MAAMI,MAAMJ,CAAAA,OAAAA,CAAAA,kBAAAA,WAAWI,GAAG,cAAdJ,6BAAAA,kBAAkBD,OAAO,CAACM,iBAAM,CAAC,cAAjCL,kBAAAA,OAAqC;IACjD,MAAMM,cAAcX,UAAUI,OAAO,CAACQ,mBAAQ,CAAC;IAC/C,MAAMC,aAAab,UAAUK,WAAWS,WAAW;QACrCD;IAAd,MAAME,QAAQF,CAAAA,QAAAA,uBAAAA,wBAAAA,aAAcF,yBAAdE,mBAAAA,QAA6BrB,MAAM,CAACwB,mBAAY,CAACC,EAAE,CAAC;IAElE,qBACE,qBAACC,6BAAc;QAACH,OAAOA;QAAON,KAAKA;OAChCD,WAAWN,0BAAY,qBAACiB;QAAuBJ,OAAOA;OAAQb;AAGrE;AAEA,MAAMiB,yBAAgFC,CAAAA;IACpF,MAAM,EAAEL,KAAK,EAAE,GAAGK;IAElB,MAAMC,kBAAkBN,MAAMO,uBAAuB;IACrD,qBAAO,qBAACC;QAAIC,OAAO;YAAEC,SAAS;YAAaJ;QAAgB;OAAID,MAAMM,QAAQ;AAC/E"}

package/lib-commonjs/decorators/withReactStrictMode.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "withReactStrictMode", {
+    enumerable: true,
+    get: function() {
+        return withReactStrictMode;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _constants = require("../constants");
+const _isDecoratorDisabled = require("../utils/isDecoratorDisabled");
+const withReactStrictMode = (StoryFn, context)=>{
+    if ((0, _isDecoratorDisabled.isDecoratorDisabled)(context, 'ReactStrictMode')) {
+        return StoryFn();
+    }
+    var _context_globals_STRICT_MODE_ID;
+    const isActive = (_context_globals_STRICT_MODE_ID = context.globals[_constants.STRICT_MODE_ID]) !== null && _context_globals_STRICT_MODE_ID !== void 0 ? _context_globals_STRICT_MODE_ID : false;
+    return /*#__PURE__*/ _react.createElement(StrictModeWrapper, {
+        strictMode: isActive
+    }, StoryFn());
+};
+const StrictModeWrapper = (props)=>{
+    return props.strictMode ? /*#__PURE__*/ _react.createElement(_react.StrictMode, null, props.children) : props.children;
+};

package/lib-commonjs/decorators/withReactStrictMode.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/decorators/withReactStrictMode.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport { STRICT_MODE_ID } from '../constants';\nimport { FluentStoryContext } from '../hooks';\nimport { isDecoratorDisabled } from '../utils/isDecoratorDisabled';\n\nexport const withReactStrictMode = (StoryFn: () => JSXElement, context: FluentStoryContext): JSXElement => {\n  if (isDecoratorDisabled(context, 'ReactStrictMode')) {\n    return StoryFn();\n  }\n\n  const isActive = context.globals[STRICT_MODE_ID] ?? false;\n\n  return <StrictModeWrapper strictMode={isActive}>{StoryFn()}</StrictModeWrapper>;\n};\n\nconst StrictModeWrapper = (props: { strictMode: boolean; children: React.ReactElement }) => {\n  return props.strictMode ? <React.StrictMode>{props.children}</React.StrictMode> : props.children;\n};\n"],"names":["withReactStrictMode","StoryFn","context","isDecoratorDisabled","isActive","globals","STRICT_MODE_ID","StrictModeWrapper","strictMode","props","React","StrictMode","children"],"mappings":";;;;+BAOaA;;;eAAAA;;;;iEAPU;2BAGQ;qCAEK;AAE7B,MAAMA,sBAAsB,CAACC,SAA2BC;IAC7D,IAAIC,IAAAA,wCAAmB,EAACD,SAAS,oBAAoB;QACnD,OAAOD;IACT;QAEiBC;IAAjB,MAAME,WAAWF,CAAAA,kCAAAA,QAAQG,OAAO,CAACC,yBAAc,CAAC,cAA/BJ,6CAAAA,kCAAmC;IAEpD,qBAAO,qBAACK;QAAkBC,YAAYJ;OAAWH;AACnD;AAEA,MAAMM,oBAAoB,CAACE;IACzB,OAAOA,MAAMD,UAAU,iBAAG,qBAACE,OAAMC,UAAU,QAAEF,MAAMG,QAAQ,IAAuBH,MAAMG,QAAQ;AAClG"}

package/lib-commonjs/docs/CopyAsMarkdownButton.js

@@ -0,0 +1,185 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "CopyAsMarkdownButton", {
+    enumerable: true,
+    get: function() {
+        return CopyAsMarkdownButton;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactbutton = require("@fluentui/react-button");
+const _reactmenu = require("@fluentui/react-menu");
+const _reactspinner = require("@fluentui/react-spinner");
+const _reacttoast = require("@fluentui/react-toast");
+const _reactutilities = require("@fluentui/react-utilities");
+const _react1 = require("@griffel/react");
+const _reacticons = require("@fluentui/react-icons");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const MarkdownIcon = (0, _reacticons.bundleIcon)(_reacticons.MarkdownFilled, _reacticons.MarkdownRegular);
+const useStyles = (0, _react1.makeStyles)({
+    button: {
+        marginInlineStart: 'auto'
+    }
+});
+const CopyAsMarkdownButton = ({ storyId = '' })=>{
+    const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
+    const targetWindow = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
+    const styles = useStyles();
+    const toastId = (0, _reactutilities.useId)('copy-toast');
+    const toasterId = (0, _reactutilities.useId)('toaster');
+    const { dispatchToast, updateToast } = (0, _reacttoast.useToastController)(toasterId);
+    // Cache for the fetched markdown content to avoid redundant network requests
+    const markdownContentCache = _react.useRef(null);
+    // AbortController to track and cancel fetch requests
+    const abortControllerRef = _react.useRef(null);
+    // Full URL to the markdown endpoint for this story
+    const markdownUrl = _react.useMemo(()=>{
+        return targetWindow ? convertStoryIdToMarkdownUrl(targetWindow, storyId) : '';
+    }, [
+        storyId,
+        targetWindow
+    ]);
+    // Cleanup: abort pending requests on unmount
+    _react.useEffect(()=>{
+        return ()=>{
+            var _abortControllerRef_current;
+            (_abortControllerRef_current = abortControllerRef.current) === null || _abortControllerRef_current === void 0 ? void 0 : _abortControllerRef_current.abort();
+        };
+    }, []);
+    /**
+   * Fetches the markdown content (with caching) and copies it to the clipboard.
+   * Shows a toast notification with loading, success, or error states.
+   * Skips the request if one is already in progress.
+   */ const copyPageContentToClipboard = _react.useCallback(async ()=>{
+        // Skip if a request is already in progress (abort controller exists and not aborted)
+        if (abortControllerRef.current && !abortControllerRef.current.signal.aborted) {
+            return;
+        }
+        // Ensure we have a window context to use for clipboard and fetch
+        if (!targetWindow) {
+            return;
+        }
+        // Create new AbortController for this request
+        const abortController = new AbortController();
+        abortControllerRef.current = abortController;
+        // Show loading toast that persists until updated
+        dispatchToast(/*#__PURE__*/ _react.createElement(_reacttoast.Toast, null, /*#__PURE__*/ _react.createElement(_reacttoast.ToastTitle, {
+            media: /*#__PURE__*/ _react.createElement(_reactspinner.Spinner, null)
+        }, "Copying page content...")), {
+            toastId,
+            intent: 'info',
+            timeout: -1
+        });
+        try {
+            // Use cached content if available, otherwise fetch from API
+            if (!markdownContentCache.current) {
+                markdownContentCache.current = await fetchMarkdownContent(targetWindow, markdownUrl, abortController.signal);
+            }
+            // Copy to clipboard
+            await (targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.navigator.clipboard.writeText(markdownContentCache.current));
+            // Update toast to success
+            updateToast({
+                content: /*#__PURE__*/ _react.createElement(_reacttoast.Toast, null, /*#__PURE__*/ _react.createElement(_reacttoast.ToastTitle, null, "Page content copied to clipboard!")),
+                intent: 'success',
+                toastId,
+                timeout: 3000
+            });
+        } catch (error) {
+            // Don't show error if request was aborted
+            if (abortController.signal.aborted) {
+                return;
+            }
+            const errorMessage = error instanceof Error ? error.message : String(error);
+            // Update toast to error
+            updateToast({
+                content: /*#__PURE__*/ _react.createElement(_reacttoast.Toast, null, /*#__PURE__*/ _react.createElement(_reacttoast.ToastTitle, null, "Failed to copy page content: ", errorMessage)),
+                intent: 'error',
+                toastId,
+                timeout: 3000
+            });
+        } finally{
+            // Clear the abort controller ref to allow new requests
+            abortControllerRef.current = null;
+        }
+    }, [
+        dispatchToast,
+        updateToast,
+        toastId,
+        markdownUrl,
+        targetWindow
+    ]);
+    /** Opens the markdown content in a new browser tab */ const openInNewTab = _react.useCallback(()=>{
+        targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.open(markdownUrl, '_blank');
+    }, [
+        markdownUrl,
+        targetWindow
+    ]);
+    if (!storyId) {
+        return null;
+    }
+    return /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement(_reactmenu.Menu, {
+        positioning: "below-end"
+    }, /*#__PURE__*/ _react.createElement(_reactmenu.MenuTrigger, {
+        disableButtonEnhancement: true
+    }, (triggerProps)=>/*#__PURE__*/ _react.createElement(_reactbutton.SplitButton, {
+            className: styles.button,
+            menuButton: triggerProps,
+            primaryActionButton: {
+                appearance: 'secondary',
+                icon: /*#__PURE__*/ _react.createElement(MarkdownIcon, null),
+                onClick: copyPageContentToClipboard,
+                'aria-label': 'Copy page content as markdown to clipboard'
+            },
+            "aria-label": "Copy page as markdown"
+        }, "Copy Page")), /*#__PURE__*/ _react.createElement(_reactmenu.MenuPopover, null, /*#__PURE__*/ _react.createElement(_reactmenu.MenuList, null, /*#__PURE__*/ _react.createElement(_reactmenu.MenuItem, {
+        icon: /*#__PURE__*/ _react.createElement(MarkdownIcon, null),
+        onClick: openInNewTab
+    }, "View as Markdown")))), /*#__PURE__*/ _react.createElement(_reacttoast.Toaster, {
+        toasterId: toasterId
+    }));
+};
+/**
+ * Regex pattern to remove the story variant suffix from Storybook story IDs.
+ * @example "button--primary" -> "button"
+ */ const STORYBOOK_VARIANT_SUFFIX_PATTERN = /--\w+$/g;
+/**
+ * Gets the base URL for fetching markdown content from the Storybook LLM endpoint.
+ * Each story's markdown is available at: {BASE_URL}/{storyId}.txt
+ * @param targetWindow - The window object to use for location access
+ * @returns The base URL constructed from current location origin and pathname
+ */ function getStorybookMarkdownApiBaseUrl(targetWindow) {
+    // Remove the [page].html file from pathname and append /llms/
+    const basePath = targetWindow.location.pathname.replace(/\/[^/]*\.html$/, '');
+    return `${targetWindow.location.origin}${basePath}/llms/`;
+}
+/**
+ * Converts a Storybook story ID to a markdown URL.
+ * @param targetWindow - The window object to use for location access
+ * @param storyId - The Storybook story ID
+ * @returns The full URL to the markdown endpoint for the story
+ * @example "button--primary" -> "https://storybooks.fluentui.dev/llms/button.txt"
+ */ function convertStoryIdToMarkdownUrl(targetWindow, storyId) {
+    return `${getStorybookMarkdownApiBaseUrl(targetWindow)}${storyId.replace(STORYBOOK_VARIANT_SUFFIX_PATTERN, '.txt')}`;
+}
+/**
+ * Fetches markdown content from the Storybook API.
+ * @param targetWindow - The window object to use for fetch access
+ * @param url - The URL to fetch markdown content from
+ * @param signal - Optional AbortSignal to cancel the request
+ * @returns Promise resolving to the markdown text content
+ * @throws Error if the fetch request fails or is aborted
+ */ async function fetchMarkdownContent(targetWindow, url, signal) {
+    const response = await targetWindow.fetch(url, {
+        headers: {
+            'Content-Type': 'text/plain'
+        },
+        signal
+    });
+    if (!response.ok) {
+        throw new Error(`Failed to fetch markdown: ${response.status} ${response.statusText}`);
+    }
+    return response.text();
+}

package/lib-commonjs/docs/CopyAsMarkdownButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/docs/CopyAsMarkdownButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { SplitButton, type MenuButtonProps } from '@fluentui/react-button';\nimport { Menu, MenuItem, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-menu';\nimport { Spinner } from '@fluentui/react-spinner';\nimport { Toast, Toaster, ToastTitle, useToastController } from '@fluentui/react-toast';\nimport { useId } from '@fluentui/react-utilities';\nimport { makeStyles } from '@griffel/react';\nimport { bundleIcon, MarkdownFilled, MarkdownRegular } from '@fluentui/react-icons';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nconst MarkdownIcon = bundleIcon(MarkdownFilled, MarkdownRegular);\n\nconst useStyles = makeStyles({\n  button: {\n    marginInlineStart: 'auto',\n  },\n});\n\nexport interface CopyAsMarkdownProps {\n  /** The Storybook story ID used to generate the markdown URL */\n  storyId?: string;\n}\n\n/**\n * A button that allows users to copy the current page as markdown to their clipboard or view it in a new tab.\n * The markdown content is fetched from the Storybook API and cached for subsequent requests.\n */\nexport const CopyAsMarkdownButton: React.FC<CopyAsMarkdownProps> = ({ storyId = '' }) => {\n  const { targetDocument } = useFluent();\n  const targetWindow = targetDocument?.defaultView;\n  const styles = useStyles();\n  const toastId = useId('copy-toast');\n  const toasterId = useId('toaster');\n  const { dispatchToast, updateToast } = useToastController(toasterId);\n\n  // Cache for the fetched markdown content to avoid redundant network requests\n  const markdownContentCache = React.useRef<string | null>(null);\n\n  // AbortController to track and cancel fetch requests\n  const abortControllerRef = React.useRef<AbortController | null>(null);\n\n  // Full URL to the markdown endpoint for this story\n  const markdownUrl = React.useMemo(() => {\n    return targetWindow ? convertStoryIdToMarkdownUrl(targetWindow, storyId) : '';\n  }, [storyId, targetWindow]);\n\n  // Cleanup: abort pending requests on unmount\n  React.useEffect(() => {\n    return () => {\n      abortControllerRef.current?.abort();\n    };\n  }, []);\n\n  /**\n   * Fetches the markdown content (with caching) and copies it to the clipboard.\n   * Shows a toast notification with loading, success, or error states.\n   * Skips the request if one is already in progress.\n   */\n  const copyPageContentToClipboard = React.useCallback(async () => {\n    // Skip if a request is already in progress (abort controller exists and not aborted)\n    if (abortControllerRef.current && !abortControllerRef.current.signal.aborted) {\n      return;\n    }\n\n    // Ensure we have a window context to use for clipboard and fetch\n    if (!targetWindow) {\n      return;\n    }\n\n    // Create new AbortController for this request\n    const abortController = new AbortController();\n    abortControllerRef.current = abortController;\n\n    // Show loading toast that persists until updated\n    dispatchToast(\n      <Toast>\n        <ToastTitle media={<Spinner />}>Copying page content...</ToastTitle>\n      </Toast>,\n      {\n        toastId,\n        intent: 'info',\n        timeout: -1, // Never auto-dismiss\n      },\n    );\n\n    try {\n      // Use cached content if available, otherwise fetch from API\n      if (!markdownContentCache.current) {\n        markdownContentCache.current = await fetchMarkdownContent(targetWindow, markdownUrl, abortController.signal);\n      }\n\n      // Copy to clipboard\n      await targetWindow?.navigator.clipboard.writeText(markdownContentCache.current);\n\n      // Update toast to success\n      updateToast({\n        content: (\n          <Toast>\n            <ToastTitle>Page content copied to clipboard!</ToastTitle>\n          </Toast>\n        ),\n        intent: 'success',\n        toastId,\n        timeout: 3000,\n      });\n    } catch (error) {\n      // Don't show error if request was aborted\n      if (abortController.signal.aborted) {\n        return;\n      }\n\n      const errorMessage = error instanceof Error ? error.message : String(error);\n\n      // Update toast to error\n      updateToast({\n        content: (\n          <Toast>\n            <ToastTitle>Failed to copy page content: {errorMessage}</ToastTitle>\n          </Toast>\n        ),\n        intent: 'error',\n        toastId,\n        timeout: 3000,\n      });\n    } finally {\n      // Clear the abort controller ref to allow new requests\n      abortControllerRef.current = null;\n    }\n  }, [dispatchToast, updateToast, toastId, markdownUrl, targetWindow]);\n\n  /** Opens the markdown content in a new browser tab */\n  const openInNewTab = React.useCallback(() => {\n    targetWindow?.open(markdownUrl, '_blank');\n  }, [markdownUrl, targetWindow]);\n\n  if (!storyId) {\n    return null;\n  }\n\n  return (\n    <>\n      <Menu positioning=\"below-end\">\n        <MenuTrigger disableButtonEnhancement>\n          {(triggerProps: MenuButtonProps) => (\n            <SplitButton\n              className={styles.button}\n              menuButton={triggerProps}\n              primaryActionButton={{\n                appearance: 'secondary',\n                icon: <MarkdownIcon />,\n                onClick: copyPageContentToClipboard,\n                'aria-label': 'Copy page content as markdown to clipboard',\n              }}\n              aria-label=\"Copy page as markdown\"\n            >\n              Copy Page\n            </SplitButton>\n          )}\n        </MenuTrigger>\n\n        <MenuPopover>\n          <MenuList>\n            <MenuItem icon={<MarkdownIcon />} onClick={openInNewTab}>\n              View as Markdown\n            </MenuItem>\n          </MenuList>\n        </MenuPopover>\n      </Menu>\n      <Toaster toasterId={toasterId} />\n    </>\n  );\n};\n\n/**\n * Regex pattern to remove the story variant suffix from Storybook story IDs.\n * @example \"button--primary\" -> \"button\"\n */\nconst STORYBOOK_VARIANT_SUFFIX_PATTERN = /--\\w+$/g;\n\n/**\n * Gets the base URL for fetching markdown content from the Storybook LLM endpoint.\n * Each story's markdown is available at: {BASE_URL}/{storyId}.txt\n * @param targetWindow - The window object to use for location access\n * @returns The base URL constructed from current location origin and pathname\n */\nfunction getStorybookMarkdownApiBaseUrl(targetWindow: Window): string {\n  // Remove the [page].html file from pathname and append /llms/\n  const basePath = targetWindow.location.pathname.replace(/\\/[^/]*\\.html$/, '');\n  return `${targetWindow.location.origin}${basePath}/llms/`;\n}\n\n/**\n * Converts a Storybook story ID to a markdown URL.\n * @param targetWindow - The window object to use for location access\n * @param storyId - The Storybook story ID\n * @returns The full URL to the markdown endpoint for the story\n * @example \"button--primary\" -> \"https://storybooks.fluentui.dev/llms/button.txt\"\n */\nfunction convertStoryIdToMarkdownUrl(targetWindow: Window, storyId: string): string {\n  return `${getStorybookMarkdownApiBaseUrl(targetWindow)}${storyId.replace(STORYBOOK_VARIANT_SUFFIX_PATTERN, '.txt')}`;\n}\n\n/**\n * Fetches markdown content from the Storybook API.\n * @param targetWindow - The window object to use for fetch access\n * @param url - The URL to fetch markdown content from\n * @param signal - Optional AbortSignal to cancel the request\n * @returns Promise resolving to the markdown text content\n * @throws Error if the fetch request fails or is aborted\n */\nasync function fetchMarkdownContent(\n  targetWindow: Window,\n  url: string,\n  signal: AbortSignal | undefined,\n): Promise<string> {\n  const response = await targetWindow.fetch(url, {\n    headers: {\n      'Content-Type': 'text/plain',\n    },\n    signal,\n  });\n\n  if (!response.ok) {\n    throw new Error(`Failed to fetch markdown: ${response.status} ${response.statusText}`);\n  }\n\n  return response.text();\n}\n"],"names":["CopyAsMarkdownButton","MarkdownIcon","bundleIcon","MarkdownFilled","MarkdownRegular","useStyles","makeStyles","button","marginInlineStart","storyId","targetDocument","useFluent","targetWindow","defaultView","styles","toastId","useId","toasterId","dispatchToast","updateToast","useToastController","markdownContentCache","React","useRef","abortControllerRef","markdownUrl","useMemo","convertStoryIdToMarkdownUrl","useEffect","current","abort","copyPageContentToClipboard","useCallback","signal","aborted","abortController","AbortController","Toast","ToastTitle","media","Spinner","intent","timeout","fetchMarkdownContent","navigator","clipboard","writeText","content","error","errorMessage","Error","message","String","openInNewTab","open","Menu","positioning","MenuTrigger","disableButtonEnhancement","triggerProps","SplitButton","className","menuButton","primaryActionButton","appearance","icon","onClick","aria-label","MenuPopover","MenuList","MenuItem","Toaster","STORYBOOK_VARIANT_SUFFIX_PATTERN","getStorybookMarkdownApiBaseUrl","basePath","location","pathname","replace","origin","url","response","fetch","headers","ok","status","statusText","text"],"mappings":";;;;+BA2BaA;;;eAAAA;;;;iEA3BU;6BAC2B;2BACiB;8BAC3C;4BACuC;gCACzC;wBACK;4BACiC;qCACZ;AAEhD,MAAMC,eAAeC,IAAAA,sBAAU,EAACC,0BAAc,EAAEC,2BAAe;AAE/D,MAAMC,YAAYC,IAAAA,kBAAU,EAAC;IAC3BC,QAAQ;QACNC,mBAAmB;IACrB;AACF;AAWO,MAAMR,uBAAsD,CAAC,EAAES,UAAU,EAAE,EAAE;IAClF,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAS;IACpC,MAAMC,eAAeF,2BAAAA,qCAAAA,eAAgBG,WAAW;IAChD,MAAMC,SAAST;IACf,MAAMU,UAAUC,IAAAA,qBAAK,EAAC;IACtB,MAAMC,YAAYD,IAAAA,qBAAK,EAAC;IACxB,MAAM,EAAEE,aAAa,EAAEC,WAAW,EAAE,GAAGC,IAAAA,8BAAkB,EAACH;IAE1D,6EAA6E;IAC7E,MAAMI,uBAAuBC,OAAMC,MAAM,CAAgB;IAEzD,qDAAqD;IACrD,MAAMC,qBAAqBF,OAAMC,MAAM,CAAyB;IAEhE,mDAAmD;IACnD,MAAME,cAAcH,OAAMI,OAAO,CAAC;QAChC,OAAOd,eAAee,4BAA4Bf,cAAcH,WAAW;IAC7E,GAAG;QAACA;QAASG;KAAa;IAE1B,6CAA6C;IAC7CU,OAAMM,SAAS,CAAC;QACd,OAAO;gBACLJ;aAAAA,8BAAAA,mBAAmBK,OAAO,cAA1BL,kDAAAA,4BAA4BM,KAAK;QACnC;IACF,GAAG,EAAE;IAEL;;;;GAIC,GACD,MAAMC,6BAA6BT,OAAMU,WAAW,CAAC;QACnD,qFAAqF;QACrF,IAAIR,mBAAmBK,OAAO,IAAI,CAACL,mBAAmBK,OAAO,CAACI,MAAM,CAACC,OAAO,EAAE;YAC5E;QACF;QAEA,iEAAiE;QACjE,IAAI,CAACtB,cAAc;YACjB;QACF;QAEA,8CAA8C;QAC9C,MAAMuB,kBAAkB,IAAIC;QAC5BZ,mBAAmBK,OAAO,GAAGM;QAE7B,iDAAiD;QACjDjB,4BACE,qBAACmB,iBAAK,sBACJ,qBAACC,sBAAU;YAACC,qBAAO,qBAACC,qBAAO;WAAK,6BAElC;YACEzB;YACA0B,QAAQ;YACRC,SAAS,CAAC;QACZ;QAGF,IAAI;YACF,4DAA4D;YAC5D,IAAI,CAACrB,qBAAqBQ,OAAO,EAAE;gBACjCR,qBAAqBQ,OAAO,GAAG,MAAMc,qBAAqB/B,cAAca,aAAaU,gBAAgBF,MAAM;YAC7G;YAEA,oBAAoB;YACpB,OAAMrB,yBAAAA,mCAAAA,aAAcgC,SAAS,CAACC,SAAS,CAACC,SAAS,CAACzB,qBAAqBQ,OAAO;YAE9E,0BAA0B;YAC1BV,YAAY;gBACV4B,uBACE,qBAACV,iBAAK,sBACJ,qBAACC,sBAAU,QAAC;gBAGhBG,QAAQ;gBACR1B;gBACA2B,SAAS;YACX;QACF,EAAE,OAAOM,OAAO;YACd,0CAA0C;YAC1C,IAAIb,gBAAgBF,MAAM,CAACC,OAAO,EAAE;gBAClC;YACF;YAEA,MAAMe,eAAeD,iBAAiBE,QAAQF,MAAMG,OAAO,GAAGC,OAAOJ;YAErE,wBAAwB;YACxB7B,YAAY;gBACV4B,uBACE,qBAACV,iBAAK,sBACJ,qBAACC,sBAAU,QAAC,iCAA8BW;gBAG9CR,QAAQ;gBACR1B;gBACA2B,SAAS;YACX;QACF,SAAU;YACR,uDAAuD;YACvDlB,mBAAmBK,OAAO,GAAG;QAC/B;IACF,GAAG;QAACX;QAAeC;QAAaJ;QAASU;QAAab;KAAa;IAEnE,oDAAoD,GACpD,MAAMyC,eAAe/B,OAAMU,WAAW,CAAC;QACrCpB,yBAAAA,mCAAAA,aAAc0C,IAAI,CAAC7B,aAAa;IAClC,GAAG;QAACA;QAAab;KAAa;IAE9B,IAAI,CAACH,SAAS;QACZ,OAAO;IACT;IAEA,qBACE,0DACE,qBAAC8C,eAAI;QAACC,aAAY;qBAChB,qBAACC,sBAAW;QAACC,0BAAAA;OACV,CAACC,6BACA,qBAACC,wBAAW;YACVC,WAAW/C,OAAOP,MAAM;YACxBuD,YAAYH;YACZI,qBAAqB;gBACnBC,YAAY;gBACZC,oBAAM,qBAAChE;gBACPiE,SAASnC;gBACT,cAAc;YAChB;YACAoC,cAAW;WACZ,6BAML,qBAACC,sBAAW,sBACV,qBAACC,mBAAQ,sBACP,qBAACC,mBAAQ;QAACL,oBAAM,qBAAChE;QAAiBiE,SAASb;OAAc,sCAM/D,qBAACkB,mBAAO;QAACtD,WAAWA;;AAG1B;AAEA;;;CAGC,GACD,MAAMuD,mCAAmC;AAEzC;;;;;CAKC,GACD,SAASC,+BAA+B7D,YAAoB;IAC1D,8DAA8D;IAC9D,MAAM8D,WAAW9D,aAAa+D,QAAQ,CAACC,QAAQ,CAACC,OAAO,CAAC,kBAAkB;IAC1E,OAAO,GAAGjE,aAAa+D,QAAQ,CAACG,MAAM,GAAGJ,SAAS,MAAM,CAAC;AAC3D;AAEA;;;;;;CAMC,GACD,SAAS/C,4BAA4Bf,YAAoB,EAAEH,OAAe;IACxE,OAAO,GAAGgE,+BAA+B7D,gBAAgBH,QAAQoE,OAAO,CAACL,kCAAkC,SAAS;AACtH;AAEA;;;;;;;CAOC,GACD,eAAe7B,qBACb/B,YAAoB,EACpBmE,GAAW,EACX9C,MAA+B;IAE/B,MAAM+C,WAAW,MAAMpE,aAAaqE,KAAK,CAACF,KAAK;QAC7CG,SAAS;YACP,gBAAgB;QAClB;QACAjD;IACF;IAEA,IAAI,CAAC+C,SAASG,EAAE,EAAE;QAChB,MAAM,IAAIjC,MAAM,CAAC,0BAA0B,EAAE8B,SAASI,MAAM,CAAC,CAAC,EAAEJ,SAASK,UAAU,EAAE;IACvF;IAEA,OAAOL,SAASM,IAAI;AACtB"}

package/lib-commonjs/docs/DirSwitch.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "DirSwitch", {
+    enumerable: true,
+    get: function() {
+        return 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 _reactlabel = require("@fluentui/react-label");
+const _reactswitch = require("@fluentui/react-switch");
+const _reactutilities = require("@fluentui/react-utilities");
+const _reacttheme = require("@fluentui/react-theme");
+const _react1 = require("@griffel/react");
+const _constants = require("../constants");
+const useStyles = (0, _react1.makeStyles)({
+    container: {
+        alignItems: 'center',
+        display: 'flex',
+        justifyContent: 'start'
+    },
+    label: {
+        ..._reacttheme.typographyStyles.subtitle2
+    }
+});
+const DirSwitch = ({ dir })=>{
+    const switchId = (0, _reactutilities.useId)('dir-switch');
+    const styles = useStyles();
+    const [currentDir, setCurrentDir] = _react.useState(dir);
+    const checked = currentDir === 'rtl';
+    const setGlobalDir = (newDir)=>{
+        _previewapi.addons.getChannel().emit('updateGlobals', {
+            globals: {
+                [_constants.DIR_ID]: newDir
+            }
+        });
+    };
+    const onChange = _react.useCallback((_, data)=>{
+        const newDir = data.checked ? 'rtl' : 'ltr';
+        setGlobalDir(newDir);
+        setCurrentDir(newDir);
+    }, []);
+    return /*#__PURE__*/ _react.createElement("div", {
+        className: styles.container
+    }, /*#__PURE__*/ _react.createElement(_reactlabel.Label, {
+        className: styles.label,
+        htmlFor: currentDir === 'ltr' ? undefined : switchId
+    }, "LTR"), /*#__PURE__*/ _react.createElement(_reactswitch.Switch, {
+        checked: checked,
+        id: switchId,
+        onChange: onChange
+    }), /*#__PURE__*/ _react.createElement(_reactlabel.Label, {
+        className: styles.label,
+        htmlFor: currentDir === 'rtl' ? switchId : undefined
+    }, "RTL"));
+};

package/lib-commonjs/docs/DirSwitch.js.map

@@ -0,0 +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"}

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

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FluentDocsContainer", {
+    enumerable: true,
+    get: function() {
+        return FluentDocsContainer;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _blocks = require("@storybook/addon-docs/blocks");
+const _reacttheme = require("@fluentui/react-theme");
+const _reactprovider = require("@fluentui/react-provider");
+const _utils = require("./utils");
+const FluentDocsContainer = ({ children, context })=>{
+    if ((0, _utils.isDocsEnabled)(context)) {
+        return /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement(_reactprovider.FluentProvider, {
+            className: "sb-unstyled",
+            style: {
+                backgroundColor: 'transparent'
+            },
+            theme: _reacttheme.webLightTheme
+        }, /*#__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(_blocks.DocsContainer, {
+        context: context
+    }, children);
+};

package/lib-commonjs/docs/FluentDocsContainer.js.map

@@ -0,0 +1 @@
+{"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"}