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

package/lib/components/Tag/Tag.d.ts

@@ -10,8 +10,9 @@ interface TagProps {
     children?: React.ReactNode;
     closable?: boolean;
     color?: StatusColor | Color | string;
+    size?: string;
     icon?: React.ReactNode;
     onClick?: () => void;
 }
-export declare function Tag({ children, className, color, icon, onClick }: TagProps): JSX.Element;
+export declare function Tag({ children, className, color, icon, onClick, size }: TagProps): JSX.Element;
 export {};

package/lib/components/Tag/Tag.js

@@ -6,15 +6,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tag = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-function Tag({ children, className, color, icon, onClick }) {
-    return (react_1.default.createElement(TagContainer, { className: className, color: color, onClick: onClick },
+function Tag({ children, className, color, icon, onClick, size }) {
+    return (react_1.default.createElement(TagContainer, { className: className, color: color, size: size, onClick: onClick },
         icon ? icon : null,
         children));
 }
 exports.Tag = Tag;
-const TagContainer = styled_components_1.default.div.attrs(({ className, color }) => ({
+const TagContainer = styled_components_1.default.div.attrs(({ className, color, size }) => ({
     'data-component-name': 'Tag/Tag',
-    className: (className || '') + ` tag-default ${color ? `tag-${color}` : ''}`,
+    className: (className || '') +
+        ` tag-default ${color ? `tag-${color}` : ''} ${size ? `tag-size-${size}` : ''}`,
 })) `
   display: inline-flex;
   align-items: center;
@@ -23,6 +24,11 @@ const TagContainer = styled_components_1.default.div.attrs(({ className, color }
 
   padding: var(--tag-padding);
   margin: var(--tag-margin);
+
+  &:last-child {
+    margin-right: 0;
+  }
+
   gap: var(--tag-gap);
 
   font-size: var(--tag-font-size);

package/lib/components/Tag/styledVariables.js

@@ -17,6 +17,7 @@ exports.tag = (0, styled_components_1.css) `
     */
 
   --tag-padding: 1px 8px; //@presenter Spacing
+  --tag-large-padding: 4px 16px; //@presenter Spacing
   --tag-margin: 0 5px 0 0; //@presenter Spacing
   --tag-gap: 5px; //@presenter Spacing
 
@@ -40,6 +41,11 @@ exports.tag = (0, styled_components_1.css) `
     * @tokens Tag colors
     */
 
+  .tag-size-large {
+    --tag-padding: var(--tag-large-padding);
+    --tag-font-size: var(--font-size-regular);
+  }
+
   .tag-grey,
   .tag-draft,
   .tag-schema,
@@ -54,7 +60,7 @@ exports.tag = (0, styled_components_1.css) `
   .tag-approved,
   .tag-get {
     --tag-color: var(--color-success-active); // @presenter Color
-    --tag-background-color: none; // @presenter Color
+    --tag-background-color: var(--color-success-bg); // @presenter Color
     --tag-border-color: var(--color-success-active); // @presenter Color
   }
 
@@ -72,7 +78,7 @@ exports.tag = (0, styled_components_1.css) `
   .tag-deprecated,
   .tag-put {
     --tag-color: var(--color-warning-active); // @presenter Color
-    --tag-background-color: none; // @presenter Color
+    --tag-background-color: var(--color-warning-bg); // @presenter Color
     --tag-border-color: var(--color-warning-active); // @presenter Color
   }
 
@@ -80,42 +86,42 @@ exports.tag = (0, styled_components_1.css) `
   .tag-processing,
   .tag-post {
     --tag-color: var(--color-info-active); // @presenter Color
-    --tag-background-color: none; // @presenter Color
+    --tag-background-color: var(--color-info-bg); // @presenter Color
     --tag-border-color: var(--color-info-active); // @presenter Color
   }
 
   .tag-purple,
   .tag-head {
     --tag-color: var(--color-purple-7); // @presenter Color
-    --tag-background-color: none; // @presenter Color
+    --tag-background-color: var(--color-purple-1); // @presenter Color
     --tag-border-color: var(--color-purple-7); // @presenter Color
   }
 
   .tag-cyan,
   .tag-option {
     --tag-color: var(--color-cyan-7); // @presenter Color
-    --tag-background-color: none; // @presenter Color
+    --tag-background-color: var(--color-cyan-1); // @presenter Color
     --tag-border-color: var(--color-cyan-7); // @presenter Color
   }
 
   .tag-yellow,
   .tag-patch {
     --tag-color: var(--color-yellow-7); // @presenter Color
-    --tag-background-color: none; // @presenter Color
+    --tag-background-color: var(--color-yellow-1); // @presenter Color
     --tag-border-color: var(--color-yellow-7); // @presenter Color
   }
 
   .tag-geekblue,
   .tag-link {
     --tag-color: var(--color-geekblue-7); // @presenter Color
-    --tag-background-color: none; // @presenter Color
+    --tag-background-color: var(--color-geekblue-1); // @presenter Color
     --tag-border-color: var(--color-geekblue-7); // @presenter Color
   }
 
   .tag-magneta,
   .tag-hook {
     --tag-color: var(--color-magneta-7); // @presenter Color
-    --tag-background-color: none; // @presenter Color
+    --tag-background-color: var(--color-magneta-1); // @presenter Color
     --tag-border-color: var(--color-magneta-7); // @presenter Color
   }
 

package/lib/config.d.ts

@@ -458,6 +458,10 @@ declare const catalogSchema: {
         readonly groupByFirstFilter: {
             readonly type: "boolean";
         };
+        readonly filterValuesCasing: {
+            readonly type: "string";
+            readonly enum: readonly ["sentence", "original", "lowercase", "uppercase"];
+        };
         readonly items: {
             readonly type: "array";
             readonly items: {
@@ -870,6 +874,15 @@ export declare const themeConfigSchema: {
                 readonly copyrightText: {
                     readonly type: "string";
                 };
+                readonly logo: {
+                    readonly type: "object";
+                    readonly properties: {
+                        readonly hide: {
+                            readonly type: "boolean";
+                        };
+                    };
+                    readonly additionalProperties: false;
+                };
             };
             readonly additionalProperties: false;
         };
@@ -1749,6 +1762,10 @@ export declare const themeConfigSchema: {
                         readonly groupByFirstFilter: {
                             readonly type: "boolean";
                         };
+                        readonly filterValuesCasing: {
+                            readonly type: "string";
+                            readonly enum: readonly ["sentence", "original", "lowercase", "uppercase"];
+                        };
                         readonly items: {
                             readonly type: "array";
                             readonly items: {
@@ -2203,6 +2220,15 @@ export declare const productThemeOverrideSchema: {
                 readonly copyrightText: {
                     readonly type: "string";
                 };
+                readonly logo: {
+                    readonly type: "object";
+                    readonly properties: {
+                        readonly hide: {
+                            readonly type: "boolean";
+                        };
+                    };
+                    readonly additionalProperties: false;
+                };
             };
             readonly additionalProperties: false;
         };
@@ -2394,4 +2420,9 @@ export type GoogleAnalyticsConfig = FromSchema<typeof googleAnalyticsConfigSchem
 export type CatalogConfig = FromSchema<typeof catalogSchema>;
 export type CatalogFilterConfig = FromSchema<typeof catalogFilterSchema>;
 export type ScorecardConfig = FromSchema<typeof scorecardConfigSchema>;
+export declare enum ScorecardStatus {
+    BelowMinimum = "Below minimum",
+    Highest = "Highest",
+    Minimum = "Minimum"
+}
 export {};

package/lib/config.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.productThemeOverrideSchema = exports.themeConfigSchema = void 0;
+exports.ScorecardStatus = exports.productThemeOverrideSchema = exports.themeConfigSchema = void 0;
 const logoConfigSchema = {
     type: 'object',
     properties: {
@@ -332,6 +332,10 @@ const catalogSchema = {
         slug: { type: 'string' },
         filters: { type: 'array', items: catalogFilterSchema },
         groupByFirstFilter: { type: 'boolean' },
+        filterValuesCasing: {
+            type: 'string',
+            enum: ['sentence', 'original', 'lowercase', 'uppercase'],
+        },
         items: navItemsSchema,
         requiredPermission: { type: 'string' },
         separateVersions: { type: 'boolean' },
@@ -367,7 +371,7 @@ exports.themeConfigSchema = {
         },
         footer: {
             type: 'object',
-            properties: Object.assign({ items: navItemsSchema, copyrightText: { type: 'string' } }, hideConfigSchema.properties),
+            properties: Object.assign({ items: navItemsSchema, copyrightText: { type: 'string' }, logo: hideConfigSchema }, hideConfigSchema.properties),
             additionalProperties: false,
         },
         sidebar: {
@@ -585,4 +589,10 @@ exports.productThemeOverrideSchema = {
     additionalProperties: true,
     default: {},
 };
+var ScorecardStatus;
+(function (ScorecardStatus) {
+    ScorecardStatus["BelowMinimum"] = "Below minimum";
+    ScorecardStatus["Highest"] = "Highest";
+    ScorecardStatus["Minimum"] = "Minimum";
+})(ScorecardStatus = exports.ScorecardStatus || (exports.ScorecardStatus = {}));
 //# sourceMappingURL=config.js.map

package/lib/globalStyle.js

@@ -88,16 +88,16 @@ const themeColors = (0, styled_components_1.css) `
   --color-purple-9: #22075e;
   --color-purple-10: #120338;
 
-  --color-magneta-1: #fff0f6;
-  --color-magneta-2: #ffd6e7;
-  --color-magneta-3: #ffadd2;
-  --color-magneta-4: #ff85c0;
-  --color-magneta-5: #f759ab;
-  --color-magneta-6: #eb2f96;
-  --color-magneta-7: #c41d7f;
-  --color-magneta-8: #9e1068;
-  --color-magneta-9: #780650;
-  --color-magneta-10: #520339;
+  --color-magenta-1: #fff0f6;
+  --color-magenta-2: #ffd6e7;
+  --color-magenta-3: #ffadd2;
+  --color-magenta-4: #ff85c0;
+  --color-magenta-5: #f759ab;
+  --color-magenta-6: #eb2f96;
+  --color-magenta-7: #c41d7f;
+  --color-magenta-8: #9e1068;
+  --color-magenta-9: #780650;
+  --color-magenta-10: #520339;
 
   --color-cyan-1: #e6fffb;
   --color-cyan-2: #b5f5ec;
@@ -154,16 +154,16 @@ const themeColors = (0, styled_components_1.css) `
   --color-primary-text: #161087;
   --color-primary-text-active: #0d086e;
 
-  --color-success-bg: var(--color-green-1);
-  --color-success-bg-hover: var(--color-green-2);
-  --color-success-border: var(--color-green-3);
-  --color-success-border-hover: var(--color-green-4);
-  --color-success-hover: var(--color-green-5);
-  --color-success-base: var(--color-green-6);
-  --color-success-active: var(--color-green-7);
-  --color-success-text-hover: var(--color-green-8);
-  --color-success-text: var(--color-green-9);
-  --color-success-text-active: var(--color-green-10);
+  --color-success-bg: var(--color-cyan-1);
+  --color-success-bg-hover: var(--color-cyan-2);
+  --color-success-border: var(--color-cyan-3);
+  --color-success-border-hover: var(--color-cyan-4);
+  --color-success-hover: var(--color-cyan-5);
+  --color-success-base: var(--color-cyan-6);
+  --color-success-active: var(--color-cyan-7);
+  --color-success-text-hover: var(--color-cyan-8);
+  --color-success-text: var(--color-cyan-9);
+  --color-success-text-active: var(--color-cyan-10);
 
   --color-warning-bg: var(--color-gold-1);
   --color-warning-bg-hover: var(--color-gold-2);
@@ -178,7 +178,7 @@ const themeColors = (0, styled_components_1.css) `
 
   --color-error-bg: var(--color-red-1);
   --color-error-bg-hover: var(--color-red-2);
-  --color-error-border: var(--color-red-3);
+  --color-error-border: var(--color-red-7);
   --color-error-border-hover: var(--color-red-4);
   --color-error-hover: var(--color-red-5);
   --color-error-base: var(--color-red-6);
@@ -217,6 +217,7 @@ const themeColors = (0, styled_components_1.css) `
   --bg-base: #ffffff; // The default elevation is the baseline with respect to all other layers.
   --bg-sunken: #f1f1f1; // Sunken is the lowest elevation available.
   --bg-raised: #fafafa; // Cards, elements, inputs
+  --bg-raised-light: #fafafa; // Always light
   --bg-overlay: #f2f2f2; // Overlay is the highest elevation available. Use for hovers
   --bg-modal-overlay: #f2f2f2c2; // Overlay is the highest elevation available. Use for hovers
 
@@ -934,6 +935,7 @@ exports.styles = (0, styled_components_1.css) `
     ${loadProgressBar}
     ${NavbarLogo_1.logo}
     ${Markdown_1.markdown}
+    ${Markdown_1.mermaid}
     ${Menu_1.menu}
     ${Menu_1.mobileMenu}
     ${modal}

package/lib/hooks/useMobileMenu.js

@@ -1,18 +1,17 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMobileMenu = void 0;
 const react_1 = require("react");
 const react_router_dom_1 = require("react-router-dom");
+const useModalScrollLock_1 = __importDefault(require("../hooks/useModalScrollLock"));
 function useMobileMenu(initialState = false) {
     const location = (0, react_router_dom_1.useLocation)();
     const [isOpen, setIsOpen] = (0, react_1.useState)(initialState);
     (0, react_1.useEffect)(() => setIsOpen(false), [location.pathname, location.hash]);
-    (0, react_1.useEffect)(() => {
-        if (isOpen)
-            document.body.classList.add('overflow-hidden');
-        else
-            document.body.classList.remove('overflow-hidden');
-    }, [isOpen]);
+    (0, useModalScrollLock_1.default)(isOpen);
     return [isOpen, setIsOpen];
 }
 exports.useMobileMenu = useMobileMenu;

package/lib/hooks/useModalScrollLock.d.ts

@@ -0,0 +1 @@
+export default function useModalScrollLock(isOpen: boolean): () => void;

package/lib/hooks/useModalScrollLock.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+function useModalScrollLock(isOpen) {
+    (0, react_1.useEffect)(() => {
+        if (isOpen)
+            document.body.classList.add('overflow-hidden');
+        else
+            document.body.classList.remove('overflow-hidden');
+    }, [isOpen]);
+    return () => {
+        document.body.classList.remove('overflow-hidden');
+    };
+}
+exports.default = useModalScrollLock;
+//# sourceMappingURL=useModalScrollLock.js.map

package/lib/icons/AlertIcon/AlertIcon.js

@@ -37,13 +37,8 @@ function Icon({ type, className }) {
 exports.AlertIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
     'data-component-name': 'icons/AlertIcon/AlertIcon',
 })) `
-  position: absolute;
-  left: var(--admonition-padding-horizontal);
-  top: 50%;
-  transform: translateY(-50%);
   width: var(--admonition-icon-size);
   height: var(--admonition-icon-size);
-  margin-right: var(--admonition-padding-horizontal);
   flex-shrink: 0;
 
   fill: ${({ type }) => `var(--admonition-${type}-icon-color)`};

package/lib/types/portal/src/shared/types/catalog.d.ts

@@ -1,4 +1,4 @@
-import { CatalogFilterConfig } from "../../../../../config";
+import { CatalogFilterConfig, ScorecardStatus } from '../../../../../index.js';
 export type FilteredCatalog = {
     groups: {
         title: string;
@@ -31,5 +31,9 @@ export type CatalogItem = {
     description?: string;
     image?: string;
     docsLink?: string;
+    scorecardStatus?: ScorecardStatus;
+    scorecardLevel?: string;
+    scoreCardSlug?: string;
+    tags?: unknown[];
     [k: string]: unknown;
 };

package/lib/ui/Highlight.d.ts

@@ -2,4 +2,4 @@ import * as React from 'react';
 export declare const HighlightContext: React.Context<string[]>;
 export declare function Highlight(props: {
     children: React.ReactChildren | string;
-}): JSX.Element;
+}): JSX.Element | null;

package/lib/ui/Highlight.js

@@ -31,7 +31,7 @@ function Highlight(props) {
     const { children } = props;
     const searchWords = React.useContext(exports.HighlightContext);
     if (!searchWords.length) {
-        return React.createElement(React.Fragment, null, "children") || null;
+        return children ? React.createElement(React.Fragment, null, children) : null;
     }
     function highlight(str, childIdx = 0) {
         const chunks = (0, highlight_words_core_1.findAll)({

package/lib/ui/darkColors.js

@@ -65,16 +65,16 @@ exports.darkMode = (0, styled_components_1.css) `
   --color-purple-9: #cda8f0;
   --color-purple-10: #ebd7fa;
 
-  --color-magneta-1: #291321;
-  --color-magneta-2: #40162f;
-  --color-magneta-3: #551c3b;
-  --color-magneta-4: #75204f;
-  --color-magneta-5: #a02669;
-  --color-magneta-6: #cb2b83;
-  --color-magneta-7: #e0529c;
-  --color-magneta-8: #f37fb7;
-  --color-magneta-9: #f8a8cc;
-  --color-magneta-10: #fad2e3;
+  --color-magenta-1: #291321;
+  --color-magenta-2: #40162f;
+  --color-magenta-3: #551c3b;
+  --color-magenta-4: #75204f;
+  --color-magenta-5: #a02669;
+  --color-magenta-6: #cb2b83;
+  --color-magenta-7: #e0529c;
+  --color-magenta-8: #f37fb7;
+  --color-magenta-9: #f8a8cc;
+  --color-magenta-10: #fad2e3;
 
   --color-cyan-1: #112123;
   --color-cyan-2: #113536;
@@ -131,35 +131,35 @@ exports.darkMode = (0, styled_components_1.css) `
   --color-primary-text: #d6dfff;
   --color-primary-text-active: #ebf0ff;
 
-  --color-success-bg: var(--color-green-1);
-  --color-success-bg-hover: var(--color-green-2);
-  --color-success-border: var(--color-green-3);
-  --color-success-border-hover: var(--color-green-4);
-  --color-success-hover: var(--color-green-7);
-  --color-success-base: var(--color-green-6);
-  --color-success-active: var(--color-green-5);
-  --color-success-text-hover: var(--color-green-8);
-  --color-success-text: var(--color-green-9);
-  --color-success-text-active: var(--color-green-10);
-
-  --color-warning-bg: var(--color-gold-1);
+  --color-success-bg: var(--color-cyan-3);
+  --color-success-bg-hover: var(--color-cyan-2);
+  --color-success-border: var(--color-cyan-3);
+  --color-success-border-hover: var(--color-cyan-4);
+  --color-success-hover: var(--color-cyan-7);
+  --color-success-base: var(--color-cyan-6);
+  --color-success-active: var(--color-cyan-7);
+  --color-success-text-hover: var(--color-cyan-8);
+  --color-success-text: var(--color-cyan-9);
+  --color-success-text-active: var(--color-cyan-10);
+
+  --color-warning-bg: var(--color-gold-3);
   --color-warning-bg-hover: var(--color-gold-2);
   --color-warning-border: var(--color-gold-3);
   --color-warning-border-hover: var(--color-gold-4);
   --color-warning-hover: var(--color-gold-7);
   --color-warning-base: var(--color-gold-6);
-  --color-warning-active: var(--color-gold-5);
+  --color-warning-active: var(--color-gold-7);
   --color-warning-text-hover: var(--color-gold-8);
   --color-warning-text: var(--color-gold-9);
   --color-warning-text-active: var(--color-gold-10);
 
-  --color-error-bg: var(--color-red-1);
+  --color-error-bg: var(--color-red-3);
   --color-error-bg-hover: var(--color-red-2);
   --color-error-border: var(--color-red-3);
   --color-error-border-hover: var(--color-red-4);
   --color-error-hover: var(--color-red-7);
   --color-error-base: var(--color-red-6);
-  --color-error-active: var(--color-red-5);
+  --color-error-active: var(--color-red-7);
   --color-error-text-hover: var(--color-red-8);
   --color-error-text: var(--color-red-9);
   --color-error-text-active: var(--color-red-10);
@@ -170,7 +170,7 @@ exports.darkMode = (0, styled_components_1.css) `
   --color-info-border-hover: var(--color-blue-4);
   --color-info-hover: var(--color-blue-7);
   --color-info-base: var(--color-blue-6);
-  --color-info-active: var(--color-blue-5);
+  --color-info-active: var(--color-blue-7);
   --color-info-text-hover: var(--color-blue-8);
   --color-info-text: var(--color-blue-9);
   --color-info-text-active: var(--color-blue-10);

package/lib/utils/css-variables.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCssColorVariable = void 0;
-const getCssColorVariable = (color, defaultValue = 'inherit') => (color === null || color === void 0 ? void 0 : color.startsWith('--')) ? `var(${color})` : color || defaultValue;
+const getCssColorVariable = (color, defaultValue = 'currentColor') => ((color === null || color === void 0 ? void 0 : color.startsWith('--')) ? `var(${color})` : color || defaultValue);
 exports.getCssColorVariable = getCssColorVariable;
 //# sourceMappingURL=css-variables.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.18.3-patch.1",
+  "version": "0.18.3-patch.5",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

package/src/I18n/LanguagePicker.tsx

@@ -54,6 +54,7 @@ export const LanguagePicker = (props: LanguagePickerProps) => {
       alignment={props.alignment}
       icon={<LanguageIcon />}
       onlyIcon={props.onlyIcon}
+      withArrow={false}
     />
   );
 };

package/src/components/Catalog/Catalog.tsx

@@ -12,6 +12,7 @@ import { FilterContent } from '@theme/components/Filter/FilterContent';
 import { FilterPopover } from '@theme/components/Filter/FilterPopover';
 import { Button } from '@theme/components/Button';
 import { PlusIcon } from '@theme/icons/PlusIcon';
+import useModalScrollLock from '@theme/hooks/useModalScrollLock';
 
 import { useCatalog } from './useCatalog';
 
@@ -32,6 +33,8 @@ export default function Catalog(props: {
   };
   const { translate } = useTranslate();
 
+  useModalScrollLock(isAddingFilter);
+
   return (
     <HighlightContext.Provider value={[filterTerm]}>
       <CatalogPageWrapper>
@@ -51,9 +54,14 @@ export default function Catalog(props: {
           filters={filters}
           filterTerm={filterTerm}
           isMobile={false}
+          filterValuesCasing={catalogConfig.filterValuesCasing}
         />
         {isAddingFilter && (
-          <FilterPopover setIsAddingFilter={setIsAddingFilter} filters={filters} />
+          <FilterPopover
+            setIsAddingFilter={setIsAddingFilter}
+            filters={filters}
+            filterValuesCasing={catalogConfig.filterValuesCasing}
+          />
         )}
         <CatalogPageContent>
           <CatalogPageDescriptionWrapper>
@@ -123,11 +131,11 @@ export const FilterControls = styled.div`
   background: var(--bg-raised);
 `;
 
-const CatalogPageContent = styled.main`
+export const CatalogPageContent = styled.main`
   flex: 1;
   padding: var(--mobile-catalog-page-padding);
 
-  ${({ theme }) => theme.mediaQueries.small} {
+  ${({ theme }) => theme.mediaQueries.medium} {
     padding: var(--catalog-page-padding);
   }
 `;
@@ -139,7 +147,7 @@ const CatalogCards = styled.div`
   margin: var(--catalog-cards-group-margin);
 `;
 
-const CatalogTitle = styled(H2)`
+export const CatalogTitle = styled(H2)`
   color: var(--catalog-title-text-color);
   font-weight: var(--catalog-title-font-weight);
   font-size: var(--catalog-title-font-size);
@@ -149,14 +157,14 @@ const CatalogTitle = styled(H2)`
   }
 `;
 
-const CatalogDescription = styled.p`
+export const CatalogDescription = styled.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.div`
+export const CatalogPageWrapper = styled.div`
   --sidebar-width: var(--catalog-sidebar-width, 285px);
 
   display: flex;
@@ -182,7 +190,7 @@ const CatalogPageWrapper = styled.div`
     font-weight: var(--link-font-weight);
   }
 
-  ${({ theme }) => theme.mediaQueries.small} {
+  ${({ theme }) => theme.mediaQueries.medium} {
     flex-direction: row;
   }
 `;
@@ -192,7 +200,7 @@ const FilterTagsWrapper = styled.div.attrs({ 'data-cy': 'Catalog/FilterTags' })`
   display: flex;
   overflow-x: scroll;
 
-  ${({ theme }) => theme.mediaQueries.small} {
+  ${({ theme }) => theme.mediaQueries.medium} {
     display: none;
   }
 
@@ -215,10 +223,10 @@ const FilterTagsWrapper = styled.div.attrs({ 'data-cy': 'Catalog/FilterTags' })`
   }
 `;
 
-const CatalogPageDescriptionWrapper = styled.div`
+export const CatalogPageDescriptionWrapper = styled.div`
   display: none;
 
-  ${({ theme }) => theme.mediaQueries.small} {
+  ${({ theme }) => theme.mediaQueries.medium} {
     display: block;
   }
 `;