@redocly/theme 0.10.0 → 0.11.0

package/lib/components/Sidebar/SidebarLayout.js

@@ -0,0 +1,85 @@
+"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.SidebarLayout = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Sidebar_1 = require("../../components/Sidebar/Sidebar");
+const FooterWrapper_1 = require("../../components/Sidebar/FooterWrapper");
+const HeaderWrapper_1 = require("../../components/Sidebar/HeaderWrapper");
+const useMobileMenu_1 = require("../../hooks/useMobileMenu");
+const MobileSidebarButton_1 = require("../../components/Sidebar/MobileSidebarButton");
+const MenuContainer_1 = require("../../components/Menu/MenuContainer");
+const SidebarSearch_1 = require("../../components/Search/SidebarSearch");
+const useThemeConfig_1 = require("../../hooks/useThemeConfig");
+const MobileSidebarIcon_1 = require("./MobileSidebarIcon");
+const StyledFooterWrapper = (0, styled_components_1.default)(FooterWrapper_1.FooterWrapper) `
+  display: none;
+
+  ${({ theme }) => { var _a; return (_a = theme.mediaQueries) === null || _a === void 0 ? void 0 : _a.medium; }} {
+    display: flex;
+  }
+`;
+function SidebarLayout({ versions, menu, footer, header, growContent, collapsed, onToggleMenu, }) {
+    const [isOpen, setIsOpen] = (0, useMobileMenu_1.useMobileMenu)();
+    const [mappedCollapsed, setMappedCollapsed] = react_1.default.useState(collapsed);
+    (0, react_1.useEffect)(() => {
+        setMappedCollapsed(collapsed && !isOpen);
+    }, [isOpen, collapsed, setMappedCollapsed]);
+    const toggleMenu = () => {
+        onToggleMenu === null || onToggleMenu === void 0 ? void 0 : onToggleMenu(!isOpen);
+        setIsOpen(!isOpen);
+    };
+    const { search, sidebar } = (0, useThemeConfig_1.useThemeConfig)();
+    if (sidebar === null || sidebar === void 0 ? void 0 : sidebar.hide) {
+        return null;
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null, mappedCollapsed ? (footer ? (react_1.default.createElement(Wrapper, { collapsed: true },
+        react_1.default.createElement(StyledFooterWrapper, { "data-component-name": "Sidebar/FooterWrapper", collapsed: true }, footer),
+        react_1.default.createElement(MobileSidebarButton_1.MobileSidebarButton, { opened: isOpen, onClick: toggleMenu },
+            react_1.default.createElement(MobileSidebarIcon_1.MobileSidebarIcon, null)))) : null) : (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/SidebarLayout" },
+        react_1.default.createElement(MobileSidebarButton_1.MobileSidebarButton, { opened: isOpen, onClick: toggleMenu },
+            react_1.default.createElement(MobileSidebarIcon_1.MobileSidebarIcon, null)),
+        !(search === null || search === void 0 ? void 0 : search.hide) && (search === null || search === void 0 ? void 0 : search.placement) === 'sidebar' ? react_1.default.createElement(SidebarSearch_1.SidebarSearch, null) : null,
+        react_1.default.createElement(Sidebar_1.Sidebar, { animate: true, opened: isOpen },
+            header ? react_1.default.createElement(HeaderWrapper_1.HeaderWrapper, null, header) : null,
+            versions ? react_1.default.createElement(react_1.default.Fragment, null, versions) : null,
+            react_1.default.createElement(MenuContainer_1.MenuContainer, { growContent: growContent }, menu),
+            footer && !isOpen ? (react_1.default.createElement(FooterWrapper_1.FooterWrapper, { "data-component-name": "Sidebar/FooterWrapper" }, footer)) : null)))));
+}
+exports.SidebarLayout = SidebarLayout;
+const Wrapper = styled_components_1.default.div `
+  ${({ collapsed }) => collapsed &&
+    `
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        border-right: 1px solid var(--sidebar-border-color);
+    `}
+`;
+//# sourceMappingURL=SidebarLayout.js.map

