@redocly/theme 0.36.2 → 0.37.0

package/lib/markdoc/components/Tabs/variables.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.markdownTabs = void 0;
+const styled_components_1 = require("styled-components");
+exports.markdownTabs = (0, styled_components_1.css) `
+  /**
+  *  @tokens Markdown Tabs
+  */
+
+  --md-tabs-container-text-color: inherit; // @presenter Color
+  --md-tabs-container-font-size: var(--md-content-font-size); // @presenter FontSize
+  --md-tabs-container-font-family: var(--md-content-font-family); // @presenter FontFamily
+  --md-tabs-container-font-style: normal; // @presenter FontStyle
+  --md-tabs-container-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --md-tabs-container-bg-color: inherit; // @presenter Color
+  --md-tabs-container-margin: 10px 0; // @presenter Spacing
+  --md-tabs-container-padding: 0; // @presenter Spacing
+  --md-tabs-container-border: none; // @presenter Border
+
+  --md-tabs-border: solid var(--border-color-primary); // @presenter Color
+  --md-tabs-border-width: 0 0 1px 0; // @presenter Spacing
+  --md-tabs-padding: 0; // @presenter Spacing
+
+  --md-tabs-content-text-color: inherit; // @presenter Color
+  --md-tabs-content-font-size: var(--md-content-font-size); // @presenter FontSize
+  --md-tabs-content-font-family: var(--md-content-font-family); // @presenter FontFamily
+  --md-tabs-content-font-style: normal; // @presenter FontStyle
+  --md-tabs-content-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --md-tabs-content-bg-color: inherit; // @presenter Color
+  --md-tabs-content-margin: 0; // @presenter Spacing
+  --md-tabs-content-padding: var(--spacing-base) 0; // @presenter Spacing
+  --md-tabs-content-border: none; // @presenter Border
+
+  --md-tabs-tab-text-color: var(--text-color-primary); // @presenter Color
+  --md-tabs-tab-font-size: var(--font-size-lg); // @presenter FontSize
+  --md-tabs-tab-font-family: var(--md-content-font-family); // @presenter FontFamily
+  --md-tabs-tab-font-style: normal; // @presenter FontStyle
+  --md-tabs-tab-font-weight: var(--font-weight-bold); // @presenter FontWeight
+  --md-tabs-tab-bg-color: none; // @presenter Color
+  --md-tabs-tab-margin: 0 0 -1px 0; // @presenter Spacing
+  --md-tabs-tab-padding: var(--spacing-sm) var(--spacing-base); // @presenter Spacing
+  --md-tabs-tab-border: none; // @presenter Color
+  --md-tabs-tab-border-width: 0; // @presenter Spacing
+  --md-tabs-tab-border-radius: 0; // @presenter BorderRadius
+
+  --md-tabs-active-tab-text-color: var(--text-color-primary); // @presenter Color
+  --md-tabs-active-tab-font-size: var(--md-tabs-tab-font-size); // @presenter FontSize
+  --md-tabs-active-tab-font-family: var(--md-tabs-tab-font-family); // @presenter FontFamily
+  --md-tabs-active-tab-font-style: normal; // @presenter FontStyle
+  --md-tabs-active-tab-font-weight: var(--md-tabs-tab-font-weight); // @presenter FontWeight
+  --md-tabs-active-tab-bg-color: var(--bg-color); // @presenter Color
+  --md-tabs-active-tab-padding: var(--md-tabs-tab-padding); // @presenter Spacing
+  --md-tabs-active-tab-border-color: var(--text-color-primary); // @presenter Color
+  --md-tabs-active-tab-border-width: 0 0 2px 0; // @presenter Spacing
+  --md-tabs-active-tab-border-radius: var(--md-tabs-tab-border-radius); // @presenter BorderRadius
+
+  --md-tabs-hover-tab-text-color: var(--md-tabs-tab-text-color); // @presenter Color
+  --md-tabs-hover-tab-font-size: var(--md-tabs-tab-font-size); // @presenter FontSize
+  --md-tabs-hover-tab-font-family: var(--md-tabs-tab-font-family); // @presenter FontFamily
+  --md-tabs-hover-tab-font-style: normal; // @presenter FontStyle
+  --md-tabs-hover-tab-font-weight: var(--md-tabs-tab-font-weight); // @presenter FontWeight
+  --md-tabs-hover-tab-bg-color: var(--md-tabs-tab-bg-color); // @presenter Color
+  --md-tabs-hover-tab-padding: var(--md-tabs-tab-padding); // @presenter Spacing
+  --md-tabs-hover-tab-border-color: var(--border-color-secondary); // @presenter Color
+  --md-tabs-hover-tab-border-width: 0 0 1.5px 0; // @presenter Spacing
+  --md-tabs-hover-tab-border-radius: var(--md-tabs-tab-border-radius); // @presenter BorderRadius
+
+  // @tokens End
+  `;
+//# sourceMappingURL=variables.js.map

