@redocly/theme 0.82.2-rc.1 → 0.82.2-rc.3

package/lib/components/Button/Button.js

@@ -166,7 +166,7 @@ const ButtonComponent = (props) => {
         props.children,
         props.icon && props.iconPosition === 'right' && props.icon));
     if (props.to) {
-        return react_1.default.createElement(StyledButtonLink, { to: props.to }, button);
+        return (react_1.default.createElement(StyledButtonLink, { to: props.to, onClick: props.onClick }, button));
     }
     else {
         return button;

package/lib/components/Catalog/CatalogCard.js

@@ -37,10 +37,9 @@ const Tag_1 = require("../../components/Tag/Tag");
 const CatalogHighlight_1 = require("../../components/Catalog/CatalogHighlight");
 const Button_1 = require("../../components/Button/Button");
 function CatalogCard({ item }) {
-    var _a, _b;
+    var _a;
     const { useTelemetry } = (0, hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
-    const hasTags = item.scorecardLevel || ((_a = item.tags) === null || _a === void 0 ? void 0 : _a.length);
     return (React.createElement(Link_1.Link, { key: item.docsLink || item.link, to: item.docsLink || item.link },
         React.createElement(StyledCard, { "data-component-name": "Catalog/CatalogCard", onClick: () => telemetry.send('catalog_item_clicked', {}) },
             React.createElement(CardContent, null,
@@ -48,14 +47,14 @@ function CatalogCard({ item }) {
                     React.createElement(CardTitle, null,
                         React.createElement(CatalogHighlight_1.CatalogHighlight, null, item.title))),
                 React.createElement(CardDescription, null,
-                    React.createElement(CatalogHighlight_1.CatalogHighlight, null, (_b = item.description) !== null && _b !== void 0 ? _b : ''))),
+                    React.createElement(CatalogHighlight_1.CatalogHighlight, null, (_a = item.description) !== null && _a !== void 0 ? _a : ''))),
             React.createElement(CardFooter, null,
-                hasTags && (React.createElement(CardTags, null,
+                React.createElement(CardTags, null,
                     (item.tags || []).map((tag, index) => (React.createElement(CardTag, { key: tag + index, color: (0, utils_1.slug)(tag) },
                         React.createElement(CatalogHighlight_1.CatalogHighlight, null, (0, utils_1.capitalize)(tag))))),
                     (item.scorecardLevel && (React.createElement(Tag_1.Tag, { borderless: true, withStatusDot: true, statusDotColor: `var(${(0, utils_1.getScorecardColorVariable)(item.scorecardLevelIdx || 0, Object.keys(item.scorecardLevels || {}).length)})` },
                         React.createElement(CatalogHighlight_1.CatalogHighlight, null, item.scorecardLevel)))) ||
-                        null)),
+                        null),
                 React.createElement(SelectButton, { size: "medium", variant: "secondary", icon: React.createElement(ArrowRightIcon_1.ArrowRightIcon, null) })))));
 }
 exports.CatalogCard = CatalogCard;

package/lib/components/CodeBlock/CodeBlock.js