package/lib/components/Sidebar/index.d.ts

@@ -0,0 +1,11 @@
+export * from '../../components/Sidebar/ApiCallItem';
+export * from '../../components/Sidebar/BackButton';
+export * from '../../components/Sidebar/Drilldown';
+export * from '../../components/Sidebar/DrilldownMenu';
+export * from '../../components/Sidebar/DrilldownMenuItem';
+export * from '../../components/Sidebar/MobileSidebarButton';
+export * from '../../components/Sidebar/MobileSidebarIcon';
+export * from '../../components/Sidebar/Sidebar';
+export * from '../../components/Sidebar/SidebarLayout';
+export * from '../../components/Sidebar/FooterWrapper';
+export * from '../../components/Sidebar/HeaderWrapper';

package/lib/components/Sidebar/index.js

@@ -0,0 +1,28 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../../components/Sidebar/ApiCallItem"), exports);
+__exportStar(require("../../components/Sidebar/BackButton"), exports);
+__exportStar(require("../../components/Sidebar/Drilldown"), exports);
+__exportStar(require("../../components/Sidebar/DrilldownMenu"), exports);
+__exportStar(require("../../components/Sidebar/DrilldownMenuItem"), exports);
+__exportStar(require("../../components/Sidebar/MobileSidebarButton"), exports);
+__exportStar(require("../../components/Sidebar/MobileSidebarIcon"), exports);
+__exportStar(require("../../components/Sidebar/Sidebar"), exports);
+__exportStar(require("../../components/Sidebar/SidebarLayout"), exports);
+__exportStar(require("../../components/Sidebar/FooterWrapper"), exports);
+__exportStar(require("../../components/Sidebar/HeaderWrapper"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/Sidebar/types.d.ts

@@ -0,0 +1,43 @@
+export declare enum MenuStyle {
+    Drilldown = "drilldown"
+}
+export interface ItemState extends NavItem {
+    items: ItemState[];
+    active: boolean;
+    hasActiveSubItem: boolean;
+    menuStyle?: MenuStyle;
+}
+export interface DrilldownMenuProps {
+    back: () => void;
+    item: ItemState;
+    prevActiveItem?: ItemState;
+}
+export interface MenuItemProps {
+    item: ItemState;
+    activeItem?: ItemState;
+}
+export interface NavItem {
+    label?: string;
+    sublabel?: string;
+    icon?: string;
+    link?: string;
+    type?: string;
+    httpVerb?: string;
+    expanded?: string;
+    selectFirstItemOnExpand?: boolean;
+    pageId?: string;
+    redocPrevLink?: string;
+    redocPrevLabel?: string;
+    redocNextLink?: string;
+    redocNextLabel?: string;
+    redocFakePage?: boolean;
+    redocInfoPageId?: string;
+    target?: string;
+    external?: boolean;
+    items?: NavItem[];
+    requiredPermission?: string;
+    menuStyle?: MenuStyle;
+    separatorLine?: boolean;
+    version?: string;
+    default?: boolean;
+}

package/lib/components/Sidebar/types.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuStyle = void 0;
+var MenuStyle;
+(function (MenuStyle) {
+    MenuStyle["Drilldown"] = "drilldown";
+})(MenuStyle = exports.MenuStyle || (exports.MenuStyle = {}));
+//# sourceMappingURL=types.js.map

package/lib/components/SidebarActions/ChangeViewButton.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { LayoutVariant } from '../../components/SidebarActions';
+interface ChangeViewButtonProps {
+    layout: LayoutVariant;
+    onClick: () => void;
+}
+export declare const ChangeViewButton: ({ layout, onClick, }: ChangeViewButtonProps) => JSX.Element | null;
+export {};

package/lib/components/SidebarActions/ChangeViewButton.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChangeViewButton = void 0;
+const react_1 = __importDefault(require("react"));
+const SidebarActions_1 = require("../../components/SidebarActions");
+const styled_1 = require("../../components/SidebarActions/styled");
+const ChangeViewButton = ({ layout, onClick, }) => {
+    return (react_1.default.createElement(styled_1.StyledChangeViewButton, { title: "Change layout", onClick: onClick }, layout === SidebarActions_1.LayoutVariant.STACKED ? react_1.default.createElement(styled_1.ChangeViewSvgRow, null) : react_1.default.createElement(styled_1.ChangeViewSvgColumn, null)));
+};
+exports.ChangeViewButton = ChangeViewButton;
+//# sourceMappingURL=ChangeViewButton.js.map

package/lib/components/SidebarActions/CollapseSidebarButton.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapseSidebarButton = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_1 = require("../../components/SidebarActions/styled");
+const CollapseSidebarButton = ({ initialValue, onClick, }) => {
+    return (react_1.default.createElement(styled_1.StyledToggleRightPanelButton, { title: initialValue ? 'Show sidebar' : 'Hide sidebar', onClick: onClick }, initialValue ? react_1.default.createElement(styled_1.HideLeftPanelSVG, null) : react_1.default.createElement(styled_1.ShowLeftPanelSVG, null)));
+};
+exports.CollapseSidebarButton = CollapseSidebarButton;
+//# sourceMappingURL=CollapseSidebarButton.js.map

package/lib/components/SidebarActions/SidebarActions.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarActions = exports.LayoutVariant = void 0;
+const react_1 = __importDefault(require("react"));
+const ChangeViewButton_1 = require("../../components/SidebarActions/ChangeViewButton");
+const ToggleRightPanelButton_1 = require("../../components/SidebarActions/ToggleRightPanelButton");
+const CollapseSidebarButton_1 = require("../../components/SidebarActions/CollapseSidebarButton");
+const styled_1 = require("../../components/SidebarActions/styled");
+var LayoutVariant;
+(function (LayoutVariant) {
+    LayoutVariant["STACKED"] = "stacked";
+    LayoutVariant["THREE_PANEL"] = "three-panel";
+})(LayoutVariant = exports.LayoutVariant || (exports.LayoutVariant = {}));
+const SidebarActions = ({ showChangeLayoutButton, showRightPanelToggle, layout, initialShowRightPanelToggle, hideCollapseSidebarButton = false, collapsedSidebar, isOpenapiDocs, onChangeRightPanelViewClick, onChangeViewClick, onChangeCollapseSidebarClick, requestAccessButton, }) => {
+    return (react_1.default.createElement(styled_1.ControlsWrap, { isOpenapiDocs: isOpenapiDocs, isCollapsed: collapsedSidebar, "data-component-name": "Sidebar/Actions" },
+        isOpenapiDocs && (react_1.default.createElement(styled_1.ControlsWrapChangeLayoutButtons, { isCollapsed: collapsedSidebar },
+            initialShowRightPanelToggle && (react_1.default.createElement(ToggleRightPanelButton_1.ToggleRightPanelButton, { showRightPanelToggle: showRightPanelToggle, onClick: onChangeRightPanelViewClick })),
+            showChangeLayoutButton && showRightPanelToggle && (react_1.default.createElement(ChangeViewButton_1.ChangeViewButton, { layout: layout, onClick: onChangeViewClick })))),
+        !collapsedSidebar && requestAccessButton,
+        !hideCollapseSidebarButton && (react_1.default.createElement(CollapseSidebarButton_1.CollapseSidebarButton, { initialValue: collapsedSidebar, onClick: onChangeCollapseSidebarClick }))));
+};
+exports.SidebarActions = SidebarActions;
+//# sourceMappingURL=SidebarActions.js.map

package/lib/components/SidebarActions/ToggleRightPanelButton.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToggleRightPanelButton = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_1 = require("../../components/SidebarActions/styled");
+const ToggleRightPanelButton = ({ showRightPanelToggle, onClick, }) => {
+    return (react_1.default.createElement(styled_1.StyledToggleRightPanelButton, { title: showRightPanelToggle ? 'Hide samples' : 'Show samples', onClick: onClick }, showRightPanelToggle ? react_1.default.createElement(styled_1.HideRightPanelSVG, null) : react_1.default.createElement(styled_1.ShowRightPanelSVG, null)));
+};
+exports.ToggleRightPanelButton = ToggleRightPanelButton;
+//# sourceMappingURL=ToggleRightPanelButton.js.map

package/lib/components/SidebarActions/index.d.ts

@@ -0,0 +1 @@
+export { SidebarActions, LayoutVariant } from '../../components/SidebarActions/SidebarActions';

package/lib/components/SidebarActions/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayoutVariant = exports.SidebarActions = void 0;
+var SidebarActions_1 = require("../../components/SidebarActions/SidebarActions");
+Object.defineProperty(exports, "SidebarActions", { enumerable: true, get: function () { return SidebarActions_1.SidebarActions; } });
+Object.defineProperty(exports, "LayoutVariant", { enumerable: true, get: function () { return SidebarActions_1.LayoutVariant; } });
+//# sourceMappingURL=index.js.map

package/lib/components/SidebarLogo/index.d.ts

@@ -0,0 +1 @@
+export * from '../../components/SidebarLogo/SidebarLogo';

package/lib/components/SidebarLogo/index.js

@@ -0,0 +1,18 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../../components/SidebarLogo/SidebarLogo"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/SourceCode/SourceCode.js

@@ -0,0 +1,60 @@
+"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.SourceCode = exports.Code = void 0;
+const react_1 = __importStar(require("react"));
+const utils_1 = require("../../utils");
+const SamplesPanelControls_1 = require("../../components/SamplesPanelControls");
+const CopyButton_1 = require("../../components/CopyButton");
+function Code({ source, lang, dataTestId, withLineNumbers, startLineNumber, className, }) {
+    const highlightedCode = (0, utils_1.highlight)(source, lang);
+    return (react_1.default.createElement(SamplesPanelControls_1.PreformattedCodeBlock, { className: className, dangerouslySetInnerHTML: {
+            __html: withLineNumbers
+                ? (0, utils_1.addLineNumbers)(highlightedCode, startLineNumber)
+                : highlightedCode,
+        }, "data-cy": dataTestId }));
+}
+exports.Code = Code;
+function SourceCode({ lang, source, externalSource, onCopyClick, withCopyButton, dataTestId = 'source-code', withLineNumbers, startLineNumber, className, }) {
+    const [sourceCode, setSourceCode] = (0, react_1.useState)(source !== null && source !== void 0 ? source : '');
+    // The same initial value should be returned for ssr and frontend to avoid issues
+    // Because we don't have session storage in ssr and can't get the security details there
+    // Issue for more details https://github.com/Redocly/reference-docs/issues/888
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        const _source = source || ((_b = (_a = externalSource === null || externalSource === void 0 ? void 0 : externalSource.sample) === null || _a === void 0 ? void 0 : _a.get) === null || _b === void 0 ? void 0 : _b.call(_a, externalSource));
+        if (_source) {
+            setSourceCode(_source);
+        }
+    }, [source, externalSource]);
+    if (withCopyButton) {
+        return (react_1.default.createElement(CopyButton_1.CopyButtonWrapper, { data: sourceCode, onCopyClick: onCopyClick, "data-component-name": "SourceCode/SourceCode" }, ({ renderCopyButton }) => (react_1.default.createElement(SamplesPanelControls_1.SampleControlsWrap, null,
+            react_1.default.createElement(SamplesPanelControls_1.SampleControls, { "data-cy": "copy-button" }, renderCopyButton()),
+            react_1.default.createElement(Code, { lang: lang, source: sourceCode, withLineNumbers: withLineNumbers, startLineNumber: startLineNumber, dataTestId: dataTestId, className: className })))));
+    }
+    return (react_1.default.createElement(Code, { dataTestId: dataTestId, className: className, lang: lang, source: sourceCode, withLineNumbers: withLineNumbers, startLineNumber: startLineNumber, "data-component-name": "SourceCode/SourceCode" }));
+}
+exports.SourceCode = SourceCode;
+//# sourceMappingURL=SourceCode.js.map

