@redocly/theme 0.55.0-next.7 → 0.55.0-next.8

package/lib/components/Catalog/variables.js

@@ -0,0 +1,354 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.catalog = void 0;
+const styled_components_1 = require("styled-components");
+exports.catalog = (0, styled_components_1.css) `
+  /* === Catalog === */
+  /**
+    * @tokens Catalog page
+    */
+  --catalog-page-padding-vertical: var(--spacing-xl);
+  --catalog-page-padding-horizontal: var(--spacing-xxl);
+  --catalog-page-padding: var(--catalog-page-padding-vertical) var(--catalog-page-padding-horizontal);
+  --catalog-page-content-height: calc(100vh - var(--navbar-height) - var(--spacing-lg) * 2);
+
+  --catalog-filter-padding-vertical-mobile: 0;
+  --catalog-filter-padding-horizontal-mobile: var(--spacing-base);
+
+  --catalog-heading-margin: 0 0 var(--spacing-xl) 0;
+  --catalog-sidebar-width: 285px;
+
+  /**
+    * @tokens Catalog page wrapper
+    */
+  --catalog-page-wrapper-font-weight: var(--font-weight-regular);
+  --catalog-page-wrapper-text-color: var(--text-color-secondary);
+  --catalog-page-wrapper-font-size: var(--font-size-base);
+  --catalog-page-wrapper-font-family: var(--font-family-base);
+  --catalog-page-wrapper-line-height: var(--line-height-base);
+
+  /**
+    * @tokens Catalog page content
+    */
+  --catalog-page-content-width-mobile: 90%;
+  --catalog-page-content-width-desktop: 100%;
+  --catalog-page-content-margin-mobile: 0 auto;
+
+  /**
+    * @tokens Catalog page title
+    */
+  --catalog-title-text-color: var(--text-color-primary);
+  --catalog-title-font-weight: var(--font-weight-bold);
+  --catalog-title-font-size: var(--h3-font-size);
+  --catalog-title-margin: var(--spacing-sm) 0 var(--spacing-sm) 0;
+  --catalog-title-spacing-right: 8px;
+
+  /**
+    * @tokens Catalog page description
+    */
+  --catalog-description-text-color: var(--text-color-secondary);
+  --catalog-description-font-weight: var(--font-weight-regular);
+  --catalog-description-font-size: var(--font-size-lg);
+  --catalog-description-margin: 0 0 var(--spacing-sm) 0;
+  --catalog-description-line-height: var(--line-height-lg);
+
+  /**
+    * @tokens Catalog page separator
+    */
+  --catalog-separator-color: var(--text-color-secondary);
+  --catalog-separator-font-size: var(--font-size-base);
+  --catalog-separator-font-weight: var(--font-weight-regular);
+  --catalog-separator-border-color: var(--border-color-secondary);
+  --catalog-separator-margin: 0 0 var(--spacing-base) 0;
+  --catalog-separator-padding: var(--spacing-xxs) 0 0 0;
+  --catalog-separator-label-margin: 0 var(--spacing-xs);
+
+  /**
+    * @tokens Catalog separators and dividers
+    */
+  --catalog-hr-border-color: var(--border-color-primary);
+  --catalog-hr-border-width: 1px;
+  --catalog-hr-width: calc(100% + 48px);
+  --catalog-hr-margin: auto -24px 0 -24px;
+
+  /**
+    * @tokens Catalog links
+    */
+  --catalog-link-color: var(--link-color-primary);
+  --catalog-link-font-weight: var(--link-font-weight);
+  --catalog-link-text-decoration: none;
+
+  /**
+    * @tokens Catalog selector
+    */
+  --catalog-select-wrapper-margin-top: var(--spacing-xxs);
+  --catalog-select-wrapper-margin-bottom: var(--spacing-base);
+  --catalog-select-label-margin-bottom: var(--spacing-xxs);
+  --catalog-select-label-font-weight: var(--filter-title-font-weight);
+  --catalog-select-label-font-size: var(--filter-title-font-size);
+  --catalog-select-label-line-height: var(--filter-title-line-height);
+  --catalog-select-border-radius: var(--filter-input-border-radius);
+  --catalog-select-input-padding: var(--select-input-padding-vertical) var(--spacing-sm);
+  --catalog-select-icon-color: var(--input-t-icon-color);
+
+  /**
+    * @tokens Catalog highlight
+    */
+  --catalog-highlight-bg-color: var(--search-highlight-bg-color);
+  --catalog-highlight-text-color: var(--search-highlight-text-color);
+
+  /**
+    * @tokens Catalog entity icon
+    */
+  --catalog-entity-icon-color: var(--color-primary-base);
+
+  /**
+    * @tokens Catalog tags
+    */
+  --catalog-tags-wrapper-gap: 4px;
+  --catalog-tags-more-button-font-size: var(--font-size-base);
+  --catalog-tags-more-button-margin-left: 4px;
+  --catalog-tags-placeholder-bg-color: var(--bg-color);
+
+  /**
+    * @tokens Catalog empty state
+    */
+  --catalog-empty-state-padding: var(--catalog-table-empty-state-padding);
+  --catalog-empty-state-font-weight: var(--font-weight-regular);
+
+  /**
+    * @tokens Catalog actions
+    */
+  --catalog-actions-row-margin-bottom: var(--spacing-xl);
+  --catalog-controls-wrapper-gap: var(--spacing-sm);
+  --catalog-filter-input-width: 360px;
+
+  /**
+    * @tokens Catalog search input wrapper
+    */
+  --catalog-search-input-wrapper-width: var(--catalog-filter-input-width);
+
+  /**
+    * @tokens Catalog controls wrapper
+    */
+  --catalog-controls-wrapper-display: flex;
+  --catalog-controls-wrapper-align-items: center;
+  --catalog-controls-wrapper-margin-left: auto;
+
+  /**
+    * @tokens Catalog sort button
+    */
+  --catalog-sort-trigger-gap: var(--spacing-xs);
+  --catalog-sort-trigger-padding: 6px 8px;
+  --catalog-sort-trigger-border-radius: var(--border-radius-md);
+  --catalog-sort-trigger-hover-bg-color: var(--button-bg-color-secondary-hover);
+  --catalog-sort-icon-color: var(--text-color-secondary);
+  --catalog-sort-text-font-size: var(--font-size-sm);
+  --catalog-sort-text-color: var(--text-color-secondary);
+  --catalog-sort-text-font-weight: var(--font-weight-medium);
+
+  /**
+    * @tokens Catalog sidebar
+    */
+  --catalog-sidebar-display-mobile: none;
+  --catalog-sidebar-display-desktop: flex;
+  --catalog-sidebar-menu-container-padding-top: 0;
+
+  /**
+    * @tokens Catalog page description responsive
+    */
+  --catalog-page-description-display-mobile: none;
+  --catalog-page-description-display-desktop: block;
+
+  /**
+    * @tokens Catalog card
+    */
+  --catalog-card-min-height: 194px;
+  --catalog-card-min-width: 490px;
+  --catalog-card-padding-vertical: var(--spacing-base);
+  --catalog-card-padding-horizontal: var(--spacing-md);
+  --catalog-card-gap: var(--spacing-sm);
+  --catalog-card-text-color: var(--text-color-secondary);
+  --catalog-card-font-size: var(--font-size-base);
+  --catalog-card-font-weight: var(--font-weight-regular);
+  --catalog-card-bg-color: var(--layer-color);
+  --catalog-card-border-color: var(--border-color-secondary);
+  --catalog-card-divider-color: var(--border-color-secondary);
+  --catalog-card-border-width: var(--border-width);
+  --catalog-card-border-style: var(--border-style);
+  --catalog-card-border-color-hover: var(--border-color-primary);
+  --catalog-card-border-radius: var(--border-radius-lg);
+  --catalog-cards-group-margin: 0 0 var(--spacing-base) 0;
+  --catalog-cards-group-gap: var(--spacing-xl);
+
+  /**
+    * @tokens Catalog card icon
+    */
+  --catalog-card-icon-width: 30px;
+  --catalog-card-icon-height: 30px;
+  --catalog-card-icon-border-radius: 4px;
+  --catalog-card-icon-bg-color: var(--bg-color);
+  --catalog-card-icon-border-color: var(--border-color-secondary);
+  --catalog-card-icon-border-width: 1px;
+  --catalog-card-icon-margin-right: var(--spacing-xs);
+
+  /**
+    * @tokens Catalog metadata
+    */
+  --catalog-metadata-section-margin-top: var(--spacing-md);
+  --catalog-metadata-section-gap: var(--spacing-lg);
+  --catalog-metadata-label-font-size: var(--font-size-base);
+  --catalog-metadata-label-font-weight: var(--font-weight-medium);
+  --catalog-metadata-label-color: var(--text-color-secondary);
+  --catalog-metadata-label-margin-bottom: var(--spacing-unit);
+  --catalog-metadata-column-half-gap: var(--spacing-sm);
+  --catalog-metadata-heading-size: var(--font-size-md);
+
+  /**
+    * @tokens Catalog arrow circle
+    */
+  --catalog-arrow-circle-size: 32px;
+  --catalog-arrow-circle-radius: 16px;
+  --catalog-arrow-circle-bg-color: var(--button-bg-color-secondary);
+
+  /**
+    * @tokens Catalog card title
+    */
+  --catalog-card-title-color: var(--text-color-primary);
+  --catalog-card-title-min-height: var(--spacing-xxl);
+  --catalog-card-title-font-size: var(--font-size-lg);
+  --catalog-card-title-font-weight: var(--font-weight-bold);
+  --catalog-card-title-line-height: var(--line-height-lg);
+  --catalog-card-title-line-clamp: 2;
+
+  /**
+    * @tokens Catalog card description
+    */
+  --catalog-card-description-line-clamp: 3;
+  --catalog-card-description-color: var(--text-color-description);
+  --catalog-card-description-font-size: var(--font-size-base);
+  --catalog-card-description-line-height: var(--line-height-base);
+  --catalog-card-description-font-weight: var(--font-weight-regular);
+  --catalog-card-description-height: 62px;
+  --catalog-card-description-margin-top: 2px;
+
+  --catalog-card-content-gap: var(--spacing-xs);
+  --catalog-card-content-gap-vertical: var(--spacing-sm);
+
+  --catalog-card-tag-bg: transparent;
+
+  --catalog-actions-gap: var(--spacing-xs);
+  --catalog-actions-padding-vertical: var(--spacing-xs);
+  --catalog-actions-padding-horizontal: 5%;
+  --catalog-actions-min-height: 40px;
+  --catalog-actions-bg-color: var(--bg-color-tonal);
+
+  --catalog-page-badge-border-radius: var(--border-radius);
+  --catalog-page-badge-padding: 0 var(--spacing-xs);
+  --catalog-page-badge-font-size: var(--font-size-base);
+  --catalog-page-badge-line-height: var(--line-height-base);
+
+  --catalog-page-badge-dot-size: 6px;
+  --catalog-page-badge-dot-border-color: #ffffff;
+
+  /**
+    * @tokens Catalog table
+    */
+  --catalog-table-border-color: var(--border-color-primary);
+  --catalog-table-header-bg-color: var(--bg-color-secondary);
+  --catalog-table-header-font-weight: var(--font-weight-semibold);
+  --catalog-table-header-cell-padding: 5px 8px;
+  --catalog-table-cell-padding: 5px 8px;
+  --catalog-table-row-hover-bg-color: var(--bg-color-hover, rgba(0, 0, 0, 0.04));
+  --catalog-table-empty-state-padding: 32px;
+  --catalog-table-empty-state-color: var(--text-color-secondary);
+  --catalog-table-title-cell-gap: 12px;
+  --catalog-table-entity-title-content-offset: 42px;
+
+  /**
+    * @tokens Catalog table header
+    */
+  --catalog-table-header-sort-icon-color-active: var(--text-color-primary);
+  --catalog-table-header-sort-icon-color-inactive: var(--text-color-helper);
+  --catalog-table-header-sort-indicator-color: var(--icon-color-primary);
+  --catalog-table-header-sort-arrow-bg-active: var(--bg-color-active);
+
+  /**
+    * @tokens Catalog table icon
+    */
+  --catalog-table-icon-width: 30px;
+  --catalog-table-icon-height: 30px;
+  --catalog-table-icon-border-radius: 4px;
+  --catalog-table-icon-bg-color: var(--bg-color-tonal);
+  --catalog-table-icon-border-color: var(--border-color-secondary);
+  --catalog-table-icon-border-width: 1px;
+
+  /**
+    * @tokens Catalog table entity title
+    */
+  --catalog-table-entity-title-font-size: var(--catalog-card-title-font-size);
+  --catalog-table-entity-title-line-height: var(--line-height-lg);
+  --catalog-table-entity-title-font-weight: var(--font-weight-semibold);
+
+  /**
+    * @tokens Catalog table description
+    */
+  --catalog-table-description-line-clamp: 3;
+  --catalog-table-description-color: var(--text-color-description);
+  --catalog-table-description-font-size: var(--font-size-base);
+  --catalog-table-description-line-height: var(--line-height-base);
+  --catalog-table-description-font-weight: var(--font-weight-regular);
+  --catalog-table-description-height: 62px;
+  --catalog-table-entity-summary-font-size: var(--font-size-sm);
+  --catalog-table-entity-summary-line-height: var(--line-height-sm);
+
+  --catalog-table-content-gap: var(--spacing-xxs);
+
+  --catalog-table-tag-bg: transparent;
+
+  /**
+    * @tokens Catalog entity type tags
+    */
+  --catalog-entity-service-tag-text-color: var(--color-blue-7);
+  --catalog-entity-service-tag-border-color: var(--color-blue-4);
+
+  --catalog-entity-domain-tag-text-color: var(--color-grass-8);
+  --catalog-entity-domain-tag-border-color: var(--color-grass-4);
+
+  --catalog-entity-team-tag-text-color: var(--color-purple-7);
+  --catalog-entity-team-tag-border-color: var(--color-purple-4);
+
+  --catalog-entity-user-tag-text-color: var(--color-green-7);
+  --catalog-entity-user-tag-border-color: var(--color-green-4);
+
+  --catalog-entity-api-description-tag-text-color: var(--color-sky-8);
+  --catalog-entity-api-description-tag-border-color: var(--color-sky-5);
+
+  /**
+    * @tokens Catalog view mode toggle
+    */
+  --catalog-view-mode-toggle-gap: var(--spacing-xxs);
+  --catalog-view-mode-toggle-active-bg-color: var(--button-bg-color-secondary-hover);
+  --catalog-view-mode-button-width: 32px;
+  --catalog-view-mode-button-height: 32px;
+  --catalog-view-mode-button-border-radius: var(--border-radius-md);
+  --catalog-view-mode-table-icon-size: 12px;
+  --catalog-view-mode-cards-icon-size: 13px;
+
+  /**
+    * @tokens Catalog empty state
+    */
+  --catalog-empty-state-text-color: var(--text-color-description);
+  --catalog-empty-state-min-height: 300px;
+  --catalog-empty-state-header-text-color: var(--text-color-primary);
+  --catalog-empty-state-header-font-size: var(--font-size-xl);
+  --catalog-empty-state-header-font-weight: var(--font-weight-medium);
+  --catalog-empty-state-header-line-height: var(--line-height-xl);
+  --catalog-empty-state-font-size: var(--font-size-base);
+  --catalog-empty-state-line-height: var(--line-height-base);
+
+
+  --catalog-avatar-bg-color: #ededf2;
+  // @tokens End
+`;
+//# sourceMappingURL=variables.js.map

