@redocly/theme 0.48.0 → 0.48.1

package/lib/components/Feedback/Mood.js

@@ -22,15 +22,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MOOD_STATES = void 0;
 exports.Mood = Mood;
 const React = __importStar(require("react"));
 const react_1 = require("react");
-const styled_components_1 = __importDefault(require("styled-components"));
+const styled_components_1 = __importStar(require("styled-components"));
 const Reasons_1 = require("../../components/Feedback/Reasons");
 const hooks_1 = require("../../core/hooks");
 const RadioCheckButtonIcon_1 = require("../../icons/RadioCheckButtonIcon/RadioCheckButtonIcon");
@@ -134,14 +131,14 @@ function Mood({ settings, onSubmit, className }) {
     if (isSubmitted) {
         return (React.createElement(MoodWrapper, { "data-component-name": "Feedback/Mood" },
             React.createElement(StyledFormMandatoryFields, null,
-                React.createElement(Label, { "data-translation-key": "feedback.settings.submitText" }, submitText ||
+                React.createElement(Label, { standAlone: true, "data-translation-key": "feedback.settings.submitText" }, submitText ||
                     translate('feedback.settings.submitText', 'Thank you for helping improve our documentation!')),
                 React.createElement(RadioCheckButtonIcon_1.RadioCheckButtonIcon, null))));
     }
     return (React.createElement(MoodWrapper, { "data-component-name": "Feedback/Mood", className: className },
         React.createElement(StyledForm, { onSubmit: onSubmitMoodForm },
             React.createElement(StyledFormMandatoryFields, null,
-                React.createElement(Label, { "data-translation-key": "feedback.settings.label" }, label || translate('feedback.settings.label', 'Was this helpful?')),
+                React.createElement(Label, { standAlone: true, "data-translation-key": "feedback.settings.label" }, label || translate('feedback.settings.label', 'Was this helpful?')),
                 React.createElement(StyledMandatoryFieldContainer, null,
                     React.createElement(Button_1.Button, { "aria-label": MOOD_STATES.DISSATISFIED, type: "button", size: "medium", variant: score === MOOD_STATES.DISSATISFIED ? 'primary' : 'secondary', tone: score === MOOD_STATES.DISSATISFIED ? 'danger' : 'default', onClick: () => {
                             setScore(MOOD_STATES.DISSATISFIED);
@@ -189,9 +186,17 @@ const MoodWrapper = styled_components_1.default.div `
 const Label = styled_components_1.default.h4 `
   font-family: var(--feedback-font-family);
   font-weight: var(--font-weight-regular);
-  font-size: var(--feedback-header-font-size);
-  line-height: var(--feedback-header-line-height);
-  color: var(--feedback-header-text-color);
+  font-size: var(--feedback-font-size);
+  line-height: var(--feedback-line-height);
+  color: var(--feedback-text-color);
+
+  ${({ standAlone = false }) => standAlone &&
+    (0, styled_components_1.css) `
+      font-size: var(--feedback-header-font-size);
+      line-height: var(--feedback-header-line-height);
+      color: var(--feedback-header-text-color);
+    `}
+
   margin: 0;
 `;
 const ButtonsContainer = styled_components_1.default.div `

package/lib/components/Search/SearchDialog.js

@@ -120,7 +120,7 @@ function SearchDialog({ onClose, className }) {
                                 setQuery('');
                                 aiSearch.askQuestion(query);
                             }
-                        } }, translate('search.aiButton', 'Search with AI'))) : null,
+                        } }, translate('search.ai.button', 'Search with AI'))) : null,
                     showSearchFilterButton && (react_1.default.createElement(SearchFilterToggleButton, { icon: react_1.default.createElement(SettingsIcon_1.SettingsIcon, null), onClick: onFilterToggle }))))),
             react_1.default.createElement(SearchDialogBody, null, mode === 'search' ? (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(SearchDialogBodyMainView, null,
@@ -139,7 +139,7 @@ function SearchDialog({ onClose, className }) {
                         react_1.default.createElement(SearchSuggestedPages_1.SearchSuggestedPages, null)))),
                 advancedSearch && mode === 'search' && isFilterOpen && (react_1.default.createElement(SearchDialogBodyFilterView, null,
                     react_1.default.createElement(SearchFilter_1.SearchFilter, { facets: facets, filter: filter, query: query, quickFilterFields: [groupField], onFilterChange: onFilterChange, onFilterReset: onFilterReset, onFacetReset: onFacetReset }))))) : (react_1.default.createElement(SearchAiResponse_1.SearchAiResponse, { question: aiSearch.question, isGeneratingResponse: aiSearch.isGeneratingResponse, response: aiSearch.response, resources: aiSearch.resources }))),
