@redocly/theme 0.47.0 → 0.48.0

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

@@ -0,0 +1,155 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodePanelHeader = CodePanelHeader;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const hooks_1 = require("../../../core/hooks");
+const utils_1 = require("../../../core/utils");
+const OverflowMenuVerticalIcon_1 = require("../../../icons/OverflowMenuVerticalIcon/OverflowMenuVerticalIcon");
+const Dropdown_1 = require("../../../components/Dropdown/Dropdown");
+const DropdownMenu_1 = require("../../../components/Dropdown/DropdownMenu");
+const DropdownMenuItem_1 = require("../../../components/Dropdown/DropdownMenuItem");
+const DownloadIcon_1 = require("../../../icons/DownloadIcon/DownloadIcon");
+const Button_1 = require("../../../components/Button/Button");
+function CodePanelHeader({ files, handleTabSwitch, activeTabName, onDownloadCode, }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const tabRefs = (0, react_1.useRef)([]);
+    const tabsWrapperRef = (0, react_1.useRef)(null);
+    const [hiddenFiles, setHiddenFiles] = (0, react_1.useState)([]);
+    (0, react_1.useEffect)(() => {
+        const activeTab = tabRefs.current.find((tab) => (tab === null || tab === void 0 ? void 0 : tab.dataset.name) === activeTabName);
+        if (activeTab) {
+            activeTab.scrollIntoView({ block: 'nearest', inline: 'center' });
+        }
+    }, [activeTabName]);
+    (0, react_1.useEffect)(() => {
+        const calculateHiddenFiles = () => {
+            if (!tabsWrapperRef.current)
+                return;
+            const { left: wrapperLeft, right: wrapperRight } = tabsWrapperRef.current.getBoundingClientRect();
+            const hidden = files.filter((_, i) => {
+                const tab = tabRefs.current[i];
+                if (!tab)
+                    return false;
+                const { left: tabLeft, right: tabRight } = tab.getBoundingClientRect();
+                return tabLeft < wrapperLeft || tabRight > wrapperRight;
+            });
+            setHiddenFiles(hidden);
+        };
+        calculateHiddenFiles();
+        window.addEventListener('resize', calculateHiddenFiles);
+        return () => window.removeEventListener('resize', calculateHiddenFiles);
+    }, [files]);
+    const getFileTypeIcon = (0, react_1.useCallback)((basename) => {
+        var _a;
+        const extension = ((_a = basename.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '';
+        return (0, utils_1.getFileIconByExt)(extension);
+    }, []);
+    return (react_1.default.createElement(CodePanelHeaderWrapper, { "data-component-name": "Markdoc/CodeWalkthrough/CodePanelHeader" },
+        react_1.default.createElement(TabsWrapper, { ref: tabsWrapperRef },
+            react_1.default.createElement(Tabs, null, files.map(({ path, basename }, i) => {
+                const FileIcon = getFileTypeIcon(basename);
+                return (react_1.default.createElement(Tab, { ref: (el) => (tabRefs.current[i] = el), "data-name": path, active: path === activeTabName, key: i, onClick: () => handleTabSwitch(path) },
+                    react_1.default.createElement(FileIcon, null),
+                    basename));
+            })),
+            react_1.default.createElement(Gradient, null)),
+        react_1.default.createElement(ActionBar, null,
+            hiddenFiles.length ? (react_1.default.createElement(Dropdown_1.Dropdown, { trigger: react_1.default.createElement(StyledOverflowMenuVerticalIcon, { size: "14px" }), alignment: "end" },
+                react_1.default.createElement(StyledDropdownMenu, null, hiddenFiles.map(({ path, basename }, i) => {
+                    const FileIcon = getFileTypeIcon(basename);
+                    return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { active: path === activeTabName, key: i, onAction: () => handleTabSwitch(path), prefix: react_1.default.createElement(FileIcon, null), content: basename }));
+                })))) : null,
+            react_1.default.createElement(Button_1.Button, { variant: "text", icon: react_1.default.createElement(DownloadIcon_1.DownloadIcon, null), onClick: onDownloadCode, size: "small" }, translate('codeWalkthrough.download', 'Download')))));
+}
+const CodePanelHeaderWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-sm);
+  max-width: 100%;
+`;
+const TabsWrapper = styled_components_1.default.div `
+  display: flex;
+  position: relative;
+  min-width: 0;
+`;
+const Gradient = styled_components_1.default.div `
+  position: absolute;
+  right: 0;
+  width: var(--spacing-base);
+  height: var(--code-panel-header-height);
+  background: var(--bg-raised-gradient);
+`;
+const Tabs = styled_components_1.default.div `
+  display: flex;
+  overflow-x: auto;
+  padding-right: var(--spacing-base);
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+const ActionBar = styled_components_1.default.div `
+  display: flex;
+`;
+const Tab = styled_components_1.default.button `
+  display: inline-flex;
+  align-items: center;
+  padding: 0 var(--spacing-sm);
+  background-color: transparent;
+  height: var(--code-panel-header-height);
+  border-radius: var(--border-radius);
+  cursor: pointer;
+  gap: var(--spacing-xs);
+  color: var(--text-color-secondary);
+  white-space: nowrap;
+
+  ${({ active }) => active
+    ? (0, styled_components_1.css) `
+          color: var(--text-color-primary);
+          background-color: var(--tab-bg-color-filled);
+        `
+    : (0, styled_components_1.css) `
+          &:hover {
+            color: var(--text-color-primary);
+          }
+        `}
+`;
+// code-walk-todo: figure it our why we could not do it differently
+const StyledDropdownMenu = (0, styled_components_1.default)(DropdownMenu_1.DropdownMenu) `
+  --md-list-left-padding: var(--dropdown-menu-padding);
+`;
+const StyledOverflowMenuVerticalIcon = (0, styled_components_1.default)(OverflowMenuVerticalIcon_1.OverflowMenuVerticalIcon) `
+  && {
+    outline: none;
+    box-sizing: content-box;
+    padding: 5px;
+  }
+`;
+//# sourceMappingURL=CodePanelHeader.js.map

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

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from 'react';
+export declare function CodePanelPreview({ children }: PropsWithChildren): JSX.Element;

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