@@ -37,7 +37,7 @@ const CodeBlockControls_1 = require("../../components/CodeBlock/CodeBlockControl
 function CodeBlock({ lang, source, externalSource, header, dataTestId = 'source-code', codeBlockRef, highlightedHtml, withLineNumbers, startLineNumber, className, codeBlockMaxHeight, tabs, hideCodeColors, wrapContents = false, children, }) {
     var _a, _b, _c, _d, _e, _f;
     const [sourceCode, setSourceCode] = (0, react_1.useState)((_c = (source || ((_b = (_a = externalSource === null || externalSource === void 0 ? void 0 : externalSource.sample) === null || _a === void 0 ? void 0 : _a.get) === null || _b === void 0 ? void 0 : _b.call(_a, externalSource)))) !== null && _c !== void 0 ? _c : '');
-    const highlightedCode = highlightedHtml || children ? null : (0, utils_1.highlight)(sourceCode, lang);
+    const highlightedCode = highlightedHtml || (children ? null : (0, utils_1.highlight)(sourceCode, lang));
     // The same initial value should be returned for ssr and frontend to avoid issues
     // Because we don't have session storage in ssr and can't get the security details there
     // Issue for more details https://github.com/Redocly/reference-docs/issues/888

package/lib/components/Dropdown/Dropdown.js

@@ -41,14 +41,19 @@ function Dropdown({ children, className, active, trigger, triggerEvent = 'click'
     const handleClose = () => {
         setIsOpen(false);
     };
-    const handleToggle = () => {
+    const handleChildClick = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        handleClose();
+    };
+    const handleToggle = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
         setIsOpen(!isOpen);
     };
     const handleKeyDown = (event) => {
         if (event.key === 'Enter' || event.key === ' ') {
-            handleToggle();
-            event.stopPropagation();
-            event.preventDefault();
+            handleToggle(event);
         }
     };
     (0, hooks_1.useOutsideClick)(dropdownRef, handleClose);
@@ -56,7 +61,7 @@ function Dropdown({ children, className, active, trigger, triggerEvent = 'click'
     const dropdownTrigger = (0, react_1.cloneElement)(triggerChild, Object.assign(Object.assign(Object.assign(Object.assign({ onClick: triggerEvent === 'click' ? handleToggle : undefined, icon: withArrow ? isOpen ? react_1.default.createElement(ChevronUpIcon_1.ChevronUpIcon, null) : react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, null) : undefined }, (withArrow ? { iconPosition: 'right' } : {})), { tabIndex: 0 }), triggerChild.props), { onKeyDown: triggerEvent === 'click' ? handleKeyDown : undefined }));
     return (react_1.default.createElement(DropdownWrapper, Object.assign({ "data-component-name": "Dropdown/Dropdown", "data-testid": "dropdown" }, dataAttributes, { className: className, ref: dropdownRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: triggerEvent === 'hover' ? handleClose : undefined }),
         dropdownTrigger,
-        isOpen && (react_1.default.createElement(ChildrenWrapper, { placement: placement, alignment: alignment, onClick: closeOnClick ? handleClose : undefined }, children))));
+        isOpen && (react_1.default.createElement(ChildrenWrapper, { placement: placement, alignment: alignment, onClick: closeOnClick ? handleChildClick : undefined }, children))));
 }
 exports.Dropdown = Dropdown;
 const DropdownWrapper = styled_components_1.default.div `

package/lib/components/Dropdown/DropdownMenuItem.js

@@ -51,6 +51,7 @@ function DropdownMenuItem(_a) {
             onAction === null || onAction === void 0 ? void 0 : onAction();
         }
     };
+    className = className || '' + (active ? ' active' : '');
     if (to) {
         return (react_1.default.createElement(DropdownMenuItemWrapper, Object.assign({ as: Link_1.Link, "data-component-name": "Dropdown/DropdownMenuItem", className: className, separatorLine: separatorLine, to: to, style: style, role: role }, dataAttributes, otherProps),
             prefix,
@@ -99,17 +100,30 @@ const DropdownMenuItemWrapper = styled_components_1.default.li `
     `}
 
   background-color: var(--dropdown-menu-item-bg-color);
+  color: var(--dropdown-menu-item-color);
+
+  ${({ active }) => active &&
+    (0, styled_components_1.css) `
+      background-color: var(--dropdown-menu-item-bg-color-active);
+      color: var(--dropdown-menu-item-color-active);
+      svg {
+        fill: var(--dropdown-menu-item-color-active);
+      }
+    `}
+
   &:hover {
     background-color: var(--dropdown-menu-item-bg-color-hover);
+    color: var(--dropdown-menu-item-color-hover);
   }
 
   ${({ disabled }) => disabled &&
     (0, styled_components_1.css) `
       cursor: default;
       pointer-events: none;
-      color: var(--dropdown-menu-color-disabled);
+      background-color: var(--dropdown-menu-item-bg-color-disabled);
+      color: var(--dropdown-menu-item-color-disabled);
       svg {
-        fill: var(--dropdown-menu-color-disabled);
+        fill: var(--dropdown-menu-item-color-disabled);
       }
     `}
 
@@ -128,9 +142,12 @@ const DropdownMenuItemWrapper = styled_components_1.default.li `
 
   ${({ dangerous }) => dangerous &&
     (0, styled_components_1.css) `
-      color: var(--dropdown-menu-item-color-dangerous);
-      svg {
-        fill: var(--dropdown-menu-item-color-dangerous);
+      &:hover,
+      & {
+        color: var(--dropdown-menu-item-color-dangerous);
+        svg {
+          fill: var(--dropdown-menu-item-color-dangerous);
+        }
       }
     `}
 `;

package/lib/components/Dropdown/variables.js

@@ -17,7 +17,6 @@ exports.dropdown = (0, styled_components_1.css) `
   --dropdown-menu-padding: var(--spacing-xxs); // @presenter Spacing
   --dropdown-menu-border-radius: var(--border-radius-lg); // @presenter BorderRadius
   --dropdown-menu-box-shadow: var(--bg-raised-shadow); // @presenter Shadow
-  --dropdown-menu-color-disabled: var(--text-color-disabled); // @presenter Color
   --dropdown-menu-border-color: var(--border-color-secondary); // @presenter Color
   --dropdown-menu-bg-color: var(--bg-color-raised); // @presenter Color
 
@@ -30,11 +29,16 @@ exports.dropdown = (0, styled_components_1.css) `
   --dropdown-menu-item-bg-color: transparent;
   --dropdown-menu-item-bg-color-active: var(--bg-color-hover); // @presenter Color
   --dropdown-menu-item-bg-color-hover: var(--bg-color-hover); // @presenter Color
+  --dropdown-menu-item-bg-color-disabled: var(--dropdown-menu-item-bg-color); // @presenter Color
   --dropdown-menu-item-separator-border-color: var(--border-color-primary); // @presenter Color
   --dropdown-menu-item-separator-font-size: var(--font-size-sm); // @presenter FontSize
   --dropdown-menu-item-separator-line-height: var(--line-height-sm); // @presenter LineHeight
   --dropdown-menu-item-separator-text-color: var(--text-color-disabled); // @presenter Color
   --dropdown-menu-item-justify-content: flex-start;
+  --dropdown-menu-item-color: var(--dropdown-menu-text-color); // @presenter Color
+  --dropdown-menu-item-color-hover: var(--dropdown-menu-item-color); // @presenter Color
+  --dropdown-menu-item-color-active: var(--dropdown-menu-item-color); // @presenter Color
+  --dropdown-menu-item-color-disabled: var(--text-color-disabled); // @presenter Color
 
   --dropdown-menu-item-color-dangerous: var(--color-error-base);
 

package/lib/components/Feedback/Comment.js

@@ -63,7 +63,7 @@ function Comment({ settings, onSubmit, onCancel, className, standAlone = true, }
         react_1.default.createElement(TextArea, { rows: 3, onChange: handleTextAreaChange }),
         standAlone && (react_1.default.createElement(ButtonsContainer, null,
             onCancel && (react_1.default.createElement(Button_1.Button, { "data-translation-key": "theme.feedback.settings.comment.cancel", onClick: onCancel, variant: "text", size: "small" }, translate('theme.feedback.settings.comment.cancel', 'Cancel'))),
-            react_1.default.createElement(Button_1.Button, { "data-translation-key": "theme.feedback.settings.comment.send", onClick: send, variant: "primary", size: "small" }, translate('theme.feedback.settings.comment.send', 'Send'))))));
+            react_1.default.createElement(Button_1.Button, { "data-translation-key": "theme.feedback.settings.comment.send", onClick: send, variant: "secondary", size: "small" }, translate('theme.feedback.settings.comment.send', 'Send'))))));
 }
 exports.Comment = Comment;
 const StyledFormMandatoryFields = styled_components_1.default.div `

package/lib/components/Feedback/Mood.js

@@ -102,13 +102,13 @@ function Mood({ settings, onSubmit, className }) {
                 React.createElement(Label, { "data-translation-key": "theme.feedback.settings.label" }, label || translate('theme.feedback.settings.label', 'Was this helpful?')),
                 React.createElement(StyledMandatoryFieldContainer, null,
                     React.createElement(React.Fragment, null,
-                        React.createElement(Button_1.Button, { type: "button", disabled: score === MOOD_STATES.DISSATISFIED, size: "medium", onClick: () => {
+                        React.createElement(Button_1.Button, { type: "button", size: "medium", variant: score === MOOD_STATES.DISSATISFIED ? 'primary' : 'secondary', tone: score === MOOD_STATES.DISSATISFIED ? 'danger' : 'default', onClick: () => {
                                 setScore(MOOD_STATES.DISSATISFIED);
                             }, icon: React.createElement(FaceDissatisfiedIcon_1.FaceDissatisfiedIcon, null) }),
-                        React.createElement(Button_1.Button, { type: "button", disabled: score === MOOD_STATES.NEUTRAL, size: "medium", onClick: () => {
+                        React.createElement(Button_1.Button, { type: "button", variant: score === MOOD_STATES.NEUTRAL ? 'primary' : 'secondary', size: "medium", onClick: () => {
                                 setScore(MOOD_STATES.NEUTRAL);
                             }, icon: React.createElement(FaceNeutralIcon_1.FaceNeutralIcon, null) }),
-                        React.createElement(Button_1.Button, { type: "button", disabled: score === MOOD_STATES.SATISFIED, size: "medium", onClick: () => {
+                        React.createElement(Button_1.Button, { type: "button", variant: score === MOOD_STATES.SATISFIED ? 'primary' : 'secondary', size: "medium", onClick: () => {
                                 setScore(MOOD_STATES.SATISFIED);
                             }, icon: React.createElement(FaceSatisfiedIcon_1.FaceSatisfiedIcon, null) })))),
             (displayReasons || displayComment) && (React.createElement(StyledFormOptionalFields, null,
@@ -120,7 +120,7 @@ function Mood({ settings, onSubmit, className }) {
                 displayComment && (React.createElement(Comment_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: renderCommentLabel(score) } })))),
             displaySubmitBnt && (React.createElement(ButtonsContainer, null,
                 React.createElement(Button_1.Button, { onClick: onCancelMoodForm, variant: "text", size: "small" }, "Cancel"),
-                React.createElement(Button_1.Button, { onClick: onCancelMoodForm, variant: "primary", size: "small" }, "Submit"))))));
+                React.createElement(Button_1.Button, { onClick: onSubmitMoodForm, variant: "secondary", size: "small" }, "Submit"))))));
 }
 exports.Mood = Mood;
 const remapScore = (score) => {

package/lib/components/Feedback/Rating.js

@@ -88,7 +88,7 @@ function Rating({ settings, onSubmit, className }) {
                 displayComment && (React.createElement(Comment_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: commentSettings.label } })))),
             displaySubmitBnt && (React.createElement(ButtonsContainer, null,
                 React.createElement(Button_1.Button, { onClick: onCancelRatingForm, variant: "text", size: "small" }, "Cancel"),
-                React.createElement(Button_1.Button, { onClick: onCancelRatingForm, variant: "primary", size: "small" }, "Submit"))))));
+                React.createElement(Button_1.Button, { onClick: onCancelRatingForm, variant: "secondary", size: "small" }, "Submit"))))));
 }
 exports.Rating = Rating;
 const StyledForm = styled_components_1.default.form `

package/lib/components/Feedback/Scale.js

@@ -97,7 +97,7 @@ function Scale({ settings, onSubmit, className }) {
                 displayComment && (React.createElement(Comment_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: commentSettings.label } }))),
             displaySubmitBnt && (React.createElement(ButtonsContainer, null,
                 React.createElement(Button_1.Button, { "data-translation-key": "theme.feedback.settings.comment.cancel", onClick: handleCancel, variant: "text", size: "small" }, translate('theme.feedback.settings.comment.cancel', 'Cancel')),
-                React.createElement(Button_1.Button, { "data-translation-key": "theme.feedback.settings.scale.send", onClick: onSubmitScaleForm, variant: "primary", size: "small" }, translate('theme.feedback.settings.scale.send', 'Submit')))))));
+                React.createElement(Button_1.Button, { "data-translation-key": "theme.feedback.settings.scale.send", onClick: onSubmitScaleForm, variant: "secondary", size: "small" }, translate('theme.feedback.settings.scale.send', 'Submit')))))));
 }
 exports.Scale = Scale;
 const ScaleWrapper = styled_components_1.default.div `

