@redocly/theme 0.6.3 → 0.6.5

package/lib/Button/Button.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { FlattenSimpleInterpolation } from 'styled-components';
-export declare type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge' | string;
-export declare type ButtonColor = 'primary' | 'secondary' | 'default' | string;
-export declare type ButtonVariant = 'outlined' | 'contained';
+export type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge' | string;
+export type ButtonColor = 'primary' | 'secondary' | 'default' | string;
+export type ButtonVariant = 'outlined' | 'contained';
 export interface ButtonProps {
     color?: ButtonColor;
     disabled?: boolean;

package/lib/Feedback/Rating.d.ts

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

package/lib/Feedback/Rating.js

@@ -0,0 +1,69 @@
+"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.Rating = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Rating = ({ settings, onSubmit }) => {
+    const { label, max, submitText } = settings || {};
+    const [submitValue, setSubmitValue] = React.useState(0);
+    if (submitValue) {
+        return (React.createElement(RatingWidget, null,
+            React.createElement(Label, null, submitText || 'Thank you for helping improve our documentation!')));
+    }
+    return (React.createElement(RatingWidget, null,
+        React.createElement(Label, null, label || 'How helpful was this page?'),
+        React.createElement(Stars, { max: max || 5, onSubmit: (value) => {
+                setSubmitValue(value);
+                onSubmit(value);
+            } })));
+};
+exports.Rating = Rating;
+const Stars = ({ max, onSubmit }) => {
+    const [hovered, setHovered] = React.useState(0);
+    const stars = [];
+    for (let index = 1; index <= max; index++) {
+        stars.push(React.createElement(Star, { key: index, onClick: () => onSubmit(index), onMouseOver: () => setHovered(index), onMouseLeave: () => setHovered(0) },
+            React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20" }, hovered < index ? (React.createElement("g", { fill: "#e8c002" },
+                React.createElement("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" }))) : (React.createElement("g", { fill: "#e8c002" },
+                React.createElement("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" }))))));
+    }
+    return React.createElement(React.Fragment, null, stars);
+};
+const RatingWidget = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+`;
+const Star = styled_components_1.default.span `
+  cursor: pointer;
+`;
+const Label = styled_components_1.default.h3 `
+  margin-right: 15px;
+  font-family: var(--font-family-base);
+`;
+//# sourceMappingURL=Rating.js.map

package/lib/Feedback/Sentiment.d.ts

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

package/lib/Feedback/Sentiment.js

@@ -0,0 +1,55 @@
+"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.Sentiment = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Thumbs_1 = require("./Thumbs");
+const Sentiment = ({ settings, onSubmit }) => {
+    const { label } = settings || {};
+    return (React.createElement(Wrapper, null,
+        React.createElement(Label, null, label || 'Was this page helpful?'),
+        React.createElement(Vote, { onClick: () => onSubmit(1) },
+            React.createElement(Thumbs_1.ThumbUp, { text: "Yes" })),
+        React.createElement(Vote, { onClick: () => onSubmit(-1) },
+            React.createElement(Thumbs_1.ThumbDown, null))));
+};
+exports.Sentiment = Sentiment;
+const Wrapper = styled_components_1.default.div `
+  font-family: var(--font-family-base);
+  display: flex;
+  align-items: center;
+`;
+const Label = styled_components_1.default.h3 `
+  margin-right: 15px;
+`;
+const Vote = styled_components_1.default.div `
+  cursor: pointer;
+  margin: 0 10px;
+`;
+//# sourceMappingURL=Sentiment.js.map

package/lib/Feedback/Thumbs.d.ts

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

package/lib/Feedback/Thumbs.js

@@ -0,0 +1,79 @@
+"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.ThumbDown = exports.ThumbUp = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const ThumbUp = ({ text }) => (React.createElement(Wrapper, { style: { alignItems: 'normal' } },
+    React.createElement(Icon, null,
+        React.createElement("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", viewBox: "0 0 512 512" },
+            React.createElement("g", null,
+                React.createElement("g", null,
+                    React.createElement("g", null,
+                        React.createElement("path", { d: "M495.736,290.773C509.397,282.317,512,269.397,512,260.796c0-22.4-18.253-47.462-42.667-47.462H349.918\n              c-4.284-0.051-25.651-1.51-25.651-25.6c0-4.71-3.814-8.533-8.533-8.533s-8.533,3.823-8.533,8.533\n              c0,33.749,27.913,42.667,42.667,42.667h119.467c14.182,0,25.6,16.631,25.6,30.396c0,4.437,0,17.946-26.53,20.855\n              c-4.506,0.495-7.834,4.42-7.586,8.951c0.239,4.523,3.985,8.064,8.516,8.064c14.114,0,25.6,11.486,25.6,25.6\n              s-11.486,25.6-25.6,25.6h-17.067c-4.719,0-8.533,3.823-8.533,8.533s3.814,8.533,8.533,8.533c14.114,0,25.6,11.486,25.6,25.6\n              s-11.486,25.6-25.6,25.6h-25.6c-4.719,0-8.533,3.823-8.533,8.533s3.814,8.533,8.533,8.533c8.934,0,17.067,8.132,17.067,17.067\n              c0,8.61-8.448,17.067-17.067,17.067h-128c-35.627,0-48.444-7.074-63.292-15.258c-12.553-6.921-26.786-14.763-54.963-18.79\n              c-4.668-0.674-8.994,2.577-9.66,7.236c-0.666,4.668,2.569,8.994,7.236,9.66c25.105,3.584,37.325,10.325,49.152,16.845\n              c15.497,8.542,31.505,17.374,71.526,17.374h128c17.869,0,34.133-16.273,34.133-34.133c0-6.229-1.775-12.134-4.83-17.229\n              c21.794-1.877,38.963-20.224,38.963-42.505c0-10.829-4.062-20.736-10.735-28.271C500.42,358.212,512,342.571,512,324.267\n              C512,310.699,505.634,298.59,495.736,290.773z" }),
+                        React.createElement("path", { d: "M76.8,443.733c9.412,0,17.067-7.654,17.067-17.067S86.212,409.6,76.8,409.6c-9.412,0-17.067,7.654-17.067,17.067\n              S67.388,443.733,76.8,443.733z" }),
+                        React.createElement("path", { d: "M179.2,247.467c25.353,0,57.429-28.297,74.3-45.167c36.634-36.634,36.634-82.167,36.634-151.1\n              c0-5.342,3.191-8.533,8.533-8.533c29.508,0,42.667,13.158,42.667,42.667v102.4c0,4.71,3.814,8.533,8.533,8.533\n              s8.533-3.823,8.533-8.533v-102.4c0-39.083-20.659-59.733-59.733-59.733c-14.831,0-25.6,10.769-25.6,25.6\n              c0,66.978,0,107.401-31.633,139.034C216.661,215.006,192.811,230.4,179.2,230.4c-4.719,0-8.533,3.823-8.533,8.533\n              S174.481,247.467,179.2,247.467z" }),
+                        React.createElement("path", { d: "M145.067,213.333H8.533c-4.719,0-8.533,3.823-8.533,8.533v256c0,4.71,3.814,8.533,8.533,8.533h136.533\n              c4.719,0,8.533-3.823,8.533-8.533v-256C153.6,217.156,149.786,213.333,145.067,213.333z M136.533,469.333H17.067V230.4h119.467\n              V469.333z" })))))),
+    React.createElement("span", null, text || 'Yes')));
+exports.ThumbUp = ThumbUp;
+const ThumbDown = ({ text }) => (React.createElement(Wrapper, { style: { alignItems: 'end' } },
+    React.createElement(Icon, null,
+        React.createElement("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", viewBox: "0 0 512 512" },
+            React.createElement("g", null,
+                React.createElement("g", null,
+                    React.createElement("g", null,
+                        React.createElement("path", { d: "M76.8,247.467c9.412,0,17.067-7.654,17.067-17.067c0-9.412-7.654-17.067-17.067-17.067\n\t\t\t\tc-9.412,0-17.067,7.654-17.067,17.067C59.733,239.812,67.388,247.467,76.8,247.467z" }),
+                        React.createElement("path", { d: "M495.736,221.227C505.634,213.41,512,201.301,512,187.733c0-18.295-11.58-33.946-27.802-39.996\n\t\t\t\tc6.673-7.535,10.735-17.434,10.735-28.271c0-22.281-17.169-40.627-38.963-42.505c3.055-5.094,4.83-10.999,4.83-17.229\n\t\t\t\tc0-17.86-16.265-34.133-34.133-34.133h-128c-40.021,0-56.03,8.832-71.526,17.374c-11.827,6.519-24.047,13.261-49.152,16.845\n\t\t\t\tc-4.668,0.666-7.902,4.992-7.236,9.66c0.666,4.659,4.949,7.885,9.66,7.236c28.177-4.028,42.411-11.87,54.963-18.79\n\t\t\t\tc14.848-8.183,27.665-15.258,63.292-15.258h128c8.619,0,17.067,8.456,17.067,17.067c0,8.934-8.132,17.067-17.067,17.067\n\t\t\t\tc-4.719,0-8.533,3.823-8.533,8.533s3.814,8.533,8.533,8.533h25.6c14.114,0,25.6,11.486,25.6,25.6s-11.486,25.6-25.6,25.6\n\t\t\t\tc-4.719,0-8.533,3.823-8.533,8.533c0,4.71,3.814,8.533,8.533,8.533h17.067c14.114,0,25.6,11.486,25.6,25.6\n\t\t\t\ts-11.486,25.6-25.6,25.6c-4.531,0-8.277,3.541-8.516,8.064c-0.247,4.531,3.081,8.457,7.586,8.951\n\t\t\t\tc26.53,2.91,26.53,16.418,26.53,20.847c0,13.773-11.418,30.404-25.6,30.404H349.867c-14.763,0-42.667,8.917-42.667,42.667\n\t\t\t\tc0,4.71,3.814,8.533,8.533,8.533s8.533-3.823,8.533-8.533c0-24.09,21.367-25.549,25.6-25.6h119.467\n\t\t\t\tc24.414,0,42.667-25.054,42.667-47.471C512,242.603,509.397,229.683,495.736,221.227z" }),
+                        React.createElement("path", { d: "M349.867,315.733c-4.719,0-8.533,3.823-8.533,8.533v102.4c0,29.508-13.158,42.667-42.667,42.667\n\t\t\t\tc-5.342,0-8.533-3.192-8.533-8.533c0-68.932,0-114.466-36.634-151.1c-16.87-16.87-48.947-45.167-74.3-45.167\n\t\t\t\tc-4.719,0-8.533,3.823-8.533,8.533s3.814,8.533,8.533,8.533c13.611,0,37.461,15.394,62.234,40.166\n\t\t\t\tc31.633,31.633,31.633,72.055,31.633,139.034c0,14.831,10.769,25.6,25.6,25.6c39.074,0,59.733-20.651,59.733-59.733v-102.4\n\t\t\t\tC358.4,319.556,354.586,315.733,349.867,315.733z" }),
+                        React.createElement("path", { d: "M145.067,25.6H8.533C3.814,25.6,0,29.423,0,34.133v256c0,4.71,3.814,8.533,8.533,8.533h136.533\n\t\t\t\tc4.719,0,8.533-3.823,8.533-8.533v-256C153.6,29.423,149.786,25.6,145.067,25.6z M136.533,281.6H17.067V42.667h119.467V281.6z" })))))),
+    React.createElement("span", null, text || 'No')));
+exports.ThumbDown = ThumbDown;
+const Wrapper = styled_components_1.default.div `
+  font-family: var(--font-family-base);
+  display: flex;
+  color: var(--color-primary-500);
+  &:hover {
+    color: var(--color-primary-600);
+    svg {
+      > g {
+        fill: var(--color-primary-600);
+      }
+    }
+  }
+`;
+const Icon = styled_components_1.default.div `
+  width: 18px;
+  height: 18px;
+  margin-right: 5px;
+  > svg {
+    > g {
+      fill: var(--color-primary-500);
+    }
+  }
+`;
+//# sourceMappingURL=Thumbs.js.map

package/lib/Feedback/index.d.ts

@@ -0,0 +1,3 @@
+export { Rating } from './Rating';
+export { Sentiment } from './Sentiment';
+export * from './types';

package/lib/Feedback/index.js

@@ -0,0 +1,23 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sentiment = exports.Rating = void 0;
+var Rating_1 = require("./Rating");
+Object.defineProperty(exports, "Rating", { enumerable: true, get: function () { return Rating_1.Rating; } });
+var Sentiment_1 = require("./Sentiment");
+Object.defineProperty(exports, "Sentiment", { enumerable: true, get: function () { return Sentiment_1.Sentiment; } });
+__exportStar(require("./types"), exports);
+//# sourceMappingURL=index.js.map

package/lib/Feedback/types.d.ts

@@ -0,0 +1,26 @@
+export type RatingProps = {
+    onSubmit: (value: number) => void;
+    settings?: {
+        label?: string;
+        max?: number;
+        submitText?: string;
+    };
+};
+export type SentimentProps = {
+    onSubmit: (value: -1 | 1) => void;
+    settings?: {
+        label?: string;
+    };
+};
+export type CommentProps = {
+    onSubmit: (value: string) => void;
+    settings?: {
+        label?: string;
+    };
+};
+export type ProblemProps = {
+    onSubmit: (value: string, location: string) => void;
+    settings?: {
+        label?: string;
+    };
+};

package/lib/Feedback/types.js

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

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

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

package/lib/Markdown/Details.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-declare type DetailsProps = {
+type DetailsProps = {
     summary: string;
 };
 export declare function Details({ summary, children }: React.PropsWithChildren<DetailsProps>): JSX.Element;

package/lib/Markdown/MarkdownLayout.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
-declare type MarkdownLayoutProps = {
+type MarkdownLayoutProps = {
     tableOfContent: React.ReactNode;
     markdownWrapper: React.ReactNode;
+    feedback: React.ReactNode;
     editPage?: {
         to: string;
         text: string;
@@ -10,5 +11,5 @@ declare type MarkdownLayoutProps = {
     /** String in ISO format */
     lastModified?: string | null;
 };
-export declare function MarkdownLayout({ tableOfContent, markdownWrapper, editPage, lastModified, }: MarkdownLayoutProps): JSX.Element;
+export declare function MarkdownLayout({ tableOfContent, markdownWrapper, feedback, editPage, lastModified, }: MarkdownLayoutProps): JSX.Element;
 export {};

package/lib/Markdown/MarkdownLayout.js

@@ -12,16 +12,17 @@ const PageNavigation_1 = require("../PageNavigation/PageNavigation");
 const EditPageButton_1 = require("../EditPageButton");
 const LastUpdated_1 = require("../LastUpdated/LastUpdated");
 const hooks_1 = require("../hooks");
-function MarkdownLayout({ tableOfContent, markdownWrapper, editPage, lastModified, }) {
+function MarkdownLayout({ tableOfContent, markdownWrapper, feedback, editPage, lastModified, }) {
     const { markdown } = (0, hooks_1.useThemeConfig)();
     const { editPage: themeEditPage } = markdown || {};
-    const mergedConf = editPage ? Object.assign(Object.assign({}, editPage), themeEditPage) : undefined;
+    const mergedConf = editPage ? Object.assign(Object.assign({}, themeEditPage), editPage) : undefined;
     return (react_1.default.createElement(PageWrapper_1.PageWrapper, { "data-component-name": "Markdown/MarkdownLayout" },
         react_1.default.createElement(ContainerWrapper_1.ContainerWrapper, { withToc: true },
             react_1.default.createElement(LayoutTop, null,
                 lastModified && react_1.default.createElement(LastUpdated_1.LastUpdated, { lastModified: new Date(lastModified) }),
                 mergedConf && (react_1.default.createElement(EditPageButton_1.EditPageButton, { text: mergedConf.text, to: mergedConf.to, icon: mergedConf.icon }))),
             markdownWrapper,
+            react_1.default.createElement(LayoutBottom, null, feedback),
             react_1.default.createElement(PageNavigation_1.PageNavigation, null)),
         tableOfContent));
 }
@@ -31,4 +32,9 @@ const LayoutTop = styled_components_1.default.div `
   justify-content: space-between;
   flex-flow: row nowrap;
 `;
+const LayoutBottom = (0, styled_components_1.default)(LayoutTop) `
+  > * {
+    margin: 25px 5px;
+  }
+`;
 //# sourceMappingURL=MarkdownLayout.js.map

package/lib/Markdown/Mermaid.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type MermaidProps = {
+type MermaidProps = {
     diagramHtml: string;
 };
 export declare function Mermaid({ diagramHtml }: MermaidProps): JSX.Element;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type TabProps = {
+type TabProps = {
     activeTab: string;
     label: string;
     onClick: (e: string) => void;

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

@@ -1,5 +1,5 @@
 import type { PropsWithChildren } from 'react';
-declare type TabsProps = PropsWithChildren<{
+type TabsProps = PropsWithChildren<{
     children: {
         props: {
             label: string;

package/lib/Navbar/MobileNavbarMenu.d.ts

@@ -1,6 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 import type { ResolvedConfigLinks } from '@theme/types/portal';
-export declare function MobileNavbarMenu({ menuItems, closeMenu, }: {
+export declare function MobileNavbarMenu({ menuItems, closeMenu, search, }: {
     menuItems: ResolvedConfigLinks;
+    search: React.ReactNode | undefined;
     closeMenu: () => void;
 }): JSX.Element | null;

package/lib/Navbar/MobileNavbarMenu.js

@@ -10,14 +10,16 @@ const NavbarItem_1 = require("../Navbar/NavbarItem");
 const MobileNavbarItem_1 = require("../Navbar/MobileNavbarItem");
 const NavbarDropdown_1 = require("../Navbar/NavbarDropdown");
 const utils_1 = require("../utils");
-function MobileNavbarMenu({ menuItems, closeMenu, }) {
+function MobileNavbarMenu({ menuItems, closeMenu, search, }) {
     if ((0, utils_1.isPrimitive)(menuItems) || (0, utils_1.isEmptyArray)(menuItems)) {
         return null;
     }
     return (react_1.default.createElement(NavbarItemsWrapper, { "data-component-name": "Navbar/MobileNavbarMenu" },
-        react_1.default.createElement(NavbarItemsContainer, null, menuItems.map((navItem, index) => {
-            return (react_1.default.createElement(MobileNavbarItem_1.MobileNavbarItem, { key: `${navItem.label}_${index}`, "data-cy": navItem.label, navItem: navItem }));
-        })),
+        react_1.default.createElement(NavbarItemsContainer, null,
+            react_1.default.createElement(MobileSearchWrapper, null, search || null),
+            menuItems.map((navItem, index) => {
+                return (react_1.default.createElement(MobileNavbarItem_1.MobileNavbarItem, { key: `${navItem.label}_${index}`, "data-cy": navItem.label, navItem: navItem }));
+            })),
         react_1.default.createElement(NavbarItemsClosableArea, { onClick: closeMenu })));
 }
 exports.MobileNavbarMenu = MobileNavbarMenu;
@@ -89,4 +91,14 @@ const NavbarItemsContainer = styled_components_1.default.ul `
     position: relative;
   }
 `;
+const MobileSearchWrapper = styled_components_1.default.div `
+  padding: var(--navbar-item-padding-horizontal);
+  > div {
+    display: block;
+    width: 100%;
+  }
+  input {
+    width: 100%;
+  }
+`;
 //# sourceMappingURL=MobileNavbarMenu.js.map

package/lib/Navbar/Navbar.js

@@ -14,8 +14,9 @@ const ColorModeSwitcher_1 = require("../ColorModeSwitcher/ColorModeSwitcher");
 const useThemeConfig_1 = require("../hooks/useThemeConfig");
 function Navbar({ menu, logo, search, profile }) {
     const [isOpen, setIsOpen] = (0, useMobileMenu_1.useMobileMenu)(false);
-    const { search: searchSettings, navbar } = (0, useThemeConfig_1.useThemeConfig)();
+    const { search: searchSettings, navbar, userProfile: userProfileSettings } = (0, useThemeConfig_1.useThemeConfig)();
     const hideSearch = (searchSettings === null || searchSettings === void 0 ? void 0 : searchSettings.hide) || ((searchSettings === null || searchSettings === void 0 ? void 0 : searchSettings.placement) && (searchSettings === null || searchSettings === void 0 ? void 0 : searchSettings.placement) !== 'navbar');
+    const hideUserProfile = userProfileSettings === null || userProfileSettings === void 0 ? void 0 : userProfileSettings.hide;
     if (navbar === null || navbar === void 0 ? void 0 : navbar.hide) {
         return null;
     }
@@ -23,16 +24,18 @@ function Navbar({ menu, logo, search, profile }) {
     const closeMobileMenu = () => setIsOpen(false);
     return (react_1.default.createElement(exports.NavbarContainer, { "data-component-name": "Navbar/Navbar" },
         react_1.default.createElement(MobileNavbarMenuButton_1.MobileNavbarMenuButton, { onClick: openMobileMenu }),
-        isOpen && react_1.default.createElement(MobileNavbarMenu_1.MobileNavbarMenu, { closeMenu: closeMobileMenu, menuItems: menu }),
+        isOpen && (react_1.default.createElement(MobileNavbarMenu_1.MobileNavbarMenu, { closeMenu: closeMobileMenu, menuItems: menu, search: hideSearch ? null : search })),
         react_1.default.createElement(exports.NavbarRow, null,
             logo,
             react_1.default.createElement(Navbar_1.NavbarMenu, { menuItems: menu }),
             hideSearch ? null : search,
-            profile,
+            hideUserProfile ? null : profile,
             react_1.default.createElement(ColorModeSwitcher_1.ColorModeSwitcher, null))));
 }
 exports.Navbar = Navbar;
 exports.NavbarContainer = styled_components_1.default.nav `