package/lib/markdoc/components/default.d.ts

@@ -0,0 +1,9 @@
+export * from '../../markdoc/components/Admonition/Admonition';
+export * from '../../markdoc/components/InlineSvg/InlineSvg';
+export * from '../../markdoc/components/MarkdocExample/MarkdocExample';
+export * from '../../markdoc/components/Heading/Heading';
+export * from '../../markdoc/components/Mermaid/Mermaid';
+export * from '../../markdoc/components/HtmlBlock/HtmlBlock';
+export * from '../../markdoc/components/Tabs/Tab';
+export * from '../../markdoc/components/Tabs/Tabs';
+export * from '../../markdoc/components/CodeBlock/CodeBlock';

package/lib/markdoc/components/default.js

@@ -0,0 +1,26 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../../markdoc/components/Admonition/Admonition"), exports);
+__exportStar(require("../../markdoc/components/InlineSvg/InlineSvg"), exports);
+__exportStar(require("../../markdoc/components/MarkdocExample/MarkdocExample"), exports);
+__exportStar(require("../../markdoc/components/Heading/Heading"), exports);
+__exportStar(require("../../markdoc/components/Mermaid/Mermaid"), exports);
+__exportStar(require("../../markdoc/components/HtmlBlock/HtmlBlock"), exports);
+__exportStar(require("../../markdoc/components/Tabs/Tab"), exports);
+__exportStar(require("../../markdoc/components/Tabs/Tabs"), exports);
+__exportStar(require("../../markdoc/components/CodeBlock/CodeBlock"), exports);
+//# sourceMappingURL=default.js.map

package/lib/markdoc/default.d.ts

@@ -0,0 +1,9 @@
+export * from '../markdoc/attributes/code-snippet-file';
+export * from '../markdoc/attributes/img-src';
+export * from '../markdoc/attributes/img-srcset';
+export * from '../markdoc/attributes/relative-path';
+export * from '../markdoc/attributes/svg-content';
+export * as components from '../markdoc/components/default';
+export declare const tags: {
+    [x: string]: import("@markdoc/markdoc").Schema;
+};

package/lib/markdoc/default.js