package/lib/components/Feedback/Sentiment.js

@@ -82,10 +82,10 @@ function Sentiment({ settings, onSubmit, className }) {
             React.createElement(StyledFormMandatoryFields, null,
                 React.createElement(Label, { "data-translation-key": "theme.feedback.settings.label" }, label || translate('theme.feedback.settings.label', 'Was this helpful?')),
                 React.createElement(StyledMandatoryFieldContainer, null,
-                    React.createElement(Button_1.Button, { type: "button", size: "medium", disabled: score === 1, onClick: () => {
+                    React.createElement(Button_1.Button, { type: "button", size: "medium", variant: score === 1 ? 'primary' : 'secondary', onClick: () => {
                             setScore(1);
                         }, "aria-label": "Like", icon: React.createElement(ThumbUpIcon_1.ThumbUpIcon, null) }),
-                    React.createElement(Button_1.Button, { size: "medium", type: "button", disabled: score === -1, onClick: () => {
+                    React.createElement(Button_1.Button, { size: "medium", type: "button", variant: score === -1 ? 'primary' : 'secondary', tone: score === -1 ? 'danger' : 'default', onClick: () => {
                             setScore(-1);
                         }, "aria-label": "Dislike", icon: React.createElement(ThumbDownIcon_1.ThumbDownIcon, null) }))),
             (displayReasons || displayComment) && (React.createElement(StyledFormOptionalFields, null,
@@ -97,7 +97,7 @@ function Sentiment({ settings, onSubmit, className }) {
                 displayComment && (React.createElement(Comment_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: commentLabel } })))),
             displaySubmitBnt && (React.createElement(ButtonsContainer, null,
                 React.createElement(Button_1.Button, { onClick: onCancelSentimentForm, variant: "text", size: "small" }, "Cancel"),
-                React.createElement(Button_1.Button, { onClick: onSubmitSentimentForm, variant: "primary", size: "small" }, "Submit"))))));
+                React.createElement(Button_1.Button, { onClick: onSubmitSentimentForm, variant: "secondary", size: "small" }, "Submit"))))));
 }
 exports.Sentiment = Sentiment;
 const SentimentWrapper = styled_components_1.default.div `

package/lib/components/Filter/FilterContent.js

@@ -30,7 +30,7 @@ function FilterContent({ setFilterTerm, filters, filterTerm, filterValuesCasing,
     return (react_1.default.createElement(FilterContentWrapper, { "data-component-name": "Filter/FilterContent" },
         react_1.default.createElement(FiltersHeader, null,
             react_1.default.createElement(FiltersTitle, { "data-translation-key": "theme.catalog.filters.title" }, translate('theme.catalog.filters.title', 'Filters')),
-            hasActiveFilters ? (react_1.default.createElement(Button_1.Button, { size: "medium", variant: "ghost", onClick: handleClearAll }, translate('theme.catalog.filters.clearAll', 'Clear filters'))) : null),
+            hasActiveFilters ? (react_1.default.createElement(Button_1.Button, { size: "medium", tone: "danger", variant: "ghost", onClick: handleClearAll }, translate('theme.catalog.filters.clearAll', 'Clear filters'))) : null),
         react_1.default.createElement(FilterInput_1.FilterInput, { value: filterTerm, onChange: (updatedTerm) => setFilterTerm(updatedTerm) }),
         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 }))))));
 }

package/lib/components/LanguagePicker/LanguagePicker.js

@@ -46,7 +46,7 @@ const LanguageDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown).a
   }
 
   --dropdown-menu-item-justify-content: space-between;
-
+  --dropdown-menu-item-gap: var(--spacing-xxs);
   --dropdown-menu-font-size: var(--language-picker-dropdown-font-size);
   --dropdown-menu-font-weight: var(--language-picker-dropdown-font-weight);
   --dropdown-menu-line-height: var(--language-picker-dropdown-line-height);
@@ -57,7 +57,6 @@ const LanguageDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown).a
   --dropdown-menu-padding: var(--language-picker-dropdown-padding);
   --dropdown-menu-border-radius: var(--language-picker-dropdown-border-radius);
   --dropdown-menu-box-shadow: var(--language-picker-dropdown-box-shadow);
-  --dropdown-menu-color-disabled: var(--language-picker-dropdown-color-disabled);
   --dropdown-menu-border-color: var(--language-picker-dropdown-border-color);
   --dropdown-menu-bg-color: var(--language-picker-dropdown-bg-color);
   --dropdown-menu-item-padding-horizontal: var(--language-picker-dropdown-item-padding-horizontal);
@@ -71,9 +70,13 @@ const LanguageDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown).a
   --dropdown-menu-item-border-radius: var(--language-picker-dropdown-item-border-radius);
   --dropdown-menu-item-bg-color-active: var(--language-picker-dropdown-item-bg-color-active);
   --dropdown-menu-item-bg-color-hover: var(--language-picker-dropdown-item-bg-color-hover);
+  --dropdown-menu-item-bg-color-disabled: var(--language-picker-dropdown-item-bg-color-disabled);
   --dropdown-menu-item-separator-border-color: var(
     --language-picker-dropdown-item-separator-border-color
   );
   --dropdown-menu-item-color-dangerous: var(--language-picker-dropdown-item-color-dangerous);
+  --dropdown-menu-item-color-disabled: var(--language-picker-dropdown-item-color-disabled);
+  --dropdown-menu-item-color-active: var(--language-picker-dropdown-item-color-active);
+  --dropdown-menu-item-color-hover: var(--language-picker-dropdown-item-color-hover);
 `;
 //# sourceMappingURL=LanguagePicker.js.map

