@redocly/theme 0.55.0-next.9 → 0.55.0-rc.1

package/lib/components/Admonition/Admonition.js

@@ -51,10 +51,6 @@ const Content = styled_components_1.default.div `
   & > p:first-child {
     margin-top: 0;
   }
-
-  & > p:last-child {
-    margin-bottom: 0;
-  }
 `;
 const AdmonitionWrapper = styled_components_1.default.div `
   display: flex;

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

@@ -1,6 +1,4 @@
-import { BreadcrumbItem } from '@redocly/config';
 import type { JSX } from 'react';
 export declare function Breadcrumbs(props: {
     className?: string;
-    additionalBreadcrumbs?: BreadcrumbItem[];
 }): JSX.Element | null;

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -10,9 +10,8 @@ const hooks_1 = require("../../core/hooks");
 const Breadcrumb_1 = require("../../components/Breadcrumbs/Breadcrumb");
 function Breadcrumbs(props) {
     const { useBreadcrumbs, useTelemetry } = (0, hooks_1.useThemeHooks)();
-    const fileBreadcrumbs = useBreadcrumbs();
-    const breadcrumbs = [...fileBreadcrumbs, ...(props.additionalBreadcrumbs || [])];
     const telemetry = useTelemetry();
+    const breadcrumbs = useBreadcrumbs();
     if (breadcrumbs.length === 0) {
         return null;
     }

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

@@ -18,7 +18,6 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     title?: string;
     tabIndex?: number;
     onClick?: (e?: any) => void;
-    ref?: React.Ref<HTMLButtonElement>;
     type?: 'button' | 'submit' | 'reset';
 }
 export declare function generateClassName({ variant, tone, size, extraClass, }: ButtonProps): string;

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);
+        return React.createElement(React.Fragment, null, "children") || null;
     }
 }
 const HighlightedText = styled_components_1.default.span `

package/lib/components/Dropdown/variables.js

@@ -42,7 +42,7 @@ exports.dropdown = (0, styled_components_1.css) `
 
   --dropdown-menu-item-color-dangerous: var(--color-error-base);
 
-  --dropdown-menu-item-border-color-focused: var(--button-border-color-focused);
+  --dropdown-menu-item-border-color-focused: var(--color-blue-4);
   // @tokens End
 `;
 //# sourceMappingURL=variables.js.map

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, showCounter, }: FilterProps): JSX.Element | null;
+export declare function Filter({ filter, filterValuesCasing }: 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, showCounter = true, }) {
+function Filter({ filter, filterValuesCasing }) {
     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, showCounter: showCounter })));
+        react_1.default.createElement(FilterComponent, { filter: filter, filterValuesCasing: filterValuesCasing })));
 }
 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, showCounter, }: FilterProps): JSX.Element;
+export declare function FilterCheckboxes({ filter, filterValuesCasing }: 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, showCounter = true, }) {
+function FilterCheckboxes({ filter, filterValuesCasing }) {
     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.options.map(({ value, count }) => {
+        react_1.default.createElement(FilterOptions_1.FilterOptions, null, filter.filteredOptions.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 === null || value === void 0 ? void 0 : value.toLowerCase()) }),
+                react_1.default.createElement(CheckboxIcon_1.CheckboxIcon, { checked: filter.selectedOptions.has(value) }),
                 react_1.default.createElement(FilterOptionLabel_1.FilterOptionLabel, { "data-translation-key": value }, (0, utils_1.changeTextCasing)(translate(value), filterValuesCasing)),
-                showCounter && react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, count)));
+                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,7 +6,5 @@ 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, hideSearch, showCounter, }: FilterContentProps): JSX.Element | null;
+export declare function FilterContent({ setFilterTerm, filters, filterTerm, filterValuesCasing, }: FilterContentProps): JSX.Element;

package/lib/components/Filter/FilterContent.js

@@ -1,40 +1,17 @@
 "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 = __importStar(require("styled-components"));