@@ -0,0 +1,59 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tags = exports.components = void 0;
+/* Attributes */
+__exportStar(require("../markdoc/attributes/code-snippet-file"), exports);
+__exportStar(require("../markdoc/attributes/img-src"), exports);
+__exportStar(require("../markdoc/attributes/img-srcset"), exports);
+__exportStar(require("../markdoc/attributes/relative-path"), exports);
+__exportStar(require("../markdoc/attributes/svg-content"), exports);
+/* Components */
+exports.components = __importStar(require("../markdoc/components/default"));
+/* Tags */
+const admonition_1 = require("../markdoc/tags/admonition");
+const html_1 = require("../markdoc/tags/html");
+const markdoc_example_1 = require("../markdoc/tags/markdoc-example");
+const partial_1 = require("../markdoc/tags/partial");
+const tab_1 = require("../markdoc/tags/tab");
+const tabs_1 = require("../markdoc/tags/tabs");
+const debug_1 = require("../markdoc/tags/debug");
+const code_snippet_1 = require("../markdoc/tags/code-snippet");
+const inline_svg_1 = require("../markdoc/tags/inline-svg");
+exports.tags = {
+    [admonition_1.admonition.tagName]: admonition_1.admonition.schema,
+    [debug_1.debug.tagName]: debug_1.debug.schema,
+    [html_1.html.tagName]: html_1.html.schema,
+    [markdoc_example_1.markdocExample.tagName]: markdoc_example_1.markdocExample.schema,
+    [partial_1.partial.tagName]: partial_1.partial.schema,
+    [tab_1.tab.tagName]: tab_1.tab.schema,
+    [tabs_1.tabs.tagName]: tabs_1.tabs.schema,
+    [code_snippet_1.codeSnippet.tagName]: code_snippet_1.codeSnippet.schema,
+    [inline_svg_1.inlineSvg.tagName]: inline_svg_1.inlineSvg.schema,
+};
+//# sourceMappingURL=default.js.map

package/lib/markdoc/tags/admonition.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdocSchemaWrapper } from '../../markdoc/tags/types';
+export declare const admonition: MarkdocSchemaWrapper;

package/lib/markdoc/tags/admonition.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.admonition = void 0;
+exports.admonition = {
+    schema: {
+        attributes: {
+            type: { type: String, required: true, default: 'info' },
+            name: { type: String },
+        },
+        render: 'Admonition',
+    },
+    tagName: 'admonition',
+};
+//# sourceMappingURL=admonition.js.map

package/lib/markdoc/tags/code-snippet.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdocSchemaWrapper } from '../../markdoc/tags/types';
+export declare const codeSnippet: MarkdocSchemaWrapper;

package/lib/markdoc/tags/code-snippet.js

@@ -0,0 +1,60 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.codeSnippet = void 0;
+const markdoc_1 = __importDefault(require("@markdoc/markdoc"));
+const code_snippet_file_1 = require("../../markdoc/attributes/code-snippet-file");
+exports.codeSnippet = {
+    schema: {
+        attributes: {
+            file: { type: code_snippet_file_1.CodeSnippetFile, render: false, required: true },
+            language: { type: String, render: true },
+            title: { type: String, render: true },
+            to: { type: [String, Number], render: false },
+            from: { type: [String, Number], render: false },
+            after: { type: [String, Number], render: false },
+            before: { type: [String, Number], render: false },
+            prefix: { type: String, render: false },
+            wrap: { type: Boolean, render: false },
+            rawContent: { type: String, render: false }, // internal
+        },
+        render: 'CodeBlock',
+        selfClosing: true,
+        transform: (node, config) => {
+            const attributes = node.transformAttributes(config);
+            const rawContent = node.attributes.rawContent;
+            const header = {
+                title: node.attributes.title,
+                controls: { copy: {} },
+            };
+            if (typeof rawContent === 'string') {
+                return new markdoc_1.default.Tag('CodeBlock', Object.assign(Object.assign({}, attributes), { header, lang: attributes.language, source: rawContent, wrapContents: node.attributes.wrap }), []);
+            }
+            else {
+                return new markdoc_1.default.Tag(node.tag, attributes, []);
+            }
+        },
+        validate(node) {
+            const errors = [];
+            if (node.attributes.from && node.attributes.after) {
+                errors.push({
+                    id: 'from-and-after-attributes-are-mutually-exclusive',
+                    level: 'error',
+                    message: 'attributes "from" and "after" are mutually exclusive',
+                });
+            }
+            if (node.attributes.to && node.attributes.before) {
+                errors.push({
+                    id: 'to-and-before-attributes-are-mutually-exclusive',
+                    level: 'error',
+                    message: 'attributes "to" and "before" are mutually exclusive',
+                });
+            }
+            return errors;
+        },
+    },
+    tagName: 'code-snippet',
+};
+//# sourceMappingURL=code-snippet.js.map