@@ -0,0 +1,73 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodePanelPreview = CodePanelPreview;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const hooks_1 = require("../../../core/hooks");
+const ChevronUpIcon_1 = require("../../../icons/ChevronUpIcon/ChevronUpIcon");
+const ChevronDownIcon_1 = require("../../../icons/ChevronDownIcon/ChevronDownIcon");
+function CodePanelPreview({ children }) {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    return (react_1.default.createElement(CodePanelPreviewWrapper, null,
+        react_1.default.createElement(PreviewDropdown, { onClick: () => setIsOpen(!isOpen) },
+            translate('codeWalkthrough.preview', 'Preview'),
+            isOpen ? react_1.default.createElement(ChevronUpIcon_1.ChevronUpIcon, null) : react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, null)),
+        react_1.default.createElement(PreviewContentWrapper, { isOpen: isOpen }, children)));
+}
+const CodePanelPreviewWrapper = styled_components_1.default.div `
+  width: 100%;
+  padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-sm);
+  border-bottom: 1px solid var(--border-color-secondary);
+`;
+const PreviewDropdown = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+
+  gap: (--spacing-xxs);
+
+  user-select: none;
+
+  font-size: var(--font-size-base);
+  cursor: pointer;
+`;
+const PreviewContentWrapper = styled_components_1.default.div `
+  display: ${({ isOpen }) => (isOpen ? 'grid' : 'none')};
+  place-items: center;
+
+  margin: auto 0;
+
+  max-height: 50vh;
+  width: 100%;
+  max-width: 100%;
+
+  overflow: auto;
+`;
+//# sourceMappingURL=CodePanelPreview.js.map

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

@@ -0,0 +1,5 @@
+import type { CodeWalkthroughFile } from '@redocly/config';
+export type CodeToolbarProps = {
+    file: CodeWalkthroughFile;
+};
+export declare function CodePanelToolbar({ file }: CodeToolbarProps): JSX.Element;

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

@@ -0,0 +1,47 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodePanelToolbar = CodePanelToolbar;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const contexts_1 = require("../../../core/contexts");
+const CopyButton_1 = require("../../../components/Buttons/CopyButton");
+function CodePanelToolbar({ file }) {
+    const { getFileText } = (0, react_1.useContext)(contexts_1.CodeWalkthroughControlsStateContext);
+    const fileContent = getFileText(file);
+    return (react_1.default.createElement(CodeToolbarWrapper, null,
+        react_1.default.createElement(CopyButton_1.CopyButton, { data: fileContent, type: "compound", variant: "secondary", size: "medium" })));
+}
+const CodeToolbarWrapper = styled_components_1.default.div `
+  display: flex;
+  position: absolute;
+  bottom: var(--spacing-sm);
+  right: var(--spacing-sm);
+  gap: var(--spacing-xs);
+`;
+//# sourceMappingURL=CodePanelToolbar.js.map

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

@@ -0,0 +1,12 @@
+import React, { type PropsWithChildren } from 'react';
+import type { WithConditions } from '@redocly/config';
+export type CodeStepProps = WithConditions<{
+    id: string;
+    stepKey: number;
+    heading?: string;
+}>;
+export declare function CodeStep({ id, heading, stepKey, when, unless, children, }: PropsWithChildren<CodeStepProps>): React.JSX.Element | null;
+export declare const StepWrapper: import("styled-components").StyledComponent<"div", any, {
+    isActive: boolean;
+    scrollMarginTop: number;
+}, never>;

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

@@ -0,0 +1,128 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StepWrapper = void 0;
+exports.CodeStep = CodeStep;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const contexts_1 = require("../../../core/contexts");
+function CodeStep({ id, heading, stepKey, when, unless, children, }) {
+    const compRef = (0, react_1.useRef)(null);
+    const { areConditionsMet } = (0, react_1.useContext)(contexts_1.CodeWalkthroughControlsStateContext);
+    const { activeStep, setActiveStep, register, unregister, lockObserver, filtersElementRef } = (0, react_1.useContext)(contexts_1.CodeWalkthroughStepsContext);
+    const isActive = activeStep === id;
+    const [scrollMarginTop, setScrollMarginTop] = (0, react_1.useState)(0);
+    const handleActivateStep = () => {
+        if (lockObserver) {
+            lockObserver.current = true;
+            if (compRef.current) {
+                compRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            }
+            setActiveStep(id);
+            setTimeout(() => {
+                lockObserver.current = false;
+            }, 1000);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        // If the step is active during first render, scroll to it
+        // This is to ensure that the step is visible when the page is loaded
+        if (isActive) {
+            handleActivateStep();
+        }
+        // Ignore dependency array because we only need to run this once
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        const currentCompRef = compRef.current;
+        if (currentCompRef) {
+            currentCompRef
+                .querySelectorAll('a, button, input, textarea, select, [tabindex]')
+                .forEach((el) => {
+                el.setAttribute('tabindex', '-1');
+            });
+            register(currentCompRef);
+        }
+        const filtersElementHeight = ((_a = filtersElementRef === null || filtersElementRef === void 0 ? void 0 : 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;
+        setScrollMarginTop(filtersElementHeight + navbarHeight);
+        return () => {
+            if (currentCompRef) {
+                unregister(currentCompRef);
+            }
+        };
+    }, [activeStep, register, unregister, filtersElementRef]);
+    if (!areConditionsMet({ when, unless })) {
+        return null;
+    }
+    return (react_1.default.createElement(exports.StepWrapper, { ref: compRef, isActive: isActive, scrollMarginTop: scrollMarginTop, "data-step-key": stepKey, "data-step-active": isActive, onClick: handleActivateStep, onFocus: handleActivateStep, tabIndex: 0 },
+        react_1.default.createElement(StepContent, { isActive: isActive },
+            heading ? react_1.default.createElement(StepHeading, null, heading) : null,
+            children)));
+}
+const StepContent = styled_components_1.default.div `
+  margin: var(--spacing-xs) 0px var(--spacing-xs) calc(var(--spacing-unit) * 3.5);
+  padding: var(--spacing-md) var(--spacing-lg);
+  background: ${({ isActive }) => (isActive ? 'var(--layer-color)' : 'none')};
+  border-radius: var(--border-radius);
+
+  &:hover {
+    background-color: ${({ isActive }) => isActive ? 'var(--code-step-bg-active-hover)' : 'var(--code-step-bg-hover)'};
+  }
+`;
+const StepHeading = styled_components_1.default.p `
+  font-weight: var(--font-weight-semibold);
+`;
+exports.StepWrapper = styled_components_1.default.div `
+  position: relative;
+  scroll-margin-top: ${({ scrollMarginTop }) => scrollMarginTop}px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: 6px;
+    height: 100%;
+    background-color: ${({ isActive }) => isActive ? 'var(--code-step-vertical-line-bg-active)' : 'none'};
+    border-radius: var(--border-radius-lg);
+  }
+  &:hover::before {
+    background-color: ${({ isActive }) => isActive
+    ? 'var(--code-step-vertical-line-bg-active)'
+    : 'var(--code-step-vertical-line-bg-hover)'};
+  }
+
+  &:hover::before {
+    width: ${({ isActive }) => (isActive ? '8px' : '6px')};
+  }
+
+  &:hover ${StepContent} {
+    background-color: ${({ isActive }) => isActive ? 'var(--code-step-bg-active-hover)' : 'var(--code-step-bg-hover)'};
+  }
+`;
+//# sourceMappingURL=CodeStep.js.map

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

@@ -0,0 +1,9 @@
+import React from 'react';
+export type CodeToggleProps = React.PropsWithChildren<{
+    id: string;
+    label: string;
+    description?: React.ReactNode[];
+}>;
+export declare function CodeToggle(props: CodeToggleProps): React.JSX.Element | null;
+export declare const ToggleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ToggleSubtitle: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,69 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToggleSubtitle = exports.ToggleWrapper = void 0;
+exports.CodeToggle = CodeToggle;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const contexts_1 = require("../../../core/contexts");
+const CodeStep_1 = require("../../../markdoc/components/CodeWalkthrough/CodeStep");
+const Switch_1 = require("../../../components/Switch/Switch");
+function CodeToggle(props) {
+    const { id, label, description, children } = props;
+    const { getToggleState, changeToggleState } = (0, react_1.useContext)(contexts_1.CodeWalkthroughControlsStateContext);
+    const toggleState = getToggleState(id);
+    if (!(toggleState && toggleState.render)) {
+        return null;
+    }
+    const checked = toggleState.value;
+    return (react_1.default.createElement(exports.ToggleWrapper, null,
+        react_1.default.createElement(ToggleContentWrapper, null,
+            react_1.default.createElement(exports.ToggleSubtitle, null,
+                react_1.default.createElement(Switch_1.Switch, { value: checked, onChange: (newValue) => changeToggleState(id, newValue) }),
+                react_1.default.createElement("div", null, label)),
+            description ? (react_1.default.createElement("div", null, description.map((paragraph, idx) => (react_1.default.createElement(react_1.default.Fragment, { key: idx }, paragraph))))) : null),
+        checked ? children : null));
+}
+exports.ToggleWrapper = styled_components_1.default.div `
+  ${CodeStep_1.StepWrapper} {
+    margin-left: 0;
+  }
+`;
+exports.ToggleSubtitle = styled_components_1.default.div `
+  display: flex;
+  gap: var(--spacing-sm);
+  align-items: center;
+  font-weight: var(--font-weight-bold);
+`;
+const ToggleContentWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xs) 0;
+`;
+//# sourceMappingURL=CodeToggle.js.map

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