package/lib/components/LanguagePicker/variables.js

@@ -17,7 +17,6 @@ exports.languagePicker = (0, styled_components_1.css) `
   --language-picker-dropdown-padding: var(--dropdown-menu-padding ); // @presenter Spacing
   --language-picker-dropdown-border-radius: var(--dropdown-menu-border-radius); // @presenter BorderRadius
   --language-picker-dropdown-box-shadow: var(--dropdown-menu-box-shadow); // @presenter Shadow
-  --language-picker-dropdown-color-disabled: var(--dropdown-menu-color-disabled); // @presenter Color
   --language-picker-dropdown-border-color: var(--dropdown-menu-border-color); // @presenter Color
   --language-picker-dropdown-bg-color: var(--dropdown-menu-bg-color); // @presenter Color
 
@@ -28,8 +27,12 @@ exports.languagePicker = (0, styled_components_1.css) `
   --language-picker-dropdown-item-border-radius: var(--dropdown-menu-item-border-radius ); // @presenter BorderRadius
   --language-picker-dropdown-item-bg-color-active: var(--dropdown-menu-item-bg-color-active); // @presenter Color
   --language-picker-dropdown-item-bg-color-hover: var(--dropdown-menu-item-bg-color-hover); // @presenter Color
+  --language-picker-dropdown-item-bg-color-disabled: var(--dropdown-menu-item-bg-color-disabled); // @presenter Color
   --language-picker-dropdown-item-separator-border-color: var(--dropdown-menu-item-separator-border-color); // @presenter Color
   --language-picker-dropdown-item-color-dangerous: var(--dropdown-menu-item-color-dangerous);
