@redocly/theme 0.18.3-patch.0 → 0.18.3

package/lib/I18n/LanguagePicker.d.ts

@@ -1,9 +1,4 @@
 /// <reference types="react" />
-interface LanguagePickerProps {
+export declare const LanguagePicker: (props: {
     onChangeLanguage: (newLang: string) => void;
-    onlyIcon?: boolean;
-    placement?: 'top' | 'bottom';
-    alignment?: 'start' | 'end';
-}
-export declare const LanguagePicker: (props: LanguagePickerProps) => JSX.Element | null;
-export {};
+}) => JSX.Element | null;

package/lib/I18n/LanguagePicker.js

@@ -10,7 +10,6 @@ const utils_1 = require("../mocks/utils");
 const usePreloadHistory_1 = require("../mocks/usePreloadHistory");
 const hooks_1 = require("../mocks/hooks");
 const Select_1 = require("../components/Select");
-const icons_1 = require("../icons");
 const LanguagePicker = (props) => {
     const { currentLocale, locales, defaultLocale } = (0, hooks_1.useI18nConfig)();
     const history = (0, usePreloadHistory_1.usePreloadHistory)();
@@ -28,7 +27,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" });
 };
 exports.LanguagePicker = LanguagePicker;
 const LanguageSelect = (0, styled_components_1.default)(Select_1.Select).attrs(() => ({
@@ -42,19 +41,12 @@ const LanguageSelect = (0, styled_components_1.default)(Select_1.Select).attrs((
   line-height: var(--language-picker-line-height);
   border-radius: var(--language-picker-border-radius);
   color: var(--language-picker-text-color);
-  background-color: var(--language-picker-background-color);
 
   ${Select_1.SelectInput} {
-    min-height: var(--language-picker-min-height);
-    color: var(--language-picker-text-color);
-    border: 1px solid var(--language-picker-border-color);
+    color: var(--navbar-text-color);
     border-radius: var(--language-picker-input-border-radius);
     padding: var(--language-picker-input-padding-vertical)
       var(--language-picker-input-padding-horizontal);
-
-    :hover {
-      border-color: var(--language-picker-hover-border-color);
-    }
   }
 
   ${Select_1.SelectList} {
@@ -85,7 +77,7 @@ const LanguageSelect = (0, styled_components_1.default)(Select_1.Select).attrs((
 
   :hover {
     text-decoration: var(--navbar-item-hover-text-decoration);
-    background: var(--language-picker-hover-background-color);
+    background: var(--navbar-item-hover-background-color);
   }
 `;
 const LanguageItem = styled_components_1.default.div ``;

package/lib/I18n/index.d.ts

@@ -1,2 +1 @@
 export { LanguagePicker } from '../I18n/LanguagePicker';
-export * from '../I18n/styledVariables';

package/lib/I18n/index.js

@@ -1,21 +1,6 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LanguagePicker = void 0;
 var LanguagePicker_1 = require("../I18n/LanguagePicker");
 Object.defineProperty(exports, "LanguagePicker", { enumerable: true, get: function () { return LanguagePicker_1.LanguagePicker; } });
-__exportStar(require("../I18n/styledVariables"), exports);
 //# sourceMappingURL=index.js.map

package/lib/components/Breadcrumbs/Breadcrumb.d.ts

@@ -3,4 +3,5 @@ export declare const Breadcrumb: (props: {
     label: string;
     link?: string;
     isActive: boolean;
+    onClick?: () => void;
 }) => JSX.Element;

package/lib/components/Breadcrumbs/Breadcrumb.js

@@ -8,8 +8,8 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Link_1 = require("../../mocks/Link");
 const Breadcrumb = (props) => {
-    const { label, link, isActive } = props;
-    return (react_1.default.createElement(BreadcrumbWrapper, { "data-component-name": "Breadcrumbs/Breadcrumb", isLink: link != null, isActive: isActive }, link ? (react_1.default.createElement(BreadcrumbLink, { to: link }, label)) : (react_1.default.createElement(BreadcrumbText, null, label))));
+    const { label, link, isActive, onClick } = props;
+    return (react_1.default.createElement(BreadcrumbWrapper, { "data-component-name": "Breadcrumbs/Breadcrumb", isLink: link != null, isActive: isActive, onClick: onClick }, link ? (react_1.default.createElement(BreadcrumbLink, { to: link }, label)) : (react_1.default.createElement(BreadcrumbText, null, label))));
 };
 exports.Breadcrumb = Breadcrumb;
 const BreadcrumbText = styled_components_1.default.div `
@@ -36,10 +36,9 @@ const BreadcrumbWrapper = styled_components_1.default.div `
 `;
 const BreadcrumbLink = (0, styled_components_1.default)(Link_1.Link) `
   text-decoration: none;
-  color: var(--breadcrumbs-text-color);
 
   &:visited {
-    color: var(--breadcrumbs-text-color);
+    color: inherit;
   }
 `;
 //# sourceMappingURL=Breadcrumb.js.map

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -7,6 +7,7 @@ exports.Breadcrumbs = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const useBreadcrumbs_1 = require("../../mocks/Sidebar/useBreadcrumbs");
+const telemetry_1 = require("../../mocks/telemetry");
 const Breadcrumb_1 = require("./Breadcrumb");
 const Breadcrumbs = (props) => {
     const breadcrumbs = (0, useBreadcrumbs_1.useBreadcrumbs)();
@@ -16,7 +17,13 @@ const Breadcrumbs = (props) => {
     return (react_1.default.createElement(Container, { "data-component-name": "Breadcrumbs/Breadcrumbs", className: props.className }, breadcrumbs.map((breadcrumb, idx) => {
         const isLast = idx === breadcrumbs.length - 1;
         return (react_1.default.createElement(react_1.default.Fragment, { key: idx },
-            react_1.default.createElement(Breadcrumb_1.Breadcrumb, { link: breadcrumb.link, label: breadcrumb.label, isActive: isLast }),
+            react_1.default.createElement(Breadcrumb_1.Breadcrumb, { link: breadcrumb.link, label: breadcrumb.label, isActive: isLast, onClick: () => {
+                    telemetry_1.telemetry.send('breadcrumb_clicked', {
+                        link: breadcrumb.link,
+                        position: idx + 1,
+                        total_breadcrumbs: breadcrumbs.length,
+                    });
+                } }),
             isLast ? null : react_1.default.createElement("div", null, "/")));
     })));
 };
@@ -30,7 +37,7 @@ const Container = styled_components_1.default.div `
   flex-wrap: wrap;
 
   > div {
-    padding: var(--breadcrumbs-padding);
+    padding-right: var(--breadcrumbs-padding-horizontal);
   }
 
   @media print {

package/lib/components/Breadcrumbs/index.d.ts

@@ -1,3 +1,2 @@
 export * from '../../components/Breadcrumbs/Breadcrumbs';
 export * from '../../components/Breadcrumbs/Breadcrumb';
-export * from '../../components/Breadcrumbs/styledVariables';

package/lib/components/Breadcrumbs/index.js

@@ -16,5 +16,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../../components/Breadcrumbs/Breadcrumbs"), exports);
 __exportStar(require("../../components/Breadcrumbs/Breadcrumb"), exports);
-__exportStar(require("../../components/Breadcrumbs/styledVariables"), exports);
 //# sourceMappingURL=index.js.map

package/lib/components/Button/Button.d.ts

@@ -1,10 +1,9 @@
 import React from 'react';
 import type { FlattenSimpleInterpolation } from 'styled-components';
-export type ButtonSize = 'default' | 'small' | 'large' | string;
-export type ButtonColor = 'default' | 'primary' | string;
-export type ButtonVariant = 'outlined' | 'contained' | 'text';
+export type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge' | string;
+export type ButtonColor = 'primary' | 'secondary' | 'default' | string;
+export type ButtonVariant = 'outlined' | 'contained';
 export interface ButtonProps {
-    children?: React.ReactNode;
     color?: ButtonColor;
     disabled?: boolean;
     blinking?: boolean;
@@ -13,8 +12,6 @@ export interface ButtonProps {
     size?: ButtonSize;
     extraClass?: string;
     to?: string;
-    icon?: JSX.Element;
-    title?: string;
     onClick?: (e?: any) => void;
 }
 export declare const baseButtonStyles: FlattenSimpleInterpolation;

package/lib/components/Button/Button.js

@@ -45,70 +45,79 @@ const getBlink = () => (0, styled_components_1.keyframes) `
     background-color: var(--button-active-background-color);
   }
 `;
-const getSize = (size = 'default') => (0, styled_components_1.css) `
+const getSize = (size = 'medium') => (0, styled_components_1.css) `
   font-size: var(--button-${size}-font-size);
   padding: var(--button-${size}-padding);
   min-width: var(--button-${size}-min-width);
 `;
 exports.baseButtonStyles = (0, styled_components_1.css) `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 5px;
   outline: none;
+  border: none;
+  border-radius: var(--button-border-radius);
+  font-weight: var(--button-font-weight);
+  font-size: 14px;
+  padding: 2px 20px;
   margin: var(--button-margin);
   cursor: pointer;
+  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
   line-height: 1;
 
-  color: var(--button-color);
-  background-color: var(--button-background-color);
-  border: var(--button-border-width) var(--button-border-style) var(--button-border-color);
-  border-radius: var(--button-border-radius);
-
-  font-size: var(--button-font-size);
   font-family: var(--button-font-family);
-  font-weight: var(--button-font-weight);
   box-shadow: var(--button-box-shadow);
 
   &:hover {
     box-shadow: var(--button-hover-box-shadow);
-    background-color: var(--button-hover-background-color);
-    border: var(--button-border-width) var(--button-border-style) var(--button-hover-border-color);
   }
 
   &:active {
     box-shadow: var(--button-active-box-shadow);
-    background-color: var(--button-active-background-color);
-    border: var(--button-border-width) var(--button-border-style) var(--button-active-border-color);
   }
 `;
-const StyledButtonLink = (0, styled_components_1.default)(Link_1.Link) `
-  text-decoration: none;
-`;
 const StyledButton = styled_components_1.default.button.attrs(({ color = 'default', extraClass, variant }) => ({
-    className: `button-${color}${variant ? ` button-${variant}` : ''}${extraClass ? ` ${extraClass}` : ''}`,
+    className: `button-color-${color}${variant ? ` button-variant-${variant}` : ''}${extraClass ? ` ${extraClass}` : ''}`,
     'data-component-name': 'Button/Button',
 })) `
+  text-decoration: none;
+  text-align: center;
+
   width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
 
   ${exports.baseButtonStyles}
 
   ${({ variant }) => variant === 'outlined'
     ? (0, styled_components_1.css) `
-          background-color: var(--button-background-color);
-        `
-    : variant === 'text'
-        ? (0, styled_components_1.css) `
-          border-color: transparent;
+          color: var(--button-background-color);
+          border: 2px solid var(--button-border-color);
           background-color: transparent;
-
           &:hover {
-            border-color: transparent;
+            color: var(--button-hover-background-color);
+            border: 2px solid var(--button-hover-border-color);
+          }
+
+          &:active {
+            color: var(--button-active-background-color);
+            border: 2px solid var(--button-active-border-color);
+          }
+
+          &:disabled {
+            color: var(--button-disabled-color);
             background-color: transparent;
-            box-shadow: none;
           }
         `
-        : ''};
+    : (0, styled_components_1.css) `
+          color: var(--button-color);
+          border: 2px solid var(--button-background-color);
+          background-color: var(--button-background-color);
+          &:hover {
+            border: 2px solid var(--button-hover-background-color);
+            background-color: var(--button-hover-background-color);
+          }
+
+          &:active {
+            border: 2px solid var(--button-active-background-color);
+            background-color: var(--button-active-background-color);
+          }
+        `};
 
   ${({ size }) => getSize(size)}
 
@@ -129,25 +138,18 @@ const StyledButton = styled_components_1.default.button.attrs(({ color = 'defaul
         cursor: default;
         color: var(--button-disabled-color);
         background-color: var(--button-disabled-background-color);
-        border-color: var(--button-disabled-border-color);
+        border-color: var(--button-disabled-background-color);
         pointer-events: none;
       }
     `}
 `;
-const StyledIcon = styled_components_1.default.span `
-  display: block;
-  height: var(--button-icon-height);
-  width: var(--button-icon-width);
-`;
 const ButtonComponent = (props) => {
-    const button = (react_1.default.createElement(StyledButton, Object.assign({}, props),
-        props.icon ? react_1.default.createElement(StyledIcon, null, props.icon) : null,
-        props.children));
     if (props.to) {
-        return react_1.default.createElement(StyledButtonLink, { to: props.to }, button);
+        return (react_1.default.createElement(Link_1.Link, { to: props.to },
+            react_1.default.createElement(StyledButton, Object.assign({}, props))));
     }
     else {
-        return button;
+        return react_1.default.createElement(StyledButton, Object.assign({}, props));
     }
 };
 exports.Button = (0, styled_components_1.default)(ButtonComponent) ``;

package/lib/components/Button/index.d.ts

@@ -1,2 +1 @@
 export * from '../../components/Button/Button';
-export * from '../../components/Button/styledVariables';

package/lib/components/Button/index.js

@@ -15,5 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../../components/Button/Button"), exports);
-__exportStar(require("../../components/Button/styledVariables"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -6,4 +6,3 @@ export default function Catalog(props: {
         catalogConfig: CatalogConfig;
     };
 }): JSX.Element;
-export declare const FilterControls: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/Catalog/Catalog.js

@@ -3,121 +3,116 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterControls = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Highlight_1 = require("../../ui/Highlight");
+const Button_1 = require("../../components/Button");
+const Filter_1 = require("../../components/Filter");
 const H2_1 = require("../../components/Typography/H2");
+const H3_1 = require("../../components/Typography/H3");
 const CatalogCard_1 = require("../../components/Catalog/CatalogCard");
 const index_1 = require("../../mocks/hooks/index");
-const FilterTags_1 = require("../../components/Filter/FilterTags");
-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 useCatalog_1 = require("./useCatalog");
 function Catalog(props) {
     const { catalogConfig } = props.pageProps;
     const items = (0, index_1.usePageSharedData)('catalog');
     const { filterTerm, setFilterTerm, groups, filters } = (0, useCatalog_1.useCatalog)(items, catalogConfig);
-    const [isAddingFilter, setIsAddingFilter] = react_1.default.useState(false);
+    const [isFilterPanelFocused, setIsFilterPanelFocused] = react_1.default.useState(false);
+    const { translate } = (0, index_1.useTranslate)();
     const translationKeys = {
-        addFilter: 'theme.catalog.filters.select.addFilter',
+        placeholder: 'theme.catalog.filters.placeholder',
+        applyFilter: 'theme.catalog.filters.apply',
     };
-    const { translate } = (0, index_1.useTranslate)();
     return (react_1.default.createElement(Highlight_1.HighlightContext.Provider, { value: [filterTerm] },
         react_1.default.createElement(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, setFilterTerm: setFilterTerm, filters: filters, filterTerm: filterTerm })),
+            react_1.default.createElement(CatalogPageSidebar, { isActiveInMobileMode: isFilterPanelFocused },
+                react_1.default.createElement(StyledInput, { placeholder: translate(translationKeys.placeholder, 'Filter...'), value: filterTerm, onFocus: () => setIsFilterPanelFocused(true), onChange: (e) => setFilterTerm(e.target.value) }),
+                filters.map((filter, idx) => (react_1.default.createElement(Filter_1.Filter, { filter: filter, key: filter.property + '-' + idx }))),
+                react_1.default.createElement(MobileStickyApplyFilters, null,
+                    react_1.default.createElement(Button_1.Button, { "data-translation-key": translationKeys.applyFilter, color: "secondary", onClick: () => setIsFilterPanelFocused(false) }, translate(translationKeys.applyFilter, 'Apply filters')))),
             react_1.default.createElement(CatalogPageContent, null,
-                react_1.default.createElement(CatalogPageDescriptionWrapper, null,
-                    catalogConfig.title ? (react_1.default.createElement(CatalogTitle, null,
-                        ' ',
-                        translate(catalogConfig.titleTranslationKey, catalogConfig.title),
-                        ' ')) : null,
-                    catalogConfig.description ? (react_1.default.createElement(CatalogDescription, null,
-                        ' ',
-                        translate(catalogConfig.descriptionTranslationKey, catalogConfig.description),
-                        ' ')) : null),
+                catalogConfig.title ? (react_1.default.createElement(CatalogTitle, null,
+                    ' ',
+                    translate(catalogConfig.titleTranslationKey, catalogConfig.title),
+                    ' ')) : null,
+                catalogConfig.description ? (react_1.default.createElement(CatalogDescription, null,
+                    ' ',
+                    translate(catalogConfig.descriptionTranslationKey, catalogConfig.description),
+                    ' ')) : null,
                 groups.map((group) => (react_1.default.createElement(react_1.default.Fragment, { key: group.title },
-                    react_1.default.createElement(CatalogSeparator, null,
-                        react_1.default.createElement(CatalogSeparatorLabel, null, group.title),
-                        react_1.default.createElement(CatalogSeparatorCount, null, group.items.length)),
+                    react_1.default.createElement(H3_1.H3, null,
+                        group.title,
+                        " (",
+                        group.items.length,
+                        ")"),
                     react_1.default.createElement(CatalogCards, null, group.items.map((item) => (react_1.default.createElement(CatalogCard_1.CatalogCard, { item: item, key: item.link })))))))))));
 }
 exports.default = Catalog;
-const CatalogSeparator = styled_components_1.default.div `
-  display: flex;
-  align-items: center;
-  color: var(--catalog-separator-color);
-  font-size: var(--catalog-separator-font-size);
-  font-weight: var(--catalog-separator-font-weight);
-  border-top: 1px solid var(--catalog-separator-border-color);
-  margin: var(--catalog-separator-margin);
-  padding: var(--catalog-separator-padding);
-`;
-const CatalogSeparatorLabel = styled_components_1.default.div `
-  margin: var(--catalog-separator-label-margin);
-`;
-const CatalogSeparatorCount = styled_components_1.default.div `
-  display: flex;
-  height: var(--catalog-separator-count-height);
-  padding: var(--catalog-separator-count-padding);
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--catalog-separator-count-border-radius);
-  border: 1px solid var(--catalog-separator-count-border-color);
-  background: var(--catalog-separator-count-background);
+const MobileStickyApplyFilters = styled_components_1.default.div `
+  position: fixed;
+  display: none;
+  background-color: var(--sidebar-background-color);
+  bottom: 0;
+  padding: 16px 30px;
+  left: 0px;
+  right: 0px;
+
+  ${Button_1.Button} {
+    width: 100%;
+    margin: 0;
+  }
 `;
-exports.FilterControls = styled_components_1.default.div `
-  padding: var(--mobile-catalog-filter-padding-vertical)
-    var(--mobile-catalog-filter-padding-horizontal);
-  border-bottom: 1px solid var(--border-secondary);
-  background: var(--bg-raised);
+const CatalogPageSidebar = styled_components_1.default.aside `
+  width: var(--sidebar-width);
+  border-right: 1px solid var(--sidebar-border-color);
+  padding: 20px 30px;
+  position: sticky;
+  top: var(--navbar-height);
+  height: calc(100vh - var(--navbar-height));
+  overflow: auto;
+
+  @media screen and (max-width: 767px) {
+    transition: height 0.2s ease-in-out;
+    width: 100%;
+    ${({ isActiveInMobileMode }) => isActiveInMobileMode ? 'padding-bottom: 66px;' : 'height: 76px;'};
+    background-color: var(--sidebar-background-color);
+    border-bottom: 1px solid var(--sidebar-border-color);
+    z-index: var(--z-index-surface);
+
+    ${MobileStickyApplyFilters} {
+      display: ${({ isActiveInMobileMode }) => (isActiveInMobileMode ? 'block' : 'none')};
+    }
+  }
 `;
 const CatalogPageContent = styled_components_1.default.main `
   flex: 1;
-  padding: var(--mobile-catalog-page-padding);
-
-  ${({ theme }) => theme.mediaQueries.small} {
-    padding: var(--catalog-page-padding);
-  }
+  padding: 32px;
 `;
 const CatalogCards = styled_components_1.default.div `
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(var(--api-catalog-card-min-width), 1fr));
   gap: 32px;
-  margin: var(--catalog-cards-group-margin);
 `;
 const 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);
-
   && {
     margin: 0;
   }
 `;
 const 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;
+  margin: 16px 0 32px 0;
+  font-size: 16px;
+  color: var(--text-color-secondary);
 `;
 const CatalogPageWrapper = styled_components_1.default.div `
   --sidebar-width: var(--catalog-sidebar-width, 300px);
 
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
 
   font-weight: var(--font-weight-regular);
   padding: 0;
 
-  color: var(--text-secondary);
+  color: var(--text-color);
   font-size: var(--font-size-base);
   font-family: var(--font-family-base);
   line-height: var(--line-height-base);
@@ -126,7 +121,7 @@ const CatalogPageWrapper = styled_components_1.default.div `
     border: 0;
     width: calc(100% + 48px);
     margin: auto -24px 0 -24px;
-    border-top: 1px solid var(--border-primary);
+    border-top: 1px solid var(--border-color);
   }
   a:not([role='button']) {
     text-decoration: none;
@@ -134,42 +129,44 @@ const CatalogPageWrapper = styled_components_1.default.div `
     font-weight: var(--link-font-weight);
   }
 
-  ${({ theme }) => theme.mediaQueries.small} {
-    flex-direction: row;
+  @media screen and (max-width: 767px) {
+    flex-direction: column;
   }
 `;
-const FilterTagsWrapper = styled_components_1.default.div `
-  padding: var(--filter-tags-wrapper-padding);
-  display: flex;
-  overflow-x: scroll;
+// TODO: merge this input with the input from reference docs
+// the on in ref docs is dark, needs separate variables most likely
+const StyledInput = styled_components_1.default.input `
+  border: 1px solid rgba(0, 0, 0, 0.23);
+  min-width: 200px;
+  outline-color: var(--color-primary-500);
+  width: 100%;
 
-  ${({ theme }) => theme.mediaQueries.small} {
-    display: none;
-  }
+  outline: none;
+  padding: var(--input-padding);
+  border-radius: var(--input-border-radius);
+  background-color: var(--input-background-color);
+  color: var(--text-color);
+  font-family: var(--input-font-family);
+  font-size: var(--input-font-size);
+  line-height: var(--input-line-height);
 
-  ${Button_1.Button} {
-    margin: var(--filter-add-button-margin);
-    padding: var(--filter-add-button-padding);
-    font-size: var(--filter-add-button-font-size);
-    font-weight: var(--filter-add-button-font-weight);
-    color: var(--text-secondary);
-    display: flex;
-    white-space: nowrap;
+  &::placeholder {
+    opacity: 0.6;
+    color: var(--text-color);
+  }
 
-    svg {
-      fill: var(--text-primary);
-    }
+  &:hover {
+    color: var(--text-color);
+    border: 1px solid rgba(0, 0, 0, 0.23);
+  }
 
-    &:hover {
-      color: var(--text-primary);
-    }
+  &:focus {
+    color: var(--text-color);
+    border: 1px solid rgba(0, 0, 0, 0.23);
   }
-`;
-const CatalogPageDescriptionWrapper = styled_components_1.default.div `
-  display: none;
 
-  ${({ theme }) => theme.mediaQueries.small} {
-    display: block;
+  &:-webkit-autofill {
+    background-color: var(--input-background-color);
   }
 `;
 //# sourceMappingURL=Catalog.js.map