@redocly/theme 0.4.9 → 0.4.10

package/ColorModeSwitcher/ColorModeSwitcher.js

@@ -49,15 +49,14 @@ 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");
-var hooks_2 = require("../hooks");
+var hooks_1 = require("../hooks");
+var useDefaultThemeSettings_1 = require("../hooks/useDefaultThemeSettings");
 function ColorModeSwitcher() {
-    var themeSettings = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME);
+    var themeSettings = (0, useDefaultThemeSettings_1.useDefaultThemeSettings)();
     var colorMode = themeSettings.colorMode;
     var _a = __read((0, react_1.useState)(''), 2), activeColorMode = _a[0], setActiveColorMode = _a[1];
-    (0, hooks_2.useMount)(function () {
+    (0, hooks_1.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)) {

package/Footer/Footer.js

@@ -12,12 +12,11 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var FooterColumns_1 = require("../Footer/FooterColumns");
 var FooterCopyright_1 = require("../Footer/FooterCopyright");
-var hooks_1 = require("../mocks/hooks");
-var constants_1 = require("../mocks/constants");
 var utils_1 = require("../utils");
+var useDefaultThemeSettings_1 = require("../hooks/useDefaultThemeSettings");
 function Footer(_a) {
     var _b = _a.data, columns = _b.columns, copyrightText = _b.copyrightText;
-    var footer = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME).footer;
+    var footer = (0, useDefaultThemeSettings_1.useDefaultThemeSettings)().footer;
     if ((0, utils_1.isEmptyArray)(columns) || !copyrightText || (footer === null || footer === void 0 ? void 0 : footer.hide)) {
         return null;
     }

package/LastUpdated/LastUpdated.js

@@ -11,11 +11,10 @@ exports.LastUpdated = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var timeago_js_1 = require("timeago.js");
-var hooks_1 = require("../mocks/hooks");
-var constants_1 = require("../mocks/constants");
+var useDefaultThemeSettings_1 = require("../hooks/useDefaultThemeSettings");
 function LastUpdated(_a) {
     var lastModified = _a.lastModified;
-    var lastUpdatedBlock = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME).lastUpdatedBlock;
+    var lastUpdatedBlock = (0, useDefaultThemeSettings_1.useDefaultThemeSettings)().lastUpdatedBlock;
     if (lastUpdatedBlock === null || lastUpdatedBlock === void 0 ? void 0 : lastUpdatedBlock.hide) {
         return null;
     }

package/Markdown/CodeSample/CodeSample.d.ts

@@ -1,15 +1,7 @@
 /// <reference types="react" />
-export interface MdCopyCodeProps {
-    enabled?: boolean;
-    buttonText?: string;
-    tooltipText?: string;
-    toasterText?: string;
-    toasterDuration?: number;
-}
 export declare type CodeSampleProps = {
     language: string;
     highlighted: string;
     rawContent: string;
-    copyCodeSnippet: MdCopyCodeProps;
 };
-export declare function CodeSample({ rawContent, highlighted, language, copyCodeSnippet, }: CodeSampleProps): JSX.Element;
+export declare function CodeSample({ rawContent, highlighted, language }: CodeSampleProps): JSX.Element;

package/Markdown/CodeSample/CodeSample.js

@@ -58,17 +58,19 @@ exports.CodeSample = void 0;
 var react_1 = __importStar(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var ClipboardService_1 = require("../../utils/ClipboardService");
+var useDefaultThemeSettings_1 = require("../../hooks/useDefaultThemeSettings");
 var defaultCopyCodeSnippet = {
-    enabled: true,
+    hide: false,
     buttonText: 'Copy',
     tooltipText: 'Copy the code snippet',
     toasterText: 'Copied',
     toasterDuration: 1500,
 };
 function CodeSample(_a) {
-    var rawContent = _a.rawContent, highlighted = _a.highlighted, language = _a.language, copyCodeSnippet = _a.copyCodeSnippet;
+    var rawContent = _a.rawContent, highlighted = _a.highlighted, language = _a.language;
     var langClassName = language ? "language-".concat(language) : '';
-    var copyCodeProps = __assign(__assign({}, defaultCopyCodeSnippet), copyCodeSnippet);
+    var copyCodeSnippet = (0, useDefaultThemeSettings_1.useDefaultThemeSettings)().copyCodeSnippet;
+    var copyCodeProps = __assign(__assign({}, copyCodeSnippet), defaultCopyCodeSnippet);
     var _b = __read((0, react_1.useState)(false), 2), isCopied = _b[0], setIsCopied = _b[1];
     var copyCode = function (code) {
         ClipboardService_1.ClipboardService.copyCustom(code);
@@ -76,7 +78,7 @@ function CodeSample(_a) {
         setTimeout(function () { return setIsCopied(false); }, copyCodeProps.toasterDuration);
     };
     return (react_1.default.createElement(Wrapper, { className: "code-sample", "data-component-name": "Markdown/CodeSample/CodeSample" },
-        copyCodeProps.enabled && (react_1.default.createElement(CodeSampleButtonContainer, { onClick: function () { return copyCode(rawContent); } },
+        !copyCodeProps.hide && (react_1.default.createElement(CodeSampleButtonContainer, { onClick: function () { return copyCode(rawContent); } },
             !isCopied && (react_1.default.createElement(CopyCodeButton, { title: copyCodeProps.tooltipText }, copyCodeProps.buttonText)),
             isCopied && react_1.default.createElement(DoneIndicator, null, copyCodeProps.toasterText))),
         react_1.default.createElement("pre", { className: langClassName },

package/Navbar/Navbar.js

@@ -26,17 +26,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavbarRow = exports.NavbarContainer = exports.Navbar = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
-var hooks_1 = require("../mocks/hooks");
-var constants_1 = require("../mocks/constants");
 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");
+var useDefaultThemeSettings_1 = require("../hooks/useDefaultThemeSettings");
 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];
-    var _c = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME), searchSettings = _c.search, navbar = _c.navbar;
+    var _c = (0, useDefaultThemeSettings_1.useDefaultThemeSettings)(), searchSettings = _c.search, navbar = _c.navbar;
     var hideSearch = (searchSettings === null || searchSettings === void 0 ? void 0 : searchSettings.hide) || ((searchSettings === null || searchSettings === void 0 ? void 0 : searchSettings.placement) && (searchSettings === null || searchSettings === void 0 ? void 0 : searchSettings.placement) !== 'navbar');
     if (navbar === null || navbar === void 0 ? void 0 : navbar.hide) {
         return null;

package/PageNavigation/NextPageLink.js

@@ -11,12 +11,12 @@ exports.NextPageLink = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var hooks_1 = require("../mocks/hooks");
-var constants_1 = require("../mocks/constants");
 var Button_1 = require("../Button/Button");
+var useDefaultThemeSettings_1 = require("../hooks/useDefaultThemeSettings");
 function NextPageLink() {
     var _a, _b;
     var nextPage = ((0, hooks_1.useSidebarSiblingsData)() || {}).nextPage;
-    var navigation = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME).navigation;
+    var navigation = (0, useDefaultThemeSettings_1.useDefaultThemeSettings)().navigation;
     if (!nextPage || (navigation === null || navigation === void 0 ? void 0 : navigation.hide) || ((_a = navigation === null || navigation === void 0 ? void 0 : navigation.nextPageLink) === null || _a === void 0 ? void 0 : _a.hide)) {
         return react_1.default.createElement("div", null, "\u00A0");
     }

package/PageNavigation/PageNavigation.js

@@ -12,11 +12,10 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var PreviousPageLink_1 = require("../PageNavigation/PreviousPageLink");
 var NextPageLink_1 = require("../PageNavigation/NextPageLink");
-var hooks_1 = require("../mocks/hooks");
-var constants_1 = require("../mocks/constants");
+var useDefaultThemeSettings_1 = require("../hooks/useDefaultThemeSettings");
 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;
+    var navigation = (0, useDefaultThemeSettings_1.useDefaultThemeSettings)().navigation;
     if (navigation === null || navigation === void 0 ? void 0 : navigation.hide) {
         return null;
     }

package/PageNavigation/PreviousPageLink.js

@@ -11,12 +11,12 @@ exports.PreviousPageLink = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var hooks_1 = require("../mocks/hooks");
-var constants_1 = require("../mocks/constants");
+var useDefaultThemeSettings_1 = require("../hooks/useDefaultThemeSettings");
 var Button_1 = require("../Button/Button");
 function PreviousPageLink() {
     var _a, _b;
     var prevPage = ((0, hooks_1.useSidebarSiblingsData)() || {}).prevPage;
-    var navigation = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME).navigation;
+    var navigation = (0, useDefaultThemeSettings_1.useDefaultThemeSettings)().navigation;
     if (!prevPage || (navigation === null || navigation === void 0 ? void 0 : navigation.hide) || ((_a = navigation === null || navigation === void 0 ? void 0 : navigation.previousPageLink) === null || _a === void 0 ? void 0 : _a.hide)) {
         return react_1.default.createElement("div", null, "\u00A0");
     }

package/Sidebar/SidebarLayout.js

@@ -30,14 +30,13 @@ var Sidebar_1 = require("../Sidebar/Sidebar");
 var useMobileMenu_1 = require("../hooks/useMobileMenu");
 var MobileSidebarButton_1 = require("../Sidebar/MobileSidebarButton");
 var MenuContainer_1 = require("../Sidebar/MenuContainer");
-var hooks_1 = require("../mocks/hooks");
-var constants_1 = require("../mocks/constants");
 var SidebarSearch_1 = require("../Search/SidebarSearch");
+var useDefaultThemeSettings_1 = require("../hooks/useDefaultThemeSettings");
 function SidebarLayout(_a) {
     var versions = _a.versions, menu = _a.menu;
     var _b = __read((0, useMobileMenu_1.useMobileMenu)(), 2), isOpen = _b[0], setIsOpen = _b[1];
     var toggleMenu = function () { return setIsOpen(!isOpen); };
-    var _c = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME), search = _c.search, sidebar = _c.sidebar;
+    var _c = (0, useDefaultThemeSettings_1.useDefaultThemeSettings)(), search = _c.search, sidebar = _c.sidebar;
     if (sidebar === null || sidebar === void 0 ? void 0 : sidebar.hide) {
         return null;
     }

package/TableOfContent/TableOfContent.js

@@ -35,15 +35,14 @@ 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");
-var constants_1 = require("../mocks/constants");
+var useDefaultThemeSettings_1 = require("../hooks/useDefaultThemeSettings");
 function TableOfContent(props) {
     var _a;
     var headings = props.headings, tocMaxDepth = props.tocMaxDepth, contentWrapper = props.contentWrapper;
     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 toc = (0, useDefaultThemeSettings_1.useDefaultThemeSettings)().toc;
     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));

package/globalStyle.js

@@ -26,12 +26,13 @@ var footer = (0, styled_components_1.css)(templateObject_16 || (templateObject_1
 var logo = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  /**\n    * @tokens Logo\n    */\n\n  --navbar-logo-height: 2rem; // @presenter Spacing\n  --navbar-logo-width: auto;\n  --navbar-logo-margin: 16px; // @presenter Spacing\n  --navbar-logo-max-width: 285px; // @presenter Spacing\n  --navbar-logo-max-height: 285px; // @presenter Spacing\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Logo\n    */\n\n  --navbar-logo-height: 2rem; // @presenter Spacing\n  --navbar-logo-width: auto;\n  --navbar-logo-margin: 16px; // @presenter Spacing\n  --navbar-logo-max-width: 285px; // @presenter Spacing\n  --navbar-logo-max-height: 285px; // @presenter Spacing\n\n  // @tokens End\n"])));
 var navbar = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  /**\n    * @tokens Navbar\n    */\n  --navbar-height: 60px; // @presenter Spacing\n  --navbar-text-color: #fff; // @presenter Color\n  --navbar-background-color: var(--color-primary-500); // @presenter Color\n  --navbar-container-max-width: 100%;\n\n  /**\n    * @tokens Navbar Item\n    * */\n  --navbar-item-font-family: var(--font-family-base); // @presenter FontFamily\n  --navbar-item-font-size: 16px; // @presenter FontSize\n  --navbar-item-padding-horizontal: 16px; // @presenter Spacing\n  --navbar-item-paddin-vertical: 8px; // @presenter Spacing\n  --navbar-item-margin-horizontal: 7px;\n  --navbar-item-border-radius: var(--border-radius); // @presenter BorderRadius\n  --navbar-item-font-weight: var(--font-weight-bold); // @presenter FontWeight\n  --navbar-item-hover-background-color: var(--color-primary-300);\n  --navbar-item-active-background-color: var(--color-primary-300); // @presenter Color\n  --navbar-item-hover-text-color: var(--navbar-text-color); // @presenter Color\n  --navbar-item-hover-text-decoration: none;\n  --navbar-item-active-text-color: var(--navbar-text-color); // @presenter Color\n  --navbar-item-active-text-decoration: none;\n  --navbar-item-separator-line-color: var(--border-color); // @presenter Color\n\n  /**\n    * @tokens Navbar dropdown\n    * */\n\n  --navbar-dropdown-shadow: 4px 4px 15px -2px rgba(0, 0, 0, 0.5); //should be variable\n  --navbar-dropdown-background: var(--navbar-item-active-background-color);\n  --navbar-dropdown-border: none;\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Navbar\n    */\n  --navbar-height: 60px; // @presenter Spacing\n  --navbar-text-color: #fff; // @presenter Color\n  --navbar-background-color: var(--color-primary-500); // @presenter Color\n  --navbar-container-max-width: 100%;\n\n  /**\n    * @tokens Navbar Item\n    * */\n  --navbar-item-font-family: var(--font-family-base); // @presenter FontFamily\n  --navbar-item-font-size: 16px; // @presenter FontSize\n  --navbar-item-padding-horizontal: 16px; // @presenter Spacing\n  --navbar-item-paddin-vertical: 8px; // @presenter Spacing\n  --navbar-item-margin-horizontal: 7px;\n  --navbar-item-border-radius: var(--border-radius); // @presenter BorderRadius\n  --navbar-item-font-weight: var(--font-weight-bold); // @presenter FontWeight\n  --navbar-item-hover-background-color: var(--color-primary-300);\n  --navbar-item-active-background-color: var(--color-primary-300); // @presenter Color\n  --navbar-item-hover-text-color: var(--navbar-text-color); // @presenter Color\n  --navbar-item-hover-text-decoration: none;\n  --navbar-item-active-text-color: var(--navbar-text-color); // @presenter Color\n  --navbar-item-active-text-decoration: none;\n  --navbar-item-separator-line-color: var(--border-color); // @presenter Color\n\n  /**\n    * @tokens Navbar dropdown\n    * */\n\n  --navbar-dropdown-shadow: 4px 4px 15px -2px rgba(0, 0, 0, 0.5); //should be variable\n  --navbar-dropdown-background: var(--navbar-item-active-background-color);\n  --navbar-dropdown-border: none;\n\n  // @tokens End\n"])));
 var toc = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  /**\n    * @tokens TOC\n    * */\n\n  --toc-width: 240px;\n  --toc-background-color: transparent;\n  --toc-border-color: var(--border-color);\n\n  --toc-spacing-unit: 8px;\n  --toc-offset-top: calc(var(--toc-spacing-unit) * 2);\n\n  /**\n     * @tokens TOC item typography\n     */\n  --toc-item-font-family: var(--font-family-base); // @presenter FontFamily\n  --toc-item-font-size: var(--font-size-base); // @presenter FontSize\n\n  /**\n    * @tokens TOC item\n    */\n\n  --toc-item-text-color: var(--text-color); // @presenter Color\n  --toc-item-active-text-color: var(--text-color); // @presenter Color\n  --toc-item-background-color: transparent; // @presenter Color\n  --toc-item-active-background-color: var(--border-color); // @presenter Color\n  --toc-item-nested-offset: calc(var(--toc-spacing-unit) * 2); // @presenter Spacing\n  --toc-item-padding-vertical: var(--toc-spacing-unit); // @presenter Spacing\n  --toc-item-padding-horizontal: calc(var(--toc-spacing-unit) * 2); // @presenter Spacing\n\n  /**\n    * @tokens TOC header\n    */\n\n  --toc-heading-font-size: var(--font-size-base); // @presenter FontSize\n  --toc-heading-font-family: var(--font-family-base); // @presenter FontFamily\n  --toc-heading-font-weight: bold; // @presenter FontWeight\n  --toc-heading-text-color: var(--text-color); // @presenter Color\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens TOC\n    * */\n\n  --toc-width: 240px;\n  --toc-background-color: transparent;\n  --toc-border-color: var(--border-color);\n\n  --toc-spacing-unit: 8px;\n  --toc-offset-top: calc(var(--toc-spacing-unit) * 2);\n\n  /**\n     * @tokens TOC item typography\n     */\n  --toc-item-font-family: var(--font-family-base); // @presenter FontFamily\n  --toc-item-font-size: var(--font-size-base); // @presenter FontSize\n\n  /**\n    * @tokens TOC item\n    */\n\n  --toc-item-text-color: var(--text-color); // @presenter Color\n  --toc-item-active-text-color: var(--text-color); // @presenter Color\n  --toc-item-background-color: transparent; // @presenter Color\n  --toc-item-active-background-color: var(--border-color); // @presenter Color\n  --toc-item-nested-offset: calc(var(--toc-spacing-unit) * 2); // @presenter Spacing\n  --toc-item-padding-vertical: var(--toc-spacing-unit); // @presenter Spacing\n  --toc-item-padding-horizontal: calc(var(--toc-spacing-unit) * 2); // @presenter Spacing\n\n  /**\n    * @tokens TOC header\n    */\n\n  --toc-heading-font-size: var(--font-size-base); // @presenter FontSize\n  --toc-heading-font-family: var(--font-family-base); // @presenter FontFamily\n  --toc-heading-font-weight: bold; // @presenter FontWeight\n  --toc-heading-text-color: var(--text-color); // @presenter Color\n\n  // @tokens End\n"])));
-var inputs = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  /**\n    * @tokens Inputs\n    */\n  --input-text-color: var(--text-color-inverse); // @presenter Color\n  --input-border: none; // @presenter Border\n  --input-border-radius: var(--border-radius); // @presenter BorderRadius\n  --input-font-size: var(--font-size-base); // @presenter FontSize\n  --input-font-family: var(--code-font-family); // @presenter FontFamily\n  --input-line-height: 1.15em; // @presenter LineHeight\n  --input-padding: 8px;\n\n  --input-hover-text-color: var(--text-color-inverse); // @presenter Color\n  --input-hover-border: none; // @presenter Border\n  --input-focus-border: none; // @presenter Border\n  --input-focus-text-color: var(--text-color-inverse); // @presenter Color\n  --input-placeholder-text-color: var(--text-color-inverse); // @presenter Color\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Inputs\n    */\n  --input-text-color: var(--text-color-inverse); // @presenter Color\n  --input-border: none; // @presenter Border\n  --input-border-radius: var(--border-radius); // @presenter BorderRadius\n  --input-font-size: var(--font-size-base); // @presenter FontSize\n  --input-font-family: var(--code-font-family); // @presenter FontFamily\n  --input-line-height: 1.15em; // @presenter LineHeight\n  --input-padding: 8px;\n\n  --input-hover-text-color: var(--text-color-inverse); // @presenter Color\n  --input-hover-border: none; // @presenter Border\n  --input-focus-border: none; // @presenter Border\n  --input-focus-text-color: var(--text-color-inverse); // @presenter Color\n  --input-placeholder-text-color: var(--text-color-inverse); // @presenter Color\n\n  // @tokens End\n"])));
-var markdown = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  /**\n  * @tokens Markdown Container\n  */\n\n  --md-container-max-width: 910px;\n  --md-container-padding-vertical: 25px; // @presenter Spacing\n  --md-container-padding-horizontal: 0px; // @presenter Spacing\n\n  /**\n  * @tokens Markdown Blockquote\n  */\n\n  --md-blockquote-margin-vertical: 1.5em; // @presenter Spacing\n  --md-blockquote-margin-horizontal: 0; // @presenter Spacing\n  --md-blockquote-padding-vertical: 0; // @presenter Spacing\n  --md-blockquote-padding-horizontal: calc(var(--spacing-unit) * 4); // @presenter Spacing\n  --md-blockquote-border-color: var(--border-color); // @presenter Color\n  --md-blockquote-background-color: transparent; // @presenter Color\n  --md-blockquote-border-left: 4px solid var(--md-blockquote-border-color); // @presenter Border\n  --md-blockquote-text-color: var(--text-color); // @presenter Color\n  --md-blockquote-box-shadow: none; // @presenter Shadow\n\n  /** \n  * @tokens Markdown Paragraph\n  */\n\n  --md-paragraph-margin-vertical: 10px; // @presenter Spacing\n  --md-paragraph-margin-horizontal: 0px; // @presenter Spacing\n\n  /**\n  * @tokens Markdown Table\n  */\n\n  --md-table-font-size: 14px; // @presenter FontSize\n  --md-table-margin-vertical: 20px; // @presenter Spacing\n  --md-table-background-color: transparent; // @presenter Color\n\n  --md-table-border-radius: var(--border-radius-lg); // @presenter BorderRadius\n  --md-table-border-width: 1px;\n  --md-table-border-color: var(--border-color); // @presenter Color\n\n  --md-table-stripe-background-color: var(--md-table-background-color); // @presenter Color\n\n  --md-table-cell-text-color: var(--text-color); // @presenter Color\n  --md-table-cell-padding: 12px; // @presenter Spacing\n\n  --md-table-head-background-color: var(--color-secondary-200); // @presenter Color\n  --md-table-head-text-color: var(--text-color); // @presenter Color\n  --md-table-head-font-weight: var(--font-weight-bold); // @presenter FontWeight\n\n  /**\n  * @tokens Markdown Horizontal Rule\n  */\n\n  --md-hr-background-color: transparent; // @presenter Color\n  --md-hr-border-color: var(--border-color); // @presenter Color\n  --md-hr-height: unset;\n  --md-hr-margin-vertical: 20px; // @presenter Spacing\n\n  /** \n  * @tokens Markdown List\n  */\n\n  --md-list-left-padding: 2rem; // @presenter Spacing\n  --md-list-margin: 1rem; // @presenter Spacing\n  --md-list-item-margin: 0.25rem; // @presenter Spacing\n  --md-list-item-style: inherit;\n\n  /** \n  * @tokens Markdown Numbered List\n  */\n\n  --md-numbered-list-number-display: none;\n  --md-numbered-list-item-style: var(--md-list-item-style);\n  --md-numbered-list-number-text-color: var(--color-secondary-100); // @presenter Color\n  --md-numbered-list-number-font-size: var(--font-size-base); // @presenter FontSize\n  --md-numbered-list-number-font-family: var(--font-size-base); // @presenter FontFamily\n  --md-numbered-list-number-font-weight: var(--font-weight-regular); // @presenter FontWeight\n  --md-numbered-list-number-background-color: var(--color-secondary-800); // @presenter Color\n  --md-numbered-list-number-border-radius: 10px; // @presenter BorderRadius\n  --md-numbered-list-number-margin-right: 5px; // @presenter Spacing\n  --md-numbered-list-number-padding: 0 5px; // @presenter Spacing\n\n  // @tokens End\n"], ["\n  /**\n  * @tokens Markdown Container\n  */\n\n  --md-container-max-width: 910px;\n  --md-container-padding-vertical: 25px; // @presenter Spacing\n  --md-container-padding-horizontal: 0px; // @presenter Spacing\n\n  /**\n  * @tokens Markdown Blockquote\n  */\n\n  --md-blockquote-margin-vertical: 1.5em; // @presenter Spacing\n  --md-blockquote-margin-horizontal: 0; // @presenter Spacing\n  --md-blockquote-padding-vertical: 0; // @presenter Spacing\n  --md-blockquote-padding-horizontal: calc(var(--spacing-unit) * 4); // @presenter Spacing\n  --md-blockquote-border-color: var(--border-color); // @presenter Color\n  --md-blockquote-background-color: transparent; // @presenter Color\n  --md-blockquote-border-left: 4px solid var(--md-blockquote-border-color); // @presenter Border\n  --md-blockquote-text-color: var(--text-color); // @presenter Color\n  --md-blockquote-box-shadow: none; // @presenter Shadow\n\n  /** \n  * @tokens Markdown Paragraph\n  */\n\n  --md-paragraph-margin-vertical: 10px; // @presenter Spacing\n  --md-paragraph-margin-horizontal: 0px; // @presenter Spacing\n\n  /**\n  * @tokens Markdown Table\n  */\n\n  --md-table-font-size: 14px; // @presenter FontSize\n  --md-table-margin-vertical: 20px; // @presenter Spacing\n  --md-table-background-color: transparent; // @presenter Color\n\n  --md-table-border-radius: var(--border-radius-lg); // @presenter BorderRadius\n  --md-table-border-width: 1px;\n  --md-table-border-color: var(--border-color); // @presenter Color\n\n  --md-table-stripe-background-color: var(--md-table-background-color); // @presenter Color\n\n  --md-table-cell-text-color: var(--text-color); // @presenter Color\n  --md-table-cell-padding: 12px; // @presenter Spacing\n\n  --md-table-head-background-color: var(--color-secondary-200); // @presenter Color\n  --md-table-head-text-color: var(--text-color); // @presenter Color\n  --md-table-head-font-weight: var(--font-weight-bold); // @presenter FontWeight\n\n  /**\n  * @tokens Markdown Horizontal Rule\n  */\n\n  --md-hr-background-color: transparent; // @presenter Color\n  --md-hr-border-color: var(--border-color); // @presenter Color\n  --md-hr-height: unset;\n  --md-hr-margin-vertical: 20px; // @presenter Spacing\n\n  /** \n  * @tokens Markdown List\n  */\n\n  --md-list-left-padding: 2rem; // @presenter Spacing\n  --md-list-margin: 1rem; // @presenter Spacing\n  --md-list-item-margin: 0.25rem; // @presenter Spacing\n  --md-list-item-style: inherit;\n\n  /** \n  * @tokens Markdown Numbered List\n  */\n\n  --md-numbered-list-number-display: none;\n  --md-numbered-list-item-style: var(--md-list-item-style);\n  --md-numbered-list-number-text-color: var(--color-secondary-100); // @presenter Color\n  --md-numbered-list-number-font-size: var(--font-size-base); // @presenter FontSize\n  --md-numbered-list-number-font-family: var(--font-size-base); // @presenter FontFamily\n  --md-numbered-list-number-font-weight: var(--font-weight-regular); // @presenter FontWeight\n  --md-numbered-list-number-background-color: var(--color-secondary-800); // @presenter Color\n  --md-numbered-list-number-border-radius: 10px; // @presenter BorderRadius\n  --md-numbered-list-number-margin-right: 5px; // @presenter Spacing\n  --md-numbered-list-number-padding: 0 5px; // @presenter Spacing\n\n  // @tokens End\n"])));
-var search = (0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  /**\n      * @tokens Search\n      */\n\n  --search-highlight-text-color: #ffff03; // @presenter Color\n\n  /**\n      * @tokens Portal Search\n      */\n\n  --search-input-background-color: rgba(255, 255, 255, 0.1); // @presenter Color\n  --search-input-text-color: #fff; // @presenter Color\n\n  --search-input-border: none;\n  --search-input-border-radius: var(--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\n  --search-input-hover-background-color: rgba(255, 255, 255, 0.1); // @presenter Color\n  --search-input-hover-border: none; // @presenter Color\n  --search-input-placeholder-color: var(--search-input-text-color);\n\n  --search-popover-background-color: var(--background-color); // @presenter Color\n  --search-popover-border-radius: var(--search-input-border-radius); // @presenter BorderRadius\n  --search-popover-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),\n    0 8px 10px -5px rgba(0, 0, 0, 0.4); // @presenter BoxShadow\n  --search-popover-border: none;\n\n  --search-item-padding: 8px 24px;\n  --search-item-text-color: var(--text-color-secondary); // @presenter Color\n  --search-item-title-text-color: var(--text-color); // @presenter Color\n  --search-item-background-color: transparent; // @presenter Color\n  --search-item-active-text-color: var(--text-color-secondary); // @presenter Color\n  --search-item-active-title-text-color: var(--text-color); // @presenter Color\n  --search-item-active-background-color: rgba(0, 68, 212, 0.1); // @presenter Color\n\n  /**\n    * @tokens Sidebar Search\n    */\n\n  --sidebar-search-button-background-color: transparent; // @presenter Color\n  --sidebar-search-button-text-color: var(--text-color); // @presenter Color\n  --sidebar-search-button-border: var(--border-color);\n  --sidebar-search-button-border-radius: none; // @presenter BorderRadius\n  --sidebar-search-button-font-size: var(--font-size-small); // @presenter FontSize\n  --sidebar-search-button-font-family: var(--font-family-base); // @presenter FontFamily\n  --sidebar-search-button-line-height: 1.15em; // @presenter LineHeight\n  --sidebar-search-button-hover-background-color: transparent; // @presenter Color\n  --sidebar-search-button-hover-border: var(--border-color); // @presenter Color\n  --sidebar-search-button-active-background-color: transparent; // @presenter Color\n  --sidebar-search-button-active-border: var(--border-color); // @presenter Color\n\n  /**\n    * @tokens Search results modal\n    * @presenter Color\n    */\n\n  --search-modal-background: var(--background-color);\n  --search-modal-text-color: var(--text-color);\n  --search-modal-border: none;\n  --search-modal-box-shadow: none;\n\n  --search-modal-header-border-radius: 8px;\n  --search-modal-header-background-color: var(--color-secondary-100);\n  --search-modal-clear-button-background-color: var(--color-secondary-300);\n  --search-modal-clear-button-hover-background-color: var(--color-secondary-500);\n\n  // @tokens End\n"], ["\n  /**\n      * @tokens Search\n      */\n\n  --search-highlight-text-color: #ffff03; // @presenter Color\n\n  /**\n      * @tokens Portal Search\n      */\n\n  --search-input-background-color: rgba(255, 255, 255, 0.1); // @presenter Color\n  --search-input-text-color: #fff; // @presenter Color\n\n  --search-input-border: none;\n  --search-input-border-radius: var(--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\n  --search-input-hover-background-color: rgba(255, 255, 255, 0.1); // @presenter Color\n  --search-input-hover-border: none; // @presenter Color\n  --search-input-placeholder-color: var(--search-input-text-color);\n\n  --search-popover-background-color: var(--background-color); // @presenter Color\n  --search-popover-border-radius: var(--search-input-border-radius); // @presenter BorderRadius\n  --search-popover-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),\n    0 8px 10px -5px rgba(0, 0, 0, 0.4); // @presenter BoxShadow\n  --search-popover-border: none;\n\n  --search-item-padding: 8px 24px;\n  --search-item-text-color: var(--text-color-secondary); // @presenter Color\n  --search-item-title-text-color: var(--text-color); // @presenter Color\n  --search-item-background-color: transparent; // @presenter Color\n  --search-item-active-text-color: var(--text-color-secondary); // @presenter Color\n  --search-item-active-title-text-color: var(--text-color); // @presenter Color\n  --search-item-active-background-color: rgba(0, 68, 212, 0.1); // @presenter Color\n\n  /**\n    * @tokens Sidebar Search\n    */\n\n  --sidebar-search-button-background-color: transparent; // @presenter Color\n  --sidebar-search-button-text-color: var(--text-color); // @presenter Color\n  --sidebar-search-button-border: var(--border-color);\n  --sidebar-search-button-border-radius: none; // @presenter BorderRadius\n  --sidebar-search-button-font-size: var(--font-size-small); // @presenter FontSize\n  --sidebar-search-button-font-family: var(--font-family-base); // @presenter FontFamily\n  --sidebar-search-button-line-height: 1.15em; // @presenter LineHeight\n  --sidebar-search-button-hover-background-color: transparent; // @presenter Color\n  --sidebar-search-button-hover-border: var(--border-color); // @presenter Color\n  --sidebar-search-button-active-background-color: transparent; // @presenter Color\n  --sidebar-search-button-active-border: var(--border-color); // @presenter Color\n\n  /**\n    * @tokens Search results modal\n    * @presenter Color\n    */\n\n  --search-modal-background: var(--background-color);\n  --search-modal-text-color: var(--text-color);\n  --search-modal-border: none;\n  --search-modal-box-shadow: none;\n\n  --search-modal-header-border-radius: 8px;\n  --search-modal-header-background-color: var(--color-secondary-100);\n  --search-modal-clear-button-background-color: var(--color-secondary-300);\n  --search-modal-clear-button-hover-background-color: var(--color-secondary-500);\n\n  // @tokens End\n"])));
-var dropdown = (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  --dropdown-font-size: 14px;\n  --dropdown-text-color: var(--text-color);\n\n  --dropdown-padding-vertical: 8px;\n  --dropdown-padding-left: 10px;\n  --dropdown-padding-right: 26px;\n  --dropdown-padding: var(--dropdown-padding-vertical) var(--dropdown-padding-right)\n    var(--dropdown-padding-vertical) var(--dropdown-padding-left);\n\n  --dropdown-border: none;\n"], ["\n  --dropdown-font-size: 14px;\n  --dropdown-text-color: var(--text-color);\n\n  --dropdown-padding-vertical: 8px;\n  --dropdown-padding-left: 10px;\n  --dropdown-padding-right: 26px;\n  --dropdown-padding: var(--dropdown-padding-vertical) var(--dropdown-padding-right)\n    var(--dropdown-padding-vertical) var(--dropdown-padding-left);\n\n  --dropdown-border: none;\n"])));
-var lastUpdated = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  --last-updated-text-color: var(--text-color);\n  --last-updated-font-size: var(--font-size-small);\n  --last-updated-font-family: var(--font-family-base);\n  --last-updated-line-height: var(--line-height-base);\n"], ["\n  --last-updated-text-color: var(--text-color);\n  --last-updated-font-size: var(--font-size-small);\n  --last-updated-font-family: var(--font-family-base);\n  --last-updated-line-height: var(--line-height-base);\n"])));
-var tile = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  --wide-tile-background-color: var(--color-secondary-50);\n  --thin-tile-background-color: var(--color-secondary-50);\n"], ["\n  --wide-tile-background-color: var(--color-secondary-50);\n  --thin-tile-background-color: var(--color-secondary-50);\n"])));
-exports.styles = (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __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    ", "\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    ", "\n  }\n\n  :root.dark {\n    ", ";\n  }\n"])), baseColors, httpColors, responsePanelColors, typography, headingsTypography, common, admonition, buttons, sidebar, navbar, footer, logo, badges, toc, inputs, tooltip, code, links, markdown, search, dropdown, apiReferencePanels, apiReferenceDocs, lastUpdated, tile, darkColors_1.darkMode);
-exports.GlobalStyle = (0, styled_components_1.createGlobalStyle)(templateObject_27 || (templateObject_27 = __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, templateObject_27;
+var loadProgressBar = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n\n  /**\n    * @tokens Load progress bar\n    */\n\n  --load-progress-bar-color: var(--color-primary-500); // @presenter Color\n  --load-progress-bar-shadow: 0 0 10px var(--load-progress-bar-color), 0 0 5px var(--load-progress-bar-color); // @presenter BoxShadow\n  --load-progress-bar-height: 2px; // @presenter Height\n\n  // @tokens End\n \n  /* Make clicks pass-through */\n  #nprogress {\n    pointer-events: none;\n  }\n\n  #nprogress .bar {\n    background: var(--load-progress-bar-color);\n\n    position: fixed;\n    z-index: 1031;\n    top: 0;\n    left: 0;\n\n    width: 100%;\n    height: var(--load-progress-bar-height);\n  }\n\n  #nprogress .peg {\n    display: block;\n    position: absolute;\n    right: 0px;\n    width: 100px;\n    height: 100%;\n    box-shadow: var(--load-progress-bar-shadow);\n    opacity: 1.0;\n\n    -webkit-transform: rotate(3deg) translate(0px, -4px);\n        -ms-transform: rotate(3deg) translate(0px, -4px);\n            transform: rotate(3deg) translate(0px, -4px);\n  }\n\n  .nprogress-custom-parent {\n    overflow: hidden;\n    position: relative;\n  }\n\n  .nprogress-custom-parent #nprogress .bar {\n    position: absolute;\n  }\n"], ["\n\n  /**\n    * @tokens Load progress bar\n    */\n\n  --load-progress-bar-color: var(--color-primary-500); // @presenter Color\n  --load-progress-bar-shadow: 0 0 10px var(--load-progress-bar-color), 0 0 5px var(--load-progress-bar-color); // @presenter BoxShadow\n  --load-progress-bar-height: 2px; // @presenter Height\n\n  // @tokens End\n \n  /* Make clicks pass-through */\n  #nprogress {\n    pointer-events: none;\n  }\n\n  #nprogress .bar {\n    background: var(--load-progress-bar-color);\n\n    position: fixed;\n    z-index: 1031;\n    top: 0;\n    left: 0;\n\n    width: 100%;\n    height: var(--load-progress-bar-height);\n  }\n\n  #nprogress .peg {\n    display: block;\n    position: absolute;\n    right: 0px;\n    width: 100px;\n    height: 100%;\n    box-shadow: var(--load-progress-bar-shadow);\n    opacity: 1.0;\n\n    -webkit-transform: rotate(3deg) translate(0px, -4px);\n        -ms-transform: rotate(3deg) translate(0px, -4px);\n            transform: rotate(3deg) translate(0px, -4px);\n  }\n\n  .nprogress-custom-parent {\n    overflow: hidden;\n    position: relative;\n  }\n\n  .nprogress-custom-parent #nprogress .bar {\n    position: absolute;\n  }\n"])));
+var inputs = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  /**\n    * @tokens Inputs\n    */\n  --input-text-color: var(--text-color-inverse); // @presenter Color\n  --input-border: none; // @presenter Border\n  --input-border-radius: var(--border-radius); // @presenter BorderRadius\n  --input-font-size: var(--font-size-base); // @presenter FontSize\n  --input-font-family: var(--code-font-family); // @presenter FontFamily\n  --input-line-height: 1.15em; // @presenter LineHeight\n  --input-padding: 8px;\n\n  --input-hover-text-color: var(--text-color-inverse); // @presenter Color\n  --input-hover-border: none; // @presenter Border\n  --input-focus-border: none; // @presenter Border\n  --input-focus-text-color: var(--text-color-inverse); // @presenter Color\n  --input-placeholder-text-color: var(--text-color-inverse); // @presenter Color\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Inputs\n    */\n  --input-text-color: var(--text-color-inverse); // @presenter Color\n  --input-border: none; // @presenter Border\n  --input-border-radius: var(--border-radius); // @presenter BorderRadius\n  --input-font-size: var(--font-size-base); // @presenter FontSize\n  --input-font-family: var(--code-font-family); // @presenter FontFamily\n  --input-line-height: 1.15em; // @presenter LineHeight\n  --input-padding: 8px;\n\n  --input-hover-text-color: var(--text-color-inverse); // @presenter Color\n  --input-hover-border: none; // @presenter Border\n  --input-focus-border: none; // @presenter Border\n  --input-focus-text-color: var(--text-color-inverse); // @presenter Color\n  --input-placeholder-text-color: var(--text-color-inverse); // @presenter Color\n\n  // @tokens End\n"])));
+var markdown = (0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  /**\n  * @tokens Markdown Container\n  */\n\n  --md-container-max-width: 910px;\n  --md-container-padding-vertical: 25px; // @presenter Spacing\n  --md-container-padding-horizontal: 0px; // @presenter Spacing\n\n  /**\n  * @tokens Markdown Blockquote\n  */\n\n  --md-blockquote-margin-vertical: 1.5em; // @presenter Spacing\n  --md-blockquote-margin-horizontal: 0; // @presenter Spacing\n  --md-blockquote-padding-vertical: 0; // @presenter Spacing\n  --md-blockquote-padding-horizontal: calc(var(--spacing-unit) * 4); // @presenter Spacing\n  --md-blockquote-border-color: var(--border-color); // @presenter Color\n  --md-blockquote-background-color: transparent; // @presenter Color\n  --md-blockquote-border-left: 4px solid var(--md-blockquote-border-color); // @presenter Border\n  --md-blockquote-text-color: var(--text-color); // @presenter Color\n  --md-blockquote-box-shadow: none; // @presenter Shadow\n\n  /** \n  * @tokens Markdown Paragraph\n  */\n\n  --md-paragraph-margin-vertical: 10px; // @presenter Spacing\n  --md-paragraph-margin-horizontal: 0px; // @presenter Spacing\n\n  /**\n  * @tokens Markdown Table\n  */\n\n  --md-table-font-size: 14px; // @presenter FontSize\n  --md-table-margin-vertical: 20px; // @presenter Spacing\n  --md-table-background-color: transparent; // @presenter Color\n\n  --md-table-border-radius: var(--border-radius-lg); // @presenter BorderRadius\n  --md-table-border-width: 1px;\n  --md-table-border-color: var(--border-color); // @presenter Color\n\n  --md-table-stripe-background-color: var(--md-table-background-color); // @presenter Color\n\n  --md-table-cell-text-color: var(--text-color); // @presenter Color\n  --md-table-cell-padding: 12px; // @presenter Spacing\n\n  --md-table-head-background-color: var(--color-secondary-200); // @presenter Color\n  --md-table-head-text-color: var(--text-color); // @presenter Color\n  --md-table-head-font-weight: var(--font-weight-bold); // @presenter FontWeight\n\n  /**\n  * @tokens Markdown Horizontal Rule\n  */\n\n  --md-hr-background-color: transparent; // @presenter Color\n  --md-hr-border-color: var(--border-color); // @presenter Color\n  --md-hr-height: unset;\n  --md-hr-margin-vertical: 20px; // @presenter Spacing\n\n  /** \n  * @tokens Markdown List\n  */\n\n  --md-list-left-padding: 2rem; // @presenter Spacing\n  --md-list-margin: 1rem; // @presenter Spacing\n  --md-list-item-margin: 0.25rem; // @presenter Spacing\n  --md-list-item-style: inherit;\n\n  /** \n  * @tokens Markdown Numbered List\n  */\n\n  --md-numbered-list-number-display: none;\n  --md-numbered-list-item-style: var(--md-list-item-style);\n  --md-numbered-list-number-text-color: var(--color-secondary-100); // @presenter Color\n  --md-numbered-list-number-font-size: var(--font-size-base); // @presenter FontSize\n  --md-numbered-list-number-font-family: var(--font-size-base); // @presenter FontFamily\n  --md-numbered-list-number-font-weight: var(--font-weight-regular); // @presenter FontWeight\n  --md-numbered-list-number-background-color: var(--color-secondary-800); // @presenter Color\n  --md-numbered-list-number-border-radius: 10px; // @presenter BorderRadius\n  --md-numbered-list-number-margin-right: 5px; // @presenter Spacing\n  --md-numbered-list-number-padding: 0 5px; // @presenter Spacing\n\n  // @tokens End\n"], ["\n  /**\n  * @tokens Markdown Container\n  */\n\n  --md-container-max-width: 910px;\n  --md-container-padding-vertical: 25px; // @presenter Spacing\n  --md-container-padding-horizontal: 0px; // @presenter Spacing\n\n  /**\n  * @tokens Markdown Blockquote\n  */\n\n  --md-blockquote-margin-vertical: 1.5em; // @presenter Spacing\n  --md-blockquote-margin-horizontal: 0; // @presenter Spacing\n  --md-blockquote-padding-vertical: 0; // @presenter Spacing\n  --md-blockquote-padding-horizontal: calc(var(--spacing-unit) * 4); // @presenter Spacing\n  --md-blockquote-border-color: var(--border-color); // @presenter Color\n  --md-blockquote-background-color: transparent; // @presenter Color\n  --md-blockquote-border-left: 4px solid var(--md-blockquote-border-color); // @presenter Border\n  --md-blockquote-text-color: var(--text-color); // @presenter Color\n  --md-blockquote-box-shadow: none; // @presenter Shadow\n\n  /** \n  * @tokens Markdown Paragraph\n  */\n\n  --md-paragraph-margin-vertical: 10px; // @presenter Spacing\n  --md-paragraph-margin-horizontal: 0px; // @presenter Spacing\n\n  /**\n  * @tokens Markdown Table\n  */\n\n  --md-table-font-size: 14px; // @presenter FontSize\n  --md-table-margin-vertical: 20px; // @presenter Spacing\n  --md-table-background-color: transparent; // @presenter Color\n\n  --md-table-border-radius: var(--border-radius-lg); // @presenter BorderRadius\n  --md-table-border-width: 1px;\n  --md-table-border-color: var(--border-color); // @presenter Color\n\n  --md-table-stripe-background-color: var(--md-table-background-color); // @presenter Color\n\n  --md-table-cell-text-color: var(--text-color); // @presenter Color\n  --md-table-cell-padding: 12px; // @presenter Spacing\n\n  --md-table-head-background-color: var(--color-secondary-200); // @presenter Color\n  --md-table-head-text-color: var(--text-color); // @presenter Color\n  --md-table-head-font-weight: var(--font-weight-bold); // @presenter FontWeight\n\n  /**\n  * @tokens Markdown Horizontal Rule\n  */\n\n  --md-hr-background-color: transparent; // @presenter Color\n  --md-hr-border-color: var(--border-color); // @presenter Color\n  --md-hr-height: unset;\n  --md-hr-margin-vertical: 20px; // @presenter Spacing\n\n  /** \n  * @tokens Markdown List\n  */\n\n  --md-list-left-padding: 2rem; // @presenter Spacing\n  --md-list-margin: 1rem; // @presenter Spacing\n  --md-list-item-margin: 0.25rem; // @presenter Spacing\n  --md-list-item-style: inherit;\n\n  /** \n  * @tokens Markdown Numbered List\n  */\n\n  --md-numbered-list-number-display: none;\n  --md-numbered-list-item-style: var(--md-list-item-style);\n  --md-numbered-list-number-text-color: var(--color-secondary-100); // @presenter Color\n  --md-numbered-list-number-font-size: var(--font-size-base); // @presenter FontSize\n  --md-numbered-list-number-font-family: var(--font-size-base); // @presenter FontFamily\n  --md-numbered-list-number-font-weight: var(--font-weight-regular); // @presenter FontWeight\n  --md-numbered-list-number-background-color: var(--color-secondary-800); // @presenter Color\n  --md-numbered-list-number-border-radius: 10px; // @presenter BorderRadius\n  --md-numbered-list-number-margin-right: 5px; // @presenter Spacing\n  --md-numbered-list-number-padding: 0 5px; // @presenter Spacing\n\n  // @tokens End\n"])));
+var search = (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  /**\n      * @tokens Search\n      */\n\n  --search-highlight-text-color: #ffff03; // @presenter Color\n\n  /**\n      * @tokens Portal Search\n      */\n\n  --search-input-background-color: rgba(255, 255, 255, 0.1); // @presenter Color\n  --search-input-text-color: #fff; // @presenter Color\n\n  --search-input-border: none;\n  --search-input-border-radius: var(--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\n  --search-input-hover-background-color: rgba(255, 255, 255, 0.1); // @presenter Color\n  --search-input-hover-border: none; // @presenter Color\n  --search-input-placeholder-color: var(--search-input-text-color);\n\n  --search-popover-background-color: var(--background-color); // @presenter Color\n  --search-popover-border-radius: var(--search-input-border-radius); // @presenter BorderRadius\n  --search-popover-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),\n    0 8px 10px -5px rgba(0, 0, 0, 0.4); // @presenter BoxShadow\n  --search-popover-border: none;\n\n  --search-item-padding: 8px 24px;\n  --search-item-text-color: var(--text-color-secondary); // @presenter Color\n  --search-item-title-text-color: var(--text-color); // @presenter Color\n  --search-item-background-color: transparent; // @presenter Color\n  --search-item-active-text-color: var(--text-color-secondary); // @presenter Color\n  --search-item-active-title-text-color: var(--text-color); // @presenter Color\n  --search-item-active-background-color: rgba(0, 68, 212, 0.1); // @presenter Color\n\n  /**\n    * @tokens Sidebar Search\n    */\n\n  --sidebar-search-button-background-color: transparent; // @presenter Color\n  --sidebar-search-button-text-color: var(--text-color); // @presenter Color\n  --sidebar-search-button-border: var(--border-color);\n  --sidebar-search-button-border-radius: none; // @presenter BorderRadius\n  --sidebar-search-button-font-size: var(--font-size-small); // @presenter FontSize\n  --sidebar-search-button-font-family: var(--font-family-base); // @presenter FontFamily\n  --sidebar-search-button-line-height: 1.15em; // @presenter LineHeight\n  --sidebar-search-button-hover-background-color: transparent; // @presenter Color\n  --sidebar-search-button-hover-border: var(--border-color); // @presenter Color\n  --sidebar-search-button-active-background-color: transparent; // @presenter Color\n  --sidebar-search-button-active-border: var(--border-color); // @presenter Color\n\n  /**\n    * @tokens Search results modal\n    * @presenter Color\n    */\n\n  --search-modal-background: var(--background-color);\n  --search-modal-text-color: var(--text-color);\n  --search-modal-border: none;\n  --search-modal-box-shadow: none;\n\n  --search-modal-header-border-radius: 8px;\n  --search-modal-header-background-color: var(--color-secondary-100);\n  --search-modal-clear-button-background-color: var(--color-secondary-300);\n  --search-modal-clear-button-hover-background-color: var(--color-secondary-500);\n\n  // @tokens End\n"], ["\n  /**\n      * @tokens Search\n      */\n\n  --search-highlight-text-color: #ffff03; // @presenter Color\n\n  /**\n      * @tokens Portal Search\n      */\n\n  --search-input-background-color: rgba(255, 255, 255, 0.1); // @presenter Color\n  --search-input-text-color: #fff; // @presenter Color\n\n  --search-input-border: none;\n  --search-input-border-radius: var(--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\n  --search-input-hover-background-color: rgba(255, 255, 255, 0.1); // @presenter Color\n  --search-input-hover-border: none; // @presenter Color\n  --search-input-placeholder-color: var(--search-input-text-color);\n\n  --search-popover-background-color: var(--background-color); // @presenter Color\n  --search-popover-border-radius: var(--search-input-border-radius); // @presenter BorderRadius\n  --search-popover-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),\n    0 8px 10px -5px rgba(0, 0, 0, 0.4); // @presenter BoxShadow\n  --search-popover-border: none;\n\n  --search-item-padding: 8px 24px;\n  --search-item-text-color: var(--text-color-secondary); // @presenter Color\n  --search-item-title-text-color: var(--text-color); // @presenter Color\n  --search-item-background-color: transparent; // @presenter Color\n  --search-item-active-text-color: var(--text-color-secondary); // @presenter Color\n  --search-item-active-title-text-color: var(--text-color); // @presenter Color\n  --search-item-active-background-color: rgba(0, 68, 212, 0.1); // @presenter Color\n\n  /**\n    * @tokens Sidebar Search\n    */\n\n  --sidebar-search-button-background-color: transparent; // @presenter Color\n  --sidebar-search-button-text-color: var(--text-color); // @presenter Color\n  --sidebar-search-button-border: var(--border-color);\n  --sidebar-search-button-border-radius: none; // @presenter BorderRadius\n  --sidebar-search-button-font-size: var(--font-size-small); // @presenter FontSize\n  --sidebar-search-button-font-family: var(--font-family-base); // @presenter FontFamily\n  --sidebar-search-button-line-height: 1.15em; // @presenter LineHeight\n  --sidebar-search-button-hover-background-color: transparent; // @presenter Color\n  --sidebar-search-button-hover-border: var(--border-color); // @presenter Color\n  --sidebar-search-button-active-background-color: transparent; // @presenter Color\n  --sidebar-search-button-active-border: var(--border-color); // @presenter Color\n\n  /**\n    * @tokens Search results modal\n    * @presenter Color\n    */\n\n  --search-modal-background: var(--background-color);\n  --search-modal-text-color: var(--text-color);\n  --search-modal-border: none;\n  --search-modal-box-shadow: none;\n\n  --search-modal-header-border-radius: 8px;\n  --search-modal-header-background-color: var(--color-secondary-100);\n  --search-modal-clear-button-background-color: var(--color-secondary-300);\n  --search-modal-clear-button-hover-background-color: var(--color-secondary-500);\n\n  // @tokens End\n"])));
+var dropdown = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  --dropdown-font-size: 14px;\n  --dropdown-text-color: var(--text-color);\n\n  --dropdown-padding-vertical: 8px;\n  --dropdown-padding-left: 10px;\n  --dropdown-padding-right: 26px;\n  --dropdown-padding: var(--dropdown-padding-vertical) var(--dropdown-padding-right)\n    var(--dropdown-padding-vertical) var(--dropdown-padding-left);\n\n  --dropdown-border: none;\n"], ["\n  --dropdown-font-size: 14px;\n  --dropdown-text-color: var(--text-color);\n\n  --dropdown-padding-vertical: 8px;\n  --dropdown-padding-left: 10px;\n  --dropdown-padding-right: 26px;\n  --dropdown-padding: var(--dropdown-padding-vertical) var(--dropdown-padding-right)\n    var(--dropdown-padding-vertical) var(--dropdown-padding-left);\n\n  --dropdown-border: none;\n"])));
+var lastUpdated = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  --last-updated-text-color: var(--text-color);\n  --last-updated-font-size: var(--font-size-small);\n  --last-updated-font-family: var(--font-family-base);\n  --last-updated-line-height: var(--line-height-base);\n"], ["\n  --last-updated-text-color: var(--text-color);\n  --last-updated-font-size: var(--font-size-small);\n  --last-updated-font-family: var(--font-family-base);\n  --last-updated-line-height: var(--line-height-base);\n"])));
+var tile = (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  --wide-tile-background-color: var(--color-secondary-50);\n  --thin-tile-background-color: var(--color-secondary-50);\n"], ["\n  --wide-tile-background-color: var(--color-secondary-50);\n  --thin-tile-background-color: var(--color-secondary-50);\n"])));
+exports.styles = (0, styled_components_1.css)(templateObject_27 || (templateObject_27 = __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    ", "\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    ", "\n    ", "\n  }\n\n  :root.dark {\n    ", ";\n  }\n"])), baseColors, httpColors, responsePanelColors, typography, headingsTypography, common, admonition, buttons, sidebar, navbar, footer, logo, badges, toc, inputs, tooltip, code, links, markdown, search, dropdown, apiReferencePanels, apiReferenceDocs, lastUpdated, tile, loadProgressBar, darkColors_1.darkMode);
+exports.GlobalStyle = (0, styled_components_1.createGlobalStyle)(templateObject_28 || (templateObject_28 = __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, templateObject_27, templateObject_28;

package/hooks/useDefaultThemeSettings.d.ts

@@ -0,0 +1,2 @@
+import type { RawTheme } from '../mocks/types';
+export declare function useDefaultThemeSettings(): RawTheme['settings'];

package/hooks/useDefaultThemeSettings.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDefaultThemeSettings = void 0;
+var hooks_1 = require("../mocks/hooks");
+var constants_1 = require("../mocks/constants");
+function useDefaultThemeSettings() {
+    return (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME);
+}
+exports.useDefaultThemeSettings = useDefaultThemeSettings;

package/mocks/types.d.ts

@@ -1,3 +1,7 @@
 export declare type ActiveItem<T> = T;
 export declare type SearchDocument = any;
 export declare type OperationParameter = any;
+export interface RawTheme {
+    name: string;
+    settings: any;
+}

package/package.json

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

package/src/ColorModeSwitcher/ColorModeSwitcher.tsx

@@ -1,13 +1,12 @@
 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';
+import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
 
 export function ColorModeSwitcher(): JSX.Element | null {
-  const themeSettings = useThemeSettings(DEFAULT_THEME_NAME);
+  const themeSettings = useDefaultThemeSettings();
   const colorMode = themeSettings.colorMode;
   const [activeColorMode, setActiveColorMode] = useState('');
 

package/src/Footer/Footer.tsx

@@ -5,16 +5,15 @@ import type { NavGroupRecord, ResolvedNavItem } from '@theme/types/portal';
 
 import { FooterColumns } from '@theme/Footer/FooterColumns';
 import { FooterCopyright } from '@theme/Footer/FooterCopyright';
-import { useThemeSettings } from '@portal/hooks';
-import { DEFAULT_THEME_NAME } from '@portal/constants';
 import { isEmptyArray } from '@theme/utils';
+import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
 
 interface FooterProps {
   data: NavGroupRecord;
 }
 
 export function Footer({ data: { columns, copyrightText } }: FooterProps): JSX.Element | null {
-  const { footer } = useThemeSettings(DEFAULT_THEME_NAME);
+  const { footer } = useDefaultThemeSettings();
 
   if (isEmptyArray(columns) || !copyrightText || footer?.hide) {
     return null;

package/src/LastUpdated/LastUpdated.tsx

@@ -2,15 +2,14 @@ import React from 'react';
 import styled from 'styled-components';
 import { format } from 'timeago.js';
 
-import { useThemeSettings } from '@portal/hooks';
-import { DEFAULT_THEME_NAME } from '@portal/constants';
+import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
 
 export interface LastUpdatedProps {
   lastModified: string | Date;
 }
 
 export function LastUpdated({ lastModified }: LastUpdatedProps): JSX.Element | null {
-  const { lastUpdatedBlock } = useThemeSettings(DEFAULT_THEME_NAME);
+  const { lastUpdatedBlock } = useDefaultThemeSettings();
 
   if (lastUpdatedBlock?.hide) {
     return null;

package/src/Markdown/CodeSample/CodeSample.tsx

@@ -2,38 +2,26 @@ import React, { useState } from 'react';
 import styled, { css } from 'styled-components';
 
 import { ClipboardService } from '@theme/utils/ClipboardService';
-
-export interface MdCopyCodeProps {
-  enabled?: boolean;
-  buttonText?: string;
-  tooltipText?: string;
-  toasterText?: string;
-  toasterDuration?: number;
-}
+import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
 
 export type CodeSampleProps = {
   language: string;
   highlighted: string;
   rawContent: string;
-  copyCodeSnippet: MdCopyCodeProps;
 };
 
 const defaultCopyCodeSnippet = {
-  enabled: true,
+  hide: false,
   buttonText: 'Copy',
   tooltipText: 'Copy the code snippet',
   toasterText: 'Copied',
   toasterDuration: 1500,
 };
 
-export function CodeSample({
-  rawContent,
-  highlighted,
-  language,
-  copyCodeSnippet,
-}: CodeSampleProps): JSX.Element {
+export function CodeSample({ rawContent, highlighted, language }: CodeSampleProps): JSX.Element {
   const langClassName = language ? `language-${language}` : '';
-  const copyCodeProps = { ...defaultCopyCodeSnippet, ...copyCodeSnippet };
+  const { copyCodeSnippet } = useDefaultThemeSettings();
+  const copyCodeProps = { ...copyCodeSnippet, ...defaultCopyCodeSnippet };
 
   const [isCopied, setIsCopied] = useState(false);
 
@@ -45,7 +33,7 @@ export function CodeSample({
 
   return (
     <Wrapper className="code-sample" data-component-name="Markdown/CodeSample/CodeSample">
-      {copyCodeProps.enabled && (
+      {!copyCodeProps.hide && (
         <CodeSampleButtonContainer onClick={() => copyCode(rawContent)}>
           {!isCopied && (
             <CopyCodeButton title={copyCodeProps.tooltipText}>

package/src/Navbar/Navbar.tsx

@@ -3,13 +3,12 @@ import styled from 'styled-components';
 
 import type { ResolvedConfigLinks } from '@theme/types/portal';
 
-import { useThemeSettings } from '@portal/hooks';
-import { DEFAULT_THEME_NAME } from '@portal/constants';
 import { NavbarMenu } from '@theme/Navbar';
 import { useMobileMenu } from '@theme/hooks/useMobileMenu';
 import { MobileNavbarMenuButton } from '@theme/Navbar/MobileNavbarMenuButton';
 import { MobileNavbarMenu } from '@theme/Navbar/MobileNavbarMenu';
 import { ColorModeSwitcher } from '@theme/ColorModeSwitcher/ColorModeSwitcher';
+import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
 
 interface NavbarProps {
   menu: ResolvedConfigLinks;
@@ -20,7 +19,7 @@ interface NavbarProps {
 
 export function Navbar({ menu, logo, search, profile }: NavbarProps): JSX.Element | null {
   const [isOpen, setIsOpen] = useMobileMenu(false);
-  const { search: searchSettings, navbar } = useThemeSettings(DEFAULT_THEME_NAME);
+  const { search: searchSettings, navbar } = useDefaultThemeSettings();
   const hideSearch =
     searchSettings?.hide || (searchSettings?.placement && searchSettings?.placement !== 'navbar');
 

package/src/PageNavigation/NextPageLink.tsx

@@ -3,9 +3,9 @@ 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 { useSidebarSiblingsData } from '@portal/hooks';
 import { Button } from '@theme/Button/Button';
+import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
 
 interface NextPageType {
   nextPage?: ResolvedNavItemWithLink | null;
@@ -13,7 +13,7 @@ interface NextPageType {
 
 export function NextPageLink(): JSX.Element {
   const { nextPage }: NextPageType = useSidebarSiblingsData() || {};
-  const { navigation } = useThemeSettings(DEFAULT_THEME_NAME);
+  const { navigation } = useDefaultThemeSettings();
 
   if (!nextPage || navigation?.hide || navigation?.nextPageLink?.hide) {
     return <div>&nbsp;</div>;

package/src/PageNavigation/PageNavigation.tsx

@@ -3,8 +3,7 @@ import styled from 'styled-components';
 
 import { PreviousPageLink } from '@theme/PageNavigation/PreviousPageLink';
 import { NextPageLink } from '@theme/PageNavigation/NextPageLink';
-import { useThemeSettings } from '@portal/hooks';
-import { DEFAULT_THEME_NAME } from '@portal/constants';
+import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
 
 type PageNavigationProps = {
   showPrevButton?: boolean;
@@ -15,7 +14,7 @@ export function PageNavigation({
   showPrevButton = true,
   showNextButton = true,
 }: PageNavigationProps): JSX.Element | null {
-  const { navigation } = useThemeSettings(DEFAULT_THEME_NAME);
+  const { navigation } = useDefaultThemeSettings();
 
   if (navigation?.hide) {
     return null;

package/src/PageNavigation/PreviousPageLink.tsx

@@ -3,8 +3,8 @@ 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 { useSidebarSiblingsData } from '@portal/hooks';
+import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
 import { Button } from '@theme/Button/Button';
 
 interface PreviousPageType {
@@ -13,7 +13,7 @@ interface PreviousPageType {
 
 export function PreviousPageLink(): JSX.Element {
   const { prevPage }: PreviousPageType = useSidebarSiblingsData() || {};
-  const { navigation } = useThemeSettings(DEFAULT_THEME_NAME);
+  const { navigation } = useDefaultThemeSettings();
 
   if (!prevPage || navigation?.hide || navigation?.previousPageLink?.hide) {
     return <div>&nbsp;</div>;

package/src/Sidebar/SidebarLayout.tsx

@@ -5,9 +5,8 @@ import { Sidebar } from '@theme/Sidebar/Sidebar';
 import { useMobileMenu } from '@theme/hooks/useMobileMenu';
 import { MobileSidebarButton } from '@theme/Sidebar/MobileSidebarButton';
 import { MenuContainer } from '@theme/Sidebar/MenuContainer';
-import { useThemeSettings } from '@portal/hooks';
-import { DEFAULT_THEME_NAME } from '@portal/constants';
 import { SidebarSearch } from '@theme/Search/SidebarSearch';
+import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
 
 interface SidebarLayoutProps {
   versions: React.ReactNode;
@@ -17,7 +16,7 @@ interface SidebarLayoutProps {
 export function SidebarLayout({ versions, menu }: SidebarLayoutProps): JSX.Element | null {
   const [isOpen, setIsOpen] = useMobileMenu();
   const toggleMenu = () => setIsOpen(!isOpen);
-  const { search, sidebar } = useThemeSettings(DEFAULT_THEME_NAME);
+  const { search, sidebar } = useDefaultThemeSettings();
 
   if (sidebar?.hide) {
     return null;

package/src/TableOfContent/TableOfContent.tsx

@@ -6,9 +6,8 @@ import type { MdHeading } from '@theme/types/portal';
 import { getDisplayedHeadingsIds, getDisplayedHeadings, getLeastDepth } from './utils';
 
 import { useFullHeight } from '@theme/hooks/useFullHeight';
-import { useThemeSettings } from '@portal/hooks';
 import { useActiveHeading } from '@theme/hooks/useActiveHeading';
-import { DEFAULT_THEME_NAME } from '@portal/constants';
+import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
 
 interface TableOfContentProps {
   headings?: Array<MdHeading | null> | null | undefined;
@@ -21,7 +20,7 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
 
   const sidebar = useRef<HTMLDivElement | null>(null);
   useFullHeight(sidebar);
-  const { toc } = useThemeSettings(DEFAULT_THEME_NAME);
+  const { toc } = useDefaultThemeSettings();
 
   const displayedHeadings = getDisplayedHeadings(headings, tocMaxDepth);
   const leastDepth = getLeastDepth(displayedHeadings);

package/src/globalStyle.ts

@@ -1647,6 +1647,59 @@ const toc = css`
   // @tokens End
 `;
 
+const loadProgressBar = css`
+
+  /**
+    * @tokens Load progress bar
+    */
+
+  --load-progress-bar-color: var(--color-primary-500); // @presenter Color
+  --load-progress-bar-shadow: 0 0 10px var(--load-progress-bar-color), 0 0 5px var(--load-progress-bar-color); // @presenter BoxShadow
+  --load-progress-bar-height: 2px; // @presenter Height
+
+  // @tokens End
+ 
+  /* Make clicks pass-through */
+  #nprogress {
+    pointer-events: none;
+  }
+
+  #nprogress .bar {
+    background: var(--load-progress-bar-color);
+
+    position: fixed;
+    z-index: 1031;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: var(--load-progress-bar-height);
+  }
+
+  #nprogress .peg {
+    display: block;
+    position: absolute;
+    right: 0px;
+    width: 100px;
+    height: 100%;
+    box-shadow: var(--load-progress-bar-shadow);
+    opacity: 1.0;
+
+    -webkit-transform: rotate(3deg) translate(0px, -4px);
+        -ms-transform: rotate(3deg) translate(0px, -4px);
+            transform: rotate(3deg) translate(0px, -4px);
+  }
+
+  .nprogress-custom-parent {
+    overflow: hidden;
+    position: relative;
+  }
+
+  .nprogress-custom-parent #nprogress .bar {
+    position: absolute;
+  }
+`
+
 const inputs = css`
   /**
     * @tokens Inputs
@@ -1879,6 +1932,7 @@ export const styles = css`
     ${apiReferenceDocs}
     ${lastUpdated}
     ${tile}
+    ${loadProgressBar}
   }
 
   :root.dark {

package/src/hooks/useDefaultThemeSettings.ts

@@ -0,0 +1,8 @@
+import type { RawTheme } from '@portal/types';
+
+import { useThemeSettings } from '@portal/hooks';
+import { DEFAULT_THEME_NAME } from '@portal/constants';
+
+export function useDefaultThemeSettings(): RawTheme['settings'] {
+  return useThemeSettings(DEFAULT_THEME_NAME);
+}

package/src/mocks/types.ts

@@ -1,3 +1,7 @@
 export type ActiveItem<T> = T;
 export type SearchDocument = any;
 export type OperationParameter = any;
+export interface RawTheme {
+  name: string;
+  settings: any;
+}