@@ -0,0 +1,4 @@
+import React, { type PropsWithChildren } from 'react';
+import type { CodeWalkthroughAttr } from '@redocly/config';
+export type CodeWalkthroughProps = PropsWithChildren<CodeWalkthroughAttr>;
+export declare function CodeWalkthrough({ children, steps, preview, ...attributes }: CodeWalkthroughProps): React.JSX.Element;

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

@@ -0,0 +1,121 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeWalkthrough = CodeWalkthrough;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const contexts_1 = require("../../../core/contexts");
+const CodePanel_1 = require("../../../markdoc/components/CodeWalkthrough/CodePanel");
+const hooks_1 = require("../../../core/hooks");
+const CodeFilters_1 = require("../../../markdoc/components/CodeWalkthrough/CodeFilters");
+const CodeStep_1 = require("../../../markdoc/components/CodeWalkthrough/CodeStep");
+function CodeWalkthrough(_a) {
+    var { children, steps, preview } = _a, attributes = __rest(_a, ["children", "steps", "preview"]);
+    // Steps are being modified causing the observer to be recreated in the useCodeWalkthrough hook
+    // This is a workaround to prevent the observer from being recreated
+    const [initialSteps] = (0, react_1.useState)([...steps]);
+    const { controlsState, stepsState, files, downloadAssociatedFiles } = (0, hooks_1.useCodeWalkthrough)(initialSteps, attributes);
+    const { activeFilters, getFilterState, changeFilterState } = controlsState;
+    const { filtersElementRef } = stepsState;
+    return (react_1.default.createElement(contexts_1.CodeWalkthroughStepsContext.Provider, { value: stepsState },
+        react_1.default.createElement(contexts_1.CodeWalkthroughControlsStateContext.Provider, { value: controlsState },
+            react_1.default.createElement(CodeWalkthroughWrapper, { className: "code-walkthrough" },
+                react_1.default.createElement(DocsPanel, null,
+                    react_1.default.createElement(CodeFilters_1.CodeFilters, { filters: activeFilters, getFilterState: getFilterState, handleFilterSelect: changeFilterState, filtersElementRef: filtersElementRef }),
+                    react_1.default.createElement(ContentWrapper, null, children)),
+                react_1.default.createElement(CodePanel_1.CodePanel, { files: files, downloadAssociatedFiles: downloadAssociatedFiles, preview: preview })))));
+}
+const CodeWalkthroughWrapper = styled_components_1.default.div `
+  display: grid;
+  grid-template-columns: 4fr 6fr;
+
+  padding-right: var(--spacing-xl);
+
+  border-top: 1px solid var(--border-color-secondary);
+  border-bottom: 1px solid var(--border-color-secondary);
+
+  &:first-child {
+    border-top: none;
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+`;
+const DocsPanel = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+
+  min-height: 0;
+  min-height: calc(100vh - var(--navbar-height));
+
+  padding-right: var(--spacing-xs);
+  padding-bottom: calc(var(--spacing-xs) + var(--spacing-xl));
+  gap: var(--spacing-xl);
+`;
+const ContentWrapper = styled_components_1.default.div `
+  flex-grow: 1;
+
+  min-height: 0;
+  max-width: var(--md-content-max-width);
+
+  & > *:not(${CodeStep_1.StepWrapper}) {
+    padding-left: var(--spacing-xl);
+  }
+  overflow-y: scroll;
+
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  /* Hide scrollbar for IE, Edge and Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+
+  &:first-child {
+    padding-top: var(--spacing-sm);
+  }
+
+  &:not(:first-child) {
+    & > *:first-child {
+      margin-top: 0;
+    }
+  }
+`;
+//# sourceMappingURL=CodeWalkthrough.js.map

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export type InputProps = {
+    id: string;
+    label?: string;
+    placeholder?: string;
+    value?: string;
+};
+export declare function Input(props: InputProps): React.JSX.Element | null;