package/lib/markdoc/tags/debug.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdocSchemaWrapper } from '../../markdoc/tags/types';
+export declare const debug: MarkdocSchemaWrapper;

package/lib/markdoc/tags/debug.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.debug = void 0;
+const markdoc_1 = __importDefault(require("@markdoc/markdoc"));
+exports.debug = {
+    schema: {
+        attributes: {
+            value: {},
+        },
+        transform(node, config) {
+            const attributes = node.transformAttributes(config);
+            return new markdoc_1.default.Tag('pre', {}, [JSON.stringify(attributes.value, null, 2)]);
+        },
+    },
+    tagName: 'debug',
+};
+//# sourceMappingURL=debug.js.map

package/lib/markdoc/tags/html.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdocSchemaWrapper } from '../../markdoc/tags/types';
+export declare const html: MarkdocSchemaWrapper;

package/lib/markdoc/tags/html.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.html = void 0;
+const markdoc_1 = __importDefault(require("@markdoc/markdoc"));
+const mapHtmlTags = {
+    script: 'HtmlScript',
+};
+exports.html = {
+    schema: {
+        attributes: {
+            name: { type: String, required: true },
+            attrs: { type: Object },
+        },
+        transform(node, config) {
+            const { name, attrs } = node.attributes;
+            const children = node.transformChildren(config);
+            return new markdoc_1.default.Tag(mapHtmlTags[name] || name, attrs, children);
+        },
+    },
+    tagName: 'html',
+};
+//# sourceMappingURL=html.js.map

package/lib/markdoc/tags/inline-svg.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdocSchemaWrapper } from '../../markdoc/tags/types';
+export declare const inlineSvg: MarkdocSchemaWrapper;

package/lib/markdoc/tags/inline-svg.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inlineSvg = void 0;
+const svg_content_1 = require("../../markdoc/attributes/svg-content");
+exports.inlineSvg = {
+    schema: {
+        attributes: {
+            file: { type: svg_content_1.SvgContent, required: true },
+            fileRawContent: { type: String, render: true }, // inserted by RawContent
+        },
+        render: 'InlineSvg',
+        selfClosing: true,
+    },
+    tagName: 'inline-svg',
+};
+//# sourceMappingURL=inline-svg.js.map

package/lib/markdoc/tags/markdoc-example.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdocSchemaWrapper } from '../../markdoc/tags/types';
+export declare const markdocExample: MarkdocSchemaWrapper;

package/lib/markdoc/tags/markdoc-example.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.markdocExample = void 0;
+const markdoc_1 = __importDefault(require("@markdoc/markdoc"));
+// This custom tag prevents evaluating any children markdoc tags (no children) so we can
+// have markdoc examples in code fences
+// approach copied from: https://github.com/markdoc/docs/blob/main/markdoc/tags/markdoc-example.markdoc.js
+exports.markdocExample = {
+    schema: {
+        attributes: {
+            renderDemo: { type: Boolean, default: false },
+            withLabels: { type: Boolean, required: false },
+            codeLabel: { type: String, required: false },
+            resultLabel: { type: String, required: false },
+        },
+        children: ['fence'],
+        transform(node, config) {
+            var _a;
+            const attributes = node.transformAttributes(config);
+            const { content } = ((_a = node.children[0]) === null || _a === void 0 ? void 0 : _a.attributes) || {};
+            if (!content)
+                return null;
+            const language = 'markdoc';
+            return new markdoc_1.default.Tag('MarkdocExample', Object.assign(Object.assign({}, attributes), { language, demoContent: node.children[0].transformChildren(config), rawContent: content }), []);
+        },
+    },
+    tagName: 'markdoc-example',
+};
+//# sourceMappingURL=markdoc-example.js.map

package/lib/markdoc/tags/partial.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdocSchemaWrapper } from '../../markdoc/tags/types';
+export declare const partial: MarkdocSchemaWrapper;

