@redocly/theme 0.25.1 → 0.25.3

package/lib/components/Catalog/Catalog.js

@@ -21,15 +21,12 @@ function Catalog(props) {
     const items = (0, index_1.usePageSharedData)('catalog');
     const { filterTerm, setFilterTerm, groups, filters } = (0, Catalog_1.useCatalog)(items, catalogConfig);
     const [isAddingFilter, setIsAddingFilter] = react_1.default.useState(false);
-    const translationKeys = {
-        addFilter: 'theme.catalog.filters.select.addFilter',
-    };
     const { translate } = (0, index_1.useTranslate)();
     (0, useModalScrollLock_1.default)(isAddingFilter);
     return (react_1.default.createElement(Highlight_1.HighlightContext.Provider, { value: [filterTerm] },
         react_1.default.createElement(exports.CatalogPageWrapper, { withoutFilters: !filters.length },
             !!filters.length && (react_1.default.createElement(FilterTagsWrapper, null,
-                react_1.default.createElement(Button_1.Button, { variant: "text", size: "small", icon: react_1.default.createElement(PlusIcon_1.PlusIcon, null), onClick: () => setIsAddingFilter(true) }, translate(translationKeys.addFilter, 'Add filter')),
+                react_1.default.createElement(Button_1.Button, { variant: "text", size: "small", icon: react_1.default.createElement(PlusIcon_1.PlusIcon, null), onClick: () => setIsAddingFilter(true) }, translate('theme.catalog.filters.select.addFilter', 'Add filter')),
                 react_1.default.createElement(FilterTags_1.FilterTags, { filters: filters }))),
             react_1.default.createElement(FilterContent_1.FilterContent, { setFilterTerm: setFilterTerm, filters: filters, filterTerm: filterTerm, isMobile: false, filterValuesCasing: catalogConfig.filterValuesCasing }),
             isAddingFilter && (react_1.default.createElement(FilterPopover_1.FilterPopover, { setIsAddingFilter: setIsAddingFilter, filters: filters, filterValuesCasing: catalogConfig.filterValuesCasing })),

package/lib/components/CopyButton/CopyButton.js

@@ -34,11 +34,6 @@ const hooks_2 = require("../../mocks/hooks");
 function CopyButtonComponent({ data, type = 'icon', toasterPlacement = 'top', toasterText, toasterDuration, buttonText, tooltipText, onCopyClick, dataTestId = 'copy-button', }) {
     const tooltip = (0, hooks_1.useControl)();
     const { translate } = (0, hooks_2.useTranslate)();
-    const translationKeys = {
-        buttonText: 'theme.codeSnippet.copy.buttonText',
-        tooltipText: 'theme.codeSnippet.copy.tooltipText',
-        toasterText: 'theme.codeSnippet.copy.toasterText',
-    };
     const showTooltip = (duration = 1500) => {
         tooltip.handleOpen();
         setTimeout(() => {
@@ -51,8 +46,8 @@ function CopyButtonComponent({ data, type = 'icon', toasterPlacement = 'top', to
         showTooltip(duration);
         onCopyClick === null || onCopyClick === void 0 ? void 0 : onCopyClick();
     };
-    return (react_1.default.createElement(Tooltip_1.Tooltip, { className: "copy-button", tip: translate(translationKeys.toasterText, toasterText || 'Copied!'), isOpen: tooltip.isOpened, placement: toasterPlacement },
-        react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, { onClick: () => copy(toasterDuration), "data-cy": dataTestId, asIcon: type === 'icon', title: translate(translationKeys.tooltipText, tooltipText || 'Copy to clipboard'), "data-testid": dataTestId }, type === 'icon' ? (react_1.default.createElement(icons_1.CopyIcon, null)) : (translate(translationKeys.buttonText, buttonText || 'Copy')))));
+    return (react_1.default.createElement(Tooltip_1.Tooltip, { className: "copy-button", tip: translate('theme.codeSnippet.copy.buttonText', toasterText || 'Copied!'), isOpen: tooltip.isOpened, placement: toasterPlacement },
+        react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, { onClick: () => copy(toasterDuration), "data-cy": dataTestId, asIcon: type === 'icon', title: translate('theme.codeSnippet.copy.tooltipText', tooltipText || 'Copy to clipboard'), "data-testid": dataTestId }, type === 'icon' ? (react_1.default.createElement(icons_1.CopyIcon, null)) : (translate('theme.codeSnippet.copy.toasterText', buttonText || 'Copy')))));
 }
 exports.CopyButton = (0, react_1.memo)(CopyButtonComponent);
 //# sourceMappingURL=CopyButton.js.map

package/lib/components/EditPageButton/EditPageButton.js

@@ -12,12 +12,9 @@ const icons_1 = require("../../icons");
 const hooks_1 = require("../../mocks/hooks");
 const EditPageButton = ({ to }) => {
     const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        text: 'theme.markdown.editPage.text',
-    };
     return (react_1.default.createElement(EditButton, { "data-component-name": "EditPageButton/EditPageButton", to: to, onClick: () => telemetry_1.telemetry.send('edit_page_link_clicked', {}) },
         react_1.default.createElement(ButtonIcon, null),
-        react_1.default.createElement(ButtonText, { "data-translation-key": translationKeys.text }, translate(translationKeys.text, 'Edit'))));
+        react_1.default.createElement(ButtonText, { "data-translation-key": "theme.markdown.editPage.text" }, translate('theme.markdown.editPage.text', 'Edit'))));
 };
 exports.EditPageButton = EditPageButton;
 const EditButton = (0, styled_components_1.default)(Link_1.Link) `

package/lib/components/Feedback/Comment.js

@@ -36,12 +36,6 @@ const Comment = ({ settings, onSubmit, onCancel, className }) => {
     const [text, setText] = React.useState('');
     const [submitValue, setSubmitValue] = React.useState('');
     const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        submitText: 'theme.feedback.settings.comment.submitText',
-        label: 'theme.feedback.settings.comment.label',
-        send: 'theme.feedback.settings.comment.send',
-        cancel: 'theme.feedback.settings.comment.cancel',
-    };
     const send = () => {
         if (!text)
             return;
@@ -53,14 +47,14 @@ const Comment = ({ settings, onSubmit, onCancel, className }) => {
     };
     if (submitValue) {
         return (React.createElement(Wrapper, { className: className },
-            React.createElement(Label, { "data-translation-key": translationKeys.submitText }, translate(translationKeys.submitText, submitText || 'Thank you for helping improve our documentation!'))));
+            React.createElement(Label, { "data-translation-key": "theme.feedback.settings.comment.submitText" }, translate('theme.feedback.settings.comment.submitText', submitText || 'Thank you for helping improve our documentation!'))));
     }
     return (React.createElement(Wrapper, { "data-component-name": "Feedback/Comment", className: className },
-        React.createElement(Label, { "data-translation-key": translationKeys.label }, translate(translationKeys.label, label || 'Please share your feedback with us.')),
+        React.createElement(Label, { "data-translation-key": "theme.feedback.settings.comment.label" }, translate('theme.feedback.settings.comment.label', label || 'Please share your feedback with us.')),
         React.createElement(TextArea, { rows: 3, onChange: handleTextAreaChange }),
         React.createElement(ButtonsContainer, null,
-            React.createElement(SendButton, { "data-translation-key": translationKeys.send, onClick: send }, translate(translationKeys.send, 'Send')),
-            onCancel && (React.createElement(CancelButton, { "data-translation-key": translationKeys.cancel, onClick: onCancel }, translate(translationKeys.cancel, 'Cancel'))))));
+            React.createElement(SendButton, { "data-translation-key": "theme.feedback.settings.comment.send", onClick: send }, translate('theme.feedback.settings.comment.send', 'Send')),
+            onCancel && (React.createElement(CancelButton, { "data-translation-key": "theme.feedback.settings.comment.cancel", onClick: onCancel }, translate('theme.feedback.settings.comment.cancel', 'Cancel'))))));
 };
 exports.Comment = Comment;
 const Wrapper = styled_components_1.default.div `

package/lib/components/Feedback/Mood.js

@@ -45,13 +45,6 @@ const Mood = ({ settings, onSubmit, className }) => {
     const [comment, setComment] = React.useState('');
     const [reasons, setReasons] = React.useState([]);
     const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        submitText: 'theme.feedback.settings.submitText',
-        label: 'theme.feedback.settings.label',
-        satisfiedLabel: 'theme.feedback.settings.comment.satisfiedLabel',
-        neutralLabel: 'theme.feedback.settings.comment.neutralLabel',
-        dissatisfiedLabel: 'theme.feedback.settings.comment.dissatisfiedLabel',
-    };
     if (score && (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.enable) && !reasons.length) {
         const { label: reasonsLabel, items, multi } = reasonsSettings;
         const buttonText = (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.enable) ? 'Next' : 'Send';
@@ -61,13 +54,13 @@ const Mood = ({ settings, onSubmit, className }) => {
         const renderCommentLabel = (score) => {
             switch (score) {
                 case MOOD_STATES.SATISFIED:
-                    return translate(translationKeys.satisfiedLabel, commentSettings.satisfiedLabel || 'What was most helpful?');
+                    return translate('theme.feedback.settings.comment.satisfiedLabel', commentSettings.satisfiedLabel || 'What was most helpful?');
                 case MOOD_STATES.NEUTRAL:
-                    return translate(translationKeys.neutralLabel, commentSettings.neutralLabel || 'What can we improve?');
+                    return translate('theme.feedback.settings.comment.neutralLabel', commentSettings.neutralLabel || 'What can we improve?');
                 case MOOD_STATES.DISSATISFIED:
-                    return translate(translationKeys.dissatisfiedLabel, commentSettings.dissatisfiedLabel || 'What can we improve?');
+                    return translate('theme.feedback.settings.comment.dissatisfiedLabel', commentSettings.dissatisfiedLabel || 'What can we improve?');
                 default:
-                    return translate(translationKeys.satisfiedLabel, 'What can we improve?');
+                    return translate('theme.feedback.settings.comment.satisfiedLabel', 'What can we improve?');
             }
         };
         return (React.createElement(Feedback_1.Comment, { onSubmit: ({ comment }) => setComment(comment), settings: { label: renderCommentLabel(score) } }));
@@ -82,10 +75,10 @@ const Mood = ({ settings, onSubmit, className }) => {
             setIsSubmitted(true);
         }
         return (React.createElement(Wrapper, null,
-            React.createElement(Label, { "data-translation-key": translationKeys.submitText }, translate(translationKeys.submitText, submitText || 'Thank you for your feedback!'))));
+            React.createElement(Label, { "data-translation-key": "theme.feedback.settings.submitText" }, translate('theme.feedback.settings.submitText', submitText || 'Thank you for your feedback!'))));
     }
     return (React.createElement(Wrapper, { "data-component-name": "Feedback/Mood", className: className },
-        React.createElement(Label, { "data-translation-key": translationKeys.label }, translate(translationKeys.label, label || 'Was this page helpful?')),
+        React.createElement(Label, { "data-translation-key": "theme.feedback.settings.label" }, translate('theme.feedback.settings.label', label || 'Was this page helpful?')),
         React.createElement(Vote, { onClick: () => {
                 setScore(MOOD_STATES.DISSATISFIED);
             } },

package/lib/components/Feedback/Rating.js

@@ -38,10 +38,6 @@ const Rating = ({ settings, onSubmit, className }) => {
     const [comment, setComment] = React.useState('');
     const [reasons, setReasons] = React.useState([]);
     const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        submitText: 'theme.feedback.settings.submitText',
-        label: 'theme.feedback.settings.label',
-    };
     const maxRating = max || 5;
     if (score && (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.enable) && !reasons.length) {
         const { label: reasonsLabel, items, multi } = reasonsSettings;
@@ -62,10 +58,10 @@ const Rating = ({ settings, onSubmit, className }) => {
             setIsSubmitted(true);
         }
         return (React.createElement(Wrapper, null,
-            React.createElement(Label, { "data-translation-key": translationKeys.submitText }, translate(translationKeys.submitText, submitText || 'Thank you for helping improve our documentation!'))));
+            React.createElement(Label, { "data-translation-key": "theme.feedback.settings.submitText" }, translate('theme.feedback.settings.submitText', submitText || 'Thank you for helping improve our documentation!'))));
     }
     return (React.createElement(Wrapper, { "data-component-name": "Feedback/Rating", className: className },
-        React.createElement(Label, { "data-translation-key": translationKeys.label }, translate(translationKeys.label, label || 'How helpful was this page?')),
+        React.createElement(Label, { "data-translation-key": "theme.feedback.settings.label" }, translate('theme.feedback.settings.label', label || 'How helpful was this page?')),
         React.createElement(Stars, { max: maxRating, onSubmit: setScore })));
 };
 exports.Rating = Rating;

package/lib/components/Feedback/Reasons.js

@@ -35,11 +35,6 @@ const Reasons = ({ settings, onSubmit, className }) => {
     const { label, multi, buttonText, items = [] } = settings;
     const [checkedState, setCheckedState] = React.useState(new Array(items.length).fill(false));
     const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        label: 'theme.feedback.settings.reasons.label',
-        items: 'theme.feedback.settings.reasons.items',
-        send: 'theme.feedback.settings.reasons.send',
-    };
     if (!items.length) {
         return React.createElement(React.Fragment, null);
     }
@@ -53,12 +48,12 @@ const Reasons = ({ settings, onSubmit, className }) => {
     const submitForm = () => {
         onSubmit({ reasons: items.filter((_, index) => !!checkedState[index]) });
     };
-    return (React.createElement(Wrapper, { "data-component-name": "Feedback/Reasons", "data-translation-key": translationKeys.label, className: className },
-        React.createElement(Label, null, translate(translationKeys.label, label || 'Which statement describes your thoughts about this page?')),
+    return (React.createElement(Wrapper, { "data-component-name": "Feedback/Reasons", "data-translation-key": "theme.feedback.settings.reasons.label", className: className },
+        React.createElement(Label, null, translate('theme.feedback.settings.reasons.label', label || 'Which statement describes your thoughts about this page?')),
         items.map((reason, idx) => (React.createElement(OptionWrapper, { key: reason },
             React.createElement("input", { type: input_type, value: reason, checked: checkedState[idx], name: "reasons", onChange: () => handleOptionChange(idx) }),
-            React.createElement("label", { "data-translation-key": `${translationKeys.items}.${idx + 1}`, id: reason, onClick: () => handleOptionChange(idx) }, translate(`${translationKeys.items}.${idx + 1}`, reason))))),
-        React.createElement(SendButton, { "data-translation-key": translationKeys.send, onClick: submitForm }, translate(translationKeys.send, buttonText || 'Send'))));
+            React.createElement("label", { "data-translation-key": `theme.feedback.settings.reasons.items.${idx + 1}`, id: reason, onClick: () => handleOptionChange(idx) }, translate(`theme.feedback.settings.reasons.items.${idx + 1}`, reason))))),
+        React.createElement(SendButton, { "data-translation-key": "theme.feedback.settings.reasons.send", onClick: submitForm }, translate('theme.feedback.settings.reasons.send', buttonText || 'Send'))));
 };
 exports.Reasons = Reasons;
 const Wrapper = styled_components_1.default.div `

package/lib/components/Feedback/Sentiment.js

@@ -39,12 +39,6 @@ const Sentiment = ({ settings, onSubmit, className }) => {
     const [comment, setComment] = React.useState('');
     const [reasons, setReasons] = React.useState([]);
     const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        submitText: 'theme.feedback.settings.submitText',
-        label: 'theme.feedback.settings.label',
-        likeLabel: 'theme.feedback.settings.comment.likeLabel',
-        dislikeLabel: 'theme.feedback.settings.comment.dislikeLabel',
-    };
     if (score && (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.enable) && !reasons.length) {
         const { label: reasonsLabel, items, multi } = reasonsSettings;
         const buttonText = (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.enable) ? 'Next' : 'Send';
@@ -52,8 +46,8 @@ const Sentiment = ({ settings, onSubmit, className }) => {
     }
     if (score && (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.enable) && !comment) {
         const commentLabel = score === 1
-            ? translate(translationKeys.likeLabel, commentSettings.likeLabel || 'What was most helpful?')
-            : translate(translationKeys.dislikeLabel, commentSettings.dislikeLabel || 'What can we improve?');
+            ? translate('theme.feedback.settings.comment.likeLabel', commentSettings.likeLabel || 'What was most helpful?')
+            : translate('theme.feedback.settings.comment.dislikeLabel', commentSettings.dislikeLabel || 'What can we improve?');
         return (React.createElement(Feedback_1.Comment, { onSubmit: ({ comment }) => setComment(comment), settings: { label: commentLabel } }));
     }
     if (score) {
@@ -66,10 +60,10 @@ const Sentiment = ({ settings, onSubmit, className }) => {
             setIsSubmitted(true);
         }
         return (React.createElement(Wrapper, null,
-            React.createElement(Label, { "data-translation-key": translationKeys.submitText }, translate(translationKeys.submitText, submitText || 'Thank you for helping improve our documentation!'))));
+            React.createElement(Label, { "data-translation-key": "theme.feedback.settings.submitText" }, translate('theme.feedback.settings.submitText', submitText || 'Thank you for helping improve our documentation!'))));
     }
     return (React.createElement(Wrapper, { "data-component-name": "Feedback/Sentiment", className: className },
-        React.createElement(Label, { "data-translation-key": translationKeys.label }, translate(translationKeys.label, label || 'Was this page helpful?')),
+        React.createElement(Label, { "data-translation-key": "theme.feedback.settings.label" }, translate('theme.feedback.settings.label', label || 'Was this page helpful?')),
         React.createElement(Vote, { onClick: () => {
                 setScore(1);
             } },

package/lib/components/Feedback/Thumbs.js

@@ -32,9 +32,6 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../mocks/hooks");
 const ThumbUp = ({ text }) => {
     const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        thumbUp: 'theme.feedback.sentiment.thumbUp',
-    };
     return (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" },
@@ -45,14 +42,11 @@ const ThumbUp = ({ text }) => {
                             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, translate(translationKeys.thumbUp, text || 'Yes'))));
+        React.createElement("span", null, translate('theme.feedback.sentiment.thumbUp', text || 'Yes'))));
 };
 exports.ThumbUp = ThumbUp;
 const ThumbDown = ({ text }) => {
     const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        thumbDown: 'theme.feedback.sentiment.thumbDown',
-    };
     return (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" },
@@ -63,7 +57,7 @@ const ThumbDown = ({ text }) => {
                             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, translate(translationKeys.thumbDown, text || 'No'))));
+        React.createElement("span", null, translate('theme.feedback.sentiment.thumbDown', text || 'No'))));
 };
 exports.ThumbDown = ThumbDown;
 const Wrapper = styled_components_1.default.div `

