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

package/lib/I18n/LanguagePicker.js

@@ -21,14 +21,18 @@ const LanguagePicker = (props) => {
     if (!locale) {
         return null;
     }
-    const selected = locale.name || locale.code;
-    const languageItems = locales.map((locale) => (react_1.default.createElement(LanguageItem, { onClick: () => {
-            const newLangPathname = (0, utils_1.withPathPrefix)((0, utils_1.getPathnameForLocale)(location.pathname, defaultLocale, locale.code, locales));
+    const value = locale.code;
+    const languageItems = locales.map((locale) => ({
+        element: react_1.default.createElement(LanguageItem, { role: "link" }, locale.name || locale.code || ''),
+        value: locale.code,
+        title: locale.name || locale.code || '',
+    }));
+    return (react_1.default.createElement(LanguageSelect, { value: value, options: languageItems, onChange: (value) => {
+            const newLangPathname = (0, utils_1.withPathPrefix)((0, utils_1.getPathnameForLocale)(location.pathname, defaultLocale, value, locales));
             const newUrlWithLanguage = `${newLangPathname}${location.search}${location.hash}`;
             history.push(newUrlWithLanguage);
-            props.onChangeLanguage(locale.code);
-        }, key: locale.code, role: "link" }, locale.name || locale.code || '')));
-    return (react_1.default.createElement(LanguageSelect, { selected: selected, options: languageItems, triggerEvent: "hover", placement: props.placement, alignment: props.alignment, icon: react_1.default.createElement(icons_1.LanguageIcon, null), onlyIcon: props.onlyIcon, withArrow: false }));
+            props.onChangeLanguage(value);
+        }, triggerEvent: "hover", placement: props.placement, alignment: props.alignment, icon: react_1.default.createElement(icons_1.LanguageIcon, null), onlyIcon: props.onlyIcon, withArrow: false }));
 };
 exports.LanguagePicker = LanguagePicker;
 const LanguageSelect = (0, styled_components_1.default)(Select_1.Select).attrs(() => ({
@@ -36,6 +40,13 @@ const LanguageSelect = (0, styled_components_1.default)(Select_1.Select).attrs((
         'data-component-name': 'I18n/LanguagePicker',
     },
 })) `
+  --select-list-item-active-background-color: var(
+    --language-picker-list-item-active-background-color
+  );
+  --select-list-item-hover-background-color: var(
+    --language-picker-list-item-hover-background-color
+  );
+
   display: none;
   font-size: var(--language-picker-font-size);
   font-weight: var(--language-picker-font-weight);
@@ -73,10 +84,6 @@ const LanguageSelect = (0, styled_components_1.default)(Select_1.Select).attrs((
       padding: var(--language-picker-list-item-vertical-padding)
         var(--language-picker-list-item-horizontal-padding);
     }
-
-    :hover {
-      background-color: var(--language-picker-list-item-active-background-color);
-    }
   }
 
   ${({ theme }) => theme.mediaQueries.medium} {

package/lib/I18n/styledVariables.js

@@ -33,6 +33,7 @@ exports.languagePicker = (0, styled_components_1.css) `
   --language-picker-list-item-vertical-padding: var(--select-list-item-vertical-padding); // @presenter Spacing
   --language-picker-list-item-border-radius: var(--select-list-item-border-radius); // @presenter BorderRadius
   --language-picker-list-item-active-background-color: var(--select-list-item-active-background-color); // @presenter Color
+  --language-picker-list-item-hover-background-color: var(--select-list-item-hover-background-color); // @presenter Color
 
   // @tokens End
 `;

package/lib/components/Breadcrumbs/Breadcrumb.js

@@ -18,10 +18,6 @@ const BreadcrumbText = styled_components_1.default.div `
 const BreadcrumbWrapper = styled_components_1.default.div `
   border-radius: var(--border-radius);
 
-  &:first-child {
-    padding-left: 0;
-  }
-
   ${(props) => props.isLink &&
     `
     &:hover {

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -24,7 +24,7 @@ const Breadcrumbs = (props) => {
                         total_breadcrumbs: breadcrumbs.length,
                     });
                 } }),
-            isLast ? null : react_1.default.createElement("div", null, "/")));
+            isLast ? null : react_1.default.createElement("span", null, "/")));
     })));
 };
 exports.Breadcrumbs = Breadcrumbs;
@@ -40,6 +40,10 @@ const Container = styled_components_1.default.div `
     padding: var(--breadcrumbs-padding);
   }
 
+  > span {
+    padding: var(--breadcrumbs-gap);
+  }
+
   @media print {
     display: none;
   }

package/lib/components/Breadcrumbs/styledVariables.js

@@ -11,7 +11,8 @@ exports.breadcrumbs = (0, styled_components_1.css) `
   --breadcrumbs-font-size: var(--font-size-base); // @presenter FontSize
   --breadcrumbs-active-text-color: var(--text-primary); // @presenter Color
   --breadcrumbs-hover-text-decoration: underline; // @presenter TextDecoration
-  --breadcrumbs-padding: 0 var(--spacing-xs); // @presenter Spacing
+  --breadcrumbs-padding: 0; // @presenter Spacing
+  --breadcrumbs-gap: var(--spacing-xs);
   --breadcrumbs-margin-bottom: var(--spacing-lg); // @presenter Spacing
 
   // @tokens End

package/lib/components/CodeBlock/styledVariables.js

