@redocly/theme 0.56.0-next.9 → 0.56.0

package/lib/index.d.ts

@@ -2,6 +2,7 @@ export * from './core';
 export * from './config';
 export * from './ext/configure';
 export * from './components/Button/Button';
+export * from './components/Button/ButtonGroup';
 export * from './components/JsonViewer/JsonViewer';
 export * from './components/Tag/Tag';
 export * from './components/TableOfContent/TableOfContent';
@@ -23,6 +24,7 @@ export * from './components/Tags/HttpTag';
 export * from './components/Tags/CounterTag';
 export * from './components/VersionPicker/VersionPicker';
 export * from './components/Marker/Marker';
+export * from './components/PageActions/PageActions';
 export * from './components/Buttons/CopyButton';
 export * from './components/Buttons/EditPageButton';
 export * from './components/Buttons/EmailButton';
@@ -145,7 +147,9 @@ export * from './icons/ArrowLeftIcon/ArrowLeftIcon';
 export * from './icons/AddIcon/AddIcon';
 export * from './icons/BookmarkAddIcon/BookmarkAddIcon';
 export * from './icons/SpinnerIcon/SpinnerIcon';
+export * from './icons/ChatGptIcon/ChatGptIcon';
 export * from './icons/CopyIcon/CopyIcon';
+export * from './icons/ClaudeIcon/ClaudeIcon';
 export * from './icons/CleanIcon/CleanIcon';
 export * from './icons/GraphqlIcon/GraphqlIcon';
 export * from './icons/DeselectIcon/DeselectIcon';
@@ -211,6 +215,7 @@ export * from './icons/LinkIcon/LinkIcon';
 export * from './icons/LaunchIcon/LaunchIcon';
 export * from './icons/MinimizeIcon/MinimizeIcon';
 export * from './icons/MaximizeIcon/MaximizeIcon';
+export * from './icons/MarkdownFullIcon/MarkdownFullIcon';
 export * from './icons/DocumentBlankIcon/DocumentBlankIcon';
 export * from './icons/WarningSquareIcon/WarningSquareIcon';
 export * from './icons/MenuIcon/MenuIcon';
@@ -249,6 +254,7 @@ export * from './icons/RabbitMQIcon/RabbitMQIcon';
 export * from './icons/CurveAutoColonIcon/CurveAutoColonIcon';
 export * from './icons/AiStarsIcon/AiStarsIcon';
 export * from './icons/AiStarsGradientIcon/AiStarsGradientIcon';
+export * from './icons/GenericIcon/GenericIcon';
 export * from './layouts/RootLayout';
 export * from './layouts/PageLayout';
 export * from './layouts/NotFound';

package/lib/index.js

@@ -32,6 +32,7 @@ __exportStar(require("./config"), exports);
 __exportStar(require("./ext/configure"), exports);
 /* Components */
 __exportStar(require("./components/Button/Button"), exports);
+__exportStar(require("./components/Button/ButtonGroup"), exports);
 __exportStar(require("./components/JsonViewer/JsonViewer"), exports);
 __exportStar(require("./components/Tag/Tag"), exports);
 __exportStar(require("./components/TableOfContent/TableOfContent"), exports);
@@ -53,6 +54,7 @@ __exportStar(require("./components/Tags/HttpTag"), exports);
 __exportStar(require("./components/Tags/CounterTag"), exports);
 __exportStar(require("./components/VersionPicker/VersionPicker"), exports);
 __exportStar(require("./components/Marker/Marker"), exports);
+__exportStar(require("./components/PageActions/PageActions"), exports);
 /* Buttons */
 __exportStar(require("./components/Buttons/CopyButton"), exports);
 __exportStar(require("./components/Buttons/EditPageButton"), exports);
@@ -198,7 +200,9 @@ __exportStar(require("./icons/ArrowLeftIcon/ArrowLeftIcon"), exports);
 __exportStar(require("./icons/AddIcon/AddIcon"), exports);
 __exportStar(require("./icons/BookmarkAddIcon/BookmarkAddIcon"), exports);
 __exportStar(require("./icons/SpinnerIcon/SpinnerIcon"), exports);
+__exportStar(require("./icons/ChatGptIcon/ChatGptIcon"), exports);
 __exportStar(require("./icons/CopyIcon/CopyIcon"), exports);
+__exportStar(require("./icons/ClaudeIcon/ClaudeIcon"), exports);
 __exportStar(require("./icons/CleanIcon/CleanIcon"), exports);
 __exportStar(require("./icons/GraphqlIcon/GraphqlIcon"), exports);
 __exportStar(require("./icons/DeselectIcon/DeselectIcon"), exports);
