@redocly/theme 0.18.3-patch.2 → 0.18.3-patch.6

package/lib/I18n/LanguagePicker.js

@@ -21,14 +21,18 @@ const LanguagePicker = (props) => {
     if (!locale) {
         return null;
     }
-    const selected = locale.name || locale.code;
-    const languageItems = locales.map((locale) => (react_1.default.createElement(LanguageItem, { onClick: () => {
-            const newLangPathname = (0, utils_1.withPathPrefix)((0, utils_1.getPathnameForLocale)(location.pathname, defaultLocale, locale.code, locales));
+    const value = locale.code;
+    const languageItems = locales.map((locale) => ({
+        element: react_1.default.createElement(LanguageItem, { role: "link" }, locale.name || locale.code || ''),
+        value: locale.code,
+        title: locale.name || locale.code || '',
+    }));
+    return (react_1.default.createElement(LanguageSelect, { value: value, options: languageItems, onChange: (value) => {
+            const newLangPathname = (0, utils_1.withPathPrefix)((0, utils_1.getPathnameForLocale)(location.pathname, defaultLocale, value, locales));
             const newUrlWithLanguage = `${newLangPathname}${location.search}${location.hash}`;
             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 }));
+            props.onChangeLanguage(value);
+        }, 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(() => ({
@@ -36,6 +40,13 @@ const LanguageSelect = (0, styled_components_1.default)(Select_1.Select).attrs((
         'data-component-name': 'I18n/LanguagePicker',
     },
 })) `
+  --select-list-item-active-background-color: var(
+    --language-picker-list-item-active-background-color
+  );
+  --select-list-item-hover-background-color: var(
+    --language-picker-list-item-hover-background-color
+  );
+
   display: none;
   font-size: var(--language-picker-font-size);
   font-weight: var(--language-picker-font-weight);
@@ -73,10 +84,6 @@ const LanguageSelect = (0, styled_components_1.default)(Select_1.Select).attrs((
       padding: var(--language-picker-list-item-vertical-padding)
         var(--language-picker-list-item-horizontal-padding);
     }
-
-    :hover {
-      background-color: var(--language-picker-list-item-active-background-color);
-    }
   }
 
   ${({ theme }) => theme.mediaQueries.medium} {

package/lib/I18n/styledVariables.js

@@ -33,6 +33,7 @@ exports.languagePicker = (0, styled_components_1.css) `
   --language-picker-list-item-vertical-padding: var(--select-list-item-vertical-padding); // @presenter Spacing
   --language-picker-list-item-border-radius: var(--select-list-item-border-radius); // @presenter BorderRadius
   --language-picker-list-item-active-background-color: var(--select-list-item-active-background-color); // @presenter Color
+  --language-picker-list-item-hover-background-color: var(--select-list-item-hover-background-color); // @presenter Color
 
   // @tokens End
 `;

package/lib/components/Breadcrumbs/Breadcrumb.js

@@ -18,10 +18,6 @@ const BreadcrumbText = styled_components_1.default.div `
 const BreadcrumbWrapper = styled_components_1.default.div `
   border-radius: var(--border-radius);
 
-  &:first-child {
-    padding-left: 0;
-  }
-
   ${(props) => props.isLink &&
     `
     &:hover {

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -24,7 +24,7 @@ const Breadcrumbs = (props) => {
                         total_breadcrumbs: breadcrumbs.length,
                     });
                 } }),
-            isLast ? null : react_1.default.createElement("div", null, "/")));
+            isLast ? null : react_1.default.createElement("span", null, "/")));
     })));
 };
 exports.Breadcrumbs = Breadcrumbs;
@@ -40,6 +40,10 @@ const Container = styled_components_1.default.div `
     padding: var(--breadcrumbs-padding);
   }
 
+  > span {
+    padding: var(--breadcrumbs-gap);
+  }
+
   @media print {
     display: none;
   }

package/lib/components/Breadcrumbs/styledVariables.js

@@ -11,7 +11,8 @@ exports.breadcrumbs = (0, styled_components_1.css) `
   --breadcrumbs-font-size: var(--font-size-base); // @presenter FontSize
   --breadcrumbs-active-text-color: var(--text-primary); // @presenter Color
   --breadcrumbs-hover-text-decoration: underline; // @presenter TextDecoration
-  --breadcrumbs-padding: 0 var(--spacing-xs); // @presenter Spacing
+  --breadcrumbs-padding: 0; // @presenter Spacing
+  --breadcrumbs-gap: var(--spacing-xs);
   --breadcrumbs-margin-bottom: var(--spacing-lg); // @presenter Spacing
 
   // @tokens End

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, filterValuesCasing: catalogConfig.filterValuesCasing }),
-            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,
+            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

