@redocly/theme 0.2.0 → 0.2.3

package/ColorModeSwitcher/ColorModeSwitcher.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function ColorModeSwitcher(): JSX.Element | null;

package/ColorModeSwitcher/ColorModeSwitcher.js

@@ -0,0 +1,79 @@
+"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 __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 __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorModeSwitcher = void 0;
+var react_1 = __importStar(require("react"));
+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");
+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 () {
+        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;
+    }
+    var handelChangeColorMode = function () {
+        var activeIndex = colorMode.modes.indexOf(activeColorMode);
+        var mode = activeIndex < colorMode.modes.length - 1
+            ? colorMode.modes[activeIndex + 1]
+            : colorMode.modes[0];
+        setActiveColorMode(mode);
+        localStorage.setItem('colorSchema', mode);
+        document.documentElement.className = mode;
+    };
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "ColorModeSwitcher/ColorModeSwitcher", onClick: handelChangeColorMode },
+        react_1.default.createElement(ColorModeIcon_1.ColorModeIcon, { mode: activeColorMode })));
+}
+exports.ColorModeSwitcher = ColorModeSwitcher;
+var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-left: calc(var(--sidebar-spacing-horizontal) * 2);\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"], ["\n  margin-left: calc(var(--sidebar-spacing-horizontal) * 2);\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"])));
+var templateObject_1;

package/ColorModeSwitcher/index.d.ts

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

package/ColorModeSwitcher/index.js

@@ -0,0 +1,17 @@
+"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("../ColorModeSwitcher/ColorModeSwitcher"), exports);

package/Markdown/MarkdownWrapper.js