package/lib/markdoc/tags/partial.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.partial = void 0;
+const markdoc_1 = __importDefault(require("@markdoc/markdoc"));
+const utils_1 = require("../../core/utils");
+const relative_path_1 = require("../../markdoc/attributes/relative-path");
+exports.partial = {
+    schema: Object.assign(Object.assign({}, markdoc_1.default.tags.partial), { attributes: Object.assign(Object.assign({}, markdoc_1.default.tags.partial.attributes), { file: { type: relative_path_1.RelativePath } }), validate(node, config) {
+            var _a, _b;
+            const folders = (((_a = config.themeConfig) === null || _a === void 0 ? void 0 : _a.partialsFolders) || []).map(utils_1.addTrailingSlash);
+            if (!folders.length) {
+                return [
+                    {
+                        id: '',
+                        message: `Could not resolve partial ${node.attributes.file}. theme.markdown.partialsFolders is empty.`,
+                        level: 'error',
+                    },
+                ];
+            }
+            if (!((_b = config.partials) === null || _b === void 0 ? void 0 : _b[node.attributes.file])) {
+                return [
+                    {
+                        id: '',
+                        message: `Could not resolve partial ${node.attributes.file}. Starting with 0.73.0 version all partials should be placed in partials folders: \n\n  - ${folders.join('\n  - ')}`,
+                        level: 'error',
+                    },
+                ];
+            }
+            return [];
+        } }),
+    tagName: 'partial',
+};
+//# sourceMappingURL=partial.js.map

package/lib/markdoc/tags/tab.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdocSchemaWrapper } from '../../markdoc/tags/types';
+export declare const tab: MarkdocSchemaWrapper;

package/lib/markdoc/tags/tab.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tab = void 0;
+exports.tab = {
+    schema: {
+        attributes: {
+            label: { type: String, required: true },
+        },
+        render: 'div',
+    },
+    tagName: 'tab',
+};
+//# sourceMappingURL=tab.js.map

package/lib/markdoc/tags/tabs.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdocSchemaWrapper } from '../../markdoc/tags/types';
+export declare const tabs: MarkdocSchemaWrapper;

package/lib/markdoc/tags/tabs.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tabs = void 0;
+const markdoc_1 = __importDefault(require("@markdoc/markdoc"));
+const utils_1 = require("../../core/utils");
+exports.tabs = {
+    schema: {
+        transform(node, config) {
+            const attributes = node.transformAttributes(config);
+            const children = node.transformChildren(config);
+            const tabsContent = children.map((child) => {
+                if ((0, utils_1.isTag)(child) && (child === null || child === void 0 ? void 0 : child.name) === 'CodeBlock') {
+                    const key = child.attributes['data-language'] || 'default';
+                    const label = child.attributes['data-label'] || key;
+                    return new markdoc_1.default.Tag('div', { label, key }, [child]);
+                }
+                return child;
+            });
+            return new markdoc_1.default.Tag('Tabs', attributes, tabsContent);
+        },
+    },
+    tagName: 'tabs',
+};
+//# sourceMappingURL=tabs.js.map

package/lib/markdoc/tags/types.d.ts

