@redocly/theme 0.9.0-beta.2 → 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/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/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.2",
+  "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/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 {