@fluentui/react-storybook-addon 0.4.1 → 0.4.2

package/lib-commonjs/docs/DirSwitch.js

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

@@ -1 +0,0 @@
-{"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/FluentDocsContainer.js

@@ -1,33 +0,0 @@
-"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 _addondocs = require("@storybook/addon-docs");
-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(_addondocs.DocsContainer, {
-            context: context
-        }, children)));
-    }
-    // If docs container is not enabled, fall back to Storybook's default DocsContainer
-    return /*#__PURE__*/ _react.createElement(_addondocs.DocsContainer, {
-        context: context
-    }, children);
-};

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/docs/FluentDocsContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { DocsContainer, type DocsContextProps } from '@storybook/addon-docs';\nimport { webLightTheme } from '@fluentui/react-theme';\nimport { FluentProvider } from '@fluentui/react-provider';\n\nimport { isDocsEnabled } from './utils';\n\ninterface FluentDocsContainerProps {\n  context: DocsContextProps;\n  children: React.ReactNode;\n}\n\n/**\n * A container that wraps storybook's native docs container to add extra components to the docs experience\n */\nexport const FluentDocsContainer: React.FC<FluentDocsContainerProps> = ({ children, context }) => {\n  if (isDocsEnabled(context)) {\n    return (\n      <>\n        {/** TODO add table of contents */}\n        <FluentProvider className=\"sb-unstyled\" style={{ backgroundColor: 'transparent' }} theme={webLightTheme}>\n          <DocsContainer context={context}>{children}</DocsContainer>\n        </FluentProvider>\n      </>\n    );\n  }\n\n  // If docs container is not enabled, fall back to Storybook's default DocsContainer\n  return <DocsContainer context={context}>{children}</DocsContainer>;\n};\n"],"names":["FluentDocsContainer","children","context","isDocsEnabled","FluentProvider","className","style","backgroundColor","theme","webLightTheme","DocsContainer"],"mappings":";;;;+BAeaA;;;eAAAA;;;;iEAfU;2BAC8B;4BACvB;+BACC;uBAED;AAUvB,MAAMA,sBAA0D,CAAC,EAAEC,QAAQ,EAAEC,OAAO,EAAE;IAC3F,IAAIC,IAAAA,oBAAa,EAACD,UAAU;QAC1B,qBACE,0DAEE,qBAACE,6BAAc;YAACC,WAAU;YAAcC,OAAO;gBAAEC,iBAAiB;YAAc;YAAGC,OAAOC,yBAAa;yBACrG,qBAACC,wBAAa;YAACR,SAASA;WAAUD;IAI1C;IAEA,mFAAmF;IACnF,qBAAO,qBAACS,wBAAa;QAACR,SAASA;OAAUD;AAC3C"}

package/lib-commonjs/docs/FluentDocsPage.js

@@ -1,307 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "FluentDocsPage", {
-    enumerable: true,
-    get: function() {
-        return FluentDocsPage;
-    }
-});
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _addondocs = require("@storybook/addon-docs");
-const _reacttheme = require("@fluentui/react-theme");
-const _reactlink = require("@fluentui/react-link");
-const _reacttext = require("@fluentui/react-text");
-const _react1 = require("@griffel/react");
-const _reacticons = require("@fluentui/react-icons");
-const _constants = require("../constants");
-const _theme = require("../theme");
-const _utils = require("./utils");
-const _DirSwitch = require("./DirSwitch");
-const _ThemePicker = require("./ThemePicker");
-const _Toc = require("./Toc");
-const useStyles = (0, _react1.makeStyles)({
-    divider: {
-        height: '1px',
-        backgroundColor: '#e1dfdd',
-        border: '0px none',
-        margin: '48px 0px'
-    },
-    wrapper: {
-        display: 'flex',
-        gap: '16px'
-    },
-    toc: {
-        flexBasis: '200px',
-        flexShrink: 0,
-        [`@media screen and (max-width: 1000px)`]: {
-            display: 'none'
-        }
-    },
-    container: {
-        // without a width, this div grows wider than its parent
-        width: '200px',
-        flexGrow: 1
-    },
-    globalTogglesContainer: {
-        columnGap: _reacttheme.tokens.spacingHorizontalXXXL,
-        display: 'flex'
-    },
-    description: {
-        display: 'grid',
-        gridTemplateColumns: '1fr min-content'
-    },
-    additionalInfoWrapper: {
-        display: 'flex',
-        flexDirection: 'column',
-        gap: _reacttheme.tokens.spacingVerticalM
-    },
-    additionalInfo: {
-        display: 'flex',
-        flexDirection: 'column',
-        gap: _reacttheme.tokens.spacingVerticalM,
-        border: `1px solid ${_reacttheme.tokens.colorNeutralStroke1}`,
-        borderRadius: _reacttheme.tokens.borderRadiusMedium,
-        padding: _reacttheme.tokens.spacingHorizontalM,
-        margin: `0 ${_reacttheme.tokens.spacingHorizontalM}`
-    },
-    additionalInfoIcon: {
-        alignSelf: 'center',
-        color: _reacttheme.tokens.colorBrandForeground1,
-        fontSize: '24px',
-        marginRight: _reacttheme.tokens.spacingHorizontalM
-    },
-    additionalInfoMessage: {
-        display: 'flex',
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: _reacttheme.tokens.spacingVerticalXS
-    },
-    infoIcon: {
-        display: 'flex',
-        flexDirection: 'column',
-        gap: _reacttheme.tokens.spacingVerticalXS,
-        flex: 1
-    }
-});
-const useVideoClasses = (0, _react1.makeStyles)({
-    container: {
-        display: 'flex',
-        flexDirection: 'column',
-        gap: _reacttheme.tokens.spacingHorizontalMNudge
-    },
-    preview: {
-        borderRadius: _reacttheme.tokens.borderRadiusSmall,
-        display: 'flex',
-        flexDirection: 'column',
-        gap: _reacttheme.tokens.spacingHorizontalM,
-        padding: _reacttheme.tokens.spacingHorizontalM,
-        backgroundColor: _reacttheme.tokens.colorNeutralBackground2,
-        ':hover': {
-            backgroundColor: _reacttheme.tokens.colorNeutralBackground2Hover
-        }
-    },
-    image: {
-        width: '200px'
-    }
-});
-const VideoPreviews = (props)=>{
-    const { videos } = props;
-    const classes = useVideoClasses();
-    return /*#__PURE__*/ _react.createElement("div", {
-        className: classes.container
-    }, videos.map((video)=>/*#__PURE__*/ _react.createElement(_reactlink.Link, {
-            className: classes.preview,
-            href: video.href,
-            target: "_blank",
-            key: video.href
-        }, /*#__PURE__*/ _react.createElement("img", {
-            alt: `Video: ${video.preview}`,
-            src: video.preview,
-            className: classes.image
-        }), /*#__PURE__*/ _react.createElement(_reacttext.Text, null, video.title))));
-};
-const getNativeElementsList = (elements)=>{
-    const elementsArr = elements === null || elements === void 0 ? void 0 : elements.map((el, idx)=>[
-            /*#__PURE__*/ _react.createElement("code", {
-                key: idx
-            }, `<${el}>`),
-            idx !== elements.length - 1 ? ', ' : ' '
-        ]);
-    return /*#__PURE__*/ _react.createElement(_react.Fragment, null, elementsArr, elementsArr.length > 1 ? 'elements' : 'element');
-};
-const slotRegex = /as\?:\s*"([^"]+)"/;
-/**
- * NOTE: this function mutates original story argTypes including all story subcomponents if they are present
- */ function withSlotEnhancer(story, options) {
-    var _story_argTypes_as_type, _story_argTypes_as;
-    const hasArgAsProp = options.nativePropsApi ? ((_story_argTypes_as = story.argTypes.as) === null || _story_argTypes_as === void 0 ? void 0 : (_story_argTypes_as_type = _story_argTypes_as.type) === null || _story_argTypes_as_type === void 0 ? void 0 : _story_argTypes_as_type.name) === 'enum' : false;
-    const argAsProp = hasArgAsProp ? story.argTypes.as.type.value : null;
-    let hasArgAsSlot = false;
-    const transformPropsWithSlotShorthand = (props)=>{
-        Object.entries(props).forEach(([key, argType])=>{
-            var _argType_type;
-            const value = argType === null || argType === void 0 ? void 0 : (_argType_type = argType.type) === null || _argType_type === void 0 ? void 0 : _argType_type.name;
-            // If DocGen was already transformed, skip the transformation but set hasArgAsSlot to true so that we can show the info message
-            if (value.includes('Slot')) {
-                hasArgAsSlot = true;
-                return;
-            }
-            // Initial Render Transformation for shorthand slot values (mutates DocGen Object reference)
-            if (value.includes('WithSlotShorthandValue')) {
-                hasArgAsSlot = true;
-                const match = value.match(slotRegex);
-                if (match) {
-                    props[key].type.name = `Slot<\"${match[1]}\">`;
-                } else {
-                    props[key].type.name = `Slot`;
-                }
-            }
-        });
-    };
-    const transformComponent = (component)=>{
-        var _component___docgenInfo;
-        const docGenProps = component === null || component === void 0 ? void 0 : (_component___docgenInfo = component.__docgenInfo) === null || _component___docgenInfo === void 0 ? void 0 : _component___docgenInfo.props;
-        if (docGenProps) {
-            transformPropsWithSlotShorthand(docGenProps);
-        }
-    };
-    const component = story.component;
-    const subcomponents = story.subcomponents;
-    if (options.slotsApi) {
-        transformComponent(component);
-        if (subcomponents) {
-            Object.values(subcomponents).forEach((subcomponent)=>{
-                transformComponent(subcomponent);
-            });
-        }
-    }
-    return {
-        component,
-        hasArgAsSlot,
-        hasArgAsProp,
-        argAsProp
-    };
-}
-const AdditionalApiDocs = ({ children })=>{
-    const styles = useStyles();
-    return /*#__PURE__*/ _react.createElement("div", {
-        className: styles.additionalInfo
-    }, /*#__PURE__*/ _react.createElement("div", {
-        className: styles.additionalInfoMessage
-    }, /*#__PURE__*/ _react.createElement(_reacticons.InfoFilled, {
-        className: styles.additionalInfoIcon
-    }), /*#__PURE__*/ _react.createElement("div", {
-        className: styles.infoIcon
-    }, children)));
-};
-const RenderArgsTable = ({ story, hideArgsTable, showSlotsApi, showNativePropsApi })=>{
-    const { component, hasArgAsProp, hasArgAsSlot, argAsProp } = withSlotEnhancer(story, {
-        slotsApi: showSlotsApi,
-        nativePropsApi: showNativePropsApi
-    });
-    const styles = useStyles();
-    return hideArgsTable ? null : /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement("div", {
-        className: styles.additionalInfoWrapper
-    }, hasArgAsProp && /*#__PURE__*/ _react.createElement(AdditionalApiDocs, null, /*#__PURE__*/ _react.createElement("p", null, /*#__PURE__*/ _react.createElement("b", null, "Native props are supported ", /*#__PURE__*/ _react.createElement("span", {
-        role: "presentation"
-    }, "🙌"), /*#__PURE__*/ _react.createElement("br", null)), /*#__PURE__*/ _react.createElement("span", null, "All HTML attributes native to the", getNativeElementsList(argAsProp), ", including all ", /*#__PURE__*/ _react.createElement("code", null, "aria-*"), " and ", /*#__PURE__*/ _react.createElement("code", null, "data-*"), ' ', "attributes, can be applied as native props on this component."))), hasArgAsSlot && /*#__PURE__*/ _react.createElement(AdditionalApiDocs, null, /*#__PURE__*/ _react.createElement("p", null, /*#__PURE__*/ _react.createElement("b", null, "Customizing components with slots ", /*#__PURE__*/ _react.createElement("span", {
-        role: "presentation"
-    }, "🙌")), /*#__PURE__*/ _react.createElement("br", null), /*#__PURE__*/ _react.createElement("span", null, "Slots in Fluent UI React components are designed to be modified or replaced, providing a flexible approach to customizing components. Each slot is exposed as a top-level prop and can be filled with primitive values, JSX/TSX, props objects, or render functions. This allows for more dynamic and reusable component structures, similar to slots in other frameworks.", ' ', /*#__PURE__*/ _react.createElement(_reactlink.Link, {
-        href: "/?path=/docs/concepts-developer-customizing-components-with-slots--docs"
-    }, "Customizing components with slots", ' '))))), /*#__PURE__*/ _react.createElement(_addondocs.ArgsTable, {
-        of: component
-    }));
-};
-const RenderPrimaryStory = ({ primaryStory, skipPrimaryStory })=>{
-    const styles = useStyles();
-    return skipPrimaryStory ? null : /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement("hr", {
-        className: styles.divider
-    }), /*#__PURE__*/ _react.createElement(_addondocs.HeaderMdx, {
-        as: "h3",
-        id: (0, _Toc.nameToHash)(primaryStory.name)
-    }, primaryStory.name), /*#__PURE__*/ _react.createElement(_addondocs.Primary, null));
-};
-const FluentDocsPage = ()=>{
-    var _primaryStoryContext_parameters, _primaryStoryContext_globals, _primaryStoryContext_parameters_docs, _primaryStoryContext_parameters1, _primaryStoryContext_parameters_docs1, _primaryStoryContext_parameters2, _primaryStoryContext_parameters3;
-    const context = _react.useContext(_addondocs.DocsContext);
-    // Get the fluent docs page configuration from context
-    const docsPageConfig = (0, _utils.getDocsPageConfig)(context);
-    const stories = context.componentStories();
-    const primaryStory = stories[0];
-    const primaryStoryContext = context.getStoryContext(primaryStory);
-    assertStoryMetaValues(primaryStory);
-    var _primaryStoryContext_parameters_dir, _ref;
-    const dir = (_ref = (_primaryStoryContext_parameters_dir = (_primaryStoryContext_parameters = primaryStoryContext.parameters) === null || _primaryStoryContext_parameters === void 0 ? void 0 : _primaryStoryContext_parameters.dir) !== null && _primaryStoryContext_parameters_dir !== void 0 ? _primaryStoryContext_parameters_dir : (_primaryStoryContext_globals = primaryStoryContext.globals) === null || _primaryStoryContext_globals === void 0 ? void 0 : _primaryStoryContext_globals[_constants.DIR_ID]) !== null && _ref !== void 0 ? _ref : 'ltr';
-    const selectedTheme = _theme.themes.find((theme)=>theme.id === primaryStoryContext.globals[_constants.THEME_ID]);
-    const hideArgsTable = Boolean((_primaryStoryContext_parameters1 = primaryStoryContext.parameters) === null || _primaryStoryContext_parameters1 === void 0 ? void 0 : (_primaryStoryContext_parameters_docs = _primaryStoryContext_parameters1.docs) === null || _primaryStoryContext_parameters_docs === void 0 ? void 0 : _primaryStoryContext_parameters_docs.hideArgsTable);
-    const skipPrimaryStory = Boolean((_primaryStoryContext_parameters2 = primaryStoryContext.parameters) === null || _primaryStoryContext_parameters2 === void 0 ? void 0 : (_primaryStoryContext_parameters_docs1 = _primaryStoryContext_parameters2.docs) === null || _primaryStoryContext_parameters_docs1 === void 0 ? void 0 : _primaryStoryContext_parameters_docs1.skipPrimaryStory);
-    var _primaryStoryContext_parameters_videos;
-    const videos = (_primaryStoryContext_parameters_videos = (_primaryStoryContext_parameters3 = primaryStoryContext.parameters) === null || _primaryStoryContext_parameters3 === void 0 ? void 0 : _primaryStoryContext_parameters3.videos) !== null && _primaryStoryContext_parameters_videos !== void 0 ? _primaryStoryContext_parameters_videos : null;
-    const styles = useStyles();
-    // If docs page is disabled, return Storybook's default docs page
-    if (!docsPageConfig) {
-        return /*#__PURE__*/ _react.createElement("div", {
-            className: "sb-unstyled"
-        }, /*#__PURE__*/ _react.createElement(_addondocs.Title, null), /*#__PURE__*/ _react.createElement(_addondocs.Subtitle, null), /*#__PURE__*/ _react.createElement(_addondocs.Description, null), /*#__PURE__*/ _react.createElement(RenderPrimaryStory, {
-            primaryStory: primaryStory,
-            skipPrimaryStory: skipPrimaryStory
-        }), /*#__PURE__*/ _react.createElement(RenderArgsTable, {
-            story: primaryStory,
-            hideArgsTable: hideArgsTable
-        }), /*#__PURE__*/ _react.createElement(_addondocs.Stories, null));
-    }
-    // Determine what to show based on configuration
-    const { tableOfContents: showTableOfContents, dirSwitcher: showDirSwitcher, themePicker: showThemePicker, argTable } = docsPageConfig;
-    // DEBUG
-    // console.log('FluentDocsPage', context);
-    // console.table(stories.map((s: StoreItem) => ({ id: s.id, kind: s.kind, name: s.name, story: s.story })));
-    // console.table(
-    //   Object.values((context as any).argTypes).map(arg => ({
-    //     name: arg.name,
-    //     description: arg.description,
-    //     type: arg.table?.type?.summary ?? '?',
-    //     default: arg.table?.defaultValue?.summary ?? '-',
-    //   })),
-    // );
-    return /*#__PURE__*/ _react.createElement("div", {
-        className: "sb-unstyled"
-    }, /*#__PURE__*/ _react.createElement(_addondocs.Title, null), /*#__PURE__*/ _react.createElement("div", {
-        className: styles.wrapper
-    }, /*#__PURE__*/ _react.createElement("div", {
-        className: styles.container
-    }, (showThemePicker || showDirSwitcher) && /*#__PURE__*/ _react.createElement("div", {
-        className: styles.globalTogglesContainer
-    }, showThemePicker && /*#__PURE__*/ _react.createElement(_ThemePicker.ThemePicker, {
-        selectedThemeId: selectedTheme === null || selectedTheme === void 0 ? void 0 : selectedTheme.id
-    }), showDirSwitcher && /*#__PURE__*/ _react.createElement(_DirSwitch.DirSwitch, {
-        dir: dir
-    })), /*#__PURE__*/ _react.createElement(_addondocs.Subtitle, null), /*#__PURE__*/ _react.createElement("div", {
-        className: styles.description
-    }, /*#__PURE__*/ _react.createElement(_addondocs.Description, null), videos && /*#__PURE__*/ _react.createElement(VideoPreviews, {
-        videos: videos
-    })), /*#__PURE__*/ _react.createElement(RenderPrimaryStory, {
-        primaryStory: primaryStory,
-        skipPrimaryStory: skipPrimaryStory
-    }), /*#__PURE__*/ _react.createElement(RenderArgsTable, {
-        story: primaryStory,
-        hideArgsTable: hideArgsTable,
-        showSlotsApi: argTable.slotsApi,
-        showNativePropsApi: argTable.nativePropsApi
-    }), /*#__PURE__*/ _react.createElement(_addondocs.Stories, null)), showTableOfContents && /*#__PURE__*/ _react.createElement("div", {
-        className: styles.toc
-    }, /*#__PURE__*/ _react.createElement(_Toc.Toc, {
-        stories: stories
-    }))));
-};
-function assertStoryMetaValues(story) {
-    if (story.component === null) {
-        throw new Error([
-            '🚨 Invalid Story Meta declaration:',
-            `- primaryStory.component of componentId:${story.componentId} is "null"`,
-            '- 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.'
-        ].join('\n'));
-    }
-}

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

