@redocly/theme 0.2.3 → 0.3.0

package/ColorModeSwitcher/ColorModeSwitcher.js

@@ -52,13 +52,14 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var hooks_1 = require("../mocks/hooks");
 var constants_1 = require("../mocks/constants");
 var ColorModeIcon_1 = require("../icons/ColorModeIcon");
+var hooks_2 = require("../hooks");
 function ColorModeSwitcher() {
     var themeSettings = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME);
     var colorMode = themeSettings.colorMode;
     var _a = __read((0, react_1.useState)(''), 2), activeColorMode = _a[0], setActiveColorMode = _a[1];
-    (0, react_1.useEffect)(function () {
+    (0, hooks_2.useMount)(function () {
         setActiveColorMode(document.documentElement.className || (colorMode === null || colorMode === void 0 ? void 0 : colorMode.default));
-    }, []);
+    });
     if (!(colorMode === null || colorMode === void 0 ? void 0 : colorMode.modes) || (colorMode === null || colorMode === void 0 ? void 0 : colorMode.hide)) {
         return null;
     }

package/CopyButton/CopyButtonWrapper.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
+import { TooltipProps } from '../Tooltip';
 export interface CopyButtonWrapperProps {
     data: unknown;
     children: (props: {
-        renderCopyButton: () => JSX.Element;
+        renderCopyButton: (placement?: TooltipProps['placement']) => JSX.Element;
     }) => JSX.Element;
     dataTestId?: string;
 }

package/CopyButton/CopyButtonWrapper.js

@@ -43,8 +43,9 @@ function CopyButtonWrapperComponent(_a) {
         utils_1.ClipboardService.copyCustom(content);
         showTooltip();
     };
