@redocly/theme 0.63.0-next.0 → 0.63.0-next.2

package/lib/components/Buttons/EditPageButton.js

@@ -8,37 +8,15 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
 const EditIcon_1 = require("../../icons/EditIcon/EditIcon");
-const Link_1 = require("../../components/Link/Link");
+const Button_1 = require("../../components/Button/Button");
 function EditPageButton({ to }) {
     const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const telemetry = useTelemetry();
-    return (react_1.default.createElement(EditPageButtonWrapper, { "data-component-name": "Buttons/EditPageButton", target: "_blank", to: to, onClick: () => telemetry.sendEditPageLinkClickedMessage() },
-        react_1.default.createElement(ButtonIcon, null),
-        react_1.default.createElement(ButtonText, { "data-translation-key": "markdown.editPage.text" }, translate('markdown.editPage.text', 'Edit'))));
+    return (react_1.default.createElement(EditPageButtonWrapper, { "data-component-name": "Buttons/EditPageButton" },
+        react_1.default.createElement(Button_1.Button, { to: to, external: true, variant: "ghost", size: "small", icon: react_1.default.createElement(EditIcon_1.EditIcon, null), onClick: () => telemetry.sendEditPageLinkClickedMessage(), "data-translation-key": "markdown.editPage.text" }, translate('markdown.editPage.text', 'Edit'))));
 }
-const EditPageButtonWrapper = (0, styled_components_1.default)(Link_1.Link) `
-  height: fit-content;
+const EditPageButtonWrapper = styled_components_1.default.div `
   margin-left: auto;
-  display: inline-flex;
-  color: var(--text-color-secondary);
-  font-weight: var(--font-weight-bold);
-  font-size: var(--font-size-base);
-  font-family: var(--font-family-base);
-  text-decoration: none;
-
-  &:hover {
-    color: var(--text-color-primary);
-  }
-
-  @media print {
-    display: none;
-  }
-`;
-const ButtonIcon = (0, styled_components_1.default)(EditIcon_1.EditIcon) `
-  margin-right: 3px;
-`;
-const ButtonText = styled_components_1.default.span `
-  line-height: 14px;
 `;
 //# sourceMappingURL=EditPageButton.js.map

package/lib/components/Dropdown/Dropdown.js

@@ -97,6 +97,6 @@ const ChildrenWrapper = styled_components_1.default.div `
   right: ${({ alignment }) => (alignment === 'end' ? '0' : 'auto')};
   display: ${({ isOpen }) => (isOpen ? 'block' : 'none')};
 
-  z-index: var(--z-index-raised);
+  z-index: var(--dropdown-menu-z-index);
 `;
 //# sourceMappingURL=Dropdown.js.map

package/lib/components/Dropdown/variables.js

@@ -10,6 +10,7 @@ exports.dropdown = (0, styled_components_1.css) `
   --dropdown-menu-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --dropdown-menu-line-height: var(--line-height-base); // @presenter LineHeight
   --dropdown-menu-text-color: var(--text-color-secondary); // @presenter Color
+  --dropdown-menu-z-index: var(--z-index-raised); // @presenter ZIndex
 
   --dropdown-menu-padding-top: var(--spacing-xxs);
   --dropdown-menu-min-width: 100px;

package/lib/components/Feedback/Comment.js