+const styled_components_1 = __importDefault(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, hideSearch, showCounter = true, }) {
+function FilterContent({ setFilterTerm, filters, filterTerm, filterValuesCasing, }) {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const hasActiveFilters = filters.some((filter) => {
@@ -53,15 +30,12 @@ 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),
-        !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 }))))));
+        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 }))))));
 }
 const FilterContentWrapper = styled_components_1.default.div `
   padding: var(--filter-content-padding-vertical) var(--filter-content-padding-horizontal);
@@ -87,9 +61,5 @@ 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,52 +1,20 @@
 "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 = __importStar(require("react"));
+const react_1 = __importDefault(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: 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 { value, onChange } = props;
     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: handleChange, placeholder: translate('catalog.filters.placeholder', 'Search') })));
+        react_1.default.createElement(Input, { value: value, onChange: (e) => onChange(e.target.value), placeholder: translate('catalog.filters.placeholder', 'Type to filter...') })));
 }
 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, showCounter, }: FilterProps): JSX.Element;
+export declare function FilterSelect({ filter, filterValuesCasing }: 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, showCounter = true, }) {
+function FilterSelect({ filter, filterValuesCasing }) {
     var _a;
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     let selectOptions = [];
-    const defaultOptionCount = filter.options.reduce((acc, option) => acc + option.count, 0);
+    const defaultOptionCount = filter.filteredOptions.reduce((acc, option) => acc + option.count, 0);
     selectOptions = [
         {
             value: '',
@@ -26,11 +26,11 @@ function FilterSelect({ filter, filterValuesCasing, showCounter = true, }) {
                 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) => ({
+        ...filter.filteredOptions.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))),
+                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/Image/Image.js

@@ -58,8 +58,8 @@ function Image(props) {
             (_a = lightboxContainerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }, [lightboxImage]);
-    const combinedStyles = Object.assign(Object.assign(Object.assign({}, (withLightbox && { cursor: 'pointer' })), (border && { border })), (typeof style === 'string' ? (0, utils_1.parseStyleString)(style) : style));
-    const lightboxOverlayStyles = typeof lightboxStyle === 'string' ? (0, utils_1.parseStyleString)(lightboxStyle) : lightboxStyle;
+    const combinedStyles = Object.assign(Object.assign(Object.assign({}, (withLightbox && { cursor: 'pointer' })), (border && { border })), (typeof style === 'string' ? { cssText: style } : style));
+    const lightboxOverlayStyles = typeof lightboxStyle === 'string' ? { cssText: lightboxStyle } : lightboxStyle;
     return (react_1.default.createElement(react_1.default.Fragment, null,
         lightboxImage ? (react_1.default.createElement(LightboxContainer, { ref: lightboxContainerRef, onClick: handleCloseLightbox, onKeyDown: handleLightboxKeyDown, tabIndex: 0 },
             react_1.default.createElement(Overlay, { style: lightboxOverlayStyles }),

package/lib/components/Markdown/Markdown.js

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

package/lib/components/Menu/MenuItem.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import type { MenuItemProps } from '../../core/types';
 import type { JSX } from 'react';
+import type { MenuItemProps } from '../../core/types';
 export declare function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Element;

package/lib/components/Menu/MenuItem.js

@@ -66,14 +66,9 @@ function MenuItem(props) {
             handleExpand();
         }
     };
-    const handleExpandOnEnter = (event) => {
-        if (event.key === 'Enter') {
-            handleOnClick();
-        }
-    };
     const chevron = hasChevron ? (isExpanded ? (react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, { size: "var(--menu-item-label-chevron-size)", color: "--tree-content-color-default" })) : (react_1.default.createElement(ChevronRightIcon_1.ChevronRightIcon, { size: "var(--menu-item-label-chevron-size)", color: "--tree-content-color-default" }))) : null;
     const httpColor = item.deprecated ? 'http-deprecated' : item.httpVerb;
-    const label = item.label && (react_1.default.createElement(MenuItemLabelWrapper, { active: item.active, deprecated: item.deprecated, depth: depth, withChevron: hasChevron, isSeparator: isSeparator, onClick: handleOnClick, onKeyDown: handleExpandOnEnter, ref: labelRef, role: item.link ? 'none' : 'link', tabIndex: !item.link ? 0 : undefined, "data-testid": "menu-item-label" },
+    const label = item.label && (react_1.default.createElement(MenuItemLabelWrapper, { active: item.active, deprecated: item.deprecated, depth: depth, withChevron: hasChevron, isSeparator: isSeparator, onClick: handleOnClick, ref: labelRef, role: item.link ? 'none' : 'link', "data-testid": "menu-item-label" },
         hasChevron ? react_1.default.createElement(ChevronWrapper, null, chevron) : null,
         item.icon ? react_1.default.createElement(MenuItemIcon, { src: item.icon }) : null,
         react_1.default.createElement(MenuItemLabelTextWrapper, null,
@@ -85,7 +80,7 @@ function MenuItem(props) {
         isDrilldown ? react_1.default.createElement(ArrowRightIcon_1.ArrowRightIcon, { size: "12px" }) : null,
         hasHttpTag ? (react_1.default.createElement(HttpTag_1.HttpTag, { color: httpColor || '' }, item.httpVerb === 'hook' ? 'event' : item.httpVerb)) : null));
     return (react_1.default.createElement(MenuItemWrapper, { "data-component-name": "Menu/MenuItem", className: generateClassName({ type, item, className }) },
-        item.link ? (react_1.default.createElement(MenuItemLink, { to: item.link, external: item.external, target: item.target, languageInsensitive: item.languageInsensitive, onKeyDown: handleExpandOnEnter }, label)) : (label),
+        item.link ? (react_1.default.createElement(MenuItemLink, { to: item.link, external: item.external, target: item.target, languageInsensitive: item.languageInsensitive }, label)) : (label),
         isNested ? (react_1.default.createElement(MenuItemNestedWrapper, { depth: depth, ref: nestedMenuRef, style: style }, isExpanded || !canUnmount ? props.children : null)) : null,
         item.separatorLine ? (react_1.default.createElement(MenuItemSeparatorLine, { depth: depth, linePosition: item.linePosition })) : null));
 }
@@ -133,6 +128,7 @@ const MenuItemWrapper = styled_components_1.default.div `
   }
 `;
 const MenuItemNestedWrapper = styled_components_1.default.div `