package/lib/components/Feedback/useReportDialog.js

@@ -11,11 +11,6 @@ function useReportDialog() {
     const isReportButtonShown = (report === null || report === void 0 ? void 0 : report.hide) === false; // TODO: report temporary disabled by default
     const { translate } = (0, hooks_1.useTranslate)();
     const { submitFeedback } = (0, useSubmitFeedback_1.useSubmitFeedback)();
-    const translationKeys = {
-        buttonText: 'theme.codeSnippet.report.buttonText',
-        tooltipText: 'theme.codeSnippet.report.tooltipText',
-        label: 'theme.codeSnippet.report.label',
-    };
     const showReportDialog = () => {
         setIsReportDialogShown(true);
     };
@@ -24,13 +19,13 @@ function useReportDialog() {
     };
     const reportButtonProps = {
         onClick: showReportDialog,
-        buttonText: translate(translationKeys.buttonText, 'Report'),
-        tooltip: translate(translationKeys.tooltipText, 'Report a problem'),
+        buttonText: translate('theme.codeSnippet.report.buttonText', 'Report'),
+        tooltip: translate('theme.codeSnippet.report.tooltipText', 'Report a problem'),
         visible: isReportButtonShown,
     };
     const reportDialogProps = {
         settings: {
-            label: translate(translationKeys.label, 'What is wrong with this code?'),
+            label: translate('theme.codeSnippet.report.label', 'What is wrong with this code?'),
         },
         onSubmit: hideReportDialog,
         onCancel: hideReportDialog,

package/lib/components/Filter/Filter.js

@@ -13,10 +13,6 @@ const Select_1 = require("../../components/Select");
 function Filter({ filter, filterValuesCasing, }) {
     var _a;
     const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        selectAll: 'theme.catalog.filters.select.all',
-        clear: 'theme.catalog.filters.clear',
-    };
     if (!filter.parentUsed)
         return null;
     let selectOptions = [];
@@ -26,7 +22,7 @@ function Filter({ filter, filterValuesCasing, }) {
             {
                 value: '',
                 element: (react_1.default.createElement(FilterOption, { key: "all", onClick: () => filter.selectOption('') },
-                    react_1.default.createElement(FilterOptionLabel, null, translate(translationKeys.selectAll, 'All')),
+                    react_1.default.createElement(FilterOptionLabel, null, translate('theme.catalog.filters.select.all', 'All')),
                     react_1.default.createElement(FilterOptionCount, null, defaultOptionCount))),
             },
         ];

package/lib/components/Filter/FilterContent.js

@@ -14,10 +14,6 @@ const Sidebar_1 = require("../../components/Sidebar");
 const FilterPopover_1 = require("../../components/Filter/FilterPopover");
 function FilterContent({ setFilterTerm, filters, filterTerm, isMobile, filterValuesCasing, }) {
     const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        placeholder: 'theme.catalog.filters.placeholder',
-        clearAll: 'theme.catalog.filters.clearAll',
-    };
     const hasActiveFilters = filters.some((filter) => {
         if (filterTerm)
             return true;
@@ -34,10 +30,10 @@ function FilterContent({ setFilterTerm, filters, filterTerm, isMobile, filterVal
     };
     return (react_1.default.createElement(FilterContentWrapper, { isMobile: isMobile },
         react_1.default.createElement(Catalog_1.FilterControls, null,
-            react_1.default.createElement(FilterPopover_1.StyledInput, { placeholder: translate(translationKeys.placeholder, 'Type to filter...'), value: filterTerm, onChange: (e) => setFilterTerm(e.target.value) })),
+            react_1.default.createElement(FilterPopover_1.StyledInput, { placeholder: translate('theme.catalog.filters.placeholder', 'Type to filter...'), value: filterTerm, onChange: (e) => setFilterTerm(e.target.value) })),
         react_1.default.createElement(exports.FilterItems, null, filters.map((filter, idx) => (react_1.default.createElement(Filter_1.Filter, { filter: filter, key: filter.property + '-' + idx, filterValuesCasing: filterValuesCasing })))),
         hasActiveFilters && (react_1.default.createElement(ActionsContainer, null,
-            react_1.default.createElement(ClearAllButton, { size: "default", variant: "outlined", onClick: handleClearAll }, translate(translationKeys.placeholder, 'Clear all filters'))))));
+            react_1.default.createElement(ClearAllButton, { size: "default", variant: "outlined", onClick: handleClearAll }, translate('theme.catalog.filters.clearAll', 'Clear all filters'))))));
 }
 exports.FilterContent = FilterContent;
 const FilterContentWrapper = (0, styled_components_1.default)(Sidebar_1.Sidebar) `

package/lib/components/Filter/FilterPopover.js

@@ -19,18 +19,14 @@ function FilterPopover({ setIsAddingFilter, filters, filterValuesCasing, }) {
             ? Object.assign(Object.assign({}, filter), { filteredOptions: options }) : null;
     })
         .filter(Boolean);
-    const translationKeys = {
-        placeholder: 'theme.catalog.filters.placeholder',
-        done: 'theme.catalog.filters.done',
-    };
     const { translate } = (0, hooks_1.useTranslate)();
     return (react_1.default.createElement(FilterPopoverWrapper, null,
         react_1.default.createElement(FilterPopoverHeader, null,
             react_1.default.createElement(FilterPopoverHeaderLabel, null, "Add Filter"),
-            react_1.default.createElement(FilterPopoverHeaderButton, { onClick: () => setIsAddingFilter(false) }, translate(translationKeys.placeholder, 'Done'))),
+            react_1.default.createElement(FilterPopoverHeaderButton, { onClick: () => setIsAddingFilter(false) }, translate('theme.catalog.filters.done', 'Done'))),
         react_1.default.createElement(FilterContent_1.FilterContent, { setFilterTerm: setFilterTerm, filters: filters, filterTerm: filterTerm, filterValuesCasing: filterValuesCasing, isMobile: true }),
         react_1.default.createElement(Catalog_1.FilterControls, null,
-            react_1.default.createElement(exports.StyledInput, { placeholder: translate(translationKeys.placeholder, 'Type to filter...'), value: filterTerm, onChange: (e) => setFilterTerm(e.target.value) })),
+            react_1.default.createElement(exports.StyledInput, { placeholder: translate('theme.catalog.filters.placeholder', 'Type to filter...'), value: filterTerm, onChange: (e) => setFilterTerm(e.target.value) })),
         react_1.default.createElement(FilterContent_1.FilterItems, null, filteredFilters.map((filter, idx) => (react_1.default.createElement(Filter_1.Filter, { filter: filter, key: filter.property + '-' + idx }))))));
 }
 exports.FilterPopover = FilterPopover;

package/lib/components/Footer/FooterCopyright.js

@@ -11,11 +11,8 @@ const hooks_1 = require("../../mocks/hooks");
 function FooterCopyright({ copyrightText = '', className, }) {
     const { translate } = (0, hooks_1.useTranslate)();
     const { changeLanguage } = (0, hooks_1.useI18n)();
-    const translationKeys = {
-        copyrightText: 'theme.footer.copyrightText',
-    };
-    return copyrightText ? (react_1.default.createElement(Wrapper, { className: className, "data-component-name": "Footer/FooterCopyright", "data-translation-key": translationKeys.copyrightText },
-        react_1.default.createElement(Label, null, translate(translationKeys.copyrightText, copyrightText)),
+    return copyrightText ? (react_1.default.createElement(Wrapper, { className: className, "data-component-name": "Footer/FooterCopyright", "data-translation-key": "theme.footer.copyrightText" },
+        react_1.default.createElement(Label, null, translate('theme.footer.copyrightText', copyrightText)),
         react_1.default.createElement(LanguagePicker_1.LanguagePicker, { onChangeLanguage: changeLanguage, placement: "top", alignment: "end" }))) : null;
 }
 exports.FooterCopyright = FooterCopyright;

package/lib/components/LastUpdated/LastUpdated.js

@@ -51,7 +51,7 @@ function LastUpdated(props) {
     const lastUpdatedString = FORMATS[format](lastModified, locale);
     const translationKey = format === 'timeago' ? 'theme.page.lastUpdated.timeago' : 'theme.page.lastUpdated.on';
     const text = format === 'timeago'
-        ? translate(translationKey, 'Last updated ')
+        ? translate(translationKey, 'Last updated') + ' '
         : translate(translationKey, 'Last updated on');
     return (React.createElement(Wrapper, { className: props.className, "data-component-name": "LastUpdated/LastUpdated", rawOnPrint: format === 'timeago', "data-print-datetime": isoDate, "data-translation-key": translationKey },
         text,

package/lib/components/Markdown/styledVariables.js

@@ -211,10 +211,64 @@ exports.markdown = (0, styled_components_1.css) `
   /**
   * @tokens Markdown Tabs
   */