@@ -50,7 +50,7 @@ exports.code = (0, styled_components_1.css) `
   --code-block-controls-text-color: var(--text-secondary); // @presenter Color
   --code-block-controls-background-color: var(--bg-overlay); // @presenter Color
   --code-block-controls-border: 1px solid var(--border-primary); // @presenter Border
-  --code-block-controls-padding: 0 5px; // @presenter Spacing
+  --code-block-controls-padding: 0 var(--spacing-xs); // @presenter Spacing
   --code-block-icon-controls-background-color: var(--code-block-controls-background-color);
   --code-block-text-controls-background-color: var(--code-block-controls-background-color);
 

package/lib/components/Filter/Filter.js

@@ -11,7 +11,7 @@ const hooks_1 = require("../../mocks/hooks");
 const icons_1 = require("../../icons");
 const Select_1 = require("../../components/Select");
 function Filter({ filter, filterValuesCasing, }) {
-    var _a, _b;
+    var _a;
     const { translate } = (0, hooks_1.useTranslate)();
     const translationKeys = {
         selectAll: 'theme.catalog.filters.select.all',
@@ -25,30 +25,23 @@ function Filter({ filter, filterValuesCasing, }) {
         selectOptions = [
             {
                 value: '',
-                component: (react_1.default.createElement(FilterOption, { key: "all", role: "link", onClick: () => filter.selectOption('') },
+                element: (react_1.default.createElement(FilterOption, { key: "all", onClick: () => filter.selectOption('') },
                     react_1.default.createElement(FilterOptionLabel, null, translate(translationKeys.selectAll, 'All')),
                     react_1.default.createElement(FilterOptionCount, null, defaultOptionCount))),
             },
         ];
         selectOptions.push(...filter.filteredOptions.map((option) => ({
             value: option.value,
-            component: (react_1.default.createElement(FilterOption, { key: option.value, role: "link", onClick: () => filter.selectOption(option.value) },
+            element: (react_1.default.createElement(FilterOption, { key: option.value },
                 react_1.default.createElement(FilterOptionLabel, null, changeCasing(translate(option.value), filterValuesCasing)),
                 react_1.default.createElement(FilterOptionCount, null, option.count))),
         })));
     }
-    let selectedOptionComponent;
-    if (filter.type === 'select') {
-        const selectedOption = (_a = filter.selectedOptions.values().next()) === null || _a === void 0 ? void 0 : _a.value;
-        selectedOptionComponent =
-            ((_b = selectOptions.find((option) => option.value === selectedOption)) === null || _b === void 0 ? void 0 : _b.component) ||
-                selectOptions[0].component;
-    }
     return (react_1.default.createElement(FilterGroup, { key: filter.property + filter.title },
         react_1.default.createElement(FilterTitle, null,
             translate(filter.titleTranslationKey, filter.title),
             " "),
-        filter.type === 'select' ? (react_1.default.createElement(StyledSelect, { selected: selectedOptionComponent, options: selectOptions.map((option) => option.component) })) : filter.type === 'date-range' ? (react_1.default.createElement(react_1.default.Fragment, null,
+        filter.type === 'select' ? (react_1.default.createElement(StyledSelect, { value: (_a = filter.selectedOptions.values().next()) === null || _a === void 0 ? void 0 : _a.value, onChange: (value) => filter.selectOption(value), options: selectOptions })) : filter.type === 'date-range' ? (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(DatePickerWrapper, null,
                 react_1.default.createElement("span", null, "From:"),
                 react_1.default.createElement(react_date_picker_1.DatePicker, { closeCalendar: true, format: "y-MM-dd", dayPlaceholder: "DD", monthPlaceholder: "MM", yearPlaceholder: "YYYY", value: filter.selectedOptions.from ? new Date(filter.selectedOptions.from) : null, minDetail: "decade", maxDate: new Date(), onChange: (from) => {

package/lib/components/LastUpdated/LastUpdated.js

@@ -55,6 +55,7 @@ function LastUpdated(props) {
         : translate(translationKey, 'Last updated on');
     return (React.createElement(Wrapper, { className: props.className, "data-component-name": "LastUpdated/LastUpdated", rawOnPrint: format === 'timeago', "data-print-datetime": isoDate, "data-translation-key": translationKey },
         text,
+        " ",
         React.createElement("time", { dateTime: isoDate }, lastUpdatedString)));
 }
 exports.LastUpdated = LastUpdated;

package/lib/components/Markdown/styledVariables.js

@@ -149,7 +149,7 @@ exports.markdown = (0, styled_components_1.css) `
   * @tokens Markdown Table
   */
 
-  --md-table-font-size: var(--font-size-base); // @presenter FontSize
+  --md-table-font-size: var(--font-size-sm); // @presenter FontSize
   --md-table-margin-vertical: 20px; // @presenter Spacing
   --md-table-background-color: transparent; // @presenter Color
 
