@modern-js/module-tools-docs 2.2.1-beta.1 → 2.3.0

package/doc_build/static/js/async/zh_guide_basic_using-storybook.js

@@ -1,4760 +0,0 @@
-"use strict";
-(self["webpackChunk_modern_js_module_tools_docs"] = self["webpackChunk_modern_js_module_tools_docs"] || []).push([["zh_guide_basic_using-storybook"],{
-
-/***/ "./docs/zh/guide/basic/using-storybook.mdx":
-/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "CH": function() { return /* binding */ CH; },
-/* harmony export */   "chCodeConfig": function() { return /* binding */ chCodeConfig; },
-/* harmony export */   "content": function() { return /* binding */ content; },
-/* harmony export */   "frontmatter": function() { return /* binding */ frontmatter; },
-/* harmony export */   "title": function() { return /* binding */ title; },
-/* harmony export */   "toc": function() { return /* binding */ toc; }
-/* harmony export */ });
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js");
-/* harmony import */ var _code_hike_mdx_dist_components_cjs_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("../../node_modules/.pnpm/@code-hike+mdx@0.7.4_react@18.2.0/node_modules/@code-hike/mdx/dist/components.esm.mjs");
-/*@jsxRuntime automatic @jsxImportSource react*/
-
-
-const CH = {
-  annotations: _code_hike_mdx_dist_components_cjs_js__WEBPACK_IMPORTED_MODULE_1__.annotations,
-  Spotlight: _code_hike_mdx_dist_components_cjs_js__WEBPACK_IMPORTED_MODULE_1__.Spotlight,
-  CodeSlot: _code_hike_mdx_dist_components_cjs_js__WEBPACK_IMPORTED_MODULE_1__.CodeSlot,
-  Code: _code_hike_mdx_dist_components_cjs_js__WEBPACK_IMPORTED_MODULE_1__.Code
-};
-const chCodeConfig = {
-  "staticMediaQuery": "not screen, (max-width: 768px)",
-  "theme": {
-    "name": "nord",
-    "type": "dark",
-    "semanticHighlighting": true,
-    "colors": {
-      "focusBorder": "#3b4252",
-      "foreground": "#d8dee9",
-      "activityBar.background": "#2e3440",
-      "activityBar.dropBackground": "#3b4252",
-      "activityBar.foreground": "#d8dee9",
-      "activityBar.activeBorder": "#88c0d0",
-      "activityBar.activeBackground": "#3b4252",
-      "activityBarBadge.background": "#88c0d0",
-      "activityBarBadge.foreground": "#2e3440",
-      "badge.foreground": "#2e3440",
-      "badge.background": "#88c0d0",
-      "button.background": "#88c0d0ee",
-      "button.foreground": "#2e3440",
-      "button.hoverBackground": "#88c0d0",
-      "button.secondaryBackground": "#434c5e",
-      "button.secondaryForeground": "#d8dee9",
-      "button.secondaryHoverBackground": "#4c566a",
-      "charts.red": "#bf616a",
-      "charts.blue": "#81a1c1",
-      "charts.yellow": "#ebcb8b",
-      "charts.orange": "#d08770",
-      "charts.green": "#a3be8c",
-      "charts.purple": "#b48ead",
-      "charts.foreground": "#d8dee9",
-      "charts.lines": "#88c0d0",
-      "debugConsole.infoForeground": "#88c0d0",
-      "debugConsole.warningForeground": "#ebcb8b",
-      "debugConsole.errorForeground": "#bf616a",
-      "debugConsole.sourceForeground": "#616e88",
-      "debugConsoleInputIcon.foreground": "#81a1c1",
-      "debugExceptionWidget.background": "#4c566a",
-      "debugExceptionWidget.border": "#2e3440",
-      "debugToolBar.background": "#3b4252",
-      "descriptionForeground": "#d8dee9e6",
-      "diffEditor.insertedTextBackground": "#81a1c133",
-      "diffEditor.removedTextBackground": "#bf616a4d",
-      "dropdown.background": "#3b4252",
-      "dropdown.border": "#3b4252",
-      "dropdown.foreground": "#d8dee9",
-      "editorActiveLineNumber.foreground": "#d8dee9cc",
-      "editorCursor.foreground": "#d8dee9",
-      "editorHint.border": "#ebcb8b00",
-      "editorHint.foreground": "#ebcb8b",
-      "editorIndentGuide.background": "#434c5eb3",
-      "editorIndentGuide.activeBackground": "#4c566a",
-      "editorInlayHint.background": "#434c5e",
-      "editorInlayHint.foreground": "#d8dee9",
-      "editorLineNumber.foreground": "#4c566a",
-      "editorLineNumber.activeForeground": "#d8dee9",
-      "editorWhitespace.foreground": "#4c566ab3",
-      "editorWidget.background": "#2e3440",
-      "editorWidget.border": "#3b4252",
-      "editor.background": "#2e3440",
-      "editor.foreground": "#d8dee9",
-      "editor.hoverHighlightBackground": "#3b4252",
-      "editor.findMatchBackground": "#88c0d066",
-      "editor.findMatchHighlightBackground": "#88c0d033",
-      "editor.findRangeHighlightBackground": "#88c0d033",
-      "editor.lineHighlightBackground": "#3b4252",
-      "editor.lineHighlightBorder": "#3b4252",
-      "editor.inactiveSelectionBackground": "#434c5ecc",
-      "editor.inlineValuesBackground": "#4c566a",
-      "editor.inlineValuesForeground": "#eceff4",
-      "editor.selectionBackground": "#434c5ecc",
-      "editor.selectionHighlightBackground": "#434c5ecc",
-      "editor.rangeHighlightBackground": "#434c5e52",
-      "editor.wordHighlightBackground": "#81a1c166",
-      "editor.wordHighlightStrongBackground": "#81a1c199",
-      "editor.stackFrameHighlightBackground": "#5e81ac",
-      "editor.focusedStackFrameHighlightBackground": "#5e81ac",
-      "editorError.foreground": "#bf616a",
-      "editorError.border": "#bf616a00",
-      "editorWarning.foreground": "#ebcb8b",
-      "editorWarning.border": "#ebcb8b00",
-      "editorBracketMatch.background": "#2e344000",
-      "editorBracketMatch.border": "#88c0d0",
-      "editorBracketHighlight.foreground1": "#8fbcbb",
-      "editorBracketHighlight.foreground2": "#88c0d0",
-      "editorBracketHighlight.foreground3": "#81a1c1",
-      "editorBracketHighlight.foreground4": "#5e81ac",
-      "editorBracketHighlight.foreground5": "#8fbcbb",
-      "editorBracketHighlight.foreground6": "#88c0d0",
-      "editorBracketHighlight.unexpectedBracket.foreground": "#bf616a",
-      "editorCodeLens.foreground": "#4c566a",
-      "editorGroup.background": "#2e3440",
-      "editorGroup.border": "#3b425201",
-      "editorGroup.dropBackground": "#3b425299",
-      "editorGroupHeader.border": "#3b425200",
-      "editorGroupHeader.noTabsBackground": "#2e3440",
-      "editorGroupHeader.tabsBackground": "#2e3440",
-      "editorGroupHeader.tabsBorder": "#3b425200",
-      "editorGutter.background": "#2e3440",
-      "editorGutter.modifiedBackground": "#ebcb8b",
-      "editorGutter.addedBackground": "#a3be8c",
-      "editorGutter.deletedBackground": "#bf616a",
-      "editorHoverWidget.background": "#3b4252",
-      "editorHoverWidget.border": "#3b4252",
-      "editorLink.activeForeground": "#88c0d0",
-      "editorMarkerNavigation.background": "#5e81acc0",
-      "editorMarkerNavigationError.background": "#bf616ac0",
-      "editorMarkerNavigationWarning.background": "#ebcb8bc0",
-      "editorOverviewRuler.border": "#3b4252",
-      "editorOverviewRuler.currentContentForeground": "#3b4252",
-      "editorOverviewRuler.incomingContentForeground": "#3b4252",
-      "editorOverviewRuler.findMatchForeground": "#88c0d066",
-      "editorOverviewRuler.rangeHighlightForeground": "#88c0d066",
-      "editorOverviewRuler.selectionHighlightForeground": "#88c0d066",
-      "editorOverviewRuler.wordHighlightForeground": "#88c0d066",
-      "editorOverviewRuler.wordHighlightStrongForeground": "#88c0d066",
-      "editorOverviewRuler.modifiedForeground": "#ebcb8b",
-      "editorOverviewRuler.addedForeground": "#a3be8c",
-      "editorOverviewRuler.deletedForeground": "#bf616a",
-      "editorOverviewRuler.errorForeground": "#bf616a",
-      "editorOverviewRuler.warningForeground": "#ebcb8b",
-      "editorOverviewRuler.infoForeground": "#81a1c1",
-      "editorRuler.foreground": "#434c5e",
-      "editorSuggestWidget.background": "#2e3440",
-      "editorSuggestWidget.border": "#3b4252",
-      "editorSuggestWidget.foreground": "#d8dee9",
-      "editorSuggestWidget.focusHighlightForeground": "#88c0d0",
-      "editorSuggestWidget.highlightForeground": "#88c0d0",
-      "editorSuggestWidget.selectedBackground": "#434c5e",
-      "editorSuggestWidget.selectedForeground": "#d8dee9",
-      "extensionButton.prominentForeground": "#d8dee9",
-      "extensionButton.prominentBackground": "#434c5e",
-      "extensionButton.prominentHoverBackground": "#4c566a",
-      "errorForeground": "#bf616a",
-      "gitDecoration.modifiedResourceForeground": "#ebcb8b",
-      "gitDecoration.deletedResourceForeground": "#bf616a",
-      "gitDecoration.untrackedResourceForeground": "#a3be8c",
-      "gitDecoration.ignoredResourceForeground": "#d8dee966",
-      "gitDecoration.conflictingResourceForeground": "#5e81ac",
-      "gitDecoration.submoduleResourceForeground": "#8fbcbb",
-      "gitDecoration.stageDeletedResourceForeground": "#bf616a",
-      "gitDecoration.stageModifiedResourceForeground": "#ebcb8b",
-      "input.background": "#3b4252",
-      "input.foreground": "#d8dee9",
-      "input.placeholderForeground": "#d8dee999",
-      "input.border": "#3b4252",
-      "inputOption.activeBackground": "#5e81ac",
-      "inputOption.activeBorder": "#5e81ac",
-      "inputOption.activeForeground": "#eceff4",
-      "inputValidation.errorBackground": "#bf616a",
-      "inputValidation.errorBorder": "#bf616a",
-      "inputValidation.infoBackground": "#81a1c1",
-      "inputValidation.infoBorder": "#81a1c1",
-      "inputValidation.warningBackground": "#d08770",
-      "inputValidation.warningBorder": "#d08770",
-      "keybindingLabel.background": "#4c566a",
-      "keybindingLabel.border": "#4c566a",
-      "keybindingLabel.bottomBorder": "#4c566a",
-      "keybindingLabel.foreground": "#d8dee9",
-      "list.activeSelectionBackground": "#88c0d0",
-      "list.activeSelectionForeground": "#2e3440",
-      "list.inactiveSelectionBackground": "#434c5e",
-      "list.inactiveSelectionForeground": "#d8dee9",
-      "list.inactiveFocusBackground": "#434c5ecc",
-      "list.hoverForeground": "#eceff4",
-      "list.focusForeground": "#d8dee9",
-      "list.focusBackground": "#88c0d099",
-      "list.focusHighlightForeground": "#eceff4",
-      "list.hoverBackground": "#3b4252",
-      "list.dropBackground": "#88c0d099",
-      "list.highlightForeground": "#88c0d0",
-      "list.errorForeground": "#bf616a",
-      "list.warningForeground": "#ebcb8b",
-      "merge.currentHeaderBackground": "#81a1c166",
-      "merge.currentContentBackground": "#81a1c14d",
-      "merge.incomingHeaderBackground": "#8fbcbb66",
-      "merge.incomingContentBackground": "#8fbcbb4d",
-      "merge.border": "#3b425200",
-      "minimap.background": "#2e3440",
-      "minimap.errorHighlight": "#bf616acc",
-      "minimap.findMatchHighlight": "#88c0d0",
-      "minimap.selectionHighlight": "#88c0d0cc",
-      "minimap.warningHighlight": "#ebcb8bcc",
-      "minimapGutter.addedBackground": "#a3be8c",
-      "minimapGutter.deletedBackground": "#bf616a",
-      "minimapGutter.modifiedBackground": "#ebcb8b",
-      "minimapSlider.activeBackground": "#434c5eaa",
-      "minimapSlider.background": "#434c5e99",
-      "minimapSlider.hoverBackground": "#434c5eaa",
-      "notification.background": "#3b4252",
-      "notification.buttonBackground": "#434c5e",
-      "notification.buttonForeground": "#d8dee9",
-      "notification.buttonHoverBackground": "#4c566a",
-      "notification.errorBackground": "#bf616a",
-      "notification.errorForeground": "#2e3440",
-      "notification.foreground": "#d8dee9",
-      "notification.infoBackground": "#88c0d0",
-      "notification.infoForeground": "#2e3440",
-      "notification.warningBackground": "#ebcb8b",
-      "notification.warningForeground": "#2e3440",
-      "notificationCenter.border": "#3b425200",
-      "notificationCenterHeader.background": "#2e3440",
-      "notificationCenterHeader.foreground": "#88c0d0",
-      "notificationLink.foreground": "#88c0d0",
-      "notifications.background": "#3b4252",
-      "notifications.border": "#2e3440",
-      "notifications.foreground": "#d8dee9",
-      "notificationToast.border": "#3b425200",
-      "panel.background": "#2e3440",
-      "panel.border": "#3b4252",
-      "panelTitle.activeBorder": "#88c0d000",
-      "panelTitle.activeForeground": "#88c0d0",
-      "panelTitle.inactiveForeground": "#d8dee9",
-      "peekView.border": "#4c566a",
-      "peekViewEditor.background": "#2e3440",
-      "peekViewEditorGutter.background": "#2e3440",
-      "peekViewEditor.matchHighlightBackground": "#88c0d04d",
-      "peekViewResult.background": "#2e3440",
-      "peekViewResult.fileForeground": "#88c0d0",
-      "peekViewResult.lineForeground": "#d8dee966",
-      "peekViewResult.matchHighlightBackground": "#88c0d0cc",
-      "peekViewResult.selectionBackground": "#434c5e",
-      "peekViewResult.selectionForeground": "#d8dee9",
-      "peekViewTitle.background": "#3b4252",
-      "peekViewTitleDescription.foreground": "#d8dee9",
-      "peekViewTitleLabel.foreground": "#88c0d0",
-      "pickerGroup.border": "#3b4252",
-      "pickerGroup.foreground": "#88c0d0",
-      "progressBar.background": "#88c0d0",
-      "quickInputList.focusBackground": "#88c0d0",
-      "quickInputList.focusForeground": "#2e3440",
-      "sash.hoverBorder": "#88c0d0",
-      "scrollbar.shadow": "#00000066",
-      "scrollbarSlider.activeBackground": "#434c5eaa",
-      "scrollbarSlider.background": "#434c5e99",
-      "scrollbarSlider.hoverBackground": "#434c5eaa",
-      "selection.background": "#88c0d099",
-      "sideBar.background": "#2e3440",
-      "sideBar.foreground": "#d8dee9",
-      "sideBar.border": "#3b4252",
-      "sideBarSectionHeader.background": "#3b4252",
-      "sideBarSectionHeader.foreground": "#d8dee9",
-      "sideBarTitle.foreground": "#d8dee9",
-      "statusBar.background": "#3b4252",
-      "statusBar.debuggingBackground": "#5e81ac",
-      "statusBar.debuggingForeground": "#d8dee9",
-      "statusBar.noFolderForeground": "#d8dee9",
-      "statusBar.noFolderBackground": "#3b4252",
-      "statusBar.foreground": "#d8dee9",
-      "statusBarItem.activeBackground": "#4c566a",
-      "statusBarItem.hoverBackground": "#434c5e",
-      "statusBarItem.prominentBackground": "#3b4252",
-      "statusBarItem.prominentHoverBackground": "#434c5e",
-      "statusBarItem.errorBackground": "#3b4252",
-      "statusBarItem.errorForeground": "#bf616a",
-      "statusBarItem.warningBackground": "#ebcb8b",
-      "statusBarItem.warningForeground": "#2e3440",
-      "statusBar.border": "#3b425200",
-      "tab.activeBackground": "#3b4252",
-      "tab.activeForeground": "#d8dee9",
-      "tab.border": "#3b425200",
-      "tab.activeBorder": "#88c0d000",
-      "tab.unfocusedActiveBorder": "#88c0d000",
-      "tab.inactiveBackground": "#2e3440",
-      "tab.inactiveForeground": "#d8dee966",
-      "tab.unfocusedActiveForeground": "#d8dee999",
-      "tab.unfocusedInactiveForeground": "#d8dee966",
-      "tab.hoverBackground": "#3b4252cc",
-      "tab.unfocusedHoverBackground": "#3b4252b3",
-      "tab.hoverBorder": "#88c0d000",
-      "tab.unfocusedHoverBorder": "#88c0d000",
-      "tab.activeBorderTop": "#88c0d000",
-      "tab.unfocusedActiveBorderTop": "#88c0d000",
-      "tab.lastPinnedBorder": "#4c566a",
-      "terminal.background": "#2e3440",
-      "terminal.foreground": "#d8dee9",
-      "terminal.ansiBlack": "#3b4252",
-      "terminal.ansiRed": "#bf616a",
-      "terminal.ansiGreen": "#a3be8c",
-      "terminal.ansiYellow": "#ebcb8b",
-      "terminal.ansiBlue": "#81a1c1",
-      "terminal.ansiMagenta": "#b48ead",
-      "terminal.ansiCyan": "#88c0d0",
-      "terminal.ansiWhite": "#e5e9f0",
-      "terminal.ansiBrightBlack": "#4c566a",
-      "terminal.ansiBrightRed": "#bf616a",
-      "terminal.ansiBrightGreen": "#a3be8c",
-      "terminal.ansiBrightYellow": "#ebcb8b",
-      "terminal.ansiBrightBlue": "#81a1c1",
-      "terminal.ansiBrightMagenta": "#b48ead",
-      "terminal.ansiBrightCyan": "#8fbcbb",
-      "terminal.ansiBrightWhite": "#eceff4",
-      "terminal.tab.activeBorder": "#88c0d0",
-      "textBlockQuote.background": "#3b4252",
-      "textBlockQuote.border": "#81a1c1",
-      "textCodeBlock.background": "#4c566a",
-      "textLink.activeForeground": "#88c0d0",
-      "textLink.foreground": "#88c0d0",
-      "textPreformat.foreground": "#8fbcbb",
-      "textSeparator.foreground": "#eceff4",
-      "titleBar.activeBackground": "#2e3440",
-      "titleBar.activeForeground": "#d8dee9",
-      "titleBar.border": "#2e344000",
-      "titleBar.inactiveBackground": "#2e3440",
-      "titleBar.inactiveForeground": "#d8dee966",
-      "tree.indentGuidesStroke": "#616e88",
-      "walkThrough.embeddedEditorBackground": "#2e3440",
-      "welcomePage.buttonBackground": "#434c5e",
-      "welcomePage.buttonHoverBackground": "#4c566a",
-      "widget.shadow": "#00000066"
-    },
-    "tokenColors": [{
-      "settings": {
-        "foreground": "#d8dee9ff",
-        "background": "#2e3440ff"
-      }
-    }, {
-      "scope": "emphasis",
-      "settings": {
-        "fontStyle": "italic"
-      }
-    }, {
-      "scope": "strong",
-      "settings": {
-        "fontStyle": "bold"
-      }
-    }, {
-      "name": "Comment",
-      "scope": "comment",
-      "settings": {
-        "foreground": "#616E88"
-      }
-    }, {
-      "name": "Constant Character",
-      "scope": "constant.character",
-      "settings": {
-        "foreground": "#EBCB8B"
-      }
-    }, {
-      "name": "Constant Character Escape",
-      "scope": "constant.character.escape",
-      "settings": {
-        "foreground": "#EBCB8B"
-      }
-    }, {
-      "name": "Constant Language",
-      "scope": "constant.language",
-      "settings": {
-        "foreground": "#81A1C1"
-      }
-    }, {
-      "name": "Constant Numeric",
-      "scope": "constant.numeric",
-      "settings": {
-        "foreground": "#B48EAD"
-      }
-    }, {
-      "name": "Constant Regexp",
-      "scope": "constant.regexp",
-      "settings": {
-        "foreground": "#EBCB8B"
-      }
-    }, {
-      "name": "Entity Name Class/Type",
-      "scope": ["entity.name.class", "entity.name.type.class"],
-      "settings": {
-        "foreground": "#8FBCBB"
-      }
-    }, {
-      "name": "Entity Name Function",
-      "scope": "entity.name.function",
-      "settings": {
-        "foreground": "#88C0D0"
-      }
-    }, {
-      "name": "Entity Name Tag",
-      "scope": "entity.name.tag",
-      "settings": {
-        "foreground": "#81A1C1"
-      }
-    }, {
-      "name": "Entity Other Attribute Name",
-      "scope": "entity.other.attribute-name",
-      "settings": {
-        "foreground": "#8FBCBB"
-      }
-    }, {
-      "name": "Entity Other Inherited Class",
-      "scope": "entity.other.inherited-class",
-      "settings": {
-        "fontStyle": "bold",
-        "foreground": "#8FBCBB"
-      }
-    }, {
-      "name": "Invalid Deprecated",
-      "scope": "invalid.deprecated",
-      "settings": {
-        "foreground": "#D8DEE9",
-        "background": "#EBCB8B"
-      }
-    }, {
-      "name": "Invalid Illegal",
-      "scope": "invalid.illegal",
-      "settings": {
-        "foreground": "#D8DEE9",
-        "background": "#BF616A"
-      }
-    }, {
-      "name": "Keyword",
-      "scope": "keyword",
-      "settings": {
-        "foreground": "#81A1C1"
-      }
-    }, {
-      "name": "Keyword Operator",
-      "scope": "keyword.operator",
-      "settings": {
-        "foreground": "#81A1C1"
-      }
-    }, {
-      "name": "Keyword Other New",
-      "scope": "keyword.other.new",
-      "settings": {
-        "foreground": "#81A1C1"
-      }
-    }, {
-      "name": "Markup Bold",
-      "scope": "markup.bold",
-      "settings": {
-        "fontStyle": "bold"
-      }
-    }, {
-      "name": "Markup Changed",
-      "scope": "markup.changed",
-      "settings": {
-        "foreground": "#EBCB8B"
-      }
-    }, {
-      "name": "Markup Deleted",
-      "scope": "markup.deleted",
-      "settings": {
-        "foreground": "#BF616A"
-      }
-    }, {
-      "name": "Markup Inserted",
-      "scope": "markup.inserted",
-      "settings": {
-        "foreground": "#A3BE8C"
-      }
-    }, {
-      "name": "Meta Preprocessor",
-      "scope": "meta.preprocessor",
-      "settings": {
-        "foreground": "#5E81AC"
-      }
-    }, {
-      "name": "Punctuation",
-      "scope": "punctuation",
-      "settings": {
-        "foreground": "#ECEFF4"
-      }
-    }, {
-      "name": "Punctuation Definition Parameters",
-      "scope": ["punctuation.definition.method-parameters", "punctuation.definition.function-parameters", "punctuation.definition.parameters"],
-      "settings": {
-        "foreground": "#ECEFF4"
-      }
-    }, {
-      "name": "Punctuation Definition Tag",
-      "scope": "punctuation.definition.tag",
-      "settings": {
-        "foreground": "#81A1C1"
-      }
-    }, {
-      "name": "Punctuation Definition Comment",
-      "scope": ["punctuation.definition.comment", "punctuation.end.definition.comment", "punctuation.start.definition.comment"],
-      "settings": {
-        "foreground": "#616E88"
-      }
-    }, {
-      "name": "Punctuation Section",
-      "scope": "punctuation.section",
-      "settings": {
-        "foreground": "#ECEFF4"
-      }
-    }, {
-      "name": "Punctuation Section Embedded",
-      "scope": ["punctuation.section.embedded.begin", "punctuation.section.embedded.end"],
-      "settings": {
-        "foreground": "#81A1C1"
-      }
-    }, {
-      "name": "Punctuation Terminator",
-      "scope": "punctuation.terminator",
-      "settings": {
-        "foreground": "#81A1C1"
-      }
-    }, {
-      "name": "Punctuation Variable",
-      "scope": "punctuation.definition.variable",
-      "settings": {
-        "foreground": "#81A1C1"
-      }
-    }, {
-      "name": "Storage",
-      "scope": "storage",
-      "settings": {
-        "foreground": "#81A1C1"
-      }
-    }, {
-      "name": "String",
-      "scope": "string",
-      "settings": {
-        "foreground": "#A3BE8C"
-      }
-    }, {
-      "name": "String Regexp",
-      "scope": "string.regexp",
-      "settings": {
-        "foreground": "#EBCB8B"
-      }
-    }, {
-      "name": "Support Class",
-      "scope": "support.class",
-      "settings": {
-        "foreground": "#8FBCBB"
-      }
-    }, {
-      "name": "Support Constant",
-      "scope": "support.constant",
-      "settings": {
-        "foreground": "#81A1C1"
-      }
-    }, {
-      "name": "Support Function",
-      "scope": "support.function",
-      "settings": {
-        "foreground": "#88C0D0"
-      }
-    }, {
-      "name": "Support Function Construct",
-      "scope": "support.function.construct",
-      "settings": {
-        "foreground": "#81A1C1"
-      }
-    }, {
-      "name": "Support Type",
-      "scope": "support.type",
-      "settings": {
-        "foreground": "#8FBCBB"
-      }
-    }, {
-      "name": "Support Type Exception",
-      "scope": "support.type.exception",
-      "settings": {
-        "foreground": "#8FBCBB"
-      }
-    }, {
-      "name": "Token Debug",
-      "scope": "token.debug-token",
-      "settings": {
-        "foreground": "#b48ead"
-      }
-    }, {
-      "name": "Token Error",
-      "scope": "token.error-token",
-      "settings": {
-        "foreground": "#bf616a"
-      }
-    }, {
-      "name": "Token Info",
-      "scope": "token.info-token",
-      "settings": {
-        "foreground": "#88c0d0"
-      }
-    }, {
-      "name": "Token Warning",
-      "scope": "token.warn-token",
-      "settings": {
-        "foreground": "#ebcb8b"
-      }
-    }, {
-      "name": "Variable",
-      "scope": "variable.other",
-      "settings": {
-        "foreground": "#D8DEE9"
-      }
-    }, {
-      "name": "Variable Language",
-      "scope": "variable.language",
-      "settings": {
-        "foreground": "#81A1C1"
-      }
-    }, {
-      "name": "Variable Parameter",
-      "scope": "variable.parameter",
-      "settings": {
-        "foreground": "#D8DEE9"
-      }
-    }, {
-      "name": "[C/CPP] Punctuation Separator Pointer-Access",
-      "scope": "punctuation.separator.pointer-access.c",
-      "settings": {
-        "foreground": "#81A1C1"
-      }
-    }, {
-      "name": "[C/CPP] Meta Preprocessor Include",
-      "scope": ["source.c meta.preprocessor.include", "source.c string.quoted.other.lt-gt.include"],
-      "settings": {
-        "foreground": "#8FBCBB"
-      }
-    }, {
-      "name": "[C/CPP] Conditional Directive",
-      "scope": ["source.cpp keyword.control.directive.conditional", "source.cpp punctuation.definition.directive", "source.c keyword.control.directive.conditional", "source.c punctuation.definition.directive"],
-      "settings": {
-        "foreground": "#5E81AC",
-        "fontStyle": "bold"
-      }
-    }, {
-      "name": "[CSS] Constant Other Color RGB Value",
-      "scope": "source.css constant.other.color.rgb-value",
-      "settings": {
-        "foreground": "#B48EAD"
-      }
-    }, {
-      "name": "[CSS](Function) Meta Property-Value",
-      "scope": "source.css meta.property-value",
-      "settings": {
-        "foreground": "#88C0D0"
-      }
-    }, {
-      "name": "[CSS] Media Queries",
-      "scope": ["source.css keyword.control.at-rule.media", "source.css keyword.control.at-rule.media punctuation.definition.keyword"],
-      "settings": {
-        "foreground": "#D08770"
-      }
-    }, {
-      "name": "[CSS] Punctuation Definition Keyword",
-      "scope": "source.css punctuation.definition.keyword",
-      "settings": {
-        "foreground": "#81A1C1"
-      }
-    }, {
-      "name": "[CSS] Support Type Property Name",
-      "scope": "source.css support.type.property-name",
-      "settings": {
-        "foreground": "#D8DEE9"
-      }
-    }, {
-      "name": "[diff] Meta Range Context",
-      "scope": "source.diff meta.diff.range.context",
-      "settings": {
-        "foreground": "#8FBCBB"
-      }
-    }, {
-      "name": "[diff] Meta Header From-File",
-      "scope": "source.diff meta.diff.header.from-file",
-      "settings": {
-        "foreground": "#8FBCBB"
-      }
-    }, {
-      "name": "[diff] Punctuation Definition From-File",
-      "scope": "source.diff punctuation.definition.from-file",
-      "settings": {
-        "foreground": "#8FBCBB"
-      }
-    }, {
-      "name": "[diff] Punctuation Definition Range",
-      "scope": "source.diff punctuation.definition.range",
-      "settings": {
-        "foreground": "#8FBCBB"
-      }
-    }, {
-      "name": "[diff] Punctuation Definition Separator",
-      "scope": "source.diff punctuation.definition.separator",
-      "settings": {
-        "foreground": "#81A1C1"
-      }
-    }, {
-      "name": "[Elixir](JakeBecker.elixir-ls) module names",
-      "scope": "entity.name.type.module.elixir",
-      "settings": {
-        "foreground": "#8FBCBB"
-      }
-    }, {
-      "name": "[Elixir](JakeBecker.elixir-ls) module attributes",
-      "scope": "variable.other.readwrite.module.elixir",
-      "settings": {
-        "foreground": "#D8DEE9",
-        "fontStyle": "bold"
-      }
-    }, {
-      "name": "[Elixir](JakeBecker.elixir-ls) atoms",
-      "scope": "constant.other.symbol.elixir",
-      "settings": {
-        "foreground": "#D8DEE9",
-        "fontStyle": "bold"
-      }
-    }, {
-      "name": "[Elixir](JakeBecker.elixir-ls) modules",
-      "scope": "variable.other.constant.elixir",
-      "settings": {
-        "foreground": "#8FBCBB"
-      }
-    }, {
-      "name": "[Go] String Format Placeholder",
-      "scope": "source.go constant.other.placeholder.go",
-      "settings": {
-        "foreground": "#EBCB8B"
-      }
-    }, {
-      "name": "[Java](JavaDoc) Comment Block Documentation HTML Entities",
-      "scope": "source.java comment.block.documentation.javadoc punctuation.definition.entity.html",
-      "settings": {
-        "foreground": "#81A1C1"
-      }
-    }, {
-      "name": "[Java](JavaDoc) Constant Other",
-      "scope": "source.java constant.other",
-      "settings": {
-        "foreground": "#D8DEE9"
-      }
-    }, {
-      "name": "[Java](JavaDoc) Keyword Other Documentation",
-      "scope": "source.java keyword.other.documentation",
-      "settings": {
-        "foreground": "#8FBCBB"
-      }
-    }, {
-      "name": "[Java](JavaDoc) Keyword Other Documentation Author",
-      "scope": "source.java keyword.other.documentation.author.javadoc",
-      "settings": {
-        "foreground": "#8FBCBB"
-      }
-    }, {
-      "name": "[Java](JavaDoc) Keyword Other Documentation Directive/Custom",
-      "scope": ["source.java keyword.other.documentation.directive", "source.java keyword.other.documentation.custom"],
-      "settings": {
-        "foreground": "#8FBCBB"
-      }
-    }, {
-      "name": "[Java](JavaDoc) Keyword Other Documentation See",
-      "scope": "source.java keyword.other.documentation.see.javadoc",
-      "settings": {
-        "foreground": "#8FBCBB"
-      }
-    }, {
-      "name": "[Java] Meta Method-Call",
-      "scope": "source.java meta.method-call meta.method",
-      "settings": {
-        "foreground": "#88C0D0"
-      }
-    }, {
-      "name": "[Java](JavaDoc) Meta Tag Template Link",
-      "scope": ["source.java meta.tag.template.link.javadoc", "source.java string.other.link.title.javadoc"],
-      "settings": {
-        "foreground": "#8FBCBB"
-      }
-    }, {
-      "name": "[Java](JavaDoc) Meta Tag Template Value",
-      "scope": "source.java meta.tag.template.value.javadoc",
-      "settings": {
-        "foreground": "#88C0D0"
-      }
-    }, {
-      "name": "[Java](JavaDoc) Punctuation Definition Keyword",
-      "scope": "source.java punctuation.definition.keyword.javadoc",
-      "settings": {
-        "foreground": "#8FBCBB"
-      }
-    }, {
-      "name": "[Java](JavaDoc) Punctuation Definition Tag",
-      "scope": ["source.java punctuation.definition.tag.begin.javadoc", "source.java punctuation.definition.tag.end.javadoc"],
-      "settings": {
-        "foreground": "#616E88"
-      }
-    }, {
-      "name": "[Java] Storage Modifier Import",
-      "scope": "source.java storage.modifier.import",
-      "settings": {
-        "foreground": "#8FBCBB"
-      }
-    }, {
-      "name": "[Java] Storage Modifier Package",
-      "scope": "source.java storage.modifier.package",
-      "settings": {
-        "foreground": "#8FBCBB"
-      }
-    }, {
-      "name": "[Java] Storage Type",
-      "scope": "source.java storage.type",
-      "settings": {
-        "foreground": "#8FBCBB"
-      }
-    }, {
-      "name": "[Java] Storage Type Annotation",
-      "scope": "source.java storage.type.annotation",
-      "settings": {
-        "foreground": "#D08770"
-      }
-    }, {
-      "name": "[Java] Storage Type Generic",
-      "scope": "source.java storage.type.generic",
-      "settings": {
-        "foreground": "#8FBCBB"
-      }
-    }, {
-      "name": "[Java] Storage Type Primitive",
-      "scope": "source.java storage.type.primitive",
-      "settings": {
-        "foreground": "#81A1C1"
-      }
-    }, {
-      "name": "[JavaScript] Decorator",
-      "scope": ["source.js punctuation.decorator", "source.js meta.decorator variable.other.readwrite", "source.js meta.decorator entity.name.function"],
-      "settings": {
-        "foreground": "#D08770"
-      }
-    }, {
-      "name": "[JavaScript] Meta Object-Literal Key",
-      "scope": "source.js meta.object-literal.key",
-      "settings": {
-        "foreground": "#88C0D0"
-      }
-    }, {
-      "name": "[JavaScript](JSDoc) Storage Type Class",
-      "scope": "source.js storage.type.class.jsdoc",
-      "settings": {
-        "foreground": "#8FBCBB"
-      }
-    }, {
-      "name": "[JavaScript] String Template Literals Punctuation",
-      "scope": ["source.js string.quoted.template punctuation.quasi.element.begin", "source.js string.quoted.template punctuation.quasi.element.end", "source.js string.template punctuation.definition.template-expression"],
-      "settings": {
-        "foreground": "#81A1C1"
-      }
-    }, {
-      "name": "[JavaScript] Interpolated String Template Punctuation Functions",
-      "scope": "source.js string.quoted.template meta.method-call.with-arguments",
-      "settings": {
-        "foreground": "#ECEFF4"
-      }
-    }, {
-      "name": "[JavaScript] String Template Literal Variable",
-      "scope": ["source.js string.template meta.template.expression support.variable.property", "source.js string.template meta.template.expression variable.other.object"],
-      "settings": {
-        "foreground": "#D8DEE9"
-      }
-    }, {
-      "name": "[JavaScript] Support Type Primitive",
-      "scope": "source.js support.type.primitive",
-      "settings": {
-        "foreground": "#81A1C1"
-      }
-    }, {
-      "name": "[JavaScript] Variable Other Object",
-      "scope": "source.js variable.other.object",
-      "settings": {
-        "foreground": "#D8DEE9"
-      }
-    }, {
-      "name": "[JavaScript] Variable Other Read-Write Alias",
-      "scope": "source.js variable.other.readwrite.alias",
-      "settings": {
-        "foreground": "#8FBCBB"
-      }
-    }, {
-      "name": "[JavaScript] Parentheses in Template Strings",
-      "scope": ["source.js meta.embedded.line meta.brace.square", "source.js meta.embedded.line meta.brace.round", "source.js string.quoted.template meta.brace.square", "source.js string.quoted.template meta.brace.round"],
-      "settings": {
-        "foreground": "#ECEFF4"
-      }
-    }, {
-      "name": "[HTML] Constant Character Entity",
-      "scope": "text.html.basic constant.character.entity.html",
-      "settings": {
-        "foreground": "#EBCB8B"
-      }
-    }, {
-      "name": "[HTML] Constant Other Inline-Data",
-      "scope": "text.html.basic constant.other.inline-data",
-      "settings": {
-        "foreground": "#D08770",
-        "fontStyle": "italic"
-      }
-    }, {
-      "name": "[HTML] Meta Tag SGML Doctype",
-      "scope": "text.html.basic meta.tag.sgml.doctype",
-      "settings": {
-        "foreground": "#5E81AC"
-      }
-    }, {
-      "name": "[HTML] Punctuation Definition Entity",
-      "scope": "text.html.basic punctuation.definition.entity",
-      "settings": {
-        "foreground": "#81A1C1"
-      }
-    }, {
-      "name": "[INI] Entity Name Section Group-Title",
-      "scope": "source.properties entity.name.section.group-title.ini",
-      "settings": {
-        "foreground": "#88C0D0"
-      }
-    }, {
-      "name": "[INI] Punctuation Separator Key-Value",
-      "scope": "source.properties punctuation.separator.key-value.ini",
-      "settings": {
-        "foreground": "#81A1C1"
-      }
-    }, {
-      "name": "[Markdown] Markup Fenced Code Block",
-      "scope": ["text.html.markdown markup.fenced_code.block", "text.html.markdown markup.fenced_code.block punctuation.definition"],
-      "settings": {
-        "foreground": "#8FBCBB"
-      }
-    }, {
-      "name": "[Markdown] Markup Heading",
-      "scope": "markup.heading",
-      "settings": {
-        "foreground": "#88C0D0"
-      }
-    }, {
-      "name": "[Markdown] Markup Inline",
-      "scope": ["text.html.markdown markup.inline.raw", "text.html.markdown markup.inline.raw punctuation.definition.raw"],
-      "settings": {
-        "foreground": "#8FBCBB"
-      }
-    }, {
-      "name": "[Markdown] Markup Italic",
-      "scope": "text.html.markdown markup.italic",
-      "settings": {
-        "fontStyle": "italic"
-      }
-    }, {
-      "name": "[Markdown] Markup Link",
-      "scope": "text.html.markdown markup.underline.link",
-      "settings": {
-        "fontStyle": "underline"
-      }
-    }, {
-      "name": "[Markdown] Markup List Numbered/Unnumbered",
-      "scope": "text.html.markdown beginning.punctuation.definition.list",
-      "settings": {
-        "foreground": "#81A1C1"
-      }
-    }, {
-      "name": "[Markdown] Markup Quote Punctuation Definition",
-      "scope": "text.html.markdown beginning.punctuation.definition.quote",
-      "settings": {
-        "foreground": "#8FBCBB"
-      }
-    }, {
-      "name": "[Markdown] Markup Quote Punctuation Definition",
-      "scope": "text.html.markdown markup.quote",
-      "settings": {
-        "foreground": "#616E88"
-      }
-    }, {
-      "name": "[Markdown] Markup Math Constant",
-      "scope": "text.html.markdown constant.character.math.tex",
-      "settings": {
-        "foreground": "#81A1C1"
-      }
-    }, {
-      "name": "[Markdown] Markup Math Definition Marker",
-      "scope": ["text.html.markdown punctuation.definition.math.begin", "text.html.markdown punctuation.definition.math.end"],
-      "settings": {
-        "foreground": "#5E81AC"
-      }
-    }, {
-      "name": "[Markdown] Markup Math Function Definition Marker",
-      "scope": "text.html.markdown punctuation.definition.function.math.tex",
-      "settings": {
-        "foreground": "#88C0D0"
-      }
-    }, {
-      "name": "[Markdown] Markup Math Operator",
-      "scope": "text.html.markdown punctuation.math.operator.latex",
-      "settings": {
-        "foreground": "#81A1C1"
-      }
-    }, {
-      "name": "[Markdown] Punctuation Definition Heading",
-      "scope": "text.html.markdown punctuation.definition.heading",
-      "settings": {
-        "foreground": "#81A1C1"
-      }
-    }, {
-      "name": "[Markdown] Punctuation Definition Constant/String",
-      "scope": ["text.html.markdown punctuation.definition.constant", "text.html.markdown punctuation.definition.string"],
-      "settings": {
-        "foreground": "#81A1C1"
-      }
-    }, {
-      "name": "[Markdown] String Other Link Description/Title",
-      "scope": ["text.html.markdown constant.other.reference.link", "text.html.markdown string.other.link.description", "text.html.markdown string.other.link.title"],
-      "settings": {
-        "foreground": "#88C0D0"
-      }
-    }, {
-      "name": "[Perl] Perl Sigils",
-      "scope": "source.perl punctuation.definition.variable",
-      "settings": {
-        "foreground": "#D8DEE9"
-      }
-    }, {
-      "name": "[PHP] Meta Function-Call Object",
-      "scope": ["source.php meta.function-call", "source.php meta.function-call.object"],
-      "settings": {
-        "foreground": "#88C0D0"
-      }
-    }, {
-      "name": "[Python] Decorator",
-      "scope": ["source.python entity.name.function.decorator", "source.python meta.function.decorator support.type"],
-      "settings": {
-        "foreground": "#D08770"
-      }
-    }, {
-      "name": "[Python] Function Call",
-      "scope": "source.python meta.function-call.generic",
-      "settings": {
-        "foreground": "#88C0D0"
-      }
-    }, {
-      "name": "[Python] Support Type",
-      "scope": "source.python support.type",
-      "settings": {
-        "foreground": "#88C0D0"
-      }
-    }, {
-      "name": "[Python] Function Parameter",
-      "scope": ["source.python variable.parameter.function.language"],
-      "settings": {
-        "foreground": "#D8DEE9"
-      }
-    }, {
-      "name": "[Python] Function Parameter Special",
-      "scope": ["source.python meta.function.parameters variable.parameter.function.language.special.self"],
-      "settings": {
-        "foreground": "#81A1C1"
-      }
-    }, {
-      "name": "[Rust] Entity types",
-      "scope": "source.rust entity.name.type",
-      "settings": {
-        "foreground": "#8FBCBB"
-      }
-    }, {
-      "name": "[Rust] Macro",
-      "scope": "source.rust meta.macro entity.name.function",
-      "settings": {
-        "fontStyle": "bold",
-        "foreground": "#88C0D0"
-      }
-    }, {
-      "name": "[Rust] Attributes",
-      "scope": ["source.rust meta.attribute", "source.rust meta.attribute punctuation", "source.rust meta.attribute keyword.operator"],
-      "settings": {
-        "foreground": "#5E81AC"
-      }
-    }, {
-      "name": "[Rust] Traits",
-      "scope": "source.rust entity.name.type.trait",
-      "settings": {
-        "fontStyle": "bold"
-      }
-    }, {
-      "name": "[Rust] Interpolation Bracket Curly",
-      "scope": "source.rust punctuation.definition.interpolation",
-      "settings": {
-        "foreground": "#EBCB8B"
-      }
-    }, {
-      "name": "[SCSS] Punctuation Definition Interpolation Bracket Curly",
-      "scope": ["source.css.scss punctuation.definition.interpolation.begin.bracket.curly", "source.css.scss punctuation.definition.interpolation.end.bracket.curly"],
-      "settings": {
-        "foreground": "#81A1C1"
-      }
-    }, {
-      "name": "[SCSS] Variable Interpolation",
-      "scope": "source.css.scss variable.interpolation",
-      "settings": {
-        "foreground": "#D8DEE9",
-        "fontStyle": "italic"
-      }
-    }, {
-      "name": "[TypeScript] Decorators",
-      "scope": ["source.ts punctuation.decorator", "source.ts meta.decorator variable.other.readwrite", "source.ts meta.decorator entity.name.function", "source.tsx punctuation.decorator", "source.tsx meta.decorator variable.other.readwrite", "source.tsx meta.decorator entity.name.function"],
-      "settings": {
-        "foreground": "#D08770"
-      }
-    }, {
-      "name": "[TypeScript] Object-literal keys",
-      "scope": ["source.ts meta.object-literal.key", "source.tsx meta.object-literal.key"],
-      "settings": {
-        "foreground": "#D8DEE9"
-      }
-    }, {
-      "name": "[TypeScript] Object-literal functions",
-      "scope": ["source.ts meta.object-literal.key entity.name.function", "source.tsx meta.object-literal.key entity.name.function"],
-      "settings": {
-        "foreground": "#88C0D0"
-      }
-    }, {
-      "name": "[TypeScript] Type/Class",
-      "scope": ["source.ts support.class", "source.ts support.type", "source.ts entity.name.type", "source.ts entity.name.class", "source.tsx support.class", "source.tsx support.type", "source.tsx entity.name.type", "source.tsx entity.name.class"],
-      "settings": {
-        "foreground": "#8FBCBB"
-      }
-    }, {
-      "name": "[TypeScript] Static Class Support",
-      "scope": ["source.ts support.constant.math", "source.ts support.constant.dom", "source.ts support.constant.json", "source.tsx support.constant.math", "source.tsx support.constant.dom", "source.tsx support.constant.json"],
-      "settings": {
-        "foreground": "#8FBCBB"
-      }
-    }, {
-      "name": "[TypeScript] Variables",
-      "scope": ["source.ts support.variable", "source.tsx support.variable"],
-      "settings": {
-        "foreground": "#D8DEE9"
-      }
-    }, {
-      "name": "[TypeScript] Parentheses in Template Strings",
-      "scope": ["source.ts meta.embedded.line meta.brace.square", "source.ts meta.embedded.line meta.brace.round", "source.tsx meta.embedded.line meta.brace.square", "source.tsx meta.embedded.line meta.brace.round"],
-      "settings": {
-        "foreground": "#ECEFF4"
-      }
-    }, {
-      "name": "[XML] Entity Name Tag Namespace",
-      "scope": "text.xml entity.name.tag.namespace",
-      "settings": {
-        "foreground": "#8FBCBB"
-      }
-    }, {
-      "name": "[XML] Keyword Other Doctype",
-      "scope": "text.xml keyword.other.doctype",
-      "settings": {
-        "foreground": "#5E81AC"
-      }
-    }, {
-      "name": "[XML] Meta Tag Preprocessor",
-      "scope": "text.xml meta.tag.preprocessor entity.name.tag",
-      "settings": {
-        "foreground": "#5E81AC"
-      }
-    }, {
-      "name": "[XML] Entity Name Tag Namespace",
-      "scope": ["text.xml string.unquoted.cdata", "text.xml string.unquoted.cdata punctuation.definition.string"],
-      "settings": {
-        "foreground": "#D08770",
-        "fontStyle": "italic"
-      }
-    }, {
-      "name": "[YAML] Entity Name Tag",
-      "scope": "source.yaml entity.name.tag",
-      "settings": {
-        "foreground": "#8FBCBB"
-      }
-    }]
-  },
-  "autoImport": true,
-  "showCopyButton": true,
-  "skipLanguages": [],
-  "filepath": "/Users/bytedance/github/targeral/modern-dev/website/module-tools/docs/zh/guide/basic/using-storybook.mdx"
-};
-const frontmatter = {
-  "sidebar_position": 5
-};
-const toc = [{
-  "id": "调试代码",
-  "text": "调试代码",
-  "depth": 2
-}, {
-  "id": "引用组件产物",
-  "text": "引用组件产物",
-  "depth": 3
-}, {
-  "id": "引用组件源码",
-  "text": "引用组件源码",
-  "depth": 3
-}, {
-  "id": "配置-storybook",
-  "text": "配置 Storybook",
-  "depth": 2
-}, {
-  "id": "构建-storybook-产物",
-  "text": "构建 Storybook 产物",
-  "depth": 2
-}];
-const title = `使用 Storybook`;
-const content = "\"---\\nsidebar_position: 5\\n---\\n\\n# 使用 Storybook\\n\\n首先如果没有看过以下内容的话，可以先花几分钟先了解一下：\\n\\n- [使用微生成器开启 Storybook 调试](/guide/basic/use-micro-generator#storybook-调试)\\n- [`modern dev`](/guide/basic/command-preview#modern-dev)\\n\\n[Storybook](https://storybook.js.org/) 是一个专门用于组件调试的工具，围绕着组件开发提供了：\\n\\n- 丰富多样的调试能力\\n- 可与一些测试工具结合使用\\n- 可重复使用的文档内容\\n- 可分享能力\\n- 工作流程自动化\\n\\n因此它是一个复杂且功能强大的工具。\\n\\n模块工程解决方案集成了 Storybook，因此你几乎可以按照 Storybook 官方文档的内容进行使用。不过依然有一些地方需要注意，接下来讲解一下。\\n\\n## 调试代码\\n\\n在调试代码过程中需要引入项目代码，目前可以通过两种方式引入项目代码：\\n\\n- 引用项目产物\\n- 引用项目源码\\n\\n我们更推荐使用第一种“**引用项目产物**”的方式。因为它更接近真实的使用场景，不仅可以对组件功能进行调试，同时也对构建产物的正确性进行了验证。\\n\\n接下来我们分别讲一下这两种方式具体如何使用。\\n\\n### 引用组件产物\\n\\n假如存在 TypeScript 项目 `foo`：\\n\\n<CH.Spotlight>\\n\\n```json package.json\\n{\\n  \\\"name\\\": \\\"foo\\\",\\n  \\\"main\\\": \\\"./dist/index.js\\\",\\n  \\\"types\\\": \\\"./dist/types/index.d.ts\\\"\\n}\\n```\\n\\n---\\n\\n确保 `package.json` 的 `main` 和 `types`\\n的值为正确的产物路径。\\n\\n```json package.json\\n{\\n  \\\"name\\\": \\\"foo\\\",\\n  \\\"main\\\": \\\"./dist/index.js\\\",\\n  \\\"types\\\": \\\"./dist/types/index.d.ts\\\"\\n}\\n```\\n\\n---\\n\\n`foo` 项目的源码。\\n\\n```typescript src/index.ts\\nexport const content = 'hello world';\\n```\\n\\n---\\n\\n确保在 `stories/tsconfig.json` 中设置了指向项目根目录的 `paths` 配置。\\n`paths` 的 `key` 与项目名称相同，这样在编译过程中以及在代码中不会出现问题。\\n\\n```json stories/tsconfig.json focus=5:7\\n{\\n  \\\"extends\\\": \\\"../tsconfig.json\\\",\\n  \\\"compilerOptions\\\": {\\n    \\\"baseUrl\\\": \\\"../\\\",\\n    \\\"paths\\\": {\\n      \\\"foo\\\": [\\\".\\\"],\\n      \\\"foo/*\\\": [\\\"./*\\\"]\\n    }\\n  },\\n  \\\"include\\\": [\\n    \\\"**/*\\\"\\n  ]\\n}\\n```\\n\\n---\\n\\n最后在 Story 代码中直接以项目名称的方式引用。\\n\\n```tsx stories/index.stories.tsx focus=1:1\\nimport { content } from 'foo';\\n\\nconst Component = () => <div>this is a Story Component {content}</div>;\\n\\nexport const YourStory = () => <Component />;\\n\\nexport default {\\n  title: 'Your Stories',\\n};\\n```\\n\\n</CH.Spotlight>\\n\\n:::info\\n在开发过程中，可能会遇到无法实时获得类型定义的情况。因为只有当保存代码后，产物目录下的类型文件才会更新。此时：\\n\\n对于 `pnpm` 的项目，可以按照下面的内容对 `package.json` 进行修改：\\n\\n```ts focus=4:7\\n{\\n    \\\"name\\\": \\\"foo\\\",\\n    \\\"main\\\": \\\"./dist/index.js\\\",\\n    \\\"types\\\": \\\"./src/index.ts\\\",\\n    \\\"publishConfig\\\": {\\n      \\\"types\\\": \\\"./dist/index.d.ts\\\",\\n    }\\n}\\n```\\n\\n> 关于 pnpm 的 `publishConfig` 的使用，可以阅读下面这个[链接](https://pnpm.io/package_json#publishconfig)。\\n\\n而对于 npm 和 Yarn 的项目，则只能通过手动的方式在**开发阶段**和**发布阶段**对 `package.json` 的 `types` 的值进行修改。\\n:::\\n\\n那么为什么可以直接引用产物呢？\\n\\n1. 在执行 `modern dev storybook` 命令之前，会自动执行 `modern build` 命令，保证项目构建产物的存在。\\n2. 在 Storybook 内部增加了针对 `tsconfig.json` 文件或者以项目名称作为别名的处理，保证能够**根据 `package.json` 解析出项目的产物路径**。\\n\\n### 引用组件源码\\n\\n引用组件的源码可以通过相对路径的方式：\\n\\n```ts ./stories/index.tsx\\nimport { content } from '../src';\\n\\nconst Component = () => <div>this is a Story Component {content}</div>;\\n\\nexport const YourStory = () => <Component />;\\n\\nexport default {\\n  title: 'Your Stories',\\n};\\n```\\n\\n那么为什么不推荐使用源码的方式呢？\\n\\n不仅仅是因为使用组件源码无法验证组件产物是否正确，**同时模块工程对于构建产物支持的一些配置无法完全转换为 Storybook\\n内部的配置**。如果某些配置无法进行相互转换的话，就会在 Storybook 调试过程中出现不符合预期的结果。\\n\\n## 配置 Storybook\\n\\nStorybook 官方通过一个名为 `.storybook` 的文件夹来进行项目配置，其中包含各种配置文件。**在模块工程方案中，可以在项目的 `config/storybook` 目录下增加 Storybook 配置文件。**\\n\\n关于 Storybook 各种配置文件的使用方式，可以查看下面的链接：\\n\\n- [Configure Storybook](https://storybook.js.org/docs/react/configure/overview)\\n\\n**不过在模块项目里进行 Storybook 存在一些限制**：\\n\\n- 目前不能修改 Story 文件存放的位置，即无法在 `main.js` 文件里修改 `stories` 配置。\\n- 目前不能修改 Webpack 和 Babel 相关的配置，即无法在 `main.js` 文件里修改 `webpackFinal` 和 `babel` 配置。\\n\\n在未来我们会考虑这些配置是否可以允许修改，不过目前为了减少不可预知的问题暂时限制使用这些配置。\\n\\n\\n## 构建 Storybook 产物\\n\\n除了可以对组件或者普通的模块进行 Storybook 调试，还可以通过下面的命令来执行 Storybook 的构建任务。\\n\\n```bash\\nmodern build --platform storybook\\n```\\n\\n关于 `modern build --platform` 命令可以查看：\\n\\n- [`modern build`](/guide/basic/command-preview#modern-build)\\n\\n构建完成后，可以在 `dist/storybook-static` 目录看到构建产物文件。\\n\"";
-function _createMdxContent(props) {
-  const _components = Object.assign({
-    h1: "h1",
-    a: "a",
-    p: "p",
-    ul: "ul",
-    li: "li",
-    code: "code",
-    h2: "h2",
-    strong: "strong",
-    h3: "h3",
-    div: "div",
-    blockquote: "blockquote",
-    ol: "ol"
-  }, props.components);
-  if (!CH) _missingMdxReference("CH", false, "39:1-107:16");
-  if (!CH.Code) _missingMdxReference("CH.Code", true, "114:1-123:4");
-  if (!CH.CodeSlot) _missingMdxReference("CH.CodeSlot", true);
-  if (!CH.Spotlight) _missingMdxReference("CH.Spotlight", true, "39:1-107:16");
-  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
-    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.h1, {
-      id: "使用-storybook",
-      children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-        className: "header-anchor",
-        "aria-hidden": "true",
-        href: "#使用-storybook",
-        children: "#"
-      }), "使用 Storybook"]
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
-      children: "首先如果没有看过以下内容的话，可以先花几分钟先了解一下："
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.ul, {
-      children: ["\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.li, {
-        children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-          href: "/module-tools/guide/basic/use-micro-generator.html#storybook-%E8%B0%83%E8%AF%95",
-          children: "使用微生成器开启 Storybook 调试"
-        })
-      }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.li, {
-        children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-          href: "/module-tools/guide/basic/command-preview.html#modern-dev",
-          children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-            children: "modern dev"
-          })
-        })
-      }), "\n"]
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
-      children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-        href: "https://storybook.js.org/",
-        target: "_blank",
-        rel: "nofollow",
-        children: "Storybook"
-      }), " 是一个专门用于组件调试的工具，围绕着组件开发提供了："]
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.ul, {
-      children: ["\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.li, {
-        children: "丰富多样的调试能力"
-      }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.li, {
-        children: "可与一些测试工具结合使用"
-      }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.li, {
-        children: "可重复使用的文档内容"
-      }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.li, {
-        children: "可分享能力"
-      }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.li, {
-        children: "工作流程自动化"
-      }), "\n"]
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
-      children: "因此它是一个复杂且功能强大的工具。"
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
-      children: "模块工程解决方案集成了 Storybook，因此你几乎可以按照 Storybook 官方文档的内容进行使用。不过依然有一些地方需要注意，接下来讲解一下。"
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.h2, {
-      id: "调试代码",
-      children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-        className: "header-anchor",
-        "aria-hidden": "true",
-        href: "#调试代码",
-        children: "#"
-      }), "调试代码"]
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
-      children: "在调试代码过程中需要引入项目代码，目前可以通过两种方式引入项目代码："
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.ul, {
-      children: ["\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.li, {
-        children: "引用项目产物"
-      }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.li, {
-        children: "引用项目源码"
-      }), "\n"]
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
-      children: ["我们更推荐使用第一种“", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.strong, {
-        children: "引用项目产物"
-      }), "”的方式。因为它更接近真实的使用场景，不仅可以对组件功能进行调试，同时也对构建产物的正确性进行了验证。"]
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
-      children: "接下来我们分别讲一下这两种方式具体如何使用。"
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.h3, {
-      id: "引用组件产物",
-      children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-        className: "header-anchor",
-        "aria-hidden": "true",
-        href: "#引用组件产物",
-        children: "#"
-      }), "引用组件产物"]
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
-      children: ["假如存在 TypeScript 项目 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-        children: "foo"
-      }), "："]
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(CH.Spotlight, {
-      codeConfig: chCodeConfig,
-      editorSteps: [{
-        "northPanel": {
-          "tabs": ["package.json"],
-          "active": "package.json",
-          "heightRatio": 1
-        },
-        "files": [{
-          "name": "package.json",
-          "focus": "",
-          "code": {
-            "lines": [{
-              "tokens": [{
-                "content": "{",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }]
-            }, {
-              "tokens": [{
-                "content": "  ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "name",
-                "props": {
-                  "style": {
-                    "color": "#8FBCBB"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": ":",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "foo",
-                "props": {
-                  "style": {
-                    "color": "#A3BE8C"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": ",",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }]
-            }, {
-              "tokens": [{
-                "content": "  ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "main",
-                "props": {
-                  "style": {
-                    "color": "#8FBCBB"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": ":",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "./dist/index.js",
-                "props": {
-                  "style": {
-                    "color": "#A3BE8C"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": ",",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }]
-            }, {
-              "tokens": [{
-                "content": "  ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "types",
-                "props": {
-                  "style": {
-                    "color": "#8FBCBB"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": ":",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "./dist/types/index.d.ts",
-                "props": {
-                  "style": {
-                    "color": "#A3BE8C"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }]
-            }, {
-              "tokens": [{
-                "content": "}",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }]
-            }],
-            "lang": "json"
-          },
-          "annotations": []
-        }]
-      }, {
-        "northPanel": {
-          "tabs": ["package.json"],
-          "active": "package.json",
-          "heightRatio": 1
-        },
-        "files": [{
-          "name": "package.json",
-          "focus": "",
-          "code": {
-            "lines": [{
-              "tokens": [{
-                "content": "{",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }]
-            }, {
-              "tokens": [{
-                "content": "  ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "name",
-                "props": {
-                  "style": {
-                    "color": "#8FBCBB"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": ":",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "foo",
-                "props": {
-                  "style": {
-                    "color": "#A3BE8C"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": ",",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }]
-            }, {
-              "tokens": [{
-                "content": "  ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "main",
-                "props": {
-                  "style": {
-                    "color": "#8FBCBB"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": ":",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "./dist/index.js",
-                "props": {
-                  "style": {
-                    "color": "#A3BE8C"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": ",",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }]
-            }, {
-              "tokens": [{
-                "content": "  ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "types",
-                "props": {
-                  "style": {
-                    "color": "#8FBCBB"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": ":",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "./dist/types/index.d.ts",
-                "props": {
-                  "style": {
-                    "color": "#A3BE8C"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }]
-            }, {
-              "tokens": [{
-                "content": "}",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }]
-            }],
-            "lang": "json"
-          },
-          "annotations": []
-        }],
-        "southPanel": undefined
-      }, {
-        "northPanel": {
-          "tabs": ["package.json", "src/index.ts"],
-          "active": "src/index.ts",
-          "heightRatio": 1
-        },
-        "files": [{
-          "name": "package.json",
-          "focus": "",
-          "code": {
-            "lines": [{
-              "tokens": [{
-                "content": "{",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }]
-            }, {
-              "tokens": [{
-                "content": "  ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "name",
-                "props": {
-                  "style": {
-                    "color": "#8FBCBB"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": ":",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "foo",
-                "props": {
-                  "style": {
-                    "color": "#A3BE8C"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": ",",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }]
-            }, {
-              "tokens": [{
-                "content": "  ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "main",
-                "props": {
-                  "style": {
-                    "color": "#8FBCBB"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": ":",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "./dist/index.js",
-                "props": {
-                  "style": {
-                    "color": "#A3BE8C"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": ",",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }]
-            }, {
-              "tokens": [{
-                "content": "  ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "types",
-                "props": {
-                  "style": {
-                    "color": "#8FBCBB"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": ":",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "./dist/types/index.d.ts",
-                "props": {
-                  "style": {
-                    "color": "#A3BE8C"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }]
-            }, {
-              "tokens": [{
-                "content": "}",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }]
-            }],
-            "lang": "json"
-          },
-          "annotations": []
-        }, {
-          "name": "src/index.ts",
-          "focus": "",
-          "code": {
-            "lines": [{
-              "tokens": [{
-                "content": "export",
-                "props": {
-                  "style": {
-                    "color": "#81A1C1"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "const",
-                "props": {
-                  "style": {
-                    "color": "#81A1C1"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "content",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "=",
-                "props": {
-                  "style": {
-                    "color": "#81A1C1"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "'",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "hello world",
-                "props": {
-                  "style": {
-                    "color": "#A3BE8C"
-                  }
-                }
-              }, {
-                "content": "'",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": ";",
-                "props": {
-                  "style": {
-                    "color": "#81A1C1"
-                  }
-                }
-              }]
-            }],
-            "lang": "typescript"
-          },
-          "annotations": []
-        }],
-        "southPanel": undefined
-      }, {
-        "northPanel": {
-          "tabs": ["package.json", "stories/tsconfig.json"],
-          "active": "stories/tsconfig.json",
-          "heightRatio": 1
-        },
-        "files": [{
-          "name": "package.json",
-          "focus": "",
-          "code": {
-            "lines": [{
-              "tokens": [{
-                "content": "{",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }]
-            }, {
-              "tokens": [{
-                "content": "  ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "name",
-                "props": {
-                  "style": {
-                    "color": "#8FBCBB"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": ":",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "foo",
-                "props": {
-                  "style": {
-                    "color": "#A3BE8C"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": ",",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }]
-            }, {
-              "tokens": [{
-                "content": "  ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "main",
-                "props": {
-                  "style": {
-                    "color": "#8FBCBB"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": ":",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "./dist/index.js",
-                "props": {
-                  "style": {
-                    "color": "#A3BE8C"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": ",",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }]
-            }, {
-              "tokens": [{
-                "content": "  ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "types",
-                "props": {
-                  "style": {
-                    "color": "#8FBCBB"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": ":",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "./dist/types/index.d.ts",
-                "props": {
-                  "style": {
-                    "color": "#A3BE8C"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }]
-            }, {
-              "tokens": [{
-                "content": "}",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }]
-            }],
-            "lang": "json"
-          },
-          "annotations": []
-        }, {
-          "name": "stories/tsconfig.json",
-          "focus": "5:7",
-          "code": {
-            "lines": [{
-              "tokens": [{
-                "content": "{",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }]
-            }, {
-              "tokens": [{
-                "content": "  ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "extends",
-                "props": {
-                  "style": {
-                    "color": "#8FBCBB"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": ":",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "../tsconfig.json",
-                "props": {
-                  "style": {
-                    "color": "#A3BE8C"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": ",",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }]
-            }, {
-              "tokens": [{
-                "content": "  ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "compilerOptions",
-                "props": {
-                  "style": {
-                    "color": "#8FBCBB"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": ":",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "{",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }]
-            }, {
-              "tokens": [{
-                "content": "    ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "baseUrl",
-                "props": {
-                  "style": {
-                    "color": "#8FBCBB"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": ":",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "../",
-                "props": {
-                  "style": {
-                    "color": "#A3BE8C"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": ",",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }]
-            }, {
-              "tokens": [{
-                "content": "    ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "paths",
-                "props": {
-                  "style": {
-                    "color": "#8FBCBB"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": ":",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "{",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }]
-            }, {
-              "tokens": [{
-                "content": "      ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "foo",
-                "props": {
-                  "style": {
-                    "color": "#8FBCBB"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": ":",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "[",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": ".",
-                "props": {
-                  "style": {
-                    "color": "#A3BE8C"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "],",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }]
-            }, {
-              "tokens": [{
-                "content": "      ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "foo/*",
-                "props": {
-                  "style": {
-                    "color": "#8FBCBB"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": ":",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "[",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "./*",
-                "props": {
-                  "style": {
-                    "color": "#A3BE8C"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "]",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }]
-            }, {
-              "tokens": [{
-                "content": "    ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "}",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }]
-            }, {
-              "tokens": [{
-                "content": "  ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "},",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }]
-            }, {
-              "tokens": [{
-                "content": "  ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "include",
-                "props": {
-                  "style": {
-                    "color": "#8FBCBB"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": ":",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "[",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }]
-            }, {
-              "tokens": [{
-                "content": "    ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "**/*",
-                "props": {
-                  "style": {
-                    "color": "#A3BE8C"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }]
-            }, {
-              "tokens": [{
-                "content": "  ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "]",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }]
-            }, {
-              "tokens": [{
-                "content": "}",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }]
-            }],
-            "lang": "json"
-          },
-          "annotations": []
-        }],
-        "southPanel": undefined
-      }, {
-        "northPanel": {
-          "tabs": ["package.json", "stories/index.stories.tsx"],
-          "active": "stories/index.stories.tsx",
-          "heightRatio": 1
-        },
-        "files": [{
-          "name": "package.json",
-          "focus": "",
-          "code": {
-            "lines": [{
-              "tokens": [{
-                "content": "{",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }]
-            }, {
-              "tokens": [{
-                "content": "  ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "name",
-                "props": {
-                  "style": {
-                    "color": "#8FBCBB"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": ":",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "foo",
-                "props": {
-                  "style": {
-                    "color": "#A3BE8C"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": ",",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }]
-            }, {
-              "tokens": [{
-                "content": "  ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "main",
-                "props": {
-                  "style": {
-                    "color": "#8FBCBB"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": ":",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "./dist/index.js",
-                "props": {
-                  "style": {
-                    "color": "#A3BE8C"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": ",",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }]
-            }, {
-              "tokens": [{
-                "content": "  ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "types",
-                "props": {
-                  "style": {
-                    "color": "#8FBCBB"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": ":",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "./dist/types/index.d.ts",
-                "props": {
-                  "style": {
-                    "color": "#A3BE8C"
-                  }
-                }
-              }, {
-                "content": "\"",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }]
-            }, {
-              "tokens": [{
-                "content": "}",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }]
-            }],
-            "lang": "json"
-          },
-          "annotations": []
-        }, {
-          "name": "stories/index.stories.tsx",
-          "focus": "1:1",
-          "code": {
-            "lines": [{
-              "tokens": [{
-                "content": "import",
-                "props": {
-                  "style": {
-                    "color": "#81A1C1"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "{",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "content",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "}",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "from",
-                "props": {
-                  "style": {
-                    "color": "#81A1C1"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "'",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "foo",
-                "props": {
-                  "style": {
-                    "color": "#A3BE8C"
-                  }
-                }
-              }, {
-                "content": "'",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": ";",
-                "props": {
-                  "style": {
-                    "color": "#81A1C1"
-                  }
-                }
-              }]
-            }, {
-              "tokens": []
-            }, {
-              "tokens": [{
-                "content": "const",
-                "props": {
-                  "style": {
-                    "color": "#81A1C1"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "Component",
-                "props": {
-                  "style": {
-                    "color": "#88C0D0"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "=",
-                "props": {
-                  "style": {
-                    "color": "#81A1C1"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "()",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "=>",
-                "props": {
-                  "style": {
-                    "color": "#81A1C1"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "<div>",
-                "props": {
-                  "style": {
-                    "color": "#81A1C1"
-                  }
-                }
-              }, {
-                "content": "this is a Story Component ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "{",
-                "props": {
-                  "style": {
-                    "color": "#81A1C1"
-                  }
-                }
-              }, {
-                "content": "content",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9"
-                  }
-                }
-              }, {
-                "content": "}</div>;",
-                "props": {
-                  "style": {
-                    "color": "#81A1C1"
-                  }
-                }
-              }]
-            }, {
-              "tokens": []
-            }, {
-              "tokens": [{
-                "content": "export",
-                "props": {
-                  "style": {
-                    "color": "#81A1C1"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "const",
-                "props": {
-                  "style": {
-                    "color": "#81A1C1"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "YourStory",
-                "props": {
-                  "style": {
-                    "color": "#88C0D0"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "=",
-                "props": {
-                  "style": {
-                    "color": "#81A1C1"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "()",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "=>",
-                "props": {
-                  "style": {
-                    "color": "#81A1C1"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "<",
-                "props": {
-                  "style": {
-                    "color": "#81A1C1"
-                  }
-                }
-              }, {
-                "content": "Component",
-                "props": {
-                  "style": {
-                    "color": "#8FBCBB"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "/>;",
-                "props": {
-                  "style": {
-                    "color": "#81A1C1"
-                  }
-                }
-              }]
-            }, {
-              "tokens": []
-            }, {
-              "tokens": [{
-                "content": "export",
-                "props": {
-                  "style": {
-                    "color": "#81A1C1"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "default",
-                "props": {
-                  "style": {
-                    "color": "#81A1C1"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "{",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }]
-            }, {
-              "tokens": [{
-                "content": "  ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "title",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9"
-                  }
-                }
-              }, {
-                "content": ":",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": " ",
-                "props": {
-                  "style": {
-                    "color": "#D8DEE9FF"
-                  }
-                }
-              }, {
-                "content": "'",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": "Your Stories",
-                "props": {
-                  "style": {
-                    "color": "#A3BE8C"
-                  }
-                }
-              }, {
-                "content": "'",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": ",",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }]
-            }, {
-              "tokens": [{
-                "content": "}",
-                "props": {
-                  "style": {
-                    "color": "#ECEFF4"
-                  }
-                }
-              }, {
-                "content": ";",
-                "props": {
-                  "style": {
-                    "color": "#81A1C1"
-                  }
-                }
-              }]
-            }],
-            "lang": "tsx"
-          },
-          "annotations": []
-        }],
-        "southPanel": undefined
-      }],
-      children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
-        children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(CH.CodeSlot, {})
-      }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
-        children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
-          children: ["确保 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-            children: "package.json"
-          }), " 的 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-            children: "main"
-          }), " 和 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-            children: "types"
-          }), "\n的值为正确的产物路径。"]
-        }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(CH.CodeSlot, {})]
-      }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
-        children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
-          children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-            children: "foo"
-          }), " 项目的源码。"]
-        }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(CH.CodeSlot, {})]
-      }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
-        children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
-          children: ["确保在 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-            children: "stories/tsconfig.json"
-          }), " 中设置了指向项目根目录的 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-            children: "paths"
-          }), " 配置。\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-            children: "paths"
-          }), " 的 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-            children: "key"
-          }), " 与项目名称相同，这样在编译过程中以及在代码中不会出现问题。"]
-        }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(CH.CodeSlot, {})]
-      }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
-        children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
-          children: "最后在 Story 代码中直接以项目名称的方式引用。"
-        }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(CH.CodeSlot, {})]
-      })]
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.div, {
-      className: "modern-directive info",
-      children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
-        className: "modern-directive-title",
-        children: "INFO"
-      }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.div, {
-        className: "modern-directive-content",
-        children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
-          children: "\n在开发过程中，可能会遇到无法实时获得类型定义的情况。因为只有当保存代码后，产物目录下的类型文件才会更新。此时："
-        }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
-          children: ["对于 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-            children: "pnpm"
-          }), " 的项目，可以按照下面的内容对 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-            children: "package.json"
-          }), " 进行修改："]
-        }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(CH.Code, {
-          codeConfig: chCodeConfig,
-          northPanel: {
-            "tabs": [""],
-            "active": "",
-            "heightRatio": 1
-          },
-          files: [{
-            "name": "",
-            "focus": "4:7",
-            "code": {
-              "lines": [{
-                "tokens": [{
-                  "content": "{",
-                  "props": {
-                    "style": {
-                      "color": "#ECEFF4"
-                    }
-                  }
-                }]
-              }, {
-                "tokens": [{
-                  "content": "    ",
-                  "props": {
-                    "style": {
-                      "color": "#D8DEE9FF"
-                    }
-                  }
-                }, {
-                  "content": "\"",
-                  "props": {
-                    "style": {
-                      "color": "#ECEFF4"
-                    }
-                  }
-                }, {
-                  "content": "name",
-                  "props": {
-                    "style": {
-                      "color": "#A3BE8C"
-                    }
-                  }
-                }, {
-                  "content": "\"",
-                  "props": {
-                    "style": {
-                      "color": "#ECEFF4"
-                    }
-                  }
-                }, {
-                  "content": ": ",
-                  "props": {
-                    "style": {
-                      "color": "#D8DEE9FF"
-                    }
-                  }
-                }, {
-                  "content": "\"",
-                  "props": {
-                    "style": {
-                      "color": "#ECEFF4"
-                    }
-                  }
-                }, {
-                  "content": "foo",
-                  "props": {
-                    "style": {
-                      "color": "#A3BE8C"
-                    }
-                  }
-                }, {
-                  "content": "\"",
-                  "props": {
-                    "style": {
-                      "color": "#ECEFF4"
-                    }
-                  }
-                }, {
-                  "content": ",",
-                  "props": {
-                    "style": {
-                      "color": "#ECEFF4"
-                    }
-                  }
-                }]
-              }, {
-                "tokens": [{
-                  "content": "    ",
-                  "props": {
-                    "style": {
-                      "color": "#D8DEE9FF"
-                    }
-                  }
-                }, {
-                  "content": "\"",
-                  "props": {
-                    "style": {
-                      "color": "#ECEFF4"
-                    }
-                  }
-                }, {
-                  "content": "main",
-                  "props": {
-                    "style": {
-                      "color": "#A3BE8C"
-                    }
-                  }
-                }, {
-                  "content": "\"",
-                  "props": {
-                    "style": {
-                      "color": "#ECEFF4"
-                    }
-                  }
-                }, {
-                  "content": ": ",
-                  "props": {
-                    "style": {
-                      "color": "#D8DEE9FF"
-                    }
-                  }
-                }, {
-                  "content": "\"",
-                  "props": {
-                    "style": {
-                      "color": "#ECEFF4"
-                    }
-                  }
-                }, {
-                  "content": "./dist/index.js",
-                  "props": {
-                    "style": {
-                      "color": "#A3BE8C"
-                    }
-                  }
-                }, {
-                  "content": "\"",
-                  "props": {
-                    "style": {
-                      "color": "#ECEFF4"
-                    }
-                  }
-                }, {
-                  "content": ",",
-                  "props": {
-                    "style": {
-                      "color": "#ECEFF4"
-                    }
-                  }
-                }]
-              }, {
-                "tokens": [{
-                  "content": "    ",
-                  "props": {
-                    "style": {
-                      "color": "#D8DEE9FF"
-                    }
-                  }
-                }, {
-                  "content": "\"",
-                  "props": {
-                    "style": {
-                      "color": "#ECEFF4"
-                    }
-                  }
-                }, {
-                  "content": "types",
-                  "props": {
-                    "style": {
-                      "color": "#A3BE8C"
-                    }
-                  }
-                }, {
-                  "content": "\"",
-                  "props": {
-                    "style": {
-                      "color": "#ECEFF4"
-                    }
-                  }
-                }, {
-                  "content": ": ",
-                  "props": {
-                    "style": {
-                      "color": "#D8DEE9FF"
-                    }
-                  }
-                }, {
-                  "content": "\"",
-                  "props": {
-                    "style": {
-                      "color": "#ECEFF4"
-                    }
-                  }
-                }, {
-                  "content": "./src/index.ts",
-                  "props": {
-                    "style": {
-                      "color": "#A3BE8C"
-                    }
-                  }
-                }, {
-                  "content": "\"",
-                  "props": {
-                    "style": {
-                      "color": "#ECEFF4"
-                    }
-                  }
-                }, {
-                  "content": ",",
-                  "props": {
-                    "style": {
-                      "color": "#ECEFF4"
-                    }
-                  }
-                }]
-              }, {
-                "tokens": [{
-                  "content": "    ",
-                  "props": {
-                    "style": {
-                      "color": "#D8DEE9FF"
-                    }
-                  }
-                }, {
-                  "content": "\"",
-                  "props": {
-                    "style": {
-                      "color": "#ECEFF4"
-                    }
-                  }
-                }, {
-                  "content": "publishConfig",
-                  "props": {
-                    "style": {
-                      "color": "#A3BE8C"
-                    }
-                  }
-                }, {
-                  "content": "\"",
-                  "props": {
-                    "style": {
-                      "color": "#ECEFF4"
-                    }
-                  }
-                }, {
-                  "content": ": ",
-                  "props": {
-                    "style": {
-                      "color": "#D8DEE9FF"
-                    }
-                  }
-                }, {
-                  "content": "{",
-                  "props": {
-                    "style": {
-                      "color": "#ECEFF4"
-                    }
-                  }
-                }]
-              }, {
-                "tokens": [{
-                  "content": "      ",
-                  "props": {
-                    "style": {
-                      "color": "#D8DEE9FF"
-                    }
-                  }
-                }, {
-                  "content": "\"",
-                  "props": {
-                    "style": {
-                      "color": "#ECEFF4"
-                    }
-                  }
-                }, {
-                  "content": "types",
-                  "props": {
-                    "style": {
-                      "color": "#A3BE8C"
-                    }
-                  }
-                }, {
-                  "content": "\"",
-                  "props": {
-                    "style": {
-                      "color": "#ECEFF4"
-                    }
-                  }
-                }, {
-                  "content": ":",
-                  "props": {
-                    "style": {
-                      "color": "#ECEFF4"
-                    }
-                  }
-                }, {
-                  "content": " ",
-                  "props": {
-                    "style": {
-                      "color": "#D8DEE9FF"
-                    }
-                  }
-                }, {
-                  "content": "\"",
-                  "props": {
-                    "style": {
-                      "color": "#ECEFF4"
-                    }
-                  }
-                }, {
-                  "content": "./dist/index.d.ts",
-                  "props": {
-                    "style": {
-                      "color": "#A3BE8C"
-                    }
-                  }
-                }, {
-                  "content": "\"",
-                  "props": {
-                    "style": {
-                      "color": "#ECEFF4"
-                    }
-                  }
-                }, {
-                  "content": ",",
-                  "props": {
-                    "style": {
-                      "color": "#ECEFF4"
-                    }
-                  }
-                }]
-              }, {
-                "tokens": [{
-                  "content": "    ",
-                  "props": {
-                    "style": {
-                      "color": "#D8DEE9FF"
-                    }
-                  }
-                }, {
-                  "content": "}",
-                  "props": {
-                    "style": {
-                      "color": "#ECEFF4"
-                    }
-                  }
-                }]
-              }, {
-                "tokens": [{
-                  "content": "}",
-                  "props": {
-                    "style": {
-                      "color": "#ECEFF4"
-                    }
-                  }
-                }]
-              }],
-              "lang": "ts"
-            },
-            "annotations": []
-          }]
-        }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.blockquote, {
-          children: ["\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
-            children: ["关于 pnpm 的 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-              children: "publishConfig"
-            }), " 的使用，可以阅读下面这个", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-              href: "https://pnpm.io/package_json#publishconfig",
-              target: "_blank",
-              rel: "nofollow",
-              children: "链接"
-            }), "。"]
-          }), "\n"]
-        }), "而对于 npm 和 Yarn 的项目，则只能通过手动的方式在", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.strong, {
-          children: "开发阶段"
-        }), "和", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.strong, {
-          children: "发布阶段"
-        }), "对 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-          children: "package.json"
-        }), " 的 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-          children: "types"
-        }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
-          children: "的值进行修改。"
-        })]
-      })]
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
-      children: "那么为什么可以直接引用产物呢？"
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.ol, {
-      children: ["\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.li, {
-        children: ["在执行 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-          children: "modern dev storybook"
-        }), " 命令之前，会自动执行 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-          children: "modern build"
-        }), " 命令，保证项目构建产物的存在。"]
-      }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.li, {
-        children: ["在 Storybook 内部增加了针对 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-          children: "tsconfig.json"
-        }), " 文件或者以项目名称作为别名的处理，保证能够", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.strong, {
-          children: ["根据 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-            children: "package.json"
-          }), " 解析出项目的产物路径"]
-        }), "。"]
-      }), "\n"]
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.h3, {
-      id: "引用组件源码",
-      children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-        className: "header-anchor",
-        "aria-hidden": "true",
-        href: "#引用组件源码",
-        children: "#"
-      }), "引用组件源码"]
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
-      children: "引用组件的源码可以通过相对路径的方式："
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(CH.Code, {
-      codeConfig: chCodeConfig,
-      northPanel: {
-        "tabs": ["./stories/index.tsx"],
-        "active": "./stories/index.tsx",
-        "heightRatio": 1
-      },
-      files: [{
-        "name": "./stories/index.tsx",
-        "focus": "",
-        "code": {
-          "lines": [{
-            "tokens": [{
-              "content": "import",
-              "props": {
-                "style": {
-                  "color": "#81A1C1"
-                }
-              }
-            }, {
-              "content": " ",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9FF"
-                }
-              }
-            }, {
-              "content": "{",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }, {
-              "content": " ",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9FF"
-                }
-              }
-            }, {
-              "content": "content",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9"
-                }
-              }
-            }, {
-              "content": " ",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9FF"
-                }
-              }
-            }, {
-              "content": "}",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }, {
-              "content": " ",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9FF"
-                }
-              }
-            }, {
-              "content": "from",
-              "props": {
-                "style": {
-                  "color": "#81A1C1"
-                }
-              }
-            }, {
-              "content": " ",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9FF"
-                }
-              }
-            }, {
-              "content": "'",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }, {
-              "content": "../src",
-              "props": {
-                "style": {
-                  "color": "#A3BE8C"
-                }
-              }
-            }, {
-              "content": "'",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }, {
-              "content": ";",
-              "props": {
-                "style": {
-                  "color": "#81A1C1"
-                }
-              }
-            }]
-          }, {
-            "tokens": []
-          }, {
-            "tokens": [{
-              "content": "const",
-              "props": {
-                "style": {
-                  "color": "#81A1C1"
-                }
-              }
-            }, {
-              "content": " ",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9FF"
-                }
-              }
-            }, {
-              "content": "Component",
-              "props": {
-                "style": {
-                  "color": "#88C0D0"
-                }
-              }
-            }, {
-              "content": " ",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9FF"
-                }
-              }
-            }, {
-              "content": "=",
-              "props": {
-                "style": {
-                  "color": "#81A1C1"
-                }
-              }
-            }, {
-              "content": " ",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9FF"
-                }
-              }
-            }, {
-              "content": "()",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }, {
-              "content": " ",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9FF"
-                }
-              }
-            }, {
-              "content": "=>",
-              "props": {
-                "style": {
-                  "color": "#81A1C1"
-                }
-              }
-            }, {
-              "content": " <",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9FF"
-                }
-              }
-            }, {
-              "content": "div",
-              "props": {
-                "style": {
-                  "color": "#8FBCBB"
-                }
-              }
-            }, {
-              "content": ">",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9FF"
-                }
-              }
-            }, {
-              "content": "this",
-              "props": {
-                "style": {
-                  "color": "#81A1C1"
-                }
-              }
-            }, {
-              "content": " ",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9FF"
-                }
-              }
-            }, {
-              "content": "is",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9"
-                }
-              }
-            }, {
-              "content": " ",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9FF"
-                }
-              }
-            }, {
-              "content": "a",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9"
-                }
-              }
-            }, {
-              "content": " ",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9FF"
-                }
-              }
-            }, {
-              "content": "Story",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9"
-                }
-              }
-            }, {
-              "content": " ",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9FF"
-                }
-              }
-            }, {
-              "content": "Component",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9"
-                }
-              }
-            }, {
-              "content": " ",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9FF"
-                }
-              }
-            }, {
-              "content": "{",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }, {
-              "content": "content",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9"
-                }
-              }
-            }, {
-              "content": "}",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }, {
-              "content": "</",
-              "props": {
-                "style": {
-                  "color": "#81A1C1"
-                }
-              }
-            }, {
-              "content": "div",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9"
-                }
-              }
-            }, {
-              "content": ">;",
-              "props": {
-                "style": {
-                  "color": "#81A1C1"
-                }
-              }
-            }]
-          }, {
-            "tokens": []
-          }, {
-            "tokens": [{
-              "content": "export",
-              "props": {
-                "style": {
-                  "color": "#81A1C1"
-                }
-              }
-            }, {
-              "content": " ",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9FF"
-                }
-              }
-            }, {
-              "content": "const",
-              "props": {
-                "style": {
-                  "color": "#81A1C1"
-                }
-              }
-            }, {
-              "content": " ",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9FF"
-                }
-              }
-            }, {
-              "content": "YourStory",
-              "props": {
-                "style": {
-                  "color": "#88C0D0"
-                }
-              }
-            }, {
-              "content": " ",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9FF"
-                }
-              }
-            }, {
-              "content": "=",
-              "props": {
-                "style": {
-                  "color": "#81A1C1"
-                }
-              }
-            }, {
-              "content": " ",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9FF"
-                }
-              }
-            }, {
-              "content": "()",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }, {
-              "content": " ",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9FF"
-                }
-              }
-            }, {
-              "content": "=>",
-              "props": {
-                "style": {
-                  "color": "#81A1C1"
-                }
-              }
-            }, {
-              "content": " <",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9FF"
-                }
-              }
-            }, {
-              "content": "Component",
-              "props": {
-                "style": {
-                  "color": "#8FBCBB"
-                }
-              }
-            }, {
-              "content": " />",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9FF"
-                }
-              }
-            }, {
-              "content": ";",
-              "props": {
-                "style": {
-                  "color": "#81A1C1"
-                }
-              }
-            }]
-          }, {
-            "tokens": []
-          }, {
-            "tokens": [{
-              "content": "export",
-              "props": {
-                "style": {
-                  "color": "#81A1C1"
-                }
-              }
-            }, {
-              "content": " ",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9FF"
-                }
-              }
-            }, {
-              "content": "default",
-              "props": {
-                "style": {
-                  "color": "#81A1C1"
-                }
-              }
-            }, {
-              "content": " ",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9FF"
-                }
-              }
-            }, {
-              "content": "{",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }]
-          }, {
-            "tokens": [{
-              "content": "  ",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9FF"
-                }
-              }
-            }, {
-              "content": "title",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9"
-                }
-              }
-            }, {
-              "content": ":",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }, {
-              "content": " ",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9FF"
-                }
-              }
-            }, {
-              "content": "'",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }, {
-              "content": "Your Stories",
-              "props": {
-                "style": {
-                  "color": "#A3BE8C"
-                }
-              }
-            }, {
-              "content": "'",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }, {
-              "content": ",",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }]
-          }, {
-            "tokens": [{
-              "content": "}",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }, {
-              "content": ";",
-              "props": {
-                "style": {
-                  "color": "#81A1C1"
-                }
-              }
-            }]
-          }],
-          "lang": "ts"
-        },
-        "annotations": []
-      }]
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
-      children: "那么为什么不推荐使用源码的方式呢？"
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
-      children: ["不仅仅是因为使用组件源码无法验证组件产物是否正确，", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.strong, {
-        children: "同时模块工程对于构建产物支持的一些配置无法完全转换为 Storybook\n内部的配置"
-      }), "。如果某些配置无法进行相互转换的话，就会在 Storybook 调试过程中出现不符合预期的结果。"]
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.h2, {
-      id: "配置-storybook",
-      children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-        className: "header-anchor",
-        "aria-hidden": "true",
-        href: "#配置-storybook",
-        children: "#"
-      }), "配置 Storybook"]
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
-      children: ["Storybook 官方通过一个名为 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-        children: ".storybook"
-      }), " 的文件夹来进行项目配置，其中包含各种配置文件。", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.strong, {
-        children: ["在模块工程方案中，可以在项目的 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-          children: "config/storybook"
-        }), " 目录下增加 Storybook 配置文件。"]
-      })]
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
-      children: "关于 Storybook 各种配置文件的使用方式，可以查看下面的链接："
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.ul, {
-      children: ["\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.li, {
-        children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-          href: "https://storybook.js.org/docs/react/configure/overview",
-          target: "_blank",
-          rel: "nofollow",
-          children: "Configure Storybook"
-        })
-      }), "\n"]
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
-      children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.strong, {
-        children: "不过在模块项目里进行 Storybook 存在一些限制"
-      }), "："]
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.ul, {
-      children: ["\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.li, {
-        children: ["目前不能修改 Story 文件存放的位置，即无法在 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-          children: "main.js"
-        }), " 文件里修改 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-          children: "stories"
-        }), " 配置。"]
-      }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.li, {
-        children: ["目前不能修改 Webpack 和 Babel 相关的配置，即无法在 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-          children: "main.js"
-        }), " 文件里修改 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-          children: "webpackFinal"
-        }), " 和 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-          children: "babel"
-        }), " 配置。"]
-      }), "\n"]
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
-      children: "在未来我们会考虑这些配置是否可以允许修改，不过目前为了减少不可预知的问题暂时限制使用这些配置。"
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.h2, {
-      id: "构建-storybook-产物",
-      children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-        className: "header-anchor",
-        "aria-hidden": "true",
-        href: "#构建-storybook-产物",
-        children: "#"
-      }), "构建 Storybook 产物"]
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
-      children: "除了可以对组件或者普通的模块进行 Storybook 调试，还可以通过下面的命令来执行 Storybook 的构建任务。"
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(CH.Code, {
-      codeConfig: chCodeConfig,
-      northPanel: {
-        "tabs": [""],
-        "active": "",
-        "heightRatio": 1
-      },
-      files: [{
-        "name": "",
-        "focus": "",
-        "code": {
-          "lines": [{
-            "tokens": [{
-              "content": "modern build --platform storybook",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9FF"
-                }
-              }
-            }]
-          }],
-          "lang": "bash"
-        },
-        "annotations": []
-      }]
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
-      children: ["关于 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-        children: "modern build --platform"
-      }), " 命令可以查看："]
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.ul, {
-      children: ["\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.li, {
-        children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-          href: "/module-tools/guide/basic/command-preview.html#modern-build",
-          children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-            children: "modern build"
-          })
-        })
-      }), "\n"]
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
-      children: ["构建完成后，可以在 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-        children: "dist/storybook-static"
-      }), " 目录看到构建产物文件。"]
-    })]
-  });
-}
-function MDXContent(props = {}) {
-  const {wrapper: MDXLayout} = props.components || ({});
-  return MDXLayout ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(MDXLayout, Object.assign({}, props, {
-    children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_createMdxContent, props)
-  })) : _createMdxContent(props);
-}
-/* harmony default export */ __webpack_exports__["default"] = (MDXContent);
-function _missingMdxReference(id, component, place) {
-  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it." + (place ? "\nIt’s referenced in your code at `" + place + "` in `/Users/bytedance/github/targeral/modern-dev/website/module-tools/docs/zh/guide/basic/using-storybook.mdx`" : ""));
-}
-
-
-/***/ })
-
-}]);
-//# sourceMappingURL=zh_guide_basic_using-storybook.js.map