@redocly/theme 0.46.3 → 0.46.4

package/lib/components/Feedback/Mood.d.ts

@@ -1,4 +1,4 @@
-import { ReasonsSettingsSchema } from '@redocly/config';
+import type { AnonymousUserEmailSettings, ReasonsSettingsSchema } from '@redocly/config';
 export declare enum MOOD_STATES {
     SATISFIED = "satisfied",
     NEUTRAL = "neutral",
@@ -9,6 +9,7 @@ export type MoodProps = {
         score: number;
         comment?: string;
         reasons?: string[];
+        email?: string;
     }) => void;
     settings?: {
         label?: string;
@@ -24,6 +25,7 @@ export type MoodProps = {
             neutral?: ReasonsSettingsSchema;
             dissatisfied?: ReasonsSettingsSchema;
         };
+        anonymousUserEmail?: AnonymousUserEmailSettings;
     };
     className?: string;
 };

package/lib/components/Feedback/Mood.js

@@ -31,10 +31,10 @@ exports.Mood = Mood;
 const React = __importStar(require("react"));
 const react_1 = require("react");
 const styled_components_1 = __importDefault(require("styled-components"));
+const Reasons_1 = require("../../components/Feedback/Reasons");
 const hooks_1 = require("../../core/hooks");
 const RadioCheckButtonIcon_1 = require("../../icons/RadioCheckButtonIcon/RadioCheckButtonIcon");
 const Comment_1 = require("../../components/Feedback/Comment");
-const Reasons_1 = require("../../components/Feedback/Reasons");
 const Button_1 = require("../../components/Button/Button");
 const FaceDissatisfiedIcon_1 = require("../../icons/FaceDissatisfiedIcon/FaceDissatisfiedIcon");
 const FaceSatisfiedIcon_1 = require("../../icons/FaceSatisfiedIcon/FaceSatisfiedIcon");
@@ -46,13 +46,19 @@ var MOOD_STATES;
     MOOD_STATES["DISSATISFIED"] = "dissatisfied";
 })(MOOD_STATES || (exports.MOOD_STATES = MOOD_STATES = {}));
 function Mood({ settings, onSubmit, className }) {
-    const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
+    const { label, submitText, comment: commentSettings, reasons: reasonsSettings, anonymousUserEmail: anonymousUserEmailSettings, } = settings || {};
     const [score, setScore] = React.useState('');
     const [isSubmitted, setIsSubmitted] = React.useState(false);
     const [comment, setComment] = React.useState('');
     const [reasons, setReasons] = React.useState([]);
-    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const [email, setEmail] = React.useState();
+    const { useTranslate, useUserMenu } = (0, hooks_1.useThemeHooks)();
+    const { userData } = useUserMenu();
     const { translate } = useTranslate();
+    const onEmailChange = (e) => {
+        const value = e.target.value;
+        setEmail(value || undefined);
+    };
     const checkIfShouldDisplayReasons = (score) => {
         if (!score || !reasonsSettings) {
             return false;
@@ -103,23 +109,28 @@ function Mood({ settings, onSubmit, className }) {
     const displayReasons = checkIfShouldDisplayReasons(score);
     const displayComment = !!(score && !(commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.hide));
     const displaySubmitBnt = !!(score && (displayReasons || displayComment));
+    const displayFeedbackEmail = !!score && (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.enabled) && !userData.isAuthenticated;
     const onSubmitMoodForm = () => {
         onSubmit({
             score: remapScore(score),
             comment,
             reasons,
+            email,
         });
         setIsSubmitted(true);
     };
     const onCancelMoodForm = () => {
         setScore('');
+        setComment('');
+        setReasons([]);
+        setEmail(undefined);
     };
     (0, react_1.useEffect)(() => {
-        if (score && !displayComment && !displayReasons) {
+        if (score && !displayComment && !displayReasons && !displayFeedbackEmail) {
             onSubmitMoodForm();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [score, displayComment, displayReasons]);
+    }, [score, displayComment, displayReasons, displayFeedbackEmail]);
     if (isSubmitted) {
         return (React.createElement(MoodWrapper, { "data-component-name": "Feedback/Mood" },
             React.createElement(StyledFormMandatoryFields, null,
@@ -128,7 +139,7 @@ function Mood({ settings, onSubmit, className }) {
                 React.createElement(RadioCheckButtonIcon_1.RadioCheckButtonIcon, null))));
     }
     return (React.createElement(MoodWrapper, { "data-component-name": "Feedback/Mood", className: className },
-        React.createElement(StyledForm, null,
+        React.createElement(StyledForm, { onSubmit: onSubmitMoodForm },
             React.createElement(StyledFormMandatoryFields, null,
                 React.createElement(Label, { "data-translation-key": "feedback.settings.label" }, label || translate('feedback.settings.label', 'Was this helpful?')),
                 React.createElement(StyledMandatoryFieldContainer, null,
@@ -148,9 +159,14 @@ function Mood({ settings, onSubmit, className }) {
                         component: resolveReasonsComponent(score),
                     }, onChange: setReasons })),
                 displayComment && (React.createElement(Comment_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: renderCommentLabel(score) } })))),
+            displayFeedbackEmail && (React.createElement(StyledFormOptionalFields, null,
+                React.createElement(Label, { "data-translation-key": "feedback.settings.anonymousUserEmail.label" }, (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.label) ||
+                    translate('feedback.settings.anonymousUserEmail.label', 'Your email (optional, for follow-up)')),
+                React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.placeholder) ||
+                        translate('feedback.settings.anonymousUserEmail.placeholder', 'username@mail.com'), type: "email", required: !!email }))),
             displaySubmitBnt && (React.createElement(ButtonsContainer, null,
                 React.createElement(Button_1.Button, { onClick: onCancelMoodForm, variant: "text", size: "small" }, "Cancel"),
-                React.createElement(Button_1.Button, { onClick: onSubmitMoodForm, variant: "secondary", size: "small" }, "Submit"))))));
+                React.createElement(Button_1.Button, { type: "submit", variant: "secondary", size: "small" }, "Submit"))))));
 }
 const remapScore = (score) => {
     switch (score) {
@@ -208,4 +224,13 @@ const StyledMandatoryFieldContainer = styled_components_1.default.div `
   align-items: center;
   gap: var(--spacing-xxs);
 `;
+const EmailInput = styled_components_1.default.input `
+  background-color: var(--bg-color);
+  border-radius: var(--border-radius-lg);
+  border: var(--input-border);
+  outline: none;
+  color: var(--feedback-text-color);
+  font-family: var(--feedback-font-family);
+  padding: 10px;
+`;
 //# sourceMappingURL=Mood.js.map

package/lib/components/Feedback/Rating.d.ts

@@ -1,3 +1,4 @@
+import type { AnonymousUserEmailSettings } from '@redocly/config';
 export declare const FEEDBACK_MAX_RATING = 5;
 export type RatingProps = {
     onSubmit: (value: {
@@ -5,6 +6,7 @@ export type RatingProps = {
         comment?: string;
         reasons?: string[];
         max: number;
+        email?: string;
     }) => void;
     settings?: {
         label?: string;
@@ -19,6 +21,7 @@ export type RatingProps = {
             component?: string;
             items: string[];
         };
+        anonymousUserEmail?: AnonymousUserEmailSettings;
     };
     className?: string;
 };

package/lib/components/Feedback/Rating.js

@@ -29,44 +29,55 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FEEDBACK_MAX_RATING = void 0;
 exports.Rating = Rating;
 const React = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
 const react_1 = require("react");
+const styled_components_1 = __importDefault(require("styled-components"));
+const Reasons_1 = require("../../components/Feedback/Reasons");
 const hooks_1 = require("../../core/hooks");
 const RadioCheckButtonIcon_1 = require("../../icons/RadioCheckButtonIcon/RadioCheckButtonIcon");
 const Comment_1 = require("../../components/Feedback/Comment");
-const Reasons_1 = require("../../components/Feedback/Reasons");
 const Stars_1 = require("../../components/Feedback/Stars");
 const Button_1 = require("../../components/Button/Button");
 exports.FEEDBACK_MAX_RATING = 5;
 function Rating({ settings, onSubmit, className }) {
-    const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
+    const { label, submitText, comment: commentSettings, reasons: reasonsSettings, anonymousUserEmail: anonymousUserEmailSettings, } = settings || {};
     const [isSubmitted, setIsSubmitted] = React.useState(false);
     const [score, setScore] = React.useState(0);
     const [reasons, setReasons] = React.useState([]);
     const [comment, setComment] = React.useState('');
-    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const [email, setEmail] = React.useState();
+    const { useTranslate, useUserMenu } = (0, hooks_1.useThemeHooks)();
+    const { userData } = useUserMenu();
     const { translate } = useTranslate();
+    const onEmailChange = (e) => {
+        const value = e.target.value;
+        setEmail(value || undefined);
+    };
     const onSubmitRatingForm = () => {
         onSubmit({
             score,
             comment,
             reasons,
             max: exports.FEEDBACK_MAX_RATING,
+            email,
         });
         setIsSubmitted(true);
     };
     const onCancelRatingForm = () => {
         setScore(0);
+        setComment('');
+        setReasons([]);
+        setEmail(undefined);
     };
     const displayReasons = !!(score && reasonsSettings && !reasonsSettings.hide);
     const displayComment = !!(score && !(commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.hide));
     const displaySubmitBnt = !!(score && (displayReasons || displayComment));
+    const displayFeedbackEmail = !!score && (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.enabled) && !userData.isAuthenticated;
     (0, react_1.useEffect)(() => {
-        if (score && !displayComment && !displayReasons) {
+        if (score && !displayComment && !displayReasons && !displayFeedbackEmail) {
             onSubmitRatingForm();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [score, displayComment, displayReasons]);
+    }, [score, displayComment, displayReasons, displayFeedbackEmail]);
     if (isSubmitted) {
         return (React.createElement(RatingWrapper, { "data-component-name": "Feedback/Rating" },
             React.createElement(StyledFormMandatoryFields, null,
@@ -90,6 +101,11 @@ function Rating({ settings, onSubmit, className }) {
                         label: (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.label) ||
                             translate('feedback.settings.comment.label', 'Please share your feedback with us.'),
                     } })))),
+            displayFeedbackEmail && (React.createElement(StyledFormOptionalFields, null,
+                React.createElement(Label, { "data-translation-key": "feedback.settings.anonymousUserEmail.label" }, (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.label) ||
+                    translate('feedback.settings.anonymousUserEmail.label', 'Your email (optional, for follow-up)')),
+                React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.placeholder) ||
+                        translate('feedback.settings.anonymousUserEmail.placeholder', 'username@mail.com'), type: "email", required: !!email }))),
             displaySubmitBnt && (React.createElement(ButtonsContainer, null,
                 React.createElement(Button_1.Button, { onClick: onCancelRatingForm, variant: "text", size: "small" }, "Cancel"),
                 React.createElement(Button_1.Button, { onClick: onSubmitRatingForm, variant: "secondary", size: "small" }, "Submit"))))));
