@redocly/theme 0.18.3 → 0.18.4-patch.1

package/lib/components/Search/styledVariables.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.search = void 0;
+const styled_components_1 = require("styled-components");
+exports.search = (0, styled_components_1.css) `
+  /**
+      * @tokens Search
+      */
+
+  --search-highlight-background-color: none; // @presenter Color
+  --search-highlight-text-color: var(--color-info); // @presenter Color
+
+  /**
+      * @tokens Portal Search
+      */
+
+  --search-input-background-color: var(--bg-raised); // @presenter Color
+  --search-input-text-color: var(--text-primary); // @presenter Color
+
+  --search-input-border: none;
+  --search-input-border-radius: var(--border-radius); // @presenter BorderRadius
+  --search-input-font-size: var(--font-size-base); // @presenter FontSize
+  --search-input-font-family: var(--font-family-base); // @presenter FontFamily
+  --search-input-line-height: 1.15em; // @presenter LineHeight
+
+  --search-input-hover-background-color: var(--bg-raised); // @presenter Color
+  --search-input-hover-border: none; // @presenter Color
+  --search-input-placeholder-color: var(--text-placeholder);
+  --search-input-icons-color: var(--text-placeholder);
+
+  --search-popover-background-color: var(--bg-base); // @presenter Color
+  --search-popover-border-radius: var(--search-input-border-radius); // @presenter BorderRadius
+  --search-popover-shadow: var(--bg-base-shadow); // @presenter BoxShadow
+  --search-popover-border: none;
+
+  --search-item-padding: 8px 24px;
+  --search-item-text-color: var(--text-secondary); // @presenter Color
+  --search-item-title-text-color: var(--text-primary); // @presenter Color
+  --search-item-path-text-color: var(--text-description); // @presenter Color
+  --search-item-background-color: transparent; // @presenter Color
+  --search-item-active-text-color: var(--text-primary); // @presenter Color
+  --search-item-active-title-text-color: var(--text-primary); // @presenter Color
+  --search-item-active-background-color: var(--bg-raised); // @presenter Color
+
+  /**
+    * @tokens Sidebar Search
+    */
+
+  --sidebar-search-button-background-color: transparent; // @presenter Color
+  --sidebar-search-button-text-color: var(--text-secondary); // @presenter Color
+  --sidebar-search-button-border: var(--border-primary);
+  --sidebar-search-button-border-radius: none; // @presenter BorderRadius
+  --sidebar-search-button-font-size: var(--font-size-sm); // @presenter FontSize
+  --sidebar-search-button-font-family: var(--font-family-base); // @presenter FontFamily
+  --sidebar-search-button-line-height: 1.15em; // @presenter LineHeight
+  --sidebar-search-button-hover-background-color: transparent; // @presenter Color
+  --sidebar-search-button-hover-border: var(--border-primary); // @presenter Color
+  --sidebar-search-button-active-background-color: transparent; // @presenter Color
+  --sidebar-search-button-active-border: var(--border-primary); // @presenter Color
+
+  /**
+    * @tokens Search results modal
+    * @presenter Color
+    */
+
+  --search-modal-background: var(--bg-base);
+  --search-modal-text-color: var(--text-primary);
+  --search-modal-border: none;
+  --search-modal-box-shadow: none;
+
+  --search-modal-header-border-radius: var(--border-radius-lg);
+  --search-modal-header-background-color: var(--bg-raised);
+  --search-modal-clear-button-background-color: var(--bg-overlay);
+  --search-modal-clear-button-border: 1px solid var(--bg-overlay);
+  --search-modal-clear-button-hover-background-color: var(--bg-overlay);
+  --search-modal-clear-button-hover-border: 1px solid var(--border-primary);
+
+  /**
+  * @tokens Sidebar Trigger
+  */
+
+  --search-trigger-padding-horizontal: var(--spacing-sm);
+  --search-trigger-padding-vertical: calc(var(--spacing-unit) * 1.5);
+  --search-trigger-padding: var(--search-trigger-padding-vertical)
+    var(--search-trigger-padding-horizontal);
+  --search-trigger-text-color: var(--text-placeholder);
+  --search-trigger-background-color: var(--bg-base);
+  --search-trigger-border: 1px solid var(--border-primary);
+  --search-trigger-border-radius: var(--border-radius-md);
+  --search-trigger-hover-background-color: var(--navbar-item-hover-background-color);
+  --search-trigger-gap: var(--spacing-sm);
+  --search-trigger-font-size: var(--font-size-base);
+  --search-trigger-shortcut-font-size: var(--font-size-sm);
+  --search-trigger-icon-size: 16px;
+  
+  // @tokens End
+`;
+//# sourceMappingURL=styledVariables.js.map

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

