@redocly/theme 0.1.33 → 0.2.2

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/Search/Autocomplete.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ActiveItem } from '../mocks/models';
+import type { ActiveItem } from '../mocks/types';
 interface AutocompleteProps<T> {
     placeholder?: string;
     value: string;

package/Search/Parameters.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { OperationParameter } from '../mocks/models';
+import type { OperationParameter } from '../mocks/types';
 interface ParametersProps {
     parameters: OperationParameter[];
 }

package/Search/SearchItem.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ActiveItem, SearchDocument } from '../mocks/models';
+import type { ActiveItem, SearchDocument } from '../mocks/types';
 interface SearchItemProps {
     item: ActiveItem<SearchDocument>;
 }

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/Tooltip/Tooltip.d.ts

@@ -1,5 +1,5 @@
-import type { PropsWithChildren, ReactNode } from 'react';
 import React from 'react';
+import type { PropsWithChildren, ReactNode } from 'react';
 export interface TooltipProps {
     tip: string | ReactNode;
     isOpen?: boolean;
@@ -10,4 +10,4 @@ export interface TooltipProps {
     dataTestId?: string;
 }
 export declare function TooltipComponent({ children, isOpen, tip, withArrow, placement, className, width, dataTestId, }: PropsWithChildren<TooltipProps>): JSX.Element;
-export declare const Tooltip: React.NamedExoticComponent<PropsWithChildren<TooltipProps>>;
+export declare const Tooltip: React.NamedExoticComponent<React.PropsWithChildren<TooltipProps>>;

package/package.json

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

package/src/Footer/CustomFooterNavItem.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Link } from '@portal/Link';
 import type { ResolvedNavItem, ResolvedNavLinkItem } from '@theme/types/portal';
 
+import { Link } from '@portal/Link';
+
 interface CustomFooterNavItemProps {
   navItem: ResolvedNavItem;
 }

package/src/Footer/Footer.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import styled from 'styled-components';
 
+import type { NavGroupRecord, ResolvedNavItem } from '@theme/types/portal';
+
 import { FooterColumns } from '@theme/Footer/FooterColumns';
 import { FooterCopyright } from '@theme/Footer/FooterCopyright';
-import type { NavGroupRecord, ResolvedNavItem } from '@theme/types/portal';
 import { useThemeSettings } from '@portal/hooks';
 import { DEFAULT_THEME_NAME } from '@portal/constants';
 import { isEmptyArray } from '@theme/utils';

package/src/Footer/FooterColumn.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Link } from '@portal/Link';
 import type { ResolvedNavItem } from '@theme/types/portal';
 
+import { Link } from '@portal/Link';
+
 interface FooterColumnProps {
   column: ResolvedNavItem;
 }

package/src/Footer/FooterColumns.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { FooterColumn } from '@theme/Footer/FooterColumn';
 import type { ResolvedNavItem } from '@theme/types/portal';
 
+import { FooterColumn } from '@theme/Footer/FooterColumn';
+
 interface FooterColumnsProps {
   columns: ResolvedNavItem[];
 }

package/src/Markdown/MarkdownWrapper.tsx