+  --language-picker-dropdown-item-color-disabled: var(--dropdown-menu-item-color-disabled);
+  --language-picker-dropdown-item-color-active: var(--dropdown-menu-item-color-active);
+  --language-picker-dropdown-item-color-hover: var(--dropdown-menu-item-color-hover);
   --language-picker-dropdown-item-border-color-focused: var(--dropdown-menu-item-border-color-focused);
 
   // @tokens End

package/lib/components/Markdown/Markdown.js

@@ -122,37 +122,37 @@ exports.Markdown = styled_components_1.default.main.attrs(({ className }) => ({
   }
 
   h1.md {
-    ${(0, theme_helpers_1.typography)('h1', 'h')};
+    ${(0, theme_helpers_1.typography)('h1')};
     margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;
     ${(0, headingAnchor_1.headingAnchorCss)()};
   }
 
   h2.md {
-    ${(0, theme_helpers_1.typography)('h2', 'h')};
+    ${(0, theme_helpers_1.typography)('h2')};
     margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;
     ${(0, headingAnchor_1.headingAnchorCss)()};
   }
 
   h3.md {
-    ${(0, theme_helpers_1.typography)('h3', 'h')};
+    ${(0, theme_helpers_1.typography)('h3')};
     margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;
     ${(0, headingAnchor_1.headingAnchorCss)()};
   }
 
   h4.md {
-    ${(0, theme_helpers_1.typography)('h4', 'h')};
+    ${(0, theme_helpers_1.typography)('h4')};
     margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;
     ${(0, headingAnchor_1.headingAnchorCss)()};
   }
 
   h5.md {
-    ${(0, theme_helpers_1.typography)('h5', 'h')};
+    ${(0, theme_helpers_1.typography)('h5')};
     margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;
     ${(0, headingAnchor_1.headingAnchorCss)()};
   }
 
   h6.md {
-    ${(0, theme_helpers_1.typography)('h6', 'h')};
+    ${(0, theme_helpers_1.typography)('h6')};
     margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;
     ${(0, headingAnchor_1.headingAnchorCss)()};
   }

package/lib/components/Product/ProductPicker.js

@@ -51,7 +51,6 @@ const ProductDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown).at
   --dropdown-menu-padding: var(--product-picker-dropdown-padding);
   --dropdown-menu-border-radius: var(--product-picker-dropdown-border-radius);
   --dropdown-menu-box-shadow: var(--product-picker-dropdown-box-shadow);
-  --dropdown-menu-color-disabled: var(--product-picker-dropdown-color-disabled);
   --dropdown-menu-border-color: var(--product-picker-dropdow--border-color);
   --dropdown-menu-bg-color: var(--product-picker-dropdown-bg-color);
   --dropdown-menu-item-padding-horizontal: var(--product-picker-dropdown-item-padding-horizontal);
@@ -65,9 +64,13 @@ const ProductDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown).at
   --dropdown-menu-item-border-radius: var(--product-picker-dropdown-item-border-radius);
   --dropdown-menu-item-bg-color-active: var(--product-picker-dropdown-item-bg-color-active);
   --dropdown-menu-item-bg-color-hover: var(--product-picker-dropdown-item-bg-color-hover);