@@ -1,18 +1,30 @@
 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, }: 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, {
-    withArrow?: boolean | undefined;
+export declare const SelectInputValue: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SelectList: import("styled-components").StyledComponent<"ul", any, {
+    placement?: string | undefined;
+    alignment?: string | undefined;
+}, never>;
+export declare const SelectListItem: import("styled-components").StyledComponent<"li", any, {
+    selected: boolean;
 }, never>;
-export declare const SelectList: import("styled-components").StyledComponent<"ul", any, {}, never>;
-export declare const SelectListItem: import("styled-components").StyledComponent<"li", any, {}, 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, triggerEvent = 'click', onChange, }) => {
-    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,21 +45,23 @@ const Select = ({ className, selected, options, dataAttributes, withArrow, trigg
         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,
-            react_1.default.createElement(exports.SelectInputValue, { withArrow: withArrow }, _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, null, 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;
@@ -82,15 +84,18 @@ exports.SelectInput = styled_components_1.default.div `
   border-radius: var(--select-input-border-radius);
   padding: var(--select-input-padding-vertical) var(--select-input-padding-horizontal);
   cursor: pointer;
+  gap: 8px;
 `;
 exports.SelectInputValue = styled_components_1.default.div `
   pointer-events: none;
-  ${({ withArrow }) => (withArrow ? 'margin-right: 8px;' : '')}
+  min-width: 0;
 `;
 exports.SelectList = styled_components_1.default.ul `
   position: absolute;
-  top: 100%;
-  left: 0;
+  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;
   min-width: var(--select-list-min-width);
   max-width: var(--select-list-max-width);
@@ -112,7 +117,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/index.d.ts

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

package/lib/components/Select/index.js

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

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

@@ -0,0 +1 @@
+export declare const select: import("styled-components").FlattenSimpleInterpolation;

package/lib/components/Select/styledVariables.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.select = void 0;
+const styled_components_1 = require("styled-components");
+exports.select = (0, styled_components_1.css) `
+  /**
+    * @tokens Select
+    * */
+  --select-font-size: var(--font-size-base); // @presenter FontSize
+  --select-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --select-line-height: var(--line-height-base); // @presenter LineHeight
+  --select-text-color: var(--text-secondary); // @presenter Color
+  --select-border-radius: var(--border-radius); // @presenter BorderRadius
+
+  --select-input-padding-horizontal: 16px;  // @presenter Spacing
+  --select-input-padding-vertical: 6px;  // @presenter Spacing
+  --select-input-border-radius: var(--border-radius); // @presenter BorderRadius
+
+  --select-list-min-width: 100px;
+  --select-list-max-width: 300px;
+  --select-list-padding: var(--spacing-xxs); // @presenter Spacing
+  --select-list-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --select-list-background-color: var(--background-color); // @presenter Color
+  --select-list-box-shadow: var(--bg-raised-shadow); // @presenter Shadow
+
+  --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-overlay); // @presenter Color
+  --select-list-item-hover-background-color: var(--bg-raised); // @presenter Color
+
+  // @tokens End
+`;
+//# sourceMappingURL=styledVariables.js.map

package/lib/components/Separator/Separator.js

@@ -9,12 +9,20 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const SeparatorLine_1 = require("../../components/Separator/SeparatorLine");
 const SeparatorItem_1 = require("../../components/Separator/SeparatorItem");
 const hooks_1 = require("../../mocks/hooks");
+const hooks_2 = require("../../hooks");
 function Separator({ item, className }) {
     const { translate } = (0, hooks_1.useTranslate)();
-    return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/Separator", className: className },
+    const { sidebar } = (0, hooks_2.useThemeConfig)();
+    const separatorLine = item.separatorLine || (sidebar === null || sidebar === void 0 ? void 0 : sidebar.separatorLine);
+    const linePosition = item.linePosition || (sidebar === null || sidebar === void 0 ? void 0 : sidebar.linePosition) || 'bottom';
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/Separator", className: className, linePosition: linePosition, withLabel: !!item.label },
         react_1.default.createElement(SeparatorItem_1.SeparatorItem, null, translate(item.labelTranslationKey, item.label)),
-        item.separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));
+        separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));
 }
 exports.Separator = Separator;
-const Wrapper = styled_components_1.default.div ``;
+const Wrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: ${({ linePosition }) => (linePosition === 'top' ? 'column-reverse' : 'column')};
+  margin-top: ${({ withLabel }) => (withLabel ? 'var(--sidebar-item-separator-offset)' : '0')};
+`;
 //# sourceMappingURL=Separator.js.map

package/lib/components/Separator/SeparatorItem.js

@@ -11,24 +11,21 @@ exports.SeparatorItem = (0, styled_components_1.default)(MenuItemLabel_1.MenuIte
     className,
 })) `
   cursor: default;
-  font-weight: var(--font-weight-bold);
-  color: var(--sidebar-separator-item-color);
-  font-family: var(--sidebar-item-separator-font-family);
+  font-weight: var(--sidebar-item-separator-font-weight);
+  color: var(--sidebar-item-separator-text-color);
   font-size: var(--sidebar-item-separator-font-size);
   text-transform: var(--sidebar-item-separator-text-transform);
   background: var(--mobile-menu-background);
+  border-radius: 0;
+  padding: var(--sidebar-item-separator-padding);
 
   ${({ theme }) => theme.mediaQueries.medium} {
     background: var(--sidebar-item-separator-background-color);
   }
 
-  *:not(:first-child) > & {
-    margin-top: var(--sidebar-item-separator-offset);
-  }
-
   :hover {
-    color: inherit;
-    background-color: inherit;
+    color: var(--sidebar-item-separator-text-color);
+    background: none;
   }
 `;
 //# sourceMappingURL=SeparatorItem.js.map

package/lib/components/Separator/SeparatorLine.js

@@ -9,8 +9,12 @@ exports.SeparatorLine = styled_components_1.default.div.attrs(({ className }) =>
     'data-component-name': 'Sidebar/SeparatorLine',
     className,
 })) `
-  height: 1px;
-  background-color: var(--sidebar-item-separator-line-color);
-  margin: var(--sidebar-item-separator-offset) 0 var(--sidebar-item-padding-vertical) 0;
+  height: var(--sidebar-item-separator-border-width);
+  background-color: var(--sidebar-item-separator-border-color);
+  margin: var(--mobile-sidebar-item-separator-line-offset);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    margin: var(--sidebar-item-separator-line-offset);
+  }
 `;
 //# sourceMappingURL=SeparatorLine.js.map

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