@@ -246,6 +246,30 @@ export const MarkdownWrapper = styled.main.attrs(() => ({
     ${headingAnchor()};
   }
 
+  h1.md code {
+    font-size: var(--h1-font-size);
+  }
+
+  h2.md code {
+    font-size: var(--h2-font-size);
+  }
+
+  h3.md code {
+    font-size: var(--h3-font-size);
+  }
+
+  h4.md code {
+    font-size: var(--h4-font-size);
+  }
+
+  h5.md code {
+    font-size: var(--h5-font-size);
+  }
+
+  h6.md code {
+    font-size: var(--h6-font-size);
+  }
+
   code {
     color: var(--inline-code-color);
     background-color: var(--inline-code-background-color);

package/src/Navbar/MobileNavbarDropdown.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import type { ResolvedNavLinkItem } from '@theme/types/portal';
+
 import { Link } from '@portal/Link';
 
 interface NavbarDropdownProps {

package/src/Navbar/MobileNavbarItem.tsx

@@ -7,6 +7,7 @@ import type {
   ResolvedNavLinkItem,
   ResolvedNavGroupItem,
 } from '@theme/types/portal';
+
 import { Link } from '@portal/Link';
 import { withPathPrefix } from '@portal/utils';
 import { MobileDropdownWrapper, MobileNavbarDropdown } from '@theme/Navbar/MobileNavbarDropdown';

package/src/Navbar/MobileNavbarMenu.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import styled from 'styled-components';
 
+import type { ResolvedConfigLinks, ResolvedNavItem } from '@theme/types/portal';
+
 import { NavMenuItem, NavMenuItemWithDropdownWrapper } from '@theme/Navbar/NavbarItem';
 import { MobileNavbarItem } from '@theme/Navbar/MobileNavbarItem';
 import { DropdownWrapper } from '@theme/Navbar/NavbarDropdown';
-import type { ResolvedConfigLinks, ResolvedNavItem } from '@theme/types/portal';
 import { isPrimitive, isEmptyArray } from '@theme/utils';
 
 export function MobileNavbarMenu({

package/src/Navbar/NavbarDropdown.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import type { ResolvedNavLinkItem } from '@theme/types/portal';
+
 import { Link } from '@portal/Link';
 
 interface NavbarDropdownProps {

package/src/Navbar/NavbarItem.tsx

@@ -7,6 +7,7 @@ import type {
   ResolvedNavLinkItem,
   ResolvedNavGroupItem,
 } from '@theme/types/portal';
+
 import { Link } from '@portal/Link';
 import { withPathPrefix } from '@portal/utils';
 import { NavbarDropdown, DropdownWrapper } from '@theme/Navbar/NavbarDropdown';

package/src/Navbar/NavbarMenu.tsx

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

package/src/PageNavigation/NextPageLink.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import type { ResolvedNavItemWithLink } from '@theme/types/portal';
+
 import { useThemeSettings, useSidebarSiblingsData } from '@portal/hooks';
 import { DEFAULT_THEME_NAME } from '@portal/constants';
 import { Button } from '@theme/Button/Button';

package/src/PageNavigation/PreviousPageLink.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import type { ResolvedNavItemWithLink } from '@theme/types/portal';
+
 import { useThemeSettings, useSidebarSiblingsData } from '@portal/hooks';
 import { DEFAULT_THEME_NAME } from '@portal/constants';
 import { Button } from '@theme/Button/Button';

package/src/Search/Autocomplete.tsx

@@ -9,9 +9,10 @@ import React, {
 import { useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 
+import type { ActiveItem } from '@portal/types';
+
 import { FormInput } from '@theme/Search/Input';
 import { Popover } from '@theme/Search/Popover';
-import { ActiveItem } from '@shared/models';
 
 interface AutocompleteProps<T> {
   placeholder?: string;

package/src/Search/Parameters.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { OperationParameter } from '@shared/models';
+import type { OperationParameter } from '@portal/types';
+
 import { highlight } from '@theme/Search/utils';
 
 interface ParametersProps {

package/src/Search/SearchItem.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useRef } from 'react';
 import styled from 'styled-components';
 
+import type { ActiveItem, SearchDocument } from '@portal/types';
+
 import { OperationBadge } from '@theme/OperationBadge';
 import { Link } from '@portal/Link';
-import { ActiveItem, SearchDocument } from '@shared/models';
 import { Parameters } from '@theme/Search/Parameters';
 import { highlight } from '@theme/Search/utils';
 

package/src/SourceCode/SourceCode.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { highlight, addLineNumbers } from '@theme/utils';
 import {
@@ -72,16 +72,27 @@ export function SourceCode({
   withLineNumbers,
   startLineNumber,
 }: SourceCodeProps): JSX.Element {
-  const _source = source || externalSource?.sample?.get?.(externalSource) || '';
+  const [sourceCode, setSourceCode] = useState<string>(source ?? '');
+
+  // The same initial value should be returned for ssr and frontend to avoid issues
+  // Because we don't have session storage in ssr and can't get the security details there
+  // Issue for more details https://github.com/Redocly/reference-docs/issues/888
+  useEffect(() => {
+    const _externalSource = externalSource?.sample?.get?.(externalSource) ?? '';
+    if (_externalSource) {
+      setSourceCode(_externalSource);
+    }
+  }, [externalSource]);
+
   if (withCopyButton) {
     return (
-      <CopyButtonWrapper data={source} data-component-name="SourceCode/SourceCode">
+      <CopyButtonWrapper data={sourceCode} data-component-name="SourceCode/SourceCode">
         {({ renderCopyButton }) => (
           <SampleControlsWrap>
             <SampleControls data-cy="copy-button">{renderCopyButton()}</SampleControls>
             <Code
               lang={lang}
-              source={_source}
+              source={sourceCode}
               withLineNumbers={withLineNumbers}
               startLineNumber={startLineNumber}
               dataTestId={dataTestId}
@@ -96,7 +107,7 @@ export function SourceCode({
     <Code
       dataTestId={dataTestId}
       lang={lang}
-      source={_source}
+      source={sourceCode}
       withLineNumbers={withLineNumbers}
       startLineNumber={startLineNumber}
       data-component-name="SourceCode/SourceCode"

package/src/TableOfContent/TableOfContent.tsx

@@ -1,6 +1,8 @@
 import React, { useRef } from 'react';
 import styled from 'styled-components';
 
+import { getDisplayedHeadingsIds, getDisplayedHeadings, getLeastDepth } from './utils';
+
 import { useFullHeight } from '@theme/hooks/useFullHeight';
 import { useThemeSettings } from '@portal/hooks';
 import { useActiveHeading } from '@theme/hooks/useActiveHeading';
@@ -20,16 +22,13 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
   useFullHeight(sidebar);
   const { toc } = useThemeSettings(DEFAULT_THEME_NAME);
 
-  const getDisplayedHeaderIds = () => {
-    if (!headings) {
-      return [];
-    }
-    return headings
-      .filter((header) => header && tocMaxDepth >= header.depth)
-      .map((header) => header?.id);
-  };
+  const displayedHeadings = getDisplayedHeadings(headings, tocMaxDepth);
+  const leastDepth = getLeastDepth(displayedHeadings);
 
-  const activeHeadingId = useActiveHeading(contentWrapper, getDisplayedHeaderIds());
+  const activeHeadingId = useActiveHeading(
+    contentWrapper,
+    getDisplayedHeadingsIds(displayedHeadings),
+  );
 
   if (toc?.hide) {
     return null;
@@ -47,23 +46,17 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
         <TableOfContentMenu data-component-name="TableOfContent/TableOfContent">
           <TableOfContentItems ref={sidebar}>
             <TocHeader>{toc?.header?.label || 'On this page'}</TocHeader>
-            {headings.map((heading: MdHeading | null, idx: number) => {
+            {displayedHeadings.map((heading: MdHeading | null, idx: number) => {
               // 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;
-              }
               const href = '#' + heading.id;
               return (
                 <MenuItem
                   key={href + idx}
                   href={href}
-                  depth={heading.depth || 0}
+                  depth={heading.depth - leastDepth + 1 || 0}
                   className={activeHeadingId === heading.id ? 'active' : ''}
                   dangerouslySetInnerHTML={{ __html: heading.value || '' }}
                   data-cy={`toc-${heading.value}`}
@@ -90,7 +83,7 @@ const MenuItem = styled.a<{ depth: number }>`
   cursor: pointer;
   font-size: 0.8em;
   padding: 10px 15px;
-  padding-left: ${({ depth }) => (depth - 1) * 15}px;
+  padding-left: ${({ depth }) => depth * 15}px;
   transition: background-color 0.3s, color 0.3s;
   text-decoration: none;
   word-break: break-word;

package/src/TableOfContent/utils.ts

@@ -0,0 +1,45 @@
+import { MdHeading } from '@theme/types/portal';
+
+export function getDisplayedHeadings(
+  headings: Array<MdHeading | null> | null | undefined,
+  tocMaxDepth: number,
+): Array<MdHeading | null> {
+  if (!headings) {
+    return [];
+  }
+  return headings.filter((heading, idx) => {
+    if (!heading) {
+      return false;
+    }
+    if (idx === 0 && heading.depth === 1) {
+      return false;
+    }
+    if (heading.depth && heading.depth > tocMaxDepth) {
+      return false;
+    }
+    return true;
+  });
+}
+
+export function getDisplayedHeadingsIds(
+  headings: Array<MdHeading | null> | null | undefined,
+): Array<string | undefined> {
+  if (!headings) {
+    return [];
+  }
+  return headings.map((header) => header?.id);
+}
+
+export function getLeastDepth(headings: Array<MdHeading | null> | null | undefined): number {
+  if (!headings || headings.length === 0) {
+    return 1;
+  }
+  let depth = null;
+  for (const heading of headings) {
+    if (!heading) continue;
+    if (depth === null || depth > heading.depth) {
+      depth = heading.depth;
+    }
+  }
+  return depth ?? 1;
+}

package/src/Tooltip/Tooltip.tsx

@@ -1,6 +1,6 @@
-import type { PropsWithChildren, ReactNode } from 'react';
 import React, { useEffect, memo, useRef } from 'react';
 import styled, { css } from 'styled-components';
+import type { PropsWithChildren, ReactNode } from 'react';
 
 import { useControl, useOutsideClick } from '@theme/hooks';
 

package/src/hooks/useActiveSectionId.ts

@@ -1,6 +1,6 @@
-import type { Location } from 'history';
 import { useEffect, useState, useMemo } from 'react';
 import throttle from 'lodash.throttle';
+import type { Location } from 'history';
 
 import { useNavbarHeight } from '@theme/hooks/useNavbarHeight';
 

package/src/utils/theme-helpers.ts

@@ -1,5 +1,5 @@
-import type { FlattenSimpleInterpolation } from 'styled-components';
 import { css } from 'styled-components';
+import type { FlattenSimpleInterpolation } from 'styled-components';
 
 enum Token {
   Comment = 'comment',