+  
+  --md-tabs-container-text-color: inherit; // @presenter Color
+  --md-tabs-container-font-size: var(--font-size-base); // @presenter FontSize
+  --md-tabs-container-font-family: var(--font-size-base); // @presenter FontFamily
+  --md-tabs-container-font-style: normal; // @presenter FontStyle
+  --md-tabs-container-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --md-tabs-container-background-color: inherit; // @presenter Color
+  --md-tabs-container-margin: 10px 0; // @presenter Spacing
+  --md-tabs-container-padding: 0; // @presenter Spacing
+  --md-tabs-container-border: none; // @presenter Border
+
+  --md-tabs-border: solid var(--border-primary); // @presenter Color
+  --md-tabs-border-width: 0 0 1px 0; // @presenter Spacing
+  --md-tabs-padding: 0; // @presenter Spacing
+
+  --md-tabs-content-text-color: inherit; // @presenter Color
+  --md-tabs-content-font-size: var(--font-size-base); // @presenter FontSize
+  --md-tabs-content-font-family: var(--font-size-base); // @presenter FontFamily
+  --md-tabs-content-font-style: normal; // @presenter FontStyle
+  --md-tabs-content-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --md-tabs-content-background-color: inherit; // @presenter Color
+  --md-tabs-content-margin: 0; // @presenter Spacing
+  --md-tabs-content-padding: var(--spacing-base) 0; // @presenter Spacing
+  --md-tabs-content-border: none; // @presenter Border
 
   --md-tabs-tab-text-color: var(--text-secondary); // @presenter Color