package/lib/components/SourceCode/index.d.ts

@@ -0,0 +1 @@
+export * from '../../components/SourceCode/SourceCode';

package/lib/components/SourceCode/index.js

@@ -0,0 +1,18 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../../components/SourceCode/SourceCode"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/TableOfContent/TableOfContent.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { MdHeading } from '../../types/portal';
+interface TableOfContentProps {
+    headings?: Array<MdHeading | null> | null | undefined;
+    contentWrapper: HTMLDivElement | null;
+}
+export declare function TableOfContent(props: TableOfContentProps): JSX.Element | null;
+export {};

package/lib/components/TableOfContent/TableOfContent.js

@@ -0,0 +1,109 @@
+"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.TableOfContent = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const useFullHeight_1 = require("../../hooks/useFullHeight");
+const useActiveHeading_1 = require("../../hooks/useActiveHeading");
+const useThemeConfig_1 = require("../../hooks/useThemeConfig");
+const utils_1 = require("../../components/TableOfContent/utils");
+function TableOfContent(props) {
+    const { headings, contentWrapper } = props;
+    const sidebar = React.useRef(null);
+    (0, useFullHeight_1.useFullHeight)(sidebar);
+    const { markdown: { toc = {} } = {} } = (0, useThemeConfig_1.useThemeConfig)();
+    const displayedHeadings = (0, utils_1.getDisplayedHeadings)(headings, toc.depth || 3);
+    const leastDepth = (0, utils_1.getLeastDepth)(displayedHeadings);
+    const activeHeadingId = (0, useActiveHeading_1.useActiveHeading)(contentWrapper, (0, utils_1.getDisplayedHeadingsIds)(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" },
+            React.createElement(TableOfContentItems, { ref: sidebar },
+                displayedHeadings.length ? React.createElement(TocHeader, null, toc.header || 'On this page') : null,
+                displayedHeadings.map((heading, idx) => {
+                    if (!heading) {
+                        return null;
+                    }
+                    const href = '#' + heading.id;
+                    return (React.createElement(MenuItem, { key: href + idx, href: href, depth: heading.depth - leastDepth + 1 || 0, className: activeHeadingId === heading.id ? 'active' : '', dangerouslySetInnerHTML: { __html: heading.value || '' }, "data-cy": `toc-${heading.value}` }));
+                })))));
+}
+exports.TableOfContent = TableOfContent;
+const TocHeader = styled_components_1.default.div `
+  font-family: var(--toc-heading-font-family);
+  font-size: var(--toc-heading-font-size);
+  font-weight: var(--toc-heading-font-weight);
+  padding: var(--toc-item-padding-vertical) var(--toc-item-padding-horizontal);
+  color: var(--toc-heading-text-color);
+  text-transform: uppercase;
+`;
+const MenuItem = styled_components_1.default.a `
+  display: block;
+  color: var(--toc-item-text-color);
+  background-color: var(--toc-item-background-color);
+  cursor: pointer;
+  font-size: var(--toc-item-font-size);
+  padding: var(--toc-item-padding-vertical) var(--toc-item-padding-horizontal);
+  padding-left: calc(var(--toc-item-nested-offset) * ${({ depth }) => depth});
+  transition: background-color 0.3s, color 0.3s;
+  text-decoration: none;
+  word-break: break-word;
+  font-family: var(--heading-font-family, var(--toc-item-font-family));
+
+  :hover,
+  &.active {
+    color: var(--toc-item-active-text-color);
+    background-color: var(--toc-item-active-background-color);
+  }
+
+  :empty {
+    padding: 0;
+  }
+`;
+const TableOfContentMenu = styled_components_1.default.aside `
+  background-color: var(--toc-background-color);
+  flex-shrink: 0;
+  display: none !important;
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    width: var(--toc-width);
+    display: block !important;
+  }
+`;
+const TableOfContentItems = styled_components_1.default.div `
+  position: sticky;
+  top: calc(var(--navbar-height) + var(--toc-offset-top));
+  max-height: calc(100vh - var(--navbar-height) - var(--toc-offset-top));
+  border-left: 1px solid var(--toc-border-color);
+  overflow-y: auto;
+  width: var(--toc-width);
+`;
+//# sourceMappingURL=TableOfContent.js.map