+  overflow: hidden;
   order: 1;
   position: relative;
 

package/lib/components/OpenApiDocs/hooks/AfterOpenApiDescription.d.ts

@@ -0,0 +1 @@
+export declare const AfterOpenApiDescription: any;

package/lib/components/OpenApiDocs/hooks/AfterOpenApiDescription.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AfterOpenApiDescription = void 0;
+exports.AfterOpenApiDescription = null;
+//# sourceMappingURL=AfterOpenApiDescription.js.map

package/lib/components/PageNavigation/NextButton.js

@@ -22,25 +22,44 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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.NextButton = NextButton;
 const React = __importStar(require("react"));
-const NavigationButton_1 = require("../../components/PageNavigation/NavigationButton");
+const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
+const Button_1 = require("../../components/Button/Button");
 const ArrowRightIcon_1 = require("../../icons/ArrowRightIcon/ArrowRightIcon");
 function NextButton({ nextPage, className }) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b;
     const { navigation } = (0, hooks_1.useThemeConfig)();
-    const { useTranslate, usePageProps } = (0, hooks_1.useThemeHooks)();
-    const { frontmatter } = usePageProps();
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const translationKey = 'page.nextButton';
-    const label = ((_b = (_a = frontmatter === null || frontmatter === void 0 ? void 0 : frontmatter.navigation) === null || _a === void 0 ? void 0 : _a.nextButton) === null || _b === void 0 ? void 0 : _b.label) || (nextPage === null || nextPage === void 0 ? void 0 : nextPage.label) || (nextPage === null || nextPage === void 0 ? void 0 : nextPage.routeSlug) || '';
-    const link = ((_d = (_c = frontmatter === null || frontmatter === void 0 ? void 0 : frontmatter.navigation) === null || _c === void 0 ? void 0 : _c.nextButton) === null || _d === void 0 ? void 0 : _d.link) || (nextPage === null || nextPage === void 0 ? void 0 : nextPage.link);
-    const text = ((_e = navigation === null || navigation === void 0 ? void 0 : navigation.nextButton) === null || _e === void 0 ? void 0 : _e.text) || translate(translationKey, { defaultValue: 'Next page' });
-    if (((_f = navigation === null || navigation === void 0 ? void 0 : navigation.nextButton) === null || _f === void 0 ? void 0 : _f.hide) || !link || !label) {
+    if (!nextPage || ((_a = navigation === null || navigation === void 0 ? void 0 : navigation.nextButton) === null || _a === void 0 ? void 0 : _a.hide)) {
         return React.createElement("div", null, "\u00A0");
     }
-    return (React.createElement(NavigationButton_1.NavigationButton, { label: label, link: link, text: text, translationKey: translationKey, position: "right", className: className, icon: React.createElement(ArrowRightIcon_1.ArrowRightIcon, null) }));
+    const nextPageText = nextPage.label || nextPage.routeSlug || '';
+    const translationKey = 'page.nextButton';
+    const label = ((_b = navigation === null || navigation === void 0 ? void 0 : navigation.nextButton) === null || _b === void 0 ? void 0 : _b.text) || translate(translationKey, { defaultValue: 'Next page' });
+    return (React.createElement(NextButtonWrapper, { "data-component-name": "PageNavigation/NextButton", "data-translation-key": translationKey },
+        React.createElement(NextPageLabel, null, label),
+        React.createElement(NextPageButton, { size: "large", to: nextPage.link, extraClass: className, variant: "link", icon: React.createElement(ArrowRightIcon_1.ArrowRightIcon, null), iconPosition: "right" }, nextPageText)));
 }