@@ -220,7 +220,7 @@ exports.markdown = (0, styled_components_1.css) `
 `;
 exports.mermaid = (0, styled_components_1.css) `
   /**
-  * @tokens Mermaid 
+  * @tokens Mermaid
   */
 
   --mermaid-background-color: var(--bg-raised-light); // @presenter Color

package/lib/components/Product/ProductPicker.js

@@ -7,7 +7,8 @@ exports.ProductPicker = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../mocks/hooks");
-const Link_1 = require("../../mocks/Link");
+const usePreloadHistory_1 = require("../../mocks/usePreloadHistory");
+// import { Link } from '../../mocks/Link';
 const icons_1 = require("../../icons");
 const Select_1 = require("../Select");
 const Product_1 = require("./Product");
@@ -15,11 +16,22 @@ const ProductPicker = () => {
     var _a;
     const globalData = (0, hooks_1.useGlobalData)();
     const currentProduct = (0, hooks_1.useCurrentProduct)();
-    const currentProductComponent = currentProduct ? (react_1.default.createElement(Product_1.Product, { product: currentProduct })) : ('Products');
+    // const currentProductComponent = currentProduct ? (
+    //   <Product product={currentProduct} />
+    // ) : (
+    //   'Products'
+    // );
+    const { push } = (0, usePreloadHistory_1.usePreloadHistory)();
     const products = Object.values(((_a = globalData === null || globalData === void 0 ? void 0 : globalData.theme) === null || _a === void 0 ? void 0 : _a.products) || {});
-    const productComponents = products.map((product) => (react_1.default.createElement(Link_1.Link, { key: product.slug, to: product.link },
-        react_1.default.createElement(Product_1.Product, { product: product }))));
-    return products.length ? (react_1.default.createElement(ProductSelect, { selected: currentProductComponent, options: productComponents, triggerEvent: "hover" })) : null;
+    const productComponents = products.map((product) => ({
+        element: react_1.default.createElement(Product_1.Product, { product: product }),
+        value: product,
+    }));
+    return products.length ? (react_1.default.createElement(ProductSelect, { value: currentProduct, placeholder: "Products", options: productComponents, triggerEvent: "hover", onChange: (product) => {
+            if (!product)
+                return;
+            push(product.link);
+        } })) : null;
 };
 exports.ProductPicker = ProductPicker;
 const ProductSelect = (0, styled_components_1.default)(Select_1.Select).attrs(() => ({

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

@@ -1,18 +1,23 @@
 import React from 'react';
-export interface SelectProps {
-    selected: React.ReactNode | string;
-    options: React.ReactNode[] | string[];
+export interface SelectProps<T = any> {
+    value: T;
+    options: {
+        element: React.ReactNode | string;
+        value: T;
+        label?: string;
+    }[];
     dataAttributes?: Record<string, string>;
     className?: string;
     withArrow?: boolean;
     triggerEvent?: 'click' | 'hover';
-    onChange?: (value: React.ReactNode | string) => void;
+    onChange?: (value: any) => void;
     placement?: 'top' | 'bottom';
     alignment?: 'start' | 'end';
     icon?: React.ReactNode;
     onlyIcon?: boolean;
+    placeholder?: string;
 }
-export declare const Select: ({ className, selected, options, dataAttributes, withArrow, triggerEvent, onChange, placement, alignment, icon, onlyIcon, }: SelectProps) => JSX.Element;
+export declare function Select<T>({ className, value, options, dataAttributes, withArrow, triggerEvent, onChange, placement, alignment, icon, onlyIcon, placeholder, }: SelectProps<T>): JSX.Element;
 export declare const SelectContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SelectInput: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SelectInputValue: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -20,4 +25,6 @@ export declare const SelectList: import("styled-components").StyledComponent<"ul
     placement?: string | undefined;
     alignment?: string | undefined;
 }, never>;
-export declare const SelectListItem: import("styled-components").StyledComponent<"li", any, {}, never>;
+export declare const SelectListItem: import("styled-components").StyledComponent<"li", any, {
+    selected: boolean;
+}, never>;

package/lib/components/Select/Select.js

@@ -31,10 +31,10 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const icons_1 = require("../../icons");
 const hooks_1 = require("../../hooks");
-const Select = ({ className, selected, options, dataAttributes, withArrow = true, triggerEvent = 'click', onChange, placement, alignment, icon, onlyIcon, }) => {
-    const selectRef = (0, react_1.useRef)(null);
+function Select({ className, value, options, dataAttributes, withArrow = true, triggerEvent = 'click', onChange, placement, alignment, icon, onlyIcon, placeholder, }) {
+    const containerRef = (0, react_1.useRef)(null);
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    const [_selected, setSelected] = (0, react_1.useState)(selected);
+    // const [selectedIdx, setSelectedIdx] = useState<React.ReactNode | string>(selected);
     const handleOpen = () => {
         setIsOpen(true);
     };
@@ -45,22 +45,23 @@ const Select = ({ className, selected, options, dataAttributes, withArrow = true
         setIsOpen(!isOpen);
     };
     const handleSelect = (value) => {
-        setSelected(value);
+        // setSelectedIdx(options.findIndex(o => o.value === value));
         setIsOpen(false);
         onChange === null || onChange === void 0 ? void 0 : onChange(value);
     };
-    (0, hooks_1.useOutsideClick)(selectRef, handleClose);
-    (0, react_1.useEffect)(() => {
-        handleSelect(selected);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [selected]);
-    return (react_1.default.createElement(exports.SelectContainer, Object.assign({}, dataAttributes, { "data-testid": "select", className: className, ref: selectRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: triggerEvent === 'hover' ? handleClose : undefined, onClick: triggerEvent === 'click' ? handleToggle : undefined }),
+    (0, hooks_1.useOutsideClick)(containerRef, handleClose);
+    // useEffect(() => {
+    //   handleSelect(selected);
+    //   // eslint-disable-next-line react-hooks/exhaustive-deps
+    // }, [selected]);
+    const selectedOption = options.find((option) => option.value === value);
+    return (react_1.default.createElement(exports.SelectContainer, Object.assign({}, dataAttributes, { "data-testid": "select", className: className, ref: containerRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: triggerEvent === 'hover' ? handleClose : undefined, onClick: triggerEvent === 'click' ? handleToggle : undefined }),
         react_1.default.createElement(exports.SelectInput, null,
-            !onlyIcon && react_1.default.createElement(exports.SelectInputValue, null, _selected),
+            !onlyIcon && (react_1.default.createElement(exports.SelectInputValue, null, (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.element) || placeholder)),
             icon,
             withArrow ? isOpen ? react_1.default.createElement(icons_1.ArrowIcon, { direction: "up" }) : react_1.default.createElement(icons_1.ArrowIcon, { direction: "down" }) : null),
-        isOpen && (react_1.default.createElement(exports.SelectList, { placement: placement, alignment: alignment }, options.map((option, index) => (react_1.default.createElement(exports.SelectListItem, { key: index, onClick: () => handleSelect(option) }, option)))))));
-};
+        isOpen && (react_1.default.createElement(exports.SelectList, { placement: placement, alignment: alignment }, options.map((option, index) => (react_1.default.createElement(exports.SelectListItem, { key: index, onClick: () => handleSelect(option.value), selected: option.value === value }, typeof option.element === 'string' ? react_1.default.createElement("div", null, option.element) : option.element)))))));
+}
 exports.Select = Select;
 exports.SelectContainer = styled_components_1.default.div `
   position: relative;
@@ -91,8 +92,8 @@ exports.SelectInputValue = styled_components_1.default.div `
 `;
 exports.SelectList = styled_components_1.default.ul `
   position: absolute;
-  top: ${({ placement }) => (placement === 'top' ? 'auto' : 'calc(100% + 2px)')};
-  bottom: ${({ placement }) => (placement === 'top' ? 'calc(100% + 2px)' : 'auto')};
+  top: ${({ placement }) => (placement === 'top' ? 'auto' : '100%')};
+  bottom: ${({ placement }) => (placement === 'top' ? '100%' : 'auto')};
   left: ${({ alignment }) => (alignment === 'start' ? '0' : 'auto')};
   right: ${({ alignment }) => (alignment === 'end' ? '0' : 'auto')};
   margin: 0;
@@ -117,7 +118,12 @@ exports.SelectListItem = styled_components_1.default.li `
   }
 
   :hover {
-    background-color: var(--select-list-item-active-background-color);
+    background-color: var(--select-list-item-hover-background-color);
   }