+  --md-tabs-tab-font-size: var(--font-size-base); // @presenter FontSize
+  --md-tabs-tab-font-family: var(--font-size-base); // @presenter FontFamily
+  --md-tabs-tab-font-style: normal; // @presenter FontStyle
+  --md-tabs-tab-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --md-tabs-tab-background-color: none; // @presenter Color
+  --md-tabs-tab-margin: 0 0 -1px 0; // @presenter Spacing
+  --md-tabs-tab-padding: var(--spacing-sm) var(--spacing-base); // @presenter Spacing
+  --md-tabs-tab-border: none; // @presenter Color
+  --md-tabs-tab-border-width: 0; // @presenter Spacing
+  --md-tabs-tab-border-radius: 0; // @presenter BorderRadius
+
+  --md-tabs-active-tab-text-color: var(--text-primary); // @presenter Color
+  --md-tabs-active-tab-font-size: var(--md-tabs-tab-font-size); // @presenter FontSize
+  --md-tabs-active-tab-font-family: var(--md-tabs-tab-font-family); // @presenter FontFamily
+  --md-tabs-active-tab-font-style: normal; // @presenter FontStyle
+  --md-tabs-active-tab-font-weight: var(--md-tabs-tab-font-weight); // @presenter FontWeight
+  --md-tabs-active-tab-background-color: var(--background-color); // @presenter Color
+  --md-tabs-active-tab-padding: var(--md-tabs-tab-padding); // @presenter Spacing
   --md-tabs-active-tab-border-color: var(--border-primary); // @presenter Color