package/lib/components/CatalogClassic/CatalogClassicHighlight.js

@@ -61,7 +61,7 @@ function CatalogClassicHighlight(props) {
         return (React.createElement(React.Fragment, null, children.map((child, idx) => typeof children === 'string' ? highlight(child, idx) : child || null)));
     }
     else {
-        return React.createElement(React.Fragment, null, "children") || null;
+        return React.createElement(React.Fragment, null, children);
     }
 }
 const HighlightedText = styled_components_1.default.span `

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

@@ -1,3 +1,3 @@
 import type { JSX } from 'react';
 import type { FilterProps } from '../../core/types';
-export declare function Filter({ filter, filterValuesCasing }: FilterProps): JSX.Element | null;
+export declare function Filter({ filter, filterValuesCasing, showCounter, }: FilterProps): JSX.Element | null;

package/lib/components/Filter/Filter.js

@@ -14,12 +14,12 @@ const filterComponents = {
     'date-range': FilterDateRange_1.FilterDateRange,
     checkboxes: FilterCheckboxes_1.FilterCheckboxes,
 };
-function Filter({ filter, filterValuesCasing }) {
+function Filter({ filter, filterValuesCasing, showCounter = true, }) {
     if (!filter.parentUsed)
         return null;
     const FilterComponent = filterComponents[(filter.type || 'checkboxes')];
     return (react_1.default.createElement(FilterGroup, { "data-component-name": "Filter/Filter", key: filter.property + filter.title },
-        react_1.default.createElement(FilterComponent, { filter: filter, filterValuesCasing: filterValuesCasing })));
+        react_1.default.createElement(FilterComponent, { filter: filter, filterValuesCasing: filterValuesCasing, showCounter: showCounter })));
 }
 const FilterGroup = styled_components_1.default.div `
   padding: var(--filter-group-padding);

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