@@ -1 +0,0 @@
-{"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';\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';\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      // If DocGen was already transformed, skip the transformation but set hasArgAsSlot to true so that we can show the info message\n      if (value.includes('Slot')) {\n        hasArgAsSlot = true;\n        return;\n      }\n      // Initial Render Transformation for shorthand slot values (mutates DocGen Object reference)\n      if (value.includes('WithSlotShorthandValue')) {\n        hasArgAsSlot = true;\n        const match = value.match(slotRegex);\n        if (match) {\n          props[key].type.name = `Slot<\\\"${match[1]}\\\">`;\n        } else {\n          props[key].type.name = `Slot`;\n        }\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 = () => {\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    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) && (\n            <div className={styles.globalTogglesContainer}>\n              {showThemePicker && <ThemePicker selectedThemeId={selectedTheme?.id} />}\n              {showDirSwitcher && <DirSwitch dir={dir} />}\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","includes","match","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","argTable","ThemePicker","selectedThemeId","DirSwitch","Toc","Error","componentId","join"],"mappings":"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"}

package/lib-commonjs/docs/ThemePicker.js

@@ -1,70 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "ThemePicker", {
-    enumerable: true,
-    get: function() {
-        return 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 _reactmenu = require("@fluentui/react-menu");
-const _reactbutton = require("@fluentui/react-button");
-const _react1 = require("@griffel/react");
-const _ = require("..");
-const useStyles = (0, _react1.makeStyles)({
-    menuButton: {
-        minWidth: '210px',
-        justifyContent: 'flex-start'
-    },
-    chevronIcon: {
-        marginLeft: 'auto'
-    },
-    menuPopover: {
-        minWidth: '210px'
-    }
-});
-const ThemePicker = ({ selectedThemeId })=>{
-    const styles = useStyles();
-    const [currentThemeId, setCurrentThemeId] = _react.useState(selectedThemeId !== null && selectedThemeId !== void 0 ? selectedThemeId : null);
-    const setGlobalTheme = (themeId)=>{
-        _previewapi.addons.getChannel().emit('updateGlobals', {
-            globals: {
-                [_.THEME_ID]: themeId
-            }
-        });
-    };
-    const onCheckedValueChange = (e, data)=>{
-        const newThemeId = data.checkedItems[0];
-        setGlobalTheme(newThemeId);
-        setCurrentThemeId(newThemeId);
-    };
-    const selectedTheme = _.themes.find((theme)=>theme.id === currentThemeId);
-    var _selectedTheme_label;
-    return /*#__PURE__*/ _react.createElement(_reactmenu.Menu, {
-        // eslint-disable-next-line react/jsx-no-bind
-        onCheckedValueChange: onCheckedValueChange,
-        checkedValues: {
-            theme: selectedThemeId ? [
-                selectedThemeId
-            ] : []
-        },
-        positioning: {
-            autoSize: true
-        }
-    }, /*#__PURE__*/ _react.createElement(_reactmenu.MenuTrigger, null, /*#__PURE__*/ _react.createElement(_reactbutton.MenuButton, {
-        className: styles.menuButton,
-        menuIcon: {
-            className: styles.chevronIcon
-        }
-    }, (_selectedTheme_label = selectedTheme === null || selectedTheme === void 0 ? void 0 : selectedTheme.label) !== null && _selectedTheme_label !== void 0 ? _selectedTheme_label : 'Theme')), /*#__PURE__*/ _react.createElement(_reactmenu.MenuPopover, {
-        className: styles.menuPopover
-    }, /*#__PURE__*/ _react.createElement(_reactmenu.MenuList, null, _.themes.map((theme)=>/*#__PURE__*/ _react.createElement(_reactmenu.MenuItemRadio, {
-            name: "theme",
-            value: theme.id,
-            key: theme.id
-        }, theme.label)))));
-};

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

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