-            mode === 'search' && (react_1.default.createElement(SearchDialogFooter, null,
+            react_1.default.createElement(SearchDialogFooter, null, mode === 'ai-dialog' ? (react_1.default.createElement(AiDisclaimer, null, translate('search.ai.disclaimer', 'AI search might provide incomplete or incorrect results. Verify important information.'))) : (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(SearchShortcuts, null,
                     react_1.default.createElement(SearchShortcut_1.SearchShortcut, { "data-translation-key": "search.keys.navigate", combination: "Tab", text: translate('search.keys.navigate', 'to navigate') }),
                     react_1.default.createElement(SearchShortcut_1.SearchShortcut, { "data-translation-key": "search.keys.select", combination: "\u23CE", text: translate('search.keys.select', 'to select') }),
@@ -147,7 +147,7 @@ function SearchDialog({ onClose, className }) {
                 isSearchLoading && (react_1.default.createElement(SearchLoading, null,
                     react_1.default.createElement(SpinnerLoader_1.SpinnerLoader, { size: "16px", color: "var(--search-input-icon-color)" }),
                     translate('search.loading', 'Loading...'))),
-                react_1.default.createElement(SearchCancelButton, { "data-translation-key": "search.cancel", variant: "secondary", size: "small", onClick: onClose }, translate('search.cancel', 'Cancel')))))));
+                react_1.default.createElement(SearchCancelButton, { "data-translation-key": "search.cancel", variant: "secondary", size: "small", onClick: onClose }, translate('search.cancel', 'Cancel'))))))));
 }
 const SearchOverlay = styled_components_1.default.div `
   position: fixed;
@@ -296,4 +296,10 @@ const SearchHeaderButtons = styled_components_1.default.div `
   padding-left: var(--search-header-buttons-padding-left);
   border-left: var(--search-header-buttons-border-left);
 `;
+const AiDisclaimer = styled_components_1.default.div `
+  font-size: var(--search-ai-disclaimer-font-size);
+  line-height: var(--search-ai-disclaimer-line-height);
+  color: var(--search-ai-disclaimer-text-color);
+  margin: 0 auto;
+`;
 //# sourceMappingURL=SearchDialog.js.map

package/lib/components/Search/variables.js

@@ -178,6 +178,10 @@ exports.search = (0, styled_components_1.css) `
   --search-ai-resource-tag-text-color: var(--text-color-secondary);
   --search-ai-resource-tag-icon-color: var(--text-color-secondary);
 