@@ -39,5 +39,5 @@ function headingAnchor(className) {
 exports.headingAnchor = headingAnchor;
 exports.MarkdownWrapper = styled_components_1.default.main.attrs(function () { return ({
     'data-component-name': 'Markdown/MarkdownWrapper',
-}); })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-weight: var(--font-weight-regular);\n  padding: 0;\n\n  color: var(--color-content);\n  font-size: var(--font-size-base);\n  font-family: var(--font-family-base);\n  line-height: var(--line-height-base);\n\n  a:not([role='button']) {\n    text-decoration: var(--link-decoration);\n    color: var(--link-color);\n\n    &:visited {\n      color: var(--link-color);\n    }\n\n    &:hover {\n      color: var(--link-color-hover);\n    }\n  }\n\n  img {\n    max-width: 100%;\n  }\n\n  h1.md,\n  h2.md,\n  h3.md,\n  h4.md,\n  h5.md,\n  h6.md {\n    font-weight: var(--h-font-weight);\n    font-family: var(--h-font-family);\n    position: relative;\n\n    scroll-margin-top: 60px;\n  }\n\n  strong {\n    font-weight: var(--font-weight-bold);\n  }\n\n  hr {\n    border-top: 1px solid var(--global-border-color);\n  }\n\n  details {\n    margin: 1.125em 0;\n\n    summary {\n      color: var(--color-content);\n      font-weight: var(--font-weight-regular);\n      outline: 0;\n      padding: 0;\n      cursor: pointer;\n    }\n\n    > :not(summary):first-of-type {\n      margin-top: 1.25em;\n    }\n\n    > *:last-child {\n      margin-bottom: 1.25em;\n    }\n  }\n\n  ", ";\n\n  .code-snippets-tabs {\n    .snippets-tabs-headers {\n      font-size: 0.9em;\n\n      font-family: var(--h-font-family);\n\n      .tab-header {\n        text-align: center;\n        padding: 0.2em 0.5em;\n        display: inline-block;\n        cursor: pointer;\n        color: var(--color-content-secondary);\n\n        &.active {\n          color: var(--h-color);\n          font-weight: var(--font-weight-bold);\n        }\n      }\n    }\n\n    .tab-content {\n      margin-top: 4px;\n      display: none;\n\n      pre {\n        margin-top: 0;\n      }\n\n      &.active {\n        display: block;\n      }\n    }\n  }\n\n  p {\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  h1.md {\n    ", ";\n    margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;\n    ", ";\n\n    &:first-child {\n      margin-top: 0;\n    }\n  }\n\n  h2.md {\n    ", ";\n    margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;\n    ", ";\n  }\n\n  h3.md {\n    ", ";\n    margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;\n    ", ";\n  }\n\n  h4.md {\n    ", ";\n    margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;\n    ", ";\n  }\n\n  h5.md {\n    ", ";\n    margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;\n    ", ";\n  }\n\n  h6.md {\n    ", ";\n    margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;\n    ", ";\n  }\n\n  code {\n    color: var(--inline-code-color);\n    background-color: var(--inline-code-background-color);\n\n    border-radius: 2px;\n    border: 1px solid var(--global-border-color);\n    padding: 0.1em 0.25em 0.2em;\n    font-weight: var(--code-font-weight);\n    word-break: break-word;\n    font-size: var(--code-font-size);\n    font-family: var(--code-font-family);\n  }\n\n  blockquote {\n    margin: var(--bloquote-margin-vertical) var(--bloquote-margin-horizontal);\n    padding: var(--bloquote-padding-vertical) var(--bloquote-padding-horizontal);\n    border-left: 4px solid var(--global-border-color);\n    background-color: var(--bloquote-background-color);\n    color: var(--color-content);\n\n    & > p:first-child {\n      margin-top: 0;\n    }\n  }\n\n  img {\n    max-width: 100%;\n    box-sizing: content-box;\n    margin: 0 auto;\n\n    &:only-child {\n      display: block;\n    }\n  }\n\n  > ul,\n  > p ul {\n    > ol,\n    > p ol {\n      padding-left: 2em;\n      margin: 0 0 1em;\n\n      ul,\n      ol {\n        margin-bottom: 0;\n        margin-top: 0;\n      }\n    }\n  }\n"], ["\n  font-weight: var(--font-weight-regular);\n  padding: 0;\n\n  color: var(--color-content);\n  font-size: var(--font-size-base);\n  font-family: var(--font-family-base);\n  line-height: var(--line-height-base);\n\n  a:not([role='button']) {\n    text-decoration: var(--link-decoration);\n    color: var(--link-color);\n\n    &:visited {\n      color: var(--link-color);\n    }\n\n    &:hover {\n      color: var(--link-color-hover);\n    }\n  }\n\n  img {\n    max-width: 100%;\n  }\n\n  h1.md,\n  h2.md,\n  h3.md,\n  h4.md,\n  h5.md,\n  h6.md {\n    font-weight: var(--h-font-weight);\n    font-family: var(--h-font-family);\n    position: relative;\n\n    scroll-margin-top: 60px;\n  }\n\n  strong {\n    font-weight: var(--font-weight-bold);\n  }\n\n  hr {\n    border-top: 1px solid var(--global-border-color);\n  }\n\n  details {\n    margin: 1.125em 0;\n\n    summary {\n      color: var(--color-content);\n      font-weight: var(--font-weight-regular);\n      outline: 0;\n      padding: 0;\n      cursor: pointer;\n    }\n\n    > :not(summary):first-of-type {\n      margin-top: 1.25em;\n    }\n\n    > *:last-child {\n      margin-bottom: 1.25em;\n    }\n  }\n\n  ", ";\n\n  .code-snippets-tabs {\n    .snippets-tabs-headers {\n      font-size: 0.9em;\n\n      font-family: var(--h-font-family);\n\n      .tab-header {\n        text-align: center;\n        padding: 0.2em 0.5em;\n        display: inline-block;\n        cursor: pointer;\n        color: var(--color-content-secondary);\n\n        &.active {\n          color: var(--h-color);\n          font-weight: var(--font-weight-bold);\n        }\n      }\n    }\n\n    .tab-content {\n      margin-top: 4px;\n      display: none;\n\n      pre {\n        margin-top: 0;\n      }\n\n      &.active {\n        display: block;\n      }\n    }\n  }\n\n  p {\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  h1.md {\n    ", ";\n    margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;\n    ", ";\n\n    &:first-child {\n      margin-top: 0;\n    }\n  }\n\n  h2.md {\n    ", ";\n    margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;\n    ", ";\n  }\n\n  h3.md {\n    ", ";\n    margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;\n    ", ";\n  }\n\n  h4.md {\n    ", ";\n    margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;\n    ", ";\n  }\n\n  h5.md {\n    ", ";\n    margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;\n    ", ";\n  }\n\n  h6.md {\n    ", ";\n    margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;\n    ", ";\n  }\n\n  code {\n    color: var(--inline-code-color);\n    background-color: var(--inline-code-background-color);\n\n    border-radius: 2px;\n    border: 1px solid var(--global-border-color);\n    padding: 0.1em 0.25em 0.2em;\n    font-weight: var(--code-font-weight);\n    word-break: break-word;\n    font-size: var(--code-font-size);\n    font-family: var(--code-font-family);\n  }\n\n  blockquote {\n    margin: var(--bloquote-margin-vertical) var(--bloquote-margin-horizontal);\n    padding: var(--bloquote-padding-vertical) var(--bloquote-padding-horizontal);\n    border-left: 4px solid var(--global-border-color);\n    background-color: var(--bloquote-background-color);\n    color: var(--color-content);\n\n    & > p:first-child {\n      margin-top: 0;\n    }\n  }\n\n  img {\n    max-width: 100%;\n    box-sizing: content-box;\n    margin: 0 auto;\n\n    &:only-child {\n      display: block;\n    }\n  }\n\n  > ul,\n  > p ul {\n    > ol,\n    > p ol {\n      padding-left: 2em;\n      margin: 0 0 1em;\n\n      ul,\n      ol {\n        margin-bottom: 0;\n        margin-top: 0;\n      }\n    }\n  }\n"])), exports.baseTable, (0, utils_1.typography)('h1', 'h'), headingAnchor(), (0, utils_1.typography)('h2', 'h'), headingAnchor(), (0, utils_1.typography)('h3', 'h'), headingAnchor(), (0, utils_1.typography)('h4', 'h'), headingAnchor(), (0, utils_1.typography)('h5', 'h'), headingAnchor(), (0, utils_1.typography)('h6', 'h'), headingAnchor());
+}); })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-weight: var(--font-weight-regular);\n  padding: 0;\n\n  color: var(--color-content);\n  font-size: var(--font-size-base);\n  font-family: var(--font-family-base);\n  line-height: var(--line-height-base);\n\n  a:not([role='button']) {\n    text-decoration: var(--link-decoration);\n    color: var(--link-color);\n\n    &:visited {\n      color: var(--link-color);\n    }\n\n    &:hover {\n      color: var(--link-color-hover);\n    }\n  }\n\n  img {\n    max-width: 100%;\n  }\n\n  h1.md,\n  h2.md,\n  h3.md,\n  h4.md,\n  h5.md,\n  h6.md {\n    font-weight: var(--h-font-weight);\n    font-family: var(--h-font-family);\n    position: relative;\n\n    scroll-margin-top: 60px;\n  }\n\n  strong {\n    font-weight: var(--font-weight-bold);\n  }\n\n  hr {\n    border-top: 1px solid var(--global-border-color);\n  }\n\n  details {\n    margin: 1.125em 0;\n\n    summary {\n      color: var(--color-content);\n      font-weight: var(--font-weight-regular);\n      outline: 0;\n      padding: 0;\n      cursor: pointer;\n    }\n\n    > :not(summary):first-of-type {\n      margin-top: 1.25em;\n    }\n\n    > *:last-child {\n      margin-bottom: 1.25em;\n    }\n  }\n\n  ", ";\n\n  .code-snippets-tabs {\n    .snippets-tabs-headers {\n      font-size: 0.9em;\n\n      font-family: var(--h-font-family);\n\n      .tab-header {\n        text-align: center;\n        padding: 0.2em 0.5em;\n        display: inline-block;\n        cursor: pointer;\n        color: var(--color-content-secondary);\n\n        &.active {\n          color: var(--h-color);\n          font-weight: var(--font-weight-bold);\n        }\n      }\n    }\n\n    .tab-content {\n      margin-top: 4px;\n      display: none;\n\n      pre {\n        margin-top: 0;\n      }\n\n      &.active {\n        display: block;\n      }\n    }\n  }\n\n  p {\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  h1.md {\n    ", ";\n    margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;\n    ", ";\n\n    &:first-child {\n      margin-top: 0;\n    }\n  }\n\n  h2.md {\n    ", ";\n    margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;\n    ", ";\n  }\n\n  h3.md {\n    ", ";\n    margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;\n    ", ";\n  }\n\n  h4.md {\n    ", ";\n    margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;\n    ", ";\n  }\n\n  h5.md {\n    ", ";\n    margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;\n    ", ";\n  }\n\n  h6.md {\n    ", ";\n    margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;\n    ", ";\n  }\n\n  h1.md code {\n    font-size: var(--h1-font-size);\n  }\n\n  h2.md code {\n    font-size: var(--h2-font-size);\n  }\n\n  h3.md code {\n    font-size: var(--h3-font-size);\n  }\n\n  h4.md code {\n    font-size: var(--h4-font-size);\n  }\n\n  h5.md code {\n    font-size: var(--h5-font-size);\n  }\n\n  h6.md code {\n    font-size: var(--h6-font-size);\n  }\n\n  code {\n    color: var(--inline-code-color);\n    background-color: var(--inline-code-background-color);\n\n    border-radius: 2px;\n    border: 1px solid var(--global-border-color);\n    padding: 0.1em 0.25em 0.2em;\n    font-weight: var(--code-font-weight);\n    word-break: break-word;\n    font-size: var(--code-font-size);\n    font-family: var(--code-font-family);\n  }\n\n  blockquote {\n    margin: var(--bloquote-margin-vertical) var(--bloquote-margin-horizontal);\n    padding: var(--bloquote-padding-vertical) var(--bloquote-padding-horizontal);\n    border-left: 4px solid var(--global-border-color);\n    background-color: var(--bloquote-background-color);\n    color: var(--color-content);\n\n    & > p:first-child {\n      margin-top: 0;\n    }\n  }\n\n  img {\n    max-width: 100%;\n    box-sizing: content-box;\n    margin: 0 auto;\n\n    &:only-child {\n      display: block;\n    }\n  }\n\n  > ul,\n  > p ul {\n    > ol,\n    > p ol {\n      padding-left: 2em;\n      margin: 0 0 1em;\n\n      ul,\n      ol {\n        margin-bottom: 0;\n        margin-top: 0;\n      }\n    }\n  }\n"], ["\n  font-weight: var(--font-weight-regular);\n  padding: 0;\n\n  color: var(--color-content);\n  font-size: var(--font-size-base);\n  font-family: var(--font-family-base);\n  line-height: var(--line-height-base);\n\n  a:not([role='button']) {\n    text-decoration: var(--link-decoration);\n    color: var(--link-color);\n\n    &:visited {\n      color: var(--link-color);\n    }\n\n    &:hover {\n      color: var(--link-color-hover);\n    }\n  }\n\n  img {\n    max-width: 100%;\n  }\n\n  h1.md,\n  h2.md,\n  h3.md,\n  h4.md,\n  h5.md,\n  h6.md {\n    font-weight: var(--h-font-weight);\n    font-family: var(--h-font-family);\n    position: relative;\n\n    scroll-margin-top: 60px;\n  }\n\n  strong {\n    font-weight: var(--font-weight-bold);\n  }\n\n  hr {\n    border-top: 1px solid var(--global-border-color);\n  }\n\n  details {\n    margin: 1.125em 0;\n\n    summary {\n      color: var(--color-content);\n      font-weight: var(--font-weight-regular);\n      outline: 0;\n      padding: 0;\n      cursor: pointer;\n    }\n\n    > :not(summary):first-of-type {\n      margin-top: 1.25em;\n    }\n\n    > *:last-child {\n      margin-bottom: 1.25em;\n    }\n  }\n\n  ", ";\n\n  .code-snippets-tabs {\n    .snippets-tabs-headers {\n      font-size: 0.9em;\n\n      font-family: var(--h-font-family);\n\n      .tab-header {\n        text-align: center;\n        padding: 0.2em 0.5em;\n        display: inline-block;\n        cursor: pointer;\n        color: var(--color-content-secondary);\n\n        &.active {\n          color: var(--h-color);\n          font-weight: var(--font-weight-bold);\n        }\n      }\n    }\n\n    .tab-content {\n      margin-top: 4px;\n      display: none;\n\n      pre {\n        margin-top: 0;\n      }\n\n      &.active {\n        display: block;\n      }\n    }\n  }\n\n  p {\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  h1.md {\n    ", ";\n    margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;\n    ", ";\n\n    &:first-child {\n      margin-top: 0;\n    }\n  }\n\n  h2.md {\n    ", ";\n    margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;\n    ", ";\n  }\n\n  h3.md {\n    ", ";\n    margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;\n    ", ";\n  }\n\n  h4.md {\n    ", ";\n    margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;\n    ", ";\n  }\n\n  h5.md {\n    ", ";\n    margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;\n    ", ";\n  }\n\n  h6.md {\n    ", ";\n    margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;\n    ", ";\n  }\n\n  h1.md code {\n    font-size: var(--h1-font-size);\n  }\n\n  h2.md code {\n    font-size: var(--h2-font-size);\n  }\n\n  h3.md code {\n    font-size: var(--h3-font-size);\n  }\n\n  h4.md code {\n    font-size: var(--h4-font-size);\n  }\n\n  h5.md code {\n    font-size: var(--h5-font-size);\n  }\n\n  h6.md code {\n    font-size: var(--h6-font-size);\n  }\n\n  code {\n    color: var(--inline-code-color);\n    background-color: var(--inline-code-background-color);\n\n    border-radius: 2px;\n    border: 1px solid var(--global-border-color);\n    padding: 0.1em 0.25em 0.2em;\n    font-weight: var(--code-font-weight);\n    word-break: break-word;\n    font-size: var(--code-font-size);\n    font-family: var(--code-font-family);\n  }\n\n  blockquote {\n    margin: var(--bloquote-margin-vertical) var(--bloquote-margin-horizontal);\n    padding: var(--bloquote-padding-vertical) var(--bloquote-padding-horizontal);\n    border-left: 4px solid var(--global-border-color);\n    background-color: var(--bloquote-background-color);\n    color: var(--color-content);\n\n    & > p:first-child {\n      margin-top: 0;\n    }\n  }\n\n  img {\n    max-width: 100%;\n    box-sizing: content-box;\n    margin: 0 auto;\n\n    &:only-child {\n      display: block;\n    }\n  }\n\n  > ul,\n  > p ul {\n    > ol,\n    > p ol {\n      padding-left: 2em;\n      margin: 0 0 1em;\n\n      ul,\n      ol {\n        margin-bottom: 0;\n        margin-top: 0;\n      }\n    }\n  }\n"])), exports.baseTable, (0, utils_1.typography)('h1', 'h'), headingAnchor(), (0, utils_1.typography)('h2', 'h'), headingAnchor(), (0, utils_1.typography)('h3', 'h'), headingAnchor(), (0, utils_1.typography)('h4', 'h'), headingAnchor(), (0, utils_1.typography)('h5', 'h'), headingAnchor(), (0, utils_1.typography)('h6', 'h'), headingAnchor());
 var templateObject_1, templateObject_2, templateObject_3;

package/Navbar/Navbar.js

@@ -32,6 +32,7 @@ var Navbar_1 = require("../Navbar");
 var useMobileMenu_1 = require("../hooks/useMobileMenu");
 var MobileNavbarMenuButton_1 = require("../Navbar/MobileNavbarMenuButton");
 var MobileNavbarMenu_1 = require("../Navbar/MobileNavbarMenu");
+var ColorModeSwitcher_1 = require("../ColorModeSwitcher/ColorModeSwitcher");
 function Navbar(_a) {
     var menu = _a.menu, logo = _a.logo, search = _a.search, profile = _a.profile;
     var _b = __read((0, useMobileMenu_1.useMobileMenu)(false), 2), isOpen = _b[0], setIsOpen = _b[1];
@@ -48,7 +49,8 @@ function Navbar(_a) {
         logo,
         react_1.default.createElement(Navbar_1.NavbarMenu, { menuItems: menu }),
         hideSearch ? null : search,
-        profile));
+        profile,
+        react_1.default.createElement(ColorModeSwitcher_1.ColorModeSwitcher, null)));
 }
 exports.Navbar = Navbar;
 exports.NavbarContainer = styled_components_1.default.nav(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: var(--navbar-height);\n  box-sizing: border-box;\n  display: flex;\n  color: var(--navbar-text-color);\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n\n  font-size: 0.875rem;\n  position: sticky;\n  top: 0;\n  z-index: 200;\n  padding: 10px var(--sidebar-margin-left);\n  background: var(--navbar-background-color);\n  font-family: var(--h-font-family);\n\n  ", " {\n    padding: 10px var(--sidebar-margin-left);\n    font-size: 1rem;\n  }\n\n  ", " {\n    background: transparent;\n    display: none;\n    > :not(a, img) {\n      display: none !important;\n    }\n    img {\n      padding: 0;\n      margin: 0;\n    }\n  }\n"], ["\n  height: var(--navbar-height);\n  box-sizing: border-box;\n  display: flex;\n  color: var(--navbar-text-color);\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n\n  font-size: 0.875rem;\n  position: sticky;\n  top: 0;\n  z-index: 200;\n  padding: 10px var(--sidebar-margin-left);\n  background: var(--navbar-background-color);\n  font-family: var(--h-font-family);\n\n  ", " {\n    padding: 10px var(--sidebar-margin-left);\n    font-size: 1rem;\n  }\n\n  ", " {\n    background: transparent;\n    display: none;\n    > :not(a, img) {\n      display: none !important;\n    }\n    img {\n      padding: 0;\n      margin: 0;\n    }\n  }\n"])), function (_a) {

package/SourceCode/SourceCode.js

@@ -1,10 +1,46 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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 __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SourceCode = exports.Code = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var utils_1 = require("../utils");
 var SamplesPanelControls_1 = require("../SamplesPanelControls");
 var CopyButton_1 = require("../CopyButton");
@@ -19,17 +55,26 @@ function Code(_a) {
 }
 exports.Code = Code;
 function SourceCode(_a) {
-    var _b, _c;
-    var lang = _a.lang, source = _a.source, externalSource = _a.externalSource, withCopyButton = _a.withCopyButton, _d = _a.dataTestId, dataTestId = _d === void 0 ? 'source-code' : _d, withLineNumbers = _a.withLineNumbers, startLineNumber = _a.startLineNumber;
-    var _source = source || ((_c = (_b = externalSource === null || externalSource === void 0 ? void 0 : externalSource.sample) === null || _b === void 0 ? void 0 : _b.get) === null || _c === void 0 ? void 0 : _c.call(_b, externalSource)) || '';
+    var lang = _a.lang, source = _a.source, externalSource = _a.externalSource, withCopyButton = _a.withCopyButton, _b = _a.dataTestId, dataTestId = _b === void 0 ? 'source-code' : _b, withLineNumbers = _a.withLineNumbers, startLineNumber = _a.startLineNumber;
+    var _c = __read((0, react_1.useState)(source !== null && source !== void 0 ? source : ''), 2), sourceCode = _c[0], setSourceCode = _c[1];
+    // 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)(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);
+        }
+    }, [externalSource]);
     if (withCopyButton) {
-        return (react_1.default.createElement(CopyButton_1.CopyButtonWrapper, { data: source, "data-component-name": "SourceCode/SourceCode" }, function (_a) {
+        return (react_1.default.createElement(CopyButton_1.CopyButtonWrapper, { data: sourceCode, "data-component-name": "SourceCode/SourceCode" }, function (_a) {
             var renderCopyButton = _a.renderCopyButton;
             return (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: _source, withLineNumbers: withLineNumbers, startLineNumber: startLineNumber, dataTestId: dataTestId })));
+                react_1.default.createElement(Code, { lang: lang, source: sourceCode, withLineNumbers: withLineNumbers, startLineNumber: startLineNumber, dataTestId: dataTestId })));
         }));
     }