@@ -1,3 +1,3 @@
 import type { JSX } from 'react';
 import type { FilterProps } from '../../core/types';
-export declare function FilterCheckboxes({ filter, filterValuesCasing }: FilterProps): JSX.Element;
+export declare function FilterCheckboxes({ filter, filterValuesCasing, showCounter, }: FilterProps): JSX.Element;

package/lib/components/Filter/FilterCheckboxes.js

@@ -14,21 +14,21 @@ const hooks_1 = require("../../core/hooks");
 const CheckboxIcon_1 = require("../../icons/CheckboxIcon/CheckboxIcon");
 const CounterTag_1 = require("../../components/Tags/CounterTag");
 const utils_1 = require("../../core/utils");
-function FilterCheckboxes({ filter, filterValuesCasing }) {
+function FilterCheckboxes({ filter, filterValuesCasing, showCounter = true, }) {
     const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const telemetry = useTelemetry();
     return (react_1.default.createElement(FilterCheckboxesWrapper, { "data-component-name": "Filter/FilterCheckboxes" },
         react_1.default.createElement(FilterTitle_1.FilterTitle, { "data-translation-key": filter.titleTranslationKey }, translate(filter.titleTranslationKey, filter.title)),
-        react_1.default.createElement(FilterOptions_1.FilterOptions, null, filter.filteredOptions.map(({ value, count }) => {
+        react_1.default.createElement(FilterOptions_1.FilterOptions, null, filter.options.map(({ value, count }) => {
             const id = 'filter--' + filter.property + '--' + value;
             return (react_1.default.createElement(FilterCheckboxOption, { key: id, role: "link", onClick: () => {
                     filter.toggleOption(value);
                     telemetry.send({ type: 'filter_checkbox.toggled', payload: { id } });
                 } },
-                react_1.default.createElement(CheckboxIcon_1.CheckboxIcon, { checked: filter.selectedOptions.has(value) }),
+                react_1.default.createElement(CheckboxIcon_1.CheckboxIcon, { checked: filter.selectedOptions.has(value === null || value === void 0 ? void 0 : value.toLowerCase()) }),
                 react_1.default.createElement(FilterOptionLabel_1.FilterOptionLabel, { "data-translation-key": value }, (0, utils_1.changeTextCasing)(translate(value), filterValuesCasing)),
-                react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, count)));
+                showCounter && react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, count)));
         }))));
 }
 const FilterCheckboxOption = (0, styled_components_1.default)(FilterOption_1.FilterOption) `

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

@@ -6,5 +6,7 @@ export type FilterContentProps = {
     filters: ResolvedFilter[];
     filterTerm: string;
     filterValuesCasing?: NonNullable<RedoclyConfig['catalog']>[string]['filterValuesCasing'];
+    hideSearch?: boolean;
+    showCounter?: boolean;
 };
-export declare function FilterContent({ setFilterTerm, filters, filterTerm, filterValuesCasing, }: FilterContentProps): JSX.Element;
+export declare function FilterContent({ setFilterTerm, filters, filterTerm, filterValuesCasing, hideSearch, showCounter, }: FilterContentProps): JSX.Element | null;

package/lib/components/Filter/FilterContent.js

@@ -1,17 +1,40 @@
 "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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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.FilterContent = FilterContent;
 const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
+const styled_components_1 = __importStar(require("styled-components"));
 const FilterInput_1 = require("../../components/Filter/FilterInput");
 const hooks_1 = require("../../core/hooks");
 const Button_1 = require("../../components/Button/Button");
 const Filter_1 = require("../../components/Filter/Filter");
 const utils_1 = require("../../core/utils");
-function FilterContent({ setFilterTerm, filters, filterTerm, filterValuesCasing, }) {
+function FilterContent({ setFilterTerm, filters, filterTerm, filterValuesCasing, hideSearch, showCounter = true, }) {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const hasActiveFilters = filters.some((filter) => {
@@ -30,12 +53,15 @@ function FilterContent({ setFilterTerm, filters, filterTerm, filterValuesCasing,
         filters.forEach((filter) => filter.selectOption(''));
         setFilterTerm('');
     };
+    if (!filters.length) {
+        return null;
+    }
     return (react_1.default.createElement(FilterContentWrapper, { "data-component-name": "Filter/FilterContent" },
         react_1.default.createElement(FiltersHeader, null,
             react_1.default.createElement(FiltersTitle, { "data-translation-key": "catalog.filters.title" }, translate('catalog.filters.title', 'Filters')),
             hasActiveFilters ? (react_1.default.createElement(Button_1.Button, { size: "medium", tone: "danger", variant: "ghost", onClick: handleClearAll }, translate('catalog.filters.clearAll', 'Clear filters'))) : null),
-        react_1.default.createElement(FilterInput_1.FilterInput, { value: filterTerm, onChange: (updatedTerm) => setFilterTerm(updatedTerm) }),
-        react_1.default.createElement(FilterItems, null, filters.map((filter, idx) => (react_1.default.createElement(Filter_1.Filter, { filter: filter, key: filter.property + '-' + idx, filterValuesCasing: filterValuesCasing }))))));
+        !hideSearch && (react_1.default.createElement(FilterInput_1.FilterInput, { value: filterTerm, onChange: (updatedTerm) => setFilterTerm(updatedTerm) })),
+        react_1.default.createElement(FilterItems, { hideSearch: hideSearch }, filters.map((filter, idx) => (react_1.default.createElement(Filter_1.Filter, { filter: filter, key: filter.property + '-' + idx, filterValuesCasing: filterValuesCasing, showCounter: showCounter }))))));
 }
 const FilterContentWrapper = styled_components_1.default.div `
   padding: var(--filter-content-padding-vertical) var(--filter-content-padding-horizontal);