@@ -1,9 +1,5 @@
 /// <reference types="react" />
+import { Tag } from '../../components/Tag';
 import type { MenuItemProps } from '../../components/Sidebar/types';
 export declare function ApiCallItem({ item, className }: MenuItemProps): JSX.Element;
-export declare const Badge: import("styled-components").StyledComponent<"span", any, {
-    className: `operation-type ${string}`;
-    'data-component-name': string;
-} & {
-    type: string;
-}, "className" | "data-component-name">;
+export declare const HttpTag: import("styled-components").StyledComponent<typeof Tag, any, {}, never>;

package/lib/components/Sidebar/ApiCallItem.js

@@ -3,10 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Badge = exports.ApiCallItem = void 0;
+exports.HttpTag = exports.ApiCallItem = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const OperationBadge_1 = require("../../components/OperationBadge");
+const Tag_1 = require("../../components/Tag");
 const MenuLinkItem_1 = require("../../components/Menu/MenuLinkItem");
 const SeparatorLine_1 = require("../../components/Separator/SeparatorLine");
 const MenuItemLabel_1 = require("../../components/Menu/MenuItemLabel");
@@ -14,12 +14,14 @@ function ApiCallItem({ item, className }) {
     return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/ApiCallItem", className: className },
         react_1.default.createElement(MenuLinkItem_1.MenuLinkItem, { item: item },
             react_1.default.createElement(Label, { active: item.active },
-                react_1.default.createElement(exports.Badge, { type: item.httpVerb || '' }, item.httpVerb === 'hook' ? 'event' : item.httpVerb),
-                item.label)),
+                item.label,
+                react_1.default.createElement(exports.HttpTag, { color: item.httpVerb || '' }, item.httpVerb === 'hook' ? 'event' : item.httpVerb))),
         item.separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));
 }
 exports.ApiCallItem = ApiCallItem;
 const Label = (0, styled_components_1.default)(MenuItemLabel_1.MenuItemLabel) `
+  display: flex;
+  justify-content: space-between;
   color: var(--mobile-menu-item-text-color);
 
   ${({ theme }) => theme.mediaQueries.medium} {
@@ -27,15 +29,17 @@ const Label = (0, styled_components_1.default)(MenuItemLabel_1.MenuItemLabel) `
   }
 `;
 const Wrapper = styled_components_1.default.div ``;
-exports.Badge = (0, styled_components_1.default)(OperationBadge_1.OperationBadge) `
+exports.HttpTag = (0, styled_components_1.default)(Tag_1.Tag) `
   flex-shrink: 0;
-  margin-top: 0;
-  width: 36px;
-  height: 14px;
-  font-size: var(--sidebar-item-badge-http-font-size);
-  font-family: var(--sidebar-item-badge-http-font-family);
-  font-weight: var(--sidebar-item-badge-http-font-weight);
-  border-radius: var(--sidebar-item-badge-http-border-radius);
-  color: var(--sidebar-item-badge-http-text-color);
+  margin: var(--sidebar-item-http-tag-margin);
+  text-transform: uppercase;
+
+  width: var(--sidebar-item-http-tag-width);
+  height: var(--sidebar-item-http-tag-height);
+
+  font-size: var(--sidebar-item-http-tag-font-size);
+  font-family: var(--sidebar-item-http-tag-font-family);
+  font-weight: var(--sidebar-item-http-tag-font-weight);
+  border-radius: var(--sidebar-item-http-tag-border-radius);
 `;
 //# sourceMappingURL=ApiCallItem.js.map