+  --dropdown-menu-item-bg-color-disabled: var(--product-picker-dropdown-item-bg-color-disabled);
   --dropdown-menu-item-separator-border-color: var(
     --product-picker-dropdown-item-separator-border-color
   );
   --dropdown-menu-item-color-dangerous: var(--product-picker-dropdown-item-color-dangerous);
+  --dropdown-menu-item-color-disabled: var(--product-picker-dropdown-item-color-disabled);
+  --dropdown-menu-item-color-active: var(--product-picker-dropdown-item-color-active);
+  --dropdown-menu-item-color-hover: var(--product-picker-dropdown-item-color-hover);
 `;
 //# sourceMappingURL=ProductPicker.js.map

package/lib/components/Product/variables.js

@@ -20,7 +20,6 @@ exports.productPicker = (0, styled_components_1.css) `
   --product-picker-dropdown-padding: var(--dropdown-menu-padding ); // @presenter Spacing
   --product-picker-dropdown-border-radius: var(--dropdown-menu-border-radius); // @presenter BorderRadius
   --product-picker-dropdown-box-shadow: var(--dropdown-menu-box-shadow); // @presenter Shadow
-  --product-picker-dropdown-color-disabled: var(--dropdown-menu-color-disabled); // @presenter Color
   --product-picker-dropdown-border-color: var(--dropdown-menu-border-color); // @presenter Color
   --product-picker-dropdown-bg-color: var(--dropdown-menu-bg-color); // @presenter Color
 
@@ -31,8 +30,12 @@ exports.productPicker = (0, styled_components_1.css) `
   --product-picker-dropdown-item-border-radius: var(--dropdown-menu-item-border-radius ); // @presenter BorderRadius
   --product-picker-dropdown-item-bg-color-active: var(--dropdown-menu-item-bg-color-active); // @presenter Color
   --product-picker-dropdown-item-bg-color-hover: var(--dropdown-menu-item-bg-color-hover); // @presenter Color
+  --product-picker-dropdown-item-bg-color-disabled: var(--dropdown-menu-item-bg-color-disabled); // @presenter Color
   --product-picker-dropdown-item-separator-border-color: var(--dropdown-menu-item-separator-border-color); // @presenter Color
   --product-picker-dropdown-item-color-dangerous: var(--dropdown-menu-item-color-dangerous);
+  --product-picker-dropdown-item-color-disabled: var(--dropdown-menu-item-color-disabled);
+  --product-picker-dropdown-item-color-active: var(--dropdown-menu-item-color-active);
+  --product-picker-dropdown-item-color-hover: var(--dropdown-menu-item-color-hover);
   --product-picker-dropdown-item-border-color-focused: var(--dropdown-menu-item-border-color-focused);
 
 `;

package/lib/components/Sidebar/Sidebar.js