@@ -264,6 +268,7 @@ __exportStar(require("./icons/LinkIcon/LinkIcon"), exports);
 __exportStar(require("./icons/LaunchIcon/LaunchIcon"), exports);
 __exportStar(require("./icons/MinimizeIcon/MinimizeIcon"), exports);
 __exportStar(require("./icons/MaximizeIcon/MaximizeIcon"), exports);
+__exportStar(require("./icons/MarkdownFullIcon/MarkdownFullIcon"), exports);
 __exportStar(require("./icons/DocumentBlankIcon/DocumentBlankIcon"), exports);
 __exportStar(require("./icons/WarningSquareIcon/WarningSquareIcon"), exports);
 __exportStar(require("./icons/MenuIcon/MenuIcon"), exports);
@@ -302,6 +307,7 @@ __exportStar(require("./icons/RabbitMQIcon/RabbitMQIcon"), exports);
 __exportStar(require("./icons/CurveAutoColonIcon/CurveAutoColonIcon"), exports);
 __exportStar(require("./icons/AiStarsIcon/AiStarsIcon"), exports);
 __exportStar(require("./icons/AiStarsGradientIcon/AiStarsGradientIcon"), exports);
+__exportStar(require("./icons/GenericIcon/GenericIcon"), exports);
 /* Layouts */
 __exportStar(require("./layouts/RootLayout"), exports);
 __exportStar(require("./layouts/PageLayout"), exports);

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("../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

@@ -11,20 +11,24 @@ 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 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/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("../../../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/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,72 @@
+"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.CodeGroup = CodeGroup;
+const React = __importStar(require("react"));
+const CodeBlock_1 = require("../../../components/CodeBlock/CodeBlock");
+const utils_1 = require("../../../core/utils");
+const contexts_1 = require("../../../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/CodePanelHeader.js

@@ -74,19 +74,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 +127,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);

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

@@ -1,8 +1,9 @@
 import type { JSX, PropsWithChildren } from 'react';
-export declare function Heading({ level, id, children, 'data-source': dataSource, 'data-hash': dataHash, className, }: PropsWithChildren<{
+export declare function Heading({ level, id, children, 'data-source': dataSource, 'data-hash': dataHash, className, __idx, }: PropsWithChildren<{
     level: number;
     id: string;
     'data-source'?: string;
     'data-hash'?: string;
     className?: string;
+    __idx?: number;
 }>): JSX.Element;

package/lib/markdoc/components/Heading/Heading.js

@@ -22,16 +22,28 @@ 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.Heading = Heading;
 const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const react_router_dom_1 = require("react-router-dom");
 const utils_1 = require("../../../core/utils");
 const LinkIcon_1 = require("../../../icons/LinkIcon/LinkIcon");
+const PageActions_1 = require("../../../components/PageActions/PageActions");
+const hooks_1 = require("../../../core/hooks");
 /**
  * Class name for all MD tags
  */
 const mdClassName = 'md';
-function Heading({ level, id, children, 'data-source': dataSource, 'data-hash': dataHash, className, }) {
+function Heading({ level, id, children, 'data-source': dataSource, 'data-hash': dataHash, className, __idx, }) {
+    var _a;
+    const { pathname } = (0, react_router_dom_1.useLocation)();
+    const { usePageProps } = (0, hooks_1.useThemeHooks)();
+    const pageProps = usePageProps();
+    const isMarkdownPage = ((_a = pageProps === null || pageProps === void 0 ? void 0 : pageProps.metadata) === null || _a === void 0 ? void 0 : _a.type) === 'markdown';
     const linkEl = (react_1.default.createElement("a", { "aria-label": `link  to ${id}`, href: `#${id}`, className: (0, utils_1.concatClassNames)('anchor', 'before') },
         react_1.default.createElement(LinkIcon_1.LinkIcon, { size: "14px", color: "--heading-anchor-color" })));
     return (0, react_1.createElement)(`h${level}`, {
@@ -40,8 +52,14 @@ function Heading({ level, id, children, 'data-source': dataSource, 'data-hash':
         'data-component-name': 'Markdoc/Heading/Heading',
         'data-source': dataSource,
         'data-hash': dataHash,
-    }, react_1.default.createElement(react_1.default.Fragment, null,
+    }, react_1.default.createElement(HeadingContentWrapper, null,
         linkEl,
-        children));
+        react_1.default.createElement("span", null, children),
+        isMarkdownPage && __idx === 0 ? react_1.default.createElement(PageActions_1.PageActions, { pageSlug: pathname }) : null));
 }
+const HeadingContentWrapper = styled_components_1.default.div `
+  display: flex;
+  gap: var(--spacing-xs);
+  align-items: center;
+`;
 //# sourceMappingURL=Heading.js.map

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { CDNIconProps } from '../../../icons/types';
+export declare function Icon(props: CDNIconProps): React.JSX.Element | null;

package/lib/markdoc/components/Icon/Icon.js

@@ -0,0 +1,29 @@
+"use strict";
+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.Icon = Icon;
+const react_1 = __importDefault(require("react"));
+const CDNIcon_1 = require("../../../icons/CDNIcon/CDNIcon");
+const utils_1 = require("../../../core/utils");
+function Icon(props) {
+    const { name } = props, rest = __rest(props, ["name"]);
+    const resolvedIcon = (0, utils_1.resolveIcon)(name);
+    if (resolvedIcon.type === 'font-awesome') {
+        return react_1.default.createElement(CDNIcon_1.CDNIcon, Object.assign({ name: resolvedIcon.name, type: resolvedIcon.style }, rest));
+    }
+    return null;
+}
+//# sourceMappingURL=Icon.js.map

package/lib/markdoc/components/Tabs/Tab.d.ts

@@ -10,6 +10,7 @@ export type TabProps = {
     onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
     onClick: () => void;
     icon?: React.ReactNode;
+    iconRawContent?: string;
 };
-export declare function TabComponent({ tabId, label, size, disabled, setRef, onKeyDown, onClick, icon, }: TabProps): JSX.Element;
+export declare function TabComponent({ tabId, label, size, disabled, setRef, onKeyDown, onClick, icon, iconRawContent, }: TabProps): JSX.Element;
 export declare const Tab: import("styled-components").StyledComponent<typeof TabComponent, any, {}, never>;

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

@@ -8,17 +8,20 @@ exports.TabComponent = TabComponent;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const TabList_1 = require("../../../markdoc/components/Tabs/TabList");
-function TabComponent({ tabId, label, size, disabled, setRef, onKeyDown, onClick, icon, }) {
+const GenericIcon_1 = require("../../../icons/GenericIcon/GenericIcon");
+function TabComponent({ tabId, label, size, disabled, setRef, onKeyDown, onClick, icon, iconRawContent, }) {
     return (react_1.default.createElement(TabList_1.TabItem, { "data-component-name": "Markdoc/Tabs/Tab", size: size, tabIndex: 0 },
         react_1.default.createElement(TabList_1.TabButtonLink, { id: `tab-${tabId}`, role: "tab", "aria-selected": "false", "aria-controls": `panel-${tabId}`, tabIndex: -1, size: size, disabled: disabled, ref: setRef, onKeyDown: onKeyDown, onClick: onClick },
             react_1.default.createElement(LabelWrapper, null,
-                icon,
+                react_1.default.createElement(GenericIcon_1.GenericIcon, { icon: icon, rawContent: iconRawContent }),
                 label))));
 }
 const LabelWrapper = styled_components_1.default.div `
   display: flex;
   align-items: center;
   gap: 4px;
+  --icon-width: var(--md-tabs-icon-size);
+  --icon-height: var(--md-tabs-icon-size);
 `;
 exports.Tab = (0, styled_components_1.default)(TabComponent) ``;
 //# sourceMappingURL=Tab.js.map

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

@@ -9,7 +9,7 @@ export type TabItemProps = {
     disable?: boolean;
     onClick?: () => void;
     children: React.ReactNode;
-    icon?: React.ReactNode;
+    icon?: React.ReactNode | string;
 };
 type TabsProps = {
     children: React.ReactElement<TabItemProps>[];

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

@@ -98,6 +98,8 @@ exports.markdownTabs = (0, styled_components_1.css) `
 
   --md-tabs-tab-focused-padding: var(--spacing-unit); // @presenter Spacing
 
+  --md-tabs-icon-size: 16px; // @presenter Spacing
+
   // @tokens End
   `;
 //# sourceMappingURL=variables.js.map

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

@@ -18,3 +18,5 @@ export * from '../../markdoc/components/CodeWalkthrough/CodeStep';
 export * from '../../markdoc/components/CodeWalkthrough/Input';
 export * from '../../markdoc/components/CodeWalkthrough/CodeToggle';
 export * from '../../markdoc/components/CodeWalkthrough/CodeContainer';
+export * from '../../markdoc/components/CodeGroup/CodeGroup';
+export * from '../../markdoc/components/Icon/Icon';

package/lib/markdoc/components/default.js

@@ -34,4 +34,6 @@ __exportStar(require("../../markdoc/components/CodeWalkthrough/CodeStep"), expor
 __exportStar(require("../../markdoc/components/CodeWalkthrough/Input"), exports);
 __exportStar(require("../../markdoc/components/CodeWalkthrough/CodeToggle"), exports);
 __exportStar(require("../../markdoc/components/CodeWalkthrough/CodeContainer"), exports);
+__exportStar(require("../../markdoc/components/CodeGroup/CodeGroup"), exports);
+__exportStar(require("../../markdoc/components/Icon/Icon"), exports);
 //# sourceMappingURL=default.js.map

package/lib/markdoc/default.js

@@ -52,6 +52,8 @@ const code_walkthrough_1 = require("../markdoc/tags/code-walkthrough");
 const code_step_1 = require("../markdoc/tags/code-step");
 const input_1 = require("../markdoc/tags/input");
 const code_toggle_1 = require("../markdoc/tags/code-toggle");
+const code_group_1 = require("../markdoc/tags/code-group");
+const icon_1 = require("../markdoc/tags/icon");
 exports.tags = {
     [admonition_1.admonition.tagName]: admonition_1.admonition.schema,
     [debug_1.debug.tagName]: debug_1.debug.schema,
@@ -69,5 +71,7 @@ exports.tags = {
     [code_step_1.codeStep.tagName]: code_step_1.codeStep.schema,
     [code_toggle_1.toggle.tagName]: code_toggle_1.toggle.schema,
     [input_1.input.tagName]: input_1.input.schema,
+    [code_group_1.codeGroup.tagName]: code_group_1.codeGroup.schema,
+    [icon_1.icon.tagName]: icon_1.icon.schema,
 };
 //# sourceMappingURL=default.js.map

package/lib/markdoc/tags/card.js

@@ -14,7 +14,7 @@ exports.card = {
                 type: String,
                 resolver: 'link',
             },
-            icon: { type: String, resolver: 'inlineSvgOrImageLink' },
+            icon: { type: String, resolver: 'relativeOrCdnIcon' },
             lineClamp: {
                 type: Number,
             },

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

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

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

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.codeGroup = void 0;
+const markdoc_1 = __importDefault(require("@markdoc/markdoc"));
+exports.codeGroup = {
+    schema: {
+        render: 'CodeGroup',
+        children: ['fence', 'tag'],
+        attributes: {
+            mode: { type: String, default: 'tabs', matches: ['tabs', 'dropdown'] },
+        },
+        transform(node, config) {
+            const attributes = node.transformAttributes(config);
+            const children = node.transformChildren(config);
+            return new markdoc_1.default.Tag('CodeGroup', attributes, children);
+        },
+    },
+    tagName: 'code-group',
+};
+//# sourceMappingURL=code-group.js.map

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

@@ -9,7 +9,7 @@ const code_snippet_file_1 = require("../../markdoc/attributes/code-snippet-file"
 exports.codeSnippet = {
     schema: {
         attributes: {
-            file: { type: code_snippet_file_1.CodeSnippetFile, render: false, required: true },
+            file: { type: code_snippet_file_1.CodeSnippetFile, required: true },
             language: { type: String, render: true },
             title: { type: String, render: true },
             to: { type: [String, Number], render: false },

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

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

package/lib/markdoc/tags/icon.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.icon = void 0;
+exports.icon = {
+    schema: {
+        render: 'Icon',
+        attributes: {
+            name: { type: String, required: true },
+            size: { type: String, default: '1em' },
+            color: { type: String, default: 'currentColor' },
+        },
+        selfClosing: true,
+    },
+    tagName: 'icon',
+};
+//# sourceMappingURL=icon.js.map

package/lib/markdoc/tags/tab.js

@@ -6,6 +6,7 @@ exports.tab = {
         attributes: {
             label: { type: String, required: true },
             disable: { type: Boolean, default: false },
+            icon: { type: String, resolver: 'relativeOrCdnIcon' },
         },
         render: 'div',
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.56.0-next.9",
+  "version": "0.56.0",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -89,8 +89,8 @@
     "nprogress": "0.2.0",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.27.0",
-    "@redocly/realm-asyncapi-sdk": "0.2.0-next.1"
+    "@redocly/config": "0.28.0",
+    "@redocly/realm-asyncapi-sdk": "0.2.0"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Button/Button.tsx

@@ -27,13 +27,13 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
   size?: ButtonSize;
   extraClass?: string;
   to?: string;
+  external?: boolean;
   icon?: JSX.Element;
   iconPosition?: 'left' | 'right';
   title?: string;
   tabIndex?: number;
   onClick?: (e?: any) => void;
   ref?: React.Ref<HTMLButtonElement>;
-  type?: 'button' | 'submit' | 'reset';
 }
 
 const getBlink = (): Keyframes => keyframes`
@@ -67,6 +67,7 @@ export function generateClassName({
   extraClass = '',
 }: ButtonProps) {
   const classNames = [
+    'button',
     extraClass,
     `button-tone-${tone}`,
     `button-variant-${variant}`,
@@ -190,7 +191,7 @@ const ButtonComponent: React.FC<ButtonProps> = (props) => {
 
   if (props.to) {
     return (
-      <StyledButtonLink to={props.to} onClick={props.onClick}>
+      <StyledButtonLink to={props.to} external={props.external} onClick={props.onClick}>
         {button}
       </StyledButtonLink>
     );