@redocly/theme 0.70.0-next.9 → 0.70.0

package/lib/components/Catalog/CatalogFilter/CatalogFilterSelect.js

@@ -0,0 +1,127 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogFilterSelect = CatalogFilterSelect;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const FilterOption_1 = require("../../../components/Filter/FilterOption");
+const FilterOptionLabel_1 = require("../../../components/Filter/FilterOptionLabel");
+const Select_1 = require("../../../components/Select/Select");
+const CounterTag_1 = require("../../../components/Tags/CounterTag");
+const utils_1 = require("../../../core/utils");
+const hooks_1 = require("../../../core/hooks");
+const Accordion_1 = require("../../../components/Accordion/Accordion");
+function CatalogFilterSelect({ filter, filterValuesCasing, showCounter = true, className, }) {
+    var _a;
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const [isExpanded, setIsExpanded] = (0, react_1.useState)(false);
+    const selectedCount = (0, react_1.useMemo)(() => {
+        var _a;
+        if (filter.selectedOptions instanceof Set) {
+            const firstValue = (_a = filter.selectedOptions.values().next()) === null || _a === void 0 ? void 0 : _a.value;
+            return firstValue && firstValue !== '' ? 1 : 0;
+        }
+        return 0;
+    }, [filter.selectedOptions]);
+    let selectOptions = [];
+    const defaultOptionCount = filter.options.reduce((acc, option) => acc + option.count, 0);
+    selectOptions = [
+        {
+            value: '',
+            element: (react_1.default.createElement(FilterOption_1.FilterOption, { key: "all", onClick: () => filter.selectOption('') },
+                react_1.default.createElement(FilterOptionLabel_1.FilterOptionLabel, { "data-translation-key": "catalog.filters.select.all" }, translate('catalog.filters.select.all', 'All')),
+                react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, defaultOptionCount))),
+        },
+        ...filter.options.map((option) => ({
+            value: option.value,
+            element: (react_1.default.createElement(FilterOption_1.FilterOption, { key: option.value },
+                react_1.default.createElement(FilterOptionLabel_1.FilterOptionLabel, { "data-translation-key": option.value }, (0, utils_1.changeTextCasing)(translate(option.value), filterValuesCasing)),
+                showCounter && react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, option.count))),
+        })),
+    ];
+    const headerContent = (react_1.default.createElement(AccordionHeaderContent, null,
+        react_1.default.createElement("span", null, translate(filter.titleTranslationKey, filter.title)),
+        selectedCount > 0 && react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, selectedCount)));
+    return (react_1.default.createElement(AccordionWrapper, { className: className, $hasSelection: selectedCount > 0 && !isExpanded, "data-component-name": "Catalog/CatalogFilterSelect" },
+        react_1.default.createElement(Accordion_1.Accordion, { expanded: isExpanded, header: headerContent, onToggle: setIsExpanded },
+            react_1.default.createElement(StyledSelect, { value: ((_a = (filter.selectedOptions instanceof Set ? filter.selectedOptions : new Set())
+                    .values()
+                    .next()) === null || _a === void 0 ? void 0 : _a.value) || '', onChange: (value) => filter.selectOption(value), options: selectOptions }))));
+}
+const AccordionWrapper = styled_components_1.default.div `
+  position: relative;
+  border-right: 4px solid transparent;
+
+  ${({ $hasSelection }) => $hasSelection &&
+    `border-right-color: var(--color-blueberry-6);
+    
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: -1px;
+      right: -4px;
+      width: 4px;
+      height: 1px;
+      background-color: var(--color-blueberry-6);
+      z-index: 1;
+    }
+  `}
+`;
+const AccordionHeaderContent = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  width: 100%;
+`;
+const StyledSelect = (0, styled_components_1.default)(Select_1.Select) `
+  --select-list-max-width: var(--filter-select-max-width);
+
+  min-height: var(--filter-select-min-height);
+  --select-text-color: var(--filter-select-color);
+  border: 1px solid var(--filter-select-border-color);
+  --select-border-radius: var(--filter-select-border-radius);
+  --select-input-border-radius: var(--filter-select-border-radius);
+  padding: var(--filter-select-padding);
+
+  &:hover {
+    border-color: var(--filter-select-border-color-hover);
+  }
+  --filter-option-margin: var(--filter-select-option-margin);
+`;
+//# sourceMappingURL=CatalogFilterSelect.js.map

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

@@ -0,0 +1,5 @@
+import type { JSX } from 'react';
+import React from 'react';
+export declare const HighlightContext: React.Context<string[]>;
+export type CatalogHighlightProps = React.PropsWithChildren;
+export declare function CatalogHighlight(props: CatalogHighlightProps): JSX.Element | null;

package/lib/components/Catalog/CatalogHighlight.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HighlightContext = void 0;
+exports.CatalogHighlight = CatalogHighlight;
+const react_1 = __importDefault(require("react"));
+const highlight_words_core_1 = require("highlight-words-core");
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.HighlightContext = react_1.default.createContext([]);
+function CatalogHighlight(props) {
+    const { children } = props;
+    const searchWords = react_1.default.useContext(exports.HighlightContext);
+    if (!searchWords.length) {
+        return children ? react_1.default.createElement(react_1.default.Fragment, null, children) : null;
+    }
+    function highlight(str, childIdx = 0) {
+        const chunks = (0, highlight_words_core_1.findAll)({
+            searchWords,
+            textToHighlight: str,
+        });
+        return (react_1.default.createElement("span", { "data-component-name": "Catalog/CatalogHighlight", key: childIdx }, chunks.map((chunk, idx) => {
+            const { end, highlight, start } = chunk;
+            const text = str.substr(start, end - start);
+            if (highlight) {
+                return react_1.default.createElement(HighlightedText, { key: idx }, text);
+            }
+            else {
+                return text;
+            }
+        })));
+    }
+    if (typeof children === 'string') {
+        return highlight(children);
+    }
+    else if (Array.isArray(children)) {
+        return (react_1.default.createElement(react_1.default.Fragment, null, children.map((child, idx) => typeof children === 'string' ? highlight(child, idx) : child || null)));
+    }
+    else {
+        return react_1.default.createElement(react_1.default.Fragment, null, children);
+    }
+}
+const HighlightedText = styled_components_1.default.span `
+  background-color: var(--catalog-highlight-bg-color);
+  color: var(--catalog-highlight-text-color);
+`;
+//# sourceMappingURL=CatalogHighlight.js.map

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

@@ -0,0 +1,8 @@
+import type { JSX } from 'react';
+import React from 'react';
+type CatalogMobileFiltersPanelProps = {
+    setMobileFiltersPanelOpen: (open: boolean) => void;
+    filterContent: React.ReactNode;
+};
+export declare function CatalogMobileFiltersPanel({ setMobileFiltersPanelOpen, filterContent, }: CatalogMobileFiltersPanelProps): JSX.Element;
+export {};

package/lib/components/Catalog/CatalogMobileFiltersPanel/CatalogMobileFiltersPanel.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogMobileFiltersPanel = CatalogMobileFiltersPanel;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const CatalogMobileFiltersPanelHeader_1 = require("../../../components/Catalog/CatalogMobileFiltersPanel/CatalogMobileFiltersPanelHeader");
+function CatalogMobileFiltersPanel({ setMobileFiltersPanelOpen, filterContent, }) {
+    return (react_1.default.createElement(CatalogMobileFiltersPanelWrapper, null,
+        react_1.default.createElement(CatalogMobileFiltersPanelHeader_1.CatalogMobileFiltersPanelHeader, { setMobileFiltersPanelOpen: setMobileFiltersPanelOpen }),
+        filterContent));
+}
+const CatalogMobileFiltersPanelWrapper = styled_components_1.default.div `
+  width: 100%;
+  max-height: calc(100vh - var(--navbar-offset));
+  overflow-y: auto;
+  background: var(--sidebar-bg-color);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
+//# sourceMappingURL=CatalogMobileFiltersPanel.js.map

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

