@redocly/theme 0.1.16 → 0.1.21

package/Search/SidebarSearch.d.ts

@@ -0,0 +1,2 @@
+import { Search } from '../Search/Search';
+export declare const SidebarSearch: import("styled-components").StyledComponent<typeof Search, any, {}, never>;

package/Search/SidebarSearch.js

@@ -0,0 +1,15 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarSearch = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var Search_1 = require("../Search/Search");
+var Popover_1 = require("../Search/Popover");
+exports.SidebarSearch = (0, styled_components_1.default)(Search_1.Search)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  --search-input-text-color: var(--sidebar-item-active-color);\n\n  ", " {\n    right: unset;\n    top: 100%;\n  }\n"], ["\n  --search-input-text-color: var(--sidebar-item-active-color);\n\n  ", " {\n    right: unset;\n    top: 100%;\n  }\n"])), Popover_1.Popover);
+var templateObject_1;

package/Sidebar/MenuGroup.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuGroup = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
-var Arrow_1 = require("../ui/Arrow");
+var ArrowIcon_1 = require("../icons/ArrowIcon/ArrowIcon");
 var MenuLinkItem_1 = require("../Sidebar/MenuLinkItem");
 var MenuItemLabel_1 = require("../Sidebar/MenuItemLabel");
 var SeparatorLine_1 = require("../Sidebar/SeparatorLine");
@@ -28,5 +28,5 @@ exports.MenuGroup = MenuGroup;
 var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
 var MenuWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-left: var(--sidebar-spacing-offset-nesting);\n"], ["\n  padding-left: var(--sidebar-spacing-offset-nesting);\n"])));
 var MenuGroupLabel = (0, styled_components_1.default)(MenuItemLabel_1.MenuItemLabel)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-left: var(--sidebar-spacing-padding-horizontal);\n  cursor: ", ";\n"], ["\n  padding-left: var(--sidebar-spacing-padding-horizontal);\n  cursor: ", ";\n"])), function (props) { return (props.isAlwaysExpanded ? 'default' : 'pointer'); });
-var MenuGroupArrow = (0, styled_components_1.default)(Arrow_1.Arrow)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-right: calc(var(--sidebar-spacing-unit) / 2);\n"], ["\n  margin-right: calc(var(--sidebar-spacing-unit) / 2);\n"])));
+var MenuGroupArrow = (0, styled_components_1.default)(ArrowIcon_1.ArrowIcon)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-right: calc(var(--sidebar-spacing-unit) / 2);\n"], ["\n  margin-right: calc(var(--sidebar-spacing-unit) / 2);\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Sidebar/SidebarLayout.js

@@ -14,12 +14,17 @@ 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");
 function SidebarLayout(_a) {
     var versions = _a.versions, menu = _a.menu;
     var _b = (0, useMobileMenu_1.useMobileMenu)(), isOpen = _b[0], setIsOpen = _b[1];
     var toggleMenu = function () { return setIsOpen(!isOpen); };
+    var _c = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME).search || {}, hide = _c.hide, placement = _c.placement;
     return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/SidebarLayout" },
         react_1.default.createElement(MobileSidebarButton_1.MobileSidebarButton, { opened: isOpen, onClick: toggleMenu }),
+        !hide && placement === 'sidebar' ? react_1.default.createElement(SidebarSearch_1.SidebarSearch, null) : null,
         react_1.default.createElement(Sidebar_1.Sidebar, { animate: true, opened: isOpen },
             versions,
             react_1.default.createElement(MenuContainer_1.MenuContainer, null, menu))));

package/TableOfContent/TableOfContent.js

@@ -34,12 +34,19 @@ exports.TableOfContent = void 0;
 var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var useFullHeight_1 = require("../hooks/useFullHeight");
+var hooks_1 = require("../mocks/hooks");
 var useActiveHeading_1 = require("../hooks/useActiveHeading");
+var constants_1 = require("../mocks/constants");
 function TableOfContent(props) {
+    var _a, _b, _c;
     var headings = props.headings, tocMaxDepth = props.tocMaxDepth, contentWrapper = props.contentWrapper;
     var sidebar = (0, react_1.useRef)(null);
     (0, useFullHeight_1.useFullHeight)(sidebar);
     var activeHeadingId = (0, useActiveHeading_1.useActiveHeading)(contentWrapper);
+    var themeSettings = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME).themeSettings;
+    if ((_a = themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.toc) === null || _a === void 0 ? void 0 : _a.hide) {
+        return null;
+    }
     if (headings && headings.length === 1 && (!headings[0] || headings[0].depth === 1)) {
         return null;
     }