-    var renderCopyButton = function () {
-        return (react_1.default.createElement(Tooltip_1.Tooltip, { className: "copy-button", tip: utils_1.ClipboardService.isSupported() ? 'Copied' : 'Not supported in your browser', isOpen: tooltip.isOpened },
+    var renderCopyButton = function (placement) {
+        if (placement === void 0) { placement = 'top'; }
+        return (react_1.default.createElement(Tooltip_1.Tooltip, { className: "copy-button", tip: utils_1.ClipboardService.isSupported() ? 'Copied' : 'Not supported in your browser', isOpen: tooltip.isOpened, placement: placement },
             react_1.default.createElement(SamplesPanelControls_1.SamplesControlButton, { onClick: copy, "data-cy": dataTestId }, "Copy")));
     };
     return children({ renderCopyButton: renderCopyButton });

package/Markdown/Details.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare type DetailsProps = {
+    summary: string;
+};
+export declare function Details({ summary, children }: React.PropsWithChildren<DetailsProps>): JSX.Element;
+export {};

package/Markdown/Details.js

@@ -0,0 +1,22 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Details = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+function Details(_a) {
+    var summary = _a.summary, children = _a.children;
+    return (react_1.default.createElement(StyledDetails, null,
+        react_1.default.createElement("summary", null, summary),
+        react_1.default.createElement(StyledDetailsContent, null, children)));
+}
+exports.Details = Details;
+var StyledDetails = styled_components_1.default.details(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+var StyledDetailsContent = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
+var templateObject_1, templateObject_2;

package/Markdown/MarkdownLayout.d.ts

@@ -2,6 +2,8 @@ import React from 'react';
 declare type MarkdownLayoutProps = {
     tableOfContent: React.ReactNode;
     markdownWrapper: React.ReactNode;
+    showPrevButton?: boolean;
+    showNextButton?: boolean;
 };
-export declare function MarkdownLayout({ tableOfContent, markdownWrapper, }: MarkdownLayoutProps): JSX.Element;
+export declare function MarkdownLayout({ tableOfContent, markdownWrapper, showPrevButton, showNextButton, }: MarkdownLayoutProps): JSX.Element;
 export {};

package/Markdown/MarkdownLayout.js

@@ -9,11 +9,11 @@ var PageWrapper_1 = require("../Markdown/PageWrapper");
 var ContentWrapper_1 = require("../Markdown/ContentWrapper");
 var PageNavigation_1 = require("../PageNavigation/PageNavigation");
 function MarkdownLayout(_a) {
-    var tableOfContent = _a.tableOfContent, markdownWrapper = _a.markdownWrapper;
+    var tableOfContent = _a.tableOfContent, markdownWrapper = _a.markdownWrapper, showPrevButton = _a.showPrevButton, showNextButton = _a.showNextButton;
     return (react_1.default.createElement(PageWrapper_1.PageWrapper, { "data-component-name": "Markdown/MarkdownLayout" },
         react_1.default.createElement(ContentWrapper_1.ContentWrapper, { withToc: true },
             markdownWrapper,
-            react_1.default.createElement(PageNavigation_1.PageNavigation, null)),
+            react_1.default.createElement(PageNavigation_1.PageNavigation, { showPrevButton: showPrevButton, showNextButton: showNextButton })),
         tableOfContent));
 }
 exports.MarkdownLayout = MarkdownLayout;

package/Navbar/NavbarMenu.js

@@ -14,7 +14,7 @@ var NavbarItem_1 = require("../Navbar/NavbarItem");
 var utils_1 = require("../utils");
 function NavbarMenu(_a) {
     var menuItems = _a.menuItems;
-    if ((0, utils_1.isPrimitive)(menuItems) || (0, utils_1.isEmptyArray)(menuItems)) {
+    if ((0, utils_1.isPrimitive)(menuItems)) {
         return null;
     }
     return (react_1.default.createElement(NavItemsContainer, { "data-component-name": "Navbar/NavbarMenu" }, menuItems.map(function (navItem, index) {

package/PageNavigation/PageNavigation.d.ts

@@ -1,2 +1,7 @@
 /// <reference types="react" />
-export declare function PageNavigation(): JSX.Element | null;
+declare type PageNavigationProps = {
+    showPrevButton?: boolean;
+    showNextButton?: boolean;
+};
+export declare function PageNavigation({ showPrevButton, showNextButton, }: PageNavigationProps): JSX.Element | null;
+export {};

package/PageNavigation/PageNavigation.js

@@ -14,14 +14,15 @@ var PreviousPageLink_1 = require("../PageNavigation/PreviousPageLink");
 var NextPageLink_1 = require("../PageNavigation/NextPageLink");
 var hooks_1 = require("../mocks/hooks");
 var constants_1 = require("../mocks/constants");
-function PageNavigation() {
+function PageNavigation(_a) {
+    var _b = _a.showPrevButton, showPrevButton = _b === void 0 ? true : _b, _c = _a.showNextButton, showNextButton = _c === void 0 ? true : _c;
     var navigation = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME).navigation;
     if (navigation === null || navigation === void 0 ? void 0 : navigation.hide) {
         return null;
     }
     return (react_1.default.createElement(PageNavigationWrapper, { "data-component-name": "PageNavigation/PageNavigation" },
-        react_1.default.createElement(PreviousPageLink_1.PreviousPageLink, null),
-        react_1.default.createElement(NextPageLink_1.NextPageLink, null)));
+        showPrevButton && react_1.default.createElement(PreviousPageLink_1.PreviousPageLink, null),
+        showNextButton && react_1.default.createElement(NextPageLink_1.NextPageLink, null)));
 }
 exports.PageNavigation = PageNavigation;
 var PageNavigationWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  margin: 25px 0;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  margin: 25px 0;\n"])));

package/SourceCode/SourceCode.js

@@ -61,12 +61,12 @@ function SourceCode(_a) {
     // 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)(function () {
-        var _a, _b, _c;
-        var _externalSource = (_c = (_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)) !== null && _c !== void 0 ? _c : '';
-        if (_externalSource) {
-            setSourceCode(_externalSource);
+        var _a, _b;
+        var _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);
         }
-    }, [externalSource]);
+    }, [source, externalSource]);
     if (withCopyButton) {
         return (react_1.default.createElement(CopyButton_1.CopyButtonWrapper, { data: sourceCode, "data-component-name": "SourceCode/SourceCode" }, function (_a) {
             var renderCopyButton = _a.renderCopyButton;

package/globalStyle.d.ts

@@ -1,4 +1,3 @@
-export declare const lightMode: import("styled-components").FlattenSimpleInterpolation;
 export declare const darkMode: import("styled-components").FlattenSimpleInterpolation;
 export declare const styles: import("styled-components").FlattenSimpleInterpolation;
 export declare const GlobalStyle: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;

package/globalStyle.js

@@ -4,10 +4,10 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.GlobalStyle = exports.styles = exports.darkMode = exports.lightMode = void 0;
+exports.GlobalStyle = exports.styles = exports.darkMode = void 0;
 var styled_components_1 = require("styled-components");
 var baseColors = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  /* === Palette === */\n\n  /**\n    * @tokens Base Colors\n    * @presenter Color\n    */\n  --color-primary-100: #62a1ff;\n  --color-primary-200: #4892ff;\n  --color-primary-300: #2f83ff;\n  --color-primary-400: #1573ff;\n  --color-primary-500: #0065fb;\n  --color-primary-600: #005be2;\n  --color-primary-700: #0050c8;\n  --color-primary-800: #0046af;\n  --color-primary-900: #003c95;\n\n  --color-secondary-100: #ffffff;\n  --color-secondary-200: #f5f7fa;\n  --color-secondary-300: #f3f4f6;\n  --color-secondary-400: #e4e7eb;\n  --color-secondary-500: #d5dae0;\n  --color-secondary-600: #c7cdd5;\n  --color-secondary-700: #b8c0ca;\n  --color-secondary-800: #a9b3c0;\n  --color-secondary-900: #9ba6b5;\n\n  --color-emphasis-100: #ffffff;\n  --color-emphasis-200: #e9eaec;\n  --color-emphasis-300: #cdd0d5;\n  --color-emphasis-400: #b2b6bd;\n  --color-emphasis-500: #969ca6;\n  --color-emphasis-600: #7a828f;\n  --color-emphasis-700: #626974;\n  --color-emphasis-800: #4b5058;\n  --color-emphasis-900: #1c1e21;\n\n  --color-accent-100: #b3dcf3;\n  --color-accent-200: #a6dfff;\n  --color-accent-300: #8cd5ff;\n  --color-accent-400: #73ccff;\n  --color-accent-500: #59c3ff;\n  --color-accent-600: #40baff;\n  --color-accent-700: #26b1ff;\n  --color-accent-800: #0da7ff;\n  --color-accent-900: #009bf2;\n\n  --color-success-100: #98eda0;\n  --color-success-200: #82e98c;\n  --color-success-300: #6ce678;\n  --color-success-400: #57e264;\n  --color-success-500: #41de50;\n  --color-success-600: #2bda3c;\n  --color-success-700: #23c933;\n  --color-success-800: #1fb32d;\n  --color-success-900: #1b9e28;\n\n  --color-warning-100: #ffc966;\n  --color-warning-200: #ffc04d;\n  --color-warning-300: #ffb733;\n  --color-warning-400: #ffae1a;\n  --color-warning-500: #ffa500;\n  --color-warning-600: #e69400;\n  --color-warning-700: #cc8400;\n  --color-warning-800: #b37300;\n  --color-warning-900: #996300;\n\n  --color-error-100: #ffc7c7;\n  --color-error-200: #ffaeae;\n  --color-error-300: #ff9494;\n  --color-error-400: #ff7b7b;\n  --color-error-500: #ff6161;\n  --color-error-600: #ff4747;\n  --color-error-700: #ff2e2e;\n  --color-error-800: #ff1414;\n  --color-error-900: #ff0000;\n\n  // @tokens End\n"], ["\n  /* === Palette === */\n\n  /**\n    * @tokens Base Colors\n    * @presenter Color\n    */\n  --color-primary-100: #62a1ff;\n  --color-primary-200: #4892ff;\n  --color-primary-300: #2f83ff;\n  --color-primary-400: #1573ff;\n  --color-primary-500: #0065fb;\n  --color-primary-600: #005be2;\n  --color-primary-700: #0050c8;\n  --color-primary-800: #0046af;\n  --color-primary-900: #003c95;\n\n  --color-secondary-100: #ffffff;\n  --color-secondary-200: #f5f7fa;\n  --color-secondary-300: #f3f4f6;\n  --color-secondary-400: #e4e7eb;\n  --color-secondary-500: #d5dae0;\n  --color-secondary-600: #c7cdd5;\n  --color-secondary-700: #b8c0ca;\n  --color-secondary-800: #a9b3c0;\n  --color-secondary-900: #9ba6b5;\n\n  --color-emphasis-100: #ffffff;\n  --color-emphasis-200: #e9eaec;\n  --color-emphasis-300: #cdd0d5;\n  --color-emphasis-400: #b2b6bd;\n  --color-emphasis-500: #969ca6;\n  --color-emphasis-600: #7a828f;\n  --color-emphasis-700: #626974;\n  --color-emphasis-800: #4b5058;\n  --color-emphasis-900: #1c1e21;\n\n  --color-accent-100: #b3dcf3;\n  --color-accent-200: #a6dfff;\n  --color-accent-300: #8cd5ff;\n  --color-accent-400: #73ccff;\n  --color-accent-500: #59c3ff;\n  --color-accent-600: #40baff;\n  --color-accent-700: #26b1ff;\n  --color-accent-800: #0da7ff;\n  --color-accent-900: #009bf2;\n\n  --color-success-100: #98eda0;\n  --color-success-200: #82e98c;\n  --color-success-300: #6ce678;\n  --color-success-400: #57e264;\n  --color-success-500: #41de50;\n  --color-success-600: #2bda3c;\n  --color-success-700: #23c933;\n  --color-success-800: #1fb32d;\n  --color-success-900: #1b9e28;\n\n  --color-warning-100: #ffc966;\n  --color-warning-200: #ffc04d;\n  --color-warning-300: #ffb733;\n  --color-warning-400: #ffae1a;\n  --color-warning-500: #ffa500;\n  --color-warning-600: #e69400;\n  --color-warning-700: #cc8400;\n  --color-warning-800: #b37300;\n  --color-warning-900: #996300;\n\n  --color-error-100: #ffc7c7;\n  --color-error-200: #ffaeae;\n  --color-error-300: #ff9494;\n  --color-error-400: #ff7b7b;\n  --color-error-500: #ff6161;\n  --color-error-600: #ff4747;\n  --color-error-700: #ff2e2e;\n  --color-error-800: #ff1414;\n  --color-error-900: #ff0000;\n\n  // @tokens End\n"])));
-var baseDarkColors = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  /* === Palette === */\n\n  /**\n          * @tokens Base Colors\n          * @presenter Color\n          */\n  --color-primary-100: #969ca6;\n  --color-primary-200: #7f8693;\n  --color-primary-300: #7d7d80;\n  --color-primary-400: #4b4f56;\n  --color-primary-500: #404042;\n  --color-primary-600: #36383d;\n  --color-primary-700: #28282a;\n  --color-primary-800: #202021;\n  --color-primary-900: #000000;\n"], ["\n  /* === Palette === */\n\n  /**\n          * @tokens Base Colors\n          * @presenter Color\n          */\n  --color-primary-100: #969ca6;\n  --color-primary-200: #7f8693;\n  --color-primary-300: #7d7d80;\n  --color-primary-400: #4b4f56;\n  --color-primary-500: #404042;\n  --color-primary-600: #36383d;\n  --color-primary-700: #28282a;\n  --color-primary-800: #202021;\n  --color-primary-900: #000000;\n"])));
+var baseDarkColors = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  /**\n  * @tokens Base Dark Colors\n  * @presenter Color\n  */\n  --color-primary-100: #969ca6;\n  --color-primary-200: #7f8693;\n  --color-primary-300: #7d7d80;\n  --color-primary-400: #4b4f56;\n  --color-primary-500: #404042;\n  --color-primary-600: #36383d;\n  --color-primary-700: #28282a;\n  --color-primary-800: #202021;\n  --color-primary-900: #000000;\n\n  // @tokens End\n"], ["\n  /**\n  * @tokens Base Dark Colors\n  * @presenter Color\n  */\n  --color-primary-100: #969ca6;\n  --color-primary-200: #7f8693;\n  --color-primary-300: #7d7d80;\n  --color-primary-400: #4b4f56;\n  --color-primary-500: #404042;\n  --color-primary-600: #36383d;\n  --color-primary-700: #28282a;\n  --color-primary-800: #202021;\n  --color-primary-900: #000000;\n\n  // @tokens End\n"])));
 var httpColors = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  /**\n    * @tokens HTTP Colors\n    * @presenter Color\n    */\n  --color-http-get: #3a9601;\n  --color-http-post: #0065fb;\n  --color-http-put: #93527b;\n  --color-http-options: #947014;\n  --color-http-patch: #bf581d;\n  --color-http-delete: #c83637;\n  --color-http-basic: #707070;\n  --color-http-link: #07818f;\n  --color-http-head: #a23dad;\n  --color-http-hook: var(--color-http-post);\n  // @tokens End\n"], ["\n  /**\n    * @tokens HTTP Colors\n    * @presenter Color\n    */\n  --color-http-get: #3a9601;\n  --color-http-post: #0065fb;\n  --color-http-put: #93527b;\n  --color-http-options: #947014;\n  --color-http-patch: #bf581d;\n  --color-http-delete: #c83637;\n  --color-http-basic: #707070;\n  --color-http-link: #07818f;\n  --color-http-head: #a23dad;\n  --color-http-hook: var(--color-http-post);\n  // @tokens End\n"])));
 var responseColors = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  /**\n    * @tokens Response colors\n    * @presenter Color\n    */\n  --response-success-border-color: #b1e996;\n  --response-success-background-color: #f6fff4;\n  --response-success-text-color: var(--response-success-border-color);\n\n  --response-error-border-color: #ffc9c9;\n  --response-error-background-color: #fff4f4;\n  --response-error-text-color: var(--response-error-border-color);\n\n  --response-redirect-border-color: var(--color-warning-500);\n  --response-redirect-background-color: #ffa5001a;\n  --response-redirect-text-color: var(--response-redirect-border-color);\n\n  --response-info-border-color: #87ceeb;\n  --response-info-background-color: #87ceeb1a;\n  --response-info-text-color: var(--response-info-border-color);\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Response colors\n    * @presenter Color\n    */\n  --response-success-border-color: #b1e996;\n  --response-success-background-color: #f6fff4;\n  --response-success-text-color: var(--response-success-border-color);\n\n  --response-error-border-color: #ffc9c9;\n  --response-error-background-color: #fff4f4;\n  --response-error-text-color: var(--response-error-border-color);\n\n  --response-redirect-border-color: var(--color-warning-500);\n  --response-redirect-background-color: #ffa5001a;\n  --response-redirect-text-color: var(--response-redirect-border-color);\n\n  --response-info-border-color: #87ceeb;\n  --response-info-background-color: #87ceeb1a;\n  --response-info-text-color: var(--response-info-border-color);\n\n  // @tokens End\n"])));
 var typography = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  /* === Typography === */\n\n  /**\n    * @tokens Typography Colors\n    * @presenter Color\n    */\n  --color-content: #1f2933;\n  --color-content-inverse: var(--color-secondary-200);\n  --color-content-secondary: #7b8794;\n\n  /**\n    * @tokens Font Sizes\n    * @presenter FontSize\n    */\n  --font-size-base: 14px;\n  --font-size-small: 12px;\n\n  /**\n    * @tokens Line Heights\n    * @presenter LineHeight\n    */\n  --line-height-base: 1.5em;\n\n  /**\n    * @tokens Font Weights\n    * @presenter FontWeight\n    */\n  --font-weight-regular: 400;\n  --font-weight-bold: 600;\n  --font-weight-bolder: 700;\n\n  /**\n    * @tokens Font Families\n    * @presenter FontFamily\n    */\n  --font-family-base: Source Sans Pro, sans-serif;\n  --font-family-monospaced: Source Code Pro, monospace;\n\n  /**\n  * @tokens Rendering\n  */\n  --smoothing: antialiased; // text-smoothing\n  --text-rendering: optimizeSpeed; // text-rendering\n\n  // TODO: Not sure if Spacing should be in typography\n  /**\n  * @tokens Spacings\n  * @presenter Spacing\n  */\n  --spacing-unit: 5px;\n  --spacing-horizontal: calc(var(--spacing-unit) * 8);\n  --spacing-vertical: calc(var(--spacing-unit) * 4);\n\n  // @tokens End\n"], ["\n  /* === Typography === */\n\n  /**\n    * @tokens Typography Colors\n    * @presenter Color\n    */\n  --color-content: #1f2933;\n  --color-content-inverse: var(--color-secondary-200);\n  --color-content-secondary: #7b8794;\n\n  /**\n    * @tokens Font Sizes\n    * @presenter FontSize\n    */\n  --font-size-base: 14px;\n  --font-size-small: 12px;\n\n  /**\n    * @tokens Line Heights\n    * @presenter LineHeight\n    */\n  --line-height-base: 1.5em;\n\n  /**\n    * @tokens Font Weights\n    * @presenter FontWeight\n    */\n  --font-weight-regular: 400;\n  --font-weight-bold: 600;\n  --font-weight-bolder: 700;\n\n  /**\n    * @tokens Font Families\n    * @presenter FontFamily\n    */\n  --font-family-base: Source Sans Pro, sans-serif;\n  --font-family-monospaced: Source Code Pro, monospace;\n\n  /**\n  * @tokens Rendering\n  */\n  --smoothing: antialiased; // text-smoothing\n  --text-rendering: optimizeSpeed; // text-rendering\n\n  // TODO: Not sure if Spacing should be in typography\n  /**\n  * @tokens Spacings\n  * @presenter Spacing\n  */\n  --spacing-unit: 5px;\n  --spacing-horizontal: calc(var(--spacing-unit) * 8);\n  --spacing-vertical: calc(var(--spacing-unit) * 4);\n\n  // @tokens End\n"])));
@@ -16,7 +16,7 @@ var borders = (0, styled_components_1.css)(templateObject_7 || (templateObject_7
 var buttons = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  /*\n  * Static classnames that can be used to override styles for components:\n  * download-specification-button, next-section-button, button-base\n  */\n\n  /**\n    * @tokens Button default colors\n    */\n  --button-color: white; // @presenter Color\n  --button-background-color: var(--color-emphasis-500); // @presenter Color\n  --button-hover-background-color: var(--color-emphasis-600); // @presenter Color\n  --button-active-background-color: var(--color-emphasis-700); // @presenter Color\n  --button-outlined-active-border-color: var(--color-emphasis-800); // @presenter Color\n\n  /**\n    * @tokens Button primary colors\n    */\n  .button-color-primary {\n    --button-color: white; // @presenter Color\n    --button-background-color: var(--color-primary-500); // @presenter Color\n    --button-hover-background-color: var(--color-primary-600); // @presenter Color\n    --button-active-background-color: var(--color-primary-700); // @presenter Color\n    --button-outlined-active-border-color: var(--color-primary-800); // @presenter Color\n  }\n\n  /**\n    * @tokens Button secondary colors\n    */\n  .button-color-secondary {\n    --button-color: var(--color-emphasis-800); // @presenter Color\n    --button-background-color: var(--color-secondary-400); // @presenter Color\n    --button-hover-background-color: var(--color-secondary-500); // @presenter Color\n    --button-active-background-color: var(--color-secondary-600); // @presenter Color\n    --button-outlined-active-border-color: var(--color-secondary-700); // @presenter Color\n  }\n\n  /**\n    * @tokens Button borders\n    */\n  --button-border-radius: var(--global-border-radius); // @presenter BorderRadius\n  --button-margin: 5px; // @presenter Margin\n  --button-box-shadow: none; // @presenter Shadow\n  --button-active-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1); // @presenter Shadow\n\n  /**\n    * @tokens Button typography\n    */\n  --button-font-family: inherit; // @presenter FontFamily\n  --button-font-weight: var(--font-weight-bold); // @presenter FontWeight\n  --button-small-font-size: 12px; // @presenter FontSize\n  --button-small-padding: 8px 10px;\n  --button-small-min-width: 90px; // @presenter Spacing\n  --button-medium-font-size: 14px; // @presenter FontSize\n  --button-medium-padding: 8px 20px;\n  --button-medium-min-width: 120px; // @presenter Spacing\n  --button-large-font-size: 14px; // @presenter FontSize\n  --button-large-padding: 12px 24px;\n  --button-large-min-width: 150px; // @presenter Spacing\n  --button-xlarge-font-size: 16px; // @presenter FontSize\n  --button-xlarge-padding: 20px 24px;\n  --button-xlarge-min-width: 200px; // @presenter Spacing\n\n  // @tokens End\n"], ["\n  /*\n  * Static classnames that can be used to override styles for components:\n  * download-specification-button, next-section-button, button-base\n  */\n\n  /**\n    * @tokens Button default colors\n    */\n  --button-color: white; // @presenter Color\n  --button-background-color: var(--color-emphasis-500); // @presenter Color\n  --button-hover-background-color: var(--color-emphasis-600); // @presenter Color\n  --button-active-background-color: var(--color-emphasis-700); // @presenter Color\n  --button-outlined-active-border-color: var(--color-emphasis-800); // @presenter Color\n\n  /**\n    * @tokens Button primary colors\n    */\n  .button-color-primary {\n    --button-color: white; // @presenter Color\n    --button-background-color: var(--color-primary-500); // @presenter Color\n    --button-hover-background-color: var(--color-primary-600); // @presenter Color\n    --button-active-background-color: var(--color-primary-700); // @presenter Color\n    --button-outlined-active-border-color: var(--color-primary-800); // @presenter Color\n  }\n\n  /**\n    * @tokens Button secondary colors\n    */\n  .button-color-secondary {\n    --button-color: var(--color-emphasis-800); // @presenter Color\n    --button-background-color: var(--color-secondary-400); // @presenter Color\n    --button-hover-background-color: var(--color-secondary-500); // @presenter Color\n    --button-active-background-color: var(--color-secondary-600); // @presenter Color\n    --button-outlined-active-border-color: var(--color-secondary-700); // @presenter Color\n  }\n\n  /**\n    * @tokens Button borders\n    */\n  --button-border-radius: var(--global-border-radius); // @presenter BorderRadius\n  --button-margin: 5px; // @presenter Margin\n  --button-box-shadow: none; // @presenter Shadow\n  --button-active-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1); // @presenter Shadow\n\n  /**\n    * @tokens Button typography\n    */\n  --button-font-family: inherit; // @presenter FontFamily\n  --button-font-weight: var(--font-weight-bold); // @presenter FontWeight\n  --button-small-font-size: 12px; // @presenter FontSize\n  --button-small-padding: 8px 10px;\n  --button-small-min-width: 90px; // @presenter Spacing\n  --button-medium-font-size: 14px; // @presenter FontSize\n  --button-medium-padding: 8px 20px;\n  --button-medium-min-width: 120px; // @presenter Spacing\n  --button-large-font-size: 14px; // @presenter FontSize\n  --button-large-padding: 12px 24px;\n  --button-large-min-width: 150px; // @presenter Spacing\n  --button-xlarge-font-size: 16px; // @presenter FontSize\n  --button-xlarge-padding: 20px 24px;\n  --button-xlarge-min-width: 200px; // @presenter Spacing\n\n  // @tokens End\n"])));
 var sidebar = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  /* === Sidebar === */\n\n  /**\n    * @tokens Sidebar typography\n    */\n  --sidebar-font-size: var(--font-size-base);\n  --sidebar-font-family: var(--font-family-base);\n  --sidebar-word-break: 'inherit';\n\n  /**\n    * @tokens Sidebar colors\n    * @presenter Color\n    */\n  --sidebar-background-color: #fff;\n  --sidebar-right-line-color: var(--global-border-color);\n  --sidebar-separator-label-color: var(--sidebar-item-color);\n  --sidebar-separator-line-color: #dadada;\n  --sidebar-chevron-color: var(--sidebar-item-color);\n\n  /**\n    * @tokens Sidebar spacing\n    * @presenter Spacing\n    */\n  --sidebar-width: 285px; // @presenter NO\n\n  --sidebar-spacing-unit: 8px;\n  --sidebar-spacing-horizontal: var(--sidebar-spacing-unit);\n  --sidebar-spacing-vertical: var(--sidebar-spacing-unit);\n  --sidebar-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2);\n  --sidebar-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2);\n  --sidebar-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2);\n\n  --sidebar-margin-left: calc(var(--sidebar-spacing-unit) * 2);\n  --sidebar-padding-horizontal: var(--sidebar-spacing-unit);\n  --sidebar-padding-vertical: var(--sidebar-spacing-unit);\n  --sidebar-spacing-padding-vertical: var(--sidebar-spacing-unit); // TODO: seems like duplicated\n  --sidebar-spacing-padding-horizontal: var(--sidebar-spacing-unit); // TODO: seems like duplicated\n\n  --sidebar-chevron-size: var(--sidebar-spacing-unit);\n\n  /**\n    * @tokens Sidebar border\n    */\n  --sidebar-border-radius: 4px; // @presenter BorderRadius\n\n  /* === Sidebar Item === */\n\n  /**\n    * @tokens Sidebar item typography\n    */\n  --sidebar-item-font-family: var(--font-family-base); // @presenter FontFamily\n  --sidebar-item-font-size: var(--font-size-base); // @presenter FontSize\n\n  /**\n    * @tokens Sidebar item colors\n    *  @presenter Color\n    */\n  --sidebar-item-color: var(--color-content);\n  --sidebar-item-active-color: var(--color-content);\n  --sidebar-item-background-color: #fff;\n  --sidebar-item-active-background-color: var(--global-border-color);\n\n  /**\n    * @tokens Sidebar item spacing\n    * @presenter Spacing\n    */\n  --sidebar-item-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2);\n  --sidebar-item-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2);\n  --sidebar-item-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2);\n\n  /**\n    * @tokens Sidebar item border\n    */\n  --sidebar-item-border-radius: 4px; // @presenter BorderRadius\n\n  // @tokens End\n"], ["\n  /* === Sidebar === */\n\n  /**\n    * @tokens Sidebar typography\n    */\n  --sidebar-font-size: var(--font-size-base);\n  --sidebar-font-family: var(--font-family-base);\n  --sidebar-word-break: 'inherit';\n\n  /**\n    * @tokens Sidebar colors\n    * @presenter Color\n    */\n  --sidebar-background-color: #fff;\n  --sidebar-right-line-color: var(--global-border-color);\n  --sidebar-separator-label-color: var(--sidebar-item-color);\n  --sidebar-separator-line-color: #dadada;\n  --sidebar-chevron-color: var(--sidebar-item-color);\n\n  /**\n    * @tokens Sidebar spacing\n    * @presenter Spacing\n    */\n  --sidebar-width: 285px; // @presenter NO\n\n  --sidebar-spacing-unit: 8px;\n  --sidebar-spacing-horizontal: var(--sidebar-spacing-unit);\n  --sidebar-spacing-vertical: var(--sidebar-spacing-unit);\n  --sidebar-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2);\n  --sidebar-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2);\n  --sidebar-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2);\n\n  --sidebar-margin-left: calc(var(--sidebar-spacing-unit) * 2);\n  --sidebar-padding-horizontal: var(--sidebar-spacing-unit);\n  --sidebar-padding-vertical: var(--sidebar-spacing-unit);\n  --sidebar-spacing-padding-vertical: var(--sidebar-spacing-unit); // TODO: seems like duplicated\n  --sidebar-spacing-padding-horizontal: var(--sidebar-spacing-unit); // TODO: seems like duplicated\n\n  --sidebar-chevron-size: var(--sidebar-spacing-unit);\n\n  /**\n    * @tokens Sidebar border\n    */\n  --sidebar-border-radius: 4px; // @presenter BorderRadius\n\n  /* === Sidebar Item === */\n\n  /**\n    * @tokens Sidebar item typography\n    */\n  --sidebar-item-font-family: var(--font-family-base); // @presenter FontFamily\n  --sidebar-item-font-size: var(--font-size-base); // @presenter FontSize\n\n  /**\n    * @tokens Sidebar item colors\n    *  @presenter Color\n    */\n  --sidebar-item-color: var(--color-content);\n  --sidebar-item-active-color: var(--color-content);\n  --sidebar-item-background-color: #fff;\n  --sidebar-item-active-background-color: var(--global-border-color);\n\n  /**\n    * @tokens Sidebar item spacing\n    * @presenter Spacing\n    */\n  --sidebar-item-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2);\n  --sidebar-item-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2);\n  --sidebar-item-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2);\n\n  /**\n    * @tokens Sidebar item border\n    */\n  --sidebar-item-border-radius: 4px; // @presenter BorderRadius\n\n  // @tokens End\n"])));
 var admonition = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  /**\n    * @tokens Admonition colors\n    * @presenter Color\n    */\n\n  /* info */\n  --admonition-info-background-color: #ebedf0;\n  --admonition-info-text-color: var(--color-content);\n  --admonition-info-icon-color: #4782cb;\n\n  /* attention */\n  --admonition-attention-background-color: #e6eef8;\n  --admonition-attention-text-color: var(--color-content);\n  --admonition-attention-icon-color: #4782cb;\n\n  /* warning */\n  --admonition-warning-background-color: #feeda5;\n  --admonition-warning-text-color: var(--color-content);\n  --admonition-warning-icon-color: #d4ad03;\n\n  /* danger */\n  --admonition-danger-background-color: #fceaea;\n  --admonition-danger-text-color: var(--color-content);\n  --admonition-danger-icon-color: #e53935;\n\n  /* success */\n  --admonition-success-background-color: #ddffe1;\n  --admonition-success-text-color: var(--color-content);\n  --admonition-success-icon-color: #00aa13;\n\n  /**\n    * @tokens Admonition typography\n    */\n  --admonition-font-size: 16px; // @presenter FontSize\n  --admonition-font-weight: normal; // @presenter FontWeight\n  --admonition-line-height: 1.5em; // @presenter LineHeight\n  --admonition-heading-font-size: 16px; // @presenter FontSize\n  --admonition-heading-font-weight: var(--font-weight-bold); // @presenter FontWeight\n  --admonition-heading-letter-spacing: 0.3px; // @presenter LetterSpacing\n  --admonition-heading-transform: uppercase;\n\n  /**\n    * @tokens Admonition spacing\n    * @presenter Spacing\n    */\n  --admonition-margin-horizontal: 0;\n  --admonition-margin-vertical: calc(var(--spacing-unit) * 2);\n  --admonition-padding-horizontal: calc(var(--spacing-unit) * 4);\n  --admonition-padding-vertical: calc(var(--spacing-unit) * 4);\n  --admonition-icon-size: 25px;\n\n  /**\n    * @tokens Admonition border\n    */\n  --admonition-border-radius: 8px; // @presenter BorderRadius\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Admonition colors\n    * @presenter Color\n    */\n\n  /* info */\n  --admonition-info-background-color: #ebedf0;\n  --admonition-info-text-color: var(--color-content);\n  --admonition-info-icon-color: #4782cb;\n\n  /* attention */\n  --admonition-attention-background-color: #e6eef8;\n  --admonition-attention-text-color: var(--color-content);\n  --admonition-attention-icon-color: #4782cb;\n\n  /* warning */\n  --admonition-warning-background-color: #feeda5;\n  --admonition-warning-text-color: var(--color-content);\n  --admonition-warning-icon-color: #d4ad03;\n\n  /* danger */\n  --admonition-danger-background-color: #fceaea;\n  --admonition-danger-text-color: var(--color-content);\n  --admonition-danger-icon-color: #e53935;\n\n  /* success */\n  --admonition-success-background-color: #ddffe1;\n  --admonition-success-text-color: var(--color-content);\n  --admonition-success-icon-color: #00aa13;\n\n  /**\n    * @tokens Admonition typography\n    */\n  --admonition-font-size: 16px; // @presenter FontSize\n  --admonition-font-weight: normal; // @presenter FontWeight\n  --admonition-line-height: 1.5em; // @presenter LineHeight\n  --admonition-heading-font-size: 16px; // @presenter FontSize\n  --admonition-heading-font-weight: var(--font-weight-bold); // @presenter FontWeight\n  --admonition-heading-letter-spacing: 0.3px; // @presenter LetterSpacing\n  --admonition-heading-transform: uppercase;\n\n  /**\n    * @tokens Admonition spacing\n    * @presenter Spacing\n    */\n  --admonition-margin-horizontal: 0;\n  --admonition-margin-vertical: calc(var(--spacing-unit) * 2);\n  --admonition-padding-horizontal: calc(var(--spacing-unit) * 4);\n  --admonition-padding-vertical: calc(var(--spacing-unit) * 4);\n  --admonition-icon-size: 25px;\n\n  /**\n    * @tokens Admonition border\n    */\n  --admonition-border-radius: 8px; // @presenter BorderRadius\n\n  // @tokens End\n"])));
-var panels = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  /**\n    * @tokens Panel border\n    */\n  --panels-border-radius: 8px; // @presenter BorderRadius\n\n  /**\n    * @tokens Samples panel\n    * @presenter Color\n    */\n  --samples-panel-gap: 20px;\n  --samples-panel-width: 50%;\n\n  --panels-background-color: #fff;\n  --samples-panel-block-background-color: #fff;\n  --samples-panel-background-color: #52606d;\n  --samples-panel-callback-background-color: var(--color-secondary-300);\n  --samples-panel-controls-background-color: #323f4b;\n  --samples-panel-controls-hover-background-color: #3c4c5a;\n  --samples-panel-controls-active-border-color: var(--color-accent-500);\n  --samples-panel-text-color: #fff;\n  --samples-panel-heading-color: #fff;\n\n  --samples-panel-markdown-background-color: #3c4c5a;\n  --samples-panel-markdown-border-color: #46596a;\n\n  /**\n    * @tokens Try It panel\n    * @presenter Color\n    */\n\n  --try-it-panel-tab-background-color: var(--samples-panel-background-color);\n  --try-it-panel-active-tab-background-color: #47535e;\n  --try-it-panel-active-tab-border-color: var(--color-accent-500);\n  --try-it-panel-disabled-tab-color: rgba(245, 247, 250, 0.7);\n  --try-it-panel-controls-background-color: var(--samples-panel-controls-background-color);\n  --try-it-panel-action-button-width: auto;\n\n  /**\n    * @tokens Request and Response panel\n    * @presenter Color\n    */\n  --request-and-response-panel-background-color: #fff;\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Panel border\n    */\n  --panels-border-radius: 8px; // @presenter BorderRadius\n\n  /**\n    * @tokens Samples panel\n    * @presenter Color\n    */\n  --samples-panel-gap: 20px;\n  --samples-panel-width: 50%;\n\n  --panels-background-color: #fff;\n  --samples-panel-block-background-color: #fff;\n  --samples-panel-background-color: #52606d;\n  --samples-panel-callback-background-color: var(--color-secondary-300);\n  --samples-panel-controls-background-color: #323f4b;\n  --samples-panel-controls-hover-background-color: #3c4c5a;\n  --samples-panel-controls-active-border-color: var(--color-accent-500);\n  --samples-panel-text-color: #fff;\n  --samples-panel-heading-color: #fff;\n\n  --samples-panel-markdown-background-color: #3c4c5a;\n  --samples-panel-markdown-border-color: #46596a;\n\n  /**\n    * @tokens Try It panel\n    * @presenter Color\n    */\n\n  --try-it-panel-tab-background-color: var(--samples-panel-background-color);\n  --try-it-panel-active-tab-background-color: #47535e;\n  --try-it-panel-active-tab-border-color: var(--color-accent-500);\n  --try-it-panel-disabled-tab-color: rgba(245, 247, 250, 0.7);\n  --try-it-panel-controls-background-color: var(--samples-panel-controls-background-color);\n  --try-it-panel-action-button-width: auto;\n\n  /**\n    * @tokens Request and Response panel\n    * @presenter Color\n    */\n  --request-and-response-panel-background-color: #fff;\n\n  // @tokens End\n"])));
+var panels = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  /**\n    * @tokens Panel border\n    */\n  --panels-border-radius: 8px; // @presenter BorderRadius\n\n  /**\n    * @tokens Samples panel\n    * @presenter Color\n    */\n  --samples-panel-gap: 20px;\n  --samples-panel-width: 50%;\n\n  --panels-background-color: #fff;\n\n  --panels-title-color: var(--color-content);\n  --panels-title-font-size: var(--h3-font-size);\n  --panels-title-line-height: var(--h3-line-height);\n  --panels-title-font-weight: var(--h-font-weight);\n  --panels-title-font-family: var(--font-family-base);\n\n  --panels-sub-title-color: var(--color-content);\n  --panels-sub-title-font-size: 0.9em;\n  --panels-sub-title-font-weight: normal;\n  --panels-sub-title-font-family: var(--font-family-base);\n  --panels-sub-title-line-height: var(--h3-line-height);\n\n  --panels-shelf-icon-color: var(--color-content);\n\n  --samples-panel-block-background-color: #fff;\n  --samples-panel-background-color: #52606d;\n  --samples-panel-callback-background-color: var(--color-secondary-300);\n  --samples-panel-controls-background-color: #323f4b;\n  --samples-panel-controls-hover-background-color: #3c4c5a;\n  --samples-panel-controls-active-border-color: var(--color-accent-500);\n  --samples-panel-text-color: #fff;\n  --samples-panel-heading-color: #fff;\n\n  --samples-panel-markdown-background-color: #3c4c5a;\n  --samples-panel-markdown-border-color: #46596a;\n\n  /**\n    * @tokens Try It panel\n    * @presenter Color\n    */\n\n  --try-it-panel-tab-background-color: var(--samples-panel-background-color);\n  --try-it-panel-active-tab-background-color: #47535e;\n  --try-it-panel-active-tab-border-color: var(--color-accent-500);\n  --try-it-panel-disabled-tab-color: rgba(245, 247, 250, 0.7);\n  --try-it-panel-controls-background-color: var(--samples-panel-controls-background-color);\n  --try-it-panel-action-button-width: auto;\n\n  /**\n    * @tokens Request and Response panel\n    * @presenter Color\n    */\n  --request-and-response-panel-background-color: #fff;\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Panel border\n    */\n  --panels-border-radius: 8px; // @presenter BorderRadius\n\n  /**\n    * @tokens Samples panel\n    * @presenter Color\n    */\n  --samples-panel-gap: 20px;\n  --samples-panel-width: 50%;\n\n  --panels-background-color: #fff;\n\n  --panels-title-color: var(--color-content);\n  --panels-title-font-size: var(--h3-font-size);\n  --panels-title-line-height: var(--h3-line-height);\n  --panels-title-font-weight: var(--h-font-weight);\n  --panels-title-font-family: var(--font-family-base);\n\n  --panels-sub-title-color: var(--color-content);\n  --panels-sub-title-font-size: 0.9em;\n  --panels-sub-title-font-weight: normal;\n  --panels-sub-title-font-family: var(--font-family-base);\n  --panels-sub-title-line-height: var(--h3-line-height);\n\n  --panels-shelf-icon-color: var(--color-content);\n\n  --samples-panel-block-background-color: #fff;\n  --samples-panel-background-color: #52606d;\n  --samples-panel-callback-background-color: var(--color-secondary-300);\n  --samples-panel-controls-background-color: #323f4b;\n  --samples-panel-controls-hover-background-color: #3c4c5a;\n  --samples-panel-controls-active-border-color: var(--color-accent-500);\n  --samples-panel-text-color: #fff;\n  --samples-panel-heading-color: #fff;\n\n  --samples-panel-markdown-background-color: #3c4c5a;\n  --samples-panel-markdown-border-color: #46596a;\n\n  /**\n    * @tokens Try It panel\n    * @presenter Color\n    */\n\n  --try-it-panel-tab-background-color: var(--samples-panel-background-color);\n  --try-it-panel-active-tab-background-color: #47535e;\n  --try-it-panel-active-tab-border-color: var(--color-accent-500);\n  --try-it-panel-disabled-tab-color: rgba(245, 247, 250, 0.7);\n  --try-it-panel-controls-background-color: var(--samples-panel-controls-background-color);\n  --try-it-panel-action-button-width: auto;\n\n  /**\n    * @tokens Request and Response panel\n    * @presenter Color\n    */\n  --request-and-response-panel-background-color: #fff;\n\n  // @tokens End\n"])));
 var tooltip = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  /**\n    * @tokens Tooltip Base\n    * @presenter Color\n    */\n  --tooltip-color: var(--color-secondary-300);\n  --tooltip-background-color: #52606d;\n\n  /**\n    * @tokens Tooltip Copy Button\n    * @presenter Color\n    */\n  .tooltip-copy-button {\n    --tooltip-color: #000;\n    --tooltip-background-color: #fff;\n  }\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Tooltip Base\n    * @presenter Color\n    */\n  --tooltip-color: var(--color-secondary-300);\n  --tooltip-background-color: #52606d;\n\n  /**\n    * @tokens Tooltip Copy Button\n    * @presenter Color\n    */\n  .tooltip-copy-button {\n    --tooltip-color: #000;\n    --tooltip-background-color: #fff;\n  }\n\n  // @tokens End\n"])));
 var code = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  /**\n    * @tokens Code base styles\n    */\n  --code-font-size: 13px; // @presenter FontSize\n  --code-font-family: var(--font-family-monospaced); // @presenter FontFamily\n  --code-font-weight: 400; // @presenter FontWeight\n  --code-wrap: pre;\n\n  /**\n    * @tokens Inline Code\n    */\n  --inline-code-font-size: var(--code-font-size); // @presenter FontSize\n  --inline-code-font-family: var(--code-font-family); // @presenter FontFamily\n  --inline-code-color: #e53935; // @presenter Color\n  --inline-code-background-color: var(--color-secondary-200); // @presenter Color\n  --inline-code-border-color: var(--global-border-color); // @presenter Color\n  --inline-code-border-radius: var(--global-border-radius); // @presenter BorderRadius\n\n  /**\n    * @tokens Code Block\n    */\n  --code-block-font-size: var(--code-font-size); // @presenter FontSize\n  --code-block-font-family: var(--code-font-family); // @presenter FontFamily\n  --code-block-color: #f1928f; // @presenter Color\n  --code-block-background-color: rgba(217, 205, 199, 0.05); // @presenter Color\n  --code-block-border-color: var(--global-border-color); // @presenter Color\n  --code-block-border-radius: 8px; // @presenter BorderRadius\n  --code-block-max-height: 600px;\n  --code-block-word-break: initial;\n  --code-block-preformatted-background-color: #323f4b; // @presenter Color\n\n  --code-block-tokens-default-color: var(--color-content-inverse); // @presenter Color\n\n  --code-block-tokens-comment-color: hsl(30, 20%, 50%); // @presenter Color\n  --code-block-tokens-prolog-color: var(--code-block-tokens-comment-color); // @presenter Color\n  --code-block-tokens-doctype-color: var(--code-block-tokens-comment-color); // @presenter Color\n  --code-block-tokens-cdata-color: var(--code-block-tokens-comment-color); // @presenter Color\n\n  --code-block-tokens-property-color: var(--code-block-tokens-default-color); // @presenter Color\n  --code-block-tokens-tag-color: var(--code-block-tokens-default-color); // @presenter Color\n  --code-block-tokens-number-color: var(--code-block-tokens-default-color); // @presenter Color\n  --code-block-tokens-constant-color: var(--code-block-tokens-default-color); // @presenter Color\n  --code-block-tokens-symbol-color: var(--code-block-tokens-default-color); // @presenter Color\n\n  --code-block-tokens-boolean-color: var(--color-error-500); // @presenter Color\n\n  --code-block-tokens-string-color: #fee39e; // @presenter Color\n  --code-block-tokens-selector-color: var(--code-block-tokens-string-color); // @presenter Color\n  --code-block-tokens-attr-name-color: var(--code-block-tokens-string-color); // @presenter Color\n  --code-block-tokens-char-color: var(--code-block-tokens-string-color); // @presenter Color\n  --code-block-tokens-builtin-color: var(--code-block-tokens-string-color); // @presenter Color\n  --code-block-tokens-inserted-color: var(--code-block-tokens-string-color); // @presenter Color\n\n  --code-block-tokens-operator-color: #f5b83d; // @presenter Color\n  --code-block-tokens-entity-color: var(--code-block-tokens-operator-color); // @presenter Color\n  --code-block-tokens-url-color: var(--code-block-tokens-operator-color); // @presenter Color\n  --code-block-tokens-variable-color: var(--code-block-tokens-operator-color); // @presenter Color\n\n  --code-block-tokens-keyword-color: #ffdbf4; // @presenter Color\n  --code-block-tokens-atrule-color: var(--code-block-tokens-keyword-color); // @presenter Color\n  --code-block-tokens-attr-value-color: var(--code-block-tokens-keyword-color); // @presenter Color\n\n  --code-block-tokens-regex-color: #e90; // @presenter Color\n  --code-block-tokens-important-color: var(--code-block-tokens-regex-color); // @presenter Color\n\n  --code-block-tokens-deleted-color: red; // @presenter Color\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Code base styles\n    */\n  --code-font-size: 13px; // @presenter FontSize\n  --code-font-family: var(--font-family-monospaced); // @presenter FontFamily\n  --code-font-weight: 400; // @presenter FontWeight\n  --code-wrap: pre;\n\n  /**\n    * @tokens Inline Code\n    */\n  --inline-code-font-size: var(--code-font-size); // @presenter FontSize\n  --inline-code-font-family: var(--code-font-family); // @presenter FontFamily\n  --inline-code-color: #e53935; // @presenter Color\n  --inline-code-background-color: var(--color-secondary-200); // @presenter Color\n  --inline-code-border-color: var(--global-border-color); // @presenter Color\n  --inline-code-border-radius: var(--global-border-radius); // @presenter BorderRadius\n\n  /**\n    * @tokens Code Block\n    */\n  --code-block-font-size: var(--code-font-size); // @presenter FontSize\n  --code-block-font-family: var(--code-font-family); // @presenter FontFamily\n  --code-block-color: #f1928f; // @presenter Color\n  --code-block-background-color: rgba(217, 205, 199, 0.05); // @presenter Color\n  --code-block-border-color: var(--global-border-color); // @presenter Color\n  --code-block-border-radius: 8px; // @presenter BorderRadius\n  --code-block-max-height: 600px;\n  --code-block-word-break: initial;\n  --code-block-preformatted-background-color: #323f4b; // @presenter Color\n\n  --code-block-tokens-default-color: var(--color-content-inverse); // @presenter Color\n\n  --code-block-tokens-comment-color: hsl(30, 20%, 50%); // @presenter Color\n  --code-block-tokens-prolog-color: var(--code-block-tokens-comment-color); // @presenter Color\n  --code-block-tokens-doctype-color: var(--code-block-tokens-comment-color); // @presenter Color\n  --code-block-tokens-cdata-color: var(--code-block-tokens-comment-color); // @presenter Color\n\n  --code-block-tokens-property-color: var(--code-block-tokens-default-color); // @presenter Color\n  --code-block-tokens-tag-color: var(--code-block-tokens-default-color); // @presenter Color\n  --code-block-tokens-number-color: var(--code-block-tokens-default-color); // @presenter Color\n  --code-block-tokens-constant-color: var(--code-block-tokens-default-color); // @presenter Color\n  --code-block-tokens-symbol-color: var(--code-block-tokens-default-color); // @presenter Color\n\n  --code-block-tokens-boolean-color: var(--color-error-500); // @presenter Color\n\n  --code-block-tokens-string-color: #fee39e; // @presenter Color\n  --code-block-tokens-selector-color: var(--code-block-tokens-string-color); // @presenter Color\n  --code-block-tokens-attr-name-color: var(--code-block-tokens-string-color); // @presenter Color\n  --code-block-tokens-char-color: var(--code-block-tokens-string-color); // @presenter Color\n  --code-block-tokens-builtin-color: var(--code-block-tokens-string-color); // @presenter Color\n  --code-block-tokens-inserted-color: var(--code-block-tokens-string-color); // @presenter Color\n\n  --code-block-tokens-operator-color: #f5b83d; // @presenter Color\n  --code-block-tokens-entity-color: var(--code-block-tokens-operator-color); // @presenter Color\n  --code-block-tokens-url-color: var(--code-block-tokens-operator-color); // @presenter Color\n  --code-block-tokens-variable-color: var(--code-block-tokens-operator-color); // @presenter Color\n\n  --code-block-tokens-keyword-color: #ffdbf4; // @presenter Color\n  --code-block-tokens-atrule-color: var(--code-block-tokens-keyword-color); // @presenter Color\n  --code-block-tokens-attr-value-color: var(--code-block-tokens-keyword-color); // @presenter Color\n\n  --code-block-tokens-regex-color: #e90; // @presenter Color\n  --code-block-tokens-important-color: var(--code-block-tokens-regex-color); // @presenter Color\n\n  --code-block-tokens-deleted-color: red; // @presenter Color\n\n  // @tokens End\n"])));
 var links = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  /**\n    * @tokens Links\n    */\n  --link-color: var(--color-primary-500); // @presenter Color\n  --link-decoration: none;\n  --link-hover-color: var(--color-primary-100); // @presenter Color\n  --link-hover-decoration: underline;\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Links\n    */\n  --link-color: var(--color-primary-500); // @presenter Color\n  --link-decoration: none;\n  --link-hover-color: var(--color-primary-100); // @presenter Color\n  --link-hover-decoration: underline;\n\n  // @tokens End\n"])));
@@ -28,8 +28,7 @@ var toc = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 =
 var markdown = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  /**\n    * @tokens Markdown\n    * */\n  --content-wrapper-max-width: 910px;\n  --content-wrapper-padding-vertical: 25px; // @presenter Spacing\n  --content-wrapper-padding-horizontal: 0px; // @presenter Spacing\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Markdown\n    * */\n  --content-wrapper-max-width: 910px;\n  --content-wrapper-padding-vertical: 25px; // @presenter Spacing\n  --content-wrapper-padding-horizontal: 0px; // @presenter Spacing\n\n  // @tokens End\n"])));
 var blockquote = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  /**\n    * @tokens Blockquote\n    * */\n  // TODO: fix typo\n  --bloquote-margin-vertical: 1.5em; // @presenter Spacing\n  --bloquote-margin-horizontal: 0; // @presenter Spacing\n  --bloquote-padding-vertical: 0; // @presenter Spacing\n  --bloquote-padding-horizontal: calc(var(--spacing-unit) * 4); // @presenter Spacing\n  --bloquote-background-color: transparent; // @presenter Color\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Blockquote\n    * */\n  // TODO: fix typo\n  --bloquote-margin-vertical: 1.5em; // @presenter Spacing\n  --bloquote-margin-horizontal: 0; // @presenter Spacing\n  --bloquote-padding-vertical: 0; // @presenter Spacing\n  --bloquote-padding-horizontal: calc(var(--spacing-unit) * 4); // @presenter Spacing\n  --bloquote-background-color: transparent; // @presenter Color\n\n  // @tokens End\n"])));
 var portalSearch = (0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  /**\n    * @tokens Portal Search\n    */\n  --search-input-background-color: rgba(255, 255, 255, 0.1); // @presenter Color\n  --search-input-text-color: #fff; // @presenter Color\n  --search-input-border-radius: var(--global-border-radius); // @presenter BorderRadius\n  --search-input-font-size: var(--navbar-item-font-size); // @presenter FontSize\n  --search-input-font-family: var(--font-family-base); // @presenter FontFamily\n  --search-input-line-height: 1.15em; // @presenter LineHeight\n  // TODO: fix typo\n  --search-popover-backgrond-color: #fff; // @presenter Color\n  --search-popover-border-radius: var(--search-input-border-radius); // @presenter BorderRadius\n  --search-item-text-color: var(--color-content-secondary); // @presenter Color\n  --search-item-title-text-color: var(--color-content); // @presenter Color\n  --search-item-active-background-color: rgba(0, 68, 212, 0.1); // @presenter Color\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Portal Search\n    */\n  --search-input-background-color: rgba(255, 255, 255, 0.1); // @presenter Color\n  --search-input-text-color: #fff; // @presenter Color\n  --search-input-border-radius: var(--global-border-radius); // @presenter BorderRadius\n  --search-input-font-size: var(--navbar-item-font-size); // @presenter FontSize\n  --search-input-font-family: var(--font-family-base); // @presenter FontFamily\n  --search-input-line-height: 1.15em; // @presenter LineHeight\n  // TODO: fix typo\n  --search-popover-backgrond-color: #fff; // @presenter Color\n  --search-popover-border-radius: var(--search-input-border-radius); // @presenter BorderRadius\n  --search-item-text-color: var(--color-content-secondary); // @presenter Color\n  --search-item-title-text-color: var(--color-content); // @presenter Color\n  --search-item-active-background-color: rgba(0, 68, 212, 0.1); // @presenter Color\n\n  // @tokens End\n"])));
-exports.lightMode = (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), baseColors);
-exports.darkMode = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), baseDarkColors);
-exports.styles = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  :root {\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    ", "\n  }\n\n  :root.dark {\n    ", ";\n  }\n"], ["\n  :root {\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    ", "\n  }\n\n  :root.dark {\n    ", ";\n  }\n"])), baseColors, httpColors, responseColors, typography, headingsTypography, borders, admonition, buttons, sidebar, panels, navbar, footer, logo, toc, tooltip, code, links, markdown, blockquote, portalSearch, openapiAndGraphqlDocs, exports.darkMode);
-exports.GlobalStyle = (0, styled_components_1.createGlobalStyle)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), exports.styles);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26;
+exports.darkMode = (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), baseDarkColors);
+exports.styles = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  :root {\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    ", "\n  }\n\n  :root.dark {\n    ", ";\n  }\n"], ["\n  :root {\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    ", "\n  }\n\n  :root.dark {\n    ", ";\n  }\n"])), baseColors, httpColors, responseColors, typography, headingsTypography, borders, admonition, buttons, sidebar, panels, navbar, footer, logo, toc, tooltip, code, links, markdown, blockquote, portalSearch, openapiAndGraphqlDocs, exports.darkMode);
+exports.GlobalStyle = (0, styled_components_1.createGlobalStyle)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), exports.styles);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25;

package/hooks/useActiveHeading.js

@@ -34,14 +34,14 @@ function useActiveHeading(contentElement, displayedHeaders) {
         }
         return visibleHeadings;
     };
-    var getIndexFromId = function (id) {
+    var getIndexFromId = (0, react_1.useCallback)(function (id) {
         return headingElements.findIndex(function (item) { return item.id === id; });
-    };
+    }, [headingElements]);
     var findHeaders = function (allContent) {
         var allHeaders = allContent.querySelectorAll('.heading-anchor');
         return Array.from(allHeaders);
     };
-    var intersectionCallback = function (headings) {
+    var intersectionCallback = (0, react_1.useCallback)(function (headings) {
         var _a;
         headingElementsRef.current = headings.reduce(function (map, headingElement) {
             map[headingElement.target.id] = headingElement;
@@ -66,7 +66,7 @@ function useActiveHeading(contentElement, displayedHeaders) {
             return getIndexFromId(a.target.id) - getIndexFromId(b.target.id);
         });
         setHeading(visibleHeadings[0].target.id);
-    };
+    }, [getIndexFromId, headingElements]);
     (0, react_1.useEffect)(function () {
         if (!contentElement) {
             return;
@@ -76,6 +76,7 @@ function useActiveHeading(contentElement, displayedHeaders) {
             setHeadingElements(findHeaders(contentElement));
         });
         return function () { return unlisten(); };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [contentElement]);
     (0, react_1.useEffect)(function () {
         if (!(headingElements === null || headingElements === void 0 ? void 0 : headingElements.length)) {
@@ -93,7 +94,7 @@ function useActiveHeading(contentElement, displayedHeaders) {
             }
         });
         return function () { return observer.disconnect(); };
-    }, [headingElements, displayedHeaders]);
+    }, [headingElements, displayedHeaders, intersectionCallback]);
     return heading;
 }
 exports.useActiveHeading = useActiveHeading;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "description": "Shared UI components",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",

