@redocly/theme 0.1.23 → 0.1.26

package/Sidebar/MenuContainer.js

@@ -9,5 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuContainer = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.MenuContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  overflow-y: auto;\n  flex-grow: 1;\n  padding-top: var(--sidebar-spacing-offset-top);\n"], ["\n  position: relative;\n  overflow-y: auto;\n  flex-grow: 1;\n  padding-top: var(--sidebar-spacing-offset-top);\n"])));
+exports.MenuContainer = styled_components_1.default.div.attrs(function () { return ({
+    'data-component-name': 'Sidebar/MenuContainer',
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  overflow-y: auto;\n  flex-grow: 1;\n  padding-top: var(--sidebar-spacing-offset-top);\n"], ["\n  position: relative;\n  overflow-y: auto;\n  flex-grow: 1;\n  padding-top: var(--sidebar-spacing-offset-top);\n"])));
 var templateObject_1;

package/Sidebar/SeparatorItem.d.ts

@@ -2,4 +2,6 @@ export declare const SeparatorItem: import("styled-components").StyledComponent<
     'data-component-name': string;
 } & {
     active?: boolean | undefined;
+} & {
+    'data-component-name': string;
 }, "data-component-name">;

package/Sidebar/SeparatorItem.js

@@ -10,5 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SeparatorItem = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var MenuItemLabel_1 = require("../Sidebar/MenuItemLabel");
-exports.SeparatorItem = (0, styled_components_1.default)(MenuItemLabel_1.MenuItemLabel)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  cursor: default;\n  font-weight: var(--font-weight-bold);\n  color: var(--sidebar-separator-label-color);\n\n  :hover {\n    color: inherit;\n    background-color: inherit;\n  }\n"], ["\n  cursor: default;\n  font-weight: var(--font-weight-bold);\n  color: var(--sidebar-separator-label-color);\n\n  :hover {\n    color: inherit;\n    background-color: inherit;\n  }\n"])));
+exports.SeparatorItem = (0, styled_components_1.default)(MenuItemLabel_1.MenuItemLabel).attrs(function () { return ({
+    'data-component-name': 'Sidebar/SeparatorItem',
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  cursor: default;\n  font-weight: var(--font-weight-bold);\n  color: var(--sidebar-separator-label-color);\n\n  :hover {\n    color: inherit;\n    background-color: inherit;\n  }\n"], ["\n  cursor: default;\n  font-weight: var(--font-weight-bold);\n  color: var(--sidebar-separator-label-color);\n\n  :hover {\n    color: inherit;\n    background-color: inherit;\n  }\n"])));
 var templateObject_1;

package/SidebarLogo/SidebarLogo.js

@@ -16,7 +16,7 @@ function SidebarLogo(_a) {
         return null;
     }
     var logo = react_1.default.createElement(LogoImgEl, { src: imageUrl, alt: altText || 'logo' });
-    return (react_1.default.createElement(LogoWrap, { "data-cy": dataTestId, style: { backgroundColor: backgroundColor } }, href ? react_1.default.createElement(Link, { href: href }, logo) : logo));
+    return (react_1.default.createElement(LogoWrap, { "data-cy": dataTestId, style: { backgroundColor: backgroundColor }, "data-component-name": "SidebarLogo/SidebarLogo" }, href ? react_1.default.createElement(Link, { href: href }, logo) : logo));
 }
 exports.SidebarLogo = SidebarLogo;
 var LogoImgEl = styled_components_1.default.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-height: var(--logo-max-height);\n  max-width: var(--logo-max-width);\n  padding: var(--logo-padding);\n  width: 100%;\n  display: block;\n"], ["\n  max-height: var(--logo-max-height);\n  max-width: var(--logo-max-width);\n  padding: var(--logo-padding);\n  width: 100%;\n  display: block;\n"])));

package/SourceCode/SourceCode.js

@@ -18,13 +18,13 @@ function SourceCode(_a) {
     var lang = _a.lang, source = _a.source, externalSource = _a.externalSource, withCopyButton = _a.withCopyButton, _d = _a.dataTestId, dataTestId = _d === void 0 ? 'source-code' : _d;
     var _source = source || ((_c = (_b = externalSource === null || externalSource === void 0 ? void 0 : externalSource.sample) === null || _b === void 0 ? void 0 : _b.get) === null || _c === void 0 ? void 0 : _c.call(_b, externalSource)) || '';
     if (withCopyButton) {
-        return (react_1.default.createElement(CopyButton_1.CopyButtonWrapper, { data: source }, function (_a) {
+        return (react_1.default.createElement(CopyButton_1.CopyButtonWrapper, { data: source, "data-component-name": "SourceCode/SourceCode" }, function (_a) {
             var renderCopyButton = _a.renderCopyButton;
             return (react_1.default.createElement(SamplesPanelControls_1.SampleControlsWrap, null,
                 react_1.default.createElement(SamplesPanelControls_1.SampleControls, { "data-cy": "copy-button" }, renderCopyButton()),
                 react_1.default.createElement(Code, { lang: lang, source: _source, dataTestId: dataTestId })));
         }));
     }
-    return react_1.default.createElement(Code, { dataTestId: dataTestId, lang: lang, source: _source });
+    return (react_1.default.createElement(Code, { dataTestId: dataTestId, lang: lang, source: _source, "data-component-name": "SourceCode/SourceCode" }));
 }
 exports.SourceCode = SourceCode;

package/Tooltip/Tooltip.js

@@ -51,7 +51,7 @@ function TooltipComponent(_a) {
     var handleLeave = (0, react_1.useCallback)(function () {
         handleClose();
     }, [handleClose]);
-    return (react_1.default.createElement(TooltipWrapper, { onMouseEnter: isControlled ? undefined : handleEnter, onMouseLeave: isControlled ? undefined : handleLeave, onClick: isControlled ? undefined : handleLeave, className: "tooltip-".concat(className) },
+    return (react_1.default.createElement(TooltipWrapper, { onMouseEnter: isControlled ? undefined : handleEnter, onMouseLeave: isControlled ? undefined : handleLeave, onClick: isControlled ? undefined : handleLeave, className: "tooltip-".concat(className), "data-component-name": "Tooltip/Tooltip" },
         children,
         isOpened && (react_1.default.createElement(TooltipBody, { "data-cy": dataTestId, placement: placement, width: width }, tip))));
 }

package/Typography/CompactTypography.d.ts

@@ -1,10 +1,6 @@
-export declare const CompactTypography: import("styled-components").StyledComponent<"p", any, {
+export declare const CompactTypography: import("styled-components").StyledComponent<"div", 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;
-} & {
+} & import("../Typography/Typography").TypographyProps & {
     mt: string;
     mb: string;
     'data-component-name': string;

package/Typography/H1.js

@@ -11,6 +11,6 @@ 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',
+    'data-component-name': 'Typography/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.js

@@ -11,6 +11,6 @@ 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',
+    'data-component-name': 'Typography/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.js

@@ -11,6 +11,6 @@ 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',
+    'data-component-name': 'Typography/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

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

package/Typography/SectionHeader.js

@@ -9,5 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (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"])));
+exports.SectionHeader = styled_components_1.default.h2.attrs(function () { return ({
+    'data-component-name': 'Typography/SectionHeader',
+}); })(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

@@ -1,8 +1,15 @@
-import { TypographyProps } from 'styled-system';
-export declare const Typography: import("styled-components").StyledComponent<"p", any, {
+export interface TypographyProps {
+    color?: string;
+    fontFamily?: string;
+    fontSize?: string;
+    fontStyle?: string;
+    fontWeight?: string;
+    lineHeight?: string;
+    letterSpacing?: string;
+    marginBottom?: string;
+    marginTop?: string;
+    textAlign?: string;
+}
+export declare const Typography: import("styled-components").StyledComponent<"div", 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">;
+} & TypographyProps, "data-component-name">;

package/Typography/Typography.js

@@ -9,14 +9,37 @@ var __importDefault = (this && this.__importDefault) || function (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 ({
+exports.Typography = styled_components_1.default.div.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';
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  letter-spacing: ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n  text-align: ", ";\n"], ["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  letter-spacing: ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n  text-align: ", ";\n"])), function (_a) {
+    var color = _a.color;
+    return color || 'var(--color-content)';
 }, function (_a) {
-    var mb = _a.mb;
-    return mb || '1em';
-}, styled_system_1.typography);
+    var fontFamily = _a.fontFamily;
+    return fontFamily || 'var(--font-family-base)';
+}, function (_a) {
+    var fontSize = _a.fontSize;
+    return fontSize || 'var(--font-size-base)';
+}, function (_a) {
+    var fontStyle = _a.fontStyle;
+    return fontStyle;
+}, function (_a) {
+    var fontWeight = _a.fontWeight;
+    return fontWeight || 'var(--font-weight-regular)';
+}, function (_a) {
+    var lineHeight = _a.lineHeight;
+    return lineHeight || 'var(--line-height-base)';
+}, function (_a) {
+    var letterSpacing = _a.letterSpacing;
+    return letterSpacing;
+}, function (_a) {
+    var marginBottom = _a.marginBottom;
+    return marginBottom;
+}, function (_a) {
+    var marginTop = _a.marginTop;
+    return marginTop;
+}, function (_a) {
+    var textAlign = _a.textAlign;
+    return textAlign;
+});
 var templateObject_1;

package/globalStyle.js

@@ -10,7 +10,7 @@ var baseColors = (0, styled_components_1.css)(templateObject_1 || (templateObjec
 var httpColors = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  /**\n    * @tokens HTTP Colors\n    * @presenter Color\n    */\n  --color-http-get: #3a9601;\n  --color-http-post: #0065fb;\n  --color-http-put: #93527b;\n  --color-http-options: #947014;\n  --color-http-patch: #bf581d;\n  --color-http-delete: #c83637;\n  --color-http-basic: #707070;\n  --color-http-link: #07818f;\n  --color-http-head: #a23dad;\n  --color-http-hook: var(--color-http-post);\n  // @tokens End\n"], ["\n  /**\n    * @tokens HTTP Colors\n    * @presenter Color\n    */\n  --color-http-get: #3a9601;\n  --color-http-post: #0065fb;\n  --color-http-put: #93527b;\n  --color-http-options: #947014;\n  --color-http-patch: #bf581d;\n  --color-http-delete: #c83637;\n  --color-http-basic: #707070;\n  --color-http-link: #07818f;\n  --color-http-head: #a23dad;\n  --color-http-hook: var(--color-http-post);\n  // @tokens End\n"])));
 var responseColors = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  /**\n    * @tokens Response colors\n    * @presenter Color\n    */\n  --response-success-border-color: #b1e996;\n  --response-success-background-color: #f6fff4;\n  --response-success-text-color: var(--response-success-border-color);\n\n  --response-error-border-color: #ffc9c9;\n  --response-error-background-color: #fff4f4;\n  --response-error-text-color: var(--response-error-border-color);\n\n  --response-redirect-border-color: var(--color-warning-500);\n  --response-redirect-background-color: #ffa5001a;\n  --response-redirect-text-color: var(--response-redirect-border-color);\n\n  --response-info-border-color: #87ceeb;\n  --response-info-background-color: #87ceeb1a;\n  --response-info-text-color: var(--response-info-border-color);\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Response colors\n    * @presenter Color\n    */\n  --response-success-border-color: #b1e996;\n  --response-success-background-color: #f6fff4;\n  --response-success-text-color: var(--response-success-border-color);\n\n  --response-error-border-color: #ffc9c9;\n  --response-error-background-color: #fff4f4;\n  --response-error-text-color: var(--response-error-border-color);\n\n  --response-redirect-border-color: var(--color-warning-500);\n  --response-redirect-background-color: #ffa5001a;\n  --response-redirect-text-color: var(--response-redirect-border-color);\n\n  --response-info-border-color: #87ceeb;\n  --response-info-background-color: #87ceeb1a;\n  --response-info-text-color: var(--response-info-border-color);\n\n  // @tokens End\n"])));
 var typography = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  /* === Typography === */\n\n  /**\n    * @tokens Typography Colors\n    * @presenter Color\n    */\n  --color-content: #1f2933;\n  --color-content-inverse: var(--color-secondary-200);\n  --color-content-secondary: #7b8794;\n\n  /**\n    * @tokens Font Sizes\n    * @presenter FontSize\n    */\n  --font-size-base: 14px;\n  --font-size-small: 12px;\n\n  /**\n    * @tokens Line Heights\n    * @presenter LineHeight\n    */\n  --line-height-base: 1.5em;\n\n  /**\n    * @tokens Font Weights\n    * @presenter FontWeight\n    */\n  --font-weight-regular: 400;\n  --font-weight-bold: 600;\n  --font-weight-bolder: 700;\n\n  /**\n    * @tokens Font Families\n    * @presenter FontFamily\n    */\n  --font-family-base: Source Sans Pro, sans-serif;\n  --font-family-monospaced: Source Code Pro, monospace;\n\n  /**\n  * @tokens Rendering\n  */\n  --smoothing: antialiased; // text-smoothing\n  --text-rendering: optimizeSpeed; // text-rendering\n\n  // TODO: Not sure if Spacing should be in typography\n  /**\n  * @tokens Spacings\n  * @presenter Spacing\n  */\n  --spacing-unit: 5px;\n  --spacing-horizontal: calc(var(--spacing-unit) * 8);\n  --spacing-vertical: calc(var(--spacing-unit) * 4);\n\n  // @tokens End\n"], ["\n  /* === Typography === */\n\n  /**\n    * @tokens Typography Colors\n    * @presenter Color\n    */\n  --color-content: #1f2933;\n  --color-content-inverse: var(--color-secondary-200);\n  --color-content-secondary: #7b8794;\n\n  /**\n    * @tokens Font Sizes\n    * @presenter FontSize\n    */\n  --font-size-base: 14px;\n  --font-size-small: 12px;\n\n  /**\n    * @tokens Line Heights\n    * @presenter LineHeight\n    */\n  --line-height-base: 1.5em;\n\n  /**\n    * @tokens Font Weights\n    * @presenter FontWeight\n    */\n  --font-weight-regular: 400;\n  --font-weight-bold: 600;\n  --font-weight-bolder: 700;\n\n  /**\n    * @tokens Font Families\n    * @presenter FontFamily\n    */\n  --font-family-base: Source Sans Pro, sans-serif;\n  --font-family-monospaced: Source Code Pro, monospace;\n\n  /**\n  * @tokens Rendering\n  */\n  --smoothing: antialiased; // text-smoothing\n  --text-rendering: optimizeSpeed; // text-rendering\n\n  // TODO: Not sure if Spacing should be in typography\n  /**\n  * @tokens Spacings\n  * @presenter Spacing\n  */\n  --spacing-unit: 5px;\n  --spacing-horizontal: calc(var(--spacing-unit) * 8);\n  --spacing-vertical: calc(var(--spacing-unit) * 4);\n\n  // @tokens End\n"])));
-var headingsTypography = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  // --h-{css-property-name} is fallback for h1...h6\n\n  /**\n    * @tokens Typography headings font\n    */\n  --h-font-family: Source Sans Pro, sans-serif; // @presenter FontFamily\n  --h-font-weight: var(--font-weight-bolder); // @presenter FontWeight\n  --h2-font-weight: var(--font-weight-bold); // @presenter FontWeight\n\n  /**\n    * @tokens Typography headings color\n    * @presenter Color\n    */\n  --h-color: var(--color-content);\n\n  /**\n    * @tokens Typography headings font size\n    * @presenter FontSize\n    */\n  --h1-font-size: 36px;\n  --h2-font-size: 28px;\n  --h3-font-size: 18px;\n  --h4-font-size: 16px;\n  --h5-font-size: 14px;\n  --h6-font-size: 12px;\n\n  /**\n    * @tokens Typography headings line height\n    * @presenter LineHeight\n    */\n  --h1-line-height: 36px;\n  --h2-line-height: 28px;\n  --h3-line-height: 18px;\n  --h4-line-height: 16px;\n  --h5-line-height: 14px;\n  --h6-line-height: 12px;\n\n  /**\n    * @tokens Typography headings margin\n    * @presenter Spacing\n    */\n  --h1-margin-top: 1.35em;\n  --h1-margin-bottom: 0.9em;\n  --h2-margin-top: 1.25em;\n  --h2-margin-bottom: 0.8em;\n  --h3-margin-top: 1.25em;\n  --h3-margin-bottom: 0.8em;\n  // @tokens End\n"], ["\n  // --h-{css-property-name} is fallback for h1...h6\n\n  /**\n    * @tokens Typography headings font\n    */\n  --h-font-family: Source Sans Pro, sans-serif; // @presenter FontFamily\n  --h-font-weight: var(--font-weight-bolder); // @presenter FontWeight\n  --h2-font-weight: var(--font-weight-bold); // @presenter FontWeight\n\n  /**\n    * @tokens Typography headings color\n    * @presenter Color\n    */\n  --h-color: var(--color-content);\n\n  /**\n    * @tokens Typography headings font size\n    * @presenter FontSize\n    */\n  --h1-font-size: 36px;\n  --h2-font-size: 28px;\n  --h3-font-size: 18px;\n  --h4-font-size: 16px;\n  --h5-font-size: 14px;\n  --h6-font-size: 12px;\n\n  /**\n    * @tokens Typography headings line height\n    * @presenter LineHeight\n    */\n  --h1-line-height: 36px;\n  --h2-line-height: 28px;\n  --h3-line-height: 18px;\n  --h4-line-height: 16px;\n  --h5-line-height: 14px;\n  --h6-line-height: 12px;\n\n  /**\n    * @tokens Typography headings margin\n    * @presenter Spacing\n    */\n  --h1-margin-top: 1.35em;\n  --h1-margin-bottom: 0.9em;\n  --h2-margin-top: 1.25em;\n  --h2-margin-bottom: 0.8em;\n  --h3-margin-top: 1.25em;\n  --h3-margin-bottom: 0.8em;\n  // @tokens End\n"])));
+var headingsTypography = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  // --h-{css-property-name} is fallback for h1...h6\n\n  * {\n    box-sizing: border-box;\n  }\n\n  /**\n    * @tokens Typography headings font\n    */\n  --h-font-family: Source Sans Pro, sans-serif; // @presenter FontFamily\n  --h-font-weight: var(--font-weight-bolder); // @presenter FontWeight\n  --h2-font-weight: var(--font-weight-bold); // @presenter FontWeight\n\n  /**\n    * @tokens Typography headings color\n    * @presenter Color\n    */\n  --h-color: var(--color-content);\n\n  /**\n    * @tokens Typography headings font size\n    * @presenter FontSize\n    */\n  --h1-font-size: 36px;\n  --h2-font-size: 28px;\n  --h3-font-size: 18px;\n  --h4-font-size: 16px;\n  --h5-font-size: 14px;\n  --h6-font-size: 12px;\n\n  /**\n    * @tokens Typography headings line height\n    * @presenter LineHeight\n    */\n  --h1-line-height: 36px;\n  --h2-line-height: 28px;\n  --h3-line-height: 18px;\n  --h4-line-height: 16px;\n  --h5-line-height: 14px;\n  --h6-line-height: 12px;\n\n  /**\n    * @tokens Typography headings margin\n    * @presenter Spacing\n    */\n  --h1-margin-top: 1.35em;\n  --h1-margin-bottom: 0.9em;\n  --h2-margin-top: 1.25em;\n  --h2-margin-bottom: 0.8em;\n  --h3-margin-top: 1.25em;\n  --h3-margin-bottom: 0.8em;\n  // @tokens End\n"], ["\n  // --h-{css-property-name} is fallback for h1...h6\n\n  * {\n    box-sizing: border-box;\n  }\n\n  /**\n    * @tokens Typography headings font\n    */\n  --h-font-family: Source Sans Pro, sans-serif; // @presenter FontFamily\n  --h-font-weight: var(--font-weight-bolder); // @presenter FontWeight\n  --h2-font-weight: var(--font-weight-bold); // @presenter FontWeight\n\n  /**\n    * @tokens Typography headings color\n    * @presenter Color\n    */\n  --h-color: var(--color-content);\n\n  /**\n    * @tokens Typography headings font size\n    * @presenter FontSize\n    */\n  --h1-font-size: 36px;\n  --h2-font-size: 28px;\n  --h3-font-size: 18px;\n  --h4-font-size: 16px;\n  --h5-font-size: 14px;\n  --h6-font-size: 12px;\n\n  /**\n    * @tokens Typography headings line height\n    * @presenter LineHeight\n    */\n  --h1-line-height: 36px;\n  --h2-line-height: 28px;\n  --h3-line-height: 18px;\n  --h4-line-height: 16px;\n  --h5-line-height: 14px;\n  --h6-line-height: 12px;\n\n  /**\n    * @tokens Typography headings margin\n    * @presenter Spacing\n    */\n  --h1-margin-top: 1.35em;\n  --h1-margin-bottom: 0.9em;\n  --h2-margin-top: 1.25em;\n  --h2-margin-bottom: 0.8em;\n  --h3-margin-top: 1.25em;\n  --h3-margin-bottom: 0.8em;\n  // @tokens End\n"])));
 var borders = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  /**\n    * @tokens Borders\n    * @presenter Border\n    */\n  --global-border-width: 1px;\n\n  /**\n    * @tokens Border Radius\n    * @presenter BorderRadius\n    */\n  --global-border-radius: 4px;\n\n  /**\n    * @tokens Border Colors\n    * @presenter Color\n    */\n  --global-border-color: var(--color-secondary-400);\n  --global-border-color-secondary: #616e7c;\n  --global-background-color: transparent;\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Borders\n    * @presenter Border\n    */\n  --global-border-width: 1px;\n\n  /**\n    * @tokens Border Radius\n    * @presenter BorderRadius\n    */\n  --global-border-radius: 4px;\n\n  /**\n    * @tokens Border Colors\n    * @presenter Color\n    */\n  --global-border-color: var(--color-secondary-400);\n  --global-border-color-secondary: #616e7c;\n  --global-background-color: transparent;\n\n  // @tokens End\n"])));
 var buttons = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  /*\n  * Static classnames that can be used to override styles for components:\n  * download-specification-button, next-section-button, button-base\n  */\n\n  /**\n    * @tokens Button default colors\n    */\n  --button-color: white; // @presenter Color\n  --button-background-color: var(--color-emphasis-500); // @presenter Color\n  --button-hover-background-color: var(--color-emphasis-600); // @presenter Color\n  --button-active-background-color: var(--color-emphasis-700); // @presenter Color\n  --button-outlined-active-border-color: var(--color-emphasis-800); // @presenter Color\n\n  /**\n    * @tokens Button primary colors\n    */\n  .button-color-primary {\n    --button-color: white; // @presenter Color\n    --button-background-color: var(--color-primary-500); // @presenter Color\n    --button-hover-background-color: var(--color-primary-600); // @presenter Color\n    --button-active-background-color: var(--color-primary-700); // @presenter Color\n    --button-outlined-active-border-color: var(--color-primary-800); // @presenter Color\n  }\n\n  /**\n    * @tokens Button secondary colors\n    */\n  .button-color-secondary {\n    --button-color: var(--color-emphasis-800); // @presenter Color\n    --button-background-color: var(--color-secondary-400); // @presenter Color\n    --button-hover-background-color: var(--color-secondary-500); // @presenter Color\n    --button-active-background-color: var(--color-secondary-600); // @presenter Color\n    --button-outlined-active-border-color: var(--color-secondary-700); // @presenter Color\n  }\n\n  /**\n    * @tokens Button borders\n    */\n  --button-border-radius: var(--global-border-radius); // @presenter BorderRadius\n  --button-box-shadow: none; // @presenter Shadow\n  --button-active-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1); // @presenter Shadow\n\n  /**\n    * @tokens Button typography\n    */\n  --button-font-family: inherit; // @presenter FontFamily\n  --button-font-weight: var(--font-weight-bold); // @presenter FontWeight\n  --button-small-font-size: 12px; // @presenter FontSize\n  --button-small-padding: 8px 10px;\n  --button-small-min-width: 90px; // @presenter Spacing\n  --button-medium-font-size: 14px; // @presenter FontSize\n  --button-medium-padding: 8px 20px;\n  --button-medium-min-width: 120px; // @presenter Spacing\n  --button-large-font-size: 14px; // @presenter FontSize\n  --button-large-padding: 12px 24px;\n  --button-large-min-width: 150px; // @presenter Spacing\n  --button-xlarge-font-size: 16px; // @presenter FontSize\n  --button-xlarge-padding: 20px 24px;\n  --button-xlarge-min-width: 200px; // @presenter Spacing\n\n  // @tokens End\n"], ["\n  /*\n  * Static classnames that can be used to override styles for components:\n  * download-specification-button, next-section-button, button-base\n  */\n\n  /**\n    * @tokens Button default colors\n    */\n  --button-color: white; // @presenter Color\n  --button-background-color: var(--color-emphasis-500); // @presenter Color\n  --button-hover-background-color: var(--color-emphasis-600); // @presenter Color\n  --button-active-background-color: var(--color-emphasis-700); // @presenter Color\n  --button-outlined-active-border-color: var(--color-emphasis-800); // @presenter Color\n\n  /**\n    * @tokens Button primary colors\n    */\n  .button-color-primary {\n    --button-color: white; // @presenter Color\n    --button-background-color: var(--color-primary-500); // @presenter Color\n    --button-hover-background-color: var(--color-primary-600); // @presenter Color\n    --button-active-background-color: var(--color-primary-700); // @presenter Color\n    --button-outlined-active-border-color: var(--color-primary-800); // @presenter Color\n  }\n\n  /**\n    * @tokens Button secondary colors\n    */\n  .button-color-secondary {\n    --button-color: var(--color-emphasis-800); // @presenter Color\n    --button-background-color: var(--color-secondary-400); // @presenter Color\n    --button-hover-background-color: var(--color-secondary-500); // @presenter Color\n    --button-active-background-color: var(--color-secondary-600); // @presenter Color\n    --button-outlined-active-border-color: var(--color-secondary-700); // @presenter Color\n  }\n\n  /**\n    * @tokens Button borders\n    */\n  --button-border-radius: var(--global-border-radius); // @presenter BorderRadius\n  --button-box-shadow: none; // @presenter Shadow\n  --button-active-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1); // @presenter Shadow\n\n  /**\n    * @tokens Button typography\n    */\n  --button-font-family: inherit; // @presenter FontFamily\n  --button-font-weight: var(--font-weight-bold); // @presenter FontWeight\n  --button-small-font-size: 12px; // @presenter FontSize\n  --button-small-padding: 8px 10px;\n  --button-small-min-width: 90px; // @presenter Spacing\n  --button-medium-font-size: 14px; // @presenter FontSize\n  --button-medium-padding: 8px 20px;\n  --button-medium-min-width: 120px; // @presenter Spacing\n  --button-large-font-size: 14px; // @presenter FontSize\n  --button-large-padding: 12px 24px;\n  --button-large-min-width: 150px; // @presenter Spacing\n  --button-xlarge-font-size: 16px; // @presenter FontSize\n  --button-xlarge-padding: 20px 24px;\n  --button-xlarge-min-width: 200px; // @presenter Spacing\n\n  // @tokens End\n"])));
 var sidebar = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  /* === Sidebar === */\n\n  /**\n    * @tokens Sidebar typography\n    */\n  --sidebar-font-size: var(--font-size-base);\n  --sidebar-font-family: var(--font-family-base);\n  --sidebar-word-break: 'inherit';\n\n  /**\n    * @tokens Sidebar colors\n    * @presenter Color\n    */\n  --sidebar-background-color: #fff;\n  --sidebar-right-line-color: var(--global-border-color);\n  --sidebar-separator-label-color: var(--sidebar-item-color);\n  --sidebar-separator-line-color: #dadada;\n  --sidebar-chevron-color: var(--sidebar-item-color);\n\n  /**\n    * @tokens Sidebar spacing\n    * @presenter Spacing\n    */\n  --sidebar-width: 285px; // @presenter NO\n\n  --sidebar-spacing-unit: 8px;\n  --sidebar-spacing-horizontal: var(--sidebar-spacing-unit);\n  --sidebar-spacing-vertical: var(--sidebar-spacing-unit);\n  --sidebar-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2);\n  --sidebar-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2);\n  --sidebar-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2);\n\n  --sidebar-margin-left: calc(var(--sidebar-spacing-unit) * 2);\n  --sidebar-padding-horizontal: var(--sidebar-spacing-unit);\n  --sidebar-padding-vertical: var(--sidebar-spacing-unit);\n  --sidebar-spacing-padding-vertical: var(--sidebar-spacing-unit); // TODO: seems like duplicated\n  --sidebar-spacing-padding-horizontal: var(--sidebar-spacing-unit); // TODO: seems like duplicated\n\n  --sidebar-chevron-size: var(--sidebar-spacing-unit);\n\n  /**\n    * @tokens Sidebar border\n    */\n  --sidebar-border-radius: 4px; // @presenter BorderRadius\n\n  /* === Sidebar Item === */\n\n  /**\n    * @tokens Sidebar item typography\n    */\n  --sidebar-item-font-family: var(--font-family-base); // @presenter FontFamily\n  --sidebar-item-font-size: var(--font-size-base); // @presenter FontSize\n\n  /**\n    * @tokens Sidebar item colors\n    *  @presenter Color\n    */\n  --sidebar-item-color: var(--color-content);\n  --sidebar-item-active-color: var(--color-content);\n  --sidebar-item-background-color: #fff;\n  --sidebar-item-active-background-color: var(--global-border-color);\n\n  /**\n    * @tokens Sidebar item spacing\n    * @presenter Spacing\n    */\n  --sidebar-item-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2);\n  --sidebar-item-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2);\n  --sidebar-item-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2);\n\n  /**\n    * @tokens Sidebar item border\n    */\n  --sidebar-item-border-radius: 4px; // @presenter BorderRadius\n\n  // @tokens End\n"], ["\n  /* === Sidebar === */\n\n  /**\n    * @tokens Sidebar typography\n    */\n  --sidebar-font-size: var(--font-size-base);\n  --sidebar-font-family: var(--font-family-base);\n  --sidebar-word-break: 'inherit';\n\n  /**\n    * @tokens Sidebar colors\n    * @presenter Color\n    */\n  --sidebar-background-color: #fff;\n  --sidebar-right-line-color: var(--global-border-color);\n  --sidebar-separator-label-color: var(--sidebar-item-color);\n  --sidebar-separator-line-color: #dadada;\n  --sidebar-chevron-color: var(--sidebar-item-color);\n\n  /**\n    * @tokens Sidebar spacing\n    * @presenter Spacing\n    */\n  --sidebar-width: 285px; // @presenter NO\n\n  --sidebar-spacing-unit: 8px;\n  --sidebar-spacing-horizontal: var(--sidebar-spacing-unit);\n  --sidebar-spacing-vertical: var(--sidebar-spacing-unit);\n  --sidebar-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2);\n  --sidebar-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2);\n  --sidebar-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2);\n\n  --sidebar-margin-left: calc(var(--sidebar-spacing-unit) * 2);\n  --sidebar-padding-horizontal: var(--sidebar-spacing-unit);\n  --sidebar-padding-vertical: var(--sidebar-spacing-unit);\n  --sidebar-spacing-padding-vertical: var(--sidebar-spacing-unit); // TODO: seems like duplicated\n  --sidebar-spacing-padding-horizontal: var(--sidebar-spacing-unit); // TODO: seems like duplicated\n\n  --sidebar-chevron-size: var(--sidebar-spacing-unit);\n\n  /**\n    * @tokens Sidebar border\n    */\n  --sidebar-border-radius: 4px; // @presenter BorderRadius\n\n  /* === Sidebar Item === */\n\n  /**\n    * @tokens Sidebar item typography\n    */\n  --sidebar-item-font-family: var(--font-family-base); // @presenter FontFamily\n  --sidebar-item-font-size: var(--font-size-base); // @presenter FontSize\n\n  /**\n    * @tokens Sidebar item colors\n    *  @presenter Color\n    */\n  --sidebar-item-color: var(--color-content);\n  --sidebar-item-active-color: var(--color-content);\n  --sidebar-item-background-color: #fff;\n  --sidebar-item-active-background-color: var(--global-border-color);\n\n  /**\n    * @tokens Sidebar item spacing\n    * @presenter Spacing\n    */\n  --sidebar-item-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2);\n  --sidebar-item-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2);\n  --sidebar-item-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2);\n\n  /**\n    * @tokens Sidebar item border\n    */\n  --sidebar-item-border-radius: 4px; // @presenter BorderRadius\n\n  // @tokens End\n"])));

package/icons/ShelfIcon/ShelfIcon.d.ts

@@ -7,4 +7,6 @@ export interface ShelfIconProps {
     direction: 'left' | 'right' | 'up' | 'down';
     style?: React.CSSProperties;
 }
-export declare const ShelfIcon: import("styled-components").StyledComponent<({ className, style }: ShelfIconProps) => JSX.Element, any, {}, never>;
+export declare const ShelfIcon: import("styled-components").StyledComponent<({ className, style }: ShelfIconProps) => JSX.Element, any, {
+    'data-component-name': string;
+}, "data-component-name">;

package/icons/ShelfIcon/ShelfIcon.js

@@ -43,7 +43,9 @@ var IntShelfIcon = function (_a) {
         React.createElement("path", { d: "M0.205025 1.19467L3.00503 3.99467C3.27839 4.26804 3.72161 4.26804 3.99497 3.99467C4.26834 3.7213 4.26834 3.27809 3.99497 3.00472L1.19497 0.20472C0.921608 -0.0686469 0.478392 -0.0686469 0.205025 0.20472C-0.0683418 0.478087 -0.0683417 0.921303 0.205025 1.19467Z" }),
         React.createElement("path", { d: "M3.00503 3.00501L0.205025 5.80501C-0.0683417 6.07838 -0.0683417 6.5216 0.205025 6.79496C0.478392 7.06833 0.921608 7.06833 1.19497 6.79496L3.99497 3.99496C4.26834 3.7216 4.26834 3.27838 3.99497 3.00501C3.72161 2.73165 3.27839 2.73165 3.00503 3.00501Z" })));
 };
-exports.ShelfIcon = (0, styled_components_1.default)(IntShelfIcon)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  vertical-align: middle;\n  transition: transform 0.2s ease-out;\n"], ["\n  ", "\n  vertical-align: middle;\n  transition: transform 0.2s ease-out;\n"])), function (_a) {
+exports.ShelfIcon = (0, styled_components_1.default)(IntShelfIcon).attrs(function () { return ({
+    'data-component-name': 'icons/ShelfIcon/ShelfIcon',
+}); })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  vertical-align: middle;\n  transition: transform 0.2s ease-out;\n"], ["\n  ", "\n  vertical-align: middle;\n  transition: transform 0.2s ease-out;\n"])), function (_a) {
     var _b = _a.size, size = _b === void 0 ? '9px' : _b, _c = _a.float, float = _c === void 0 ? '' : _c, direction = _a.direction, color = _a.color;
     return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    height: ", ";\n    width: ", ";\n    float: ", ";\n    transform: rotateZ(", ");\n    fill: ", ";\n  "], ["\n    height: ", ";\n    width: ", ";\n    float: ", ";\n    transform: rotateZ(", ");\n    fill: ", ";\n  "])), size, size, float, directionMap[direction], (0, utils_1.getCssColorVariable)(color));
 });

package/mocks/hooks/index.d.ts

@@ -2,5 +2,14 @@ interface RawTheme {
     name: string;
     settings?: any;
 }
+interface PageLink {
+    label: string;
+    link: string;
+    type: 'link';
+}
 export declare function useThemeSettings(name: string): RawTheme['settings'];
+export declare function useSidebarSiblingsData(): {
+    nextPage: PageLink;
+    prevPage: PageLink;
+};
 export {};

package/mocks/hooks/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useThemeSettings = void 0;
+exports.useSidebarSiblingsData = exports.useThemeSettings = void 0;
 function useThemeSettings(name) {
     return {
         name: name,
@@ -14,3 +14,18 @@ function useThemeSettings(name) {
     };
 }
 exports.useThemeSettings = useThemeSettings;
+function useSidebarSiblingsData() {
+    return {
+        nextPage: {
+            type: 'link',
+            label: 'Page',
+            link: '#next',
+        },
+        prevPage: {
+            type: 'link',
+            label: 'Page',
+            link: '#prev',
+        },
+    };
+}
+exports.useSidebarSiblingsData = useSidebarSiblingsData;

package/package.json

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

package/src/Cards/Card.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Link } from '@portal/Link';
+import { H3 } from '@theme/Typography';
+import { ResolvedNavItem } from '@theme/types/portal';
+
+export interface CardProps {
+  title?: string;
+  icon?: string;
+  links: ResolvedNavItem;
+}
+
+export function Card(props: CardProps): JSX.Element {
+  return (
+    <CardWrapper data-component-name="Cards/Card">
+      {props.icon && <img src={props?.icon} alt={props?.title} />}
+      {props.title && <H3>{props.title}</H3>}
+      {props.links.items && (
+        <CardLinksList>
+          {props.links.items.map((item) => (
+            <li key={item.label}>
+              <Link to={item.link as string}>{item.label}</Link>
+            </li>
+          ))}
+        </CardLinksList>
+      )}
+    </CardWrapper>
+  );
+}
+
+const CardWrapper = styled.div`
+  border-radius: 10px;
+  box-shadow: 0px 10px 30px 0px rgba(35, 35, 35, 0.1);
+  padding: 20px;
+  margin: 0 20px 20px 0;
+  min-width: 25%;
+  font-family: var(--font-family-base);
+`;
+
+const CardLinksList = styled.ul`
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+
+  li {
+    margin-bottom: 10px;
+  }
+`;

package/src/Cards/CardsBlock.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export const CardsBlock = styled.div.attrs(() => ({
+  'data-component-name': 'Cards/CardsBlock',
+}))`
+  display: flex;
+  padding: 20px 0;
+  justify-content: space-between;
+`;

package/src/CodeBlock/CodeBlock.ts

@@ -2,7 +2,9 @@ import styled from 'styled-components';
 
 import { generateCodeBlockTokens } from '@theme/utils';
 
-export const CodeBlock = styled.div`
+export const CodeBlock = styled.div.attrs(() => ({
+  'data-component-name': 'CodeBlock/CodeBlock',
+}))`
   max-height: var(--code-block-max-height, 600px);
   word-break: var(--code-block-word-break, initial);
   /**

package/src/CopyButton/CopyButton.tsx

@@ -19,7 +19,12 @@ export const CopyButton = ({ text, dataTestId = 'copy-button' }: CopyButtonProps
   }
 
   return (
-    <Button color="secondary" onClick={write} data-cy={dataTestId}>
+    <Button
+      color="secondary"
+      onClick={write}
+      data-cy={dataTestId}
+      data-component-name="CopyButton/CopyButton"
+    >
       {title}
     </Button>
   );

package/src/Footer/Footer.tsx

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

package/src/JsonViewer/JsonViewer.tsx

@@ -103,7 +103,9 @@ function JsonComponent({ data, jsonSampleExpandLevel, className }: JsonProps): J
 
 export const Json = memo<JsonProps>(JsonComponent);
 
-export const JsonViewer = styled(Json)<JsonProps>`
+export const JsonViewer = styled(Json).attrs(() => ({
+  'data-component-name': 'JsonViewer/JsonViewer',
+}))<JsonProps>`
   .redoc-json code {
     background-color: var(--samples-panel-controls-background-color);
     color: var(--color-content-inverse);

package/src/Markdown/{StyledMarkdown.tsx → MarkdownWrapper.tsx}

@@ -95,8 +95,8 @@ export function headingAnchor(className = 'anchor'): FlattenSimpleInterpolation
   `;
 }
 
-export const StyledMarkdown = styled.main.attrs(() => ({
-  'data-component-name': 'Markdown/StyledMarkdown',
+export const MarkdownWrapper = styled.main.attrs(() => ({
+  'data-component-name': 'Markdown/MarkdownWrapper',
 }))`
   font-weight: var(--font-weight-regular);
   padding: 0;

package/src/Markdown/index.ts

@@ -6,4 +6,4 @@ export * from '@theme/Markdown/Heading';
 export * from '@theme/Markdown/MarkdownLayout';
 export * from '@theme/Markdown/Mermaid';
 export * from '@theme/Markdown/PageWrapper';
-export * from '@theme/Markdown/StyledMarkdown';
+export * from '@theme/Markdown/MarkdownWrapper';

package/src/Navbar/Navbar.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { useThemeSettings } from '@portal/hooks';
-import { USER_THEME_ALIAS } from '@portal/constants';
+import { DEFAULT_THEME_NAME } from '@portal/constants';
 import { ResolvedConfigLinks } from '@theme/types/portal';
 import { NavbarMenu } from '@theme/Navbar';
 
@@ -13,7 +13,7 @@ interface NavbarProps {
 }
 
 export function Navbar({ menu, logo, search }: NavbarProps): JSX.Element | null {
-  const settings = useThemeSettings(USER_THEME_ALIAS);
+  const settings = useThemeSettings(DEFAULT_THEME_NAME);
   const searchSettings = settings.search;
   const hideSearch =
     searchSettings?.hide || (searchSettings?.placement && searchSettings?.placement !== 'navbar');

package/src/OperationBadge/OperationBadge.ts

@@ -2,6 +2,7 @@ import styled from 'styled-components';
 
 export const OperationBadge = styled.span.attrs((props: { type: string }) => ({
   className: `operation-type ${props.type}`,
+  'data-component-name': 'OperationBadge/OperationBadge',
 }))<{ type: string }>`
   display: inline-flex;
   align-items: center;

package/src/PageNavigation/NextPageLink.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
+import styled from 'styled-components';
 
-import type { ResolvedNavLinkItem } from '@theme/types/portal';
-import { usePageData } from '@portal/hooks/usePageData';
-import { useThemeSettings } from '@portal/hooks';
+import type { ResolvedNavItemWithLink } from '@theme/types/portal';
+import { useThemeSettings, useSidebarSiblingsData } from '@portal/hooks';
 import { DEFAULT_THEME_NAME } from '@portal/constants';
 import { Button } from '@theme/Button/Button';
 
 interface NextPageType {
-  nextPage?: ResolvedNavLinkItem | null;
+  nextPage?: ResolvedNavItemWithLink | null;
 }
 
 export function NextPageLink(): JSX.Element {
-  const { nextPage }: NextPageType = usePageData() || {};
+  const { nextPage }: NextPageType = useSidebarSiblingsData() || {};
   const { themeSettings } = useThemeSettings(DEFAULT_THEME_NAME);
 
   if (!nextPage || themeSettings?.navigation?.hide) {
@@ -21,8 +21,17 @@ export function NextPageLink(): JSX.Element {
   const label = themeSettings?.navigation?.nextPageLink?.label || `Next to ${nextPage.label}`;
 
   return (
-    <Button variant="outlined" size="large" to={nextPage.link}>
+    <StyledButton
+      variant="outlined"
+      size="large"
+      to={nextPage.link}
+      data-component-name="PageNavigation/NextPageLink"
+    >
       {label}
-    </Button>
+    </StyledButton>
   );
 }
+
+const StyledButton = styled(Button)`
+  font-family: var(--font-family-base);
+`;

package/src/PageNavigation/PreviousPageLink.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
+import styled from 'styled-components';
 
-import type { ResolvedNavLinkItem } from '@theme/types/portal';
-import { usePageData } from '@portal/hooks/usePageData';
-import { useThemeSettings } from '@portal/hooks';
+import type { ResolvedNavItemWithLink } from '@theme/types/portal';
+import { useThemeSettings, useSidebarSiblingsData } from '@portal/hooks';
 import { DEFAULT_THEME_NAME } from '@portal/constants';
 import { Button } from '@theme/Button/Button';
 
 interface PreviousPageType {
-  prevPage?: ResolvedNavLinkItem | null;
+  prevPage?: ResolvedNavItemWithLink | null;
 }
 
 export function PreviousPageLink(): JSX.Element {
-  const { prevPage }: PreviousPageType = usePageData() || {};
+  const { prevPage }: PreviousPageType = useSidebarSiblingsData() || {};
   const { themeSettings } = useThemeSettings(DEFAULT_THEME_NAME);
 
   if (!prevPage || themeSettings?.navigation?.hide) {
@@ -21,8 +21,17 @@ export function PreviousPageLink(): JSX.Element {
   const label = themeSettings?.navigation?.nextPageLink?.label || `Back to ${prevPage.label}`;
 
   return (
-    <Button variant="outlined" size="large" to={prevPage.link}>
+    <StyledButton
+      variant="outlined"
+      size="large"
+      to={prevPage.link}
+      data-component-name="PageNavigation/PreviousPageLink"
+    >
       {label}
-    </Button>
+    </StyledButton>
   );
 }
+
+const StyledButton = styled(Button)`
+  font-family: var(--font-family-base);
+`;

package/src/Panel/CodePanel.ts

@@ -7,7 +7,9 @@ import { DarkHeader } from '@theme/Panel/DarkHeader';
 import { PanelBody } from '@theme/Panel/PanelBody';
 import { PanelHeaderTitle } from '@theme/Panel/PanelHeaderTitle';
 
-export const CodePanel = styled(Panel)`
+export const CodePanel = styled(Panel).attrs(() => ({
+  'data-component-name': 'Panel/CodePanel',
+}))`
   > ${PanelHeader} {
     ${DarkHeader};
     min-height: 50px;

package/src/Panel/ContentPanel.ts

@@ -6,7 +6,9 @@ import { Panel } from '@theme/Panel/Panel';
 import { PanelBody } from '@theme/Panel/PanelBody';
 import { PanelHeader } from '@theme/Panel/PanelHeader';
 
-export const ContentPanel = styled(Panel)`
+export const ContentPanel = styled(Panel).attrs(() => ({
+  'data-component-name': 'Panel/ContentPanel',
+}))`
   border: 1px solid var(--global-border-color);
 
   font-size: var(--font-size-base);