-    return (react_1.default.createElement(Code, { dataTestId: dataTestId, lang: lang, source: _source, withLineNumbers: withLineNumbers, startLineNumber: startLineNumber, "data-component-name": "SourceCode/SourceCode" }));
+    return (react_1.default.createElement(Code, { dataTestId: dataTestId, lang: lang, source: sourceCode, withLineNumbers: withLineNumbers, startLineNumber: startLineNumber, "data-component-name": "SourceCode/SourceCode" }));
 }
 exports.SourceCode = SourceCode;

package/TableOfContent/TableOfContent.js

@@ -33,6 +33,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableOfContent = void 0;
 var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
+var utils_1 = require("./utils");
 var useFullHeight_1 = require("../hooks/useFullHeight");
 var hooks_1 = require("../mocks/hooks");
 var useActiveHeading_1 = require("../hooks/useActiveHeading");
@@ -43,15 +44,9 @@ function TableOfContent(props) {
     var sidebar = (0, react_1.useRef)(null);
     (0, useFullHeight_1.useFullHeight)(sidebar);
     var toc = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME).toc;
-    var getDisplayedHeaderIds = function () {
-        if (!headings) {
-            return [];
-        }
-        return headings
-            .filter(function (header) { return header && tocMaxDepth >= header.depth; })
-            .map(function (header) { return header === null || header === void 0 ? void 0 : header.id; });
-    };
-    var activeHeadingId = (0, useActiveHeading_1.useActiveHeading)(contentWrapper, getDisplayedHeaderIds());
+    var displayedHeadings = (0, utils_1.getDisplayedHeadings)(headings, tocMaxDepth);
+    var leastDepth = (0, utils_1.getLeastDepth)(displayedHeadings);
+    var activeHeadingId = (0, useActiveHeading_1.useActiveHeading)(contentWrapper, (0, utils_1.getDisplayedHeadingsIds)(displayedHeadings));
     if (toc === null || toc === void 0 ? void 0 : toc.hide) {
         return null;
     }