package/src/ColorModeSwitcher/ColorModeSwitcher.tsx

@@ -1,18 +1,19 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 
 import { useThemeSettings } from '@portal/hooks';
 import { DEFAULT_THEME_NAME } from '@portal/constants';
 import { ColorModeIcon } from '@theme/icons/ColorModeIcon';
+import { useMount } from '@theme/hooks';
 
 export function ColorModeSwitcher(): JSX.Element | null {
   const themeSettings = useThemeSettings(DEFAULT_THEME_NAME);
   const colorMode = themeSettings.colorMode;
   const [activeColorMode, setActiveColorMode] = useState('');
 
-  useEffect(() => {
+  useMount(() => {
     setActiveColorMode(document.documentElement.className || colorMode?.default);
-  }, []);
+  });
 
   if (!colorMode?.modes || colorMode?.hide) {
     return null;

package/src/CopyButton/CopyButtonWrapper.tsx

@@ -1,13 +1,15 @@
 import React, { memo } from 'react';
 
 import { SamplesControlButton } from '@theme/SamplesPanelControls';
-import { Tooltip } from '@theme/Tooltip';
+import { Tooltip, TooltipProps } from '@theme/Tooltip';
 import { useControl } from '@theme/hooks';
 import { ClipboardService } from '@theme/utils';
 
 export interface CopyButtonWrapperProps {
   data: unknown;
-  children: (props: { renderCopyButton: () => JSX.Element }) => JSX.Element;
+  children: (props: {
+    renderCopyButton: (placement?: TooltipProps['placement']) => JSX.Element;
+  }) => JSX.Element;
   dataTestId?: string;
 }
 
@@ -32,12 +34,13 @@ function CopyButtonWrapperComponent({
     showTooltip();
   };
 
-  const renderCopyButton = (): JSX.Element => {
+  const renderCopyButton = (placement: TooltipProps['placement'] = 'top'): JSX.Element => {
     return (
       <Tooltip
         className="copy-button"
         tip={ClipboardService.isSupported() ? 'Copied' : 'Not supported in your browser'}
         isOpen={tooltip.isOpened}
+        placement={placement}
       >
         <SamplesControlButton onClick={copy} data-cy={dataTestId}>
           Copy

package/src/Markdown/Details.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import styled from 'styled-components';
+
+type DetailsProps = {
+  summary: string;
+};
+
+export function Details({ summary, children }: React.PropsWithChildren<DetailsProps>): JSX.Element {
+  return (
+    <StyledDetails>
+      <summary>{summary}</summary>
+      <StyledDetailsContent>{children}</StyledDetailsContent>
+    </StyledDetails>
+  );
+}
+
+const StyledDetails = styled.details``;
+
+const StyledDetailsContent = styled.div``;

package/src/Markdown/MarkdownLayout.tsx

@@ -7,17 +7,21 @@ import { PageNavigation } from '@theme/PageNavigation/PageNavigation';
 type MarkdownLayoutProps = {
   tableOfContent: React.ReactNode;
   markdownWrapper: React.ReactNode;
+  showPrevButton?: boolean;
+  showNextButton?: boolean;
 };
 
 export function MarkdownLayout({
   tableOfContent,
   markdownWrapper,
+  showPrevButton,
+  showNextButton,
 }: MarkdownLayoutProps): JSX.Element {
   return (
     <PageWrapper data-component-name="Markdown/MarkdownLayout">
       <ContentWrapper withToc={true}>
         {markdownWrapper}
-        <PageNavigation />
+        <PageNavigation showPrevButton={showPrevButton} showNextButton={showNextButton} />
       </ContentWrapper>
       {tableOfContent}
     </PageWrapper>

package/src/Navbar/NavbarMenu.tsx

@@ -4,10 +4,10 @@ import styled from 'styled-components';
 import type { ResolvedConfigLinks, ResolvedNavItem } from '@theme/types/portal';
 
 import { NavbarItem } from '@theme/Navbar/NavbarItem';
-import { isPrimitive, isEmptyArray } from '@theme/utils';
+import { isPrimitive } from '@theme/utils';
 
 export function NavbarMenu({ menuItems }: { menuItems: ResolvedConfigLinks }): JSX.Element | null {
-  if (isPrimitive(menuItems) || isEmptyArray(menuItems)) {
+  if (isPrimitive(menuItems)) {
     return null;
   }
 

package/src/PageNavigation/PageNavigation.tsx

@@ -6,7 +6,15 @@ import { NextPageLink } from '@theme/PageNavigation/NextPageLink';
 import { useThemeSettings } from '@portal/hooks';
 import { DEFAULT_THEME_NAME } from '@portal/constants';
 
-export function PageNavigation(): JSX.Element | null {
+type PageNavigationProps = {
+  showPrevButton?: boolean;
+  showNextButton?: boolean;
+};
+
+export function PageNavigation({
+  showPrevButton = true,
+  showNextButton = true,
+}: PageNavigationProps): JSX.Element | null {
   const { navigation } = useThemeSettings(DEFAULT_THEME_NAME);
 
   if (navigation?.hide) {
@@ -15,8 +23,8 @@ export function PageNavigation(): JSX.Element | null {
 
   return (
     <PageNavigationWrapper data-component-name="PageNavigation/PageNavigation">
-      <PreviousPageLink />
-      <NextPageLink />
+      {showPrevButton && <PreviousPageLink />}
+      {showNextButton && <NextPageLink />}
     </PageNavigationWrapper>
   );
 }

package/src/SourceCode/SourceCode.tsx

@@ -78,11 +78,11 @@ export function SourceCode({
   // 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
   useEffect(() => {
-    const _externalSource = externalSource?.sample?.get?.(externalSource) ?? '';
-    if (_externalSource) {
-      setSourceCode(_externalSource);
+    const _source = source || externalSource?.sample?.get?.(externalSource);
+    if (_source) {
+      setSourceCode(_source);
     }
-  }, [externalSource]);
+  }, [source, externalSource]);
 
   if (withCopyButton) {
     return (

package/src/globalStyle.ts

@@ -80,12 +80,10 @@ const baseColors = css`
   // @tokens End
 `;
 const baseDarkColors = css`
-  /* === Palette === */
-
   /**
-          * @tokens Base Colors
-          * @presenter Color
-          */
+  * @tokens Base Dark Colors
+  * @presenter Color
+  */
   --color-primary-100: #969ca6;
   --color-primary-200: #7f8693;
   --color-primary-300: #7d7d80;
@@ -95,6 +93,8 @@ const baseDarkColors = css`
   --color-primary-700: #28282a;
   --color-primary-800: #202021;
   --color-primary-900: #000000;
+
+  // @tokens End
 `;
 
 const httpColors = css`
@@ -494,6 +494,21 @@ const panels = css`
   --samples-panel-width: 50%;
 
   --panels-background-color: #fff;
+
+  --panels-title-color: var(--color-content);
+  --panels-title-font-size: var(--h3-font-size);
+  --panels-title-line-height: var(--h3-line-height);
+  --panels-title-font-weight: var(--h-font-weight);
+  --panels-title-font-family: var(--font-family-base);
+
+  --panels-sub-title-color: var(--color-content);
+  --panels-sub-title-font-size: 0.9em;
+  --panels-sub-title-font-weight: normal;
+  --panels-sub-title-font-family: var(--font-family-base);
+  --panels-sub-title-line-height: var(--h3-line-height);
+
+  --panels-shelf-icon-color: var(--color-content);
+
   --samples-panel-block-background-color: #fff;
   --samples-panel-background-color: #52606d;
   --samples-panel-callback-background-color: var(--color-secondary-300);
@@ -829,10 +844,6 @@ const portalSearch = css`
   // @tokens End
 `;
 
-export const lightMode = css`
-  ${baseColors};
-`;
-
 export const darkMode = css`
   ${baseDarkColors}
 `;

package/src/hooks/useActiveHeading.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 
 export type UseActiveHeadingReturnType = string | undefined;
@@ -31,47 +31,53 @@ export function useActiveHeading(
     return visibleHeadings;
   };
 
-  const getIndexFromId = (id: string) => {
-    return headingElements.findIndex((item) => item.id === id);
-  };
+  const getIndexFromId = useCallback(
+    (id: string) => {
+      return headingElements.findIndex((item) => item.id === id);
+    },
+    [headingElements],
+  );
 
   const findHeaders = (allContent: HTMLDivElement) => {
     const allHeaders = allContent.querySelectorAll<HTMLElement>('.heading-anchor');
     return Array.from(allHeaders);
   };
 
-  const intersectionCallback = (headings: IntersectionObserverEntry[]) => {
-    headingElementsRef.current = headings.reduce(
-      (map: HeadingEntry, headingElement: IntersectionObserverEntry) => {
-        map[headingElement.target.id] = headingElement;
-        return map;
-      },
-      headingElementsRef.current,
-    );
-
-    const totalHeight = window.scrollY + window.innerHeight;
-    // handle bottom of the page
-    if (totalHeight >= document.body.scrollHeight) {
-      const newHeading = headingElements[headingElements?.length - 1]?.id || undefined;
-      setHeading(newHeading);
-      return;
-    }
+  const intersectionCallback = useCallback(
+    (headings: IntersectionObserverEntry[]) => {
+      headingElementsRef.current = headings.reduce(
+        (map: HeadingEntry, headingElement: IntersectionObserverEntry) => {
+          map[headingElement.target.id] = headingElement;
+          return map;
+        },
+        headingElementsRef.current,
+      );
+
+      const totalHeight = window.scrollY + window.innerHeight;
+      // handle bottom of the page
+      if (totalHeight >= document.body.scrollHeight) {
+        const newHeading = headingElements[headingElements?.length - 1]?.id || undefined;
+        setHeading(newHeading);
+        return;
+      }
 
-    const visibleHeadings = getVisibleHeadings();
-    if (!visibleHeadings.length) {
-      return;
-    }
+      const visibleHeadings = getVisibleHeadings();
+      if (!visibleHeadings.length) {
+        return;
+      }
 
-    if (visibleHeadings.length === 1) {
-      setHeading(visibleHeadings[0].target.id);
-      return;
-    }
+      if (visibleHeadings.length === 1) {
+        setHeading(visibleHeadings[0].target.id);
+        return;
+      }
 
-    visibleHeadings.sort((a, b) => {
-      return getIndexFromId(a.target.id) - getIndexFromId(b.target.id);
-    });
-    setHeading(visibleHeadings[0].target.id);
-  };
+      visibleHeadings.sort((a, b) => {
+        return getIndexFromId(a.target.id) - getIndexFromId(b.target.id);
+      });
+      setHeading(visibleHeadings[0].target.id);
+    },
+    [getIndexFromId, headingElements],
+  );
 
   useEffect(() => {
     if (!contentElement) {
@@ -84,6 +90,7 @@ export function useActiveHeading(
     });
 
     return () => unlisten();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [contentElement]);
 
   useEffect(() => {
@@ -104,7 +111,7 @@ export function useActiveHeading(
     });
 
     return () => observer.disconnect();
-  }, [headingElements, displayedHeaders]);
+  }, [headingElements, displayedHeaders, intersectionCallback]);
 
   return heading;
 }