+  --search-ai-disclaimer-font-size: var(--font-size-sm);
+  --search-ai-disclaimer-line-height: var(--line-height-sm);
+  --search-ai-disclaimer-text-color: var(--text-color-secondary);
+
   // @tokens End
 `;
 //# sourceMappingURL=variables.js.map

package/lib/components/Segmented/Segmented.d.ts

@@ -1,4 +1,4 @@
-import type { ReactElement } from 'react';
+import type { ForwardedRef, ReactElement } from 'react';
 import type { SelectOption } from '../../core/types/select';
 export type SegmentedProps<T> = {
     options: SelectOption<T>[];
@@ -7,6 +7,6 @@ export type SegmentedProps<T> = {
     className?: string;
     size?: 'regular' | 'small';
 };
-declare function SegmentedComponent<T>({ options, onChange, value, className, size, }: SegmentedProps<T>): ReactElement;
-export declare const Segmented: typeof SegmentedComponent;
-export {};
+export declare const Segmented: <T>(props: SegmentedProps<T> & {
+    ref?: ForwardedRef<HTMLDivElement>;
+}) => ReactElement;

package/lib/components/Segmented/Segmented.js

@@ -22,18 +22,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Segmented = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const typedMemo_1 = require("../../core/hoc/typedMemo");
-function SegmentedComponent({ options, onChange, value, className = '', size = 'regular', }) {
-    return (react_1.default.createElement(SegmentedGroup, { "data-component-name": "Segmented/Segmented", className: `tag-grey ${size} ${className}`, role: "tablist" }, options.map((opt) => (react_1.default.createElement(SegmentedItem, { key: opt.label, role: "tab", title: opt.label, onClick: () => onChange(opt), "$isActive": value == opt.value, "$size": size }, opt.label)))));
+function SegmentedComponent({ options, onChange, value, className = '', size = 'regular' }, ref) {
+    return (react_1.default.createElement(SegmentedGroup, { ref: ref, "data-component-name": "Segmented/Segmented", className: `tag-grey ${size} ${className}`, role: "tablist" }, options.map((opt) => (react_1.default.createElement(SegmentedItem, { key: opt.label, role: "tab", title: opt.label, onClick: () => onChange(opt), "$isActive": value == opt.value, "$size": size }, opt.label)))));
 }
-exports.Segmented = (0, typedMemo_1.typedMemo)(SegmentedComponent);
+exports.Segmented = (0, typedMemo_1.typedMemo)((0, react_1.forwardRef)(SegmentedComponent));
 const SegmentedGroup = styled_components_1.default.div `
   display: flex;
   background: var(--segmented-buttons-bg-color-main);

package/lib/components/Tag/Tag.d.ts

@@ -21,4 +21,5 @@ export type TagProps = {
     onClose?: (event: React.MouseEvent) => void;
 };
 export declare function Tag({ children, color, icon, active, closable, onClick, onClose, size, borderless, withStatusDot, statusDotColor, ...otherProps }: TagProps): JSX.Element;
+export declare const ContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

package/lib/components/Tag/Tag.js

@@ -14,6 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentWrapper = void 0;
 exports.Tag = Tag;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
@@ -23,14 +24,14 @@ function Tag(_a) {
     var { children, color, icon, active, closable, onClick, onClose, size, borderless, withStatusDot, statusDotColor = 'var(--tag-status-dot-color-default)' } = _a, otherProps = __rest(_a, ["children", "color", "icon", "active", "closable", "onClick", "onClose", "size", "borderless", "withStatusDot", "statusDotColor"]);
     return (react_1.default.createElement(TagWrapper, Object.assign({ "data-component-name": "Tag/Tag", borderless: borderless, color: color, size: size, onClick: onClick, hasCloseButton: closable }, otherProps),
         withStatusDot ? react_1.default.createElement(StatusDot, { color: statusDotColor }) : icon ? icon : null,
-        react_1.default.createElement(ContentWrapper, null, children),
+        react_1.default.createElement(exports.ContentWrapper, null, children),
         closable && (react_1.default.createElement(CloseButton, { onClick: (event) => {
                 onClose === null || onClose === void 0 ? void 0 : onClose(event);
             } },
             react_1.default.createElement(CloseIcon_1.CloseIcon, null))),
         active && react_1.default.createElement(ActiveIcon, null)));
 }
-const ContentWrapper = styled_components_1.default.div `
+exports.ContentWrapper = styled_components_1.default.div `
   display: inline-flex;
   align-items: center;
   justify-content: center;

package/lib/core/hooks/code-walkthrough/use-code-walkthrough-controls.d.ts

@@ -19,4 +19,4 @@ export type WalkthroughControlsState = {
     getFileText: (file: CodeWalkthroughFile) => string;
     populateInputsWithValue: (node: string) => string;
 };
-export declare function useCodeWalkthroughControls(filters: Record<string, CodeWalkthroughFilter>, inputs: InputsMarkdocAttr, toggles: TogglesMarkdocAttr): WalkthroughControlsState;
+export declare function useCodeWalkthroughControls(filters: Record<string, CodeWalkthroughFilter>, inputs: InputsMarkdocAttr, toggles: TogglesMarkdocAttr, enableDeepLink: boolean): WalkthroughControlsState;