@@ -0,0 +1,5 @@
+import type { Schema } from '@markdoc/markdoc';
+export type MarkdocSchemaWrapper = {
+    schema: Schema;
+    tagName: string;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.36.2",
+  "version": "0.37.0",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -15,10 +15,16 @@
     "./config.js": "./lib/config.js",
     "./config": "./lib/config.js",
     ".": "./lib/index.js",
-    "./Sidebar/*": "./lib/Sidebar/*.js",
-    "./src/": "./src/"
+    "./src/": "./src/",
+    "./core/*": "./lib/core/*/index.js",
+    "./core/templates/*": "./lib/core/templates/*.js",
+    "./components/*": "./lib/components/*.js",
+    "./layouts/*": "./lib/layouts/*.js",
+    "./icons/*": "./lib/icons/*.js",
+    "./markdoc/*": "./lib/markdoc/*.js"
   },
   "peerDependencies": {
+    "@markdoc/markdoc": "0.4.0",
     "lodash.throttle": "^4.1.1",
     "prismjs": "^1.28.0",
     "react": "^17.0.0 || ^18.0.0",
@@ -28,18 +34,19 @@
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "7.6.4",
-    "@storybook/addon-essentials": "7.6.4",
-    "@storybook/addon-interactions": "7.6.4",
-    "@storybook/addon-links": "7.6.4",
-    "@storybook/addon-viewport": "7.6.4",
-    "@storybook/addons": "7.6.4",
-    "@storybook/core-common": "7.6.4",
-    "@storybook/node-logger": "7.6.4",
-    "@storybook/react": "7.6.4",
-    "@storybook/react-webpack5": "7.6.4",
+    "@markdoc/markdoc": "0.4.0",
+    "@storybook/addon-actions": "7.6.19",
+    "@storybook/addon-essentials": "7.6.19",
+    "@storybook/addon-interactions": "7.6.19",
+    "@storybook/addon-links": "7.6.19",
+    "@storybook/addon-viewport": "7.6.19",
+    "@storybook/addons": "7.6.17",
+    "@storybook/core-common": "7.6.19",
+    "@storybook/node-logger": "7.6.19",
+    "@storybook/react": "7.6.19",
+    "@storybook/react-webpack5": "7.6.19",
     "@storybook/testing-library": "0.2.2",
-    "@storybook/theming": "7.6.4",
+    "@storybook/theming": "8.0.0",
     "@testing-library/jest-dom": "6.1.5",
     "@testing-library/react": "14.1.2",
     "@testing-library/user-event": "14.5.1",
@@ -49,10 +56,11 @@
     "@types/lodash.throttle": "4.1.9",
     "@types/node": "18.19.3",
     "@types/prismjs": "1.26.3",
-    "@types/react": "18.2.45",
-    "@types/react-dom": "18.2.17",
+    "@types/react": "18.2.79",
+    "@types/react-dom": "18.2.25",
     "@types/styled-components": "5.1.34",
     "@types/styled-system": "5.1.22",
+    "@types/nprogress": "^0.2.0",
     "@typescript-eslint/eslint-plugin": "5.55.0",
     "@typescript-eslint/parser": "5.55.0",
     "chromatic": "6.17.2",
@@ -63,13 +71,13 @@
     "jest-when": "3.6.0",
     "json-schema-to-ts": "2.7.2",
     "lodash.throttle": "4.1.1",
-    "npm-run-all2": "5.0.0",
-    "react-refresh": "0.14.0",
+    "npm-run-all2": "5.0.2",
+    "react-refresh": "0.14.2",
     "react-router-dom": "6.21.1",
     "rimraf": "5.0.5",
-    "storybook": "7.6.4",
-    "storybook-addon-pseudo-states": "2.1.2",
-    "storybook-design-token": "3.0.0-beta.6",
+    "storybook": "7.6.19",
+    "storybook-addon-pseudo-states": "3.1.1",
+    "storybook-design-token": "3.1.0",
     "styled-components": "5.3.11",
     "styled-system": "5.1.5",
     "ts-jest": "29.1.2",
@@ -79,8 +87,7 @@
     "tsconfig-paths": "4.2.0",
     "tsconfig-paths-webpack-plugin": "3.5.2",
     "typescript": "5.2.2",
-    "webpack": "5.88.2",
-    "@redocly/portal-types": "1.2.1"
+    "webpack": "5.91.0"
   },
   "dependencies": {
     "copy-to-clipboard": "^3.3.3",
@@ -89,7 +96,9 @@
     "react-calendar": "4.2.1",
     "react-date-picker": "10.0.3",
     "timeago.js": "^4.0.2",
-    "@redocly/config": "0.4.0"
+    "i18next": "^22.4.12",
+    "nprogress": "^0.2.0",
+    "@redocly/config": "0.6.0"
   },
   "scripts": {
     "start": "npm-run-all --parallel storybook storybook:tokens:watch",