package/lib/components/TableOfContent/index.d.ts

@@ -0,0 +1 @@
+export * from '../../components/TableOfContent/TableOfContent';

package/lib/components/TableOfContent/index.js

@@ -0,0 +1,18 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../../components/TableOfContent/TableOfContent"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/TableOfContent/utils.d.ts

@@ -0,0 +1,4 @@
+import type { MdHeading } from '../../types/portal';
+export declare function getDisplayedHeadings(headings: Array<MdHeading | null> | null | undefined, tocDepth: number): Array<MdHeading | null>;
+export declare function getDisplayedHeadingsIds(headings: Array<MdHeading | null> | null | undefined): Array<string | undefined>;
+export declare function getLeastDepth(headings: Array<MdHeading | null> | null | undefined): number;

package/lib/components/Tabs/Tabs.js

@@ -0,0 +1,73 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tabs = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Tabs_1 = require("../../components/Tabs");
+function Tabs(props) {
+    var _a;
+    const children = react_1.default.Children.toArray(props.children);
+    const [activeTab, setActiveTab] = (0, react_1.useState)((_a = children[0]) === null || _a === void 0 ? void 0 : _a.props.label);
+    const onTabSelect = (label) => setActiveTab(label);
+    return (react_1.default.createElement(TabsContainer, { "data-component-name": "Markdown/Tabs/Tabs" },
+        react_1.default.createElement(TabList, null, children.map((child) => {
+            const { label } = child.props;
+            return react_1.default.createElement(Tabs_1.Tab, { activeTab: activeTab, key: label, label: label, onClick: onTabSelect });
+        })),
+        react_1.default.createElement(TabContent, null, children.map((child) => {
+            if (child.props.label !== activeTab)
+                return undefined;
+            return child.props.children;
+        }))));
+}
+exports.Tabs = Tabs;
+const TabsContainer = styled_components_1.default.div `
+  margin: 10px 0;
+
+  ol[class^='Tabs__TabList'] {
+    margin: 0;
+    padding: 0;
+  }
+`;
+const TabList = styled_components_1.default.ol `
+  color: var(--md-tabs-tab-text-color);
+  padding: 0;
+  margin-block-end: 0;
+  border: solid var(--color-secondary-400);
+  border-width: 0 0 1px 0;
+
+  li[class^='Tab__TabItem'] {
+    margin: 0;
+    margin-bottom: -1px;
+  }
+`;
+const TabContent = styled_components_1.default.div `
+  padding: 1rem 0;
+`;
+//# sourceMappingURL=Tabs.js.map

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

@@ -0,0 +1,2 @@
+export * from '../../components/Tabs/Tab';
+export * from '../../components/Tabs/Tabs';

package/lib/components/Tabs/index.js

@@ -0,0 +1,19 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../../components/Tabs/Tab"), exports);
+__exportStar(require("../../components/Tabs/Tabs"), exports);
+//# sourceMappingURL=index.js.map