@@ -0,0 +1,6 @@
+import type { JSX } from 'react';
+type CatalogMobileFiltersPanelHeaderProps = {
+    setMobileFiltersPanelOpen: (open: boolean) => void;
+};
+export declare function CatalogMobileFiltersPanelHeader({ setMobileFiltersPanelOpen, }: CatalogMobileFiltersPanelHeaderProps): JSX.Element;
+export {};

package/lib/components/Catalog/CatalogMobileFiltersPanel/CatalogMobileFiltersPanelHeader.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogMobileFiltersPanelHeader = CatalogMobileFiltersPanelHeader;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Button_1 = require("../../../components/Button/Button");
+const core_1 = require("../../../core");
+function CatalogMobileFiltersPanelHeader({ setMobileFiltersPanelOpen, }) {
+    const { useTranslate } = (0, core_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    return (react_1.default.createElement(CatalogMobileFiltersPanelHeaderWrapper, null,
+        react_1.default.createElement("span", null),
+        react_1.default.createElement(Button_1.Button, { variant: "ghost", size: "medium", onClick: () => setMobileFiltersPanelOpen(false) }, translate('catalog.filters.close', 'Close'))));
+}
+const CatalogMobileFiltersPanelHeaderWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--catalog-filter-content-header-padding);
+  border-bottom: 1px solid var(--border-color-secondary);
+  flex-shrink: 0;
+`;
+//# sourceMappingURL=CatalogMobileFiltersPanelHeader.js.map

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

@@ -0,0 +1,8 @@
+import type { JSX } from 'react';
+import React from 'react';
+type CatalogMobileFiltersPanelOverlayProps = {
+    setMobileFiltersPanelOpen: (open: boolean) => void;
+    filterContent: React.ReactNode;
+};
+export declare function CatalogMobileFiltersPanelOverlay({ setMobileFiltersPanelOpen, filterContent, }: CatalogMobileFiltersPanelOverlayProps): JSX.Element;
+export {};

package/lib/components/Catalog/CatalogMobileFiltersPanel/CatalogMobileFiltersPanelOverlay.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogMobileFiltersPanelOverlay = CatalogMobileFiltersPanelOverlay;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const core_1 = require("../../../core");
+const CatalogMobileFiltersPanel_1 = require("../../../components/Catalog/CatalogMobileFiltersPanel/CatalogMobileFiltersPanel");
+function CatalogMobileFiltersPanelOverlay({ setMobileFiltersPanelOpen, filterContent, }) {
+    return (react_1.default.createElement(CatalogMobileFiltersPanelOverlayWrapper, null,
+        react_1.default.createElement(CatalogMobileFiltersPanel_1.CatalogMobileFiltersPanel, { setMobileFiltersPanelOpen: setMobileFiltersPanelOpen, filterContent: filterContent })));
+}
+const CatalogMobileFiltersPanelOverlayWrapper = styled_components_1.default.div `
+  display: none;
+  position: fixed;
+  top: var(--navbar-offset);
+  left: 0;
+  width: 100%;
+  height: calc(100vh - var(--navbar-offset));
+  z-index: 3;
+  background: var(--bg-color);
+  flex-direction: column;
+
+  @media screen and (max-width: ${core_1.breakpoints.medium}) {
+    display: flex;
+  }
+`;
+//# sourceMappingURL=CatalogMobileFiltersPanelOverlay.js.map

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

@@ -0,0 +1,12 @@
+import type { JSX } from 'react';
+import type { CatalogViewMode } from '../../../core';
+type CatalogMobileTopBarProps = {
+    setMobileFiltersPanelOpen: (open: boolean) => void;
+    activeFiltersCount: number;
+    setSortOption: (sortOption: string | null) => void;
+    sortOption: string | null;
+    viewMode: CatalogViewMode;
+    setViewMode: (viewMode: CatalogViewMode) => void;
+};
+export declare function CatalogMobileTopBar({ setMobileFiltersPanelOpen, activeFiltersCount, setSortOption, sortOption, viewMode, setViewMode, }: CatalogMobileTopBarProps): JSX.Element;
+export {};

package/lib/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBar.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogMobileTopBar = CatalogMobileTopBar;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const CatalogMobileTopBarFiltersButton_1 = require("../../../components/Catalog/CatalogMobileTopBar/CatalogMobileTopBarFiltersButton");
+const CatalogMobileTopBarControls_1 = require("../../../components/Catalog/CatalogMobileTopBar/CatalogMobileTopBarControls");
+const core_1 = require("../../../core");
+function CatalogMobileTopBar({ setMobileFiltersPanelOpen, activeFiltersCount, setSortOption, sortOption, viewMode, setViewMode, }) {
+    return (react_1.default.createElement(CatalogMobileTopBarWrapper, null,
+        react_1.default.createElement(CatalogMobileTopBarFiltersButton_1.CatalogMobileTopBarFiltersButton, { setMobileFiltersPanelOpen: setMobileFiltersPanelOpen, activeFiltersCount: activeFiltersCount }),
+        react_1.default.createElement(CatalogMobileTopBarControls_1.CatalogMobileTopBarControls, { setSortOption: setSortOption, sortOption: sortOption, viewMode: viewMode, setViewMode: setViewMode })));
+}
+const CatalogMobileTopBarWrapper = styled_components_1.default.div `
+  display: none;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-sm) var(--catalog-page-padding-horizontal);
+  border-bottom: 1px solid var(--border-color-secondary);
+  background: var(--bg-color);
+  flex-shrink: 0;
+
+  @media screen and (max-width: ${core_1.breakpoints.medium}) {
+    display: flex;
+  }
+`;
+//# sourceMappingURL=CatalogMobileTopBar.js.map

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

@@ -0,0 +1,10 @@
+import type { JSX } from 'react';
+import type { CatalogViewMode } from '../../../core';
+type CatalogMobileTopBarControlsProps = {
+    setSortOption: (sortOption: string | null) => void;
+    sortOption: string | null;
+    viewMode: CatalogViewMode;
+    setViewMode: (viewMode: CatalogViewMode) => void;
+};
+export declare function CatalogMobileTopBarControls({ setSortOption, sortOption, viewMode, setViewMode, }: CatalogMobileTopBarControlsProps): JSX.Element;
+export {};

package/lib/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBarControls.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogMobileTopBarControls = CatalogMobileTopBarControls;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const CatalogSortButton_1 = require("../../../components/Catalog/CatalogSortButton");
+const CatalogViewModeToggle_1 = require("../../../components/Catalog/CatalogViewModeToggle");
+function CatalogMobileTopBarControls({ setSortOption, sortOption, viewMode, setViewMode, }) {
+    return (react_1.default.createElement(CatalogMobileTopBarControlsWrapper, null,
+        react_1.default.createElement(CatalogSortButton_1.CatalogSortButton, { onSortChange: setSortOption, currentSort: sortOption }),
+        react_1.default.createElement(CatalogViewModeToggle_1.CatalogViewModeToggle, { viewMode: viewMode, onViewModeChange: setViewMode })));
+}
+const CatalogMobileTopBarControlsWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: var(--catalog-controls-wrapper-gap);
+`;
+//# sourceMappingURL=CatalogMobileTopBarControls.js.map

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

