@redocly/theme 0.6.3 → 0.6.5

package/lib/Profile/index.d.ts

@@ -1,2 +1,6 @@
 export { Profile } from './Profile';
 export type { ProfileProps } from './Profile';
+export { LoginLink } from './LoginLink';
+export type { LoginLinkProps } from './LoginLink';
+export { UserProfile } from './UserProfile';
+export type { UserProfileProps } from './UserProfile';

package/lib/Profile/index.js

@@ -1,6 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Profile = void 0;
+exports.UserProfile = exports.LoginLink = exports.Profile = void 0;
 var Profile_1 = require("./Profile");
 Object.defineProperty(exports, "Profile", { enumerable: true, get: function () { return Profile_1.Profile; } });
+var LoginLink_1 = require("./LoginLink");
+Object.defineProperty(exports, "LoginLink", { enumerable: true, get: function () { return LoginLink_1.LoginLink; } });
+var UserProfile_1 = require("./UserProfile");
+Object.defineProperty(exports, "UserProfile", { enumerable: true, get: function () { return UserProfile_1.UserProfile; } });
 //# sourceMappingURL=index.js.map

package/lib/Search/Autocomplete.js

@@ -48,6 +48,7 @@ function Autocomplete({ placeholder, value, items, change, select, renderItem, c
     const stopPropagation = (event) => event.stopPropagation();
     const onChange = (event) => {
         setActiveIdx(-1);
+        setIsOpen(true);
         change(event.target.value);
     };
     const onKeydown = (event) => {

package/lib/Search/Popover.js

@@ -13,7 +13,6 @@ exports.Popover = styled_components_1.default.div.attrs(() => ({
   right: 0;
   z-index: 100;
   min-width: 100%;
-  width: 550px;
   max-width: 90vw;
   max-height: 400px;
   overflow-y: auto;
@@ -22,5 +21,14 @@ exports.Popover = styled_components_1.default.div.attrs(() => ({
   list-style: none;
   border-radius: var(--search-popover-border-radius);
   border: var(--search-popover-border);
+  width: 100%;
+
+  ${({ theme }) => { var _a; return (_a = theme.mediaQueries) === null || _a === void 0 ? void 0 : _a.small; }} {
+    width: 400px;
+  }
+
+  ${({ theme }) => { var _a; return (_a = theme.mediaQueries) === null || _a === void 0 ? void 0 : _a.medium; }} {
+    width: 550px;
+  }
 `;
 //# sourceMappingURL=Popover.js.map

package/lib/Search/Search.js

@@ -1,10 +1,33 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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.Search = void 0;
-const react_1 = __importDefault(require("react"));
+const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const usePreloadHistory_1 = require("../mocks/usePreloadHistory");
 const search_1 = require("../mocks/search");
@@ -17,11 +40,21 @@ function Search() {
     const { query, setQuery, items } = (0, search_1.useFuseSearch)();
     // TODO: ask somebody about typings
     const navigate = (item) => history.push(item.url);
-    return (react_1.default.createElement(Wrapper, { "data-component-name": "Search/Search" },
-        react_1.default.createElement(Autocomplete_1.Autocomplete, { items: items, value: query, change: setQuery, select: navigate, placeholder: "Search the docs", renderItem: (item) => react_1.default.createElement(SearchItem_1.SearchItem, { key: item.id, item: item }) }, (isOpen, reset) => (isOpen ? react_1.default.createElement(ClearIcon_1.ClearIcon, { onClick: reset }) : react_1.default.createElement(SearchIcon_1.SearchIcon, null)))));
+    const renderAutocomplete = () => (React.createElement(Autocomplete_1.Autocomplete, { items: items, value: query, change: setQuery, select: navigate, placeholder: "Search the docs", renderItem: (item) => React.createElement(SearchItem_1.SearchItem, { key: item.id, item: item }) }, (isOpen, reset) => (isOpen ? React.createElement(ClearIcon_1.ClearIcon, { onClick: reset }) : React.createElement(SearchIcon_1.SearchIcon, null))));
+    return React.createElement(Wrapper, { "data-component-name": "Search/Search" }, renderAutocomplete());
 }
 exports.Search = Search;
 const Wrapper = styled_components_1.default.div `
-  margin: 0 auto;
+  margin-left: auto;
+
+  display: none;
+
+  ${({ theme }) => { var _a; return (_a = theme.mediaQueries) === null || _a === void 0 ? void 0 : _a.small; }} {
+    display: block;
+  }
+
+  ${({ theme }) => { var _a; return (_a = theme.mediaQueries) === null || _a === void 0 ? void 0 : _a.medium; }} {
+    margin: 0 auto;
+  }
 `;
 //# sourceMappingURL=Search.js.map

package/lib/Sidebar/ArrowBack.js

@@ -7,12 +7,12 @@ exports.ArrowBack = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Arrow = ({ className }) => (react_1.default.createElement("span", { "data-component-name": "Sidebar/ArrowBack" },
-    react_1.default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 10", width: "10px", height: "10px", className: className },
+    react_1.default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 10", width: "12px", height: "10px", className: className },
         react_1.default.createElement("path", { d: "M2.414 5l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L2.414 5z" }),
         react_1.default.createElement("path", { d: "M2 5a1 1 0 011-1h8a1 1 0 110 2H3a1 1 0 01-1-1z" }))));
 exports.ArrowBack = (0, styled_components_1.default)(Arrow) `
   fill: var(--sidebar-back-button-icon-color);
-  margin-right: calc(var(--sidebar-spacing-unit));
+  margin-right: calc(var(--sidebar-spacing-unit) * 1.5);
 
   background-image: var(--sidebar-back-button-icon);
   background-repeat: no-repeat;

package/lib/Sidebar/SidebarLayout.d.ts

@@ -2,10 +2,6 @@ import React from 'react';
 interface SidebarLayoutProps {
     versions: React.ReactNode;
     menu: React.ReactNode;
-    backLink?: {
-        label: string;
-        slug: string;
-    };
 }
-export declare function SidebarLayout({ versions, menu, backLink, }: SidebarLayoutProps): JSX.Element | null;
+export declare function SidebarLayout({ versions, menu }: SidebarLayoutProps): JSX.Element | null;
 export {};

package/lib/Sidebar/SidebarLayout.js

@@ -12,9 +12,7 @@ const MobileSidebarButton_1 = require("../Sidebar/MobileSidebarButton");
 const MenuContainer_1 = require("../Sidebar/MenuContainer");
 const SidebarSearch_1 = require("../Search/SidebarSearch");
 const useThemeConfig_1 = require("../hooks/useThemeConfig");
-const ArrowBack_1 = require("../Sidebar/ArrowBack");
-const Link_1 = require("../mocks/Link");
-function SidebarLayout({ versions, menu, backLink, }) {
+function SidebarLayout({ versions, menu }) {
     const [isOpen, setIsOpen] = (0, useMobileMenu_1.useMobileMenu)();
     const toggleMenu = () => setIsOpen(!isOpen);
     const { search, sidebar } = (0, useThemeConfig_1.useThemeConfig)();
@@ -25,32 +23,9 @@ function SidebarLayout({ versions, menu, backLink, }) {
         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 },
-            (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),
-                    "Back to ",
-                    backLink.label)))) ||
-                null,
             versions,
             react_1.default.createElement(MenuContainer_1.MenuContainer, null, menu))));
 }
 exports.SidebarLayout = SidebarLayout;
-const BackLinkWrapper = styled_components_1.default.div `
-  padding: var(--sidebar-offset-top) var(--sidebar-item-padding-horizontal)
-    var(--sidebar-item-padding-horizontal)
-    calc(var(--sidebar-offset-left) + var(--sidebar-item-padding-horizontal));
-
-  a {
-    color: var(--sidebar-back-button-text-color);
-    font-size: var(--sidebar-back-button-font-size);
-    font-family: var(--sidebar-back-button-font-family);
-    text-decoration: none;
-    &:hover {
-      color: var(--sidebar-back-button-hover-text-color);
-    }
-  }
-
-  border-bottom: 1px solid var(--sidebar-border-color);
-`;
 const Wrapper = styled_components_1.default.div ``;
 //# sourceMappingURL=SidebarLayout.js.map

package/lib/SourceCode/SourceCode.d.ts

@@ -17,7 +17,7 @@ export interface Sample {
     lang: string;
     label?: string;
 }
-export declare type UnstableExternalCodeSample = Sample & {
+export type UnstableExternalCodeSample = Sample & {
     get: (source: ExternalSource) => string;
 };
 export interface ExternalSource {

package/lib/config.d.ts

@@ -228,6 +228,20 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
         title?: string | undefined;
         href: string;
     }>, "many">>;
+    feedback: z.ZodOptional<z.ZodDefault<z.ZodObject<z.extendShape<{
+        type: z.ZodDefault<z.ZodString>;
+        settings: z.ZodOptional<z.ZodString>;
+    }, {
+        hide: z.ZodOptional<z.ZodBoolean>;
+    }>, "strict", z.ZodTypeAny, {
+        hide?: boolean | undefined;
+        settings?: string | undefined;
+        type: string;
+    }, {
+        type?: string | undefined;
+        hide?: boolean | undefined;
+        settings?: string | undefined;
+    }>>>;
     search: z.ZodOptional<z.ZodDefault<z.ZodObject<z.extendShape<{
         placement: z.ZodOptional<z.ZodDefault<z.ZodString>>;
     }, {
@@ -415,6 +429,23 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
     }>>>;
     openapi: z.ZodOptional<z.ZodObject<{}, "passthrough", z.ZodTypeAny, {}, {}>>;
     graphql: z.ZodOptional<z.ZodObject<{}, "passthrough", z.ZodTypeAny, {}, {}>>;
+    userProfile: z.ZodDefault<z.ZodOptional<z.ZodObject<z.extendShape<{
+        loginLabel: z.ZodOptional<z.ZodDefault<z.ZodString>>;
+        logoutLabel: z.ZodOptional<z.ZodDefault<z.ZodString>>;
+        logoutRedirect: z.ZodOptional<z.ZodDefault<z.ZodString>>;
+    }, {
+        hide: z.ZodOptional<z.ZodBoolean>;
+    }>, "strip", z.ZodTypeAny, {
+        hide?: boolean | undefined;
+        loginLabel?: string | undefined;
+        logoutLabel?: string | undefined;
+        logoutRedirect?: string | undefined;
+    }, {
+        hide?: boolean | undefined;
+        loginLabel?: string | undefined;
+        logoutLabel?: string | undefined;
+        logoutRedirect?: string | undefined;
+    }>>>;
 }, "passthrough", z.ZodTypeAny, {
     imports?: string[] | undefined;
     logo?: {
@@ -480,6 +511,11 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
         title?: string | undefined;
         href: string;
     }[] | undefined;
+    feedback?: {
+        hide?: boolean | undefined;
+        settings?: string | undefined;
+        type: string;
+    } | undefined;
     search?: {
         hide?: boolean | undefined;
         placement?: string | undefined;
@@ -527,6 +563,12 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
             text: string;
         };
     };
+    userProfile: {
+        hide?: boolean | undefined;
+        loginLabel?: string | undefined;
+        logoutLabel?: string | undefined;
+        logoutRedirect?: string | undefined;
+    };
 }, {
     imports?: string[] | undefined;
     logo?: {
@@ -592,6 +634,11 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
         title?: string | undefined;
         href: string;
     }[] | undefined;
+    feedback?: {
+        type?: string | undefined;
+        hide?: boolean | undefined;
+        settings?: string | undefined;
+    } | undefined;
     search?: {
         hide?: boolean | undefined;
         placement?: string | undefined;
@@ -639,9 +686,15 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
     } | undefined;
     openapi?: {} | undefined;
     graphql?: {} | undefined;
+    userProfile?: {
+        hide?: boolean | undefined;
+        loginLabel?: string | undefined;
+        logoutLabel?: string | undefined;
+        logoutRedirect?: string | undefined;
+    } | undefined;
 }>>;
-export declare type ThemeConfig = z.infer<typeof ThemeConfig>;
-export declare type ThemeUIConfig = Omit<ThemeConfig, 'navbar' | 'footer' | 'links' | 'scripts'> & {
+export type ThemeConfig = z.infer<typeof ThemeConfig>;
+export type ThemeUIConfig = Omit<ThemeConfig, 'navbar' | 'footer' | 'links' | 'scripts'> & {
     navbar?: any;
     footer?: any;
     auth?: {

package/lib/config.js

@@ -74,6 +74,15 @@ exports.ThemeConfig = zod_1.z
     })
         .optional(),
     links: zod_1.z.array(LinksConfig).optional(),
+    feedback: zod_1.z
+        .object({
+        type: zod_1.z.string().default('sentiment'),
+        settings: zod_1.z.string().optional(),
+    })
+        .extend(HideConfig.shape)
+        .strict()
+        .default({})
+        .optional(),
     search: zod_1.z
         .object({
         placement: zod_1.z.string().default('navbar').optional(),
@@ -151,6 +160,15 @@ exports.ThemeConfig = zod_1.z
         .optional(),
     openapi: zod_1.z.object({}).passthrough().optional(),
     graphql: zod_1.z.object({}).passthrough().optional(),
+    userProfile: zod_1.z
+        .object({
+        loginLabel: zod_1.z.string().default('Login').optional(),
+        logoutLabel: zod_1.z.string().default('Logout').optional(),
+        logoutRedirect: zod_1.z.string().default('/').optional(),
+    })
+        .extend(HideConfig.shape)
+        .optional()
+        .default({}),
 })
     .passthrough()
     .default({});

package/lib/globalStyle.js

@@ -202,7 +202,7 @@ const headingsTypography = (0, styled_components_1.css) `
   --h2-font-weight: var(--heading-font-weight); // @presenter FontWeight
   --h2-font-size: 28px; // @presenter FontSize
   --h2-line-height: 28px; // @presenter LineHeight
-  --h2-margin-top: var(--heading-margin-top); // @presenter Spacing
+  --h2-margin-top: 0; // @presenter Spacing
   --h2-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
   --h2-text-color: var(--heading-text-color); // @presenter Color
 
@@ -512,7 +512,7 @@ const sidebar = (0, styled_components_1.css) `
   --sidebar-back-button-font-family: var(--sidebar-item-font-family);
   --sidebar-back-button-font-size: var(--sidebar-item-font-size);
   --sidebar-back-button-transform: inherit;
-  --sidebar-back-button-text-color: var(--link-text-color);
+  --sidebar-back-button-text-color: var(--sidebar-item-text-color);
   --sidebar-back-button-background-color: transparent;
   --sidebar-back-button-hover-text-color: var(--sidebar-item-active-color);
   --sidebar-back-button-hover-background-color: transparent;
@@ -1878,6 +1878,9 @@ const tile = (0, styled_components_1.css) `
   --wide-tile-background-color: var(--color-secondary-50);
   --thin-tile-background-color: var(--color-secondary-50);
 `;
+const apiLogsTable = (0, styled_components_1.css) `
+ --api-logs-row-hover-background-color: var(--color-secondary-300)
+`;
 exports.styles = (0, styled_components_1.css) `
   :root {
     ${baseColors}
@@ -1906,6 +1909,7 @@ exports.styles = (0, styled_components_1.css) `
     ${lastUpdated}
     ${tile}
     ${loadProgressBar}
+    ${apiLogsTable}
   }
 
   :root.dark {

package/lib/hooks/useActiveHeading.d.ts

@@ -1,2 +1,2 @@
-export declare type UseActiveHeadingReturnType = string | undefined;
+export type UseActiveHeadingReturnType = string | undefined;
 export declare function useActiveHeading(contentElement: HTMLDivElement | null, displayedHeaders: Array<string | undefined>): UseActiveHeadingReturnType;

package/lib/hooks/useActiveSectionId.d.ts

@@ -1,3 +1,3 @@
 import type { Location } from 'history';
-export declare type UseActiveSectionIdReturnType = string;
+export type UseActiveSectionIdReturnType = string;
 export declare function useActiveSectionId(location: Location, hasOverviewPage?: boolean): UseActiveSectionIdReturnType;

package/lib/hooks/useActiveSectionId.js

@@ -28,9 +28,6 @@ function useActiveSectionId(location, hasOverviewPage = false) {
         if (hasOverviewPage) {
             setItemId('');
         }
-        else {
-            setItemId((sections[0] && sections[0].getAttribute('data-section-id')) || '');
-        }
     }, 150), [navbarHeight, hasOverviewPage]);
     (0, react_1.useEffect)(() => {
         window.addEventListener('scroll', scrollListener, { capture: false });

package/lib/hooks/useControl.d.ts

@@ -1,4 +1,4 @@
-export declare type UseControlReturnType = {
+export type UseControlReturnType = {
     isOpened: boolean;
     handleOpen: () => void;
     handleClose: () => void;

package/lib/hooks/useNavbarHeight.d.ts

@@ -1,3 +1,3 @@
 import type { Location } from 'history';
-export declare type UseNavbarHeightReturnType = number;
+export type UseNavbarHeightReturnType = number;
 export declare function useNavbarHeight(location: Location): UseNavbarHeightReturnType;

package/lib/index.d.ts

@@ -10,6 +10,7 @@ export * from './Tooltip';
 export * from './SourceCode';
 export * from './Panel';
 export * from './icons';
+export * from './Feedback';
 export * from './hooks';
 export * from './utils';
 export * from './globalStyle';

package/lib/index.js

@@ -26,6 +26,7 @@ __exportStar(require("./Tooltip"), exports);
 __exportStar(require("./SourceCode"), exports);
 __exportStar(require("./Panel"), exports);
 __exportStar(require("./icons"), exports);
+__exportStar(require("./Feedback"), exports);
 __exportStar(require("./hooks"), exports);
 __exportStar(require("./utils"), exports);
 __exportStar(require("./globalStyle"), exports);

package/lib/mocks/hooks/index.js

@@ -27,6 +27,12 @@ function useThemeConfig() {
         colorMode: {
             modes: ['light', 'dark'],
         },
+        feedback: {
+            type: 'sentiment',
+        },
+        userProfile: {
+            hide: false,
+        },
     };
 }
 exports.useThemeConfig = useThemeConfig;

package/lib/mocks/types/index.d.ts

@@ -1 +1 @@
-export declare type ResolvedNavLinkItem = any;
+export type ResolvedNavLinkItem = any;

package/lib/mocks/types.d.ts

@@ -1,3 +1,3 @@
-export declare type ActiveItem<T> = T;
-export declare type SearchDocument = any;
-export declare type OperationParameter = any;
+export type ActiveItem<T> = T;
+export type SearchDocument = any;
+export type OperationParameter = any;

package/lib/types/config.d.ts

@@ -1,4 +1,4 @@
-export declare type DefaultThemeUIConfig = {
+export type DefaultThemeUIConfig = {
     lastUpdatedBlock?: {
         hide?: boolean;
     };

package/lib/ui/Box.d.ts

@@ -1,5 +1,5 @@
-import type { SpaceProps, LayoutProps, TextAlignProps, ColorProps, PositionProps, FlexProps, BordersProps } from 'styled-system';
-export interface BoxProps extends SpaceProps, LayoutProps, PositionProps, FlexProps, TextAlignProps, ColorProps, BordersProps {
+import type { SpaceProps, LayoutProps, TextAlignProps, ColorProps, PositionProps, FlexProps, BordersProps, GridProps } from 'styled-system';
+export interface BoxProps extends SpaceProps, LayoutProps, PositionProps, FlexProps, TextAlignProps, ColorProps, BordersProps, GridProps {
 }
 export declare const Box: import("styled-components").StyledComponent<"div", any, {
     'data-component-name': string;

package/lib/ui/Box.js

@@ -17,5 +17,6 @@ exports.Box = styled_components_1.default.div.attrs(() => ({
   ${styled_system_1.textAlign}
   ${styled_system_1.color}
   ${styled_system_1.border}
+  ${styled_system_1.grid}
 `;
 //# sourceMappingURL=Box.js.map

package/lib/ui/Burger.js

@@ -14,7 +14,8 @@ function BurgerComponent({ onClick, className }) {
 }
 const Button = styled_components_1.default.button `
   all: unset;
-  max-width: 30px;
+  max-width: 20px;
+  min-width: 20px;
   width: 100%;
   min-width: 10px;
   display: block;
@@ -24,7 +25,7 @@ const Line = styled_components_1.default.div `
   margin: 4px 0;
   width: 100%;
   height: 2px;
-  background: #fff;
+  background: var(--text-color);
   border-radius: 1px;
 `;
 exports.Burger = (0, styled_components_1.default)(BurgerComponent) ``;

package/lib/ui/Dropdown.d.ts

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

package/lib/ui/Tiles/ThinTile.d.ts

@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import type { CSSProperties } from 'react';
-declare type TextAlign = 'left' | 'right' | 'center' | 'justify';
+type TextAlign = 'left' | 'right' | 'center' | 'justify';
 export interface TileProps {
     header?: string;
     icon?: string;

package/lib/utils/jsonToHtml.d.ts

@@ -1,4 +1,4 @@
-declare type JsonValue = JSON | Record<string, unknown>;
+type JsonValue = JSON | Record<string, unknown>;
 export declare function jsonToHTML(json: JsonValue, maxExpandLevel: number, startLine?: number): string;
 export declare function getLines(json: JsonValue, maxExpandLevel: number): string;
 export {};

package/lib/utils/media-css.d.ts

@@ -1,4 +1,4 @@
-export declare type MediaQueries = {
+export type MediaQueries = {
     print: string;
     small: string;
     medium: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@redocly/theme",
-  "version": "0.6.3",
-  "description": "Shared UI components",
+  "version": "0.6.5",
+  "description": "Shared UI components lib",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",
   "main": "lib/index.js",
@@ -12,7 +12,7 @@
     "./config": "./lib/config.js",
     ".": "./lib/index.js",
     "./Sidebar/*": "./lib/Sidebar/*.js",
-    "./*": "./lib/*/index.js",
+    "./*": "./lib/index.js",
     "./src/": "./src/"
   },
   "scripts": {
@@ -115,7 +115,10 @@
         ]
       },
       "test": {
-        "outputs": []
+        "outputs": [
+          "{projectRoot}/coverage",
+          "{projectRoot}/report.json"
+        ]
       }
     }
   }

package/src/Feedback/Rating.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import type { RatingProps } from '@theme/Feedback';
+
+type StarsProps = {
+  onSubmit: RatingProps['onSubmit'];
+  max: number;
+};
+
+export const Rating = ({ settings, onSubmit }: RatingProps): JSX.Element => {
+  const { label, max, submitText } = settings || {};
+  const [submitValue, setSubmitValue] = React.useState(0);
+
+  if (submitValue) {
+    return (
+      <RatingWidget>
+        <Label>{submitText || 'Thank you for helping improve our documentation!'}</Label>
+      </RatingWidget>
+    );
+  }
+
+  return (
+    <RatingWidget>
+      <Label>{label || 'How helpful was this page?'}</Label>
+      <Stars
+        max={max || 5}
+        onSubmit={(value: number) => {
+          setSubmitValue(value);
+          onSubmit(value);
+        }}
+      />
+    </RatingWidget>
+  );
+};
+
+const Stars = ({ max, onSubmit }: StarsProps): JSX.Element => {
+  const [hovered, setHovered] = React.useState(0);
+  const stars: JSX.Element[] = [];
+
+  for (let index = 1; index <= max; index++) {
+    stars.push(
+      <Star
+        key={index}
+        onClick={() => onSubmit(index)}
+        onMouseOver={() => setHovered(index)}
+        onMouseLeave={() => setHovered(0)}
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+          {hovered < index ? (
+            <g fill="#e8c002">
+              <path d="M20 7h-7L10 .5 7 7H0l5.46 5.47-1.64 7 6.18-3.7 6.18 3.73-1.63-7zm-10 6.9-3.76 2.27 1-4.28L3.5 8.5h4.61L10 4.6l1.9 3.9h4.6l-3.73 3.4 1 4.28z" />
+            </g>
+          ) : (
+            <g fill="#e8c002">
+              <path d="M20 7h-7L10 .5 7 7H0l5.46 5.47-1.64 7 6.18-3.7 6.18 3.73-1.63-7z" />
+            </g>
+          )}
+        </svg>
+      </Star>,
+    );
+  }
+
+  return <>{stars}</>;
+};
+
+const RatingWidget = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const Star = styled.span`
+  cursor: pointer;
+`;
+
+const Label = styled.h3`
+  margin-right: 15px;
+  font-family: var(--font-family-base);
+`;