@@ -133,4 +149,13 @@ const ButtonsContainer = styled_components_1.default.div `
   margin-bottom: var(--spacing-xxs);
   gap: var(--spacing-xxs);
 `;
+const EmailInput = styled_components_1.default.input `
+  background-color: var(--bg-color);
+  border-radius: var(--border-radius-lg);
+  border: var(--input-border);
+  outline: none;
+  color: var(--feedback-text-color);
+  font-family: var(--feedback-font-family);
+  padding: 10px;
+`;
 //# sourceMappingURL=Rating.js.map

package/lib/components/Feedback/Scale.d.ts

@@ -1,3 +1,4 @@
+import type { AnonymousUserEmailSettings } from '@redocly/config';
 export declare const MAX_SCALE = 10;
 export type ScaleProps = {
     onSubmit: (value: {
@@ -5,6 +6,7 @@ export type ScaleProps = {
         comment?: string;
         reasons?: string[];
         max?: number;
+        email?: string;
     }) => void;
     settings?: {
         label?: string;
@@ -21,6 +23,7 @@ export type ScaleProps = {
             component?: string;
             items: string[];
         };
+        anonymousUserEmail?: AnonymousUserEmailSettings;
     };
     className?: string;
 };

package/lib/components/Feedback/Scale.js

@@ -39,13 +39,19 @@ const Reasons_1 = require("../../components/Feedback/Reasons");
 const Button_1 = require("../../components/Button/Button");
 exports.MAX_SCALE = 10;
 function Scale({ settings, onSubmit, className }) {
-    const { label, submitText, leftScaleLabel, rightScaleLabel, comment: commentSettings, reasons: reasonsSettings, } = settings || {};
+    const { label, submitText, leftScaleLabel, rightScaleLabel, comment: commentSettings, reasons: reasonsSettings, anonymousUserEmail: anonymousUserEmailSettings, } = settings || {};
     const [score, setScore] = React.useState(0);
     const [isSubmitted, setIsSubmitted] = React.useState(false);
     const [comment, setComment] = React.useState('');
     const [reasons, setReasons] = React.useState([]);
-    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const [email, setEmail] = React.useState();
+    const { useTranslate, useUserMenu } = (0, hooks_1.useThemeHooks)();
+    const { userData } = useUserMenu();
     const { translate } = useTranslate();
+    const onEmailChange = (e) => {
+        const value = e.target.value;
+        setEmail(value || undefined);
+    };
     const scaleOptions = [];
     for (let i = 1; i <= exports.MAX_SCALE; i++) {
         scaleOptions.push(React.createElement(Button_1.Button, { id: `scale-option-${i}`, key: `scale-option-${i}`, type: "button", onClick: () => setScore(i), className: `${score === i ? 'active' : ''}` }, i));
@@ -53,10 +59,12 @@ function Scale({ settings, onSubmit, className }) {
     const displayReasons = !!score && reasonsSettings && !reasonsSettings.hide;
     const displayComment = !!(score && !(commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.hide));
     const displaySubmitBnt = !!score && (displayReasons || displayComment);
+    const displayFeedbackEmail = !!score && (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.enabled) && !userData.isAuthenticated;
     const handleCancel = () => {
         setScore(0);
         setComment('');
         setReasons([]);
+        setEmail(undefined);
     };
     const onSubmitScaleForm = () => {
         onSubmit({
@@ -64,15 +72,16 @@ function Scale({ settings, onSubmit, className }) {
             comment,
             reasons,
             max: exports.MAX_SCALE,
+            email,
         });
         setIsSubmitted(true);
     };
     (0, react_1.useEffect)(() => {
-        if (score && !displayComment && !displayReasons) {
+        if (score && !displayComment && !displayReasons && !displayFeedbackEmail) {
             onSubmitScaleForm();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [score, displayComment, displayReasons]);
+    }, [score, displayComment, displayReasons, displayFeedbackEmail]);
     if (isSubmitted) {
         return (React.createElement(ScaleWrapper, { "data-component-name": "Feedback/Scale" },
             React.createElement(Label, { "data-translation-key": "feedback.settings.submitText" }, submitText ||
@@ -80,7 +89,7 @@ function Scale({ settings, onSubmit, className }) {
             React.createElement(RadioCheckButtonIcon_1.RadioCheckButtonIcon, null)));
     }
     return (React.createElement(ScaleWrapper, { "data-component-name": "Feedback/Scale", className: className },
-        React.createElement(StyledForm, null,
+        React.createElement(StyledForm, { onSubmit: onSubmitScaleForm },
             React.createElement(StyledFormMandatoryFields, null,
                 React.createElement(Label, { "data-translation-key": "feedback.settings.label" }, label || translate('feedback.settings.label', 'Was this helpful?')),
                 React.createElement(ScaleOptionsWrapper, null, scaleOptions),
@@ -99,9 +108,14 @@ function Scale({ settings, onSubmit, className }) {
                         label: (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.label) ||
                             translate('feedback.settings.comment.label', 'Please share your feedback with us.'),
                     } }))),
+            displayFeedbackEmail && (React.createElement(StyledFormOptionalFields, null,
+                React.createElement(Label, { "data-translation-key": "feedback.settings.anonymousUserEmail.label" }, (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.label) ||
+                    translate('feedback.settings.anonymousUserEmail.label', 'Your email (optional, for follow-up)')),
+                React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.placeholder) ||
+                        translate('feedback.settings.anonymousUserEmail.placeholder', 'username@mail.com'), type: "email", required: !!email }))),
             displaySubmitBnt && (React.createElement(ButtonsContainer, null,
                 React.createElement(Button_1.Button, { "data-translation-key": "feedback.settings.comment.cancel", onClick: handleCancel, variant: "text", size: "small" }, translate('feedback.settings.comment.cancel', 'Cancel')),
-                React.createElement(Button_1.Button, { "data-translation-key": "feedback.settings.scale.send", onClick: onSubmitScaleForm, variant: "secondary", size: "small" }, translate('feedback.settings.scale.send', 'Submit')))))));
+                React.createElement(Button_1.Button, { "data-translation-key": "feedback.settings.scale.send", type: "submit", variant: "secondary", size: "small" }, translate('feedback.settings.scale.send', 'Submit')))))));
 }
 const ScaleWrapper = styled_components_1.default.div `
   font-family: var(--feedback-font-family);
@@ -172,4 +186,13 @@ const ScaleOptionsWrapper = styled_components_1.default.div `
     gap: 2px;
   }
 `;
+const EmailInput = styled_components_1.default.input `
+  background-color: var(--bg-color);
+  border-radius: var(--border-radius-lg);
+  border: var(--input-border);
+  outline: none;
+  color: var(--feedback-text-color);
+  font-family: var(--feedback-font-family);
+  padding: 10px;
+`;
 //# sourceMappingURL=Scale.js.map

package/lib/components/Feedback/Sentiment.d.ts

@@ -1,9 +1,10 @@
-import { ReasonsSettingsSchema } from '@redocly/config';
+import type { ReasonsSettingsSchema, AnonymousUserEmailSettings } from '@redocly/config';
 export type SentimentProps = {
     onSubmit: (value: {
         score: number;
         comment?: string;
         reasons?: string[];
+        email?: string;
     }) => void;
     settings?: {
         label?: string;
@@ -17,6 +18,7 @@ export type SentimentProps = {
             like?: ReasonsSettingsSchema;
             dislike?: ReasonsSettingsSchema;
         };
+        anonymousUserEmail?: AnonymousUserEmailSettings;
     };
     className?: string;
 };

package/lib/components/Feedback/Sentiment.js

@@ -30,21 +30,27 @@ exports.Sentiment = Sentiment;
 const React = __importStar(require("react"));
 const react_1 = require("react");
 const styled_components_1 = __importDefault(require("styled-components"));
+const Reasons_1 = require("../../components/Feedback/Reasons");
 const hooks_1 = require("../../core/hooks");
 const RadioCheckButtonIcon_1 = require("../../icons/RadioCheckButtonIcon/RadioCheckButtonIcon");
 const Comment_1 = require("../../components/Feedback/Comment");
-const Reasons_1 = require("../../components/Feedback/Reasons");
 const Button_1 = require("../../components/Button/Button");
 const ThumbDownIcon_1 = require("../../icons/ThumbDownIcon/ThumbDownIcon");
 const ThumbUpIcon_1 = require("../../icons/ThumbUpIcon/ThumbUpIcon");
 function Sentiment({ settings, onSubmit, className }) {
-    const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
+    const { label, submitText, comment: commentSettings, reasons: reasonsSettings, anonymousUserEmail: anonymousUserEmailSettings, } = settings || {};
     const [isSubmitted, setIsSubmitted] = React.useState(false);
     const [score, setScore] = React.useState(0);
     const [comment, setComment] = React.useState('');
     const [reasons, setReasons] = React.useState([]);
-    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const [email, setEmail] = React.useState();
+    const { useTranslate, useUserMenu } = (0, hooks_1.useThemeHooks)();
+    const { userData } = useUserMenu();
     const { translate } = useTranslate();
+    const onEmailChange = (e) => {
+        const value = e.target.value;
+        setEmail(value || undefined);
+    };
     const getScoreSpecificReasonSettings = (score) => {
         switch (score) {
             case 1:
@@ -68,6 +74,7 @@ function Sentiment({ settings, onSubmit, className }) {
     const displayReasons = checkIfShouldDisplayReasons(score);
     const displayComment = !!(score && !(commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.hide));
     const displaySubmitBnt = !!(score && (displayReasons || displayComment));
+    const displayFeedbackEmail = !!score && (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.enabled) && !userData.isAuthenticated;
     const commentLabel = score === 1
         ? (commentSettings && commentSettings.likeLabel) ||
             translate('feedback.settings.comment.likeLabel', 'What was most helpful?')
@@ -92,18 +99,22 @@ function Sentiment({ settings, onSubmit, className }) {
             score,
             comment,
             reasons,
+            email,
         });
         setIsSubmitted(true);
     };
     const onCancelSentimentForm = () => {
         setScore(0);
+        setComment('');
+        setReasons([]);
+        setEmail(undefined);
     };
     (0, react_1.useEffect)(() => {
-        if (score && !displayComment && !displayReasons) {
+        if (score && !displayComment && !displayReasons && !displayFeedbackEmail) {
             onSubmitSentimentForm();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [score, displayComment, displayReasons]);
+    }, [score, displayComment, displayReasons, displayFeedbackEmail]);
     if (isSubmitted) {
         return (React.createElement(SentimentWrapper, { "data-component-name": "Feedback/Sentiment" },
             React.createElement(StyledFormMandatoryFields, null,
@@ -129,6 +140,11 @@ function Sentiment({ settings, onSubmit, className }) {
                         component: resolveReasonsComponent(score),
                     }, onChange: setReasons })),
                 displayComment && (React.createElement(Comment_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: commentLabel } })))),
+            displayFeedbackEmail && (React.createElement(StyledFormOptionalFields, null,
+                React.createElement(Label, { "data-translation-key": "feedback.settings.anonymousUserEmail.label" }, (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.label) ||
+                    translate('feedback.settings.anonymousUserEmail.label', 'Your email (optional, for follow-up)')),
+                React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.placeholder) ||
+                        translate('feedback.settings.anonymousUserEmail.placeholder', 'username@mail.com'), type: "email", required: !!email }))),
             displaySubmitBnt && (React.createElement(ButtonsContainer, null,
                 React.createElement(Button_1.Button, { onClick: onCancelSentimentForm, variant: "text", size: "small" }, "Cancel"),
                 React.createElement(Button_1.Button, { onClick: onSubmitSentimentForm, variant: "secondary", size: "small" }, "Submit"))))));
@@ -182,4 +198,13 @@ const ButtonsContainer = styled_components_1.default.div `
   margin-bottom: var(--spacing-xxs);
   gap: var(--spacing-xxs);
 `;
+const EmailInput = styled_components_1.default.input `
+  background-color: var(--bg-color);
+  border-radius: var(--border-radius-lg);
+  border: var(--input-border);
+  outline: none;
+  color: var(--feedback-text-color);
+  font-family: var(--feedback-font-family);
+  padding: 10px;
+`;
 //# sourceMappingURL=Sentiment.js.map

package/lib/core/hooks/use-theme-hooks.js

@@ -11,6 +11,7 @@ const fallbacks = {
     useTelemetry: () => ({ telemetry: () => { } }),
     useBreadcrumbs: () => [],
     useCodeHighlight: () => ({ highlight: (rawContent) => rawContent }),
+    useUserMenu: () => ({}),
 };
 const useThemeHooks = () => {
     const context = (0, react_1.useContext)(contexts_1.ThemeDataContext);

package/lib/core/types/l10n.d.ts

@@ -1,5 +1,5 @@
 import type { TOptions } from 'i18next';
-export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.aiButton' | 'search.ai.label' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeLayout' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.settings.reasons.send' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'page.nextButton' | 'page.previousButton' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.deprecated' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.noResponseExample' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.scopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced';
+export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.aiButton' | 'search.ai.label' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeLayout' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.settings.reasons.send' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.anonymousUserEmail.placeholder' | 'feedback.settings.anonymousUserEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'page.nextButton' | 'page.previousButton' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.deprecated' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.noResponseExample' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.scopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced';
 export type Locale = {
     code: string;
     name: string;

package/lib/markdoc/components/Cards/Card.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export type CardProps = React.PropsWithChildren<{
-    title: string;
+    title?: string;
     image?: string;
     icon?: string;
     iconRawContent?: string;

package/lib/markdoc/components/Cards/Card.js

@@ -10,8 +10,8 @@ const ChevronRightIcon_1 = require("../../../icons/ChevronRightIcon/ChevronRight
 const CardImage_1 = require("../../../markdoc/components/Cards/CardImage");
 const CardIcon_1 = require("../../../markdoc/components/Cards/CardIcon");
 const Link_1 = require("../../../components/Link/Link");
-function Card({ title, image, icon, iconRawContent, imagePosition = 'start', iconPosition = 'auto', layout = 'vertical', variant = 'filled', lineClamp, iconVariant, align = 'start', to, children, }) {
-    const titleNoSpaces = title.replace(/\s+/g, '-').toLowerCase();
+function Card({ title = '', image, icon, iconRawContent, imagePosition = 'start', iconPosition = 'auto', layout = 'vertical', variant = 'filled', lineClamp, iconVariant, align = 'start', to, children, }) {
+    const titleNoSpaces = title === null || title === void 0 ? void 0 : title.replace(/\s+/g, '-').toLowerCase();
     const cardTitleId = `card-title-${titleNoSpaces}`;
     const justifyContent = align === 'center' ? 'center' : align === 'end' ? 'flex-end' : 'flex-start';
     const alignItems = align === 'center' ? 'center' : align === 'end' ? 'flex-end' : 'flex-start';

package/lib/markdoc/tags/markdoc-example.js

@@ -5,6 +5,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.markdocExample = void 0;
 const markdoc_1 = __importDefault(require("@markdoc/markdoc"));
+// Walk through AST and look for raw markdown to parse
+function parseInlineMarkdown(ast, config) {
+    if (Array.isArray(ast)) {
+        return ast.flatMap((child) => parseInlineMarkdown(child, config));
+    }
+    if (typeof ast === 'string') {
+        const parsed = markdoc_1.default.parse(ast);
+        return markdoc_1.default.transform(parsed, config);
+    }
+    if (ast && typeof ast === 'object' && ast.$$mdtype === 'Tag') {
+        const children = parseInlineMarkdown(ast.children, config);
+        return Object.assign(Object.assign({}, ast), { children });
+    }
+    return ast;
+}
 // This custom tag prevents evaluating any children markdoc tags (no children) so we can
 // have markdoc examples in code fences
 // approach copied from: https://github.com/markdoc/docs/blob/main/markdoc/tags/markdoc-example.markdoc.js
@@ -30,8 +45,10 @@ exports.markdocExample = {
                 const fenceWithTitle = annotations.find((annotation) => annotation.name === 'title');
                 title = fenceWithTitle === null || fenceWithTitle === void 0 ? void 0 : fenceWithTitle.value;
             }
+            const demoContent = node.children[0].transformChildren(config);
+            const parsedDemoContent = parseInlineMarkdown(demoContent, config);
             return new markdoc_1.default.Tag('MarkdocExample', Object.assign(Object.assign({}, attributes), { title,
-                language, demoContent: node.children[0].transformChildren(config), rawContent: content }), []);
+                language, demoContent: parsedDemoContent, rawContent: content }), []);
         },
     },
     tagName: 'markdoc-example',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.46.3",
+  "version": "0.46.4",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -79,7 +79,7 @@
     "timeago.js": "4.0.2",
     "i18next": "22.4.15",
     "nprogress": "0.2.0",
-    "@redocly/config": "0.19.1"
+    "@redocly/config": "0.19.2"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Feedback/Mood.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import { useEffect } from 'react';
 import styled from 'styled-components';
-import { ReasonsSettingsSchema } from '@redocly/config';
 
+import type { AnonymousUserEmailSettings, ReasonsSettingsSchema } from '@redocly/config';
 import type { ReasonsProps } from '@redocly/theme/components/Feedback/Reasons';
 
+import { Reasons } from '@redocly/theme/components/Feedback/Reasons';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { RadioCheckButtonIcon } from '@redocly/theme/icons/RadioCheckButtonIcon/RadioCheckButtonIcon';
 import { Comment } from '@redocly/theme/components/Feedback/Comment';
-import { Reasons } from '@redocly/theme/components/Feedback/Reasons';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { FaceDissatisfiedIcon } from '@redocly/theme/icons/FaceDissatisfiedIcon/FaceDissatisfiedIcon';
 import { FaceSatisfiedIcon } from '@redocly/theme/icons/FaceSatisfiedIcon/FaceSatisfiedIcon';
@@ -21,7 +21,12 @@ export enum MOOD_STATES {
 }
 
 export type MoodProps = {
-  onSubmit: (value: { score: number; comment?: string; reasons?: string[] }) => void;
+  onSubmit: (value: {
+    score: number;
+    comment?: string;
+    reasons?: string[];
+    email?: string;
+  }) => void;
   settings?: {
     label?: string;
     submitText?: string;
@@ -36,19 +41,33 @@ export type MoodProps = {
       neutral?: ReasonsSettingsSchema;
       dissatisfied?: ReasonsSettingsSchema;
     };
+    anonymousUserEmail?: AnonymousUserEmailSettings;
   };
   className?: string;
 };
 
 export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element {
-  const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
+  const {
+    label,
+    submitText,
+    comment: commentSettings,
+    reasons: reasonsSettings,
+    anonymousUserEmail: anonymousUserEmailSettings,
+  } = settings || {};
   const [score, setScore] = React.useState('');
   const [isSubmitted, setIsSubmitted] = React.useState(false);
   const [comment, setComment] = React.useState('');
   const [reasons, setReasons] = React.useState([] as ReasonsProps['settings']['items']);
-  const { useTranslate } = useThemeHooks();
+  const [email, setEmail] = React.useState<string>();
+  const { useTranslate, useUserMenu } = useThemeHooks();
+  const { userData } = useUserMenu();
   const { translate } = useTranslate();
 
+  const onEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setEmail(value || undefined);
+  };
+
   const checkIfShouldDisplayReasons = (score: string) => {
     if (!score || !reasonsSettings) {
       return false;
@@ -112,26 +131,32 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
   const displayReasons = checkIfShouldDisplayReasons(score);
   const displayComment = !!(score && !commentSettings?.hide);
   const displaySubmitBnt = !!(score && (displayReasons || displayComment));
+  const displayFeedbackEmail =
+    !!score && anonymousUserEmailSettings?.enabled && !userData.isAuthenticated;
 
   const onSubmitMoodForm = () => {
     onSubmit({
       score: remapScore(score),
       comment,
       reasons,
+      email,
     });
     setIsSubmitted(true);
   };
 
   const onCancelMoodForm = () => {
     setScore('');
+    setComment('');
+    setReasons([]);
+    setEmail(undefined);
   };
 
   useEffect(() => {
-    if (score && !displayComment && !displayReasons) {
+    if (score && !displayComment && !displayReasons && !displayFeedbackEmail) {
       onSubmitMoodForm();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [score, displayComment, displayReasons]);
+  }, [score, displayComment, displayReasons, displayFeedbackEmail]);
 
   if (isSubmitted) {
     return (
@@ -152,7 +177,7 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
 
   return (
     <MoodWrapper data-component-name="Feedback/Mood" className={className}>
-      <StyledForm>
+      <StyledForm onSubmit={onSubmitMoodForm}>
         <StyledFormMandatoryFields>
           <Label data-translation-key="feedback.settings.label">
             {label || translate('feedback.settings.label', 'Was this helpful?')}
@@ -213,12 +238,34 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
             )}
           </StyledFormOptionalFields>
         )}
+
+        {displayFeedbackEmail && (
+          <StyledFormOptionalFields>
+            <Label data-translation-key="feedback.settings.anonymousUserEmail.label">
+              {anonymousUserEmailSettings?.label ||
+                translate(
+                  'feedback.settings.anonymousUserEmail.label',
+                  'Your email (optional, for follow-up)',
+                )}
+            </Label>
+            <EmailInput
+              onChange={onEmailChange}
+              placeholder={
+                anonymousUserEmailSettings?.placeholder ||
+                translate('feedback.settings.anonymousUserEmail.placeholder', 'username@mail.com')
+              }
+              type="email"
+              required={!!email}
+            />
+          </StyledFormOptionalFields>
+        )}
+
         {displaySubmitBnt && (
           <ButtonsContainer>
             <Button onClick={onCancelMoodForm} variant="text" size="small">
               Cancel
             </Button>
-            <Button onClick={onSubmitMoodForm} variant="secondary" size="small">
+            <Button type="submit" variant="secondary" size="small">
               Submit
             </Button>
           </ButtonsContainer>
@@ -291,3 +338,13 @@ const StyledMandatoryFieldContainer = styled.div`
   align-items: center;
   gap: var(--spacing-xxs);
 `;
+
+const EmailInput = styled.input`
+  background-color: var(--bg-color);
+  border-radius: var(--border-radius-lg);
+  border: var(--input-border);
+  outline: none;
+  color: var(--feedback-text-color);
+  font-family: var(--feedback-font-family);
+  padding: 10px;
+`;

package/src/components/Feedback/Rating.tsx

@@ -1,20 +1,27 @@
 import * as React from 'react';
-import styled from 'styled-components';
 import { useEffect } from 'react';
+import styled from 'styled-components';
 
+import type { AnonymousUserEmailSettings } from '@redocly/config';
 import type { ReasonsProps } from '@redocly/theme/components/Feedback/Reasons';
 
+import { Reasons } from '@redocly/theme/components/Feedback/Reasons';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { RadioCheckButtonIcon } from '@redocly/theme/icons/RadioCheckButtonIcon/RadioCheckButtonIcon';
 import { Comment } from '@redocly/theme/components/Feedback/Comment';
-import { Reasons } from '@redocly/theme/components/Feedback/Reasons';
 import { Stars } from '@redocly/theme/components/Feedback/Stars';
 import { Button } from '@redocly/theme/components/Button/Button';
 
 export const FEEDBACK_MAX_RATING = 5;
 
 export type RatingProps = {
-  onSubmit: (value: { score: number; comment?: string; reasons?: string[]; max: number }) => void;
+  onSubmit: (value: {
+    score: number;
+    comment?: string;
+    reasons?: string[];
+    max: number;
+    email?: string;
+  }) => void;
   settings?: {
     label?: string;
     submitText?: string;
@@ -28,43 +35,63 @@ export type RatingProps = {
       component?: string;
       items: string[];
     };
+    anonymousUserEmail?: AnonymousUserEmailSettings;
   };
   className?: string;
 };
 
 export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Element {
-  const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
+  const {
+    label,
+    submitText,
+    comment: commentSettings,
+    reasons: reasonsSettings,
+    anonymousUserEmail: anonymousUserEmailSettings,
+  } = settings || {};
   const [isSubmitted, setIsSubmitted] = React.useState(false);
   const [score, setScore] = React.useState(0);
   const [reasons, setReasons] = React.useState([] as ReasonsProps['settings']['items']);
   const [comment, setComment] = React.useState('');
-  const { useTranslate } = useThemeHooks();
+  const [email, setEmail] = React.useState<string>();
+  const { useTranslate, useUserMenu } = useThemeHooks();
+  const { userData } = useUserMenu();
   const { translate } = useTranslate();
 
+  const onEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setEmail(value || undefined);
+  };
+
   const onSubmitRatingForm = () => {
     onSubmit({
       score,
       comment,
       reasons,
       max: FEEDBACK_MAX_RATING,
+      email,
     });
     setIsSubmitted(true);
   };
 
   const onCancelRatingForm = () => {
     setScore(0);
+    setComment('');
+    setReasons([]);
+    setEmail(undefined);
   };
 
   const displayReasons = !!(score && reasonsSettings && !reasonsSettings.hide);
   const displayComment = !!(score && !commentSettings?.hide);
   const displaySubmitBnt = !!(score && (displayReasons || displayComment));
+  const displayFeedbackEmail =
+    !!score && anonymousUserEmailSettings?.enabled && !userData.isAuthenticated;
 
   useEffect(() => {
-    if (score && !displayComment && !displayReasons) {
+    if (score && !displayComment && !displayReasons && !displayFeedbackEmail) {
       onSubmitRatingForm();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [score, displayComment, displayReasons]);
+  }, [score, displayComment, displayReasons, displayFeedbackEmail]);
 
   if (isSubmitted) {
     return (
@@ -95,7 +122,6 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
             <Stars max={FEEDBACK_MAX_RATING} onChange={setScore} value={score} />
           </StyledMandatoryFieldContainer>
         </StyledFormMandatoryFields>
-
         {(displayReasons || displayComment) && (
           <StyledFormOptionalFields>
             {displayReasons && (
@@ -125,6 +151,28 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
             )}
           </StyledFormOptionalFields>
         )}
+
+        {displayFeedbackEmail && (
+          <StyledFormOptionalFields>
+            <Label data-translation-key="feedback.settings.anonymousUserEmail.label">
+              {anonymousUserEmailSettings?.label ||
+                translate(
+                  'feedback.settings.anonymousUserEmail.label',
+                  'Your email (optional, for follow-up)',
+                )}
+            </Label>
+            <EmailInput
+              onChange={onEmailChange}
+              placeholder={
+                anonymousUserEmailSettings?.placeholder ||
+                translate('feedback.settings.anonymousUserEmail.placeholder', 'username@mail.com')
+              }
+              type="email"
+              required={!!email}
+            />
+          </StyledFormOptionalFields>
+        )}
+
         {displaySubmitBnt && (
           <ButtonsContainer>
             <Button onClick={onCancelRatingForm} variant="text" size="small">
@@ -185,3 +233,13 @@ const ButtonsContainer = styled.div`
   margin-bottom: var(--spacing-xxs);
   gap: var(--spacing-xxs);
 `;
+
+const EmailInput = styled.input`
+  background-color: var(--bg-color);
+  border-radius: var(--border-radius-lg);
+  border: var(--input-border);
+  outline: none;
+  color: var(--feedback-text-color);
+  font-family: var(--feedback-font-family);
+  padding: 10px;
+`;

package/src/components/Feedback/Scale.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useEffect } from 'react';
 import styled from 'styled-components';
 
+import type { AnonymousUserEmailSettings } from '@redocly/config';
 import type { ReasonsProps } from '@redocly/theme/components/Feedback/Reasons';
 
 import { breakpoints } from '@redocly/theme/core/utils';
@@ -14,7 +15,13 @@ import { Button } from '@redocly/theme/components/Button/Button';
 export const MAX_SCALE = 10;
 
 export type ScaleProps = {
-  onSubmit: (value: { score: number; comment?: string; reasons?: string[]; max?: number }) => void;
+  onSubmit: (value: {
+    score: number;
+    comment?: string;
+    reasons?: string[];
+    max?: number;
+    email?: string;
+  }) => void;
   settings?: {
     label?: string;
     submitText?: string;
@@ -30,6 +37,7 @@ export type ScaleProps = {
       component?: string;
       items: string[];
     };
+    anonymousUserEmail?: AnonymousUserEmailSettings;
   };
   className?: string;
 };
@@ -42,14 +50,22 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
     rightScaleLabel,
     comment: commentSettings,
     reasons: reasonsSettings,
+    anonymousUserEmail: anonymousUserEmailSettings,
   } = settings || {};
   const [score, setScore] = React.useState(0);
   const [isSubmitted, setIsSubmitted] = React.useState(false);
   const [comment, setComment] = React.useState('');
   const [reasons, setReasons] = React.useState([] as ReasonsProps['settings']['items']);
-  const { useTranslate } = useThemeHooks();
+  const [email, setEmail] = React.useState<string>();
+  const { useTranslate, useUserMenu } = useThemeHooks();
+  const { userData } = useUserMenu();
   const { translate } = useTranslate();
 
+  const onEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setEmail(value || undefined);
+  };
+
   const scaleOptions = [];
 
   for (let i = 1; i <= MAX_SCALE; i++) {
@@ -69,11 +85,14 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
   const displayReasons = !!score && reasonsSettings && !reasonsSettings.hide;
   const displayComment = !!(score && !commentSettings?.hide);
   const displaySubmitBnt = !!score && (displayReasons || displayComment);
+  const displayFeedbackEmail =
+    !!score && anonymousUserEmailSettings?.enabled && !userData.isAuthenticated;
 
   const handleCancel = () => {
     setScore(0);
     setComment('');
     setReasons([]);
+    setEmail(undefined);
   };
 
   const onSubmitScaleForm = () => {
@@ -82,16 +101,17 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
       comment,
       reasons,
       max: MAX_SCALE,
+      email,
     });
     setIsSubmitted(true);
   };
 
   useEffect(() => {
-    if (score && !displayComment && !displayReasons) {
+    if (score && !displayComment && !displayReasons && !displayFeedbackEmail) {
       onSubmitScaleForm();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [score, displayComment, displayReasons]);
+  }, [score, displayComment, displayReasons, displayFeedbackEmail]);
 
   if (isSubmitted) {
     return (
@@ -110,7 +130,7 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
 
   return (
     <ScaleWrapper data-component-name="Feedback/Scale" className={className}>
-      <StyledForm>
+      <StyledForm onSubmit={onSubmitScaleForm}>
         <StyledFormMandatoryFields>
           <Label data-translation-key="feedback.settings.label">
             {label || translate('feedback.settings.label', 'Was this helpful?')}
@@ -156,6 +176,28 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
             />
           )}
         </StyledFormOptionalFields>
+
+        {displayFeedbackEmail && (
+          <StyledFormOptionalFields>
+            <Label data-translation-key="feedback.settings.anonymousUserEmail.label">
+              {anonymousUserEmailSettings?.label ||
+                translate(
+                  'feedback.settings.anonymousUserEmail.label',
+                  'Your email (optional, for follow-up)',
+                )}
+            </Label>
+            <EmailInput
+              onChange={onEmailChange}
+              placeholder={
+                anonymousUserEmailSettings?.placeholder ||
+                translate('feedback.settings.anonymousUserEmail.placeholder', 'username@mail.com')
+              }
+              type="email"
+              required={!!email}
+            />
+          </StyledFormOptionalFields>
+        )}
+
         {displaySubmitBnt && (
           <ButtonsContainer>
             <Button
@@ -169,7 +211,7 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
 
             <Button
               data-translation-key="feedback.settings.scale.send"
-              onClick={onSubmitScaleForm}
+              type="submit"
               variant="secondary"
               size="small"
             >
@@ -259,3 +301,13 @@ const ScaleOptionsWrapper = styled.div`
     gap: 2px;
   }
 `;
+
+const EmailInput = styled.input`
+  background-color: var(--bg-color);
+  border-radius: var(--border-radius-lg);
+  border: var(--input-border);
+  outline: none;
+  color: var(--feedback-text-color);
+  font-family: var(--feedback-font-family);
+  padding: 10px;
+`;

package/src/components/Feedback/Sentiment.tsx

@@ -1,20 +1,25 @@
 import * as React from 'react';
 import { useEffect } from 'react';
 import styled from 'styled-components';
-import { ReasonsSettingsSchema } from '@redocly/config';
 
+import type { ReasonsSettingsSchema, AnonymousUserEmailSettings } from '@redocly/config';
 import type { ReasonsProps } from '@redocly/theme/components/Feedback/Reasons';
 
+import { Reasons } from '@redocly/theme/components/Feedback/Reasons';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { RadioCheckButtonIcon } from '@redocly/theme/icons/RadioCheckButtonIcon/RadioCheckButtonIcon';
 import { Comment } from '@redocly/theme/components/Feedback/Comment';
-import { Reasons } from '@redocly/theme/components/Feedback/Reasons';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { ThumbDownIcon } from '@redocly/theme/icons/ThumbDownIcon/ThumbDownIcon';
 import { ThumbUpIcon } from '@redocly/theme/icons/ThumbUpIcon/ThumbUpIcon';
 
 export type SentimentProps = {
-  onSubmit: (value: { score: number; comment?: string; reasons?: string[] }) => void;
+  onSubmit: (value: {
+    score: number;
+    comment?: string;
+    reasons?: string[];
+    email?: string;
+  }) => void;
   settings?: {
     label?: string;
     submitText?: string;
@@ -27,19 +32,33 @@ export type SentimentProps = {
       like?: ReasonsSettingsSchema;
       dislike?: ReasonsSettingsSchema;
     };
+    anonymousUserEmail?: AnonymousUserEmailSettings;
   };
   className?: string;
 };
 
 export function Sentiment({ settings, onSubmit, className }: SentimentProps): JSX.Element {
-  const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
+  const {
+    label,
+    submitText,
+    comment: commentSettings,
+    reasons: reasonsSettings,
+    anonymousUserEmail: anonymousUserEmailSettings,
+  } = settings || {};
   const [isSubmitted, setIsSubmitted] = React.useState(false);
   const [score, setScore] = React.useState(0);
   const [comment, setComment] = React.useState('');
   const [reasons, setReasons] = React.useState([] as ReasonsProps['settings']['items']);
-  const { useTranslate } = useThemeHooks();
+  const [email, setEmail] = React.useState<string>();
+  const { useTranslate, useUserMenu } = useThemeHooks();
+  const { userData } = useUserMenu();
   const { translate } = useTranslate();
 
+  const onEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setEmail(value || undefined);
+  };
+
   const getScoreSpecificReasonSettings = (score: number) => {
     switch (score) {
       case 1:
@@ -68,6 +87,8 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
   const displayReasons = checkIfShouldDisplayReasons(score);
   const displayComment = !!(score && !commentSettings?.hide);
   const displaySubmitBnt = !!(score && (displayReasons || displayComment));
+  const displayFeedbackEmail =
+    !!score && anonymousUserEmailSettings?.enabled && !userData.isAuthenticated;
 
   const commentLabel =
     score === 1
@@ -100,20 +121,24 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
       score,
       comment,
       reasons,
+      email,
     });
     setIsSubmitted(true);
   };
 
   const onCancelSentimentForm = () => {
     setScore(0);
+    setComment('');
+    setReasons([]);
+    setEmail(undefined);
   };
 
   useEffect(() => {
-    if (score && !displayComment && !displayReasons) {
+    if (score && !displayComment && !displayReasons && !displayFeedbackEmail) {
       onSubmitSentimentForm();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [score, displayComment, displayReasons]);
+  }, [score, displayComment, displayReasons, displayFeedbackEmail]);
 
   if (isSubmitted) {
     return (
@@ -186,6 +211,28 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
             )}
           </StyledFormOptionalFields>
         )}
+
+        {displayFeedbackEmail && (
+          <StyledFormOptionalFields>
+            <Label data-translation-key="feedback.settings.anonymousUserEmail.label">
+              {anonymousUserEmailSettings?.label ||
+                translate(
+                  'feedback.settings.anonymousUserEmail.label',
+                  'Your email (optional, for follow-up)',
+                )}
+            </Label>
+            <EmailInput
+              onChange={onEmailChange}
+              placeholder={
+                anonymousUserEmailSettings?.placeholder ||
+                translate('feedback.settings.anonymousUserEmail.placeholder', 'username@mail.com')
+              }
+              type="email"
+              required={!!email}
+            />
+          </StyledFormOptionalFields>
+        )}
+
         {displaySubmitBnt && (
           <ButtonsContainer>
             <Button onClick={onCancelSentimentForm} variant="text" size="small">
@@ -256,3 +303,13 @@ const ButtonsContainer = styled.div`
   margin-bottom: var(--spacing-xxs);
   gap: var(--spacing-xxs);
 `;
+
+const EmailInput = styled.input`
+  background-color: var(--bg-color);
+  border-radius: var(--border-radius-lg);
+  border: var(--input-border);
+  outline: none;
+  color: var(--feedback-text-color);
+  font-family: var(--feedback-font-family);
+  padding: 10px;
+`;

package/src/core/hooks/use-theme-hooks.ts

@@ -13,6 +13,7 @@ const fallbacks = {
   useTelemetry: () => ({ telemetry: () => {} }),
   useBreadcrumbs: () => [],
   useCodeHighlight: () => ({ highlight: (rawContent: string) => rawContent }),
+  useUserMenu: () => ({}),
 };
 
 export const useThemeHooks = () => {

package/src/core/types/l10n.ts

@@ -129,6 +129,8 @@ export type TranslationKey =
   | 'feedback.sentiment.thumbDown'
   | 'feedback.settings.leftScaleLabel'
   | 'feedback.settings.rightScaleLabel'
+  | 'feedback.settings.anonymousUserEmail.placeholder'
+  | 'feedback.settings.anonymousUserEmail.label'
   | 'codeSnippet.report.buttonText'
   | 'codeSnippet.report.tooltipText'
   | 'codeSnippet.report.label'

package/src/markdoc/components/Cards/Card.tsx

@@ -7,7 +7,7 @@ import { CardIcon } from '@redocly/theme/markdoc/components/Cards/CardIcon';
 import { Link } from '@redocly/theme/components/Link/Link';
 
 export type CardProps = React.PropsWithChildren<{
-  title: string;
+  title?: string;
   image?: string;
   icon?: string;
   iconRawContent?: string;
@@ -22,7 +22,7 @@ export type CardProps = React.PropsWithChildren<{
 }>;
 
 export function Card({
-  title,
+  title = '',
   image,
   icon,
   iconRawContent,
@@ -36,7 +36,7 @@ export function Card({
   to,
   children,
 }: CardProps) {
-  const titleNoSpaces = title.replace(/\s+/g, '-').toLowerCase();
+  const titleNoSpaces = title?.replace(/\s+/g, '-').toLowerCase();
   const cardTitleId = `card-title-${titleNoSpaces}`;
   const justifyContent =
     align === 'center' ? 'center' : align === 'end' ? 'flex-end' : 'flex-start';

package/src/markdoc/tags/markdoc-example.ts

@@ -1,8 +1,30 @@
 import markdoc from '@markdoc/markdoc';
 
-import type { Config, Node } from '@markdoc/markdoc';
+import type { Config, Node, RenderableTreeNode } from '@markdoc/markdoc';
 import type { MarkdocSchemaWrapper } from '@redocly/theme/markdoc/tags/types';
 
+// Walk through AST and look for raw markdown to parse
+function parseInlineMarkdown(
+  ast: RenderableTreeNode | RenderableTreeNode[],
+  config: Config,
+): RenderableTreeNode | RenderableTreeNode[] {
+  if (Array.isArray(ast)) {
+    return ast.flatMap((child) => parseInlineMarkdown(child, config));
+  }
+
+  if (typeof ast === 'string') {
+    const parsed = markdoc.parse(ast);
+    return markdoc.transform(parsed, config);
+  }
+
+  if (ast && typeof ast === 'object' && ast.$$mdtype === 'Tag') {
+    const children = parseInlineMarkdown(ast.children, config);
+    return { ...ast, children } as RenderableTreeNode;
+  }
+
+  return ast;
+}
+
 // This custom tag prevents evaluating any children markdoc tags (no children) so we can
 // have markdoc examples in code fences
 // approach copied from: https://github.com/markdoc/docs/blob/main/markdoc/tags/markdoc-example.markdoc.js
@@ -29,13 +51,16 @@ export const markdocExample: MarkdocSchemaWrapper = {
         title = fenceWithTitle?.value;
       }
 
+      const demoContent = node.children[0].transformChildren(config);
+      const parsedDemoContent = parseInlineMarkdown(demoContent, config);
+
       return new markdoc.Tag(
         'MarkdocExample',
         {
           ...attributes,
           title,
           language,
-          demoContent: node.children[0].transformChildren(config),
+          demoContent: parsedDemoContent,
           rawContent: content,
         },
         [],