+const NextButtonWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  text-align: right;
+`;
+const NextPageButton = (0, styled_components_1.default)(Button_1.Button) `
+  text-wrap: wrap;
+  padding-left: 0;
+  padding-right: 0;
+`;
+const NextPageLabel = styled_components_1.default.span `
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  font-weight: var(--font-weight-regular);
+`;
 //# sourceMappingURL=NextButton.js.map

package/lib/components/PageNavigation/PageNavigation.js

@@ -7,8 +7,8 @@ exports.PageNavigation = PageNavigation;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
-const NextButton_1 = require("../../components/PageNavigation/NextButton");
 const PreviousButton_1 = require("../../components/PageNavigation/PreviousButton");
+const NextButton_1 = require("../../components/PageNavigation/NextButton");
 function PageNavigation({ nextPage, prevPage, className, }) {
     var _a, _b;
     const { navigation } = (0, hooks_1.useThemeConfig)();

package/lib/components/PageNavigation/PreviousButton.js

@@ -5,23 +5,39 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PreviousButton = PreviousButton;
 const react_1 = __importDefault(require("react"));
-const NavigationButton_1 = require("../../components/PageNavigation/NavigationButton");
+const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
+const Button_1 = require("../../components/Button/Button");
 const ArrowLeftIcon_1 = require("../../icons/ArrowLeftIcon/ArrowLeftIcon");
 function PreviousButton({ prevPage, className }) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b;
     const { navigation } = (0, hooks_1.useThemeConfig)();
-    const { useTranslate, usePageProps } = (0, hooks_1.useThemeHooks)();
-    const { frontmatter } = usePageProps();
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const translationKey = 'page.previousButton';
-    const label = ((_b = (_a = frontmatter === null || frontmatter === void 0 ? void 0 : frontmatter.navigation) === null || _a === void 0 ? void 0 : _a.previousButton) === null || _b === void 0 ? void 0 : _b.label) || (prevPage === null || prevPage === void 0 ? void 0 : prevPage.label) || (prevPage === null || prevPage === void 0 ? void 0 : prevPage.routeSlug) || '';
-    const link = ((_d = (_c = frontmatter === null || frontmatter === void 0 ? void 0 : frontmatter.navigation) === null || _c === void 0 ? void 0 : _c.previousButton) === null || _d === void 0 ? void 0 : _d.link) || (prevPage === null || prevPage === void 0 ? void 0 : prevPage.link);
-    const text = ((_e = navigation === null || navigation === void 0 ? void 0 : navigation.previousButton) === null || _e === void 0 ? void 0 : _e.text) ||
-        translate(translationKey, { defaultValue: 'Previous page' });
-    if (((_f = navigation === null || navigation === void 0 ? void 0 : navigation.previousButton) === null || _f === void 0 ? void 0 : _f.hide) || !link || !label) {
+    if (!prevPage || ((_a = navigation === null || navigation === void 0 ? void 0 : navigation.previousButton) === null || _a === void 0 ? void 0 : _a.hide)) {
         return react_1.default.createElement("div", null, "\u00A0");
     }
-    return (react_1.default.createElement(NavigationButton_1.NavigationButton, { label: label, link: link, text: text, translationKey: translationKey, position: "left", className: className, icon: react_1.default.createElement(ArrowLeftIcon_1.ArrowLeftIcon, null) }));
+    const prevPageText = prevPage.label || prevPage.routeSlug || '';
+    const translationKey = 'page.previousButton';
+    const label = ((_b = navigation === null || navigation === void 0 ? void 0 : navigation.previousButton) === null || _b === void 0 ? void 0 : _b.text) ||
+        translate(translationKey, { defaultValue: 'Previous page' });
+    return (react_1.default.createElement(PreviousButtonWrapper, { "data-component-name": "PageNavigation/PreviousButton", "data-translation-key": translationKey },
+        react_1.default.createElement(PreviousPageLabel, null, label),
+        react_1.default.createElement(PreviousPageButton, { size: "large", to: prevPage.link, extraClass: className, variant: "link", icon: react_1.default.createElement(ArrowLeftIcon_1.ArrowLeftIcon, null), iconPosition: "left" }, prevPageText)));
 }
+const PreviousButtonWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+`;
+const PreviousPageButton = (0, styled_components_1.default)(Button_1.Button) `
+  text-wrap: wrap;
+  padding-left: 0;
+  padding-right: 0;
+`;
+const PreviousPageLabel = styled_components_1.default.span `
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  font-weight: var(--font-weight-regular);
+`;
 //# sourceMappingURL=PreviousButton.js.map