@@ -39,23 +39,27 @@ const styled_components_1 = __importStar(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
 const RadioCheckButtonIcon_1 = require("../../icons/RadioCheckButtonIcon/RadioCheckButtonIcon");
 const Button_1 = require("../../components/Button/Button");
+const constants_1 = require("../../core/constants");
 function Comment({ settings, onSubmit, onCancel, className, standAlone = true, isDialog = false, }) {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const { label, submitText } = settings || {};
     const [text, setText] = react_1.default.useState('');
     const [submitValue, setSubmitValue] = react_1.default.useState('');
+    const [isMaxLengthReached, setIsMaxLengthReached] = react_1.default.useState(false);
     const modalRef = (0, react_1.useRef)(null);
     (0, hooks_1.useOutsideClick)(modalRef, onCancel);
     const send = () => {
-        if (!text)
+        const trimmedText = text.trim();
+        if (!trimmedText)
             return;
-        setSubmitValue(text);
-        onSubmit({ comment: text });
+        setSubmitValue(trimmedText);
+        onSubmit({ comment: trimmedText });
     };
     const handleTextAreaChange = (e) => {
         const commentValue = e.target.value;
         setText(commentValue);
+        setIsMaxLengthReached(commentValue.length >= constants_1.MAX_CONTEXT_LENGTH);
         if (!standAlone) {
             onSubmit({ comment: commentValue });
         }
@@ -70,7 +74,11 @@ function Comment({ settings, onSubmit, onCancel, className, standAlone = true, i
     return (react_1.default.createElement(CommentWrapper, { ref: modalRef, "data-component-name": "Feedback/Comment", className: className, style: standAlone ? { width: 'var(--feedback-report-dialog-width)' } : { width: 'auto' } },
         react_1.default.createElement(Label, { "data-translation-key": "feedback.settings.comment.label", standAlone: standAlone }, label ||
             translate('feedback.settings.comment.label', 'Please share your feedback with us.')),
-        react_1.default.createElement(TextArea, { rows: 3, onChange: handleTextAreaChange }),
+        react_1.default.createElement(TextArea, { rows: 3, maxLength: constants_1.MAX_CONTEXT_LENGTH, onChange: handleTextAreaChange }),
+        isMaxLengthReached && (react_1.default.createElement(MaxLengthMessage, { "data-translation-key": "feedback.settings.comment.maxLength" }, translate('feedback.settings.comment.maxLength', {
+            maxLength: constants_1.MAX_CONTEXT_LENGTH,
+            defaultValue: `Maximum content length of ${constants_1.MAX_CONTEXT_LENGTH} characters reached`,
+        }))),
         standAlone && (react_1.default.createElement(ButtonsContainer, null,
             onCancel && (react_1.default.createElement(Button_1.Button, { "data-translation-key": "feedback.settings.comment.cancel", onClick: onCancel, variant: "text", size: "small" }, translate('feedback.settings.comment.cancel', 'Cancel'))),
             react_1.default.createElement(Button_1.Button, { "data-translation-key": "feedback.settings.comment.send", onClick: send, variant: isDialog ? 'primary' : 'secondary', size: "small" }, translate('feedback.settings.comment.send', 'Send'))))));
@@ -136,4 +144,9 @@ const ButtonsContainer = styled_components_1.default.div `
   margin-top: var(--spacing-xs);
   gap: var(--spacing-xs);
 `;
+const MaxLengthMessage = styled_components_1.default.div `
+  font-size: var(--font-size-sm);
+  color: var(--text-color-secondary);
+  margin-top: var(--spacing-xxs);
+`;
 //# sourceMappingURL=Comment.js.map

package/lib/components/Feedback/Mood.js

@@ -46,6 +46,7 @@ const Button_1 = require("../../components/Button/Button");
 const FaceDissatisfiedIcon_1 = require("../../icons/FaceDissatisfiedIcon/FaceDissatisfiedIcon");
 const FaceSatisfiedIcon_1 = require("../../icons/FaceSatisfiedIcon/FaceSatisfiedIcon");
 const FaceNeutralIcon_1 = require("../../icons/FaceNeutralIcon/FaceNeutralIcon");
+const constants_1 = require("../../core/constants");
 var MOOD_STATES;
 (function (MOOD_STATES) {
     MOOD_STATES["SATISFIED"] = "satisfied";
@@ -118,11 +119,13 @@ function Mood({ settings, onSubmit, className }) {
     const displaySubmitBnt = !!(score && (displayReasons || displayComment));
     const displayFeedbackEmail = !!score && !(optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.hide) && !userData.isAuthenticated;
     const onSubmitMoodForm = () => {
+        const trimmedComment = (comment === null || comment === void 0 ? void 0 : comment.trim()) || undefined;
+        const trimmedEmail = (email === null || email === void 0 ? void 0 : email.trim()) || undefined;
         onSubmit({
             score: remapScore(score),
-            comment,
+            comment: trimmedComment,
             reasons,
-            email,
+            email: trimmedEmail,
         });
         setIsSubmitted(true);
     };
@@ -170,7 +173,7 @@ function Mood({ settings, onSubmit, className }) {
                 React.createElement(InputLabel, { "data-translation-key": "feedback.settings.optionalEmail.label" }, (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.label) ||
                     translate('feedback.settings.optionalEmail.label', 'Your email (optional, for follow-up)')),
                 React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.placeholder) ||
-                        translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com'), type: "email", required: !!email, onKeyDown: (e) => {
+                        translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com'), type: "email", maxLength: constants_1.MAX_EMAIL_LENGTH, required: !!email, onKeyDown: (e) => {
                         if (e.key === 'Enter') {
                             e.preventDefault();
                             onSubmitMoodForm();

package/lib/components/Feedback/Rating.js

@@ -47,6 +47,7 @@ const RadioCheckButtonIcon_1 = require("../../icons/RadioCheckButtonIcon/RadioCh
 const Comment_1 = require("../../components/Feedback/Comment");
 const Stars_1 = require("../../components/Feedback/Stars");
 const Button_1 = require("../../components/Button/Button");
+const constants_1 = require("../../core/constants");
 exports.FEEDBACK_MAX_RATING = 5;
 function Rating({ settings, onSubmit, className }) {
     const { label, submitText, comment: commentSettings, reasons: reasonsSettings, optionalEmail: optionalEmailSettings, } = settings || {};
@@ -63,12 +64,14 @@ function Rating({ settings, onSubmit, className }) {
         setEmail(value || undefined);
     };
     const onSubmitRatingForm = () => {
+        const trimmedComment = (comment === null || comment === void 0 ? void 0 : comment.trim()) || undefined;
+        const trimmedEmail = (email === null || email === void 0 ? void 0 : email.trim()) || undefined;
         onSubmit({
             score,
-            comment,
+            comment: trimmedComment,
             reasons,
             max: exports.FEEDBACK_MAX_RATING,
-            email,
+            email: trimmedEmail,
         });
         setIsSubmitted(true);
     };
@@ -115,7 +118,7 @@ function Rating({ settings, onSubmit, className }) {
                 React.createElement(InputLabel, { "data-translation-key": "feedback.settings.optionalEmail.label" }, (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.label) ||
                     translate('feedback.settings.optionalEmail.label', 'Your email (optional, for follow-up)')),
                 React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.placeholder) ||
-                        translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com'), type: "email", required: !!email, onKeyDown: (e) => {
+                        translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com'), type: "email", maxLength: constants_1.MAX_EMAIL_LENGTH, required: !!email, onKeyDown: (e) => {
                         if (e.key === 'Enter') {
                             e.preventDefault();
                             onSubmitRatingForm();

package/lib/components/Feedback/Scale.js

@@ -47,6 +47,7 @@ const RadioCheckButtonIcon_1 = require("../../icons/RadioCheckButtonIcon/RadioCh
 const Comment_1 = require("../../components/Feedback/Comment");
 const Reasons_1 = require("../../components/Feedback/Reasons");
 const Button_1 = require("../../components/Button/Button");
+const constants_1 = require("../../core/constants");
 exports.MAX_SCALE = 10;
 function Scale({ settings, onSubmit, className }) {
     const { label, submitText, leftScaleLabel, rightScaleLabel, comment: commentSettings, reasons: reasonsSettings, optionalEmail: optionalEmailSettings, } = settings || {};
@@ -77,12 +78,14 @@ function Scale({ settings, onSubmit, className }) {
         setEmail(undefined);
     };
     const onSubmitScaleForm = () => {
+        const trimmedComment = (comment === null || comment === void 0 ? void 0 : comment.trim()) || undefined;
+        const trimmedEmail = (email === null || email === void 0 ? void 0 : email.trim()) || undefined;
         onSubmit({
             score,
-            comment,
+            comment: trimmedComment,
             reasons,
             max: exports.MAX_SCALE,
-            email,
+            email: trimmedEmail,
         });
         setIsSubmitted(true);
     };
@@ -122,7 +125,7 @@ function Scale({ settings, onSubmit, className }) {
                 React.createElement(InputLabel, { "data-translation-key": "feedback.settings.optionalEmail.label" }, (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.label) ||
                     translate('feedback.settings.optionalEmail.label', 'Your email (optional, for follow-up)')),
                 React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.placeholder) ||
-                        translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com'), type: "email", required: !!email, onKeyDown: (e) => {
+                        translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com'), type: "email", maxLength: constants_1.MAX_EMAIL_LENGTH, required: !!email, onKeyDown: (e) => {
                         if (e.key === 'Enter') {
                             e.preventDefault();
                             onSubmitScaleForm();

package/lib/components/Feedback/Sentiment.js

@@ -47,6 +47,7 @@ const Comment_1 = require("../../components/Feedback/Comment");
 const Button_1 = require("../../components/Button/Button");
 const ThumbDownIcon_1 = require("../../icons/ThumbDownIcon/ThumbDownIcon");
 const ThumbUpIcon_1 = require("../../icons/ThumbUpIcon/ThumbUpIcon");
+const constants_1 = require("../../core/constants");
 function Sentiment({ settings, onSubmit, className }) {
     const { label, submitText, comment: commentSettings, reasons: reasonsSettings, optionalEmail: optionalEmailSettings, } = settings || {};
     const [isSubmitted, setIsSubmitted] = React.useState(false);
@@ -105,11 +106,13 @@ function Sentiment({ settings, onSubmit, className }) {
         return scoreSpecificReasonSettings === null || scoreSpecificReasonSettings === void 0 ? void 0 : scoreSpecificReasonSettings.component;
     };
     const onSubmitSentimentForm = () => {
+        const trimmedComment = (comment === null || comment === void 0 ? void 0 : comment.trim()) || undefined;
+        const trimmedEmail = (email === null || email === void 0 ? void 0 : email.trim()) || undefined;
         onSubmit({
             score,
-            comment,
+            comment: trimmedComment,
             reasons,
-            email,
+            email: trimmedEmail,
         });
         setIsSubmitted(true);
     };
@@ -154,7 +157,7 @@ function Sentiment({ settings, onSubmit, className }) {
                 React.createElement(InputLabel, { "data-translation-key": "feedback.settings.optionalEmail.label" }, (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.label) ||
                     translate('feedback.settings.optionalEmail.label', 'Your email (optional, for follow-up)')),
                 React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.placeholder) ||
-                        translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com'), type: "email", required: !!email, onKeyDown: (e) => {
+                        translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com'), type: "email", maxLength: constants_1.MAX_EMAIL_LENGTH, required: !!email, onKeyDown: (e) => {
                         if (e.key === 'Enter') {
                             e.preventDefault();
                             onSubmitSentimentForm();

package/lib/components/Menu/variables.js

@@ -131,12 +131,12 @@ exports.mobileMenu = (0, styled_components_1.css) `
     * @tokens Mobile Menu
     * */
   /* Fallback for older browsers. dvh accounts for dynamic UI elements like mobile address bars */
-  --menu-mobile-height: calc(100vh - var(--navbar-height));
-  --menu-mobile-height: calc(100dvh - var(--navbar-height));
+  --menu-mobile-height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  --menu-mobile-height: calc(100dvh - var(--navbar-height) - var(--banner-height));
   --menu-mobile-width: 100%;
   --menu-mobile-z-index: var(--z-index-raised);
   --menu-mobile-left: 0;
-  --menu-mobile-top: var(--navbar-height);
+  --menu-mobile-top: calc(var(--navbar-height) + var(--banner-height));
   --menu-mobile-transition: 0.5s;
   --menu-mobile-bg: var(--bg-color); // @presenter Color
   --menu-mobile-margin: var(--menu-mobile-items-margin-top) var(--menu-mobile-margin-horizontal) 0 var(--menu-mobile-margin-horizontal);

package/lib/components/PageActions/PageActions.js

@@ -115,7 +115,7 @@ const LinkMenuItem = (0, styled_components_1.default)(Link_1.Link) `
   --link-decoration-hover: none;
 `;
 const StyledDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown) `
-  z-index: calc(var(--z-index-raised) - 1);
+  --dropdown-menu-z-index: calc(var(--z-index-raised) - 1);
 `;
 const StyledDropdownMenu = (0, styled_components_1.default)(DropdownMenu_1.DropdownMenu) `
   --dropdown-menu-max-height: var(--page-actions-dropdown-max-height);

package/lib/core/constants/feedback.d.ts

@@ -0,0 +1,2 @@
+export declare const MAX_EMAIL_LENGTH = 254;
+export declare const MAX_CONTEXT_LENGTH = 5000;

package/lib/core/constants/feedback.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MAX_CONTEXT_LENGTH = exports.MAX_EMAIL_LENGTH = void 0;
+exports.MAX_EMAIL_LENGTH = 254;
+exports.MAX_CONTEXT_LENGTH = 5000;
+//# sourceMappingURL=feedback.js.map

package/lib/core/constants/index.d.ts

@@ -6,3 +6,4 @@ export * from './catalog';
 export * from './breadcrumb';
 export * from './request-methods';
 export * from './mcp';
+export * from './feedback';

package/lib/core/constants/index.js

@@ -22,4 +22,5 @@ __exportStar(require("./catalog"), exports);
 __exportStar(require("./breadcrumb"), exports);
 __exportStar(require("./request-methods"), exports);
 __exportStar(require("./mcp"), exports);
+__exportStar(require("./feedback"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/openapi/index.d.ts

@@ -26,3 +26,4 @@ export { isUndefined, isString, isNotNull, isObject } from '../utils/type-guards
 export { ThemeDataContext, type ThemeDataTransferObject } from '../contexts/ThemeDataContext';
 export { SearchSessionProvider, SearchSessionContext } from '../contexts/SearchContext';
 export { useUniqueSvgIds } from '../hooks/use-unique-svg-ids';
+export { trimText } from '../utils/text-trimmer';

package/lib/core/openapi/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useUniqueSvgIds = exports.SearchSessionContext = exports.SearchSessionProvider = exports.ThemeDataContext = exports.isObject = exports.isNotNull = exports.isString = exports.isUndefined = exports.SecurityVariablesEnvSuffix = exports.useDialogHotKeys = exports.useSearchDialog = exports.useModalScrollLock = exports.useActiveSectionId = exports.useOutsideClick = exports.useThemeHooks = exports.useFocusTrap = exports.getUserAgent = exports.ClipboardService = exports.getOperationColor = exports.isPrimitive = exports.breakpoints = exports.GlobalStyle = exports.useMount = exports.typedMemo = exports.capitalize = exports.withPathPrefix = exports.addTrailingSlash = exports.combineUrls = exports.getPathPrefix = exports.removeLeadingSlash = exports.addLeadingSlash = exports.IS_BROWSER = void 0;
+exports.trimText = exports.useUniqueSvgIds = exports.SearchSessionContext = exports.SearchSessionProvider = exports.ThemeDataContext = exports.isObject = exports.isNotNull = exports.isString = exports.isUndefined = exports.SecurityVariablesEnvSuffix = exports.useDialogHotKeys = exports.useSearchDialog = exports.useModalScrollLock = exports.useActiveSectionId = exports.useOutsideClick = exports.useThemeHooks = exports.useFocusTrap = exports.getUserAgent = exports.ClipboardService = exports.getOperationColor = exports.isPrimitive = exports.breakpoints = exports.GlobalStyle = exports.useMount = exports.typedMemo = exports.capitalize = exports.withPathPrefix = exports.addTrailingSlash = exports.combineUrls = exports.getPathPrefix = exports.removeLeadingSlash = exports.addLeadingSlash = exports.IS_BROWSER = void 0;
 var dom_1 = require("../utils/dom");
 Object.defineProperty(exports, "IS_BROWSER", { enumerable: true, get: function () { return dom_1.IS_BROWSER; } });
 var urls_1 = require("../utils/urls");
@@ -56,4 +56,6 @@ Object.defineProperty(exports, "SearchSessionProvider", { enumerable: true, get:
 Object.defineProperty(exports, "SearchSessionContext", { enumerable: true, get: function () { return SearchContext_1.SearchSessionContext; } });
 var use_unique_svg_ids_1 = require("../hooks/use-unique-svg-ids");
 Object.defineProperty(exports, "useUniqueSvgIds", { enumerable: true, get: function () { return use_unique_svg_ids_1.useUniqueSvgIds; } });
+var text_trimmer_1 = require("../utils/text-trimmer");
+Object.defineProperty(exports, "trimText", { enumerable: true, get: function () { return text_trimmer_1.trimText; } });
 //# sourceMappingURL=index.js.map

package/lib/core/styles/dark.js

@@ -46,6 +46,16 @@ const replayDarkMode = (0, styled_components_1.css) `
 
   // @tokens End
 `;
+const badgesDarkMode = (0, styled_components_1.css) `
+  /**
+    * @tokens Audience Badge
+    */
+
+  --badge-audience-text-color: var(--text-color-secondary); // @presenter Color
+  --badge-audience-bg-color: var(--color-warm-grey-4); // @presenter Color
+
+  // @tokens End
+`;
 exports.darkMode = (0, styled_components_1.css) `
   /* === Dark Theme Colors  === */
 
@@ -333,6 +343,7 @@ exports.darkMode = (0, styled_components_1.css) `
   ${variables_dark_15.bannerDarkMode}
   ${variables_dark_16.admonitionDarkMode}
   ${variables_dark_17.svgViewerDarkMode}
+  ${badgesDarkMode}
 
   /**
     * @tokens Dark Theme Scrollbar Config

package/lib/core/styles/global.js

@@ -815,6 +815,13 @@ const badges = (0, styled_components_1.css) `
   --badge-deprecated-bg-color: var(--color-warning-base); // @presenter Color
   --badge-deprecated-border-radius: var(--border-radius); // @presenter BorderRadius
 
+  /**
+    * @tokens Audience Badge
+    */
+
+  --badge-audience-text-color: var(--text-color-secondary); // @presenter Color
+  --badge-audience-bg-color: var(--color-warm-grey-2); // @presenter Color
+
   // @tokens End
 `;
 const loadProgressBar = (0, styled_components_1.css) `

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.welcomeText' | 'search.ai.newConversation' | 'search.ai.backToSearch' | 'search.ai.back' | 'search.ai.assistant' | 'search.ai.placeholder' | 'search.ai.generatingResponse' | 'search.ai.followUpQuestion' | 'search.ai.suggestionsTitle' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.resourcesFound.basedOn' | 'search.ai.resourcesFound.resources' | 'search.ai.feedback.title' | 'search.ai.feedback.detailsPlaceholder' | 'search.ai.feedback.thanks' | 'search.ai.toolResult.found' | 'search.ai.toolResult.found.documents' | 'search.ai.toolCall.searching' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.description.forbidden' | 'search.ai.error.description.unauthorized' | 'search.ai.error.header' | 'search.ai.error.header.forbidden' | 'search.ai.error.header.unauthorized' | 'search.ai.feedback.more' | 'search.searchItem.deprecated' | 'search.groups.all' | 'search.filter.field.footer' | 'aiAssistant.trigger' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.forbidden.description' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.add' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'catalog.catalogs.all.title' | 'catalog.catalogs.all.description' | 'catalog.catalogs.all.switcherLabel' | 'catalog.catalogs.service.title' | 'catalog.catalogs.service.description' | 'catalog.catalogs.service.switcherLabel' | 'catalog.catalogs.user.title' | 'catalog.catalogs.user.description' | 'catalog.catalogs.user.switcherLabel' | 'catalog.catalogs.team.title' | 'catalog.catalogs.team.description' | 'catalog.catalogs.team.switcherLabel' | 'catalog.catalogs.domain.title' | 'catalog.catalogs.domain.description' | 'catalog.catalogs.domain.switcherLabel' | 'catalog.catalogs.apiDescription.title' | 'catalog.catalogs.apiDescription.description' | 'catalog.catalogs.apiDescription.switcherLabel' | 'catalog.catalogs.dataSchema.title' | 'catalog.catalogs.dataSchema.description' | 'catalog.catalogs.dataSchema.switcherLabel' | 'catalog.catalogs.apiOperation.title' | 'catalog.catalogs.apiOperation.description' | 'catalog.catalogs.apiOperation.switcherLabel' | 'catalog.entity.metadata.title' | 'catalog.entity.schema.title' | 'catalog.entity.properties.apiDescription.title' | 'catalog.backToAllLabel' | 'catalog.tags.more' | 'catalog.tags.label' | 'catalog.sort' | 'catalog.catalogs.label' | 'catalog.owners.label' | 'catalog.repositories.label' | 'catalog.email.label' | 'catalog.format.label' | 'catalog.entityType.label' | 'catalog.domains.label' | 'catalog.contact.label' | 'catalog.methodAndPath.label' | 'catalog.links.label' | 'catalog.metadata.domains' | 'catalog.metadata.owners' | 'catalog.history.button.label' | 'catalog.history.sidebar.title' | 'catalog.history.sidebar.close' | 'catalog.history.version.label' | 'catalog.history.version.notSpecified' | 'catalog.history.version.default' | 'catalog.history.revisions.limitMessage' | 'catalog.history.revision.current' | 'catalog.history.revisions.showLess' | 'catalog.history.revisions.showMore' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeToSingleColumn' | 'sidebar.actions.changeToTwoColumns' | 'sidebar.actions.singleColumn' | 'sidebar.actions.twoColumns' | '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.submit' | 'feedback.cancel' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'codeSnippet.expand.tooltipText' | 'codeSnippet.collapse.tooltipText' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'mobileMenu.version' | 'navbar.products' | 'page.nextButton' | 'page.previousButton' | 'page.actions.copyButtonText' | 'page.actions.copyTitle' | 'page.actions.copyDescription' | 'page.actions.viewAsMdTitle' | 'page.actions.viewAsMdButtonText' | 'page.actions.viewAsMdDescription' | 'page.actions.chatGptTitle' | 'page.actions.chatGptButtonText' | 'page.actions.chatGptDescription' | 'page.actions.claudeTitle' | 'page.actions.claudeButtonText' | 'page.actions.claudeDescription' | 'page.actions.cursorMcpButtonText' | 'page.actions.cursorMcpTitle' | 'page.actions.cursorMcpDescription' | 'page.actions.connectMcp' | 'page.actions.connectMcp.cursor' | 'page.actions.connectMcp.cursorDescription' | 'page.actions.connectMcp.vscode' | 'page.actions.connectMcp.vscodeDescription' | 'page.actions.connectMcp.copyConfig' | 'page.actions.connectMcp.copyConfigDescription' | '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.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.viewSecurityDetails' | 'openapi.noResponseExample' | 'openapi.discriminator.searchPlaceholder' | 'openapi.discriminator.searchNoResults' | 'openapi.discriminator.defaultMapping' | 'openapi.discriminator.defaultMappingTooltip' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.showOptionalScopes' | 'openapi.hideOptionalScopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'openapi.schemaCatalogLink.title' | 'openapi.schemaCatalogLink.copyButtonTooltip' | 'openapi.schemaCatalogLink.copiedTooltip' | 'openapi.mcp.title' | 'openapi.mcp.endpoint' | 'openapi.mcp.tools' | 'openapi.mcp.protocolVersion' | 'openapi.mcp.capabilities' | 'openapi.mcp.experimentalCapabilities' | 'openapi.mcp.inputSchema' | 'openapi.mcp.inputExample' | 'openapi.mcp.outputSchema' | 'openapi.mcp.outputExample' | 'asyncapi.download.description.title' | 'asyncapi.info.title' | 'graphql.download.description.title' | 'graphql.info.title' | 'graphql.info.contact.url' | 'graphql.info.contact.name' | 'graphql.info.license' | 'graphql.info.termsOfService' | 'graphql.overview' | 'graphql.metadata' | 'graphql.key' | 'graphql.value' | '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.requiredScopes' | 'graphql.viewSecurityDetails' | 'graphql.objectScopes' | 'graphql.fieldScopes' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'graphql.content.fragment' | 'codeWalkthrough.download' | 'codeWalkthrough.preview' | 'time.justNow' | 'time.past.second' | 'time.past.seconds' | 'time.past.minute' | 'time.past.minutes' | 'time.past.hour' | 'time.past.hours' | 'time.past.day' | 'time.past.days' | 'time.past.week' | 'time.past.weeks' | 'time.past.month' | 'time.past.months' | 'time.past.year' | 'time.past.years' | 'page.internalServerError.title' | 'page.internalServerError.description' | 'page.skipToContent.label' | 'select.noResults' | 'loaders.loading' | 'filter.dateRange.from' | 'filter.dateRange.to' | 'mermaid.openFullscreen' | 'mermaid.zoomIn' | 'mermaid.zoomOut' | 'mermaid.reset' | 'mermaid.close' | 'mermaid.viewer';
+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.welcomeText' | 'search.ai.newConversation' | 'search.ai.backToSearch' | 'search.ai.back' | 'search.ai.assistant' | 'search.ai.placeholder' | 'search.ai.generatingResponse' | 'search.ai.followUpQuestion' | 'search.ai.suggestionsTitle' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.resourcesFound.basedOn' | 'search.ai.resourcesFound.resources' | 'search.ai.feedback.title' | 'search.ai.feedback.detailsPlaceholder' | 'search.ai.feedback.thanks' | 'search.ai.toolResult.found' | 'search.ai.toolResult.found.documents' | 'search.ai.toolCall.searching' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.description.forbidden' | 'search.ai.error.description.unauthorized' | 'search.ai.error.header' | 'search.ai.error.header.forbidden' | 'search.ai.error.header.unauthorized' | 'search.ai.feedback.more' | 'search.searchItem.deprecated' | 'search.groups.all' | 'search.filter.field.footer' | 'aiAssistant.trigger' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.forbidden.description' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.add' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'catalog.catalogs.all.title' | 'catalog.catalogs.all.description' | 'catalog.catalogs.all.switcherLabel' | 'catalog.catalogs.service.title' | 'catalog.catalogs.service.description' | 'catalog.catalogs.service.switcherLabel' | 'catalog.catalogs.user.title' | 'catalog.catalogs.user.description' | 'catalog.catalogs.user.switcherLabel' | 'catalog.catalogs.team.title' | 'catalog.catalogs.team.description' | 'catalog.catalogs.team.switcherLabel' | 'catalog.catalogs.domain.title' | 'catalog.catalogs.domain.description' | 'catalog.catalogs.domain.switcherLabel' | 'catalog.catalogs.apiDescription.title' | 'catalog.catalogs.apiDescription.description' | 'catalog.catalogs.apiDescription.switcherLabel' | 'catalog.catalogs.dataSchema.title' | 'catalog.catalogs.dataSchema.description' | 'catalog.catalogs.dataSchema.switcherLabel' | 'catalog.catalogs.apiOperation.title' | 'catalog.catalogs.apiOperation.description' | 'catalog.catalogs.apiOperation.switcherLabel' | 'catalog.entity.metadata.title' | 'catalog.entity.schema.title' | 'catalog.entity.properties.apiDescription.title' | 'catalog.backToAllLabel' | 'catalog.tags.more' | 'catalog.tags.label' | 'catalog.sort' | 'catalog.catalogs.label' | 'catalog.owners.label' | 'catalog.repositories.label' | 'catalog.email.label' | 'catalog.format.label' | 'catalog.entityType.label' | 'catalog.domains.label' | 'catalog.contact.label' | 'catalog.methodAndPath.label' | 'catalog.links.label' | 'catalog.metadata.domains' | 'catalog.metadata.owners' | 'catalog.history.button.label' | 'catalog.history.sidebar.title' | 'catalog.history.sidebar.close' | 'catalog.history.version.label' | 'catalog.history.version.notSpecified' | 'catalog.history.version.default' | 'catalog.history.revisions.limitMessage' | 'catalog.history.revision.current' | 'catalog.history.revisions.showLess' | 'catalog.history.revisions.showMore' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeToSingleColumn' | 'sidebar.actions.changeToTwoColumns' | 'sidebar.actions.singleColumn' | 'sidebar.actions.twoColumns' | '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.maxLength' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.submit' | 'feedback.cancel' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'codeSnippet.expand.tooltipText' | 'codeSnippet.collapse.tooltipText' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'mobileMenu.version' | 'navbar.products' | 'page.nextButton' | 'page.previousButton' | 'page.actions.copyButtonText' | 'page.actions.copyTitle' | 'page.actions.copyDescription' | 'page.actions.viewAsMdTitle' | 'page.actions.viewAsMdButtonText' | 'page.actions.viewAsMdDescription' | 'page.actions.chatGptTitle' | 'page.actions.chatGptButtonText' | 'page.actions.chatGptDescription' | 'page.actions.claudeTitle' | 'page.actions.claudeButtonText' | 'page.actions.claudeDescription' | 'page.actions.cursorMcpButtonText' | 'page.actions.cursorMcpTitle' | 'page.actions.cursorMcpDescription' | 'page.actions.connectMcp' | 'page.actions.connectMcp.cursor' | 'page.actions.connectMcp.cursorDescription' | 'page.actions.connectMcp.vscode' | 'page.actions.connectMcp.vscodeDescription' | 'page.actions.connectMcp.copyConfig' | 'page.actions.connectMcp.copyConfigDescription' | '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.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.viewSecurityDetails' | 'openapi.noResponseExample' | 'openapi.discriminator.searchPlaceholder' | 'openapi.discriminator.searchNoResults' | 'openapi.discriminator.defaultMapping' | 'openapi.discriminator.defaultMappingTooltip' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.showOptionalScopes' | 'openapi.hideOptionalScopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'openapi.schemaCatalogLink.title' | 'openapi.schemaCatalogLink.copyButtonTooltip' | 'openapi.schemaCatalogLink.copiedTooltip' | 'openapi.mcp.title' | 'openapi.mcp.endpoint' | 'openapi.mcp.tools' | 'openapi.mcp.protocolVersion' | 'openapi.mcp.capabilities' | 'openapi.mcp.experimentalCapabilities' | 'openapi.mcp.inputSchema' | 'openapi.mcp.inputExample' | 'openapi.mcp.outputSchema' | 'openapi.mcp.outputExample' | 'asyncapi.download.description.title' | 'asyncapi.info.title' | 'graphql.download.description.title' | 'graphql.info.title' | 'graphql.info.contact.url' | 'graphql.info.contact.name' | 'graphql.info.license' | 'graphql.info.termsOfService' | 'graphql.overview' | 'graphql.metadata' | 'graphql.key' | 'graphql.value' | '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.requiredScopes' | 'graphql.viewSecurityDetails' | 'graphql.objectScopes' | 'graphql.fieldScopes' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'graphql.content.fragment' | 'codeWalkthrough.download' | 'codeWalkthrough.preview' | 'time.justNow' | 'time.past.second' | 'time.past.seconds' | 'time.past.minute' | 'time.past.minutes' | 'time.past.hour' | 'time.past.hours' | 'time.past.day' | 'time.past.days' | 'time.past.week' | 'time.past.weeks' | 'time.past.month' | 'time.past.months' | 'time.past.year' | 'time.past.years' | 'page.internalServerError.title' | 'page.internalServerError.description' | 'page.skipToContent.label' | 'select.noResults' | 'loaders.loading' | 'filter.dateRange.from' | 'filter.dateRange.to' | 'mermaid.openFullscreen' | 'mermaid.zoomIn' | 'mermaid.zoomOut' | 'mermaid.reset' | 'mermaid.close' | 'mermaid.viewer';
 export type Locale = {
     code: string;
     name: string;

package/lib/icons/DirectionRightIcon/DirectionRightIcon.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const DirectionRightIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+}, "data-component-name">;

package/lib/icons/DirectionRightIcon/DirectionRightIcon.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DirectionRightIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M9.5 4L8.79295 4.70705L11.0859 7H5C4.73478 7 4.48043 7.10536 4.29289 7.29289C4.10536 7.48043 4 7.73478 4 8V14H5V8H11.0859L8.79295 10.2929L9.5 11L13 7.5L9.5 4Z", fill: "#1A1C21" }),
+    react_1.default.createElement("path", { d: "M5 2H4V6H5V2Z", fill: "#1A1C21" })));
+exports.DirectionRightIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/DirectionRightIcon/DirectionRightIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+  vertical-align: middle;
+`;
+//# sourceMappingURL=DirectionRightIcon.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.63.0-next.0",
+  "version": "0.63.0-next.2",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -62,8 +62,8 @@
     "typescript": "5.9.3",
     "vitest": "4.0.10",
     "vitest-when": "0.6.2",
-    "webpack": "5.94.0",
-    "@redocly/realm-asyncapi-sdk": "0.9.0-next.0"
+    "webpack": "5.105.2",
+    "@redocly/realm-asyncapi-sdk": "0.9.0-next.1"
   },
   "dependencies": {
     "@tanstack/react-query": "5.62.3",
@@ -78,7 +78,7 @@
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "4.1.1",
     "nprogress": "0.2.0",
-    "openapi-sampler": "1.6.2",
+    "openapi-sampler": "1.7.0",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
     "@redocly/config": "0.43.0"

package/src/components/Buttons/EditPageButton.tsx

@@ -5,7 +5,7 @@ import type { JSX } from 'react';
 
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { EditIcon } from '@redocly/theme/icons/EditIcon/EditIcon';
-import { Link } from '@redocly/theme/components/Link/Link';
+import { Button } from '@redocly/theme/components/Button/Button';
 
 export type EditPageButtonProps = {
   to: string;
@@ -17,43 +17,22 @@ export function EditPageButton({ to }: EditPageButtonProps): JSX.Element {
   const telemetry = useTelemetry();
 
   return (
-    <EditPageButtonWrapper
-      data-component-name="Buttons/EditPageButton"
-      target="_blank"
-      to={to}
-      onClick={() => telemetry.sendEditPageLinkClickedMessage()}
-    >
-      <ButtonIcon />
-      <ButtonText data-translation-key="markdown.editPage.text">
+    <EditPageButtonWrapper data-component-name="Buttons/EditPageButton">
+      <Button
+        to={to}
+        external={true}
+        variant="ghost"
+        size="small"
+        icon={<EditIcon />}
+        onClick={() => telemetry.sendEditPageLinkClickedMessage()}
+        data-translation-key="markdown.editPage.text"
+      >
         {translate('markdown.editPage.text', 'Edit')}
-      </ButtonText>
+      </Button>
     </EditPageButtonWrapper>
   );
 }
 
-const EditPageButtonWrapper = styled(Link)`
-  height: fit-content;
+const EditPageButtonWrapper = styled.div`
   margin-left: auto;
-  display: inline-flex;
-  color: var(--text-color-secondary);
-  font-weight: var(--font-weight-bold);
-  font-size: var(--font-size-base);
-  font-family: var(--font-family-base);
-  text-decoration: none;
-
-  &:hover {
-    color: var(--text-color-primary);
-  }
-
-  @media print {
-    display: none;
-  }
-`;
-
-const ButtonIcon = styled(EditIcon)`
-  margin-right: 3px;
-`;
-
-const ButtonText = styled.span`
-  line-height: 14px;
 `;

package/src/components/Dropdown/Dropdown.tsx

@@ -142,5 +142,5 @@ const ChildrenWrapper = styled.div<{ placement?: string; alignment?: string; isO
   right: ${({ alignment }) => (alignment === 'end' ? '0' : 'auto')};
   display: ${({ isOpen }) => (isOpen ? 'block' : 'none')};
 
-  z-index: var(--z-index-raised);
+  z-index: var(--dropdown-menu-z-index);
 `;

package/src/components/Dropdown/variables.ts

@@ -8,6 +8,7 @@ export const dropdown = css`
   --dropdown-menu-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --dropdown-menu-line-height: var(--line-height-base); // @presenter LineHeight
   --dropdown-menu-text-color: var(--text-color-secondary); // @presenter Color
+  --dropdown-menu-z-index: var(--z-index-raised); // @presenter ZIndex
 
   --dropdown-menu-padding-top: var(--spacing-xxs);
   --dropdown-menu-min-width: 100px;

package/src/components/Feedback/Comment.tsx

@@ -6,6 +6,7 @@ import type { JSX } from 'react';
 import { useOutsideClick, useThemeHooks } from '@redocly/theme/core/hooks';
 import { RadioCheckButtonIcon } from '@redocly/theme/icons/RadioCheckButtonIcon/RadioCheckButtonIcon';
 import { Button } from '@redocly/theme/components/Button/Button';
+import { MAX_CONTEXT_LENGTH } from '@redocly/theme/core/constants';
 
 export type CommentProps = {
   onSubmit: (value: { comment: string }) => void;
@@ -32,18 +33,21 @@ export function Comment({
   const { label, submitText } = settings || {};
   const [text, setText] = React.useState('');
   const [submitValue, setSubmitValue] = React.useState('');
+  const [isMaxLengthReached, setIsMaxLengthReached] = React.useState(false);
   const modalRef = useRef<HTMLDivElement>(null);
 
   useOutsideClick(modalRef, onCancel);
 
   const send = () => {
-    if (!text) return;
-    setSubmitValue(text);
-    onSubmit({ comment: text });
+    const trimmedText = text.trim();
+    if (!trimmedText) return;
+    setSubmitValue(trimmedText);
+    onSubmit({ comment: trimmedText });
   };
   const handleTextAreaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const commentValue = e.target.value;
     setText(commentValue);
+    setIsMaxLengthReached(commentValue.length >= MAX_CONTEXT_LENGTH);
 
     if (!standAlone) {
       onSubmit({ comment: commentValue });
@@ -81,7 +85,15 @@ export function Comment({
         {label ||
           translate('feedback.settings.comment.label', 'Please share your feedback with us.')}
       </Label>
-      <TextArea rows={3} onChange={handleTextAreaChange} />
+      <TextArea rows={3} maxLength={MAX_CONTEXT_LENGTH} onChange={handleTextAreaChange} />
+      {isMaxLengthReached && (
+        <MaxLengthMessage data-translation-key="feedback.settings.comment.maxLength">
+          {translate('feedback.settings.comment.maxLength', {
+            maxLength: MAX_CONTEXT_LENGTH,
+            defaultValue: `Maximum content length of ${MAX_CONTEXT_LENGTH} characters reached`,
+          })}
+        </MaxLengthMessage>
+      )}
       {standAlone && (
         <ButtonsContainer>
           {onCancel && (
@@ -175,3 +187,9 @@ const ButtonsContainer = styled.div`
   margin-top: var(--spacing-xs);
   gap: var(--spacing-xs);
 `;
+
+const MaxLengthMessage = styled.div`
+  font-size: var(--font-size-sm);
+  color: var(--text-color-secondary);
+  margin-top: var(--spacing-xxs);
+`;

package/src/components/Feedback/Mood.tsx

@@ -14,6 +14,7 @@ import { Button } from '@redocly/theme/components/Button/Button';
 import { FaceDissatisfiedIcon } from '@redocly/theme/icons/FaceDissatisfiedIcon/FaceDissatisfiedIcon';
 import { FaceSatisfiedIcon } from '@redocly/theme/icons/FaceSatisfiedIcon/FaceSatisfiedIcon';
 import { FaceNeutralIcon } from '@redocly/theme/icons/FaceNeutralIcon/FaceNeutralIcon';
+import { MAX_EMAIL_LENGTH } from '@redocly/theme/core/constants';
 
 export enum MOOD_STATES {
   SATISFIED = 'satisfied',
@@ -135,11 +136,13 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
   const displayFeedbackEmail = !!score && !optionalEmailSettings?.hide && !userData.isAuthenticated;
 
   const onSubmitMoodForm = () => {
+    const trimmedComment = comment?.trim() || undefined;
+    const trimmedEmail = email?.trim() || undefined;
     onSubmit({
       score: remapScore(score),
-      comment,
+      comment: trimmedComment,
       reasons,
-      email,
+      email: trimmedEmail,
     });
     setIsSubmitted(true);
   };
@@ -255,6 +258,7 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
                 translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com')
               }
               type="email"
+              maxLength={MAX_EMAIL_LENGTH}
               required={!!email}
               onKeyDown={(e) => {
                 if (e.key === 'Enter') {

package/src/components/Feedback/Rating.tsx

@@ -12,6 +12,7 @@ import { RadioCheckButtonIcon } from '@redocly/theme/icons/RadioCheckButtonIcon/
 import { Comment } from '@redocly/theme/components/Feedback/Comment';
 import { Stars } from '@redocly/theme/components/Feedback/Stars';
 import { Button } from '@redocly/theme/components/Button/Button';
+import { MAX_EMAIL_LENGTH } from '@redocly/theme/core/constants';
 
 export const FEEDBACK_MAX_RATING = 5;
 
@@ -64,12 +65,14 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
   };
 
   const onSubmitRatingForm = () => {
+    const trimmedComment = comment?.trim() || undefined;
+    const trimmedEmail = email?.trim() || undefined;
     onSubmit({
       score,
-      comment,
+      comment: trimmedComment,
       reasons,
       max: FEEDBACK_MAX_RATING,
-      email,
+      email: trimmedEmail,
     });
     setIsSubmitted(true);
   };
@@ -168,6 +171,7 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
                 translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com')
               }
               type="email"
+              maxLength={MAX_EMAIL_LENGTH}
               required={!!email}
               onKeyDown={(e) => {
                 if (e.key === 'Enter') {

package/src/components/Feedback/Scale.tsx

@@ -12,6 +12,7 @@ import { RadioCheckButtonIcon } from '@redocly/theme/icons/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 { MAX_EMAIL_LENGTH } from '@redocly/theme/core/constants';
 
 export const MAX_SCALE = 10;
 
@@ -96,12 +97,14 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
   };
 
   const onSubmitScaleForm = () => {
+    const trimmedComment = comment?.trim() || undefined;
+    const trimmedEmail = email?.trim() || undefined;
     onSubmit({
       score,
-      comment,
+      comment: trimmedComment,
       reasons,
       max: MAX_SCALE,
-      email,
+      email: trimmedEmail,
     });
     setIsSubmitted(true);
   };
@@ -193,6 +196,7 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
                 translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com')
               }
               type="email"
+              maxLength={MAX_EMAIL_LENGTH}
               required={!!email}
               onKeyDown={(e) => {
                 if (e.key === 'Enter') {

package/src/components/Feedback/Sentiment.tsx

@@ -13,6 +13,7 @@ import { Comment } from '@redocly/theme/components/Feedback/Comment';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { ThumbDownIcon } from '@redocly/theme/icons/ThumbDownIcon/ThumbDownIcon';
 import { ThumbUpIcon } from '@redocly/theme/icons/ThumbUpIcon/ThumbUpIcon';
+import { MAX_EMAIL_LENGTH } from '@redocly/theme/core/constants';
 
 export type SentimentProps = {
   onSubmit: (value: {
@@ -117,11 +118,13 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
   };
 
   const onSubmitSentimentForm = () => {
+    const trimmedComment = comment?.trim() || undefined;
+    const trimmedEmail = email?.trim() || undefined;
     onSubmit({
       score,
-      comment,
+      comment: trimmedComment,
       reasons,
-      email,
+      email: trimmedEmail,
     });
     setIsSubmitted(true);
   };
@@ -227,6 +230,7 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
                 translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com')
               }
               type="email"
+              maxLength={MAX_EMAIL_LENGTH}
               required={!!email}
               onKeyDown={(e) => {
                 if (e.key === 'Enter') {

package/src/components/Menu/variables.ts

@@ -130,12 +130,12 @@ export const mobileMenu = css`
     * @tokens Mobile Menu
     * */
   /* Fallback for older browsers. dvh accounts for dynamic UI elements like mobile address bars */
-  --menu-mobile-height: calc(100vh - var(--navbar-height));
-  --menu-mobile-height: calc(100dvh - var(--navbar-height));
+  --menu-mobile-height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  --menu-mobile-height: calc(100dvh - var(--navbar-height) - var(--banner-height));
   --menu-mobile-width: 100%;
   --menu-mobile-z-index: var(--z-index-raised);
   --menu-mobile-left: 0;
-  --menu-mobile-top: var(--navbar-height);
+  --menu-mobile-top: calc(var(--navbar-height) + var(--banner-height));
   --menu-mobile-transition: 0.5s;
   --menu-mobile-bg: var(--bg-color); // @presenter Color
   --menu-mobile-margin: var(--menu-mobile-items-margin-top) var(--menu-mobile-margin-horizontal) 0 var(--menu-mobile-margin-horizontal);

package/src/components/PageActions/PageActions.tsx

@@ -119,7 +119,7 @@ const LinkMenuItem = styled(Link)`
 `;
 
 const StyledDropdown = styled(Dropdown)`
-  z-index: calc(var(--z-index-raised) - 1);
+  --dropdown-menu-z-index: calc(var(--z-index-raised) - 1);
 `;
 
 const StyledDropdownMenu = styled(DropdownMenu)`

package/src/core/constants/feedback.ts

@@ -0,0 +1,2 @@
+export const MAX_EMAIL_LENGTH = 254;
+export const MAX_CONTEXT_LENGTH = 5000;

package/src/core/constants/index.ts

@@ -6,3 +6,4 @@ export * from './catalog';
 export * from './breadcrumb';
 export * from './request-methods';
 export * from './mcp';
+export * from './feedback';

package/src/core/openapi/index.ts

@@ -39,3 +39,4 @@ export { isUndefined, isString, isNotNull, isObject } from '../utils/type-guards
 export { ThemeDataContext, type ThemeDataTransferObject } from '../contexts/ThemeDataContext';
 export { SearchSessionProvider, SearchSessionContext } from '../contexts/SearchContext';
 export { useUniqueSvgIds } from '../hooks/use-unique-svg-ids';
+export { trimText } from '../utils/text-trimmer';

package/src/core/styles/dark.ts

@@ -46,6 +46,17 @@ const replayDarkMode = css`
   // @tokens End
 `;
 
+const badgesDarkMode = css`
+  /**
+    * @tokens Audience Badge
+    */
+
+  --badge-audience-text-color: var(--text-color-secondary); // @presenter Color
+  --badge-audience-bg-color: var(--color-warm-grey-4); // @presenter Color
+
+  // @tokens End
+`
+
 
 export const darkMode = css`
   /* === Dark Theme Colors  === */
@@ -334,6 +345,7 @@ export const darkMode = css`
   ${bannerDarkMode}
   ${admonitionDarkMode}
   ${svgViewerDarkMode}
+  ${badgesDarkMode}
 
   /**
     * @tokens Dark Theme Scrollbar Config

package/src/core/styles/global.ts

@@ -823,6 +823,13 @@ const badges = css`
   --badge-deprecated-bg-color: var(--color-warning-base); // @presenter Color
   --badge-deprecated-border-radius: var(--border-radius); // @presenter BorderRadius
 
+  /**
+    * @tokens Audience Badge
+    */
+
+  --badge-audience-text-color: var(--text-color-secondary); // @presenter Color
+  --badge-audience-bg-color: var(--color-warm-grey-2); // @presenter Color
+
   // @tokens End
 `;
 

package/src/core/types/l10n.ts

@@ -203,6 +203,7 @@ export type TranslationKey =
   | 'feedback.settings.comment.label'
   | 'feedback.settings.comment.send'
   | 'feedback.settings.comment.cancel'
+  | 'feedback.settings.comment.maxLength'
   | 'feedback.settings.comment.satisfiedLabel'
   | 'feedback.settings.comment.neutralLabel'
   | 'feedback.settings.comment.dissatisfiedLabel'

package/src/icons/DirectionRightIcon/DirectionRightIcon.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M9.5 4L8.79295 4.70705L11.0859 7H5C4.73478 7 4.48043 7.10536 4.29289 7.29289C4.10536 7.48043 4 7.73478 4 8V14H5V8H11.0859L8.79295 10.2929L9.5 11L13 7.5L9.5 4Z"
+      fill="#1A1C21"
+    />
+    <path d="M5 2H4V6H5V2Z" fill="#1A1C21" />
+  </svg>
+);
+
+export const DirectionRightIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/DirectionRightIcon/DirectionRightIcon',
+}))`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+  vertical-align: middle;
+`;