+
+  ${({ selected }) => selected &&
+    `
+    &, &:hover { background-color: var(--select-list-item-active-background-color); }
+    `}
 `;
 //# sourceMappingURL=Select.js.map

package/lib/components/Select/styledVariables.js

@@ -26,7 +26,8 @@ exports.select = (0, styled_components_1.css) `
   --select-list-item-horizontal-padding: var(--spacing-base); // @presenter Spacing
   --select-list-item-vertical-padding: var(--spacing-xs); // @presenter Spacing
   --select-list-item-border-radius: var(--border-radius); // @presenter BorderRadius
-  --select-list-item-active-background-color: var(--bg-raised); // @presenter Color
+  --select-list-item-active-background-color: var(--color-primary-bg); // @presenter Color
+  --select-list-item-hover-background-color: var(--bg-raised); // @presenter Color
 
   // @tokens End
 `;

package/lib/components/Sidebar/VersionPicker.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
 import type { SelectProps } from '../Select';
-export declare const VersionPicker: import("styled-components").StyledComponent<({ className, selected, options, dataAttributes, withArrow, triggerEvent, onChange, placement, alignment, icon, onlyIcon, }: SelectProps) => JSX.Element, any, {
+import { Select } from '../Select';
+export declare const VersionPicker: import("styled-components").StyledComponent<typeof Select, any, {
     dataAttributes: {
         'data-component-name': string;
     };
-} & SelectProps, "dataAttributes">;
+} & SelectProps<any>, "dataAttributes">;

package/lib/components/Sidebar/VersionPicker.js

@@ -11,6 +11,11 @@ exports.VersionPicker = (0, styled_components_1.default)(Select_1.Select).attrs(
         'data-component-name': 'Sidebar/VersionPicker',
     },
 })) `
+  --select-list-item-active-background-color: var(
+    --version-picker-list-item-active-background-color
+  );
+  --select-list-item-hover-background-color: var(--version-picker-list-item-hover-background-color);
+
   font-size: var(--version-picker-font-size);
   font-weight: var(--version-picker-font-weight);
   border-radius: var(--version-picker-border-radius);
@@ -42,10 +47,6 @@ exports.VersionPicker = (0, styled_components_1.default)(Select_1.Select).attrs(
       padding: var(--version-picker-list-item-vertical-padding)
         var(--version-picker-list-item-horizontal-padding);
     }
-
-    :hover {
-      background-color: var(--version-picker-list-item-active-background-color);
-    }
   }
 `;
 //# sourceMappingURL=VersionPicker.js.map

package/lib/components/Sidebar/styledVariables.js

@@ -77,7 +77,7 @@ exports.sidebar = (0, styled_components_1.css) `
     */
   --sidebar-item-border-radius: 6px; // @presenter BorderRadius
 
-  /** 
+  /**
     * @tokens Sidebar item icon
     */
   --sidebar-item-icon-size: var(--spacing-xl);
@@ -163,7 +163,7 @@ exports.sidebar = (0, styled_components_1.css) `
   --sidebar-back-padding-left: var(--spacing-xs); // @presenter Spacing
   --sidebar-back-button-icon: none;
 
-  /** 
+  /**
   * @tokens Sidebar footer
   */
   --sidebar-footer-padding-vertical: var(--spacing-sm); // @presenter Spacing
@@ -177,7 +177,7 @@ exports.sidebar = (0, styled_components_1.css) `
   --sidebar-controls-collapsed-gap: var(--spacing-xs); // @presenter Spacing
   --sidebar-controls-collapsed-padding-vertical: var(--spacing-xs); // @presenter Spacing
   --sidebar-controls-collapsed-padding-horizontal: var(--spacing-xxs); // @presenter Spacing
- 
+
   // @tokens End
 `;
 exports.versionPicker = (0, styled_components_1.css) `
@@ -209,7 +209,8 @@ exports.versionPicker = (0, styled_components_1.css) `
   --version-picker-list-item-vertical-padding: var(--select-list-item-vertical-padding); // @presenter Spacing
   --version-picker-list-item-border-radius: var(--select-list-item-border-radius); // @presenter BorderRadius
   --version-picker-list-item-active-background-color: var(--select-list-item-active-background-color); // @presenter Color
-  
+  --version-picker-list-item-hover-background-color: var(--select-list-item-hover-background-color); // @presenter Color
+
   // @tokens End
 `;
 //# sourceMappingURL=styledVariables.js.map

package/lib/components/Tiles/TileHeader.js