@@ -61,5 +87,9 @@ const FilterItems = styled_components_1.default.div `
   flex-direction: column;
   gap: var(--spacing-base);
   border-top: 1px solid var(--border-color-secondary);
+  ${({ hideSearch }) => hideSearch &&
+    (0, styled_components_1.css) `
+      border-top: none;
+    `}
 `;
 //# sourceMappingURL=FilterContent.js.map

package/lib/components/Filter/FilterInput.js

@@ -1,20 +1,52 @@
 "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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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.FilterInput = FilterInput;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
 const SearchIcon_1 = require("../../icons/SearchIcon/SearchIcon");
 function FilterInput(props) {
-    const { value, onChange } = props;
+    const { value: initialValue, onChange } = props;
+    const [value, setValue] = (0, react_1.useState)(initialValue);
+    (0, react_1.useEffect)(() => {
+        setValue(initialValue);
+    }, [initialValue]);
+    const handleChange = (e) => {
+        const newValue = e.target.value;
+        setValue(newValue);
+        onChange(newValue);
+    };
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     return (react_1.default.createElement(InputWrapper, { "data-component-name": "Filter/FilterInput" },
         react_1.default.createElement(InputIcon, null),
-        react_1.default.createElement(Input, { value: value, onChange: (e) => onChange(e.target.value), placeholder: translate('catalog.filters.placeholder', 'Type to filter...') })));
+        react_1.default.createElement(Input, { value: value, onChange: handleChange, placeholder: translate('catalog.filters.placeholder', 'Search') })));
 }
 const InputWrapper = styled_components_1.default.div `
   position: relative;

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

@@ -1,3 +1,3 @@
 import type { JSX } from 'react';
 import type { FilterProps } from '../../core/types';
-export declare function FilterSelect({ filter, filterValuesCasing }: FilterProps): JSX.Element;
+export declare function FilterSelect({ filter, filterValuesCasing, showCounter, }: FilterProps): JSX.Element;

package/lib/components/Filter/FilterSelect.js

@@ -13,12 +13,12 @@ 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");
-function FilterSelect({ filter, filterValuesCasing }) {
+function FilterSelect({ filter, filterValuesCasing, showCounter = true, }) {
     var _a;
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     let selectOptions = [];
-    const defaultOptionCount = filter.filteredOptions.reduce((acc, option) => acc + option.count, 0);
+    const defaultOptionCount = filter.options.reduce((acc, option) => acc + option.count, 0);
     selectOptions = [
         {
             value: '',
@@ -26,11 +26,11 @@ function FilterSelect({ filter, filterValuesCasing }) {
                 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.filteredOptions.map((option) => ({
+        ...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)),
-                react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, option.count))),
+                showCounter && react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, option.count))),
         })),
     ];
     return (react_1.default.createElement(FilterSelectWrapper, { "data-component-name": "Filter/FilterSelect" },

package/lib/components/LoadMore/LoadMore.d.ts

@@ -0,0 +1,8 @@
+import { JSX } from 'react';
+export declare function LoadMore({ icon, onClick, disabled, blinking, label, }: {
+    icon: JSX.Element;
+    onClick: () => void;
+    disabled: boolean;
+    blinking: boolean;
+    label: string;
+}): JSX.Element;

package/lib/components/LoadMore/LoadMore.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadMore = LoadMore;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Button_1 = require("../../components/Button/Button");
+function LoadMore({ icon, onClick, disabled, blinking, label, }) {
+    return (react_1.default.createElement(LoadMoreWrapper, { "data-component-name": "LoadMore/LoadMore" },
+        react_1.default.createElement(Button_1.Button, { variant: "secondary", icon: icon, iconPosition: "left", onClick: onClick, disabled: disabled, blinking: blinking }, label)));
+}
+const LoadMoreWrapper = styled_components_1.default.div `
+  display: flex;
+  justify-content: center;
+`;
+//# sourceMappingURL=LoadMore.js.map

package/lib/components/Markdown/Markdown.js

@@ -66,7 +66,7 @@ exports.Markdown = styled_components_1.default.main.attrs(({ className }) => ({
 
   ${links_1.markdownLinksCss}
 
-  div[id], a[id], a[name] {
+  a[name], [id] {
     scroll-margin-top: var(--navbar-height);
   }
 

package/lib/components/PageNavigation/NavigationButton.d.ts

@@ -0,0 +1,13 @@
+import type { JSX } from 'react';
+type NavigationButtonPosition = 'left' | 'right';
+export type NavigationButtonProps = {
+    label: string;
+    link: string;
+    text: string;
+    translationKey: string;
+    position: NavigationButtonPosition;
+    icon?: JSX.Element;
+    className?: string;
+};
+export declare function NavigationButton({ label, link, text, translationKey, position, icon, className, }: NavigationButtonProps): JSX.Element;
+export {};