@@ -48,7 +55,7 @@ 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, "On this page"),
+            react_1.default.createElement(TocHeader, null, ((_c = (_b = themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.toc) === null || _b === void 0 ? void 0 : _b.header) === null || _c === void 0 ? void 0 : _c.label) || 'On this page'),
             headings.map(function (heading, idx) {
                 // TODO: not sure about !heading
                 if (!heading) {

package/Typography/CompactTypography.d.ts

@@ -0,0 +1,11 @@
+export declare const CompactTypography: import("styled-components").StyledComponent<"p", any, {
+    'data-component-name': string;
+} & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+    color?: string | undefined;
+    mt?: string | undefined;
+    mb?: string | undefined;
+} & {
+    mt: string;
+    mb: string;
+    'data-component-name': string;
+}, "data-component-name" | "mt" | "mb">;

package/Typography/CompactTypography.js

@@ -0,0 +1,18 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompactTypography = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var Typography_1 = require("../Typography/Typography");
+exports.CompactTypography = (0, styled_components_1.default)(Typography_1.Typography).attrs(function () { return ({
+    mt: '0em',
+    mb: '0em',
+    'data-component-name': 'Typography/CompactTypography',
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+var templateObject_1;

package/Typography/Emphasis.d.ts

@@ -0,0 +1,3 @@
+export declare const Emphasis: import("styled-components").StyledComponent<"strong", any, {
+    'data-component-name': string;
+}, "data-component-name">;

package/Typography/Emphasis.js

@@ -0,0 +1,15 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Emphasis = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.Emphasis = styled_components_1.default.strong.attrs(function () { return ({
+    'data-component-name': 'Typography/Emphasis',
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-weight: var(--font-weight-bold);\n"], ["\n  font-weight: var(--font-weight-bold);\n"])));
+var templateObject_1;

package/Typography/H1.d.ts

@@ -0,0 +1,3 @@
+export declare const H1: import("styled-components").StyledComponent<"h1", any, {
+    'data-component-name': string;
+}, "data-component-name">;

package/Typography/H1.js

@@ -0,0 +1,16 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.H1 = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var utils_1 = require("../utils");
+exports.H1 = styled_components_1.default.h1.attrs(function () { return ({
+    'data-component-name': 'Headings/H1',
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: var(--color-content);\n  margin: 0 0 25px;\n\n  ", ";\n"], ["\n  color: var(--color-content);\n  margin: 0 0 25px;\n\n  ", ";\n"])), (0, utils_1.typography)('h1', 'h'));
+var templateObject_1;

package/Typography/H2.d.ts

@@ -0,0 +1,3 @@
+export declare const H2: import("styled-components").StyledComponent<"h2", any, {
+    'data-component-name': string;
+}, "data-component-name">;

package/Typography/H2.js

@@ -0,0 +1,16 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.H2 = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var utils_1 = require("../utils");
+exports.H2 = styled_components_1.default.h2.attrs(function () { return ({
+    'data-component-name': 'Headings/H2',
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: var(--color-content);\n  margin: 0 0 20px;\n\n  ", ";\n"], ["\n  color: var(--color-content);\n  margin: 0 0 20px;\n\n  ", ";\n"])), (0, utils_1.typography)('h2', 'h'));
+var templateObject_1;

package/Typography/H3.d.ts

@@ -0,0 +1,3 @@
+export declare const H3: import("styled-components").StyledComponent<"h3", any, {
+    'data-component-name': string;
+}, "data-component-name">;

package/Typography/H3.js

@@ -0,0 +1,16 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.H3 = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var utils_1 = require("../utils");
+exports.H3 = styled_components_1.default.h3.attrs(function () { return ({
+    'data-component-name': 'Headings/H3',
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: var(--color-content);\n\n  ", ";\n"], ["\n  color: var(--color-content);\n\n  ", ";\n"])), (0, utils_1.typography)('h3', 'h'));
+var templateObject_1;

package/Typography/SectionHeader.d.ts

@@ -0,0 +1 @@
+export declare const SectionHeader: import("styled-components").StyledComponent<"h2", any, {}, never>;

package/Typography/SectionHeader.js

@@ -0,0 +1,13 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionHeader = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.SectionHeader = styled_components_1.default.h2(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: var(--h-color);\n  font-size: 1.75em;\n  font-weight: var(--font-weight-regular);\n  text-align: center;\n  margin: 2.65em 0;\n  padding: 0 20px;\n  font-family: var(--h-font-family);\n"], ["\n  color: var(--h-color);\n  font-size: 1.75em;\n  font-weight: var(--font-weight-regular);\n  text-align: center;\n  margin: 2.65em 0;\n  padding: 0 20px;\n  font-family: var(--h-font-family);\n"])));
+var templateObject_1;

package/Typography/Typography.d.ts

@@ -0,0 +1,8 @@
+import { TypographyProps } from 'styled-system';
+export declare const Typography: import("styled-components").StyledComponent<"p", any, {
+    'data-component-name': string;
+} & TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+    color?: string | undefined;
+    mt?: string | undefined;
+    mb?: string | undefined;
+}, "data-component-name">;

package/Typography/Typography.js

@@ -0,0 +1,22 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Typography = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var styled_system_1 = require("styled-system");
+exports.Typography = styled_components_1.default.p.attrs(function () { return ({
+    'data-component-name': 'Typography/Typography',
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: var(--font-size-base);\n  font-family: var(--font-family-base);\n  line-height: var(--line-height-base);\n  color: var(--color-content);\n  ", ";\n  margin-top: ", ";\n  margin-bottom: ", ";\n  ", "\n"], ["\n  font-size: var(--font-size-base);\n  font-family: var(--font-family-base);\n  line-height: var(--line-height-base);\n  color: var(--color-content);\n  ", ";\n  margin-top: ", ";\n  margin-bottom: ", ";\n  ", "\n"])), styled_system_1.color, function (_a) {
+    var mt = _a.mt;
+    return mt || '1em';
+}, function (_a) {
+    var mb = _a.mb;
+    return mb || '1em';
+}, styled_system_1.typography);
+var templateObject_1;

package/Typography/index.d.ts

@@ -0,0 +1,7 @@
+export * from '../Typography/H1';
+export * from '../Typography/H2';
+export * from '../Typography/H3';
+export * from '../Typography/Emphasis';
+export * from '../Typography/SectionHeader';
+export * from '../Typography/Typography';
+export * from '../Typography/CompactTypography';

package/{Headings → Typography}/index.js

@@ -14,4 +14,10 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("../Headings/Headings"), exports);
+__exportStar(require("../Typography/H1"), exports);
+__exportStar(require("../Typography/H2"), exports);
+__exportStar(require("../Typography/H3"), exports);
+__exportStar(require("../Typography/Emphasis"), exports);
+__exportStar(require("../Typography/SectionHeader"), exports);
+__exportStar(require("../Typography/Typography"), exports);
+__exportStar(require("../Typography/CompactTypography"), exports);

package/globalStyle.js

@@ -22,7 +22,7 @@ var links = (0, styled_components_1.css)(templateObject_13 || (templateObject_13
 var openapiAndGraphqlDocs = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  /* === ref docs and graphql docs specific === */\n\n  /**\n    * @tokens OpenAPI-GraphQL Logo\n    */\n  --logo-max-height: 285px;\n  --logo-max-width: 285px;\n  --logo-padding: 2px;\n\n  /**\n    * @tokens OpenAPI-GraphQL Layout\n    */\n  --layout-buttons-top-offset: 20px; // @presenter Spacing\n  --layout-buttons-height: 36px; // @presenter Spacing\n  --layout-buttons-width: 36px; // @presenter Spacing\n\n  --layout-stacked-small-max-width: 90%;\n  --layout-stacked-medium-max-width: 75%;\n  --layout-stacked-large-max-width: 1200px;\n\n  --layout-three-panel-small-max-width: 100%;\n  --layout-three-panel-medium-max-width: 100%;\n  --layout-three-panel-large-max-width: 1800px;\n\n  --layout-middle-panel-small-max-width: none;\n  --layout-middle-panel-medium-max-width: none;\n  --layout-middle-panel-large-max-width: none;\n\n  /**\n    * @tokens OpenAPI-GraphQL Schema\n    */\n  --schema-lines-color: var(--global-border-color); // @presenter Color\n  --schema-default-details-width: 70%;\n  --schema-type-name-color: var(--color-content-secondary); // @presenter Color\n  --schema-type-title-color: var(--color-content-secondary); // @presenter Color\n  --schema-require-label-color: var(--color-error-900); // @presenter Color\n  --schema-labels-text-size: 0.9em; // @presenter Spacing\n  --schema-nesting-spacing: 1em; // @presenter Spacing\n  --schema-nested-background-color: var(--color-secondary-200); // @presenter Color\n  --schema-chevron-color: var(--color-content); // @presenter Color\n  --schema-chevron-size: 9px; // @presenter Spacing\n\n  --schema-controls-color: var(--color-emphasis-800); // @presenter Color\n  --schema-controls-background-color: var(--color-secondary-400); // @presenter Color\n  --schema-controls-hover-background-color: var(--color-secondary-500); // @presenter Color\n  --schema-controls-border-color: var(--color-secondary-600); // @presenter Color\n\n  --field-name-font-size: var(--code-font-size); // @presenter FontSize\n  --field-name-font-family: var(--code-font-family); // @presenter FontFamily\n  --field-example-color: var(--color-content); // @presenter Color\n  --field-example-background-color: var(--inline-code-background-color); // @presenter Color\n  --field-constraint-color: var(--color-content); // @presenter Color\n  --field-constraint-background-color: var(--inline-code-background-color); // @presenter Color\n\n  /**\n    * @tokens OpenAPI-GraphQL Search\n    * @presenter Color\n    */\n  --search-input-border-bottom: #e6e6e6;\n  --search-results-background-color: #f2f2f2;\n  --search-results-active-item-background-color: #e6e6e6;\n  --search-marked-background-color: #ffff03;\n  --search-popup-header-background-color: var(--color-secondary-200);\n  --search-clear-button-background-color: var(--color-secondary-400);\n  --search-clear-button-hover-background-color: var(--color-secondary-600);\n\n  /*\n    * @tokens OpenAPI-GraphQL Badge\n    */\n  --badge-color: var(--color-emphasis-100); // @presenter Color\n  --badge-background-color: var(--color-primary-500); // @presenter Color\n  --deprecated-badge-color: var(--color-emphasis-100); // @presenter Color\n  --deprecated-badge-background-color: var(--color-warning-500); // @presenter Color\n\n  --http-badge-font-size: 12px; // @presenter FontSize\n  --http-badge-line-height: 20px; // @presenter LineHeight\n  --http-badge-font-family: var(--code-font-family); // @presenter FontFamily\n  --http-badge-font-weight: var(--font-weight-bold); // @presenter FontWeight\n  --http-badge-border-radius: 16px; // @presenter BorderRadius\n  --http-badge-color: var(--color-content-inverse); // @presenter Color\n\n  --http-badge-menu-font-size: 8px; // @presenter FontSize\n  --http-badge-menu-line-height: 14px; // @presenter FontSize\n\n  /**\n    * @tokens OpenAPI-GraphQL Other\n    */\n  --recursive-label-color: var(--color-warning-500); // @presenter Color\n  --spinner-color: var(--color-primary-500); // @presenter Color\n  --linear-progress-color: var(--color-accent-500); // @presenter Color\n  --linear-progress-background-color: var(--color-accent-100); // @presenter Color\n\n  /* Floating action button */\n  --fab-color: #0065fb; // @presenter Color\n  --fab-background-color: #f2f2f2; // @presenter Color\n\n  // @tokens End\n"], ["\n  /* === ref docs and graphql docs specific === */\n\n  /**\n    * @tokens OpenAPI-GraphQL Logo\n    */\n  --logo-max-height: 285px;\n  --logo-max-width: 285px;\n  --logo-padding: 2px;\n\n  /**\n    * @tokens OpenAPI-GraphQL Layout\n    */\n  --layout-buttons-top-offset: 20px; // @presenter Spacing\n  --layout-buttons-height: 36px; // @presenter Spacing\n  --layout-buttons-width: 36px; // @presenter Spacing\n\n  --layout-stacked-small-max-width: 90%;\n  --layout-stacked-medium-max-width: 75%;\n  --layout-stacked-large-max-width: 1200px;\n\n  --layout-three-panel-small-max-width: 100%;\n  --layout-three-panel-medium-max-width: 100%;\n  --layout-three-panel-large-max-width: 1800px;\n\n  --layout-middle-panel-small-max-width: none;\n  --layout-middle-panel-medium-max-width: none;\n  --layout-middle-panel-large-max-width: none;\n\n  /**\n    * @tokens OpenAPI-GraphQL Schema\n    */\n  --schema-lines-color: var(--global-border-color); // @presenter Color\n  --schema-default-details-width: 70%;\n  --schema-type-name-color: var(--color-content-secondary); // @presenter Color\n  --schema-type-title-color: var(--color-content-secondary); // @presenter Color\n  --schema-require-label-color: var(--color-error-900); // @presenter Color\n  --schema-labels-text-size: 0.9em; // @presenter Spacing\n  --schema-nesting-spacing: 1em; // @presenter Spacing\n  --schema-nested-background-color: var(--color-secondary-200); // @presenter Color\n  --schema-chevron-color: var(--color-content); // @presenter Color\n  --schema-chevron-size: 9px; // @presenter Spacing\n\n  --schema-controls-color: var(--color-emphasis-800); // @presenter Color\n  --schema-controls-background-color: var(--color-secondary-400); // @presenter Color\n  --schema-controls-hover-background-color: var(--color-secondary-500); // @presenter Color\n  --schema-controls-border-color: var(--color-secondary-600); // @presenter Color\n\n  --field-name-font-size: var(--code-font-size); // @presenter FontSize\n  --field-name-font-family: var(--code-font-family); // @presenter FontFamily\n  --field-example-color: var(--color-content); // @presenter Color\n  --field-example-background-color: var(--inline-code-background-color); // @presenter Color\n  --field-constraint-color: var(--color-content); // @presenter Color\n  --field-constraint-background-color: var(--inline-code-background-color); // @presenter Color\n\n  /**\n    * @tokens OpenAPI-GraphQL Search\n    * @presenter Color\n    */\n  --search-input-border-bottom: #e6e6e6;\n  --search-results-background-color: #f2f2f2;\n  --search-results-active-item-background-color: #e6e6e6;\n  --search-marked-background-color: #ffff03;\n  --search-popup-header-background-color: var(--color-secondary-200);\n  --search-clear-button-background-color: var(--color-secondary-400);\n  --search-clear-button-hover-background-color: var(--color-secondary-600);\n\n  /*\n    * @tokens OpenAPI-GraphQL Badge\n    */\n  --badge-color: var(--color-emphasis-100); // @presenter Color\n  --badge-background-color: var(--color-primary-500); // @presenter Color\n  --deprecated-badge-color: var(--color-emphasis-100); // @presenter Color\n  --deprecated-badge-background-color: var(--color-warning-500); // @presenter Color\n\n  --http-badge-font-size: 12px; // @presenter FontSize\n  --http-badge-line-height: 20px; // @presenter LineHeight\n  --http-badge-font-family: var(--code-font-family); // @presenter FontFamily\n  --http-badge-font-weight: var(--font-weight-bold); // @presenter FontWeight\n  --http-badge-border-radius: 16px; // @presenter BorderRadius\n  --http-badge-color: var(--color-content-inverse); // @presenter Color\n\n  --http-badge-menu-font-size: 8px; // @presenter FontSize\n  --http-badge-menu-line-height: 14px; // @presenter FontSize\n\n  /**\n    * @tokens OpenAPI-GraphQL Other\n    */\n  --recursive-label-color: var(--color-warning-500); // @presenter Color\n  --spinner-color: var(--color-primary-500); // @presenter Color\n  --linear-progress-color: var(--color-accent-500); // @presenter Color\n  --linear-progress-background-color: var(--color-accent-100); // @presenter Color\n\n  /* Floating action button */\n  --fab-color: #0065fb; // @presenter Color\n  --fab-background-color: #f2f2f2; // @presenter Color\n\n  // @tokens End\n"])));
 var footer = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  /**\n    * @tokens Footer\n    */\n  --footer-background-color: var(--color-primary-500); // @presenter Color\n  --footer-text-color: #fff; // @presenter Color\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Footer\n    */\n  --footer-background-color: var(--color-primary-500); // @presenter Color\n  --footer-text-color: #fff; // @presenter Color\n\n  // @tokens End\n"])));
 var logo = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  /**\n    * @tokens Logo\n    */\n  --logo-height: 2rem; // @presenter Spacing\n  --logo-margin: var(--sidebar-margin-left); // @presenter Spacing\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Logo\n    */\n  --logo-height: 2rem; // @presenter Spacing\n  --logo-margin: var(--sidebar-margin-left); // @presenter Spacing\n\n  // @tokens End\n"])));
-var navbar = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __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\n  /**\n    * @tokens Navbar Item\n    * */\n  --navbar-item-font-size: 16px; // @presenter FontSize\n  --navbar-item-margin-horizontal: 0; // @presenter Spacing\n  --navbar-item-margin-vertical: 0; // @presenter Spacing\n  --navbar-item-border-radius: 10px; // @presenter BorderRadius\n  --navbar-item-font-weight: var(--font-weight-bold); // @presenter FontWeight\n  --navbar-item-active-background-color: #1b75fa; // @presenter Color\n  --navbar-item-active-text-color: var(--navbar-text-color); // @presenter Color\n  --navbar-item-active-text-decoration: 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\n  /**\n    * @tokens Navbar Item\n    * */\n  --navbar-item-font-size: 16px; // @presenter FontSize\n  --navbar-item-margin-horizontal: 0; // @presenter Spacing\n  --navbar-item-margin-vertical: 0; // @presenter Spacing\n  --navbar-item-border-radius: 10px; // @presenter BorderRadius\n  --navbar-item-font-weight: var(--font-weight-bold); // @presenter FontWeight\n  --navbar-item-active-background-color: #1b75fa; // @presenter Color\n  --navbar-item-active-text-color: var(--navbar-text-color); // @presenter Color\n  --navbar-item-active-text-decoration: none;\n\n  // @tokens End\n"])));
+var navbar = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __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-drowpdown-shadow: 4px 4px 15px -2px rgba(0, 0, 0, 0.5);\n\n  /**\n    * @tokens Navbar Item\n    * */\n  --navbar-item-font-size: 16px; // @presenter FontSize\n  --navbar-item-margin-horizontal: 0; // @presenter Spacing\n  --navbar-item-margin-vertical: 0; // @presenter Spacing\n  --navbar-item-border-radius: 10px; // @presenter BorderRadius\n  --navbar-item-font-weight: var(--font-weight-bold); // @presenter FontWeight\n  --navbar-item-active-background-color: #1b75fa; // @presenter Color\n  --navbar-item-active-text-color: var(--navbar-text-color); // @presenter Color\n  --navbar-item-active-text-decoration: 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-drowpdown-shadow: 4px 4px 15px -2px rgba(0, 0, 0, 0.5);\n\n  /**\n    * @tokens Navbar Item\n    * */\n  --navbar-item-font-size: 16px; // @presenter FontSize\n  --navbar-item-margin-horizontal: 0; // @presenter Spacing\n  --navbar-item-margin-vertical: 0; // @presenter Spacing\n  --navbar-item-border-radius: 10px; // @presenter BorderRadius\n  --navbar-item-font-weight: var(--font-weight-bold); // @presenter FontWeight\n  --navbar-item-active-background-color: #1b75fa; // @presenter Color\n  --navbar-item-active-text-color: var(--navbar-text-color); // @presenter Color\n  --navbar-item-active-text-decoration: none;\n\n  // @tokens End\n"])));
 var toc = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  /**\n    * @tokens TOC\n    * */\n  --toc-width: 240px;\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens TOC\n    * */\n  --toc-width: 240px;\n\n  // @tokens End\n"])));
 var markdown = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  /**\n    * @tokens Markdown\n    * */\n  --content-wrapper-max-width: 910px;\n  --content-wrapper-padding-vertical: 25px; // @presenter Spacing\n  --content-wrapper-padding-horizontal: 0px; // @presenter Spacing\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Markdown\n    * */\n  --content-wrapper-max-width: 910px;\n  --content-wrapper-padding-vertical: 25px; // @presenter Spacing\n  --content-wrapper-padding-horizontal: 0px; // @presenter Spacing\n\n  // @tokens End\n"])));
 var blockquote = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  /**\n    * @tokens Blockquote\n    * */\n  // TODO: fix typo\n  --bloquote-margin-vertical: 1.5em; // @presenter Spacing\n  --bloquote-margin-horizontal: 0; // @presenter Spacing\n  --bloquote-padding-vertical: 0; // @presenter Spacing\n  --bloquote-padding-horizontal: calc(var(--spacing-unit) * 4); // @presenter Spacing\n  --bloquote-background-color: transparent; // @presenter Color\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Blockquote\n    * */\n  // TODO: fix typo\n  --bloquote-margin-vertical: 1.5em; // @presenter Spacing\n  --bloquote-margin-horizontal: 0; // @presenter Spacing\n  --bloquote-padding-vertical: 0; // @presenter Spacing\n  --bloquote-padding-horizontal: calc(var(--spacing-unit) * 4); // @presenter Spacing\n  --bloquote-background-color: transparent; // @presenter Color\n\n  // @tokens End\n"])));

package/{ui → icons/AlertIcon}/AlertIcon.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-interface IconProps {
+export interface AlertIconProps {
     type: 'warning' | 'success' | 'danger' | 'attention' | 'info';
     className?: string;
 }
-declare function Icon({ type, className }: IconProps): JSX.Element;
+declare function Icon({ type, className }: AlertIconProps): JSX.Element;
 export declare const AlertIcon: import("styled-components").StyledComponent<typeof Icon, any, {
     'data-component-name': string;
 }, "data-component-name">;

package/{ui → icons/AlertIcon}/AlertIcon.js

@@ -40,7 +40,7 @@ function Icon(_a) {
     }
 }
 exports.AlertIcon = (0, styled_components_1.default)(Icon).attrs(function () { return ({
-    'data-component-name': 'ui/AlertIcon',
+    'data-component-name': 'icons/AlertIcon/AlertIcon',
 }); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  left: var(--admonition-padding-horizontal);\n  top: 50%;\n  transform: translateY(-50%);\n  width: var(--admonition-icon-size);\n  height: var(--admonition-icon-size);\n  margin-right: var(--admonition-padding-horizontal);\n  flex-shrink: 0;\n\n  fill: ", ";\n"], ["\n  position: absolute;\n  left: var(--admonition-padding-horizontal);\n  top: 50%;\n  transform: translateY(-50%);\n  width: var(--admonition-icon-size);\n  height: var(--admonition-icon-size);\n  margin-right: var(--admonition-padding-horizontal);\n  flex-shrink: 0;\n\n  fill: ", ";\n"])), function (_a) {
     var type = _a.type;
     return "var(--admonition-".concat(type, "-icon-color)");

package/icons/AlertIcon/index.d.ts

@@ -0,0 +1,2 @@
+export { AlertIcon } from '../../icons/AlertIcon/AlertIcon';
+export type { AlertIconProps } from '../../icons/AlertIcon/AlertIcon';

package/icons/AlertIcon/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertIcon = void 0;
+var AlertIcon_1 = require("../../icons/AlertIcon/AlertIcon");
+Object.defineProperty(exports, "AlertIcon", { enumerable: true, get: function () { return AlertIcon_1.AlertIcon; } });

package/icons/ArrowIcon/ArrowIcon.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface ArrowIconProps {
+    direction?: 'up' | 'right' | 'left' | 'down';
+}
+export declare const ArrowIcon: import("styled-components").StyledComponent<({ className }: {
+    className?: string | undefined;
+}) => JSX.Element, any, ArrowIconProps, never>;

package/{ui/Arrow.js → icons/ArrowIcon/ArrowIcon.js}

@@ -7,7 +7,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Arrow = void 0;
+exports.ArrowIcon = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 function directionToTransform(_a) {
@@ -25,9 +25,9 @@ function directionToTransform(_a) {
 }
 var Icon = function (_a) {
     var className = _a.className;
-    return (react_1.default.createElement("span", { "data-component-name": "ui/Arrow/Arrow" },
+    return (react_1.default.createElement("span", { "data-component-name": "icons/ArrowIcon/ArrowIcon" },
         react_1.default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 7 5", className: className },
             react_1.default.createElement("path", { d: "M3.5 2.51L5.806.205a.7.7 0 01.99.99l-2.8 2.8a.698.698 0 01-.99 0l-2.8-2.8a.7.7 0 11.99-.99L3.5 2.51z" }))));
 };
-exports.Arrow = (0, styled_components_1.default)(Icon)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: var(--sidebar-chevron-size);\n  height: var(--sidebar-chevron-size);\n  fill: var(--sidebar-chevron-color);\n  transform: rotate(", "deg);\n\n  vertical-align: middle;\n"], ["\n  width: var(--sidebar-chevron-size);\n  height: var(--sidebar-chevron-size);\n  fill: var(--sidebar-chevron-color);\n  transform: rotate(", "deg);\n\n  vertical-align: middle;\n"])), directionToTransform);
+exports.ArrowIcon = (0, styled_components_1.default)(Icon)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: var(--sidebar-chevron-size);\n  height: var(--sidebar-chevron-size);\n  fill: var(--sidebar-chevron-color);\n  transform: rotate(", "deg);\n\n  vertical-align: middle;\n"], ["\n  width: var(--sidebar-chevron-size);\n  height: var(--sidebar-chevron-size);\n  fill: var(--sidebar-chevron-color);\n  transform: rotate(", "deg);\n\n  vertical-align: middle;\n"])), directionToTransform);
 var templateObject_1;

package/icons/ArrowIcon/index.d.ts

@@ -0,0 +1,2 @@
+export { ArrowIcon } from '../../icons/ArrowIcon/ArrowIcon';
+export type { ArrowIconProps } from '../../icons/ArrowIcon/ArrowIcon';

package/icons/ArrowIcon/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArrowIcon = void 0;
+var ArrowIcon_1 = require("../../icons/ArrowIcon/ArrowIcon");
+Object.defineProperty(exports, "ArrowIcon", { enumerable: true, get: function () { return ArrowIcon_1.ArrowIcon; } });

package/icons/index.d.ts

@@ -1 +1,3 @@
 export * from '../icons/ShelfIcon';
+export * from '../icons/AlertIcon';
+export * from '../icons/ArrowIcon';

package/icons/index.js

@@ -15,3 +15,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../icons/ShelfIcon"), exports);
+__exportStar(require("../icons/AlertIcon"), exports);
+__exportStar(require("../icons/ArrowIcon"), exports);

package/index.d.ts

@@ -1,7 +1,7 @@
 export * from './Button';
 export * from './CopyButton';
 export * from './JsonViewer';
-export * from './Headings';
+export * from './Typography';
 export * from './SidebarLogo';
 export * from './CodeBlock';
 export * from './SamplesPanelControls';

package/index.js

@@ -17,7 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Button"), exports);
 __exportStar(require("./CopyButton"), exports);
 __exportStar(require("./JsonViewer"), exports);
-__exportStar(require("./Headings"), exports);
+__exportStar(require("./Typography"), exports);
 __exportStar(require("./SidebarLogo"), exports);
 __exportStar(require("./CodeBlock"), exports);
 __exportStar(require("./SamplesPanelControls"), exports);

package/mocks/constants/index.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_THEME_NAME = "@redocly/theme";
+export declare const USER_THEME_ALIAS = "@theme";

package/mocks/constants/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.USER_THEME_ALIAS = exports.DEFAULT_THEME_NAME = void 0;
+exports.DEFAULT_THEME_NAME = '@redocly/theme';
+exports.USER_THEME_ALIAS = '@theme';

package/mocks/hooks/index.d.ts

@@ -0,0 +1,6 @@
+interface RawTheme {
+    name: string;
+    settings?: any;
+}
+export declare function useThemeSettings(name: string): RawTheme['settings'];
+export {};

package/mocks/hooks/index.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useThemeSettings = void 0;
+function useThemeSettings(name) {
+    return {
+        name: name,
+        settings: {
+            toc: { header: 'header', hide: false },
+            navigation: {
+                nextPageLink: { label: 'next page' },
+                previousPageLink: { label: 'prev page' },
+            },
+        },
+    };
+}
+exports.useThemeSettings = useThemeSettings;

package/package.json

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

package/settings.yaml

@@ -0,0 +1,9 @@
+search:
+  hide: false
+  placement: navbar
+toc:
+  header:
+    hide: false
+    label: On this page
+navigation:
+  hide: false

package/src/Button/Button.tsx

@@ -1,5 +1,8 @@
+import React from 'react';
 import styled, { css, FlattenSimpleInterpolation, keyframes, Keyframes } from 'styled-components';
 
+import { Link } from '@portal/Link';
+
 export type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge' | string;
 export type ButtonColor = 'primary' | 'secondary' | 'default' | string;
 export type ButtonVariant = 'outlined' | 'contained';
@@ -12,6 +15,8 @@ export interface ButtonProps {
   variant?: ButtonVariant;
   size?: ButtonSize;
   extraClass?: string;
+  to?: string;
+  onClick?: () => void;
 }
 
 const getBlink = (): Keyframes => keyframes`
@@ -59,8 +64,9 @@ export const baseButtonStyles = css`
   }
 `;
 
-export const Button = styled.button.attrs(({ color = 'default', extraClass }: ButtonProps) => ({
+const StyledButton = styled.button.attrs(({ color = 'default', extraClass }: ButtonProps) => ({
   className: `button-color-${color}${extraClass ? ` ${extraClass}` : ''}`,
+  'data-component-name': 'Button/Button',
 }))<ButtonProps>`
   text-decoration: none;
   text-align: center;
@@ -120,3 +126,15 @@ export const Button = styled.button.attrs(({ color = 'default', extraClass }: Bu
       }
     `}
 `;
+
+export const Button: React.FC<ButtonProps> = (props) => {
+  if (props.to) {
+    return (
+      <Link to={props.to}>
+        <StyledButton {...props} />
+      </Link>
+    );
+  } else {
+    return <StyledButton {...props} />;
+  }
+};

package/src/Footer/CustomFooter.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { CustomFooterNavItem } from '@theme/Footer/CustomFooterNavItem';
+import { FooterCopyright } from '@theme/Footer/FooterCopyright';
+import { NavGroupRecord, ResolvedNavItem } from '@theme/types/portal';
+
+interface FooterProps {
+  data: NavGroupRecord;
+}
+
+export function CustomFooter({ data }: FooterProps): JSX.Element | null {
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <FooterContainer data-component-name="Footer/CustomFooter">
+      {(data.links as ResolvedNavItem[]).map((navItem, index) => {
+        return (
+          <CustomFooterNavItem
+            key={`${navItem.label}_${index}`}
+            data-cy={navItem.label}
+            navItem={navItem}
+          />
+        );
+      })}
+      <FooterCopyright copyrightText={data.copyrightText} />
+    </FooterContainer>
+  );
+}
+
+const FooterContainer = styled.div`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: block;
+  background-color: var(--footer-background-color);
+  text-align: center;
+  font-family: var(--font-family-base);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: block;
+  }
+`;