@@ -0,0 +1,7 @@
+import type { JSX } from 'react';
+type CatalogMobileTopBarFiltersButtonProps = {
+    setMobileFiltersPanelOpen: (open: boolean) => void;
+    activeFiltersCount: number;
+};
+export declare function CatalogMobileTopBarFiltersButton({ setMobileFiltersPanelOpen, activeFiltersCount, }: CatalogMobileTopBarFiltersButtonProps): JSX.Element;
+export {};

package/lib/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBarFiltersButton.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogMobileTopBarFiltersButton = CatalogMobileTopBarFiltersButton;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const FilterIcon_1 = require("../../../icons/FilterIcon/FilterIcon");
+const CounterTag_1 = require("../../../components/Tags/CounterTag");
+const core_1 = require("../../../core");
+const Button_1 = require("../../../components/Button/Button");
+function CatalogMobileTopBarFiltersButton({ setMobileFiltersPanelOpen, activeFiltersCount, }) {
+    const { useTranslate } = (0, core_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    return (react_1.default.createElement(CatalogMobileTopBarFiltersButtonWrapper, { icon: react_1.default.createElement(FilterIcon_1.FilterIcon, { size: "16px" }), variant: "ghost", iconPosition: "left", size: "medium", onClick: () => setMobileFiltersPanelOpen(true) },
+        translate('catalog.filters.title', 'Filters'),
+        activeFiltersCount > 0 ? react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, activeFiltersCount) : null));
+}
+const CatalogMobileTopBarFiltersButtonWrapper = (0, styled_components_1.default)(Button_1.Button) `
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+`;
+//# sourceMappingURL=CatalogMobileTopBarFiltersButton.js.map

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

