@redocly/theme 0.56.0-next.9 → 0.56.0

package/lib/components/Markdown/styles/headingAnchor.js

@@ -16,7 +16,6 @@ function headingAnchorCss(className = 'anchor') {
       padding-left: 4px;
     }
 
-    svg,
     .${className} svg {
       fill: var(--heading-anchor-color);
       visibility: hidden;

package/lib/components/Menu/MenuItem.js

@@ -36,6 +36,7 @@ const constants_1 = require("../../core/constants");
 const utils_1 = require("../../core/utils");
 const ArrowRightIcon_1 = require("../../icons/ArrowRightIcon/ArrowRightIcon");
 const Badge_1 = require("../../components/Badge/Badge");
+const GenericIcon_1 = require("../../icons/GenericIcon/GenericIcon");
 function MenuItem(props) {
     var _a;
     const { item, depth, className, onClick } = props;
@@ -75,7 +76,7 @@ function MenuItem(props) {
     const httpColor = item.deprecated ? 'http-deprecated' : item.httpVerb;
     const label = item.label && (react_1.default.createElement(MenuItemLabelWrapper, { active: item.active, deprecated: item.deprecated, depth: depth, withChevron: hasChevron, isSeparator: isSeparator, onClick: handleOnClick, onKeyDown: handleExpandOnEnter, ref: labelRef, role: item.link ? 'none' : 'link', tabIndex: !item.link ? 0 : undefined, "data-testid": "menu-item-label" },
         hasChevron ? react_1.default.createElement(ChevronWrapper, null, chevron) : null,
-        item.icon ? react_1.default.createElement(MenuItemIcon, { src: item.icon }) : null,
+        react_1.default.createElement(MenuItemIcon, { icon: item.icon, srcSet: item.srcSet }),
         react_1.default.createElement(MenuItemLabelTextWrapper, null,
             react_1.default.createElement(MenuItemLabel, null,
                 react_1.default.createElement("span", null, translate(item.labelTranslationKey, item.label)), (_a = item.badges) === null || _a === void 0 ? void 0 :
@@ -240,11 +241,10 @@ const MenuItemSubLabel = styled_components_1.default.div `
   font-size: var(--menu-item-sublabel-font-size);
   font-family: var(--menu-item-sublabel-font-family);
 `;
-const MenuItemIcon = styled_components_1.default.img `
-  width: var(--menu-item-icon-size);
-  height: var(--menu-item-icon-size);
+const MenuItemIcon = (0, styled_components_1.default)(GenericIcon_1.GenericIcon) `
+  --icon-width: var(--menu-item-icon-size);
+  --icon-height: var(--menu-item-icon-size);
   margin: var(--menu-item-icon-margin);
-  border-radius: var(--menu-item-icon-border-radius);
   flex-shrink: 0;
   overflow: hidden;
 `;

package/lib/components/Menu/variables.js

@@ -71,7 +71,7 @@ exports.menu = (0, styled_components_1.css) `
    * @tokens Menu item icons
    */
   --menu-item-icon-size: var(--spacing-base);
-  --menu-item-icon-margin: 0px;
+  --menu-item-icon-margin: 0 var(--spacing-xxs) 0 0;
   --menu-item-icon-border-radius: 100%;
 
   --menu-item-external-icon-size: 10px;

package/lib/components/Navbar/NavbarItem.js

@@ -1,34 +1,11 @@
 "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.NavbarItem = NavbarItem;
 const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importStar(require("styled-components"));
+const styled_components_1 = __importDefault(require("styled-components"));
 const react_router_dom_1 = require("react-router-dom");
 const DropdownMenu_1 = require("../../components/Dropdown/DropdownMenu");
 const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem");
@@ -37,6 +14,7 @@ const hooks_1 = require("../../core/hooks");
 const LaunchIcon_1 = require("../../icons/LaunchIcon/LaunchIcon");
 const Link_1 = require("../../components/Link/Link");
 const Dropdown_1 = require("../../components/Dropdown/Dropdown");
+const GenericIcon_1 = require("../../icons/GenericIcon/GenericIcon");
 function NavbarItem({ navItem, className }) {
     const { pathname } = (0, react_router_dom_1.useLocation)();
     const { useTranslate, useL10nConfig, useTelemetry } = (0, hooks_1.useThemeHooks)();
@@ -50,7 +28,7 @@ function NavbarItem({ navItem, className }) {
     const isActive = pathname ===
         (0, utils_1.withPathPrefix)((0, utils_1.getPathnameForLocale)(normalizedPath, defaultLocale, currentLocale, locales));
     const itemContent = (react_1.default.createElement(NavbarMenuItem, { as: item.link ? Link_1.Link : undefined, active: isActive, className: className, onClick: () => telemetry.send({ type: 'navbar.menu_item_clicked', payload: { type: item.type } }), external: item.external, target: item.target, to: item.link },
-        react_1.default.createElement(NavbarIcon, { url: item.icon }),
+        react_1.default.createElement(NavbarIcon, { icon: item.icon, srcSet: item.srcSet }),
         react_1.default.createElement(NavbarLabel, { "data-translation-key": item.labelTranslationKey }, translate(item.labelTranslationKey, item.label)),
         item.external ? react_1.default.createElement(ExternalLinkIcon, { size: "10px" }) : null));
     if (navItem.items) {
@@ -60,7 +38,7 @@ function NavbarItem({ navItem, className }) {
             if (item.type !== 'link' && item.type !== 'separator')
                 return null;
             return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: `${item.label}_${index}`, to: item.link, separator: item.type === 'separator', separatorLine: item.separatorLine, "data-translation-key": item.labelTranslationKey, external: item.external },
-                react_1.default.createElement(NavbarIcon, { url: item.icon }),
+                react_1.default.createElement(NavbarIcon, { icon: item.icon, srcSet: item.srcSet }),
                 react_1.default.createElement(NavbarLabel, { "data-translation-key": item.labelTranslationKey }, translate(item.labelTranslationKey, item.label)),
                 item.external ? react_1.default.createElement(ExternalLinkIcon, { size: "10px" }) : null));
         });
@@ -100,19 +78,10 @@ const NavbarLabel = styled_components_1.default.span `
   cursor: pointer;
   vertical-align: middle;
 `;
-const NavbarIcon = styled_components_1.default.i `
-  ${({ url }) => url &&
-    (0, styled_components_1.css) `
-      background-image: url('${url}');
-      width: var(--navbar-item-icon-width);
-      height: var(--navbar-item-icon-height);
-      display: inline-block;
-      background-size: contain;
-      margin-right: var(--navbar-item-icon-margin-right);
-      vertical-align: middle;
-      background-position: center;
-      background-repeat: no-repeat;
-    `}
+const NavbarIcon = (0, styled_components_1.default)(GenericIcon_1.GenericIcon) `
+  --icon-width: var(--navbar-item-icon-width);
+  --icon-height: var(--navbar-item-icon-height);
+  margin-right: var(--navbar-item-icon-margin-right);
 `;
 const ExternalLinkIcon = (0, styled_components_1.default)(LaunchIcon_1.LaunchIcon) `
   margin-left: 5px;

package/lib/components/Navbar/variables.js

@@ -37,8 +37,8 @@ exports.navbar = (0, styled_components_1.css) `
   --navbar-item-bg-color-hover: var(--bg-color);
   --navbar-item-bottom-border-hover: none;
 
-  --navbar-item-icon-width: 1.5em; // @presenter Spacing
-  --navbar-item-icon-height: 1.5em; // @presenter Spacing
+  --navbar-item-icon-width: 1.25em; // @presenter Spacing
+  --navbar-item-icon-height: 1.25em; // @presenter Spacing
   --navbar-item-icon-margin-right: 0.5em; // @presenter Spacing
 
   --navbar-logo-height: var(--logo-height);

package/lib/components/PageActions/PageActions.d.ts

@@ -0,0 +1,6 @@
+import type { JSX } from 'react';
+type PageActionProps = {
+    pageSlug: string;
+};
+export declare function PageActions(props: PageActionProps): JSX.Element | null;
+export {};

package/lib/components/PageActions/PageActions.js

@@ -0,0 +1,104 @@
+"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageActions = PageActions;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const PageActionsMenuItem_1 = require("../../components/PageActions/PageActionsMenuItem");
+const Link_1 = require("../../components/Link/Link");
+const ButtonGroup_1 = require("../../components/Button/ButtonGroup");
+const Button_1 = require("../../components/Button/Button");
+const Dropdown_1 = require("../../components/Dropdown/Dropdown");
+const DropdownMenu_1 = require("../../components/Dropdown/DropdownMenu");
+const Spinner_1 = require("../../icons/Spinner/Spinner");
+const CheckmarkFilledIcon_1 = require("../../icons/CheckmarkFilledIcon/CheckmarkFilledIcon");
+const hooks_1 = require("../../core/hooks");
+const ACTION_DONE_DISPLAY_DURATION = 1000;
+function PageActions(props) {
+    const { pageSlug } = props;
+    const actions = (0, hooks_1.usePageActions)(pageSlug || '/');
+    const [actionState, setActionState] = (0, react_1.useState)('idle');
+    if (!actions.length) {
+        return null;
+    }
+    const buttonAction = actions[0];
+    const handleActionClick = (action) => __awaiter(this, void 0, void 0, function* () {
+        if (!('onClick' in action)) {
+            return;
+        }
+        setActionState('processing');
+        yield action.onClick();
+        setActionState('done');
+        setTimeout(() => {
+            setActionState('idle');
+        }, ACTION_DONE_DISPLAY_DURATION);
+    });
+    const menuItems = actions.map((action) => ({
+        content: 'link' in action ? (react_1.default.createElement(LinkMenuItem, { to: action.link, external: true },
+            react_1.default.createElement(PageActionsMenuItem_1.PageActionsMenuItem, { pageAction: action }))) : (react_1.default.createElement(PageActionsMenuItem_1.PageActionsMenuItem, { pageAction: action })),
+        onAction: 'onClick' in action ? () => handleActionClick(action) : undefined,
+    }));
+    return (react_1.default.createElement(PageActionsWrapper, null,
+        react_1.default.createElement(ButtonGroup_1.ButtonGroup, { variant: "outlined", size: "medium" },
+            react_1.default.createElement(Button_1.Button, { icon: renderIcon(buttonAction, actionState), to: 'link' in buttonAction ? buttonAction.link : undefined, external: true, onClick: () => handleActionClick(buttonAction) }, buttonAction.buttonText),
+            actions.length > 1 ? (react_1.default.createElement(Dropdown_1.Dropdown, { withArrow: true, trigger: react_1.default.createElement(Button_1.Button, null), placement: "bottom", alignment: "end" },
+                react_1.default.createElement(DropdownMenu_1.DropdownMenu, { items: menuItems }))) : null)));
+}
+function renderIcon(buttonAction, actionState) {
+    switch (actionState) {
+        case 'processing':
+            return react_1.default.createElement(Spinner_1.Spinner, { color: "var(--page-actions-processing-icon-color)" });
+        case 'done':
+            return react_1.default.createElement(CheckmarkFilledIcon_1.CheckmarkFilledIcon, { color: "var(--page-actions-done-icon-color)" });
+        default:
+            return react_1.default.createElement(buttonAction.iconComponent, null);
+    }
+}
+const PageActionsWrapper = styled_components_1.default.div `
+  margin-left: auto;
+  padding-left: var(--page-actions-padding-left);
+  --button-color: var(--page-actions-button-text-color);
+
+  .button-group-size-medium .button.button-size-medium {
+    --button-icon-left-padding: var(--page-actions-button-padding);
+  }
+`;
+const LinkMenuItem = (0, styled_components_1.default)(Link_1.Link) `
+  text-decoration: none;
+  --link-decoration-hover: none;
+`;
+//# sourceMappingURL=PageActions.js.map

package/lib/components/PageActions/PageActionsMenuItem.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { PageAction } from '../../core/types';
+type PageActionsMenuItemProps = {
+    pageAction: PageAction;
+};
+export declare function PageActionsMenuItem(props: PageActionsMenuItemProps): React.JSX.Element;
+export {};

package/lib/components/PageActions/PageActionsMenuItem.js

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageActionsMenuItem = PageActionsMenuItem;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const LaunchIcon_1 = require("../../icons/LaunchIcon/LaunchIcon");
+function PageActionsMenuItem(props) {
+    const { pageAction } = props;
+    return (react_1.default.createElement(MenuItemWrapper, { "data-component-name": "PageActions/PageActionsMenuItem" },
+        react_1.default.createElement(IconWrapper, null,
+            react_1.default.createElement(pageAction.iconComponent, null)),
+        react_1.default.createElement(ContentWrapper, null,
+            react_1.default.createElement(Title, null,
+                pageAction.title,
+                'link' in pageAction ? (react_1.default.createElement(LaunchIcon_1.LaunchIcon, { color: "var(--page-actions-menu-item-title-icon-color)", size: "14px" })) : null),
+            react_1.default.createElement(Description, null, pageAction.description))));
+}
+const MenuItemWrapper = styled_components_1.default.div `
+  padding: var(--page-actions-menu-item-padding);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--page-actions-menu-item-gap);
+`;
+const IconWrapper = styled_components_1.default.div `
+  color: var(--page-actions-menu-item-icon-color);
+  border: 1px solid var(--page-actions-menu-item-icon-border-color);
+  border-radius: var(--page-actions-menu-item-icon-border-radius);
+  width: var(--page-actions-menu-item-icon-wrapper-size);
+  height: var(--page-actions-menu-item-icon-wrapper-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const ContentWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: var(--page-actions-menu-item-text-gap);
+`;
+const Title = styled_components_1.default.div `
+  font-weight: var(--page-actions-menu-item-title-font-weight);
+  font-size: var(--page-actions-menu-item-title-font-size);
+  line-height: var(--page-actions-menu-item-title-line-height);
+  color: var(--page-actions-menu-item-title-color);
+  display: flex;
+  align-items: center;
+  gap: var(--page-actions-menu-item-title-icon-gap);
+`;
+const Description = styled_components_1.default.div `
+  font-weight: var(--page-actions-menu-item-description-font-weight);
+  font-size: var(--page-actions-menu-item-description-font-size);
+  line-height: var(--page-actions-menu-item-description-line-height);
+  color: var(--page-actions-menu-item-description-color);
+`;
+//# sourceMappingURL=PageActionsMenuItem.js.map

package/lib/components/PageActions/variables.d.ts

@@ -0,0 +1 @@
+export declare const pageActions: import("styled-components").FlattenSimpleInterpolation;

package/lib/components/PageActions/variables.dark.d.ts

@@ -0,0 +1 @@
+export declare const pageActionsDarkMode: import("styled-components").FlattenSimpleInterpolation;

package/lib/components/PageActions/variables.dark.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pageActionsDarkMode = void 0;
+const styled_components_1 = require("styled-components");
+exports.pageActionsDarkMode = (0, styled_components_1.css) `
+  --page-actions-menu-item-icon-border-color: var(--color-warm-grey-5);
+  --page-actions-menu-item-description-color: var(--text-color-secondary);
+`;
+//# sourceMappingURL=variables.dark.js.map

package/lib/components/PageActions/variables.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pageActions = void 0;
+const styled_components_1 = require("styled-components");
+exports.pageActions = (0, styled_components_1.css) `
+  /* Minimum spacing between page actions and heading text */
+  --page-actions-padding-left: var(--spacing-sm);
+
+  --page-actions-button-text-color: var(--text-color-secondary);
+  --page-actions-button-padding: 5px 14px 5px var(--spacing-sm);
+
+  --page-actions-menu-item-padding: 3px 0;
+  --page-actions-menu-item-gap: var(--spacing-xs);
+  --page-actions-menu-item-icon-color: var(--icon-color-secondary);
+  --page-actions-menu-item-icon-border-color: var(--color-warm-grey-3);
+  --page-actions-menu-item-icon-border-radius: var(--border-radius);
+  --page-actions-menu-item-icon-wrapper-size: 28px;
+
+  --page-actions-menu-item-text-gap: 2px;
+
+  --page-actions-menu-item-title-font-weight: var(--font-weight-regular);
+  --page-actions-menu-item-title-font-size: var(--font-size-base);
+  --page-actions-menu-item-title-line-height: var(--line-height-base);
+  --page-actions-menu-item-title-color: var(--text-color-secondary);
+
+  --page-actions-menu-item-title-icon-gap: var(--spacing-xxs);
+  --page-actions-menu-item-title-icon-color: var(--icon-color-secondary);
+
+  --page-actions-menu-item-description-font-weight: var(--font-weight-regular);
+  --page-actions-menu-item-description-font-size: var(--font-size-sm);
+  --page-actions-menu-item-description-line-height: var(--line-height-sm);
+  --page-actions-menu-item-description-color: var(--text-color-description);
+
+  --page-actions-processing-icon-color: var(--icon-color-interactive);
+  --page-actions-done-icon-color: var(--color-success-base);
+`;
+//# sourceMappingURL=variables.js.map

package/lib/components/TableOfContent/TableOfContent.js

@@ -41,21 +41,24 @@ function TableOfContent(props) {
     const { markdown: { toc = {} } = {} } = (0, hooks_1.useThemeConfig)();
     const displayedHeadings = (0, utils_1.getDisplayedHeadings)(headings, toc.depth || 3);
     const leastDepth = (0, utils_1.getLeastDepth)(displayedHeadings);
-    const activeHeadingId = (0, hooks_1.useActiveHeading)(contentWrapper, (0, utils_1.getDisplayedHeadingsIds)(displayedHeadings));
+    const { heading: activeHeading, handleHeadingClick } = (0, hooks_1.useActiveHeading)(contentWrapper, displayedHeadings);
     if (toc === null || toc === void 0 ? void 0 : toc.hide) {
         return null;
     }
-    return (React.createElement(React.Fragment, null,
-        React.createElement(TableOfContentMenu, { "data-component-name": "TableOfContent/TableOfContent", className: className },
-            React.createElement(TableOfContentItems, { ref: sidebar },
-                displayedHeadings.length ? (React.createElement(TableOfContentHeader, { "data-translation-key": "toc.header" }, translate('toc.header', toc.header || 'On this page'))) : null,
-                displayedHeadings.map((heading, idx) => {
-                    if (!heading) {
-                        return null;
-                    }
-                    const href = '#' + heading.id;
-                    return (React.createElement(TableOfContentMenuItem, { key: href + idx, href: href, depth: heading.depth - leastDepth + 1 || 0, className: activeHeadingId === heading.id ? 'active' : '', dangerouslySetInnerHTML: { __html: heading.value || '' }, "data-testid": `toc-${heading.value}`, onClick: () => telemetry.send({ type: 'toc_item.clicked' }) }));
-                })))));
+    return (React.createElement(TableOfContentMenu, { "data-component-name": "TableOfContent/TableOfContent", className: className },
+        React.createElement(TableOfContentItems, { ref: sidebar },
+            displayedHeadings.length ? (React.createElement(TableOfContentHeader, { "data-translation-key": "toc.header" }, translate('toc.header', toc.header || 'On this page'))) : null,
+            displayedHeadings.map((heading, idx) => {
+                if (!heading) {
+                    return null;
+                }
+                const href = '#' + heading.id;
+                return (React.createElement(TableOfContentMenuItem, { key: href + idx, href: href, depth: heading.depth - leastDepth + 1 || 0, className: activeHeading === heading.id ? 'active' : '', dangerouslySetInnerHTML: { __html: heading.value || '' }, "data-testid": `toc-${heading.value}`, onClick: (e) => {
+                        e.preventDefault();
+                        telemetry.send({ type: 'toc_item.clicked' });
+                        handleHeadingClick(heading.id);
+                    } }));
+            }))));
 }
 const TableOfContentMenu = styled_components_1.default.aside `
   background-color: var(--toc-bg-color);

package/lib/components/Tags/CounterTag.d.ts

@@ -2,4 +2,4 @@ import { Tag } from '../../components/Tag/Tag';
 export declare const CounterTag: import("styled-components").StyledComponent<typeof Tag, any, {
     className: "tag-counter";
     'data-component-name': string;
-}, "data-component-name" | "className">;
+}, "className" | "data-component-name">;

package/lib/components/Tags/HttpTag.d.ts

@@ -2,4 +2,4 @@ import { Tag } from '../../components/Tag/Tag';
 export declare const HttpTag: import("styled-components").StyledComponent<typeof Tag, any, {
     className: "tag-http";
     'data-component-name': string;
-}, "data-component-name" | "className">;
+}, "className" | "data-component-name">;

package/lib/core/constants/common.d.ts

@@ -1,6 +1,10 @@
 export { REDOCLY_TEAMS_RBAC } from '@redocly/config';
 export declare const DEFAULT_LOCALE_PLACEHOLDER = "default_locale";
 export declare const CONTENT_ID = "content";
+export declare const ICONS_CDN_URL: {
+    'font-awesome': string;
+    code: string;
+};
 export declare enum FEEDBACK_TYPES {
     RATING = "rating",
     SENTIMENT = "sentiment",

package/lib/core/constants/common.js

@@ -1,10 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MobileMenuType = exports.MenuItemType = exports.DEFAULT_FEEDBACK_TYPE = exports.FEEDBACK_TYPES = exports.CONTENT_ID = exports.DEFAULT_LOCALE_PLACEHOLDER = exports.REDOCLY_TEAMS_RBAC = void 0;
+exports.MobileMenuType = exports.MenuItemType = exports.DEFAULT_FEEDBACK_TYPE = exports.FEEDBACK_TYPES = exports.ICONS_CDN_URL = exports.CONTENT_ID = exports.DEFAULT_LOCALE_PLACEHOLDER = exports.REDOCLY_TEAMS_RBAC = void 0;
 var config_1 = require("@redocly/config");
 Object.defineProperty(exports, "REDOCLY_TEAMS_RBAC", { enumerable: true, get: function () { return config_1.REDOCLY_TEAMS_RBAC; } });
 exports.DEFAULT_LOCALE_PLACEHOLDER = 'default_locale';
 exports.CONTENT_ID = 'content';
+exports.ICONS_CDN_URL = {
+    'font-awesome': 'https://cdn.redocly.com/icons/fa/7.0.0',
+    code: 'https://cdn.redocly.com/icons/code/5.24.0',
+};
 var FEEDBACK_TYPES;
 (function (FEEDBACK_TYPES) {
     FEEDBACK_TYPES["RATING"] = "rating";

package/lib/core/contexts/CodeSnippetContext.d.ts

@@ -0,0 +1,7 @@
+export type CodeSnippetContextType = {
+    activeSnippetName: string;
+    setActiveSnippetName: (name: string) => void;
+};
+export declare const CODE_GROUP_SNIPPET_NAME_KEY = "redocly:codeGroupSnippetName";
+export declare const CodeSnippetContext: import("react").Context<CodeSnippetContextType | null>;
+export declare function useActiveCodeSnippetName(mode: 'tabs' | 'dropdown'): [string, (name: string) => void];

package/lib/core/contexts/CodeSnippetContext.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeSnippetContext = exports.CODE_GROUP_SNIPPET_NAME_KEY = void 0;
+exports.useActiveCodeSnippetName = useActiveCodeSnippetName;
+const react_1 = require("react");
+exports.CODE_GROUP_SNIPPET_NAME_KEY = 'redocly:codeGroupSnippetName';
+exports.CodeSnippetContext = (0, react_1.createContext)(null);
+function useActiveCodeSnippetName(mode) {
+    const context = (0, react_1.useContext)(exports.CodeSnippetContext);
+    if (!context) {
+        throw new Error('useCodeSnippetContext must be used within a CodeSnippetContext');
+    }
+    const [activeSnippetName, setActiveSnippetName] = (0, react_1.useState)(mode === 'tabs' ? '' : context.activeSnippetName);
+    if (mode === 'tabs') {
+        // use non-synced state for tabs mode
+        return [activeSnippetName, setActiveSnippetName];
+    }
+    else {
+        // use global synced state for dropdown mode
+        return [context.activeSnippetName, context.setActiveSnippetName];
+    }
+}
+//# sourceMappingURL=CodeSnippetContext.js.map

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

@@ -1,3 +1,4 @@
 export * from './ThemeDataContext';
 export * from './CodeWalkthrough/CodeWalkthroughControlsContext';
 export * from './CodeWalkthrough/CodeWalkthroughStepsContext';
+export * from './CodeSnippetContext';

package/lib/core/contexts/index.js

@@ -17,4 +17,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./ThemeDataContext"), exports);
 __exportStar(require("./CodeWalkthrough/CodeWalkthroughControlsContext"), exports);
 __exportStar(require("./CodeWalkthrough/CodeWalkthroughStepsContext"), exports);
+__exportStar(require("./CodeSnippetContext"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/hooks/__mocks__/use-theme-hooks.d.ts

@@ -64,4 +64,5 @@ export declare const useThemeHooks: jest.Mock<{
     }, [], any>;
     useLoadAndNavigate: jest.Mock<any, any, any>;
     usePageProps: jest.Mock<any, any, any>;
+    usePageData: jest.Mock<any, any, any>;
 }, [], any>;

package/lib/core/hooks/__mocks__/use-theme-hooks.js

@@ -87,5 +87,6 @@ exports.useThemeHooks = jest.fn(() => ({
     })),
     useLoadAndNavigate: jest.fn(),
     usePageProps: jest.fn().mockReturnValue({}),
+    usePageData: jest.fn().mockReturnValue(null),
 }));
 //# sourceMappingURL=use-theme-hooks.js.map

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

@@ -1,7 +1,6 @@
 import type { CodeWalkthroughFile } from '@redocly/config';
-import type { IconProps } from '../../../icons/types';
 export type RenderableFile = CodeWalkthroughFile & {
-    FileIcon: React.FunctionComponent<IconProps>;
+    fileIcon: React.JSX.Element;
     parentFolder: string;
     isNameDuplicate: boolean;
     inRootDir: boolean;

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

@@ -10,11 +10,11 @@ function useRenderableFiles(files) {
         const filePaths = files.map(({ path }) => path);
         const rootDir = (0, find_closest_common_directory_1.findClosestCommonDirectory)(filePaths);
         const renderableFiles = files.map((file) => {
-            const FileIcon = getFileTypeIcon(file.basename);
+            const fileIcon = getFileTypeIcon(file.basename);
             const parentFolder = file.path.split('/').slice(-2, -1)[0];
             const isNameDuplicate = files.some((_file) => file.basename === _file.basename && file.path !== _file.path);
             const inRootDir = file.path === `${(0, urls_1.removeLeadingSlash)(rootDir)}/${file.basename}`;
-            return Object.assign(Object.assign({}, file), { FileIcon,
+            return Object.assign(Object.assign({}, file), { fileIcon,
                 inRootDir,
                 parentFolder,
                 isNameDuplicate });

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

@@ -40,3 +40,4 @@ export * from './catalog/useCatalogEntities';
 export * from './use-active-page-version';
 export * from './use-page-versions';
 export * from './use-user-teams';
+export * from './use-page-actions';

package/lib/core/hooks/index.js

@@ -56,4 +56,5 @@ __exportStar(require("./catalog/useCatalogEntities"), exports);
 __exportStar(require("./use-active-page-version"), exports);
 __exportStar(require("./use-page-versions"), exports);
 __exportStar(require("./use-user-teams"), exports);
+__exportStar(require("./use-page-actions"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/hooks/use-active-heading.d.ts

@@ -1,2 +1,7 @@
-export type UseActiveHeadingReturnType = string | undefined;
-export declare function useActiveHeading(contentElement: HTMLDivElement | null, displayedHeaders: Array<string | undefined>): UseActiveHeadingReturnType;
+export declare function useActiveHeading(contentElement: HTMLDivElement | null, displayedHeadings?: Array<{
+    id: string;
+    depth: number;
+} | null>): {
+    heading: string | undefined;
+    handleHeadingClick: (headingId: string) => void;
+};