@@ -64,26 +59,20 @@ function TableOfContent(props) {
     return (react_1.default.createElement(react_1.default.Fragment, null, headings && (react_1.default.createElement(TableOfContentMenu, { "data-component-name": "TableOfContent/TableOfContent" },
         react_1.default.createElement(TableOfContentItems, { ref: sidebar },
             react_1.default.createElement(TocHeader, null, ((_a = toc === null || toc === void 0 ? void 0 : toc.header) === null || _a === void 0 ? void 0 : _a.label) || 'On this page'),
-            headings.map(function (heading, idx) {
+            displayedHeadings.map(function (heading, idx) {
                 // TODO: not sure about !heading
                 if (!heading) {
                     return null;
                 }
-                if (idx === 0 && heading.depth === 1) {
-                    return null;
-                }
-                if (heading.depth && heading.depth > tocMaxDepth) {
-                    return null;
-                }
                 var href = '#' + heading.id;
-                return (react_1.default.createElement(MenuItem, { key: href + idx, href: href, depth: heading.depth || 0, className: activeHeadingId === heading.id ? 'active' : '', dangerouslySetInnerHTML: { __html: heading.value || '' }, "data-cy": "toc-".concat(heading.value) }));
+                return (react_1.default.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-".concat(heading.value) }));
             }))))));
 }
 exports.TableOfContent = TableOfContent;
 var TocHeader = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: 0.8em;\n  padding: 10px 15px;\n  font-weight: bold;\n  text-transform: uppercase;\n"], ["\n  font-size: 0.8em;\n  padding: 10px 15px;\n  font-weight: bold;\n  text-transform: uppercase;\n"])));
 var MenuItem = styled_components_1.default.a(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  color: var(--color-content);\n  cursor: pointer;\n  font-size: 0.8em;\n  padding: 10px 15px;\n  padding-left: ", "px;\n  transition: background-color 0.3s, color 0.3s;\n  text-decoration: none;\n  word-break: break-word;\n  font-family: var(--h-font-family);\n\n  :hover,\n  &.active {\n    color: var(--sidebar-item-active-color);\n    background-color: var(--sidebar-item-active-background-color);\n  }\n\n  :empty {\n    padding: 0;\n  }\n"], ["\n  display: block;\n  color: var(--color-content);\n  cursor: pointer;\n  font-size: 0.8em;\n  padding: 10px 15px;\n  padding-left: ", "px;\n  transition: background-color 0.3s, color 0.3s;\n  text-decoration: none;\n  word-break: break-word;\n  font-family: var(--h-font-family);\n\n  :hover,\n  &.active {\n    color: var(--sidebar-item-active-color);\n    background-color: var(--sidebar-item-active-background-color);\n  }\n\n  :empty {\n    padding: 0;\n  }\n"])), function (_a) {
     var depth = _a.depth;
-    return (depth - 1) * 15;
+    return depth * 15;
 });
 var TableOfContentMenu = styled_components_1.default.aside(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 1rem;\n  background-color: transparent;\n  flex-shrink: 0;\n  display: none !important;\n  font-family: var(--font-family-base);\n\n  ", " {\n    width: var(--toc-width);\n    display: block !important;\n  }\n"], ["\n  font-size: 1rem;\n  background-color: transparent;\n  flex-shrink: 0;\n  display: none !important;\n  font-family: var(--font-family-base);\n\n  ", " {\n    width: var(--toc-width);\n    display: block !important;\n  }\n"])), function (_a) {
     var theme = _a.theme;

package/TableOfContent/utils.d.ts

@@ -0,0 +1,4 @@
+import { MdHeading } from '@theme/types/portal';
+export declare function getDisplayedHeadings(headings: Array<MdHeading | null> | null | undefined, tocMaxDepth: 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/TableOfContent/utils.js

@@ -0,0 +1,65 @@
+"use strict";
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLeastDepth = exports.getDisplayedHeadingsIds = exports.getDisplayedHeadings = void 0;
+function getDisplayedHeadings(headings, tocMaxDepth) {
+    if (!headings) {
+        return [];
+    }
+    return headings.filter(function (heading, idx) {
+        if (!heading) {
+            return false;
+        }
+        if (idx === 0 && heading.depth === 1) {
+            return false;
+        }
+        if (heading.depth && heading.depth > tocMaxDepth) {
+            return false;
+        }
+        return true;
+    });
+}
+exports.getDisplayedHeadings = getDisplayedHeadings;
+function getDisplayedHeadingsIds(headings) {
+    if (!headings) {
+        return [];
+    }
+    return headings.map(function (header) { return header === null || header === void 0 ? void 0 : header.id; });
+}
+exports.getDisplayedHeadingsIds = getDisplayedHeadingsIds;
+function getLeastDepth(headings) {
+    var e_1, _a;
+    if (!headings || headings.length === 0) {
+        return 1;
+    }
+    var depth = null;
+    try {
+        for (var headings_1 = __values(headings), headings_1_1 = headings_1.next(); !headings_1_1.done; headings_1_1 = headings_1.next()) {
+            var heading = headings_1_1.value;
+            if (!heading)
+                continue;
+            if (depth === null || depth > heading.depth) {
+                depth = heading.depth;
+            }
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (headings_1_1 && !headings_1_1.done && (_a = headings_1.return)) _a.call(headings_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return depth !== null && depth !== void 0 ? depth : 1;
+}
+exports.getLeastDepth = getLeastDepth;

package/globalStyle.d.ts

@@ -1,2 +1,4 @@
+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>;