@redocly/theme 0.48.0 → 0.48.2

package/lib/core/hooks/code-walkthrough/use-renderable-files.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRenderableFiles = useRenderableFiles;
+const react_1 = require("react");
+const utils_1 = require("../../../core/utils");
+function useRenderableFiles(files) {
+    return (0, react_1.useMemo)(function () {
+        const filePaths = files.map(({ path }) => path);
+        const rootDir = (0, utils_1.findClosestCommonDirectory)(filePaths);
+        const renderableFiles = files.map((file) => {
+            const FileIcon = getFileTypeIcon(file.basename);
+            const parentFolder = file.path.split('/').slice(-2, -1)[0];
+            const isNameDuplicate = files.some((_file) => file.basename === _file.basename && file.path !== _file.path);
+            const inRootDir = file.path === `${(0, utils_1.removeLeadingSlash)(rootDir)}/${file.basename}`;
+            return Object.assign(Object.assign({}, file), { FileIcon,
+                inRootDir,
+                parentFolder,
+                isNameDuplicate });
+        });
+        return renderableFiles;
+    }, [files]);
+}
+function getFileTypeIcon(basename) {
+    var _a;
+    const extension = ((_a = basename.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '';
+    return (0, utils_1.getFileIconByExt)(extension);
+}
+//# sourceMappingURL=use-renderable-files.js.map

package/lib/core/hooks/index.d.ts

@@ -32,3 +32,4 @@ export * from '../../core/hooks/code-walkthrough/use-code-walkthrough';
 export * from '../../core/hooks/code-walkthrough/use-code-walkthrough-steps';
 export * from '../../core/hooks/code-walkthrough/use-code-walkthrough-controls';
 export * from '../../core/hooks/code-walkthrough/use-code-panel';
+export * from '../../core/hooks/code-walkthrough/use-renderable-files';

package/lib/core/hooks/index.js

@@ -48,4 +48,5 @@ __exportStar(require("../../core/hooks/code-walkthrough/use-code-walkthrough"),
 __exportStar(require("../../core/hooks/code-walkthrough/use-code-walkthrough-steps"), exports);
 __exportStar(require("../../core/hooks/code-walkthrough/use-code-walkthrough-controls"), exports);
 __exportStar(require("../../core/hooks/code-walkthrough/use-code-panel"), exports);
+__exportStar(require("../../core/hooks/code-walkthrough/use-renderable-files"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/styles/global.js

@@ -1007,6 +1007,24 @@ const error = (0, styled_components_1.css) `
   --detailed-error-message-width: 100%;
   --detailed-error-message-font-size: var(--font-size-base);
   --detailed-error-message-font-family: var(--code-block-controls-font-family);
+    
+  --compilation-error-description-padding: 0 0 var(--spacing-base);
+  --compilation-error-codeframe-margin: var(--spacing-xs) 0 0 0;
+  --compilation-error-codeframe-padding: var(--spacing-xs);
+  --compilation-error-block-padding: var(--spacing-base);
+  --compilation-error-block-margin: var(--spacing-xl) 0;
+  --compilation-error-title-font-size: var(--font-size-xl);
+  --compilation-error-header-font-size: var(--font-size-lg);
+  --compilation-error-text-font-size: var(--font-size-base);
+  --compilation-error-header-padding: var(--spacing-sm);
+  --compilation-error-container-margin: var(--spacing-xxl) auto;
+  --compilation-error-container-padding: var(--spacing-lg);
+  --compilation-error-page-max-width: 800px;
+  --compilation-error-font-family: var(--font-family-base);  
+  --compilation-error-fix-instruction-margin: var(--spacing-sm) 0 0 0;
+  --compilation-error-highlighted-text-padding: 0 var(--spacing-xxs);
+  --compilation-error-divider-margin: var(--spacing-base) 0;
+  --compilation-error-file-header-margin: 0 0 var(--spacing-xs) 0;
 `;
 const modal = (0, styled_components_1.css) `
   body:has(.scroll-lock) {

package/lib/core/types/l10n.d.ts

@@ -1,5 +1,5 @@
 import type { TOptions } from 'i18next';
-export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.aiButton' | 'search.ai.label' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeLayout' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.settings.reasons.send' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'page.nextButton' | 'page.previousButton' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.deprecated' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.noResponseExample' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.scopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'codeWalkthrough.download' | 'codeWalkthrough.preview';
+export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeLayout' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.settings.reasons.send' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'page.nextButton' | 'page.previousButton' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.deprecated' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.noResponseExample' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.scopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'codeWalkthrough.download' | 'codeWalkthrough.preview';
 export type Locale = {
     code: string;
     name: string;

package/lib/core/utils/download-code-walkthrough.d.ts

@@ -1,4 +1,6 @@
-import type { CodeWalkthroughFile, InputsState } from '@redocly/config';
+import type { CodeWalkthroughFile } from '@redocly/config';
 export declare function downloadCodeWalkthrough(files: CodeWalkthroughFile[], state: Record<string, {
     value: string | boolean;
-}>, inputsState: InputsState): Promise<void>;
+}>, inputsState: Record<string, {
+    value: string;
+}>): Promise<void>;

package/lib/core/utils/download-code-walkthrough.js

@@ -21,9 +21,17 @@ jszip_1.default.support.nodebuffer = false;
 function downloadCodeWalkthrough(files, state, inputsState) {
     return __awaiter(this, void 0, void 0, function* () {
         const zip = new jszip_1.default();
+        const filePaths = files.map(({ path }) => path);
+        const commonClosestDirectory = (0, utils_1.findClosestCommonDirectory)(filePaths);
         for (const file of files) {
             const fileContent = (0, utils_1.getCodeWalkthroughFileText)(file, state, inputsState);
-            zip.file(file.basename, fileContent);
+            if (commonClosestDirectory === '/') {
+                zip.file(file.path, fileContent);
+            }
+            else {
+                const filePath = file.path.replace((0, utils_1.removeLeadingSlash)(`${commonClosestDirectory}/`), '');
+                zip.file(filePath, fileContent);
+            }
         }
         const zipContent = yield zip.generateAsync({ type: 'blob' });
         (0, file_saver_1.saveAs)(zipContent, 'sample-code.zip');

package/lib/core/utils/find-closest-common-directory.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Finds the closest common directory for a set of file paths.
+ * @param paths - An array of absolute file paths.
+ * @returns The closest common directory as a string.
+ */
+export declare function findClosestCommonDirectory(paths: string[]): string;

package/lib/core/utils/find-closest-common-directory.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findClosestCommonDirectory = findClosestCommonDirectory;
+/**
+ * Splits a file path into its directory components, removing the file name.
+ * @param path - The full file path.
+ * @returns An array of directories.
+ */
+function splitPath(path) {
+    const parts = path.split('/').filter(Boolean);
+    parts.pop();
+    return parts;
+}
+/**
+ * Finds the longest common prefix between two paths.
+ * @param path1 - The first path as an array of directories.
+ * @param path2 - The second path as an array of directories.
+ * @returns An array representing the common prefix.
+ */
+function findCommonPrefix(path1, path2) {
+    const common = [];
+    for (let i = 0; i < Math.min(path1.length, path2.length); i++) {
+        if (path1[i] === path2[i]) {
+            common.push(path1[i]);
+        }
+        else {
+            break;
+        }
+    }
+    return common;
+}
+/**
+ * Finds the closest common directory for a set of file paths.
+ * @param paths - An array of absolute file paths.
+ * @returns The closest common directory as a string.
+ */
+function findClosestCommonDirectory(paths) {
+    if (paths.length === 0) {
+        return '/';
+    }
+    const splitPaths = paths.map(splitPath);
+    let commonPrefix = splitPaths[0];
+    for (let i = 1; i < splitPaths.length; i++) {
+        commonPrefix = findCommonPrefix(commonPrefix, splitPaths[i]);
+        if (commonPrefix.length === 0) {
+            return '/';
+        }
+    }
+    return '/' + commonPrefix.join('/');
+}
+//# sourceMappingURL=find-closest-common-directory.js.map

package/lib/core/utils/get-code-walkthrough-file-text.d.ts

@@ -1,4 +1,6 @@
-import type { CodeWalkthroughFile, InputsState } from '@redocly/config';
+import type { CodeWalkthroughFile } from '@redocly/config';
 export declare function getCodeWalkthroughFileText(file: CodeWalkthroughFile, state: Record<string, {
     value: string | boolean;
-}>, inputsState: InputsState): string;
+}>, inputsState: Record<string, {
+    value: string;
+}>): string;

package/lib/core/utils/get-file-icon.js

@@ -11,6 +11,9 @@ const DocumentHtmlIcon_1 = require("../../icons/DocumentHtmlIcon/DocumentHtmlIco
 const DocumentReactIcon_1 = require("../../icons/DocumentReactIcon/DocumentReactIcon");
 const DocumentMarkdownIcon_1 = require("../../icons/DocumentMarkdownIcon/DocumentMarkdownIcon");
 const DocumentGraphqlIcon_1 = require("../../icons/DocumentGraphqlIcon/DocumentGraphqlIcon");
+const DocumentPythonIcon_1 = require("../../icons/DocumentPythonIcon/DocumentPythonIcon");
+const DocumentShellIcon_1 = require("../../icons/DocumentShellIcon/DocumentShellIcon");
+const DocumentJavaIcon_1 = require("../../icons/DocumentJavaIcon/DocumentJavaIcon");
 const fileIconMap = {
     yaml: DocumentYamlIcon_1.DocumentYamlIcon,
     yml: DocumentYamlIcon_1.DocumentYamlIcon,
@@ -24,6 +27,9 @@ const fileIconMap = {
     md: DocumentMarkdownIcon_1.DocumentMarkdownIcon,
     graphql: DocumentGraphqlIcon_1.DocumentGraphqlIcon,
     gql: DocumentGraphqlIcon_1.DocumentGraphqlIcon,
+    py: DocumentPythonIcon_1.DocumentPythonIcon,
+    sh: DocumentShellIcon_1.DocumentShellIcon,
+    java: DocumentJavaIcon_1.DocumentJavaIcon,
 };
 function getFileIconByExt(ext) {
     return fileIconMap[ext] || DocumentBlankIcon_1.DocumentBlankIcon;

package/lib/core/utils/index.d.ts

@@ -30,3 +30,4 @@ export * from '../../core/utils/download-code-walkthrough';
 export * from '../../core/utils/get-file-icon';
 export * from '../../core/utils/match-code-walkthrough-conditions';
 export * from '../../core/utils/replace-inputs-with-value';
+export * from '../../core/utils/find-closest-common-directory';

package/lib/core/utils/index.js

@@ -46,4 +46,5 @@ __exportStar(require("../../core/utils/download-code-walkthrough"), exports);
 __exportStar(require("../../core/utils/get-file-icon"), exports);
 __exportStar(require("../../core/utils/match-code-walkthrough-conditions"), exports);
 __exportStar(require("../../core/utils/replace-inputs-with-value"), exports);
+__exportStar(require("../../core/utils/find-closest-common-directory"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/utils/replace-inputs-with-value.d.ts

@@ -1,3 +1,3 @@
 export declare function replaceInputsWithValue(node: string, inputs: Record<string, {
-    value: string;
+    value?: string;
 }>): string;

package/lib/core/utils/replace-inputs-with-value.js

@@ -1,16 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.replaceInputsWithValue = replaceInputsWithValue;
-const inputRegex = /(?:\/\*|<!--|#|\/\/)\s*@redocly-input\s*\{"id":\s*"(.*?)"\}\s*(?:\*\/|-->)?/g;
 function replaceInputsWithValue(node, inputs) {
-    return node.replace(inputRegex, (match, inputKey) => {
-        var _a;
-        if (Object.prototype.hasOwnProperty.call(inputs, inputKey)) {
-            return (_a = inputs[inputKey]) === null || _a === void 0 ? void 0 : _a.value;
-        }
-        else {
-            return match;
-        }
-    });
+    const validKeys = Object.entries(inputs)
+        .filter(([_, input]) => input.value)
+        .map(([key]) => key)
+        .join('|');
+    if (!validKeys) {
+        return node;
+    }
+    const inputRegex = new RegExp(`\\{\\{\\s*(${validKeys})\\s*\\}\\}`, 'g');
+    return node.replace(inputRegex, (_, inputKey) => { var _a; return (_a = inputs[inputKey]) === null || _a === void 0 ? void 0 : _a.value; });
 }
 //# sourceMappingURL=replace-inputs-with-value.js.map

package/lib/icons/DocumentJavaIcon/DocumentJavaIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const DocumentJavaIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string;
+    size?: string;
+    className?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/DocumentJavaIcon/DocumentJavaIcon.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DocumentJavaIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M2 13H14V14H2V13ZM14 2H3.5C3.36739 2 3.24021 2.05268 3.14645 2.14645C3.05268 2.24021 3 2.36739 3 2.5V9C3 9.53043 3.21071 10.0391 3.58579 10.4142C3.96086 10.7893 4.46957 11 5 11H10C10.5304 11 11.0391 10.7893 11.4142 10.4142C11.7893 10.0391 12 9.53043 12 9V7H14C14.2652 7 14.5196 6.89464 14.7071 6.70711C14.8946 6.51957 15 6.26522 15 6V3C15 2.73478 14.8946 2.48043 14.7071 2.29289C14.5196 2.10536 14.2652 2 14 2ZM14 6H12V3H14V6Z", fill: "#3B3C45" })));
+exports.DocumentJavaIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/DocumentJavaIcon/DocumentJavaIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=DocumentJavaIcon.js.map

package/lib/icons/DocumentJavaIcon/index.d.ts

@@ -0,0 +1 @@
+export { DocumentJavaIcon } from '../../icons/DocumentJavaIcon/DocumentJavaIcon';

package/lib/icons/DocumentJavaIcon/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DocumentJavaIcon = void 0;
+var DocumentJavaIcon_1 = require("../../icons/DocumentJavaIcon/DocumentJavaIcon");
+Object.defineProperty(exports, "DocumentJavaIcon", { enumerable: true, get: function () { return DocumentJavaIcon_1.DocumentJavaIcon; } });
+//# sourceMappingURL=index.js.map

package/lib/icons/DocumentPythonIcon/DocumentPythonIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const DocumentPythonIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string;
+    size?: string;
+    className?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/DocumentPythonIcon/DocumentPythonIcon.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DocumentPythonIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M6.57325 1.33301C6.06757 1.33301 5.5826 1.53389 5.22504 1.89146C4.86747 2.24903 4.66659 2.734 4.66659 3.23967V4.35967H7.52659C7.78659 4.35967 7.99992 4.73967 7.99992 4.99967H3.23992C2.73424 4.99967 2.24927 5.20055 1.8917 5.55812C1.53413 5.91569 1.33325 6.40066 1.33325 6.90634V9.42701C1.33325 9.93269 1.53413 10.4177 1.8917 10.7752C2.24927 11.1328 2.73424 11.3337 3.23992 11.3337H4.02659V9.54701C4.02571 9.29694 4.07421 9.04915 4.1693 8.81786C4.26439 8.58657 4.4042 8.37633 4.58072 8.19919C4.75724 8.02206 4.96699 7.88151 5.19794 7.78561C5.4289 7.6897 5.67651 7.64034 5.92659 7.64034H9.42659C10.4799 7.64034 11.3333 6.79301 11.3333 5.73967V3.23967C11.3333 2.734 11.1324 2.24903 10.7748 1.89146C10.4172 1.53389 9.93227 1.33301 9.42659 1.33301H6.57325ZM6.09325 2.40634C6.35992 2.40634 6.57325 2.48634 6.57325 2.87967C6.57325 3.27301 6.35992 3.47367 6.09325 3.47367C5.83325 3.47367 5.61992 3.27367 5.61992 2.88034C5.61992 2.48701 5.83325 2.40634 6.09325 2.40634Z", fill: "#3B3C45" }),
+    react_1.default.createElement("path", { d: "M11.9727 4.66699V6.45366C11.9735 6.70367 11.925 6.95139 11.8298 7.1826C11.7347 7.41381 11.5949 7.62397 11.4184 7.80104C11.2419 7.97811 11.0321 8.1186 10.8012 8.21446C10.5703 8.31032 10.3228 8.35966 10.0727 8.35966H6.57341C6.32334 8.35878 6.07556 8.40728 5.84427 8.50237C5.61298 8.59746 5.40274 8.73727 5.2256 8.91379C5.04846 9.09031 4.90791 9.30006 4.81201 9.53102C4.71611 9.76197 4.66675 10.0096 4.66675 10.2597V12.7597C4.66675 13.2653 4.86763 13.7503 5.2252 14.1079C5.58277 14.4654 6.06774 14.6663 6.57341 14.6663H9.42675C9.93231 14.6663 10.4172 14.4655 10.7747 14.1081C11.1323 13.7507 11.3332 13.2659 11.3334 12.7603V11.6403H8.47275C8.21275 11.6403 8.00008 11.2603 8.00008 11.0003H12.7601C13.2658 11.0003 13.7507 10.7994 14.1083 10.4419C14.4659 10.0843 14.6667 9.59934 14.6667 9.09366V6.57366C14.6667 6.06798 14.4659 5.58301 14.1083 5.22544C13.7507 4.86787 13.2658 4.66699 12.7601 4.66699H11.9727ZM5.54675 7.67566L5.54408 7.67833L5.56941 7.67566H5.54675ZM9.90675 12.5263C10.1667 12.5263 10.3801 12.7263 10.3801 13.1197C10.3801 13.1818 10.3678 13.2434 10.3441 13.3008C10.3203 13.3582 10.2854 13.4104 10.2414 13.4544C10.1975 13.4983 10.1453 13.5332 10.0879 13.557C10.0305 13.5807 9.96891 13.593 9.90675 13.593C9.64008 13.593 9.42675 13.513 9.42675 13.1197C9.42675 12.7263 9.64008 12.5263 9.90675 12.5263Z", fill: "#3B3C45" })));
+exports.DocumentPythonIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/DocumentPythonIcon/DocumentPythonIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=DocumentPythonIcon.js.map

package/lib/icons/DocumentPythonIcon/index.d.ts

@@ -0,0 +1 @@
+export { DocumentPythonIcon } from '../../icons/DocumentPythonIcon/DocumentPythonIcon';

package/lib/icons/DocumentPythonIcon/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DocumentPythonIcon = void 0;
+var DocumentPythonIcon_1 = require("../../icons/DocumentPythonIcon/DocumentPythonIcon");
+Object.defineProperty(exports, "DocumentPythonIcon", { enumerable: true, get: function () { return DocumentPythonIcon_1.DocumentPythonIcon; } });
+//# sourceMappingURL=index.js.map

package/lib/icons/DocumentShellIcon/DocumentShellIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const DocumentShellIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string;
+    size?: string;
+    className?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/DocumentShellIcon/DocumentShellIcon.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DocumentShellIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M14.5351 2.99992H3.83862C3.6752 3.00407 3.51738 3.06029 3.38814 3.16039C3.25891 3.26049 3.16501 3.39924 3.12012 3.55642L1.02012 12.4434C0.998149 12.5106 0.993246 12.5822 1.00585 12.6518C1.01845 12.7213 1.04817 12.7867 1.09232 12.8419C1.13646 12.8971 1.19365 12.9404 1.25874 12.968C1.32382 12.9956 1.39474 13.0066 1.46512 12.9999H12.1616C12.3249 12.9957 12.4827 12.9394 12.6118 12.8393C12.7409 12.7392 12.8348 12.6005 12.8796 12.4434L14.9801 3.55592C15.002 3.48876 15.0068 3.41722 14.9942 3.34773C14.9815 3.27825 14.9518 3.213 14.9076 3.15785C14.8635 3.10271 14.8064 3.05941 14.7413 3.03184C14.6763 3.00427 14.6054 2.9933 14.5351 2.99992ZM4.31312 11.8984C4.16872 11.9865 3.99731 12.0194 3.83057 11.9909C3.66383 11.9624 3.51306 11.8745 3.40612 11.7434L3.40262 11.7389C3.35483 11.6781 3.32075 11.6076 3.30269 11.5324C3.28463 11.4572 3.28302 11.3789 3.29797 11.303C3.31292 11.2271 3.34409 11.1554 3.38933 11.0926C3.43457 11.0298 3.49283 10.9776 3.56012 10.9394L8.36012 7.90892L5.30912 4.98292L5.30412 4.97792C5.24784 4.92482 5.20377 4.86011 5.17497 4.78829C5.14616 4.71647 5.13332 4.63924 5.13731 4.56196C5.14131 4.48469 5.16205 4.4092 5.1981 4.34073C5.23416 4.27226 5.28466 4.21244 5.34612 4.16542L5.36462 4.15042C5.49395 4.04749 5.65594 3.9944 5.82112 4.00082C5.98629 4.00725 6.14367 4.07275 6.26462 4.18542L9.88112 7.66392C9.96402 7.76867 10.006 7.90001 9.99912 8.03342C9.99485 8.11013 9.97427 8.18504 9.93875 8.25316C9.90323 8.32127 9.85358 8.38102 9.79312 8.42842C9.75612 8.44842 9.72012 8.48792 4.31762 11.8959L4.31312 11.8984ZM12.0001 11.4699C11.9905 11.6194 11.9221 11.7589 11.81 11.8582C11.6979 11.9575 11.5511 12.0084 11.4016 11.9999H8.58462C8.51096 12.0071 8.43662 11.9987 8.36638 11.9754C8.29614 11.9521 8.23156 11.9144 8.17677 11.8646C8.12199 11.8149 8.07822 11.7542 8.04828 11.6865C8.01834 11.6188 8.00289 11.5457 8.00293 11.4716C8.00296 11.3976 8.01848 11.3245 8.04848 11.2568C8.07849 11.1892 8.12231 11.1285 8.17714 11.0788C8.23197 11.0291 8.2966 10.9915 8.36686 10.9682C8.43712 10.945 8.51147 10.9367 8.58512 10.9439H11.4016C11.5503 10.9353 11.6965 10.9855 11.8085 11.0837C11.9205 11.182 11.9893 11.3203 12.0001 11.4689V11.4699Z", fill: "#3B3C45" })));
+exports.DocumentShellIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/DocumentShellIcon/DocumentShellIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=DocumentShellIcon.js.map

package/lib/icons/DocumentShellIcon/index.d.ts

@@ -0,0 +1 @@
+export { DocumentShellIcon } from '../../icons/DocumentShellIcon/DocumentShellIcon';

package/lib/icons/DocumentShellIcon/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DocumentShellIcon = void 0;
+var DocumentShellIcon_1 = require("../../icons/DocumentShellIcon/DocumentShellIcon");
+Object.defineProperty(exports, "DocumentShellIcon", { enumerable: true, get: function () { return DocumentShellIcon_1.DocumentShellIcon; } });
+//# sourceMappingURL=index.js.map

package/lib/icons/__tests__/IconTestUtils.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+export declare function testIconComponent(IconComponent: React.ComponentType<any>, componentName: string): {
+    rendersCorrectlyWithDefaultProps: () => void;
+    appliesCustomSizeAndColor: () => void;
+    hasCorrectDataComponentName: () => void;
+};

package/lib/icons/__tests__/IconTestUtils.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.testIconComponent = testIconComponent;
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+function testIconComponent(IconComponent, componentName) {
+    const dataName = `icons/${componentName}/${componentName}`;
+    return {
+        rendersCorrectlyWithDefaultProps: () => {
+            const { container } = (0, react_2.render)(react_1.default.createElement(IconComponent, null));
+            const svgElement = container.querySelector('svg');
+            expect(svgElement).toBeInTheDocument();
+            expect(container.firstChild).toHaveStyle('height: 16px; width: 16px;');
+        },
+        appliesCustomSizeAndColor: () => {
+            const { container } = (0, react_2.render)(react_1.default.createElement(IconComponent, { size: "24px", color: "--color-primary" }));
+            const svgElement = container.querySelector('svg');
+            expect(svgElement).toBeInTheDocument();
+            expect(container.firstChild).toHaveStyle('height: 24px; width: 24px;');
+            const pathElement = container.querySelector('path');
+            expect(pathElement).toHaveStyle('fill: var(--color-primary);');
+        },
+        hasCorrectDataComponentName: () => {
+            const { container } = (0, react_2.render)(react_1.default.createElement(IconComponent, null));
+            expect(container.firstChild).toHaveAttribute('data-component-name', dataName);
+        },
+    };
+}
+//# sourceMappingURL=IconTestUtils.js.map

package/lib/layouts/CodeWalkthroughLayout.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeWalkthroughLayout = CodeWalkthroughLayout;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
+const core_1 = require("../core");
 function CodeWalkthroughLayout({ className, children, }) {
     return (react_1.default.createElement(LayoutWrapper, { "data-component-name": "Layout/CodeWalkthroughLayout", className: className },
         react_1.default.createElement(ContentWrapper, null, children)));
@@ -59,8 +60,10 @@ const ContentWrapper = styled_components_1.default.section `
 
     /* Full-width styling for all .code-walkthroughs */
     .code-walkthrough {
-      max-width: none;
       width: 100%;
+      max-width: ${core_1.breakpoints.max};
+      margin-left: auto;
+      margin-right: auto;
     }
 
     &:first-child > h1:first-child {

package/lib/markdoc/components/CodeWalkthrough/CodeContainer.js

@@ -36,14 +36,35 @@ function CodeContainer({ highlightedCode, toolbar, }) {
         // useEffect executed before DOM is updated due to re-render called before "painting" phase.
         setTimeout(() => {
             if (compRef.current) {
-                const element = compRef.current.querySelector('span.line.highlighted');
-                if (element) {
-                    element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
+                const highlightedLines = Array.from(compRef.current.querySelectorAll('span.line.highlighted'));
+                const { bottom: panelBottom, top: panelTop } = compRef.current.getBoundingClientRect();
+                const linesBelow = [];
+                const linesAbove = [];
+                for (const highlightedLine of highlightedLines) {
+                    const { bottom: lineBottom, top: lineTop } = highlightedLine.getBoundingClientRect();
+                    const below = lineBottom > panelBottom;
+                    const above = lineTop < panelTop;
+                    if (below) {
+                        linesBelow.push(highlightedLine);
+                    }
+                    else if (above) {
+                        linesAbove.push(highlightedLine);
+                    }
+                }
+                if ((linesBelow.length && linesAbove.length) || linesAbove.length) {
+                    linesAbove[0].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
+                }
+                else if (linesBelow.length) {
+                    linesBelow[linesBelow.length - 1].scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'nearest',
+                        inline: 'start',
+                    });
                 }
             }
         }, 200);
     }, [activeStep]);
-    return (react_1.default.createElement(CodeContainerWrapper, { ref: compRef, hideCodeColors: !isHovered, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false) },
+    return (react_1.default.createElement(CodeContainerWrapper, { "data-component-name": "Markdoc/CodeWalkthrough/CodeContainer", ref: compRef, hideCodeColors: !isHovered, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false) },
         react_1.default.createElement(CodeBlockContainer_1.CodeBlockContainer, { dangerouslySetInnerHTML: { __html: highlightedCode } }),
         toolbar));
 }

package/lib/markdoc/components/CodeWalkthrough/CodeFilters.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
 import type { CodeWalkthroughFilter } from '@redocly/config';
+export type GetFilterState = (groupId: string) => {
+    value: string;
+    render: boolean;
+} | null;
 export type CodeFilterProps = {
     filters: CodeWalkthroughFilter[];
-    getFilterState: (groupId: string) => {
-        value: string;
-        render: boolean;
-    } | null;
+    getFilterState: GetFilterState;
     handleFilterSelect: (groupId: string, id: string) => void;
     filtersElementRef?: React.RefObject<HTMLDivElement>;
 };

package/lib/markdoc/components/CodeWalkthrough/CodeFilters.js

@@ -11,7 +11,7 @@ function CodeFilters({ filters, getFilterState, handleFilterSelect, filtersEleme
     if (filters.length === 0) {
         return null;
     }
-    return (react_1.default.createElement(FilterWrapper, { ref: filtersElementRef }, filters.map(({ label, items, id }) => {
+    return (react_1.default.createElement(FilterWrapper, { ref: filtersElementRef, "data-component-name": "Markdoc/CodeWalkthrough/CodeFilters" }, filters.map(({ label, items, id }) => {
         return (react_1.default.createElement(Filter, { key: id },
             label && react_1.default.createElement(FilterName, null,
                 label,
@@ -24,8 +24,9 @@ function CodeFilters({ filters, getFilterState, handleFilterSelect, filtersEleme
 }
 const Filter = styled_components_1.default.div `
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: var(--spacing-xs);
+  max-width: 100%;
 `;
 const FilterName = styled_components_1.default.div `
   color: var(--color-text-primary);
@@ -46,13 +47,25 @@ const FilterWrapper = styled_components_1.default.div `
   top: calc(var(--navbar-height));
   background-color: var(--bg-color);
   z-index: 1;
+  max-width: var(--md-content-max-width);
 `;
 const ButtonsWrapper = styled_components_1.default.div `
   display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
 `;
 const TagButton = (0, styled_components_1.default)(Tag_1.Tag) `
   cursor: pointer;
   padding: 0px var(--spacing-xs);
   margin-right: var(--spacing-xs);
+  max-width: 100%;
+  margin-bottom: var(--spacing-xs);
+
+  ${Tag_1.ContentWrapper} {
+    display: inline-block;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
 `;
 //# sourceMappingURL=CodeFilters.js.map

package/lib/markdoc/components/CodeWalkthrough/CodePanel.js

@@ -38,7 +38,7 @@ const CodePanelToolbar_1 = require("../../../markdoc/components/CodeWalkthrough/
 function CodePanel({ files, downloadAssociatedFiles, preview, }) {
     const { activeFile, handleTabSwitch, highlightedCode } = (0, hooks_1.useCodePanel)(files);
     const { handleDownloadCode } = (0, react_1.useContext)(contexts_1.CodeWalkthroughControlsStateContext);
-    return (react_1.default.createElement(CodePanelWrapper, null,
+    return (react_1.default.createElement(CodePanelWrapper, { "data-component-name": "Markdoc/CodeWalkthrough/CodePanel" },
         preview ? (react_1.default.createElement(CodePanelPreview_1.CodePanelPreview, null, preview.map((element, idx) => (react_1.default.createElement(react_1.default.Fragment, { key: idx }, element))))) : null,
         react_1.default.createElement(CodePanelHeader_1.CodePanelHeader, { files: files, activeTabName: (activeFile === null || activeFile === void 0 ? void 0 : activeFile.path) || '', handleTabSwitch: handleTabSwitch, onDownloadCode: () => handleDownloadCode([...files, ...downloadAssociatedFiles]) }),
         react_1.default.createElement(CodeContainer_1.CodeContainer, { key: (activeFile === null || activeFile === void 0 ? void 0 : activeFile.path) || '', highlightedCode: highlightedCode, toolbar: react_1.default.createElement(CodePanelToolbar_1.CodePanelToolbar, { file: activeFile }) })));