@redocly/theme 0.82.2-rc.2 → 0.82.4-rc.1

package/lib/components/Markdown/Markdown.js

@@ -33,14 +33,13 @@ exports.Markdown = styled_components_1.default.main.attrs(({ className }) => ({
     'data-component-name': 'Markdown/Markdown',
     className,
 })) `
-  font-weight: var(--font-weight-regular);
+  font-size: var(--md-content-font-size);
+  font-family: var(--md-content-font-family);
+  font-weight: var(--md-content-font-weight);
+  line-height: var(--md-content-line-height);
+  color: var(--md-content-text-color);
   padding: 0;
 
-  color: var(--text-color-secondary);
-  font-size: var(--font-size-base);
-  font-family: var(--font-family-base);
-  line-height: var(--line-height-base);
-
   ${({ compact }) => compact &&
     (0, styled_components_1.css) `
       p:first-child {
@@ -54,7 +53,7 @@ exports.Markdown = styled_components_1.default.main.attrs(({ className }) => ({
   ${({ base }) => base &&
     (0, styled_components_1.css) `
       p {
-        font-size: var(--font-size-base);
+        font-size: var(--md-content-font-size);
       }
     `}
 
@@ -122,37 +121,37 @@ exports.Markdown = styled_components_1.default.main.attrs(({ className }) => ({
   }
 
   h1.md {
-    ${(0, theme_helpers_1.typography)('h1', 'h')};
+    ${(0, theme_helpers_1.typography)('h1')};
     margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;
     ${(0, headingAnchor_1.headingAnchorCss)()};
   }
 
   h2.md {
-    ${(0, theme_helpers_1.typography)('h2', 'h')};
+    ${(0, theme_helpers_1.typography)('h2')};
     margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;
     ${(0, headingAnchor_1.headingAnchorCss)()};
   }
 
   h3.md {
-    ${(0, theme_helpers_1.typography)('h3', 'h')};
+    ${(0, theme_helpers_1.typography)('h3')};
     margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;
     ${(0, headingAnchor_1.headingAnchorCss)()};
   }
 
   h4.md {
-    ${(0, theme_helpers_1.typography)('h4', 'h')};
+    ${(0, theme_helpers_1.typography)('h4')};
     margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;
     ${(0, headingAnchor_1.headingAnchorCss)()};
   }
 
   h5.md {
-    ${(0, theme_helpers_1.typography)('h5', 'h')};
+    ${(0, theme_helpers_1.typography)('h5')};
     margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;
     ${(0, headingAnchor_1.headingAnchorCss)()};
   }
 
   h6.md {
-    ${(0, theme_helpers_1.typography)('h6', 'h')};
+    ${(0, theme_helpers_1.typography)('h6')};
     margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;
     ${(0, headingAnchor_1.headingAnchorCss)()};
   }

package/lib/components/Markdown/variables.js

@@ -9,6 +9,11 @@ exports.markdown = (0, styled_components_1.css) `
 
   --md-content-max-width: 910px;
   --md-content-padding: 25px 0px 25px 0px; // @presenter Spacing
+  --md-content-font-size: var(--font-size-base); // @presenter FontSize
+  --md-content-font-family: var(--font-family-base); // @presenter FontFamily
+  --md-content-line-height: var(--line-height-base); // @presenter LineHeight
+  --md-content-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --md-content-text-color: var(--text-color-secondary); // @presenter Color
 
   /**
   * @tokens Markdown Blockquote
@@ -33,7 +38,7 @@ exports.markdown = (0, styled_components_1.css) `
   * @tokens Markdown Table
   */
 
-  --md-table-font-size: var(--font-size-base); // @presenter FontSize
+  --md-table-font-size: var(--md-content-font-size); // @presenter FontSize
   --md-table-line-height: var(--line-height-md); // @presenter FontSize
   --md-table-margin-vertical: 20px; // @presenter Spacing
   --md-table-bg-color: transparent; // @presenter Color
@@ -83,10 +88,10 @@ exports.markdown = (0, styled_components_1.css) `
 
   --md-numbered-list-number-display: none;
   --md-numbered-list-item-style: var(--md-list-item-style);
-  --md-numbered-list-number-text-color: var(--text-color-secondary); // @presenter Color
-  --md-numbered-list-number-font-size: var(--font-size-base); // @presenter FontSize
-  --md-numbered-list-number-font-family: var(--font-size-base); // @presenter FontFamily
-  --md-numbered-list-number-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --md-numbered-list-number-text-color: var(--md-content-text-color); // @presenter Color
+  --md-numbered-list-number-font-size: var(--md-content-font-size); // @presenter FontSize
+  --md-numbered-list-number-font-family: var(--md-content-font-family); // @presenter FontFamily
+  --md-numbered-list-number-font-weight: var(--md-content-font-weight); // @presenter FontWeight
   --md-numbered-list-number-bg-color: var(--bg-color-active); // @presenter Color
   --md-numbered-list-number-border-radius: 10px; // @presenter BorderRadius
   --md-numbered-list-number-margin-right: 5px; // @presenter Spacing

package/lib/components/Menu/Menu.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { DrilldownMenuItemDetails, ItemState } from '../../core/types';
-type MenuListProps = {
+export type MenuListProps = {
     items: ItemState[];
     depth?: number;
     isMobile?: boolean;
@@ -8,4 +8,3 @@ type MenuListProps = {
     onDrilldownOpen?: (drilldownDetails: DrilldownMenuItemDetails) => void;
 };
 export declare function Menu({ depth, items, className, isMobile, onDrilldownOpen, }: MenuListProps): JSX.Element;
-export {};

package/lib/components/Menu/MenuContainer.d.ts

@@ -1,9 +1,9 @@
+import { type PropsWithChildren } from 'react';
 import type { MenuItemsAnimation } from '../../core/types';
-type MenuContainerProps = {
+export type MenuContainerProps = PropsWithChildren<{
     growContent?: boolean;
     className?: string;
     hidden?: boolean;
     animation?: MenuItemsAnimation;
-};
-export declare const MenuContainer: import("styled-components").StyledComponent<"div", any, MenuContainerProps, never>;
-export {};
+}>;
+export declare function MenuContainer(props: MenuContainerProps): JSX.Element;

package/lib/components/Menu/MenuContainer.js

@@ -22,9 +22,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuContainer = void 0;
+const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
+function MenuContainer(props) {
+    return react_1.default.createElement(MenuContainerComponent, Object.assign({}, props, { "data-component-name": "Menu/MenuContainer" }));
+}
+exports.MenuContainer = MenuContainer;
 const slideInRightAnimation = (0, styled_components_1.keyframes) `
   0% {
     transform: translateX(100%)
@@ -41,8 +49,7 @@ const slideInLeftAnimation = (0, styled_components_1.keyframes) `
     transform: translateX(0%)
   }
 `;
-exports.MenuContainer = styled_components_1.default.div.attrs(({ growContent, className, animation }) => ({
-    'data-component-name': 'Menu/MenuContainer',
+const MenuContainerComponent = styled_components_1.default.div.attrs(({ growContent, className, animation }) => ({
     growContent: growContent === undefined ? true : growContent,
     className,
     animation,
@@ -58,7 +65,7 @@ exports.MenuContainer = styled_components_1.default.div.attrs(({ growContent, cl
   position: relative;
   overflow-y: auto;
   flex-grow: ${({ growContent }) => (growContent ? 1 : 0)};
-  padding-top: var(--sidebar-offset-top);
+  padding-top: var(--menu-container-padding-top);
   display: ${({ hidden }) => (hidden ? 'none' : 'block')};
   overscroll-behavior: contain;
 `;

package/lib/components/Menu/MenuMobile.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-type MobileMenuProps = {
+export type MobileMenuProps = {
     className?: string;
     hideUserProfile?: boolean;
 };
 export declare function MenuMobile({ className, hideUserProfile }: MobileMenuProps): JSX.Element | null;
-export {};

package/lib/components/Menu/variables.js

@@ -174,5 +174,7 @@ exports.mobileMenu = (0, styled_components_1.css) `
   --menu-mobile-product-name-margin: var(--menu-item-label-margin);
 
   // @tokens End
+
+  --menu-container-padding-top: var(--sidebar-offset-top);
 `;
 //# sourceMappingURL=variables.js.map

package/lib/components/Navbar/NavbarItem.d.ts

@@ -1,8 +1,7 @@
 /// <reference types="react" />
 import type { ResolvedNavItem } from '@redocly/config';
-type NavbarItemProps = {
+export type NavbarItemProps = {
     navItem: ResolvedNavItem;
     className?: string;
 };
 export declare function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element | null;
-export {};

package/lib/components/Navbar/NavbarItem.js

@@ -70,7 +70,7 @@ exports.NavbarItem = NavbarItem;
 const NavbarMenuItemDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown) `
   --dropdown-menu-item-separator-font-size: var(--navbar-separator-font-size);
   --dropdown-menu-item-separator-text-color: var(--navbar-separator-text-color);
-  --dropdown-menu-item-separator-lin-height: var(--navbar-separator-line-height);
+  --dropdown-menu-item-separator-line-height: var(--navbar-separator-line-height);
 `;
 const NavbarMenuItem = styled_components_1.default.li `
   display: inline-block;

package/lib/components/Navbar/NavbarLogo.d.ts

@@ -1,4 +1,3 @@
-import { Logo } from '../../components/Logo/Logo';
-export declare const NavbarLogo: import("styled-components").StyledComponent<typeof Logo, any, {
-    'data-component-name': string;
-}, "data-component-name">;
+import React from 'react';
+import type { LogoProps } from '../../components/Logo/Logo';
+export declare function NavbarLogo(props: LogoProps): React.JSX.Element;

package/lib/components/Navbar/NavbarLogo.js

@@ -4,11 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavbarLogo = void 0;
+const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Logo_1 = require("../../components/Logo/Logo");
-exports.NavbarLogo = (0, styled_components_1.default)(Logo_1.Logo).attrs({
-    'data-component-name': 'Navbar/NavbarLogo',
-}) `
+function NavbarLogo(props) {
+    return react_1.default.createElement(NavbarLogoComponent, Object.assign({}, props, { "data-component-name": "Navbar/NavbarLogo" }));
+}
+exports.NavbarLogo = NavbarLogo;
+const NavbarLogoComponent = (0, styled_components_1.default)(Logo_1.Logo) `
   --logo-height: var(--navbar-logo-height);
   --logo-width: var(--navbar-logo-width);
   --logo-margin: var(--navbar-logo-margin);

package/lib/components/Navbar/NavbarMenu.d.ts

@@ -1,8 +1,7 @@
 /// <reference types="react" />
 import type { ResolvedConfigLinks } from '@redocly/config';
-type NavbarMenuProps = {
+export type NavbarMenuProps = {
     menuItems: ResolvedConfigLinks;
     className?: string;
 };
 export declare function NavbarMenu({ menuItems, className }: NavbarMenuProps): JSX.Element | null;
-export {};

package/lib/components/PageNavigation/NextButton.d.ts

@@ -1,8 +1,7 @@
 /// <reference types="react" />
 import type { ResolvedNavItemWithLink } from '@redocly/config';
-type NextPageType = {
+export type NextPageType = {
     nextPage?: ResolvedNavItemWithLink | null;
     className?: string;
 };
 export declare function NextButton({ nextPage, className }: NextPageType): JSX.Element;
-export {};

package/lib/components/PageNavigation/PageNavigation.d.ts

@@ -1,9 +1,8 @@
 /// <reference types="react" />
 import type { ResolvedNavItemWithLink } from '@redocly/config';
-type PageNavigationType = {
+export type PageNavigationType = {
     nextPage?: ResolvedNavItemWithLink | null;
     prevPage?: ResolvedNavItemWithLink | null;
     className?: string;
 };
 export declare function PageNavigation({ nextPage, prevPage, className, }: PageNavigationType): JSX.Element | null;
-export {};

package/lib/components/PageNavigation/PreviousButton.d.ts

@@ -1,8 +1,7 @@
 /// <reference types="react" />
 import type { ResolvedNavItemWithLink } from '@redocly/config';
-type PreviousPageType = {
+export type PreviousPageType = {
     prevPage?: ResolvedNavItemWithLink | null;
     className?: string;
 };
 export declare function PreviousButton({ prevPage, className }: PreviousPageType): JSX.Element;
-export {};

package/lib/components/Panel/Panel.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { PropsWithChildren, ReactNode } from 'react';
 import type { PanelHeaderProps } from '../../components/Panel/PanelHeader';
-type PanelProps = {
+export type PanelProps = {
     expanded?: boolean;
     isExpandable?: boolean;
     className?: string;
@@ -12,4 +12,3 @@ type PanelProps = {
     description?: React.ReactNode;
 };
 export declare function Panel({ expanded, isExpandable, renderChildrenHidden, header, footer, className, children, onToggle, description, }: PropsWithChildren<PanelProps>): JSX.Element;
-export {};

package/lib/components/Panel/PanelBody.d.ts

@@ -1,6 +1,5 @@
-interface PanelBodyProps {
+export type PanelBodyProps = {
     animate?: boolean;
     hidden?: boolean;
-}
+};
 export declare const PanelBody: import("styled-components").StyledComponent<"div", any, PanelBodyProps, never>;
-export {};

package/lib/components/Portal/Portal.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import type { PropsWithChildren } from 'react';
-type PortalProps = {
+export type PortalProps = {
     mountId?: string;
 };
-export declare const Portal: ({ children, mountId }: PropsWithChildren<PortalProps>) => React.JSX.Element;
-export {};
+export declare function Portal({ children, mountId, }: PropsWithChildren<PortalProps>): React.ReactPortal | JSX.Element;

package/lib/components/Portal/Portal.js

@@ -7,12 +7,12 @@ exports.Portal = void 0;
 const react_1 = __importDefault(require("react"));
 const react_dom_1 = require("react-dom");
 const utils_1 = require("../../core/utils");
-const Portal = ({ children, mountId = 'root' }) => {
+function Portal({ children, mountId = 'root', }) {
     const mount = utils_1.IS_BROWSER ? document.getElementById(mountId) || document.body : null;
     if (!mount) {
         return react_1.default.createElement(react_1.default.Fragment, null, children);
     }
     return (0, react_dom_1.createPortal)(children, mount);
-};
+}
 exports.Portal = Portal;
 //# sourceMappingURL=Portal.js.map

package/lib/components/Product/Product.d.ts

@@ -1,8 +1,7 @@
 /// <reference types="react" />
 import type { ProductConfig } from '../../config';
-type ProductProps = {
+export type ProductProps = {
     product: ProductConfig;
     className?: string;
 };
 export declare function Product({ product, className }: ProductProps): JSX.Element;
-export {};

package/lib/components/Product/ProductPicker.js

@@ -51,7 +51,6 @@ const ProductDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown).at
   --dropdown-menu-padding: var(--product-picker-dropdown-padding);
   --dropdown-menu-border-radius: var(--product-picker-dropdown-border-radius);
   --dropdown-menu-box-shadow: var(--product-picker-dropdown-box-shadow);
-  --dropdown-menu-color-disabled: var(--product-picker-dropdown-color-disabled);
   --dropdown-menu-border-color: var(--product-picker-dropdow--border-color);
   --dropdown-menu-bg-color: var(--product-picker-dropdown-bg-color);
   --dropdown-menu-item-padding-horizontal: var(--product-picker-dropdown-item-padding-horizontal);
@@ -65,9 +64,13 @@ const ProductDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown).at
   --dropdown-menu-item-border-radius: var(--product-picker-dropdown-item-border-radius);
   --dropdown-menu-item-bg-color-active: var(--product-picker-dropdown-item-bg-color-active);
   --dropdown-menu-item-bg-color-hover: var(--product-picker-dropdown-item-bg-color-hover);
+  --dropdown-menu-item-bg-color-disabled: var(--product-picker-dropdown-item-bg-color-disabled);
   --dropdown-menu-item-separator-border-color: var(
     --product-picker-dropdown-item-separator-border-color
   );
   --dropdown-menu-item-color-dangerous: var(--product-picker-dropdown-item-color-dangerous);
+  --dropdown-menu-item-color-disabled: var(--product-picker-dropdown-item-color-disabled);
+  --dropdown-menu-item-color-active: var(--product-picker-dropdown-item-color-active);
+  --dropdown-menu-item-color-hover: var(--product-picker-dropdown-item-color-hover);
 `;
 //# sourceMappingURL=ProductPicker.js.map

package/lib/components/Product/variables.js

@@ -20,7 +20,6 @@ exports.productPicker = (0, styled_components_1.css) `
   --product-picker-dropdown-padding: var(--dropdown-menu-padding ); // @presenter Spacing
   --product-picker-dropdown-border-radius: var(--dropdown-menu-border-radius); // @presenter BorderRadius
   --product-picker-dropdown-box-shadow: var(--dropdown-menu-box-shadow); // @presenter Shadow
-  --product-picker-dropdown-color-disabled: var(--dropdown-menu-color-disabled); // @presenter Color
   --product-picker-dropdown-border-color: var(--dropdown-menu-border-color); // @presenter Color
   --product-picker-dropdown-bg-color: var(--dropdown-menu-bg-color); // @presenter Color
 
@@ -31,8 +30,12 @@ exports.productPicker = (0, styled_components_1.css) `
   --product-picker-dropdown-item-border-radius: var(--dropdown-menu-item-border-radius ); // @presenter BorderRadius
   --product-picker-dropdown-item-bg-color-active: var(--dropdown-menu-item-bg-color-active); // @presenter Color
   --product-picker-dropdown-item-bg-color-hover: var(--dropdown-menu-item-bg-color-hover); // @presenter Color
+  --product-picker-dropdown-item-bg-color-disabled: var(--dropdown-menu-item-bg-color-disabled); // @presenter Color
   --product-picker-dropdown-item-separator-border-color: var(--dropdown-menu-item-separator-border-color); // @presenter Color
   --product-picker-dropdown-item-color-dangerous: var(--dropdown-menu-item-color-dangerous);
+  --product-picker-dropdown-item-color-disabled: var(--dropdown-menu-item-color-disabled);
+  --product-picker-dropdown-item-color-active: var(--dropdown-menu-item-color-active);
+  --product-picker-dropdown-item-color-hover: var(--dropdown-menu-item-color-hover);
   --product-picker-dropdown-item-border-color-focused: var(--dropdown-menu-item-border-color-focused);
 
 `;

package/lib/components/Search/Search.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
-type SearchProps = {
+export type SearchProps = {
     className?: string;
 };
 export declare function Search({ className }: SearchProps): JSX.Element;
-export {};

package/lib/components/Search/SearchDialog.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-type SearchDialogProps = {
+export type SearchDialogProps = {
     onClose: () => void;
     className?: string;
 };
 export declare function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Element;
-export {};

package/lib/components/Search/SearchInput.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-type SearchInputProps = {
+export type SearchInputProps = {
     placeholder?: string;
     value: string;
     onChange(value: string): void;
@@ -8,4 +8,3 @@ type SearchInputProps = {
     className?: string;
 };
 export declare function SearchInput({ placeholder, value, onChange, isLoading, className, }: SearchInputProps): JSX.Element;
-export {};

package/lib/components/Search/SearchItem.d.ts

@@ -3,7 +3,7 @@ import type { SearchDocument } from '../../core/types';
 type ActiveItem<T> = T & {
     active?: boolean;
 };
-type SearchItemProps = {
+export type SearchItemProps = {
     item: ActiveItem<SearchDocument>;
     product?: {
         name: string;

package/lib/components/Search/SearchRecent.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-type SearchRecentProps = {
+export type SearchRecentProps = {
     onSelect: (value: string) => void;
     className?: string;
 };
 export declare function SearchRecent({ onSelect, className }: SearchRecentProps): JSX.Element | null;
-export {};

package/lib/components/Search/SearchShortcut.d.ts

@@ -1,8 +1,7 @@
 /// <reference types="react" />
-type SearchShortcutProps = {
+export type SearchShortcutProps = {
     combination: string;
     text: string;
     className?: string;
 };
 export declare function SearchShortcut({ combination, text, className }: SearchShortcutProps): JSX.Element;
-export {};

package/lib/components/Search/SearchSuggestedPages.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
-type SearchSuggestedPagesProps = {
+export type SearchSuggestedPagesProps = {
     className?: string;
 };
 export declare function SearchSuggestedPages({ className }: SearchSuggestedPagesProps): JSX.Element | null;
-export {};

package/lib/components/Search/SearchTrigger.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-type SearchTriggerProps = {
+export type SearchTriggerProps = {
     onClick: () => void;
     className?: string;
 };
 export declare function SearchTrigger({ onClick, className }: SearchTriggerProps): JSX.Element;
-export {};

package/lib/components/Search/variables.js

@@ -51,7 +51,7 @@ exports.search = (0, styled_components_1.css) `
   --search-recent-item-line-height: var(--line-height-base); // @presenter LineHeight
   --search-recent-item-padding: var(--spacing-xs) var(--spacing-lg);
   --search-recent-item-text-color: var(--search-item-text-color); // @presenter Color
-  --search-recent-item-text-color-hover: var(--search-item-text-color-active); // @presenter Color
+  --search-recent-item-text-color-hover: var(--search-item-text-color-hover); // @presenter Color
   --search-recent-item-bg-color-hover: var(--search-item-bg-color-hover); // @presenter Color
   --search-recent-item-title-font-size: var(--font-size-base); // @presenter FontSize
   --search-recent-item-title-font-weight: var(--font-weight-semibold); // @presenter FontWeight
@@ -66,7 +66,7 @@ exports.search = (0, styled_components_1.css) `
   --search-suggested-item-line-height: var(--line-height-base); // @presenter LineHeight
   --search-suggested-item-padding: var(--spacing-xs) var(--spacing-lg);
   --search-suggested-item-text-color: var(--search-item-text-color); // @presenter Color
-  --search-suggested-item-text-color-hover: var(--search-item-text-color-active); // @presenter Color
+  --search-suggested-item-text-color-hover: var(--search-item-text-color-hover); // @presenter Color
   --search-suggested-item-bg-color-hover: var(--search-item-bg-color-hover); // @presenter Color
   --search-suggested-item-title-font-size: var(--font-size-base); // @presenter FontSize
   --search-suggested-item-title-font-weight: var(--font-weight-semibold); // @presenter FontWeight

package/lib/components/Segmented/Segmented.d.ts

@@ -1,6 +1,6 @@
 import type { ReactElement } from 'react';
 import type { SelectOption } from '../../core/types/select-option';
-type SegmentedProps<T> = {
+export type SegmentedProps<T> = {
     options: SelectOption<T>[];
     value: T;
     onChange: ({ label, value }: {

package/lib/components/Select/Select.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export interface SelectProps<T = any> {
+export type SelectProps<T = any> = {
     value: T;
     options: {
         element: React.ReactNode | JSX.Element | string;
@@ -20,8 +20,8 @@ export interface SelectProps<T = any> {
     renderInput?: (props: {
         isOpen: boolean;
     }) => React.ReactElement;
-}
-export declare function Select<T>(props: SelectProps<T>): React.JSX.Element;
+};
+export declare function Select<T>(props: SelectProps<T>): JSX.Element;
 export declare const SelectContainer: import("styled-components").StyledComponent<"div", any, {
     disabled?: boolean | undefined;
 }, never>;

package/lib/components/Sidebar/Sidebar.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { MenuItemsAnimation } from '../../core/types';
-type SidebarProps = {
+export type SidebarProps = {
     versions?: React.ReactNode;
     menu?: React.ReactNode;
     backLink?: {
@@ -17,4 +17,3 @@ type SidebarProps = {
     menuItemsAnimation?: MenuItemsAnimation;
 };
 export declare function Sidebar({ versions, menu, footer, header, growContent, collapsed, className, menuItemsAnimation, }: SidebarProps): JSX.Element | null;
-export {};

package/lib/components/SidebarActions/ChangeViewButton.d.ts

@@ -1,9 +1,8 @@
 /// <reference types="react" />
 import { LayoutVariant } from '../../components/SidebarActions/SidebarActions';
-interface ChangeViewButtonProps {
+export type ChangeViewButtonProps = {
     layout: LayoutVariant;
     collapsedSidebar: boolean;
     onClick: () => void;
-}
+};
 export declare const ChangeViewButton: ({ layout, onClick, collapsedSidebar, }: ChangeViewButtonProps) => JSX.Element | null;
-export {};

package/lib/components/SidebarActions/SidebarActions.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { LayoutVariant } from '@redocly/config';
 export { LayoutVariant };
-interface SidebarActionsProps {
+export type SidebarActionsProps = {
     layout: LayoutVariant;
     collapsedSidebar: boolean;
     isOpenapiDocs: boolean;
@@ -10,5 +10,5 @@ interface SidebarActionsProps {
     onChangeCollapseSidebarClick: () => void;
     requestAccessButton?: React.ReactElement | null;
     className?: string;
-}
+};
 export declare const SidebarActions: ({ layout, hideCollapseSidebarButton, collapsedSidebar, isOpenapiDocs, onChangeViewClick, onChangeCollapseSidebarClick, requestAccessButton, className, }: SidebarActionsProps) => React.JSX.Element;

package/lib/components/SidebarLogo/SidebarLogo.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-export interface LogoProps {
+export type SidebarLogoProps = {
     imageUrl?: string;
     href?: string;
     altText?: string;
     dataTestId?: string;
     backgroundColor?: string;
     className?: string;
-}
-export declare function SidebarLogo({ imageUrl, href, altText, backgroundColor, dataTestId, className, }?: LogoProps): JSX.Element | null;
+};
+export declare function SidebarLogo({ imageUrl, href, altText, backgroundColor, dataTestId, className, }?: SidebarLogoProps): JSX.Element | null;

package/lib/components/TableOfContent/TableOfContent.d.ts

@@ -1,9 +1,8 @@
 /// <reference types="react" />
 import type { MdHeading } from '../../core/types';
-type TableOfContentProps = {
+export type TableOfContentProps = {
     headings?: Array<MdHeading | null> | null | undefined;
     contentWrapper: HTMLDivElement | null;
     className?: string;
 };
 export declare function TableOfContent(props: TableOfContentProps): JSX.Element | null;
-export {};

package/lib/components/Tag/Tag.d.ts

@@ -5,7 +5,7 @@ type SubjectStatusColor = 'active' | 'draft' | 'deprecated' | 'product';
 type HttpColor = 'get' | 'post' | 'put' | 'delete' | 'option' | 'patch' | 'head' | 'hook' | 'link';
 type StatusColor = DefaultStatusColor | ActionStatusColor | SubjectStatusColor | HttpColor;
 type Color = 'red' | 'green' | 'blue' | 'grey' | 'gold' | 'cyan' | 'magenta' | 'purple' | 'lime' | 'geekblue' | 'yellow';
-type TagProps = {
+export type TagProps = {
     className?: string;
     children?: React.ReactNode;
     closable?: boolean;

package/lib/components/Tooltip/Tooltip.js

@@ -141,8 +141,8 @@ const TooltipBody = styled_components_1.default.span `
   position: absolute;
   text-align: center;
 
-  padding: 10px 20px;
-  max-width: 250px;
+  padding: var(--tooltip-padding);
+  max-width: var(--tooltip-max-width);
   white-space: normal;
   overflow-wrap: break-word;
 

package/lib/components/Tooltip/variables.js

@@ -10,6 +10,10 @@ exports.tooltip = (0, styled_components_1.css) `
 
   --tooltip-text-color: var(--text-color-secondary);
   --tooltip-bg-color: var(--bg-color-raised);
+  --tooltip-padding-vertical: var(--spacing-xs);
+  --tooltip-padding-horizontal: var(--spacing-sm);
+  --tooltip-padding: var(--tooltip-padding-vertical) var(--tooltip-padding-horizontal);
+  --tooltip-max-width: 250px;
 
   .tooltip-copy-button {
     --tooltip-text-color: var(--text-color-secondary);