@redocly/theme 0.9.0-beta.1 → 0.9.0-beta.3

package/lib/Cards/Card.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ResolvedNavItem } from '@theme/types/portal';
 export interface CardProps {
     title?: string;

package/lib/Catalog/Catalog.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { CatalogConfig } from '@theme/types/portal/src/shared/types/catalog';
 export default function Catalog(props: {
     pageProps: {

package/lib/Catalog/CatalogCard.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { CatalogItem } from '@theme/types/portal/src/shared/types/catalog';
 export declare function CatalogCard({ item }: {
     item: CatalogItem;

package/lib/Catalog/Filter.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalog';
 export declare function Filter({ filter }: {
     filter: ResolvedFilter;

package/lib/Catalog/Tags.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare function Tags({ tags }: {
     tags: string[];
 }): JSX.Element;

package/lib/ColorModeSwitcher/ColorModeSwitcher.d.ts

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

package/lib/CopyButton/CopyButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface CopyButtonProps {
     text: string;
     dataTestId?: string;

package/lib/EditPageButton/EditPageButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface EditPageButtonProps {
     text: string;
     to: string;

package/lib/Feedback/Comment.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { CommentProps } from '../Feedback';
 export declare const Comment: ({ settings, onSubmit }: CommentProps) => JSX.Element;

package/lib/Feedback/Rating.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { RatingProps } from '../Feedback';
 export declare const Rating: ({ settings, onSubmit }: RatingProps) => JSX.Element;

package/lib/Feedback/Reasons.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { ReasonsProps } from '../Feedback';
 export declare const Reasons: ({ settings, onSubmit }: ReasonsProps) => JSX.Element;

package/lib/Feedback/ReportDialog.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { ReportDialogProps } from '../Feedback';
 export declare const ReportDialog: ({ location, settings, onSubmit, onCancel, }: ReportDialogProps) => JSX.Element;

package/lib/Feedback/Sentiment.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { SentimentProps } from '../Feedback';
 export declare const Sentiment: ({ settings, onSubmit }: SentimentProps) => JSX.Element;

package/lib/Feedback/Thumbs.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const ThumbUp: ({ text }: {
     text?: string | undefined;
 }) => JSX.Element;

package/lib/Footer/CustomFooter.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { NavGroupRecord } from '@theme/types/portal';
 interface FooterProps {
     data: NavGroupRecord;

package/lib/Footer/CustomFooterNavItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ResolvedNavItem } from '@theme/types/portal';
 interface CustomFooterNavItemProps {
     navItem: ResolvedNavItem;

package/lib/Footer/Footer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { NavGroup } from '@theme/types/portal';
 interface FooterProps {
     data: {

package/lib/Footer/FooterColumn.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ResolvedNavItem } from '@theme/types/portal';
 interface FooterColumnProps {
     column: ResolvedNavItem;

package/lib/Footer/FooterColumns.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ResolvedNavItem } from '@theme/types/portal';
 interface FooterColumnsProps {
     columns: ResolvedNavItem[];

package/lib/Footer/FooterCopyright.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { NavGroup } from '@theme/types/portal';
 interface FooterCopyrightProps {
     copyrightText: NavGroup;

package/lib/LastUpdated/LastUpdated.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const FORMATS: {
     timeago: (date: Date, locale: string) => string;
     iso: (date: Date) => string;

package/lib/Markdown/CodeSample/CodeSample.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type CodeSampleProps = {
     language: string;
     highlighted: string;

package/lib/Markdown/Mermaid.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type MermaidProps = {
     diagramHtml: string;
 };

package/lib/Markdown/Tabs/Tab.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type TabProps = {
     activeTab: string;
     label: string;

package/lib/Navbar/MobileNavbarDropdown.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ResolvedNavLinkItem } from '@theme/types/portal';
 interface NavbarDropdownProps {
     items: ResolvedNavLinkItem[];

package/lib/Navbar/MobileNavbarItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Link } from '../mocks/Link';
 import type { ResolvedNavItem } from '@theme/types/portal';
 export interface NavbarItemProps {

package/lib/Navbar/MobileNavbarMenuButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const MobileNavbarMenuButton: import("styled-components").StyledComponent<({ onClick, className }: import("../ui/Burger").BurgerProps) => JSX.Element, any, {
     'data-component-name': string;
 }, "data-component-name">;

package/lib/Navbar/NavbarDropdown.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ResolvedNavLinkItem } from '@theme/types/portal';
 interface NavbarDropdownProps {
     items: ResolvedNavLinkItem[];

package/lib/Navbar/NavbarItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Link } from '../mocks/Link';
 import type { ResolvedNavItem } from '@theme/types/portal';
 export interface NavbarItemProps {

package/lib/Navbar/NavbarMenu.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ResolvedConfigLinks } from '@theme/types/portal';
 export declare function NavbarMenu({ menuItems }: {
     menuItems: ResolvedConfigLinks;

package/lib/NavbarLogo/NavbarLogo.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { LogoConfig } from '@theme/types/portal';
 export type NavbarLogoProps = {
     logo: Pick<LogoConfig, 'image' | 'link' | 'altText'>;

package/lib/PageNavigation/NextButton.d.ts

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

package/lib/PageNavigation/PageNavigation.d.ts

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

package/lib/PageNavigation/PreviousButton.d.ts

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

package/lib/Pages/Forbidden.d.ts

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

package/lib/Pages/NotFound.d.ts

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

package/lib/Profile/LoginLink.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface LoginLinkProps {
     href: string;
 }

package/lib/Profile/UserProfile.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface UserProfileProps {
     userInfo: {
         isAuthenticated: boolean;

package/lib/ReferenceDocs/TryItSecurity.d.ts

@@ -0,0 +1,2 @@
+import type { BeforeSecurityPanelHookProps } from '@redocly/openapi-docs';
+export declare const TryItSecurity: ((props: BeforeSecurityPanelHookProps) => JSX.Element) | undefined;

package/lib/ReferenceDocs/TryItSecurity.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TryItSecurity = void 0;
+exports.TryItSecurity = undefined;
+//# sourceMappingURL=TryItSecurity.js.map

package/lib/Search/Parameters.d.ts

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

package/lib/Search/Search.d.ts

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

package/lib/Search/SearchItem.d.ts

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

package/lib/Search/ShortcutKey.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface ShortcutKeyProps {
     keyShortcuts?: string | string[];
 }

package/lib/Search/utils.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const highlight: (text: string | string[]) => JSX.Element | string;

package/lib/Sidebar/ApiCallItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { MenuItemProps } from '../Sidebar/types/MenuItemProps';
 export declare function ApiCallItem({ item }: MenuItemProps): JSX.Element;
 export declare const Badge: import("styled-components").StyledComponent<"span", any, {

package/lib/Sidebar/ArrowBack.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const ArrowBack: import("styled-components").StyledComponent<({ className }: {
     className?: string | undefined;
 }) => JSX.Element, any, {}, never>;

package/lib/Sidebar/DrilldownMenuItem.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { MenuItemProps } from '../Sidebar/types/MenuItemProps';
 export declare function DrilldownMenuItem({ item }: MenuItemProps): JSX.Element;

package/lib/Sidebar/ExternalIcon.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const ExternalIcon: import("styled-components").StyledComponent<({ className }: {
     className?: string | undefined;
 }) => JSX.Element, any, {}, never>;

package/lib/Sidebar/MenuContainer.d.ts

@@ -1,3 +1,5 @@
-export declare const MenuContainer: import("styled-components").StyledComponent<"div", any, {
-    'data-component-name': string;
-}, "data-component-name">;
+interface MenuContainerProps {
+    growContent?: boolean;
+}
+export declare const MenuContainer: import("styled-components").StyledComponent<"div", any, MenuContainerProps, never>;
+export {};

package/lib/Sidebar/MenuContainer.js

@@ -5,12 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuContainer = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.MenuContainer = styled_components_1.default.div.attrs(() => ({
+exports.MenuContainer = styled_components_1.default.div.attrs(({ growContent }) => ({
     'data-component-name': 'Sidebar/MenuContainer',
+    growContent: growContent === undefined ? true : growContent,
 })) `
   position: relative;
   overflow-y: auto;
-  flex-grow: 1;
+  flex-grow: ${({ growContent }) => (growContent ? 1 : 0)};
   padding-top: var(--sidebar-offset-top);
 `;
 //# sourceMappingURL=MenuContainer.js.map

package/lib/Sidebar/MenuItem.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { MenuItemProps } from '../Sidebar/types/MenuItemProps';
 export declare function MenuItem({ item }: MenuItemProps): JSX.Element;

package/lib/Sidebar/Separator.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { MenuItemProps } from '../Sidebar/types/MenuItemProps';
 export declare function Separator({ item }: MenuItemProps): JSX.Element;

package/lib/Sidebar/SidebarLayout.d.ts

@@ -7,7 +7,9 @@ interface SidebarLayoutProps {
         slug: string;
     };
     footer?: React.ReactNode;
+    header?: React.ReactNode;
+    growContent?: boolean;
     hasNavbar: boolean;
 }
-export declare function SidebarLayout({ versions, menu, backLink, footer, hasNavbar, }: SidebarLayoutProps): JSX.Element | null;
+export declare function SidebarLayout({ versions, menu, backLink, footer, header, growContent, hasNavbar, }: SidebarLayoutProps): JSX.Element | null;
 export {};

package/lib/Sidebar/SidebarLayout.js

@@ -15,7 +15,7 @@ const useThemeConfig_1 = require("../hooks/useThemeConfig");
 const ArrowBack_1 = require("../Sidebar/ArrowBack");
 const Link_1 = require("../mocks/Link");
 const Button_1 = require("../Button/Button");
-function SidebarLayout({ versions, menu, backLink, footer, hasNavbar, }) {
+function SidebarLayout({ versions, menu, backLink, footer, header, growContent, hasNavbar, }) {
     const [isOpen, setIsOpen] = (0, useMobileMenu_1.useMobileMenu)();
     const toggleMenu = () => setIsOpen(!isOpen);
     const { search, sidebar } = (0, useThemeConfig_1.useThemeConfig)();
@@ -26,6 +26,7 @@ function SidebarLayout({ versions, menu, backLink, footer, hasNavbar, }) {
         react_1.default.createElement(MobileSidebarButton_1.MobileSidebarButton, { opened: isOpen, onClick: toggleMenu }),
         !(search === null || search === void 0 ? void 0 : search.hide) && (search === null || search === void 0 ? void 0 : search.placement) === 'sidebar' ? react_1.default.createElement(SidebarSearch_1.SidebarSearch, null) : null,
         react_1.default.createElement(Sidebar_1.Sidebar, { animate: true, opened: isOpen, hasNavbar: hasNavbar },
+            header ? react_1.default.createElement(HeaderWrapper, null, header) : null,
             (backLink && (react_1.default.createElement(BackLinkWrapper, null,
                 react_1.default.createElement(Link_1.Link, { to: backLink.slug },
                     react_1.default.createElement(ArrowBack_1.ArrowBack, null),
@@ -33,7 +34,7 @@ function SidebarLayout({ versions, menu, backLink, footer, hasNavbar, }) {
                     backLink.label)))) ||
                 null,
             versions,
-            react_1.default.createElement(MenuContainer_1.MenuContainer, null, menu),
+            react_1.default.createElement(MenuContainer_1.MenuContainer, { growContent: growContent }, menu),
             footer ? react_1.default.createElement(FooterWrapper, null, footer) : null)));
 }
 exports.SidebarLayout = SidebarLayout;
@@ -46,6 +47,10 @@ const FooterWrapper = styled_components_1.default.div `
     margin: 0;
   }
 `;
+const HeaderWrapper = styled_components_1.default.div `
+  padding: var(--sidebar-offset-top) var(--sidebar-item-padding-horizontal)
+    var(--sidebar-item-padding-horizontal) var(--sidebar-offset-left);
+`;
 const BackLinkWrapper = styled_components_1.default.div `
   padding: var(--sidebar-offset-top) var(--sidebar-item-padding-horizontal)
     var(--sidebar-item-padding-horizontal)

package/lib/SidebarLogo/SidebarLogo.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface LogoProps {
     imageUrl?: string;
     href?: string;

package/lib/SourceCode/SourceCode.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
 interface CommonCodeProps {
     withLineNumbers?: boolean;
     startLineNumber?: number;
+    className?: string;
 }
 export interface SourceCodeProps extends CommonCodeProps {
     lang: string;
@@ -27,6 +27,6 @@ export interface ExternalSource {
     properties?: any;
     operation?: any;
 }
-export declare function Code({ source, lang, dataTestId, withLineNumbers, startLineNumber, }: CodeProps): JSX.Element;
-export declare function SourceCode({ lang, source, externalSource, onCopyClick, withCopyButton, dataTestId, withLineNumbers, startLineNumber, }: SourceCodeProps): JSX.Element;
+export declare function Code({ source, lang, dataTestId, withLineNumbers, startLineNumber, className, }: CodeProps): JSX.Element;
+export declare function SourceCode({ lang, source, externalSource, onCopyClick, withCopyButton, dataTestId, withLineNumbers, startLineNumber, className, }: SourceCodeProps): JSX.Element;
 export {};

package/lib/SourceCode/SourceCode.js

@@ -28,16 +28,16 @@ const react_1 = __importStar(require("react"));
 const utils_1 = require("../utils");
 const SamplesPanelControls_1 = require("../SamplesPanelControls");
 const CopyButton_1 = require("../CopyButton");
-function Code({ source, lang, dataTestId, withLineNumbers, startLineNumber, }) {
+function Code({ source, lang, dataTestId, withLineNumbers, startLineNumber, className, }) {
     const highlightedCode = (0, utils_1.highlight)(source, lang);
-    return (react_1.default.createElement(SamplesPanelControls_1.PreformattedCodeBlock, { dangerouslySetInnerHTML: {
+    return (react_1.default.createElement(SamplesPanelControls_1.PreformattedCodeBlock, { className: className, dangerouslySetInnerHTML: {
             __html: withLineNumbers
                 ? (0, utils_1.addLineNumbers)(highlightedCode, startLineNumber)
                 : highlightedCode,
         }, "data-cy": dataTestId }));
 }
 exports.Code = Code;
-function SourceCode({ lang, source, externalSource, onCopyClick, withCopyButton, dataTestId = 'source-code', withLineNumbers, startLineNumber, }) {
+function SourceCode({ lang, source, externalSource, onCopyClick, withCopyButton, dataTestId = 'source-code', withLineNumbers, startLineNumber, className, }) {
     const [sourceCode, setSourceCode] = (0, react_1.useState)(source !== null && source !== void 0 ? source : '');
     // The same initial value should be returned for ssr and frontend to avoid issues
     // Because we don't have session storage in ssr and can't get the security details there
@@ -52,9 +52,9 @@ function SourceCode({ lang, source, externalSource, onCopyClick, withCopyButton,
     if (withCopyButton) {
         return (react_1.default.createElement(CopyButton_1.CopyButtonWrapper, { data: sourceCode, onCopyClick: onCopyClick, "data-component-name": "SourceCode/SourceCode" }, ({ renderCopyButton }) => (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: sourceCode, withLineNumbers: withLineNumbers, startLineNumber: startLineNumber, dataTestId: dataTestId })))));
+            react_1.default.createElement(Code, { lang: lang, source: sourceCode, withLineNumbers: withLineNumbers, startLineNumber: startLineNumber, dataTestId: dataTestId, className: className })))));
     }
-    return (react_1.default.createElement(Code, { dataTestId: dataTestId, lang: lang, source: sourceCode, withLineNumbers: withLineNumbers, startLineNumber: startLineNumber, "data-component-name": "SourceCode/SourceCode" }));
+    return (react_1.default.createElement(Code, { dataTestId: dataTestId, className: className, lang: lang, source: sourceCode, withLineNumbers: withLineNumbers, startLineNumber: startLineNumber, "data-component-name": "SourceCode/SourceCode" }));
 }
 exports.SourceCode = SourceCode;
 //# sourceMappingURL=SourceCode.js.map

package/lib/TableOfContent/TableOfContent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { MdHeading } from '@theme/types/portal';
 interface TableOfContentProps {
     headings?: Array<MdHeading | null> | null | undefined;

package/lib/globalStyle.js

@@ -1985,6 +1985,7 @@ exports.styles = (0, styled_components_1.css) `
 
     background-color: var(--background-color);
     color: var(--text-color);
+    font-family: var(--font-family-base);
   }
 
   :root.dark {

package/lib/icons/AlertIcon/AlertIcon.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface AlertIconProps {
     type: 'warning' | 'success' | 'danger' | 'attention' | 'info';
     className?: string;

package/lib/icons/ArrowIcon/ArrowIcon.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface ArrowIconProps {
     direction?: 'up' | 'right' | 'left' | 'down';
 }

package/lib/icons/ColorModeIcon/ColorModeIcon.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface ColorModeIconProps {
     mode?: 'dark' | 'light' | string;
     className?: string;

package/lib/mocks/Link.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare function Link(props: any): JSX.Element;

package/lib/ui/Dropdown.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { Version } from '@theme/types/portal';
 type DropdownProps = {
     items: Version[];

package/package.json

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

package/src/ReferenceDocs/TryItSecurity.tsx

@@ -0,0 +1,4 @@
+import type { BeforeSecurityPanelHookProps } from '@redocly/openapi-docs';
+
+export const TryItSecurity: ((props: BeforeSecurityPanelHookProps) => JSX.Element) | undefined =
+  undefined;

package/src/Sidebar/MenuContainer.tsx

@@ -1,10 +1,15 @@
 import styled from 'styled-components';
 
-export const MenuContainer = styled.div.attrs(() => ({
+interface MenuContainerProps {
+  growContent?: boolean;
+}
+
+export const MenuContainer = styled.div.attrs<MenuContainerProps>(({ growContent }) => ({
   'data-component-name': 'Sidebar/MenuContainer',
-}))`
+  growContent: growContent === undefined ? true : growContent,
+}))<MenuContainerProps>`
   position: relative;
   overflow-y: auto;
-  flex-grow: 1;
+  flex-grow: ${({ growContent }) => (growContent ? 1 : 0)};
   padding-top: var(--sidebar-offset-top);
 `;

package/src/Sidebar/SidebarLayout.tsx

@@ -19,6 +19,8 @@ interface SidebarLayoutProps {
     slug: string;
   };
   footer?: React.ReactNode;
+  header?: React.ReactNode;
+  growContent?: boolean;
 
   hasNavbar: boolean;
 }
@@ -28,6 +30,8 @@ export function SidebarLayout({
   menu,
   backLink,
   footer,
+  header,
+  growContent,
   hasNavbar,
 }: SidebarLayoutProps): JSX.Element | null {
   const [isOpen, setIsOpen] = useMobileMenu();
@@ -44,6 +48,7 @@ export function SidebarLayout({
 
       {!search?.hide && search?.placement === 'sidebar' ? <SidebarSearch /> : null}
       <Sidebar animate={true} opened={isOpen} hasNavbar={hasNavbar}>
+        {header ? <HeaderWrapper>{header}</HeaderWrapper> : null}
         {(backLink && (
           <BackLinkWrapper>
             <Link to={backLink.slug}>
@@ -54,7 +59,7 @@ export function SidebarLayout({
         )) ||
           null}
         {versions}
-        <MenuContainer>{menu}</MenuContainer>
+        <MenuContainer growContent={growContent}>{menu}</MenuContainer>
         {footer ? <FooterWrapper>{footer}</FooterWrapper> : null}
       </Sidebar>
     </Wrapper>
@@ -71,6 +76,11 @@ const FooterWrapper = styled.div`
   }
 `;
 
+const HeaderWrapper = styled.div`
+  padding: var(--sidebar-offset-top) var(--sidebar-item-padding-horizontal)
+    var(--sidebar-item-padding-horizontal) var(--sidebar-offset-left);
+`;
+
 const BackLinkWrapper = styled.div`
   padding: var(--sidebar-offset-top) var(--sidebar-item-padding-horizontal)
     var(--sidebar-item-padding-horizontal)

package/src/SourceCode/SourceCode.tsx

@@ -11,6 +11,7 @@ import { CopyButtonWrapper } from '@theme/CopyButton';
 interface CommonCodeProps {
   withLineNumbers?: boolean;
   startLineNumber?: number;
+  className?: string;
 }
 
 export interface SourceCodeProps extends CommonCodeProps {
@@ -49,11 +50,13 @@ export function Code({
   dataTestId,
   withLineNumbers,
   startLineNumber,
+  className,
 }: CodeProps): JSX.Element {
   const highlightedCode = highlight(source, lang);
 
   return (
     <PreformattedCodeBlock
+      className={className}
       dangerouslySetInnerHTML={{
         __html: withLineNumbers
           ? addLineNumbers(highlightedCode, startLineNumber)
@@ -73,6 +76,7 @@ export function SourceCode({
   dataTestId = 'source-code',
   withLineNumbers,
   startLineNumber,
+  className,
 }: SourceCodeProps): JSX.Element {
   const [sourceCode, setSourceCode] = useState<string>(source ?? '');
 
@@ -102,6 +106,7 @@ export function SourceCode({
               withLineNumbers={withLineNumbers}
               startLineNumber={startLineNumber}
               dataTestId={dataTestId}
+              className={className}
             />
           </SampleControlsWrap>
         )}
@@ -112,6 +117,7 @@ export function SourceCode({
   return (
     <Code
       dataTestId={dataTestId}
+      className={className}
       lang={lang}
       source={sourceCode}
       withLineNumbers={withLineNumbers}

package/src/globalStyle.ts

@@ -2013,6 +2013,7 @@ export const styles = css`
 
     background-color: var(--background-color);
     color: var(--text-color);
+    font-family: var(--font-family-base);
   }
 
   :root.dark {