package/lib/components/Sidebar/FooterWrapper.js

@@ -6,15 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FooterWrapper = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
 exports.FooterWrapper = styled_components_1.default.div `
+  padding: var(--sidebar-footer-padding-vertical) var(--sidebar-footer-padding-horizontal);
+
   ${({ collapsed }) => collapsed &&
     `
         position: sticky;
         bottom: 0;
+        padding: 0;
     `}
-  margin: var(--sidebar-offset-top) 0 var(--sidebar-spacing-unit) var(--sidebar-offset-left);
-  padding-top: var(--sidebar-spacing-unit);
-  padding-right: var(--sidebar-spacing-unit);
-  border-top: solid 1px var(--border-color);
 
   button {
     margin: 0;

package/lib/components/Sidebar/HeaderWrapper.js

@@ -9,8 +9,8 @@ exports.HeaderWrapper = styled_components_1.default.div.attrs(({ className }) =>
     'data-component-name': 'Sidebar/HeaderWrapper',
     className,
 })) `
-  margin: var(--sidebar-offset-top) 0 0 var(--sidebar-offset-left);
-  padding-bottom: var(--sidebar-spacing-unit);
-  border-bottom: solid 1px var(--border-color);
+  margin: var(--sidebar-offset-top) 0 0 0;
+  padding: 0 0 var(--sidebar-header-padding-bottom) var(--sidebar-offset-left);
+  border-bottom: solid 1px var(--border-primary);
 `;
 //# sourceMappingURL=HeaderWrapper.js.map

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, }: 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);
@@ -27,6 +32,7 @@ exports.VersionPicker = (0, styled_components_1.default)(Select_1.Select).attrs(
 
   ${Select_1.SelectList} {
     right: 0;
+    width: 100%;
     min-width: var(--version-picker-list-min-width);
     max-width: var(--version-picker-list-max-width);
     padding: var(--version-picker-list-padding);
@@ -42,10 +48,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/index.d.ts

@@ -11,3 +11,4 @@ export * from '../../components/Sidebar/FooterWrapper';
 export * from '../../components/Sidebar/HeaderWrapper';
 export * from '../../components/Sidebar/SidebarItemIcon';
 export * from '../../components/Sidebar/VersionPicker';
+export * from '../../components/Sidebar/styledVariables';

package/lib/components/Sidebar/index.js

@@ -27,4 +27,5 @@ __exportStar(require("../../components/Sidebar/FooterWrapper"), exports);
 __exportStar(require("../../components/Sidebar/HeaderWrapper"), exports);
 __exportStar(require("../../components/Sidebar/SidebarItemIcon"), exports);
 __exportStar(require("../../components/Sidebar/VersionPicker"), exports);
+__exportStar(require("../../components/Sidebar/styledVariables"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -0,0 +1,2 @@
+export declare const sidebar: import("styled-components").FlattenSimpleInterpolation;
+export declare const versionPicker: import("styled-components").FlattenSimpleInterpolation;