@redocly/theme 0.56.0-rc.2 → 0.56.1

package/lib/layouts/CodeWalkthroughLayout.js

@@ -6,7 +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");
+const utils_1 = require("@redocly/theme/core/utils");
 function CodeWalkthroughLayout({ className, children, }) {
     return (react_1.default.createElement(LayoutWrapper, { "data-component-name": "Layout/CodeWalkthroughLayout", className: className },
         react_1.default.createElement(ContentWrapper, null, children)));
@@ -61,7 +61,7 @@ const ContentWrapper = styled_components_1.default.section `
     /* Full-width styling for all .code-walkthroughs */
     .code-walkthrough {
       width: 100%;
-      max-width: ${core_1.breakpoints.max};
+      max-width: ${utils_1.breakpoints.max};
       margin-left: auto;
       margin-right: auto;
     }

package/lib/layouts/DocumentationLayout.js

@@ -6,25 +6,29 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DocumentationLayout = DocumentationLayout;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const EditPageButton_1 = require("../components/Buttons/EditPageButton");
-const utils_1 = require("../core/utils");
-const PageNavigation_1 = require("../components/PageNavigation/PageNavigation");
-const LastUpdated_1 = require("../components/LastUpdated/LastUpdated");
-const Breadcrumbs_1 = require("../components/Breadcrumbs/Breadcrumbs");
+const EditPageButton_1 = require("@redocly/theme/components/Buttons/EditPageButton");
+const utils_1 = require("@redocly/theme/core/utils");
+const PageNavigation_1 = require("@redocly/theme/components/PageNavigation/PageNavigation");
+const LastUpdated_1 = require("@redocly/theme/components/LastUpdated/LastUpdated");
+const Breadcrumbs_1 = require("@redocly/theme/components/Breadcrumbs/Breadcrumbs");
+const CodeSnippetContext_1 = require("../core/contexts/CodeSnippetContext");
+const use_local_state_1 = require("../core/hooks/use-local-state");
 function DocumentationLayout({ tableOfContent, feedback, config, editPage, lastModified, nextPage, prevPage, className, children, }) {
     var _a;
     const { editPage: themeEditPage } = config || {};
     const mergedConf = editPage ? Object.assign(Object.assign({}, themeEditPage), editPage) : undefined;
-    return (react_1.default.createElement(LayoutWrapper, { "data-component-name": "Layout/DocumentationLayout", className: className },
-        react_1.default.createElement(ContentWrapper, { withToc: !((_a = config === null || config === void 0 ? void 0 : config.toc) === null || _a === void 0 ? void 0 : _a.hide) },
-            react_1.default.createElement(Breadcrumbs, null),
-            react_1.default.createElement(LayoutTop, null,
-                lastModified && react_1.default.createElement(LastUpdated_1.LastUpdated, { lastModified: new Date(lastModified) }),
-                mergedConf && react_1.default.createElement(EditPageButton_1.EditPageButton, { to: mergedConf.to })),
-            children,
-            react_1.default.createElement(LayoutBottom, null, feedback),
-            react_1.default.createElement(PageNavigation_1.PageNavigation, { nextPage: nextPage, prevPage: prevPage })),
-        tableOfContent));
+    const [activeSnippetName, setActiveSnippetName] = (0, use_local_state_1.useLocalState)(CodeSnippetContext_1.CODE_GROUP_SNIPPET_NAME_KEY, '');
+    return (react_1.default.createElement(CodeSnippetContext_1.CodeSnippetContext.Provider, { value: { activeSnippetName, setActiveSnippetName } },
+        react_1.default.createElement(LayoutWrapper, { "data-component-name": "Layout/DocumentationLayout", className: className },
+            react_1.default.createElement(ContentWrapper, { withToc: !((_a = config === null || config === void 0 ? void 0 : config.toc) === null || _a === void 0 ? void 0 : _a.hide) },
+                react_1.default.createElement(Breadcrumbs, null),
+                react_1.default.createElement(LayoutTop, null,
+                    lastModified && react_1.default.createElement(LastUpdated_1.LastUpdated, { lastModified: new Date(lastModified) }),
+                    mergedConf && react_1.default.createElement(EditPageButton_1.EditPageButton, { to: mergedConf.to })),
+                children,
+                react_1.default.createElement(LayoutBottom, null, feedback),
+                react_1.default.createElement(PageNavigation_1.PageNavigation, { nextPage: nextPage, prevPage: prevPage })),
+            tableOfContent)));
 }
 const LayoutWrapper = styled_components_1.default.div.attrs(({ className }) => ({
     className,

package/lib/layouts/Forbidden.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Forbidden = Forbidden;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const hooks_1 = require("../core/hooks");
-const Button_1 = require("../components/Button/Button");
+const hooks_1 = require("@redocly/theme/core/hooks");
+const Button_1 = require("@redocly/theme/components/Button/Button");
 function Forbidden() {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();

package/lib/layouts/InternalServerErrorLayout.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InternalServerErrorLayout = InternalServerErrorLayout;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const hooks_1 = require("../core/hooks");
-const Button_1 = require("../components/Button/Button");
-const ArrowLeftIcon_1 = require("../icons/ArrowLeftIcon/ArrowLeftIcon");
+const hooks_1 = require("@redocly/theme/core/hooks");
+const Button_1 = require("@redocly/theme/components/Button/Button");
+const ArrowLeftIcon_1 = require("@redocly/theme/icons/ArrowLeftIcon/ArrowLeftIcon");
 function InternalServerErrorLayout() {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();

package/lib/layouts/NotFound.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NotFound = NotFound;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const hooks_1 = require("../core/hooks");
-const Button_1 = require("../components/Button/Button");
-const ArrowLeftIcon_1 = require("../icons/ArrowLeftIcon/ArrowLeftIcon");
+const hooks_1 = require("@redocly/theme/core/hooks");
+const Button_1 = require("@redocly/theme/components/Button/Button");
+const ArrowLeftIcon_1 = require("@redocly/theme/icons/ArrowLeftIcon/ArrowLeftIcon");
 function NotFound() {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();

package/lib/layouts/OIDCForbidden.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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 __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,7 +40,7 @@ exports.OIDCForbidden = OIDCForbidden;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const react_router_dom_1 = require("react-router-dom");
-const hooks_1 = require("../core/hooks");
+const hooks_1 = require("@redocly/theme/core/hooks");
 function OIDCForbidden() {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();

package/lib/layouts/PageLayout.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageLayout = PageLayout;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const utils_1 = require("../core/utils");
-const constants_1 = require("../core/constants");
+const utils_1 = require("@redocly/theme/core/utils");
+const constants_1 = require("@redocly/theme/core/constants");
 function PageLayout({ sidebar, children, }) {
     return (react_1.default.createElement(Container, { "data-component-name": "Layout/PageLayout" },
         sidebar,

package/lib/layouts/RootLayout.js

@@ -5,9 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RootLayout = RootLayout;
 const react_1 = __importDefault(require("react"));
-const Navbar_1 = require("../components/Navbar/Navbar");
-const Footer_1 = require("../components/Footer/Footer");
-const SkipContent_1 = require("../components/SkipContent/SkipContent");
+const Navbar_1 = require("@redocly/theme/components/Navbar/Navbar");
+const Footer_1 = require("@redocly/theme/components/Footer/Footer");
+const SkipContent_1 = require("@redocly/theme/components/SkipContent/SkipContent");
 function RootLayout({ children }) {
     return (react_1.default.createElement("div", { "data-component-name": "layouts/RootLayout" },
         react_1.default.createElement(SkipContent_1.SkipContent, null),

package/lib/layouts/ThreePanelLayout.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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 __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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)
@@ -41,7 +51,7 @@ exports.ThreePanelLayout = ThreePanelLayout;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const config_1 = require("@redocly/config");
-const media_css_1 = require("../core/utils/media-css");
+const media_css_1 = require("@redocly/theme/core/utils/media-css");
 function ThreePanelLayout(_a) {
     var { children } = _a, props = __rest(_a, ["children"]);
     return (react_1.default.createElement(Wrapper, Object.assign({ "data-component-name": "Layout/ThreePanelLayout" }, props), children));

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

@@ -1,3 +1,3 @@
 import React from 'react';
-import { type AdmonitionProps } from '../../../components/Admonition/Admonition';
+import { type AdmonitionProps } from '@redocly/theme/components/Admonition/Admonition';
 export declare function Admonition(props: React.PropsWithChildren<AdmonitionProps>): React.JSX.Element;

package/lib/markdoc/components/Admonition/Admonition.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Admonition = Admonition;
 const react_1 = __importDefault(require("react"));
-const Admonition_1 = require("../../../components/Admonition/Admonition");
+const Admonition_1 = require("@redocly/theme/components/Admonition/Admonition");
 function Admonition(props) {
     return react_1.default.createElement(Admonition_1.Admonition, Object.assign({}, props));
 }

package/lib/markdoc/components/Cards/Card.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Card = Card;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const ChevronRightIcon_1 = require("../../../icons/ChevronRightIcon/ChevronRightIcon");
-const CardImage_1 = require("../../../markdoc/components/Cards/CardImage");
-const CardIcon_1 = require("../../../markdoc/components/Cards/CardIcon");
-const Link_1 = require("../../../components/Link/Link");
+const ChevronRightIcon_1 = require("@redocly/theme/icons/ChevronRightIcon/ChevronRightIcon");
+const CardImage_1 = require("@redocly/theme/markdoc/components/Cards/CardImage");
+const CardIcon_1 = require("@redocly/theme/markdoc/components/Cards/CardIcon");
+const Link_1 = require("@redocly/theme/components/Link/Link");
 function Card({ title = '', image, icon, iconRawContent, imagePosition = 'start', iconPosition = 'auto', layout = 'vertical', variant = 'filled', lineClamp, iconVariant, align = 'start', to, children, }) {
     const titleNoSpaces = title === null || title === void 0 ? void 0 : title.replace(/\s+/g, '-').toLowerCase();
     const cardTitleId = `card-title-${titleNoSpaces}`;

package/lib/markdoc/components/Cards/CardIcon.js

@@ -6,28 +6,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CardIcon = CardIcon;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const InlineSvg_1 = require("../../../markdoc/components/InlineSvg/InlineSvg");
+const GenericIcon_1 = require("@redocly/theme/icons/GenericIcon/GenericIcon");
 function CardIcon({ variant, src, rawContent, position }) {
-    return (react_1.default.createElement(CardIconWrapper, { "$variant": variant, "$position": position }, rawContent ? react_1.default.createElement(CardSvg, { fileRawContent: rawContent }) : react_1.default.createElement(CardImg, { src: src })));
+    return (react_1.default.createElement(CardIconWrapper, { "$variant": variant, "$position": position },
+        react_1.default.createElement(GenericIcon_1.GenericIcon, { icon: src, rawContent: rawContent })));
 }
-const CardImg = styled_components_1.default.img `
-  width: var(--card-icon-width);
-  height: var(--card-icon-height);
-  display: inline-block;
-  object-fit: cover;
-`;
-const CardSvg = (0, styled_components_1.default)(InlineSvg_1.InlineSvg) `
-  width: var(--card-icon-width);
-  height: var(--card-icon-height);
-  display: inline-block;
-
-  svg {
-    width: 100%;
-    height: 100%;
-    fill: var(--card-icon-color);
-  }
-`;
 const CardIconWrapper = styled_components_1.default.div `
+  --icon-width: var(--card-icon-width);
+  --icon-height: var(--card-icon-height);
+  --icon-color: var(--card-icon-color);
+
   display: flex;
   align-self: ${({ $position }) => ($position ? $position : 'auto')};
   justify-content: center;

package/lib/markdoc/components/Cards/Cards.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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 __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

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

@@ -1,3 +1,3 @@
 import React from 'react';
-import { type CodeBlockProps } from '../../../components/CodeBlock/CodeBlock';
+import { type CodeBlockProps } from '@redocly/theme/components/CodeBlock/CodeBlock';
 export declare function CodeBlock(props: CodeBlockProps): React.JSX.Element;

package/lib/markdoc/components/CodeBlock/CodeBlock.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeBlock = CodeBlock;
 const react_1 = __importDefault(require("react"));
-const CodeBlock_1 = require("../../../components/CodeBlock/CodeBlock");
+const CodeBlock_1 = require("@redocly/theme/components/CodeBlock/CodeBlock");
 function CodeBlock(props) {
     return react_1.default.createElement(CodeBlock_1.CodeBlock, Object.assign({}, props));
 }

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

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export declare function CodeGroup(props: React.PropsWithChildren<{
+    mode?: 'tabs' | 'dropdown';
+}>): React.JSX.Element | null;

package/lib/markdoc/components/CodeGroup/CodeGroup.js

@@ -0,0 +1,82 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeGroup = CodeGroup;
+const React = __importStar(require("react"));
+const CodeBlock_1 = require("@redocly/theme/components/CodeBlock/CodeBlock");
+const utils_1 = require("@redocly/theme/core/utils");
+const contexts_1 = require("@redocly/theme/core/contexts");
+function CodeGroup(props) {
+    const mode = props.mode || 'tabs';
+    const isTabsMode = mode === 'tabs';
+    const rawSnippets = React.useMemo(() => React.Children.toArray(props.children).map((child, idx) => {
+        const childProps = child;
+        return {
+            name: getTabName(childProps.props, idx),
+            languageName: (0, utils_1.langToName)(childProps.props.lang || 'Default'),
+            lang: childProps.props.lang || '',
+            props: childProps.props,
+        };
+    }), [props.children]);
+    const [activeSnippetName, setActiveSnippetName] = (0, contexts_1.useActiveCodeSnippetName)(mode);
+    const snippets = React.useMemo(() => Object.fromEntries(rawSnippets.map((snippet) => {
+        const getItemName = (snippet) => isTabsMode ? snippet === null || snippet === void 0 ? void 0 : snippet.name : (snippet === null || snippet === void 0 ? void 0 : snippet.languageName) || '';
+        const name = getItemName(snippet);
+        const items = rawSnippets.map((item) => ({
+            name: getItemName(item),
+            lang: item.lang,
+        }));
+        const itemsProps = {
+            items,
+            onChange: (name) => {
+                setActiveSnippetName(name);
+            },
+            value: activeSnippetName || getItemName(rawSnippets[0]),
+        };
+        const snippetProps = Object.assign(Object.assign(Object.assign({}, snippet.props), { header: Object.assign(Object.assign({}, snippet.props.header), { title: isTabsMode ? undefined : snippet.name }) }), (isTabsMode ? { tabs: itemsProps } : { dropdown: itemsProps }));
+        return [name, snippetProps];
+    })), [rawSnippets, activeSnippetName, isTabsMode, setActiveSnippetName]);
+    const firstName = Object.keys(snippets)[0];
+    const activeSnippet = snippets[activeSnippetName] || snippets[firstName];
+    if (!activeSnippet) {
+        return null;
+    }
+    return React.createElement(CodeBlock_1.CodeBlock, Object.assign({}, activeSnippet));
+}
+function getTabName(props, idx) {
+    var _a;
+    return String(((_a = props.header) === null || _a === void 0 ? void 0 : _a.title) || props.file || (0, utils_1.langToName)(props.lang || '') || 'Tab ' + String(idx + 1));
+}
+//# sourceMappingURL=CodeGroup.js.map

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

@@ -15,19 +15,29 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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 __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeContainer = CodeContainer;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
-const contexts_1 = require("../../../core/contexts");
-const CodeBlockContainer_1 = require("../../../components/CodeBlock/CodeBlockContainer");
+const contexts_1 = require("@redocly/theme/core/contexts");
+const CodeBlockContainer_1 = require("@redocly/theme/components/CodeBlock/CodeBlockContainer");
 function CodeContainer({ highlightedCode, toolbar, }) {
     const { activeStep } = (0, react_1.useContext)(contexts_1.CodeWalkthroughStepsContext);
     const [isHovered, setIsHovered] = (0, react_1.useState)(false);

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeFilters = CodeFilters;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const Tag_1 = require("../../../components/Tag/Tag");
+const Tag_1 = require("@redocly/theme/components/Tag/Tag");
 function CodeFilters({ filters, getFilterState, handleFilterSelect, filtersElementRef, }) {
     if (filters.length === 0) {
         return null;

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

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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 __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -29,12 +39,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodePanel = CodePanel;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const hooks_1 = require("../../../core/hooks");
-const contexts_1 = require("../../../core/contexts");
-const CodePanelHeader_1 = require("../../../markdoc/components/CodeWalkthrough/CodePanelHeader");
-const CodePanelPreview_1 = require("../../../markdoc/components/CodeWalkthrough/CodePanelPreview");
-const CodeContainer_1 = require("../../../markdoc/components/CodeWalkthrough/CodeContainer");
-const CodePanelToolbar_1 = require("../../../markdoc/components/CodeWalkthrough/CodePanelToolbar");
+const hooks_1 = require("@redocly/theme/core/hooks");
+const contexts_1 = require("@redocly/theme/core/contexts");
+const CodePanelHeader_1 = require("@redocly/theme/markdoc/components/CodeWalkthrough/CodePanelHeader");
+const CodePanelPreview_1 = require("@redocly/theme/markdoc/components/CodeWalkthrough/CodePanelPreview");
+const CodeContainer_1 = require("@redocly/theme/markdoc/components/CodeWalkthrough/CodeContainer");
+const CodePanelToolbar_1 = require("@redocly/theme/markdoc/components/CodeWalkthrough/CodePanelToolbar");
 function CodePanel({ files, downloadAssociatedFiles, preview, }) {
     const { activeFile, handleTabSwitch, highlightedCode } = (0, hooks_1.useCodePanel)(files);
     const { handleDownloadCode } = (0, react_1.useContext)(contexts_1.CodeWalkthroughControlsStateContext);

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

@@ -15,24 +15,34 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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 __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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 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");
+const hooks_1 = require("@redocly/theme/core/hooks");
+const OverflowMenuVerticalIcon_1 = require("@redocly/theme/icons/OverflowMenuVerticalIcon/OverflowMenuVerticalIcon");
+const Dropdown_1 = require("@redocly/theme/components/Dropdown/Dropdown");
+const DropdownMenu_1 = require("@redocly/theme/components/Dropdown/DropdownMenu");
+const DropdownMenuItem_1 = require("@redocly/theme/components/Dropdown/DropdownMenuItem");
+const DownloadIcon_1 = require("@redocly/theme/icons/DownloadIcon/DownloadIcon");
+const Button_1 = require("@redocly/theme/components/Button/Button");
 function CodePanelHeader({ files, handleTabSwitch, activeTabName, onDownloadCode, }) {
     const renderableFiles = (0, hooks_1.useRenderableFiles)(files);
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
@@ -74,19 +84,19 @@ function CodePanelHeader({ files, handleTabSwitch, activeTabName, onDownloadCode
     }, [activeTabName, files, renderableFiles]);
     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, renderableFiles.map(({ path, basename, FileIcon, parentFolder, isNameDuplicate, inRootDir }, i) => {
+            react_1.default.createElement(Tabs, null, renderableFiles.map(({ path, basename, fileIcon, parentFolder, isNameDuplicate, inRootDir }, i) => {
                 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),
+                    fileIcon,
                     basename,
                     isNameDuplicate && !inRootDir ? react_1.default.createElement(Dirname, null, parentFolder) : null));
             })),
             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, FileIcon, isNameDuplicate, inRootDir, parentFolder }, i) => {
-                    return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { active: path === activeTabName, key: i, onAction: () => handleTabSwitch(path), prefix: react_1.default.createElement(FileIcon, null), content: isNameDuplicate && !inRootDir ? `${parentFolder}/${basename}` : basename }));
+                react_1.default.createElement(StyledDropdownMenu, null, hiddenFiles.map(({ path, basename, fileIcon, isNameDuplicate, inRootDir, parentFolder }, i) => {
+                    return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { active: path === activeTabName, key: i, onAction: () => handleTabSwitch(path), prefix: fileIcon, content: isNameDuplicate && !inRootDir ? `${parentFolder}/${basename}` : 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')))));
 }
@@ -127,6 +137,9 @@ const ActionBar = styled_components_1.default.div `
   display: flex;
 `;
 const Tab = styled_components_1.default.button `
+  --icon-width: 16px;
+  --icon-height: 16px;
+
   display: inline-flex;
   align-items: center;
   padding: 0 var(--spacing-sm);