+  --md-tabs-active-tab-border-width: 0 0 1px 0; // @presenter Spacing
+  --md-tabs-active-tab-border-radius: var(--md-tabs-tab-border-radius); // @presenter BorderRadius
+  
+  --md-tabs-hover-tab-text-color: var(--md-tabs-tab-text-color); // @presenter Color
+  --md-tabs-hover-tab-font-size: var(--md-tabs-tab-font-size); // @presenter FontSize
+  --md-tabs-hover-tab-font-family: var(--md-tabs-tab-font-family); // @presenter FontFamily
+  --md-tabs-hover-tab-font-style: normal; // @presenter FontStyle
+  --md-tabs-hover-tab-font-weight: var(--md-tabs-tab-font-weight); // @presenter FontWeight
+  --md-tabs-hover-tab-background-color: var(--md-tabs-tab-background-color); // @presenter Color
+  --md-tabs-hover-tab-padding: var(--md-tabs-tab-padding); // @presenter Spacing
   --md-tabs-hover-tab-border-color: var(--border-secondary); // @presenter Color
+  --md-tabs-hover-tab-border-width: 0 0 1px 0; // @presenter Spacing
+  --md-tabs-hover-tab-border-radius: var(--md-tabs-tab-border-radius); // @presenter BorderRadius
 
   // @tokens End
 `;

package/lib/components/Menu/hooks/use-mobile-menu-items.js

@@ -11,9 +11,6 @@ const MENU_SEPARATOR = {
     type: 'separator',
     separatorLine: true,
 };
-const TRANSLATION_KEYS = {
-    products: 'theme.mobileMenu.products',
-};
 const useMobileMenuItems = (menuType) => {
     var _a, _b, _c;
     const { versions = [] } = (0, hooks_1.usePageVersions)() || {};
@@ -59,7 +56,7 @@ const useMobileMenuItems = (menuType) => {
         if (productMenuItems.length) {
             menuItems.push({
                 type: 'separator',
-                label: translate(TRANSLATION_KEYS.products, 'Products'),
+                label: translate('theme.mobileMenu.products', 'Products'),
             });
             menuItems.push(...productMenuItems);
         }

package/lib/components/Menu/hooks/use-mobile-menu-levels.js

@@ -7,10 +7,6 @@ const hooks_1 = require("../../../mocks/hooks");
 const useSidebarItems_1 = require("../../../mocks/Sidebar/useSidebarItems");
 const constants_1 = require("../../../components/Menu/constants");
 const hooks_2 = require("../../../hooks");
-const TRANSLATION_KEYS = {
-    mainMenu: 'theme.mobileMenu.mainMenu',
-    previous: 'theme.mobileMenu.previous',
-};
 const useMobileMenuLevels = () => {
     var _a, _b;
     const { versions = [] } = (0, hooks_1.usePageVersions)() || {};
@@ -25,7 +21,7 @@ const useMobileMenuLevels = () => {
     const menuLevels = (0, react_1.useMemo)(() => {
         const menuLevels = [
             {
-                label: translate(TRANSLATION_KEYS.mainMenu, 'Main Menu'),
+                label: translate('theme.mobileMenu.mainMenu', 'Main Menu'),
                 type: constants_1.MenuType.MAIN_MENU,
             },
         ];
@@ -37,7 +33,7 @@ const useMobileMenuLevels = () => {
         }
         if (sidebarItems.length || activeVersion) {
             menuLevels.push({
-                label: translate(TRANSLATION_KEYS.previous, 'Previous'),
+                label: translate('theme.mobileMenu.previous', 'Previous'),
                 type: constants_1.MenuType.PAGE,
             });
         }

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

@@ -1,6 +1,7 @@
 import type { Location } from 'react-router-dom';
+import type { TFunction } from '@redocly/portal-types';
 import type { ItemState } from '../../components/Sidebar/types';
-import type { Locale, ResolvedNavItem, TFunction, Version } from '../../types/portal';
+import type { Locale, ResolvedNavItem, Version } from '../../types/portal';
 export declare const mapNavbarItems: (items: ResolvedNavItem[], defaultLocale: string, currentLocale: string, locales: Locale[], location: Location) => ItemState[];
 export declare const isItemActive: (item: ResolvedNavItem, defaultLocale: string, currentLocale: string, locales: Locale[], location: Location) => boolean;
 export declare const buildLanguagesGroup: (locales: Locale[], currentLocale: string, defaultLocale: string) => ResolvedNavItem | undefined;

package/lib/components/Profile/LoginLink.js

@@ -12,12 +12,9 @@ const telemetry_1 = require("../../mocks/telemetry");
 function LoginLink({ href }) {
     const { userProfile } = (0, useThemeConfig_1.useThemeConfig)();
     const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        login: 'theme.profile.login',
-    };
-    return (react_1.default.createElement(StyledLink, { href: href, "data-translation-key": translationKeys.login, onClick: () => {
+    return (react_1.default.createElement(StyledLink, { href: href, "data-translation-key": "theme.profile.login", onClick: () => {
             telemetry_1.telemetry.send('login_button_clicked', {});
-        } }, translate(translationKeys.login, (userProfile === null || userProfile === void 0 ? void 0 : userProfile.loginLabel) || 'Login')));
+        } }, translate('theme.profile.login', (userProfile === null || userProfile === void 0 ? void 0 : userProfile.loginLabel) || 'Login')));
 }
 exports.LoginLink = LoginLink;
 const StyledLink = styled_components_1.default.a.attrs(() => ({

package/lib/components/Profile/MobileUserProfile.js

@@ -16,12 +16,9 @@ function MobileUserProfile() {
     const { userProfile } = (0, useThemeConfig_1.useThemeConfig)();
     const { userData, handleLogout, loginUrl } = (0, useProfileProps_1.useProfileProps)();
     const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        login: 'theme.profile.login',
-    };
     if (!(userData === null || userData === void 0 ? void 0 : userData.isAuthenticated) && !loginUrl)
         return null;
-    return (react_1.default.createElement(MobileProfileWrapper, { "data-component-name": "Navbar/MobileUserProfile" }, !(userData === null || userData === void 0 ? void 0 : userData.isAuthenticated) ? (react_1.default.createElement(LoginButton, { href: loginUrl, "data-cy": "login-btn", onClick: () => telemetry_1.telemetry.send('login_button_clicked', {}) }, translate(translationKeys.login, (userProfile === null || userProfile === void 0 ? void 0 : userProfile.loginLabel) || 'Login'))) : (react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement(MobileProfileWrapper, { "data-component-name": "Navbar/MobileUserProfile" }, !(userData === null || userData === void 0 ? void 0 : userData.isAuthenticated) ? (react_1.default.createElement(LoginButton, { href: loginUrl, "data-cy": "login-btn", onClick: () => telemetry_1.telemetry.send('login_button_clicked', {}) }, translate('theme.profile.login', (userProfile === null || userProfile === void 0 ? void 0 : userProfile.loginLabel) || 'Login'))) : (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(UserProfileData_1.UserProfileData, { userData: userData }),
         react_1.default.createElement(LogoutButton, { onClick: () => {
                 handleLogout();

package/lib/components/Profile/UserProfile.js

@@ -40,14 +40,10 @@ const icons_1 = require("../../icons");
 function UserProfile({ userData, handleLogout, hasDeveloperOnboarding = false, }) {
     const { userProfile } = (0, useThemeConfig_1.useThemeConfig)();
     const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        myApps: 'theme.profile.myApps',
-        logout: 'theme.profile.logout',
-    };
     const [isOpened, setIsOpened] = (0, react_1.useState)(false);
     const menuItems = [react_1.default.createElement(UserProfileData_1.UserProfileData, { key: userData.name, userData: userData })];
     if (hasDeveloperOnboarding) {
-        menuItems.push(react_1.default.createElement(Link_1.Link, { to: "/apps", "data-translation-key": translationKeys.myApps }, translate(translationKeys.myApps, 'My Apps')));
+        menuItems.push(react_1.default.createElement(Link_1.Link, { to: "/apps", "data-translation-key": "theme.profile.myApps" }, translate('theme.profile.myApps', 'My Apps')));
     }
     if (userProfile && userProfile.menu) {
         for (const item of userProfile.menu) {
@@ -57,9 +53,9 @@ function UserProfile({ userData, handleLogout, hasDeveloperOnboarding = false, }
     menuItems.push(react_1.default.createElement(Logout, { onClick: () => {
             handleLogout();
             telemetry_1.telemetry.send('logout_menu_item_clicked', {});
-        }, "data-translation-key": translationKeys.logout, role: "link" },
+        }, "data-translation-key": "theme.profile.logout", role: "link" },
         react_1.default.createElement(icons_1.LogoutIcon, null),
-        translate(translationKeys.logout, (userProfile === null || userProfile === void 0 ? void 0 : userProfile.logoutLabel) || 'Log out')));
+        translate('theme.profile.logout', (userProfile === null || userProfile === void 0 ? void 0 : userProfile.logoutLabel) || 'Log out')));
     return (react_1.default.createElement(ProfileDropdown, { items: menuItems, alignment: "end" },
         react_1.default.createElement(Profile_1.Profile, { name: userData.name, imageUrl: userData.picture, onClick: userData.logoutDisabled ? undefined : () => setIsOpened(!isOpened) })));
 }

package/lib/components/Search/CancelSearch.js

@@ -33,11 +33,8 @@ const hooks_1 = require("../../mocks/hooks");
 const Button_1 = require("../../components/Button");
 function CancelSearch({ onClick, className, }) {
     const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        cancel: 'theme.search.cancel',
-    };
     return (React.createElement(Wrapper, { "data-component-name": "Search/CancelSearch", onClick: onClick, className: className },
-        React.createElement(Button_1.Button, { "data-translation-keys": translationKeys.cancel, fullWidth: true, variant: "outlined" }, translate(translationKeys.cancel, 'Cancel'))));
+        React.createElement(Button_1.Button, { "data-translation-keys": "theme.search.cancel", fullWidth: true, variant: "outlined" }, translate('theme.search.cancel', 'Cancel'))));
 }
 exports.CancelSearch = CancelSearch;
 const Wrapper = styled_components_1.default.div `