@@ -0,0 +1,9 @@
+import React from 'react';
+export type CatalogPageDescriptionProps = {
+    title: string;
+    titleTranslationKey?: string;
+    description: string;
+    descriptionTranslationKey?: string;
+    tag: number | string;
+};
+export declare function CatalogPageDescription({ title, titleTranslationKey, description, descriptionTranslationKey, tag, }: CatalogPageDescriptionProps): React.JSX.Element;

package/lib/components/Catalog/CatalogPageDescription.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogPageDescription = CatalogPageDescription;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const H3_1 = require("../../components/Typography/H3");
+const Tag_1 = require("../../components/Tag/Tag");
+function CatalogPageDescription({ title, titleTranslationKey, description, descriptionTranslationKey, tag, }) {
+    return (react_1.default.createElement(CatalogPageDescriptionWrapper, null,
+        react_1.default.createElement(CatalogTitleWrapper, { "data-component-name": "Catalog/CatalogEntityTitle" },
+            react_1.default.createElement(CatalogTitle, { "data-translation-key": titleTranslationKey }, title),
+            react_1.default.createElement(Tag_1.Tag, { borderless: true, textTransform: "none" }, tag)),
+        react_1.default.createElement(CatalogDescription, { "data-translation-key": descriptionTranslationKey }, description)));
+}
+const CatalogPageDescriptionWrapper = styled_components_1.default.div `
+  margin: var(--catalog-heading-margin);
+`;
+const CatalogTitleWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  color: var(--catalog-title-text-color);
+  font-weight: var(--catalog-title-font-weight) !important;
+  font-size: var(--catalog-title-font-size);
+`;
+const CatalogTitle = (0, styled_components_1.default)(H3_1.H3) `
+  color: var(--catalog-title-text-color);
+  font-weight: var(--catalog-title-font-weight) !important;
+  font-size: var(--catalog-title-font-size);
+  margin: var(--catalog-title-margin);
+  margin-right: var(--catalog-title-spacing-right);
+`;
+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: 0;
+  line-height: var(--catalog-description-line-height);
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+`;
+//# sourceMappingURL=CatalogPageDescription.js.map

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