@@ -14,7 +14,7 @@ exports.TileHeader = styled_components_1.default.h3.attrs(({ className }) => ({
   color: ${(props) => props.color || 'var(--h3-color)'};
   font-family: var(--h3-font-family);
   && {
-    margin: var(--h3-margin-top) 0 var(--h3-margin-bottom);
+    margin: 0 0 var(--h3-margin-bottom);
   }
 `;
 //# sourceMappingURL=TileHeader.js.map

package/lib/globalStyle.js

@@ -268,13 +268,13 @@ const typography = (0, styled_components_1.css) `
    * @presenter LineHeight
    */
 
-  --line-height-base: 22px;
-  --line-height-xsm: 18px;
-  --line-height-sm: 20px;
-  --line-height-md: 24px;
-  --line-height-lg: 26px;
-  --line-height-xlg: 28px;
-  --line-height-xxlg: 30px;
+  --line-height-base: 24px;
+  --line-height-xsm: 20px;
+  --line-height-sm: 22px;
+  --line-height-md: 26px;
+  --line-height-lg: 28px;
+  --line-height-xlg: 30px;
+  --line-height-xxlg: 32px;
 
   /**
     * @tokens Font Sizes
@@ -417,7 +417,7 @@ const headingsTypography = (0, styled_components_1.css) `
   --h3-font-family: var(--heading-font-family); // @presenter FontFamily
   --h3-font-weight: var(--heading-font-weight); // @presenter FontWeight
   --h3-font-size: 18px; // @presenter FontSize
-  --h3-line-height: 18px; // @presenter LineHeight
+  --h3-line-height: 22px; // @presenter LineHeight
   --h3-margin-top: var(--heading-margin-top); // @presenter Spacing
   --h3-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
   --h3-text-color: var(--heading-text-color); // @presenter Color
@@ -589,9 +589,9 @@ const apiReferenceDocs = (0, styled_components_1.css) `
     * @presenter Color
     */
 
-  --schema-recursive-text-color: var(--color-warning); // @presenter Color
+  --schema-recursive-text-color: var(--color-warning-active); // @presenter Color
   --schema-recursive-background-color: var(--color-warning-bg); // @presenter Color
-  --schema-recursive-border-color: var(--color-warning-border); // @presenter Color
+  --schema-recursive-border-color: var(--color-warning-active); // @presenter Color
 
   /**
     * @tokens GraphQL Docs Reference Schema Non null label
@@ -696,9 +696,9 @@ const badges = (0, styled_components_1.css) `
     * @tokens Deprecated Badge
     */
 
-  --badge-deprecated-text-color: var(--color-warning); // @presenter Color
+  --badge-deprecated-text-color: var(--color-warning-active); // @presenter Color
   --badge-deprecated-background-color: var(--color-warning-bg); // @presenter Color
-  --badge-deprecated-border-color: var(--color-warning-border); // @presenter Color
+  --badge-deprecated-border-color: var(--color-warning-active); // @presenter Color
   --badge-deprecated-border: 1px solid var(--badge-deprecated-border-color); // @presenter Border
   --badge-deprecated-border-radius: var(--border-radius); // @presenter BorderRadius
 

package/package.json

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

package/src/I18n/LanguagePicker.tsx

@@ -27,28 +27,25 @@ export const LanguagePicker = (props: LanguagePickerProps) => {
     return null;
   }
 
-  const selected = locale.name || locale.code;
-  const languageItems = locales.map((locale) => (
-    <LanguageItem
-      onClick={() => {
+  const value = locale.code;
+  const languageItems = locales.map((locale) => ({
+    element: <LanguageItem role="link">{locale.name || locale.code || ''}</LanguageItem>,
+    value: locale.code,
+    title: locale.name || locale.code || '',
+  }));
+
+  return (
+    <LanguageSelect
+      value={value}
+      options={languageItems}
+      onChange={(value: string) => {
         const newLangPathname = withPathPrefix(
-          getPathnameForLocale(location.pathname, defaultLocale, locale.code, locales),
+          getPathnameForLocale(location.pathname, defaultLocale, value, locales),
         );
         const newUrlWithLanguage = `${newLangPathname}${location.search}${location.hash}`;
         history.push(newUrlWithLanguage);
-        props.onChangeLanguage(locale.code);
+        props.onChangeLanguage(value);
       }}
-      key={locale.code}
-      role="link"
-    >
-      {locale.name || locale.code || ''}
-    </LanguageItem>
-  ));
-
-  return (
-    <LanguageSelect
-      selected={selected}
-      options={languageItems}
       triggerEvent="hover"
       placement={props.placement}
       alignment={props.alignment}
@@ -64,6 +61,13 @@ const LanguageSelect = styled(Select).attrs(() => ({
     'data-component-name': 'I18n/LanguagePicker',
   },
 }))`
+  --select-list-item-active-background-color: var(
+    --language-picker-list-item-active-background-color
+  );
+  --select-list-item-hover-background-color: var(
+    --language-picker-list-item-hover-background-color
+  );
+
   display: none;
   font-size: var(--language-picker-font-size);
   font-weight: var(--language-picker-font-weight);
@@ -101,10 +105,6 @@ const LanguageSelect = styled(Select).attrs(() => ({
       padding: var(--language-picker-list-item-vertical-padding)
         var(--language-picker-list-item-horizontal-padding);
     }
-
-    :hover {
-      background-color: var(--language-picker-list-item-active-background-color);
-    }
   }
 
   ${({ theme }) => theme.mediaQueries.medium} {
@@ -116,4 +116,5 @@ const LanguageSelect = styled(Select).attrs(() => ({
     background: var(--language-picker-hover-background-color);
   }
 `;
+
 const LanguageItem = styled.div``;

package/src/I18n/styledVariables.ts

@@ -31,6 +31,7 @@ export const languagePicker = css`
   --language-picker-list-item-vertical-padding: var(--select-list-item-vertical-padding); // @presenter Spacing
   --language-picker-list-item-border-radius: var(--select-list-item-border-radius); // @presenter BorderRadius
   --language-picker-list-item-active-background-color: var(--select-list-item-active-background-color); // @presenter Color
+  --language-picker-list-item-hover-background-color: var(--select-list-item-hover-background-color); // @presenter Color
 
   // @tokens End
 `

package/src/components/Breadcrumbs/Breadcrumb.tsx

@@ -34,10 +34,6 @@ const BreadcrumbText = styled.div`
 const BreadcrumbWrapper = styled.div<{ isActive: boolean; isLink: boolean }>`
   border-radius: var(--border-radius);
 
-  &:first-child {
-    padding-left: 0;
-  }
-
   ${(props) =>
     props.isLink &&
     `

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -31,7 +31,7 @@ export const Breadcrumbs = (props: { className?: string }) => {
                 });
               }}
             />
-            {isLast ? null : <div>/</div>}
+            {isLast ? null : <span>/</span>}
           </React.Fragment>
         );
       })}
@@ -51,6 +51,10 @@ const Container = styled.div`
     padding: var(--breadcrumbs-padding);
   }
 
+  > span {
+    padding: var(--breadcrumbs-gap);
+  }
+
   @media print {
     display: none;
   }

package/src/components/Breadcrumbs/styledVariables.ts

@@ -9,7 +9,8 @@ export const breadcrumbs = css`
   --breadcrumbs-font-size: var(--font-size-base); // @presenter FontSize
   --breadcrumbs-active-text-color: var(--text-primary); // @presenter Color
   --breadcrumbs-hover-text-decoration: underline; // @presenter TextDecoration
-  --breadcrumbs-padding: 0 var(--spacing-xs); // @presenter Spacing
+  --breadcrumbs-padding: 0; // @presenter Spacing
+  --breadcrumbs-gap: var(--spacing-xs);
   --breadcrumbs-margin-bottom: var(--spacing-lg); // @presenter Spacing
 
   // @tokens End

package/src/components/CodeBlock/styledVariables.ts

@@ -48,7 +48,7 @@ export const code = css`
   --code-block-controls-text-color: var(--text-secondary); // @presenter Color
   --code-block-controls-background-color: var(--bg-overlay); // @presenter Color
   --code-block-controls-border: 1px solid var(--border-primary); // @presenter Border
-  --code-block-controls-padding: 0 5px; // @presenter Spacing
+  --code-block-controls-padding: 0 var(--spacing-xs); // @presenter Spacing
   --code-block-icon-controls-background-color: var(--code-block-controls-background-color);
   --code-block-text-controls-background-color: var(--code-block-controls-background-color);
 

package/src/components/Filter/Filter.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { DatePicker } from 'react-date-picker';
 
-import type { ReactNode } from 'react';
+// import type { ReactNode } from 'react';
 
 import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalog';
 import { useTranslate } from '@portal/hooks';
@@ -25,7 +25,7 @@ export function Filter({
 
   if (!filter.parentUsed) return null;
 
-  let selectOptions: { value: string; component: React.ReactNode }[] = [];
+  let selectOptions: { value: string; element: React.ReactNode }[] = [];
   if (filter.type === 'select') {
     const defaultOptionCount = filter.filteredOptions.reduce(
       (acc, option) => acc + option.count,
@@ -34,8 +34,8 @@ export function Filter({
     selectOptions = [
       {
         value: '',
-        component: (
-          <FilterOption key="all" role="link" onClick={() => filter.selectOption('')}>
+        element: (
+          <FilterOption key="all" onClick={() => filter.selectOption('')}>
             <FilterOptionLabel>{translate(translationKeys.selectAll, 'All')}</FilterOptionLabel>
             <FilterOptionCount>{defaultOptionCount}</FilterOptionCount>
           </FilterOption>
@@ -45,12 +45,8 @@ export function Filter({
     selectOptions.push(
       ...filter.filteredOptions.map((option) => ({
         value: option.value,
-        component: (
-          <FilterOption
-            key={option.value}
-            role="link"
-            onClick={() => filter.selectOption(option.value)}
-          >
+        element: (
+          <FilterOption key={option.value}>
             <FilterOptionLabel>
               {changeCasing(translate(option.value), filterValuesCasing)}
             </FilterOptionLabel>
@@ -61,21 +57,14 @@ export function Filter({
     );
   }
 
-  let selectedOptionComponent: ReactNode;
-  if (filter.type === 'select') {
-    const selectedOption = (filter.selectedOptions as Set<any>).values().next()?.value;
-    selectedOptionComponent =
-      selectOptions.find((option) => option.value === selectedOption)?.component ||
-      selectOptions[0].component;
-  }
-
   return (
     <FilterGroup key={filter.property + filter.title}>
       <FilterTitle>{translate(filter.titleTranslationKey, filter.title)} </FilterTitle>
       {filter.type === 'select' ? (
         <StyledSelect
-          selected={selectedOptionComponent}
-          options={selectOptions.map((option) => option.component)}
+          value={(filter.selectedOptions as Set<any>).values().next()?.value}
+          onChange={(value) => filter.selectOption(value)}
+          options={selectOptions}
         />
       ) : filter.type === 'date-range' ? (
         <>

package/src/components/LastUpdated/LastUpdated.tsx

@@ -51,8 +51,7 @@ export function LastUpdated(props: LastUpdatedProps): JSX.Element | null {
       data-print-datetime={isoDate}
       data-translation-key={translationKey}
     >
-      {text}
-      {/* TODO: fix issue with snapshot tests - they should not depend on current date */}
+      {text} {/* TODO: fix issue with snapshot tests - they should not depend on current date */}
       <time dateTime={isoDate}>{lastUpdatedString}</time>
     </Wrapper>
   );

package/src/components/Markdown/styledVariables.ts

@@ -148,7 +148,7 @@ export const markdown = css`
   * @tokens Markdown Table
   */
 
-  --md-table-font-size: var(--font-size-base); // @presenter FontSize
+  --md-table-font-size: var(--font-size-sm); // @presenter FontSize
   --md-table-margin-vertical: 20px; // @presenter Spacing
   --md-table-background-color: transparent; // @presenter Color
 
@@ -220,7 +220,7 @@ export const markdown = css`
 
 export const mermaid = css`
   /**
-  * @tokens Mermaid 
+  * @tokens Mermaid
   */
 
   --mermaid-background-color: var(--bg-raised-light); // @presenter Color

package/src/components/Product/ProductPicker.tsx

@@ -4,7 +4,8 @@ import styled from 'styled-components';
 import type { ThemeUIConfig } from '../../config';
 
 import { useCurrentProduct, useGlobalData } from '@portal/hooks';
-import { Link } from '@portal/Link';
+import { usePreloadHistory } from '@portal/usePreloadHistory';
+// import { Link } from '@portal/Link';
 import { ArrowIcon } from '@theme/icons';
 
 import { Select, SelectInput, SelectList, SelectListItem } from '../Select';
@@ -13,25 +14,30 @@ import { Product } from './Product';
 export const ProductPicker = () => {
   const globalData = useGlobalData() as { theme?: ThemeUIConfig };
   const currentProduct = useCurrentProduct();
-  const currentProductComponent = currentProduct ? (
-    <Product product={currentProduct} />
-  ) : (
-    'Products'
-  );
+  // const currentProductComponent = currentProduct ? (
+  //   <Product product={currentProduct} />
+  // ) : (
+  //   'Products'
+  // );
+  const { push } = usePreloadHistory();
 
   const products = Object.values(globalData?.theme?.products || {});
 
-  const productComponents = products.map((product) => (
-    <Link key={product.slug} to={product.link}>
-      <Product product={product} />
-    </Link>
-  ));
+  const productComponents = products.map((product) => ({
+    element: <Product product={product} />,
+    value: product,
+  }));
 
   return products.length ? (
     <ProductSelect
-      selected={currentProductComponent}
+      value={currentProduct}
+      placeholder="Products"
       options={productComponents}
       triggerEvent="hover"
+      onChange={(product: typeof currentProduct) => {
+        if (!product) return;
+        push(product.link);
+      }}
     />
   ) : null;
 };

package/src/components/Select/Select.tsx

@@ -1,26 +1,31 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import styled from 'styled-components';
 
 import { ArrowIcon } from '@theme/icons';
 import { useOutsideClick } from '@theme/hooks';
 
-export interface SelectProps {
-  selected: React.ReactNode | string;
-  options: React.ReactNode[] | string[];
+export interface SelectProps<T = any> {
+  value: T;
+  options: {
+    element: React.ReactNode | string;
+    value: T;
+    label?: string;
+  }[];
   dataAttributes?: Record<string, string>;
   className?: string;
   withArrow?: boolean;
   triggerEvent?: 'click' | 'hover';
-  onChange?: (value: React.ReactNode | string) => void;
+  onChange?: (value: any) => void;
   placement?: 'top' | 'bottom';
   alignment?: 'start' | 'end';
   icon?: React.ReactNode;
   onlyIcon?: boolean;
+  placeholder?: string;
 }
 
-export const Select = ({
+export function Select<T>({
   className,
-  selected,
+  value,
   options,
   dataAttributes,
   withArrow = true,
@@ -30,11 +35,12 @@ export const Select = ({
   alignment,
   icon,
   onlyIcon,
-}: SelectProps) => {
-  const selectRef = useRef<HTMLDivElement | null>(null);
+  placeholder,
+}: SelectProps<T>) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
 
   const [isOpen, setIsOpen] = useState<boolean>(false);
-  const [_selected, setSelected] = useState<React.ReactNode | string>(selected);
+  // const [selectedIdx, setSelectedIdx] = useState<React.ReactNode | string>(selected);
 
   const handleOpen = () => {
     setIsOpen(true);
@@ -48,46 +54,56 @@ export const Select = ({
     setIsOpen(!isOpen);
   };
 
-  const handleSelect = (value: React.ReactNode | string) => {
-    setSelected(value);
+  const handleSelect = (value: T) => {
+    // setSelectedIdx(options.findIndex(o => o.value === value));
     setIsOpen(false);
     onChange?.(value);
   };
 
-  useOutsideClick(selectRef, handleClose);
+  useOutsideClick(containerRef, handleClose);
 
-  useEffect(() => {
-    handleSelect(selected);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selected]);
+  // useEffect(() => {
+  //   handleSelect(selected);
+  //   // eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, [selected]);
+
+  const selectedOption = options.find((option) => option.value === value);
 
   return (
     <SelectContainer
       {...dataAttributes}
       data-testid="select"
       className={className}
-      ref={selectRef}
+      ref={containerRef}
       onPointerEnter={triggerEvent === 'hover' ? handleOpen : undefined}
       onPointerLeave={triggerEvent === 'hover' ? handleClose : undefined}
       onClick={triggerEvent === 'click' ? handleToggle : undefined}
     >
       <SelectInput>
-        {!onlyIcon && <SelectInputValue>{_selected}</SelectInputValue>}
+        {!onlyIcon && (
+          <SelectInputValue>
+            {selectedOption?.label || selectedOption?.element || placeholder}
+          </SelectInputValue>
+        )}
         {icon}
         {withArrow ? isOpen ? <ArrowIcon direction="up" /> : <ArrowIcon direction="down" /> : null}
       </SelectInput>
       {isOpen && (
         <SelectList placement={placement} alignment={alignment}>
           {options.map((option, index) => (
-            <SelectListItem key={index} onClick={() => handleSelect(option)}>
-              {option}
+            <SelectListItem
+              key={index}
+              onClick={() => handleSelect(option.value)}
+              selected={option.value === value}
+            >
+              {typeof option.element === 'string' ? <div>{option.element}</div> : option.element}
             </SelectListItem>
           ))}
         </SelectList>
       )}
     </SelectContainer>
   );
-};
+}
 
 export const SelectContainer = styled.div`
   position: relative;
@@ -121,8 +137,8 @@ export const SelectInputValue = styled.div`
 
 export const SelectList = styled.ul<{ placement?: string; alignment?: string }>`
   position: absolute;
-  top: ${({ placement }) => (placement === 'top' ? 'auto' : 'calc(100% + 2px)')};
-  bottom: ${({ placement }) => (placement === 'top' ? 'calc(100% + 2px)' : 'auto')};
+  top: ${({ placement }) => (placement === 'top' ? 'auto' : '100%')};
+  bottom: ${({ placement }) => (placement === 'top' ? '100%' : 'auto')};
   left: ${({ alignment }) => (alignment === 'start' ? '0' : 'auto')};
   right: ${({ alignment }) => (alignment === 'end' ? '0' : 'auto')};
   margin: 0;
@@ -140,7 +156,7 @@ export const SelectList = styled.ul<{ placement?: string; alignment?: string }>`
   z-index: 1;
 `;
 
-export const SelectListItem = styled.li`
+export const SelectListItem = styled.li<{ selected: boolean }>`
   border-radius: var(--select-list-item-border-radius);
 
   & > * {
@@ -148,6 +164,12 @@ export const SelectListItem = styled.li`
   }
 
   :hover {
-    background-color: var(--select-list-item-active-background-color);
+    background-color: var(--select-list-item-hover-background-color);
   }
+
+  ${({ selected }) =>
+    selected &&
+    `
+    &, &:hover { background-color: var(--select-list-item-active-background-color); }
+    `}
 `;

package/src/components/Select/styledVariables.ts

@@ -24,7 +24,8 @@ export const select = css`
   --select-list-item-horizontal-padding: var(--spacing-base); // @presenter Spacing
   --select-list-item-vertical-padding: var(--spacing-xs); // @presenter Spacing
   --select-list-item-border-radius: var(--border-radius); // @presenter BorderRadius
-  --select-list-item-active-background-color: var(--bg-raised); // @presenter Color
+  --select-list-item-active-background-color: var(--color-primary-bg); // @presenter Color
+  --select-list-item-hover-background-color: var(--bg-raised); // @presenter Color
 
   // @tokens End
 `;

package/src/components/Sidebar/VersionPicker.tsx

@@ -9,6 +9,11 @@ export const VersionPicker = styled(Select).attrs(() => ({
     'data-component-name': 'Sidebar/VersionPicker',
   },
 }))<SelectProps>`
+  --select-list-item-active-background-color: var(
+    --version-picker-list-item-active-background-color
+  );
+  --select-list-item-hover-background-color: var(--version-picker-list-item-hover-background-color);
+
   font-size: var(--version-picker-font-size);
   font-weight: var(--version-picker-font-weight);
   border-radius: var(--version-picker-border-radius);
@@ -40,9 +45,5 @@ export const VersionPicker = styled(Select).attrs(() => ({
       padding: var(--version-picker-list-item-vertical-padding)
         var(--version-picker-list-item-horizontal-padding);
     }
-
-    :hover {
-      background-color: var(--version-picker-list-item-active-background-color);
-    }
   }
 `;

package/src/components/Sidebar/styledVariables.ts

@@ -75,7 +75,7 @@ export const sidebar = css`
     */
   --sidebar-item-border-radius: 6px; // @presenter BorderRadius
 
-  /** 
+  /**
     * @tokens Sidebar item icon
     */
   --sidebar-item-icon-size: var(--spacing-xl);
@@ -161,7 +161,7 @@ export const sidebar = css`
   --sidebar-back-padding-left: var(--spacing-xs); // @presenter Spacing
   --sidebar-back-button-icon: none;
 
-  /** 
+  /**
   * @tokens Sidebar footer
   */
   --sidebar-footer-padding-vertical: var(--spacing-sm); // @presenter Spacing
@@ -175,7 +175,7 @@ export const sidebar = css`
   --sidebar-controls-collapsed-gap: var(--spacing-xs); // @presenter Spacing
   --sidebar-controls-collapsed-padding-vertical: var(--spacing-xs); // @presenter Spacing
   --sidebar-controls-collapsed-padding-horizontal: var(--spacing-xxs); // @presenter Spacing
- 
+
   // @tokens End
 `;
 
@@ -208,6 +208,7 @@ export const versionPicker = css`
   --version-picker-list-item-vertical-padding: var(--select-list-item-vertical-padding); // @presenter Spacing
   --version-picker-list-item-border-radius: var(--select-list-item-border-radius); // @presenter BorderRadius
   --version-picker-list-item-active-background-color: var(--select-list-item-active-background-color); // @presenter Color
-  
+  --version-picker-list-item-hover-background-color: var(--select-list-item-hover-background-color); // @presenter Color
+
   // @tokens End
 `;

package/src/components/Tiles/TileHeader.ts

@@ -9,6 +9,6 @@ export const TileHeader = styled.h3.attrs<{ className?: string }>(({ className }
   color: ${(props) => props.color || 'var(--h3-color)'};
   font-family: var(--h3-font-family);
   && {
-    margin: var(--h3-margin-top) 0 var(--h3-margin-bottom);
+    margin: 0 0 var(--h3-margin-bottom);
   }
 `;

package/src/globalStyle.ts

@@ -268,13 +268,13 @@ const typography = css`
    * @presenter LineHeight
    */
 
-  --line-height-base: 22px;
-  --line-height-xsm: 18px;
-  --line-height-sm: 20px;
-  --line-height-md: 24px;
-  --line-height-lg: 26px;
-  --line-height-xlg: 28px;
-  --line-height-xxlg: 30px;
+  --line-height-base: 24px;
+  --line-height-xsm: 20px;
+  --line-height-sm: 22px;
+  --line-height-md: 26px;
+  --line-height-lg: 28px;
+  --line-height-xlg: 30px;
+  --line-height-xxlg: 32px;
 
   /**
     * @tokens Font Sizes
@@ -420,7 +420,7 @@ const headingsTypography = css`
   --h3-font-family: var(--heading-font-family); // @presenter FontFamily
   --h3-font-weight: var(--heading-font-weight); // @presenter FontWeight
   --h3-font-size: 18px; // @presenter FontSize
-  --h3-line-height: 18px; // @presenter LineHeight
+  --h3-line-height: 22px; // @presenter LineHeight
   --h3-margin-top: var(--heading-margin-top); // @presenter Spacing
   --h3-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
   --h3-text-color: var(--heading-text-color); // @presenter Color
@@ -594,9 +594,9 @@ const apiReferenceDocs = css`
     * @presenter Color
     */
 
-  --schema-recursive-text-color: var(--color-warning); // @presenter Color
+  --schema-recursive-text-color: var(--color-warning-active); // @presenter Color
   --schema-recursive-background-color: var(--color-warning-bg); // @presenter Color
-  --schema-recursive-border-color: var(--color-warning-border); // @presenter Color
+  --schema-recursive-border-color: var(--color-warning-active); // @presenter Color
 
   /**
     * @tokens GraphQL Docs Reference Schema Non null label
@@ -702,9 +702,9 @@ const badges = css`
     * @tokens Deprecated Badge
     */
 
-  --badge-deprecated-text-color: var(--color-warning); // @presenter Color
+  --badge-deprecated-text-color: var(--color-warning-active); // @presenter Color
   --badge-deprecated-background-color: var(--color-warning-bg); // @presenter Color
-  --badge-deprecated-border-color: var(--color-warning-border); // @presenter Color
+  --badge-deprecated-border-color: var(--color-warning-active); // @presenter Color
   --badge-deprecated-border: 1px solid var(--badge-deprecated-border-color); // @presenter Border
   --badge-deprecated-border-radius: var(--border-radius); // @presenter BorderRadius