package/lib/core/hooks/code-walkthrough/use-code-walkthrough-controls.js

@@ -9,14 +9,14 @@ const defaultControlsValues = {
     toggle: false,
     filter: '',
 };
-function useCodeWalkthroughControls(filters, inputs, toggles) {
+function useCodeWalkthroughControls(filters, inputs, toggles, enableDeepLink) {
     const location = (0, react_router_dom_1.useLocation)();
     const navigate = (0, react_router_dom_1.useNavigate)();
     const searchParams = (0, react_1.useMemo)(() => new URLSearchParams(location.search), [location.search]);
     const [togglesState, setTogglesState] = (0, react_1.useState)(() => {
         const initialState = {};
         for (const [id, toggle] of Object.entries(toggles)) {
-            initialState[id] = Object.assign(Object.assign({}, toggle), { render: true, type: 'toggle', value: searchParams.get(id) === 'true' });
+            initialState[id] = Object.assign(Object.assign({}, toggle), { render: true, type: 'toggle', value: enableDeepLink ? searchParams.get(id) === 'true' : false });
         }
         return initialState;
     });
@@ -44,9 +44,10 @@ function useCodeWalkthroughControls(filters, inputs, toggles) {
         }
     };
     const [inputsState, setInputsState] = (0, react_1.useState)(() => {
+        var _a;
         const initialState = {};
         for (const [id, input] of Object.entries(inputs)) {
-            initialState[id] = Object.assign(Object.assign({}, input), { render: true, type: 'input', value: searchParams.get(id) || input.value });
+            initialState[id] = Object.assign(Object.assign({}, input), { render: true, type: 'input', value: enableDeepLink ? ((_a = searchParams.get(id)) !== null && _a !== void 0 ? _a : input.value) : input.value });
         }
         return initialState;
     });
@@ -74,10 +75,11 @@ function useCodeWalkthroughControls(filters, inputs, toggles) {
         }
     };
     const [filtersState, setFiltersState] = (0, react_1.useState)(() => {
-        var _a, _b;
+        var _a, _b, _c;
         const initialState = {};
         for (const [id, filter] of Object.entries(filters)) {
-            initialState[id] = Object.assign(Object.assign({}, filter), { render: true, type: 'filter', value: searchParams.get(id) || ((_b = (_a = filter === null || filter === void 0 ? void 0 : filter.items) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.value) || '' });
+            const defaultValue = ((_b = (_a = filter === null || filter === void 0 ? void 0 : filter.items) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.value) || '';
+            initialState[id] = Object.assign(Object.assign({}, filter), { render: true, type: 'filter', value: enableDeepLink ? ((_c = searchParams.get(id)) !== null && _c !== void 0 ? _c : defaultValue) : defaultValue });
         }
         return initialState;
     });
@@ -157,6 +159,9 @@ function useCodeWalkthroughControls(filters, inputs, toggles) {
      * Update the URL search params with the current state of the filters and inputs
      */
     (0, react_1.useEffect)(() => {
+        if (!enableDeepLink) {
+            return;
+        }
         const newSearchParams = new URLSearchParams(Array.from(searchParams.entries()));
         for (const [id, { value }] of Object.entries(state)) {
             if (value) {

package/lib/core/hooks/code-walkthrough/use-code-walkthrough-steps.d.ts

@@ -1,7 +1,6 @@
 import type { CodeWalkthroughStepAttr } from '@redocly/config';
 type ActiveStep = string | null;
 type CodeWalkthroughStep = CodeWalkthroughStepAttr & {
-    active?: boolean;
     compRef?: HTMLElement;
 };
 export type WalkthroughStepsState = {
@@ -12,5 +11,5 @@ export type WalkthroughStepsState = {
     lockObserver?: React.MutableRefObject<boolean>;
     filtersElementRef?: React.RefObject<HTMLDivElement>;
 };
-export declare function useCodeWalkthroughSteps(steps: CodeWalkthroughStep[]): WalkthroughStepsState;
+export declare function useCodeWalkthroughSteps(steps: CodeWalkthroughStep[], enableDeepLink: boolean): WalkthroughStepsState;
 export {};

package/lib/core/hooks/code-walkthrough/use-code-walkthrough-steps.js

@@ -5,7 +5,7 @@ const react_1 = require("react");
 const react_router_dom_1 = require("react-router-dom");
 const utils_1 = require("../../../core/utils");
 const constants_1 = require("../../../core/constants");
-function useCodeWalkthroughSteps(steps) {
+function useCodeWalkthroughSteps(steps, enableDeepLink) {
     const location = (0, react_router_dom_1.useLocation)();
     const navigate = (0, react_router_dom_1.useNavigate)();
     const searchParams = (0, react_1.useMemo)(() => new URLSearchParams(location.search), [location.search]);
@@ -14,7 +14,7 @@ function useCodeWalkthroughSteps(steps) {
     const lockObserver = (0, react_1.useRef)(false);
     // Track observed elements in case new observer needs to be created
     const observedElementsRef = (0, react_1.useRef)(new Set());
-    const [activeStep, setActiveStep] = (0, react_1.useState)(searchParams.get(constants_1.ACTIVE_STEP_QUERY_PARAM));
+    const [activeStep, setActiveStep] = (0, react_1.useState)(enableDeepLink ? searchParams.get(constants_1.ACTIVE_STEP_QUERY_PARAM) : null);
     const register = (0, react_1.useCallback)((element) => {
         // for some reason, the observer is not ready immediately
         setTimeout(() => {
@@ -43,27 +43,29 @@ function useCodeWalkthroughSteps(steps) {
         if (lockObserver.current) {
             return;
         }
-        const stepsEntries = [];
+        const renderedSteps = steps.filter((step) => Boolean(step.compRef));
+        if (renderedSteps.length < 2) {
+            setActiveStep(((_a = renderedSteps[0]) === null || _a === void 0 ? void 0 : _a.id) || null);
+            return;
+        }
         for (const entry of entries) {
-            const { target } = entry;
-            const stepKey = Number((_a = target === null || target === void 0 ? void 0 : target.dataset) === null || _a === void 0 ? void 0 : _a.stepKey);
-            const stepActive = ((_b = target === null || target === void 0 ? void 0 : target.dataset) === null || _b === void 0 ? void 0 : _b.stepActive) === 'true';
+            const stepKey = Number((_c = (_b = entry.target) === null || _b === void 0 ? void 0 : _b.dataset) === null || _c === void 0 ? void 0 : _c.stepKey);
             if (!Number.isInteger(stepKey) || stepKey < 0) {
                 continue;
             }
+            const { intersectionRatio, boundingClientRect, rootBounds, isIntersecting } = entry;
             const step = steps[stepKey];
-            step.active = stepActive;
-            stepsEntries.push(entry);
-        }
-        for (const stepEntry of stepsEntries) {
-            const { target, intersectionRatio, boundingClientRect, rootBounds, isIntersecting } = stepEntry;
-            const stepKey = Number((_c = target === null || target === void 0 ? void 0 : target.dataset) === null || _c === void 0 ? void 0 : _c.stepKey);
-            const step = steps[stepKey];
-            const renderedSteps = steps.filter((step) => Boolean(step.compRef));
             const stepIndex = renderedSteps.findIndex((renderedStep) => renderedStep.stepKey === step.stepKey);
             const { next } = (0, utils_1.getAdjacentValues)(renderedSteps, stepIndex);
             const intersectionAtTop = (rootBounds === null || rootBounds === void 0 ? void 0 : rootBounds.bottom) !== undefined && boundingClientRect.top < rootBounds.top;
             const stepGoesIn = isIntersecting;
+            if (intersectionRatio > 0.8 &&
+                intersectionRatio < 1 &&
+                intersectionAtTop &&
+                activeStep === null) {
+                setActiveStep(step.id);
+                break;
+            }
             if (intersectionRatio < 1 && intersectionRatio !== 0 && intersectionAtTop) {
                 let newStep = null;
                 if (stepGoesIn) {
@@ -84,7 +86,7 @@ function useCodeWalkthroughSteps(steps) {
         const filtersElementHeight = ((_a = filtersElementRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) || 0;
         const navbarHeight = ((_b = document.querySelector('nav')) === null || _b === void 0 ? void 0 : _b.clientHeight) || 0;
         const newObserver = new IntersectionObserver(observerCallback, {
-            threshold: [0.8],
+            threshold: [0.8, 0.85, 0.9, 0.95],
             rootMargin: `-${filtersElementHeight + navbarHeight}px 0px 0px 0px`,
         });
         for (const observedElement of observedElementsRef.current) {
@@ -98,6 +100,9 @@ function useCodeWalkthroughSteps(steps) {
      * Update the URL search params with the current state of the filters and inputs
      */
     (0, react_1.useEffect)(() => {
+        if (!enableDeepLink) {
+            return;
+        }
         const newSearchParams = new URLSearchParams(Array.from(searchParams.entries()));
         if (activeStep) {
             newSearchParams.set(constants_1.ACTIVE_STEP_QUERY_PARAM, activeStep);

package/lib/core/hooks/code-walkthrough/use-code-walkthrough.d.ts

@@ -1,4 +1,4 @@
-import type { CodeWalkthroughFileset, CodeWalkthroughFile, CodeWalkthroughStepAttr, CodeWalkthroughFilter, InputsMarkdocAttr, TogglesMarkdocAttr } from '@redocly/config';
+import type { CodeWalkthroughFile, CodeWalkthroughStepAttr, CodeWalkthroughAttr } from '@redocly/config';
 import { type WalkthroughControlsState, type WalkthroughStepsState } from '../../../core/hooks';
 export type WalkthroughState = {
     stepsState: WalkthroughStepsState;
@@ -6,9 +6,4 @@ export type WalkthroughState = {
     downloadAssociatedFiles: CodeWalkthroughFile[];
     files: CodeWalkthroughFile[];
 };
-export declare function useCodeWalkthrough(steps: CodeWalkthroughStepAttr[], attributes: {
-    filters: Record<string, CodeWalkthroughFilter>;
-    filesets: CodeWalkthroughFileset[];
-    inputs: InputsMarkdocAttr;
-    toggles: TogglesMarkdocAttr;
-}): WalkthroughState;
+export declare function useCodeWalkthrough(steps: CodeWalkthroughStepAttr[], attributes: Omit<CodeWalkthroughAttr, 'steps' | 'preview'>): WalkthroughState;

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

@@ -3,9 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCodeWalkthrough = useCodeWalkthrough;
 const hooks_1 = require("../../../core/hooks");
 function useCodeWalkthrough(steps, attributes) {
-    const { filters, filesets, inputs, toggles } = attributes;
-    const stepsState = (0, hooks_1.useCodeWalkthroughSteps)(steps);
-    const controlsState = (0, hooks_1.useCodeWalkthroughControls)(filters, inputs, toggles);
+    const { filters, filesets, inputs, toggles, __idx } = attributes;
+    /*
+      We only enable deep linking for the first CodeWalkthrough,
+      because we don't expect more than one on the same page.
+      Any subsequent walkthroughs have it disabled to avoid
+      collisions/conflicts in the URL.
+    */
+    const enableDeepLink = __idx === 1;
+    const stepsState = (0, hooks_1.useCodeWalkthroughSteps)(steps, enableDeepLink);
+    const controlsState = (0, hooks_1.useCodeWalkthroughControls)(filters, inputs, toggles, enableDeepLink);
     const files = filesets
         .filter((fileset) => controlsState.areConditionsMet(fileset))
         .flatMap((fileset) => fileset.files || []);

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

@@ -0,0 +1,9 @@
+import type { CodeWalkthroughFile } from '@redocly/config';
+import type { IconProps } from '../../../icons/types';
+export type RenderableFile = CodeWalkthroughFile & {
+    FileIcon: React.FunctionComponent<IconProps>;
+    parentFolder: string;
+    isNameDuplicate: boolean;
+    inRootDir: boolean;
+};
+export declare function useRenderableFiles(files: CodeWalkthroughFile[]): RenderableFile[];

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/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.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-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;