@@ -0,0 +1,11 @@
+import type { JSX } from 'react';
+import React from 'react';
+import { Select } from '../../components/Select/Select';
+import type { CatalogSwitcherItem } from '../../core/types';
+export type CatalogSelectorProps = {
+    catalogSwitcherItems: CatalogSwitcherItem[];
+    onChange: () => void;
+};
+export declare function CatalogSelector({ catalogSwitcherItems, onChange, }: CatalogSelectorProps): JSX.Element;
+export declare const CatalogSelectWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const CatalogSelect: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../../core/types").SelectProps<unknown>, never> & Partial<Pick<import("../../core/types").SelectProps<unknown>, never>>> & string & Omit<typeof Select, keyof React.Component<any, {}, any>>;

package/lib/components/Catalog/CatalogSelector.js

@@ -0,0 +1,81 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogSelect = exports.CatalogSelectWrapper = void 0;
+exports.CatalogSelector = CatalogSelector;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const react_router_1 = require("react-router");
+const Accordion_1 = require("../../components/Accordion/Accordion");
+const Select_1 = require("../../components/Select/Select");
+const utils_1 = require("../../core/utils");
+const hooks_1 = require("../../core/hooks");
+const ChevronDownIcon_1 = require("../../icons/ChevronDownIcon/ChevronDownIcon");
+function CatalogSelector({ catalogSwitcherItems, onChange, }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const [isExpanded, setIsExpanded] = (0, react_1.useState)(true);
+    const navigate = (0, react_router_1.useNavigate)();
+    const pathPrefix = (0, utils_1.getPathPrefix)();
+    const options = catalogSwitcherItems.map((item) => ({
+        value: item.slug,
+        element: translate(item.labelTranslationKey),
+        label: translate(item.labelTranslationKey),
+    }));
+    const selectedCatalogItem = catalogSwitcherItems.find((item) => item.selected);
+    const headerLabel = translate('catalog.catalogs.label', 'Catalogs');
+    return (react_1.default.createElement(exports.CatalogSelectWrapper, { "data-component-name": "Catalog/CatalogSelector" },
+        react_1.default.createElement(Accordion_1.Accordion, { expanded: isExpanded, header: headerLabel, onToggle: setIsExpanded },
+            react_1.default.createElement(exports.CatalogSelect, { value: selectedCatalogItem === null || selectedCatalogItem === void 0 ? void 0 : selectedCatalogItem.slug, options: options, onChange: (value) => {
+                    navigate(`${pathPrefix}/catalogs/${value}`);
+                    onChange();
+                }, icon: react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, { color: "var(--catalog-select-icon-color)" }) }))));
+}
+exports.CatalogSelectWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: var(--filter-group-gap);
+  --accordion-body-padding: var(--catalog-select-accordion-body-padding);
+  --accordion-header-padding: var(--catalog-select-accordion-header-padding);
+  --select-line-height: var(--catalog-select-select-line-height);
+  --select-input-padding: var(--catalog-select-select-input-padding);
+`;
+exports.CatalogSelect = (0, styled_components_1.default)(Select_1.Select) `
+  border-radius: var(--catalog-select-border-radius);
+`;
+//# sourceMappingURL=CatalogSelector.js.map

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

@@ -0,0 +1,9 @@
+import React from 'react';
+export type CatalogSortButtonProps = {
+    onSortChange: (sortOption: string | null) => void;
+    currentSort?: string | null;
+};
+export declare function CatalogSortButton({ onSortChange, currentSort, }: {
+    onSortChange: (sortOption: string | null) => void;
+    currentSort?: string | null;
+}): React.JSX.Element;