package/lib/components/Search/SearchAiConversationInput.js

@@ -29,7 +29,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SearchAiConversationInput = SearchAiConversationInput;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const constants_1 = require("../../core/constants");
 const Button_1 = require("../../components/Button/Button");
 const SendIcon_1 = require("../../icons/SendIcon/SendIcon");
 const hooks_1 = require("../../core/hooks");
@@ -57,7 +56,7 @@ function SearchAiConversationInput({ isGeneratingResponse, onMessageSent, classN
     };
     const isDisabled = isGeneratingResponse || query.trim().length === 0;
     return (react_1.default.createElement(SearchAiConversationInputWrapper, { "data-component-name": "Search/SearchAiConversationInput", className: className },
-        react_1.default.createElement(ConversationInput, { ref: inputRef, type: "text", placeholder: placeholder || translate('search.ai.followUpQuestion', 'Ask a follow up question?'), onChange: (e) => setQuery(e.target.value), onKeyUp: handleOnKeyUp, value: query, disabled: isGeneratingResponse, maxLength: constants_1.AI_SEARCH_MAX_MESSAGE_LENGTH }),
+        react_1.default.createElement(ConversationInput, { ref: inputRef, type: "text", placeholder: placeholder || translate('search.ai.followUpQuestion', 'Ask a follow up question?'), onChange: (e) => setQuery(e.target.value), onKeyUp: handleOnKeyUp, value: query, disabled: isGeneratingResponse }),
         react_1.default.createElement(SendButton, { disabled: isDisabled, size: "small", icon: react_1.default.createElement(SendIcon_1.SendIcon, { color: isDisabled
                     ? '--button-content-color-disabled'
                     : 'var(--search-ai-conversation-input-send-button-icon-color)' }), onClick: handleSendMessage })));

package/lib/components/Select/Select.js

@@ -43,8 +43,9 @@ function Select(props) {
         return values
             .map((value) => {
             const selectedOption = options.find((option) => option.value === value);
-            return (selectedOption ||
-                (typeof value === 'string' ? { value } : value));
+            return selectedOption || typeof value === 'string'
+                ? { value }
+                : value;
         })
             .filter((option) => !!option);
     };
@@ -150,23 +151,11 @@ function Select(props) {
         return !!selectedOptions.find((selectOption) => selectOption.value === option.value || selectOption.value === option.label);
     };
     const renderDefaultInput = (inputRef) => {
-        return (react_1.default.createElement(SelectInput_1.SelectInput, { id: inputId, listboxId: inputId, selectedOptions: selectedOptions, searchValue: searchValue, placeholder: placeholder, stickyValue: stickyInputValue, multiple: multiple, searchable: searchable, clearable: clearable, customIcon: icon, inputRef: inputRef, onlyIcon: onlyIcon, clearHandler: clearHandler, searchHandler: searchHandler, inputBlurHandler: inputBlurHandler, inputFocusHandler: inputFocusHandler, clickHandler: inputClickHandler }));
+        return (react_1.default.createElement(SelectInput_1.SelectInput, { id: inputId, selectedOptions: selectedOptions, searchValue: searchValue, placeholder: placeholder, stickyValue: stickyInputValue, multiple: multiple, searchable: searchable, clearable: clearable, customIcon: icon, inputRef: inputRef, onlyIcon: onlyIcon, clearHandler: clearHandler, searchHandler: searchHandler, inputBlurHandler: inputBlurHandler, inputFocusHandler: inputFocusHandler, clickHandler: inputClickHandler }));
     };
-    return (react_1.default.createElement(exports.SelectWrapper, Object.assign({ "data-component-name": "Select/Select", ref: selectRef }, dataAttributes, { disabled: disabled, "data-testid": dataTestId, className: className, onKeyDown: (e) => {
-            if (e.key === 'Enter' && document.activeElement === selectRef.current) {
-                e.preventDefault();
-                setDropdownActive(!dropdownActive);
-            }
-        }, tabIndex: 0, "aria-haspopup": "listbox", "aria-expanded": dropdownActive, "aria-label": "Select option", onFocus: (e) => {
-            var _a;
-            if (e.target === selectRef.current) {
-                (_a = selectInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            }
-        }, onMouseDown: (e) => {
-            e.preventDefault();
-        } }),
+    return (react_1.default.createElement(exports.SelectWrapper, Object.assign({ "data-component-name": "Select/Select", ref: selectRef }, dataAttributes, { disabled: disabled, "data-testid": dataTestId, className: className }),
         react_1.default.createElement(SelectDropdown, { closeOnClick: !multiple, withArrow: withArrow, trigger: renderInput ? renderInput() : renderDefaultInput(selectInputRef), triggerEvent: triggerEvent, placement: placement, alignment: alignment, active: !renderInput ? dropdownActive : undefined },
-            react_1.default.createElement(SelectDropdownMenu, { role: "listbox", footer: footer }, filteredOptions.length === 0 ? (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { disabled: true }, "No results")) : (filteredOptions.map((option, index) => {
+            react_1.default.createElement(SelectDropdownMenu, { footer: footer }, filteredOptions.length === 0 ? (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { disabled: true }, "No results")) : (filteredOptions.map((option, index) => {
                 return (react_1.default.createElement(react_1.Fragment, { key: index },
                     react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { onAction: () => selectHandler(option), prefix: !hideCheckmarkIcon &&
                             (checkmarkIconPosition ? checkmarkIconPosition === 'start' : false) &&
@@ -187,10 +176,6 @@ exports.SelectWrapper = styled_components_1.default.div `
   color: var(--select-text-color);
   min-width: 0;
 
-  &:focus-visible {
-    outline: 1px solid var(--button-border-color-focused);
-  }
-
   ${({ disabled }) => disabled &&
     `
     opacity: 0.59;
@@ -206,6 +191,5 @@ const SelectDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown) `
 `;
 const SelectDropdownMenu = (0, styled_components_1.default)(DropdownMenu_1.DropdownMenu) `
   width: 100%;
-  margin-top: var(--spacing-unit);
 `;
 //# sourceMappingURL=Select.js.map

package/lib/components/Select/SelectInput.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 import type { SelectOption } from '../../core/types/select';
 type SelectInputProps<T> = {
     id?: string;
-    listboxId?: string;
     selectedOptions: SelectOption<T>[];
     searchValue: any;
     stickyValue: any;

package/lib/components/Select/SelectInput.js

@@ -34,7 +34,7 @@ const Tag_1 = require("../../components/Tag/Tag");
 const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
 const Button_1 = require("../../components/Button/Button");
 function SelectInput(props) {
-    const { id, listboxId, onlyIcon, icon, customIcon, selectedOptions, placeholder, stickyValue, multiple, searchable, clearable, clearHandler, searchHandler, clickHandler, searchValue, inputBlurHandler, inputFocusHandler, } = props;
+    const { id, onlyIcon, icon, customIcon, selectedOptions, placeholder, stickyValue, multiple, searchable, clearable, clearHandler, searchHandler, clickHandler, searchValue, inputBlurHandler, inputFocusHandler, } = props;
     const inputRef = (0, react_1.useRef)(null);
     const onChangeHandler = (e) => {
         var _a;
@@ -83,14 +83,10 @@ function SelectInput(props) {
             else {
                 props.inputRef.current = input;
             }
-        }, width: multiple ? (!searchValue && selectedOptions.length ? '10px' : 'auto') : '100%', tabIndex: 0, onFocus: (e) => {
-            e.stopPropagation();
-        }, onMouseDown: (e) => {
-            e.preventDefault();
-        } }));
+        }, width: multiple ? (!searchValue && selectedOptions.length ? '10px' : 'auto') : '100%' }));
     const simpleValue = selectedOptions.length ? (selectedOptions[0].label || selectedOptions[0].element || selectedOptions[0].value) : (react_1.default.createElement(SelectInternalInputPlaceholder, null, placeholder));
     const multipleValues = selectedOptions.length ? (selectTags) : (react_1.default.createElement(SelectInternalInputPlaceholder, null, placeholder));
-    return (react_1.default.createElement(exports.SelectInputWrapper, Object.assign({}, props, { id: id, onFocus: onFocusHandler, onClick: onClickHandler, role: "button", "aria-haspopup": "listbox", "aria-controls": listboxId, "aria-owns": listboxId, "aria-label": "Select option" }),
+    return (react_1.default.createElement(exports.SelectInputWrapper, Object.assign({}, props, { id: id, onFocus: onFocusHandler, onClick: onClickHandler }),
         !onlyIcon && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(SelectInputValue, null, multiple ? (searchable ? (react_1.default.createElement(react_1.default.Fragment, null,
                 selectTags,