+  --text-color: var(--navbar-text-color);
+
   height: var(--navbar-height);
   box-sizing: border-box;
   display: flex;

package/lib/NavbarLogo/NavbarLogo.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { LogoConfig } from '@theme/types/portal';
-export declare type NavbarLogoProps = {
+export type NavbarLogoProps = {
     logo: Pick<LogoConfig, 'image' | 'link' | 'altText'>;
 };
 export declare function NavbarLogo({ logo }: NavbarLogoProps): JSX.Element | null;

package/lib/Profile/LoginLink.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export interface LoginLinkProps {
+    href: string;
+}
+export declare function LoginLink({ href }: LoginLinkProps): JSX.Element;

package/lib/Profile/LoginLink.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoginLink = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const useThemeConfig_1 = require("../hooks/useThemeConfig");
+function LoginLink({ href }) {
+    const { userProfile } = (0, useThemeConfig_1.useThemeConfig)();
+    return react_1.default.createElement(StyledLink, { href: href }, (userProfile === null || userProfile === void 0 ? void 0 : userProfile.loginLabel) || 'Login');
+}
+exports.LoginLink = LoginLink;
+const StyledLink = styled_components_1.default.a.attrs(() => ({
+    'data-component-name': 'Profile/LoginLink',
+})) `
+  display: inline-block;
+  color: var(--navbar-text-color);
+  text-decoration: none;
+  padding: 0 var(--navbar-item-padding-horizontal);
+  text-align: center;
+  line-height: 1;
+  font-size: var(--navbar-item-font-size);
+  font-weight: var(--navbar-item-font-weight);
+  &:hover {
+    color: var(--navbar-item-hover-text-color);
+  }
+`;
+//# sourceMappingURL=LoginLink.js.map

package/lib/Profile/Profile.js

@@ -42,7 +42,9 @@ function ProfileComponent({ name, imageUrl, onClick, color }) {
             react_1.default.createElement("span", null, avatarLetters))));
 }
 exports.Profile = (0, react_1.memo)(ProfileComponent);