@@ -42,7 +42,7 @@ function Sidebar({ versions, menu, footer, header, growContent, collapsed, class
     if (sidebar === null || sidebar === void 0 ? void 0 : sidebar.hide) {
         return null;
     }
-    return (react_1.default.createElement(SidebarContent, { "data-component-name": "Sidebar/Sidebar", animate: true, opened: isOpen, className: className, collapsed: mappedCollapsed },
+    return (react_1.default.createElement(SidebarContent, { "data-component-name": "Sidebar/Sidebar", opened: isOpen, className: className, collapsed: mappedCollapsed },
         header ? react_1.default.createElement(SidebarHeader, { collapsed: mappedCollapsed }, header) : null,
         !mappedCollapsed && versions ? versions : null,
         react_1.default.createElement(MenuContainer_1.MenuContainer, { hidden: mappedCollapsed, growContent: growContent, animation: menuItemsAnimation }, menu),
@@ -67,14 +67,8 @@ const SidebarContent = styled_components_1.default.aside `
   top: var(--navbar-height);
   height: calc(100vh - var(--navbar-height));
   overflow-x: hidden;
-  ${({ opened, animate }) => `
-    opacity: ${opened ? '1' : '0'};
-    pointer-events: ${opened ? 'auto' : 'none'};
-
-    & > * {
-      transform: ${opened ? 'translate(0, 0)' : 'translate(0, 40px)'};
-      transition: ${animate ? 'transform 0.65s ease, opacity 0.25s ease;' : 'none'};
-    }
+  ${({ opened }) => `
+    display: ${opened ? 'flex' : 'none'}
   `};
 
   @media screen and (min-width: ${utils_1.breakpoints.medium}) {

package/lib/components/Tooltip/Tooltip.js

@@ -141,8 +141,8 @@ const TooltipBody = styled_components_1.default.span `
   position: absolute;
   text-align: center;
 
-  padding: 10px 20px;
-  max-width: 250px;
+  padding: var(--tooltip-padding);
+  max-width: var(--tooltip-max-width);
   white-space: normal;
   overflow-wrap: break-word;
 

package/lib/components/Tooltip/variables.js

@@ -10,6 +10,10 @@ exports.tooltip = (0, styled_components_1.css) `
 
   --tooltip-text-color: var(--text-color-secondary);
   --tooltip-bg-color: var(--bg-color-raised);
+  --tooltip-padding-vertical: var(--spacing-xs);
+  --tooltip-padding-horizontal: var(--spacing-sm);
+  --tooltip-padding: var(--tooltip-padding-vertical) var(--tooltip-padding-horizontal);
+  --tooltip-max-width: 250px;
 
   .tooltip-copy-button {
     --tooltip-text-color: var(--text-color-secondary);

package/lib/components/Typography/H1.js

@@ -13,6 +13,6 @@ exports.H1 = styled_components_1.default.h1.attrs(({ className }) => ({
   color: var(--h1-text-color);
   margin: var(--h1-margin-top) 0 var(--h1-margin-bottom);
 
-  ${(0, utils_1.typography)('h1', 'h')};
+  ${(0, utils_1.typography)('h1')};
 `;
 //# sourceMappingURL=H1.js.map

package/lib/components/Typography/H2.js

@@ -13,6 +13,6 @@ exports.H2 = styled_components_1.default.h2.attrs(({ className }) => ({
   color: var(--h2-text-color);
   margin: var(--h2-margin-top) 0 var(--h2-margin-bottom);
 
-  ${(0, utils_1.typography)('h2', 'h')};
+  ${(0, utils_1.typography)('h2')};
 `;
 //# sourceMappingURL=H2.js.map

package/lib/components/Typography/H3.js

@@ -13,6 +13,6 @@ exports.H3 = styled_components_1.default.h3.attrs(({ className }) => ({
   color: var(--h3-text-color);
   margin: var(--h3-margin-top) 0 var(--h3-margin-bottom);
 
-  ${(0, utils_1.typography)('h3', 'h')};
+  ${(0, utils_1.typography)('h3')};
 `;
 //# sourceMappingURL=H3.js.map

package/lib/components/Typography/H4.js

@@ -13,6 +13,6 @@ exports.H4 = styled_components_1.default.h4.attrs(({ className }) => ({
   color: var(--h4-text-color);
   margin: var(--h4-margin-top) 0 var(--h4-margin-bottom);
 
-  ${(0, utils_1.typography)('h4', 'h')};
+  ${(0, utils_1.typography)('h4')};
 `;
 //# sourceMappingURL=H4.js.map

package/lib/components/UserMenu/UserMenu.js

@@ -72,7 +72,6 @@ const StyledDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown).att
   --dropdown-menu-padding: var(--user-menu-dropdown-padding);
   --dropdown-menu-border-radius: var(--user-menu-dropdown-border-radius);
   --dropdown-menu-box-shadow: var(--user-menu-dropdown-box-shadow);
-  --dropdown-menu-color-disabled: var(--user-menu-dropdown-color-disabled);
   --dropdown-menu-border-color: var(--user-menu-dropdown-border-color);
   --dropdown-menu-bg-color: var(--user-menu-dropdown-bg-color);
   --dropdown-menu-item-padding-horizontal: var(--user-menu-dropdown-item-padding-horizontal);
@@ -84,9 +83,13 @@ const StyledDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown).att
   --dropdown-menu-item-border-radius: var(--user-menu-dropdown-item-border-radius);
   --dropdown-menu-item-bg-color-active: var(--user-menu-dropdown-item-bg-color-active);
   --dropdown-menu-item-bg-color-hover: var(--user-menu-dropdown-item-bg-color-hover);
+  --dropdown-menu-item-bg-color-disabled: var(--user-menu-dropdown-item-bg-color-disabled);
   --dropdown-menu-item-separator-border-color: var(
     --user-menu-dropdown-item-separator-border-color
   );
   --dropdown-menu-item-color-dangerous: var(--user-menu-dropdown-item-color-dangerous);
+  --dropdown-menu-item-color-disabled: var(--user-menu-dropdown-item-color-disabled);
+  --dropdown-menu-item-color-active: var(--user-menu-dropdown-item-color-active);
+  --dropdown-menu-item-color-hover: var(--user-menu-dropdown-item-color-hover);
 `;
 //# sourceMappingURL=UserMenu.js.map

package/lib/components/UserMenu/variables.js

@@ -44,7 +44,6 @@ exports.userMenu = (0, styled_components_1.css) `
   --user-menu-dropdown-padding: var(--dropdown-menu-padding ); // @presenter Spacing
   --user-menu-dropdown-border-radius: var(--dropdown-menu-border-radius); // @presenter BorderRadius
   --user-menu-dropdown-box-shadow: var(--dropdown-menu-box-shadow); // @presenter Shadow
-  --user-menu-dropdown-color-disabled: var(--dropdown-menu-color-disabled); // @presenter Color
   --user-menu-dropdown-border-color: var(--dropdown-menu-border-color); // @presenter Color
   --user-menu-dropdown-bg-color: var(--dropdown-menu-bg-color); // @presenter Color
 
@@ -55,8 +54,12 @@ exports.userMenu = (0, styled_components_1.css) `
   --user-menu-dropdown-item-border-radius: var(--dropdown-menu-item-border-radius ); // @presenter BorderRadius
   --user-menu-dropdown-item-bg-color-active: var(--dropdown-menu-item-bg-color-active); // @presenter Color
   --user-menu-dropdown-item-bg-color-hover: var(--dropdown-menu-item-bg-color-hover); // @presenter Color
+  --user-menu-dropdown-item-bg-color-disabled: var(--dropdown-menu-item-bg-color-disabled); // @presenter Color
   --user-menu-dropdown-item-separator-border-color: var(--dropdown-menu-item-separator-border-color); // @presenter Color
   --user-menu-dropdown-item-color-dangerous: var(--dropdown-menu-item-color-dangerous);
+  --user-menu-dropdown-item-color-disabled: var(--dropdown-menu-item-color-disabled);
+  --user-menu-dropdown-item-color-active: var(--dropdown-menu-item-color-active);
+  --user-menu-dropdown-item-color-hover: var(--dropdown-menu-item-color-hover);
   --user-menu-dropdown-item-border-color-focused: var(--dropdown-menu-item-border-color-focused);
 
   // @tokens End

package/lib/core/styles/global.js

@@ -973,10 +973,9 @@ const error = (0, styled_components_1.css) `
   --detailed-error-overlay-opacity: 0.9;
   --detailed-error-overlay-z-index: var(--z-index-raised);
 
-  --detailed-error-modal-width: 70%;
-  --detailed-error-modal-height: calc(100vh - 100px - var(--navbar-height));
-  --detailed-error-modal-top: calc(50px + var(--navbar-height));
-  --detailed-error-modal-left: 15%;
+  --detailed-error-modal-width: calc(100% - var(--spacing-lg) * 2);
+  --detailed-error-modal-height: calc(100vh - var(--navbar-height) - var(--spacing-lg) * 2);
+  --detailed-error-modal-top: calc(var(--spacing-lg) + var(--navbar-height));
   --detailed-error-modal-border-radius: var(--border-radius-md);
   --detailed-error-modal-bg-color: var(--bg-color-raised);
   --detailed-error-modal-color: var(--text-color-primary);

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

@@ -39,5 +39,8 @@ export type CatalogItem = {
     }>;
     scoreCardSlug?: string;
     tags?: unknown[];
+    versions?: CatalogItem[];
+    version?: string;
+    versionFolderId?: string;
     [k: string]: unknown;
 };

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { ResolvedNavItemWithLink, Version } from '@redocly/config';
+import type { PageProps, ResolvedNavItemWithLink, Version } from '@redocly/config';
 import type { Callback, TFunction as TFunc } from 'i18next';
 import type { To, Location } from 'react-router-dom';
 import type { CatalogConfig, ProductUiConfig } from '../../config';
@@ -60,6 +60,8 @@ export type ThemeHooks = {
     useTelemetry: () => {
         send(action: TelemetryEvent, data: unknown): void;
     };
+    useUserTeams: () => string[];
+    usePageProps: <T extends Record<string, unknown>>() => PageProps & T;
 };
 export type I18nConfig = {
     currentLocale: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.82.2-rc.1",
+  "version": "0.82.2-rc.3",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -98,7 +98,7 @@
     "timeago.js": "^4.0.2",
     "i18next": "^22.4.12",
     "nprogress": "^0.2.0",
-    "@redocly/config": "0.5.0"
+    "@redocly/config": "0.82.2-rc.3"
   },
   "scripts": {
     "start": "npm-run-all --parallel storybook storybook:tokens:watch",

package/src/components/Button/Button.tsx

@@ -191,7 +191,11 @@ const ButtonComponent: React.FC<ButtonProps> = (props) => {
   );
 
   if (props.to) {
-    return <StyledButtonLink to={props.to}>{button}</StyledButtonLink>;
+    return (
+      <StyledButtonLink to={props.to} onClick={props.onClick}>
+        {button}
+      </StyledButtonLink>
+    );
   } else {
     return button;
   }