@@ -50,7 +50,7 @@ exports.code = (0, styled_components_1.css) `
   --code-block-controls-text-color: var(--text-secondary); // @presenter Color
   --code-block-controls-background-color: var(--bg-overlay); // @presenter Color
   --code-block-controls-border: 1px solid var(--border-primary); // @presenter Border
-  --code-block-controls-padding: 0 5px; // @presenter Spacing
+  --code-block-controls-padding: 0 var(--spacing-xs); // @presenter Spacing
   --code-block-icon-controls-background-color: var(--code-block-controls-background-color);
   --code-block-text-controls-background-color: var(--code-block-controls-background-color);
 
@@ -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,8 +1,9 @@
 /// <reference types="react" />
 import type { ResolvedFilter } from '../../types/portal/src/shared/types/catalog';
+import type { ThemeConfig } from '../../config';
 export declare function Filter({ filter, filterValuesCasing, }: {
     filter: ResolvedFilter & {
         selectedOptions: any;
     };
-    filterValuesCasing?: 'sentence';
+    filterValuesCasing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];
 }): JSX.Element | null;

package/lib/components/Filter/Filter.js

@@ -11,7 +11,7 @@ const hooks_1 = require("../../mocks/hooks");
 const icons_1 = require("../../icons");
 const Select_1 = require("../../components/Select");
 function Filter({ filter, filterValuesCasing, }) {
-    var _a, _b;
+    var _a;
     const { translate } = (0, hooks_1.useTranslate)();
     const translationKeys = {
         selectAll: 'theme.catalog.filters.select.all',
@@ -25,30 +25,23 @@ function Filter({ filter, filterValuesCasing, }) {
         selectOptions = [
             {
                 value: '',
-                component: (react_1.default.createElement(FilterOption, { key: "all", role: "link", onClick: () => filter.selectOption('') },
+                element: (react_1.default.createElement(FilterOption, { key: "all", onClick: () => filter.selectOption('') },
                     react_1.default.createElement(FilterOptionLabel, null, translate(translationKeys.selectAll, 'All')),
                     react_1.default.createElement(FilterOptionCount, null, defaultOptionCount))),
             },
         ];
         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) },
+            element: (react_1.default.createElement(FilterOption, { key: option.value },
                 react_1.default.createElement(FilterOptionLabel, null, changeCasing(translate(option.value), filterValuesCasing)),
                 react_1.default.createElement(FilterOptionCount, null, option.count))),
         })));
     }
-    let selectedOptionComponent;
-    if (filter.type === 'select') {
-        const selectedOption = (_a = filter.selectedOptions.values().next()) === null || _a === void 0 ? void 0 : _a.value;
-        selectedOptionComponent =
-            ((_b = selectOptions.find((option) => option.value === selectedOption)) === null || _b === void 0 ? void 0 : _b.component) ||
-                selectOptions[0].component;
-    }
     return (react_1.default.createElement(FilterGroup, { key: filter.property + filter.title },
         react_1.default.createElement(FilterTitle, null,
             translate(filter.titleTranslationKey, filter.title),
             " "),
-        filter.type === 'select' ? (react_1.default.createElement(StyledSelect, { withArrow: true, selected: selectedOptionComponent, options: selectOptions.map((option) => option.component) })) : filter.type === 'date-range' ? (react_1.default.createElement(react_1.default.Fragment, null,
+        filter.type === 'select' ? (react_1.default.createElement(StyledSelect, { value: (_a = filter.selectedOptions.values().next()) === null || _a === void 0 ? void 0 : _a.value, onChange: (value) => filter.selectOption(value), options: selectOptions })) : filter.type === 'date-range' ? (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(DatePickerWrapper, null,
                 react_1.default.createElement("span", null, "From:"),
                 react_1.default.createElement(react_date_picker_1.DatePicker, { closeCalendar: true, format: "y-MM-dd", dayPlaceholder: "DD", monthPlaceholder: "MM", yearPlaceholder: "YYYY", value: filter.selectedOptions.from ? new Date(filter.selectedOptions.from) : null, minDetail: "decade", maxDate: new Date(), onChange: (from) => {
@@ -72,10 +65,18 @@ function Filter({ filter, filterValuesCasing, }) {
 }
 exports.Filter = Filter;
 function changeCasing(str, casing) {
-    if (casing !== 'sentence')
+    if (!casing || casing === 'original' || !str)
         return str;
-    const words = str.split(/[\s-_]+/);
-    return words.map((word) => word[0].toUpperCase() + word.slice(1).toLowerCase()).join(' ');
+    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,12 @@
 /// <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?: 'sentence';
+    filterValuesCasing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];
 }
 export declare function FilterContent({ setFilterTerm, filters, filterTerm, isMobile, filterValuesCasing, }: FilterContentProps): JSX.Element;
 export declare const FilterItems: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/Filter/FilterContent.js

@@ -9,7 +9,8 @@ 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, filterValuesCasing, }) {
     const { translate } = (0, hooks_1.useTranslate)();
@@ -31,11 +32,11 @@ function FilterContent({ setFilterTerm, filters, filterTerm, isMobile, filterVal
     return (react_1.default.createElement(FilterContentWrapper, { isMobile: isMobile },
         react_1.default.createElement(Catalog_1.FilterControls, null,
             react_1.default.createElement(FilterPopover_1.StyledInput, { placeholder: translate(translationKeys.placeholder, 'Type to filter...'), value: filterTerm, onChange: (e) => setFilterTerm(e.target.value) })),
-        react_1.default.createElement(exports.FilterItems, null, filters.map((filter, idx) => (react_1.default.createElement(index_1.Filter, { filter: filter, key: filter.property + '-' + idx, filterValuesCasing: filterValuesCasing })))),
+        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/LastUpdated/LastUpdated.js

@@ -55,6 +55,7 @@ function LastUpdated(props) {
         : translate(translationKey, 'Last updated on');
     return (React.createElement(Wrapper, { className: props.className, "data-component-name": "LastUpdated/LastUpdated", rawOnPrint: format === 'timeago', "data-print-datetime": isoDate, "data-translation-key": translationKey },
         text,
+        " ",
         React.createElement("time", { dateTime: isoDate }, lastUpdatedString)));
 }
 exports.LastUpdated = LastUpdated;

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;