-const ProfileWrapper = styled_components_1.default.div `
+const ProfileWrapper = styled_components_1.default.div.attrs(() => ({
+    'data-component-name': 'Profile/Profile',
+})) `
   display: flex;
   align-items: center;
   cursor: pointer;
@@ -51,6 +53,11 @@ const ProfileWrapper = styled_components_1.default.div `
 `;
 const StyledUserName = styled_components_1.default.span `
   color: ${({ color }) => color || 'var(--navbar-text-color)'};
+  display: none;
+
+  ${({ theme }) => { var _a; return (_a = theme.mediaQueries) === null || _a === void 0 ? void 0 : _a.medium; }} {
+    display: block;
+  }
 `;
 const AvatarWrapper = styled_components_1.default.div `
   width: 40px;

package/lib/Profile/UserProfile.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export interface UserProfileProps {
+    userInfo: {
+        isAuthenticated: boolean;
+        name: string;
+        picture: string;
+        logoutDisabled?: boolean;
+    };
+    handleLogout: (logoutRedirect?: string) => void;
+    hasDeveloperOnboarding?: boolean;
+    hasApiLogs?: boolean;
+}
+export declare function UserProfile({ userInfo, handleLogout, hasDeveloperOnboarding, hasApiLogs, }: UserProfileProps): JSX.Element;

package/lib/Profile/UserProfile.js

@@ -0,0 +1,82 @@
+"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.UserProfile = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Link_1 = require("../mocks/Link");
+const Profile_1 = require("../Profile/Profile");
+const Tooltip_1 = require("../Tooltip/Tooltip");
+const useThemeConfig_1 = require("../hooks/useThemeConfig");
+function UserProfile({ userInfo, handleLogout, hasDeveloperOnboarding = false, hasApiLogs = false, }) {
+    const [isOpened, setIsOpened] = (0, react_1.useState)(false);
+    const { userProfile: userProfileSettings } = (0, useThemeConfig_1.useThemeConfig)();
+    const logoutRedirect = (userProfileSettings === null || userProfileSettings === void 0 ? void 0 : userProfileSettings.logoutRedirect) || '/';
+    return (react_1.default.createElement(StyledTooltip, { isOpen: isOpened, withArrow: false, className: "copy-button", placement: "bottom", width: "100%", tip: react_1.default.createElement(StyledUl, null,
+            hasDeveloperOnboarding ? (react_1.default.createElement(Link_1.Link, { to: "/apps" },
+                react_1.default.createElement(StyledLi, null, "My Apps"))) : null,
+            hasApiLogs ? (react_1.default.createElement(Link_1.Link, { to: "/api-logs" },
+                react_1.default.createElement(StyledLi, null, "API logs"))) : null,
+            react_1.default.createElement(StyledLi, { onClick: () => handleLogout(logoutRedirect) }, (userProfileSettings === null || userProfileSettings === void 0 ? void 0 : userProfileSettings.logoutLabel) || 'Log out')) },
+        react_1.default.createElement(Profile_1.Profile, { name: userInfo.name, imageUrl: userInfo.picture, onClick: userInfo.logoutDisabled ? undefined : () => setIsOpened(!isOpened) })));
+}
+exports.UserProfile = UserProfile;
+const StyledTooltip = (0, styled_components_1.default)(Tooltip_1.Tooltip) `
+  > span {
+    padding: 0;
+  }
+`;
+const StyledUl = styled_components_1.default.ul `
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  text-align: left;
+  background-color: var(--search-modal-background);
+  color: var(--search-modal-text-color);
+  min-width: 100px;
+  a {
+    text-decoration: none;
+    &:hover {
+      color: inherit;
+    }
+    &:visited {
+      color: inherit;
+    }
+  }
+`;
+const StyledLi = styled_components_1.default.li `
+  cursor: pointer;
+  font-size: 16px;
+  list-style: none;
+  padding: 15px 20px;
+  transition: background-color 0.25s ease 0s;
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+`;
+//# sourceMappingURL=UserProfile.js.map