@redocly/theme 0.18.3-patch.1 → 0.18.3-patch.5

package/lib/I18n/LanguagePicker.js

@@ -28,7 +28,7 @@ const LanguagePicker = (props) => {
             history.push(newUrlWithLanguage);
             props.onChangeLanguage(locale.code);
         }, key: locale.code, role: "link" }, locale.name || locale.code || '')));
-    return (react_1.default.createElement(LanguageSelect, { selected: selected, options: languageItems, triggerEvent: "hover", placement: props.placement, alignment: props.alignment, icon: react_1.default.createElement(icons_1.LanguageIcon, null), onlyIcon: props.onlyIcon }));
+    return (react_1.default.createElement(LanguageSelect, { selected: selected, options: languageItems, triggerEvent: "hover", placement: props.placement, alignment: props.alignment, icon: react_1.default.createElement(icons_1.LanguageIcon, null), onlyIcon: props.onlyIcon, withArrow: false }));
 };
 exports.LanguagePicker = LanguagePicker;
 const LanguageSelect = (0, styled_components_1.default)(Select_1.Select).attrs(() => ({

package/lib/components/Catalog/Catalog.d.ts

@@ -7,3 +7,8 @@ export default function Catalog(props: {
     };
 }): JSX.Element;
 export declare const FilterControls: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CatalogPageContent: import("styled-components").StyledComponent<"main", any, {}, never>;
+export declare const CatalogTitle: import("styled-components").StyledComponent<"h2", any, {}, never>;
+export declare const CatalogDescription: import("styled-components").StyledComponent<"p", any, {}, never>;
+export declare const CatalogPageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CatalogPageDescriptionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/Catalog/Catalog.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterControls = void 0;
+exports.CatalogPageDescriptionWrapper = exports.CatalogPageWrapper = exports.CatalogDescription = exports.CatalogTitle = exports.CatalogPageContent = exports.FilterControls = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Highlight_1 = require("../../ui/Highlight");
@@ -15,6 +15,7 @@ const FilterContent_1 = require("../../components/Filter/FilterContent");
 const FilterPopover_1 = require("../../components/Filter/FilterPopover");
 const Button_1 = require("../../components/Button");
 const PlusIcon_1 = require("../../icons/PlusIcon");
+const useModalScrollLock_1 = __importDefault(require("../../hooks/useModalScrollLock"));
 const useCatalog_1 = require("./useCatalog");
 function Catalog(props) {
     const { catalogConfig } = props.pageProps;
@@ -25,20 +26,21 @@ function Catalog(props) {
         addFilter: 'theme.catalog.filters.select.addFilter',
     };
     const { translate } = (0, index_1.useTranslate)();
+    (0, useModalScrollLock_1.default)(isAddingFilter);
     return (react_1.default.createElement(Highlight_1.HighlightContext.Provider, { value: [filterTerm] },
-        react_1.default.createElement(CatalogPageWrapper, null,
+        react_1.default.createElement(exports.CatalogPageWrapper, null,
             react_1.default.createElement(FilterTagsWrapper, null,
                 react_1.default.createElement(Button_1.Button, { variant: "text", size: "small", icon: react_1.default.createElement(PlusIcon_1.PlusIcon, null), onClick: () => setIsAddingFilter(true) }, translate(translationKeys.addFilter, 'Add filter')),
                 react_1.default.createElement(FilterTags_1.FilterTags, { filters: filters })),
-            react_1.default.createElement(FilterContent_1.FilterContent, { setFilterTerm: setFilterTerm, filters: filters, filterTerm: filterTerm, isMobile: false }),
-            isAddingFilter && (react_1.default.createElement(FilterPopover_1.FilterPopover, { setIsAddingFilter: setIsAddingFilter, filters: filters })),
-            react_1.default.createElement(CatalogPageContent, null,
-                react_1.default.createElement(CatalogPageDescriptionWrapper, null,
-                    catalogConfig.title ? (react_1.default.createElement(CatalogTitle, null,
+            react_1.default.createElement(FilterContent_1.FilterContent, { setFilterTerm: setFilterTerm, filters: filters, filterTerm: filterTerm, isMobile: false, filterValuesCasing: catalogConfig.filterValuesCasing }),
+            isAddingFilter && (react_1.default.createElement(FilterPopover_1.FilterPopover, { setIsAddingFilter: setIsAddingFilter, filters: filters, filterValuesCasing: catalogConfig.filterValuesCasing })),
+            react_1.default.createElement(exports.CatalogPageContent, null,
+                react_1.default.createElement(exports.CatalogPageDescriptionWrapper, null,
+                    catalogConfig.title ? (react_1.default.createElement(exports.CatalogTitle, null,
                         ' ',
                         translate(catalogConfig.titleTranslationKey, catalogConfig.title),
                         ' ')) : null,
-                    catalogConfig.description ? (react_1.default.createElement(CatalogDescription, null,
+                    catalogConfig.description ? (react_1.default.createElement(exports.CatalogDescription, null,
                         ' ',
                         translate(catalogConfig.descriptionTranslationKey, catalogConfig.description),
                         ' ')) : null),
@@ -79,11 +81,11 @@ exports.FilterControls = styled_components_1.default.div `
   border-bottom: 1px solid var(--border-secondary);
   background: var(--bg-raised);
 `;
-const CatalogPageContent = styled_components_1.default.main `
+exports.CatalogPageContent = styled_components_1.default.main `
   flex: 1;
   padding: var(--mobile-catalog-page-padding);
 
-  ${({ theme }) => theme.mediaQueries.small} {
+  ${({ theme }) => theme.mediaQueries.medium} {
     padding: var(--catalog-page-padding);
   }
 `;
@@ -93,7 +95,7 @@ const CatalogCards = styled_components_1.default.div `
   gap: 32px;
   margin: var(--catalog-cards-group-margin);
 `;
-const CatalogTitle = (0, styled_components_1.default)(H2_1.H2) `
+exports.CatalogTitle = (0, styled_components_1.default)(H2_1.H2) `
   color: var(--catalog-title-text-color);
   font-weight: var(--catalog-title-font-weight);
   font-size: var(--catalog-title-font-size);
@@ -102,13 +104,13 @@ const CatalogTitle = (0, styled_components_1.default)(H2_1.H2) `
     margin: 0;
   }
 `;
-const CatalogDescription = styled_components_1.default.p `
+exports.CatalogDescription = styled_components_1.default.p `
   color: var(--catalog-description-text-color);
   font-weight: var(--catalog-description-font-weight);
   font-size: var(--catalog-description-font-size);
   margin: var(--catalog-description-margin-top) 0 var(--catalog-description-margin-bottom) 0;
 `;
-const CatalogPageWrapper = styled_components_1.default.div `
+exports.CatalogPageWrapper = styled_components_1.default.div `
   --sidebar-width: var(--catalog-sidebar-width, 285px);
 
   display: flex;
@@ -134,7 +136,7 @@ const CatalogPageWrapper = styled_components_1.default.div `
     font-weight: var(--link-font-weight);
   }
 
-  ${({ theme }) => theme.mediaQueries.small} {
+  ${({ theme }) => theme.mediaQueries.medium} {
     flex-direction: row;
   }
 `;
@@ -143,7 +145,7 @@ const FilterTagsWrapper = styled_components_1.default.div.attrs({ 'data-cy': 'Ca
   display: flex;
   overflow-x: scroll;
 
-  ${({ theme }) => theme.mediaQueries.small} {
+  ${({ theme }) => theme.mediaQueries.medium} {
     display: none;
   }
 
@@ -165,10 +167,10 @@ const FilterTagsWrapper = styled_components_1.default.div.attrs({ 'data-cy': 'Ca
     }
   }
 `;
-const CatalogPageDescriptionWrapper = styled_components_1.default.div `
+exports.CatalogPageDescriptionWrapper = styled_components_1.default.div `
   display: none;
 
-  ${({ theme }) => theme.mediaQueries.small} {
+  ${({ theme }) => theme.mediaQueries.medium} {
     display: block;
   }
 `;

package/lib/components/Catalog/CatalogCard.js

@@ -36,21 +36,38 @@ const icons_1 = require("../../icons");
 const telemetry_1 = require("../../mocks/telemetry");
 const utils_1 = require("../../utils");
 function CatalogCard({ item }) {
-    var _a;
+    var _a, _b;
+    const hasTags = item.scorecardStatus || ((_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, { onClick: () => telemetry_1.telemetry.send('catalog_item_clicked', {}) },
             React.createElement(CardTitle, null,
                 React.createElement(Highlight_1.Highlight, null, item.title)),
             React.createElement(CardContent, null,
                 React.createElement(CardDescription, null,
-                    React.createElement(Highlight_1.Highlight, null, (_a = item.description) !== null && _a !== void 0 ? _a : '')),
+                    React.createElement(Highlight_1.Highlight, null, (_b = item.description) !== null && _b !== void 0 ? _b : '')),
                 React.createElement(CardFooter, null,
-                    item.tags && (React.createElement(CardTags, null, item.tags.map((tag, index) => (React.createElement(CardTag, { key: tag + index, color: (0, utils_1.slug)(tag) },
-                        React.createElement(Highlight_1.Highlight, null, tag)))))),
+                    hasTags && (React.createElement(CardTags, null,
+                        (item.tags || []).map((tag, index) => (React.createElement(CardTag, { key: tag + index, color: (0, utils_1.slug)(tag) },
+                            React.createElement(Highlight_1.Highlight, null, tag)))),
+                        (item.scorecardLevel && item.scorecardStatus && (React.createElement(CardTag, { color: statusToColor(item.scorecardStatus), className: "tag-variant-scorecard-level" },
+                            React.createElement(Highlight_1.Highlight, null, item.scorecardLevel)))) ||
+                            null)),
                     React.createElement(SelectButton, null,
                         React.createElement(icons_1.PointingArrowIcon, null)))))));
 }
 exports.CatalogCard = CatalogCard;
+function statusToColor(status) {
+    switch (status) {
+        case 'Below minimum':
+            return 'error';
+        case 'Minimum':
+            return 'warning';
+        case 'Highest':
+            return 'success';
+        default:
+            return '';
+    }
+}
 const SelectButton = styled_components_1.default.div `
   border: 1px solid var(--catalog-card-button-border-color);
   border-radius: 100%;
@@ -86,7 +103,7 @@ const StyledCard = styled_components_1.default.div.attrs({ 'data-cy': 'Catalog/C
       transform: rotate(-45deg);
       border-color: var(--catalog-card-hover-border-color);
       background: var(--catalog-card-button-hover-background);
-      
+
       svg {
         fill: var(--catalog-card-icon-hover-color);
       }

package/lib/components/CodeBlock/styledVariables.js

@@ -68,7 +68,7 @@ exports.code = (0, styled_components_1.css) `
   --code-block-tokens-constant-color: var(--code-block-tokens-default-color); // @presenter Color
   --code-block-tokens-symbol-color: var(--code-block-tokens-default-color); // @presenter Color
   --code-block-tokens-boolean-color: var(--color-geekblue-7); // @presenter Color
-  --code-block-tokens-string-color: var(--color-green-6); // @presenter Color
+  --code-block-tokens-string-color: var(--color-cyan-6); // @presenter Color
   --code-block-tokens-property-string-color: var(--text-secondary); // @presenter Color
   --code-block-tokens-selector-color: var(--code-block-tokens-string-color); // @presenter Color
   --code-block-tokens-attr-name-color: var(--code-block-tokens-string-color); // @presenter Color

package/lib/components/Filter/Filter.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
 import type { ResolvedFilter } from '../../types/portal/src/shared/types/catalog';
-export declare function Filter({ filter }: {
+import type { ThemeConfig } from '../../config';
+export declare function Filter({ filter, filterValuesCasing, }: {
     filter: ResolvedFilter & {
         selectedOptions: any;
     };
+    filterValuesCasing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];
 }): JSX.Element | null;

package/lib/components/Filter/Filter.js

@@ -10,7 +10,7 @@ const react_date_picker_1 = require("react-date-picker");
 const hooks_1 = require("../../mocks/hooks");
 const icons_1 = require("../../icons");
 const Select_1 = require("../../components/Select");
-function Filter({ filter }) {
+function Filter({ filter, filterValuesCasing, }) {
     var _a, _b;
     const { translate } = (0, hooks_1.useTranslate)();
     const translationKeys = {
@@ -33,7 +33,7 @@ function Filter({ filter }) {
         selectOptions.push(...filter.filteredOptions.map((option) => ({
             value: option.value,
             component: (react_1.default.createElement(FilterOption, { key: option.value, role: "link", onClick: () => filter.selectOption(option.value) },
-                react_1.default.createElement(FilterOptionLabel, null, translate(option.value)),
+                react_1.default.createElement(FilterOptionLabel, null, changeCasing(translate(option.value), filterValuesCasing)),
                 react_1.default.createElement(FilterOptionCount, null, option.count))),
         })));
     }
@@ -66,11 +66,25 @@ function Filter({ filter }) {
             const id = 'filter--' + filter.property + '--' + slug(value.value);
             return (react_1.default.createElement(FilterOption, { key: id, role: "link", onClick: () => filter.toggleOption(value.value) },
                 react_1.default.createElement(icons_1.CheckboxIcon, { checked: filter.selectedOptions.has(value.value) }),
-                react_1.default.createElement(FilterOptionLabel, null, translate(value.value)),
+                react_1.default.createElement(FilterOptionLabel, null, changeCasing(translate(value.value), filterValuesCasing)),
                 react_1.default.createElement(FilterOptionCount, null, value.count)));
         }))));
 }
 exports.Filter = Filter;
+function changeCasing(str, casing) {
+    if (!casing || casing === 'original' || !str)
+        return str;
+    if (casing === 'lowercase') {
+        return str.toLowerCase();
+    }
+    if (casing === 'uppercase') {
+        return str.toUpperCase();
+    }
+    if (casing === 'sentence') {
+        const words = str.split(/[\s-_]+/);
+        return words.map((word) => word[0].toUpperCase() + word.slice(1).toLowerCase()).join(' ');
+    }
+}
 const FilterGroup = styled_components_1.default.div `
   padding: var(--filter-group-padding);
 `;

package/lib/components/Filter/FilterContent.d.ts

@@ -1,11 +1,13 @@
 /// <reference types="react" />
+import type { ThemeConfig } from '../../index.js';
 import type { ResolvedFilter } from '../../types/portal/src/shared/types/catalog';
 interface FilterContentProps {
     setFilterTerm: (value: string) => void;
     filters: ResolvedFilter[];
     filterTerm: string;
     isMobile: boolean;
+    filterValuesCasing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];
 }
-export declare function FilterContent({ setFilterTerm, filters, filterTerm, isMobile, }: FilterContentProps): JSX.Element;
+export declare function FilterContent({ setFilterTerm, filters, filterTerm, isMobile, filterValuesCasing, }: FilterContentProps): JSX.Element;
 export declare const FilterItems: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

package/lib/components/Filter/FilterContent.js

@@ -9,9 +9,10 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const _theme_1 = require("../../index.js");
 const hooks_1 = require("../../mocks/hooks");
 const Catalog_1 = require("../../components/Catalog");
-const index_1 = require("../../components/Filter/index");
+const Filter_1 = require("../../components/Filter");
+const Sidebar_1 = require("../../components/Sidebar");
 const FilterPopover_1 = require("../../components/Filter/FilterPopover");
-function FilterContent({ setFilterTerm, filters, filterTerm, isMobile, }) {
+function FilterContent({ setFilterTerm, filters, filterTerm, isMobile, filterValuesCasing, }) {
     const { translate } = (0, hooks_1.useTranslate)();
     const translationKeys = {
         placeholder: 'theme.catalog.filters.placeholder',
@@ -31,11 +32,11 @@ function FilterContent({ setFilterTerm, filters, filterTerm, isMobile, }) {
     return (react_1.default.createElement(FilterContentWrapper, { isMobile: isMobile },
         react_1.default.createElement(Catalog_1.FilterControls, null,
             react_1.default.createElement(FilterPopover_1.StyledInput, { placeholder: translate(translationKeys.placeholder, 'Type to filter...'), value: filterTerm, onChange: (e) => setFilterTerm(e.target.value) })),
-        react_1.default.createElement(exports.FilterItems, null, filters.map((filter, idx) => (react_1.default.createElement(index_1.Filter, { filter: filter, key: filter.property + '-' + idx })))),
+        react_1.default.createElement(exports.FilterItems, null, filters.map((filter, idx) => (react_1.default.createElement(Filter_1.Filter, { filter: filter, key: filter.property + '-' + idx, filterValuesCasing: filterValuesCasing })))),
         hasActiveFilters && (react_1.default.createElement(_theme_1.Button, { size: "small", onClick: handleClearAll }, translate(translationKeys.placeholder, 'Clear all filters')))));
 }
 exports.FilterContent = FilterContent;
-const FilterContentWrapper = styled_components_1.default.div `
+const FilterContentWrapper = (0, styled_components_1.default)(Sidebar_1.Sidebar) `
   width: var(--sidebar-width);
   display: none;
 
@@ -44,7 +45,7 @@ const FilterContentWrapper = styled_components_1.default.div `
     margin: var(--filter-content-clear-button-margin);
   }
 
-  ${({ theme, isMobile }) => !isMobile && theme.mediaQueries.small} {
+  ${({ theme, isMobile }) => !isMobile && theme.mediaQueries.medium} {
     display: block;
     border-right: 1px solid var(--filter-content-border-color);
 

package/lib/components/Filter/FilterPopover.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="react" />
+import type { ThemeConfig } from '../../index.js';
 import type { ResolvedFilter } from '../../types/portal/src/shared/types/catalog';
 interface FilterPopoverProps {
     setIsAddingFilter: (value: boolean) => void;
     filters: ResolvedFilter[];
+    filterValuesCasing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];
 }
-export declare function FilterPopover({ setIsAddingFilter, filters }: FilterPopoverProps): JSX.Element;
+export declare function FilterPopover({ setIsAddingFilter, filters, filterValuesCasing, }: FilterPopoverProps): JSX.Element;
 export declare const StyledInput: import("styled-components").StyledComponent<"input", any, {
     'data-cy': string;
 }, "data-cy">;

package/lib/components/Filter/FilterPopover.js

@@ -9,11 +9,11 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const _theme_1 = require("../../index.js");
 const FilterContent_1 = require("../../components/Filter/FilterContent");
 const hooks_1 = require("../../mocks/hooks");
-function FilterPopover({ setIsAddingFilter, filters }) {
+function FilterPopover({ setIsAddingFilter, filters, filterValuesCasing, }) {
     const [filterTerm, setFilterTerm] = react_1.default.useState('');
     const filteredFilters = filters
         .map((filter) => {
-        const options = filter.options.filter((option) => option.value.includes(filterTerm));
+        const options = filter.options.filter((option) => option.value.toLowerCase().includes(filterTerm.toLowerCase()));
         return options.length
             ? Object.assign(Object.assign({}, filter), { filteredOptions: options }) : null;
     })
@@ -27,7 +27,7 @@ function FilterPopover({ setIsAddingFilter, filters }) {
         react_1.default.createElement(FilterPopoverHeader, null,
             react_1.default.createElement(FilterPopoverHeaderLabel, null, "Add Filter"),
             react_1.default.createElement(FilterPopoverHeaderButton, { onClick: () => setIsAddingFilter(false) }, translate(translationKeys.placeholder, 'Done'))),
-        react_1.default.createElement(FilterContent_1.FilterContent, { setFilterTerm: setFilterTerm, filters: filters, filterTerm: filterTerm, isMobile: true }),
+        react_1.default.createElement(FilterContent_1.FilterContent, { setFilterTerm: setFilterTerm, filters: filters, filterTerm: filterTerm, filterValuesCasing: filterValuesCasing, isMobile: true }),
         react_1.default.createElement(_theme_1.FilterControls, null,
             react_1.default.createElement(exports.StyledInput, { placeholder: translate(translationKeys.placeholder, 'Type to filter...'), value: filterTerm, onChange: (e) => setFilterTerm(e.target.value) })),
         react_1.default.createElement(FilterContent_1.FilterItems, null, filteredFilters.map((filter, idx) => (react_1.default.createElement(_theme_1.Filter, { filter: filter, key: filter.property + '-' + idx }))))));
@@ -44,7 +44,7 @@ const FilterPopoverWrapper = styled_components_1.default.aside `
   background-color: var(--filter-popover-background-color);
   display: block;
 
-  ${({ theme }) => theme.mediaQueries.small} {
+  ${({ theme }) => theme.mediaQueries.medium} {
     display: none;
   }
 `;

package/lib/components/Filter/styledVariables.js

@@ -32,7 +32,7 @@ exports.filter = (0, styled_components_1.css) `
   --filter-option-count-background-color: var(--bg-raised);
 
   --filter-content-border-color: var(--border-secondary);
-  --filter-content-items-padding: 0 var(--mobile-catalog-filter-padding-horizontal);
+  --filter-content-items-padding: 0 var(--spacing-lg);
   --filter-content-clear-button-margin: var(--spacing-base) auto 0 auto;
   --filter-content-clear-button-width: calc(var(--spacing-unit) * 40);
   --filter-controls-background-color: var(--bg-base);

package/lib/components/Footer/Footer.js

@@ -13,12 +13,13 @@ const hooks_1 = require("../../hooks");
 const ui_1 = require("../../ui");
 const NavbarLogo_1 = require("../../components/NavbarLogo");
 function Footer() {
+    var _a;
     const { footer, logo } = (0, hooks_1.useThemeConfig)() || {};
     const { items, copyrightText } = footer || {};
     if ((0, utils_1.isEmptyArray)(items) || (footer === null || footer === void 0 ? void 0 : footer.hide)) {
         return null;
     }
-    return (react_1.default.createElement(FooterPresentationalComponent, { items: items, copyrightText: copyrightText, logo: logo }));
+    return (react_1.default.createElement(FooterPresentationalComponent, { items: items, copyrightText: copyrightText, logo: ((_a = footer === null || footer === void 0 ? void 0 : footer.logo) === null || _a === void 0 ? void 0 : _a.hide) ? undefined : logo }));
 }
 exports.Footer = Footer;
 function FooterPresentationalComponent({ items, copyrightText, logo, className, }) {

package/lib/components/Footer/FooterColumn.js

@@ -53,6 +53,8 @@ const FooterColumnContainer = styled_components_1.default.div `
   flex: 1;
   margin: 0 0 var(--mobile-footer-column-margin-bottom) 0;
   min-width: var(--footer-column-min-width);
+  align-content: center;
+  flex-wrap: wrap;
 
   ${({ theme }) => theme.mediaQueries.small} {
     text-align: left;

package/lib/components/Footer/styledVariables.js

@@ -44,7 +44,7 @@ exports.footer = (0, styled_components_1.css) `
   --footer-copyright-text-align: start;
 
   --footer-logo-display: block;
-  --footer-logo-margin-right: 86px; // @presenter Spacing
+  --footer-logo-margin-right: 0; // @presenter Spacing
   --footer-logo-margin-bottom: var(--spacing-xl); // @presenter Spacing
 
   --footer-language-picker-display: block;

package/lib/components/Markdown/Admonition.js

@@ -10,16 +10,17 @@ const AlertIcon_1 = require("../../icons/AlertIcon/AlertIcon");
 function Admonition({ type = 'info', name, children, className, 'data-source': dataSource, 'data-hash': dataHash, }) {
     return (react_1.default.createElement(Wrapper, { type: type, className: className, "data-component-name": "Markdown/Admonition", "data-source": dataSource, "data-hash": dataHash },
         react_1.default.createElement(AlertIcon_1.AlertIcon, { type: type }),
-        name ? react_1.default.createElement(Heading, { type: type }, name) : null,
-        react_1.default.createElement(Content, null, children)));
+        react_1.default.createElement(TextContainer, null,
+            name ? react_1.default.createElement(Heading, { type: type }, name) : null,
+            react_1.default.createElement(Content, null, children))));
 }
 exports.Admonition = Admonition;
 const Wrapper = styled_components_1.default.div `
-  position: relative;
-  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing-base);
   margin: var(--admonition-margin-vertical) var(--admonition-margin-horizontal);
   padding: var(--admonition-padding-vertical) var(--admonition-padding-horizontal);
-  padding-left: calc(var(--admonition-padding-horizontal) * 2 + var(--admonition-icon-size));
   border-radius: var(--admonition-border-radius);
   font-size: var(--admonition-font-size);
   font-weight: var(--admonition-font-weight);
@@ -34,10 +35,12 @@ const Wrapper = styled_components_1.default.div `
     border: var(--admonition-${type}-border);
   `}
 `;
-const Heading = styled_components_1.default.h5 `
-  display: block;
-  margin: 0 0 10px;
-
+const TextContainer = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-unit);
+`;
+const Heading = styled_components_1.default.div `
   letter-spacing: var(--admonition-heading-letter-spacing);
   color: ${({ type }) => `var(--admonition-${type}-heading-text-color)`};
 

package/lib/components/Markdown/Mermaid.js

@@ -12,6 +12,9 @@ function Mermaid({ diagramHtml, 'data-source': dataSource, 'data-hash': dataHash
 }
 exports.Mermaid = Mermaid;
 const Wrapper = styled_components_1.default.div `
+  background-color: var(--mermaid-background-color);
+  border-radius: var(--mermaid-border-radius);
+
   .mermaid > svg {
     font-size: var(--font-size-base) !important;
     max-width: 100%;

package/lib/components/Markdown/styledVariables.d.ts

@@ -1,2 +1,3 @@
 export declare const admonition: import("styled-components").FlattenSimpleInterpolation;
 export declare const markdown: import("styled-components").FlattenSimpleInterpolation;
+export declare const mermaid: import("styled-components").FlattenSimpleInterpolation;

package/lib/components/Markdown/styledVariables.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.markdown = exports.admonition = void 0;
+exports.mermaid = exports.markdown = exports.admonition = void 0;
 const styled_components_1 = require("styled-components");
 exports.admonition = (0, styled_components_1.css) `
   /* === Admonitions === */
@@ -9,11 +9,11 @@ exports.admonition = (0, styled_components_1.css) `
   * @tokens Admonition typography
   */
 
-  --admonition-font-size: var(--font-size-base); // @presenter FontSize
+  --admonition-font-size: var(--font-size-sm); // @presenter FontSize
   --admonition-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --admonition-line-height: var(--line-height-base); // @presenter LineHeight
   --admonition-heading-font-size: var(--font-size-base); // @presenter FontSize
-  --admonition-heading-font-weight: var(--font-weight-bold); // @presenter FontWeight
+  --admonition-heading-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --admonition-heading-letter-spacing: 0.3px; // @presenter LetterSpacing
   --admonition-heading-transform: uppercase;
 
@@ -23,16 +23,16 @@ exports.admonition = (0, styled_components_1.css) `
   */
 
   --admonition-margin-horizontal: 0;
-  --admonition-margin-vertical:  var(--spacing-xs);
+  --admonition-margin-vertical: var(--spacing-lg);
   --admonition-padding-horizontal: var(--spacing-base);
-  --admonition-padding-vertical:  var(--spacing-base);
+  --admonition-padding-vertical: var(--spacing-md);
   --admonition-icon-size: 25px;
 
   /**
   * @tokens Admonition border
   */
 
-  --admonition-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --admonition-border-radius: 0; // @presenter BorderRadius
   --admonition-border-style: var(--border-style);
   --admonition-border-width: var(--border-width);
 
@@ -218,4 +218,14 @@ exports.markdown = (0, styled_components_1.css) `
 
   // @tokens End
 `;
+exports.mermaid = (0, styled_components_1.css) `
+  /**
+  * @tokens Mermaid 
+  */
+
+  --mermaid-background-color: var(--bg-raised-light); // @presenter Color
+  --mermaid-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+
+  // @tokens End
+  `;
 //# sourceMappingURL=styledVariables.js.map

package/lib/components/Panel/PanelHeader.js

@@ -15,6 +15,7 @@ exports.PanelHeader = styled_components_1.default.div.attrs(({ className }) => (
   justify-content: space-between;
   min-height: 40px;
   white-space: var(--panel-heading-white-space-local);
+  color: var(--panel-heading-text-color);
 
   cursor: pointer;
 

package/lib/components/Panel/styledVariables.js

@@ -422,7 +422,7 @@ exports.apiReferencePanels = (0, styled_components_1.css) `
   * @tokens Panel try-it tabs
   */
 
-  --panel-try-it-tabs-font-size: 12px; // @presenter FontSize
+  --panel-try-it-tabs-font-size: var(--font-size-sm);
   --panel-try-it-tabs-font-family: var(--panel-font-family); // @presenter FontFamily
   --panel-try-it-tabs-font-weight: var(--panel-font-weight); // @presenter FontWeight
 

package/lib/components/Product/ProductPicker.js

@@ -19,7 +19,7 @@ const ProductPicker = () => {
     const products = Object.values(((_a = globalData === null || globalData === void 0 ? void 0 : globalData.theme) === null || _a === void 0 ? void 0 : _a.products) || {});
     const productComponents = products.map((product) => (react_1.default.createElement(Link_1.Link, { key: product.slug, to: product.link },
         react_1.default.createElement(Product_1.Product, { product: product }))));
-    return products.length ? (react_1.default.createElement(ProductSelect, { selected: currentProductComponent, options: productComponents, withArrow: true, triggerEvent: "hover" })) : null;
+    return products.length ? (react_1.default.createElement(ProductSelect, { selected: currentProductComponent, options: productComponents, triggerEvent: "hover" })) : null;
 };
 exports.ProductPicker = ProductPicker;
 const ProductSelect = (0, styled_components_1.default)(Select_1.Select).attrs(() => ({

package/lib/components/Select/Select.d.ts

@@ -15,9 +15,7 @@ export interface SelectProps {
 export declare const Select: ({ className, selected, options, dataAttributes, withArrow, triggerEvent, onChange, placement, alignment, icon, onlyIcon, }: SelectProps) => JSX.Element;
 export declare const SelectContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SelectInput: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SelectInputValue: import("styled-components").StyledComponent<"div", any, {
-    withIcon?: boolean | undefined;
-}, never>;
+export declare const SelectInputValue: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SelectList: import("styled-components").StyledComponent<"ul", any, {
     placement?: string | undefined;
     alignment?: string | undefined;

package/lib/components/Select/Select.js

@@ -31,7 +31,7 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const icons_1 = require("../../icons");
 const hooks_1 = require("../../hooks");
-const Select = ({ className, selected, options, dataAttributes, withArrow, triggerEvent = 'click', onChange, placement, alignment, icon, onlyIcon, }) => {
+const Select = ({ className, selected, options, dataAttributes, withArrow = true, triggerEvent = 'click', onChange, placement, alignment, icon, onlyIcon, }) => {
     const selectRef = (0, react_1.useRef)(null);
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const [_selected, setSelected] = (0, react_1.useState)(selected);
@@ -56,7 +56,7 @@ const Select = ({ className, selected, options, dataAttributes, withArrow, trigg
     }, [selected]);
     return (react_1.default.createElement(exports.SelectContainer, Object.assign({}, dataAttributes, { "data-testid": "select", className: className, ref: selectRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: triggerEvent === 'hover' ? handleClose : undefined, onClick: triggerEvent === 'click' ? handleToggle : undefined }),
         react_1.default.createElement(exports.SelectInput, null,
-            !onlyIcon && (react_1.default.createElement(exports.SelectInputValue, { withIcon: withArrow || !!icon }, _selected)),
+            !onlyIcon && react_1.default.createElement(exports.SelectInputValue, null, _selected),
             icon,
             withArrow ? isOpen ? react_1.default.createElement(icons_1.ArrowIcon, { direction: "up" }) : react_1.default.createElement(icons_1.ArrowIcon, { direction: "down" }) : null),
         isOpen && (react_1.default.createElement(exports.SelectList, { placement: placement, alignment: alignment }, options.map((option, index) => (react_1.default.createElement(exports.SelectListItem, { key: index, onClick: () => handleSelect(option) }, option)))))));
@@ -83,19 +83,21 @@ exports.SelectInput = styled_components_1.default.div `
   border-radius: var(--select-input-border-radius);
   padding: var(--select-input-padding-vertical) var(--select-input-padding-horizontal);
   cursor: pointer;
+  gap: 8px;
 `;
 exports.SelectInputValue = styled_components_1.default.div `
   pointer-events: none;
-  ${({ withIcon }) => (withIcon ? 'margin-right: 8px;' : '')}
+  min-width: 0;
 `;
 exports.SelectList = styled_components_1.default.ul `
   position: absolute;
-  top: ${({ placement }) => (placement === 'top' ? 'auto' : '100%')};
-  bottom: ${({ placement }) => (placement === 'top' ? '100%' : 'auto')};
+  top: ${({ placement }) => (placement === 'top' ? 'auto' : 'calc(100% + 2px)')};
+  bottom: ${({ placement }) => (placement === 'top' ? 'calc(100% + 2px)' : 'auto')};
   left: ${({ alignment }) => (alignment === 'start' ? '0' : 'auto')};
   right: ${({ alignment }) => (alignment === 'end' ? '0' : 'auto')};
   margin: 0;
   min-width: var(--select-list-min-width);
+  width: 100%;
   max-width: var(--select-list-max-width);
   padding: var(--select-list-padding);
   background-color: var(--select-list-background-color);

package/lib/components/Separator/SeparatorItem.js

@@ -25,6 +25,7 @@ exports.SeparatorItem = (0, styled_components_1.default)(MenuItemLabel_1.MenuIte
 
   :hover {
     color: var(--sidebar-item-separator-text-color);
+    background: none;
   }
 `;
 //# sourceMappingURL=SeparatorItem.js.map

package/lib/components/Sidebar/HeaderWrapper.js

@@ -9,8 +9,8 @@ exports.HeaderWrapper = styled_components_1.default.div.attrs(({ className }) =>
     'data-component-name': 'Sidebar/HeaderWrapper',
     className,
 })) `
-  margin: var(--sidebar-offset-top) 0 0 var(--sidebar-offset-left);
-  padding-bottom: var(--sidebar-header-padding-bottom);
+  margin: var(--sidebar-offset-top) 0 0 0;
+  padding: 0 0 var(--sidebar-header-padding-bottom) var(--sidebar-offset-left);
   border-bottom: solid 1px var(--border-secondary);
 `;
 //# sourceMappingURL=HeaderWrapper.js.map