@redocly/theme 0.17.1 → 0.18.1

package/lib/components/Profile/UserProfile.js

@@ -30,17 +30,65 @@ exports.UserProfile = void 0;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Profile_1 = require("../../components/Profile/Profile");
-const Tooltip_1 = require("../../components/Tooltip/Tooltip");
-const UserProfileMenu_1 = require("./UserProfileMenu");
+const Link_1 = require("../../mocks/Link");
+const useThemeConfig_1 = require("../../hooks/useThemeConfig");
+const hooks_1 = require("../../mocks/hooks");
+const Dropdown_1 = require("../../components/Dropdown");
 function UserProfile({ userData, handleLogout, hasDeveloperOnboarding = false, }) {
+    const { userProfile } = (0, useThemeConfig_1.useThemeConfig)();
+    const { translate } = (0, hooks_1.useTranslate)();
+    const translationKeys = {
+        myApps: 'theme.profile.myApps',
+        logout: 'theme.profile.logout',
+    };
     const [isOpened, setIsOpened] = (0, react_1.useState)(false);
-    return (react_1.default.createElement(StyledTooltip, { isOpen: isOpened, withArrow: false, className: "copy-button", placement: "bottom", width: "100%", tip: react_1.default.createElement(UserProfileMenu_1.UserProfileMenu, { hasDeveloperOnboarding: hasDeveloperOnboarding, handleLogout: handleLogout, setIsOpened: setIsOpened }) },
+    const menuItems = [];
+    if (hasDeveloperOnboarding) {
+        menuItems.push(react_1.default.createElement(Link_1.Link, { to: "/apps", "data-translation-key": translationKeys.myApps }, translate(translationKeys.myApps, 'My Apps')));
+    }
+    if (userProfile && userProfile.menu) {
+        for (const item of userProfile.menu) {
+            menuItems.push(react_1.default.createElement(Link_1.Link, { external: item.external, key: item.label, to: item.link || '', separator: item === null || item === void 0 ? void 0 : item.separatorLine }, item.label));
+        }
+    }
+    menuItems.push(react_1.default.createElement(Logout, { onClick: () => handleLogout(), "data-translation-key": translationKeys.logout, role: "link" }, translate(translationKeys.logout, (userProfile === null || userProfile === void 0 ? void 0 : userProfile.logoutLabel) || 'Log out')));
+    return (react_1.default.createElement(ProfileDropdown, { items: menuItems },
         react_1.default.createElement(Profile_1.Profile, { name: userData.name, imageUrl: userData.picture, onClick: userData.logoutDisabled ? undefined : () => setIsOpened(!isOpened) })));
 }
 exports.UserProfile = UserProfile;
-const StyledTooltip = (0, styled_components_1.default)(Tooltip_1.Tooltip) `
-  > span {
-    padding: 0;
+const ProfileDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown).attrs(() => ({
+    dataAttributes: {
+        'data-component-name': 'Profile/ProfileDropdown',
+    },
+})) `
+  font-size: var(--profile-dropdown-font-size);
+  font-weight: var(--profile-dropdown-font-weight);
+  line-height: var(--profile-dropdown-line-height);
+  border-radius: var(--profile-dropdown-border-radius);
+  color: var(--profile-dropdown-text-color);
+
+  ${Dropdown_1.DropdownList} {
+    right: 0;
+    min-width: var(--profile-dropdown-list-min-width);
+    max-width: var(--profile-dropdown-list-max-width);
+    padding: var(--profile-dropdown-list-padding);
+    background-color: var(--profile-dropdown-list-background-color);
+    border-radius: var(--profile-dropdown-list-border-radius);
+    box-shadow: var(--profile-dropdown-list-box-shadow);
+  }
+
+  ${Dropdown_1.DropdownListItem} {
+    border-radius: var(--profile-dropdown-list-item-border-radius);
+
+    & > * {
+      padding: var(--profile-dropdown-list-item-vertical-padding)
+        var(--profile-dropdown-list-item-horizontal-padding);
+    }
+
+    :hover {
+      background-color: var(--profile-dropdown-list-item-active-background-color);
+    }
   }
 `;
+const Logout = styled_components_1.default.div ``;
 //# sourceMappingURL=UserProfile.js.map

package/lib/components/Search/InputWrapper.js

@@ -57,16 +57,10 @@ function InputWrapper({ placeholder, value, change, isLoading, className, }) {
 exports.InputWrapper = InputWrapper;
 const Wrapper = styled_components_1.default.div `
   display: flex;
+  flex-grow: 1;
   align-items: center;
   padding: 12px 16px;
   height: 56px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-  background-color: var(--search-input-background-color);
-  border-radius: 0;
-
-  ${({ theme }) => theme.mediaQueries.small} {
-    border-radius: 8px 8px 0 0;
-  }
 `;
 const SearchIcon = (0, styled_components_1.default)(SearchIcon_1.SearchIcon) `
   width: 20px;

package/lib/components/Search/ProductTag.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare function ProductTag({ label, className, onRemove, }: {
+    label: string;
+    className?: string;
+    onRemove?: () => void;
+}): JSX.Element;

package/lib/components/Search/ProductTag.js

@@ -0,0 +1,61 @@
+"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.ProductTag = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const ClearIcon_1 = require("../../components/Search/ClearIcon");
+function ProductTag({ label, className, onRemove, }) {
+    return (React.createElement(Wrapper, { "data-component-name": "Search/ProductTag", className: className },
+        React.createElement(Label, null, label),
+        onRemove && React.createElement(ClearIcon, { onClick: onRemove })));
+}
+exports.ProductTag = ProductTag;
+const Wrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 1px 8px;
+  gap: 4px;
+  background: #f2f2f2;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 12px;
+  margin-right: 16px;
+`;
+const Label = styled_components_1.default.span `
+  color: #1f2933;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 20px;
+`;
+const ClearIcon = (0, styled_components_1.default)(ClearIcon_1.ClearIcon) `
+  width: 8px;
+  height: 8px;
+  fill: var(--search-input-placeholder-color);
+`;
+//# sourceMappingURL=ProductTag.js.map

package/lib/components/Search/SearchDialog.js

@@ -39,8 +39,11 @@ const RecentSearches_1 = require("../../components/Search/RecentSearches");
 const SuggestedPages_1 = require("../../components/Search/SuggestedPages");
 const CancelSearch_1 = require("../../components/Search/CancelSearch");
 const useDialogHotKeys_1 = require("../../hooks/useDialogHotKeys");
+const ProductTag_1 = require("../../components/Search/ProductTag");
 const SearchDialog = ({ onClose, className, }) => {
-    const { query, setQuery, items, isLoading } = (0, search_1.useFuseSearch)();
+    const currentProduct = (0, hooks_1.useCurrentProduct)();
+    const [product, setProduct] = (0, react_1.useState)(currentProduct);
+    const { query, setQuery, items, isLoading } = (0, search_1.useFuseSearch)(product === null || product === void 0 ? void 0 : product.name);
     const modalRef = (0, react_1.useRef)(null);
     const { translate } = (0, hooks_1.useTranslate)();
     (0, useDialogHotKeys_1.useDialogHotKeys)(modalRef, onClose);
@@ -60,12 +63,14 @@ const SearchDialog = ({ onClose, className, }) => {
         exit: 'theme.search.keys.exit',
     };
     const mapItem = (item) => {
-        return react_1.default.createElement(SearchItem_1.SearchItem, { key: item.id, item: item });
+        var _a;
+        return (react_1.default.createElement(SearchItem_1.SearchItem, { key: item.id, item: item, product: !product ? (_a = item.product) === null || _a === void 0 ? void 0 : _a.name : undefined }));
     };
     return (react_1.default.createElement(Overlay, { "data-component-name": "Search/SearchDialog", ref: modalRef, onClick: handleOverlayClick, className: (0, utils_1.concatClassNames)('overlay', className) },
         react_1.default.createElement(Container, null,
             react_1.default.createElement(TopContainer, null,
-                react_1.default.createElement(InputWrapper_1.InputWrapper, { value: query, change: setQuery, placeholder: translate('theme.search.label', 'Search docs...'), isLoading: isLoading })),
+                react_1.default.createElement(InputWrapper_1.InputWrapper, { value: query, change: setQuery, placeholder: translate('theme.search.label', 'Search docs...'), isLoading: isLoading }),
+                product && react_1.default.createElement(ProductTag_1.ProductTag, { label: product.name, onRemove: () => setProduct(undefined) })),
             react_1.default.createElement(Results, null, items !== null ? (items.length ? (items.map(mapItem)) : (react_1.default.createElement(Message, { "data-translation-key": translationKeys.noResults }, translate(translationKeys.noResults, 'No results')))) : (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(RecentSearches_1.RecentSearches, { onSelect: setQuery }),
                 react_1.default.createElement(SuggestedPages_1.SuggestedPages, null)))),
@@ -133,5 +138,15 @@ const Message = styled_components_1.default.div `
   padding: 24px;
   color: var(--search-item-title-text-color);
 `;
-const TopContainer = styled_components_1.default.header ``;
+const TopContainer = styled_components_1.default.header `
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  background-color: var(--search-input-background-color);
+  border-radius: 0;
+
+  ${({ theme }) => theme.mediaQueries.small} {
+    border-radius: 8px 8px 0 0;
+  }
+`;
 //# sourceMappingURL=SearchDialog.js.map

package/lib/components/Search/SearchItem.d.ts

@@ -3,7 +3,8 @@ import type { ActiveItem } from '../../types/portal/src/shared/types/activeItem'
 import type { SearchDocument } from '../../types/portal/src/shared/types/searchDocument';
 interface SearchItemProps {
     item: ActiveItem<SearchDocument>;
+    product?: string;
     className?: string;
 }
-export declare function SearchItem({ item, className }: SearchItemProps): JSX.Element;
+export declare function SearchItem({ item, className, product }: SearchItemProps): JSX.Element;
 export {};

package/lib/components/Search/SearchItem.js

@@ -32,7 +32,8 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const OperationBadge_1 = require("../../components/OperationBadge");
 const Link_1 = require("../../mocks/Link");
 const utils_1 = require("../../components/Search/utils");
-function SearchItem({ item, className }) {
+const ProductTag_1 = require("../../components/Search/ProductTag");
+function SearchItem({ item, className, product }) {
     var _a, _b;
     const ref = (0, react_1.useRef)();
     (0, react_1.useEffect)(() => {
@@ -41,7 +42,8 @@ function SearchItem({ item, className }) {
             (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }, [item.active]);
-    const header = (react_1.default.createElement(react_1.default.Fragment, null,
+    const header = (react_1.default.createElement(Wrapper, null,
+        product && react_1.default.createElement(ProductTag, { label: product }),
         item.httpVerb ? (react_1.default.createElement(Operation, null,
             react_1.default.createElement(OperationBadge_1.OperationBadge, { type: item.httpVerb }, item.httpVerb),
             item.pathName ? (0, utils_1.highlight)(item.pathName) : null)) : null,
@@ -62,6 +64,9 @@ function SearchItem({ item, className }) {
         react_1.default.createElement(Path, null, (_b = item.path) === null || _b === void 0 ? void 0 : _b.join(' → '))))));
 }
 exports.SearchItem = SearchItem;
+const Wrapper = styled_components_1.default.div `
+  position: relative;
+`;
 const Title = styled_components_1.default.div `
   font-weight: var(--font-weight-regular);
   color: var(--search-item-title-text-color);
@@ -119,4 +124,10 @@ const Place = styled_components_1.default.div `
     padding-top: 0;
   }
 `;
+const ProductTag = (0, styled_components_1.default)(ProductTag_1.ProductTag) `
+  position: absolute;
+  right: 0;
+  top: 6px;
+  margin-right: 0;
+`;
 //# sourceMappingURL=SearchItem.js.map

package/lib/components/Search/index.d.ts

@@ -12,4 +12,5 @@ export * from '../../components/Search/ClockBackwardsIcon';
 export * from '../../components/Search/SuggestedPages';
 export * from '../../components/Search/MobileSearchTrigger';
 export * from '../../components/Search/CancelSearch';
+export * from '../../components/Search/ProductTag';
 export * from '../../components/Search/utils';

package/lib/components/Search/index.js

@@ -28,5 +28,6 @@ __exportStar(require("../../components/Search/ClockBackwardsIcon"), exports);
 __exportStar(require("../../components/Search/SuggestedPages"), exports);
 __exportStar(require("../../components/Search/MobileSearchTrigger"), exports);
 __exportStar(require("../../components/Search/CancelSearch"), exports);
+__exportStar(require("../../components/Search/ProductTag"), exports);
 __exportStar(require("../../components/Search/utils"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface SelectProps {
+    selected: React.ReactNode | string;
+    options: React.ReactNode[] | string[];
+    dataAttributes?: Record<string, string>;
+    className?: string;
+    withArrow?: boolean;
+    triggerEvent?: 'click' | 'hover';
+    onChange?: (value: React.ReactNode | string) => void;
+}
+export declare const Select: ({ className, selected, options, dataAttributes, withArrow, triggerEvent, onChange, }: SelectProps) => 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;
+}, 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

@@ -0,0 +1,118 @@
+"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.SelectListItem = exports.SelectList = exports.SelectInputValue = exports.SelectInput = exports.SelectContainer = exports.Select = void 0;
+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);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [_selected, setSelected] = (0, react_1.useState)(selected);
+    const handleOpen = () => {
+        setIsOpen(true);
+    };
+    const handleClose = () => {
+        setIsOpen(false);
+    };
+    const handleToggle = () => {
+        setIsOpen(!isOpen);
+    };
+    const handleSelect = (value) => {
+        setSelected(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 }),
+        react_1.default.createElement(exports.SelectInput, null,
+            react_1.default.createElement(exports.SelectInputValue, { withArrow: withArrow }, _selected),
+            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)))))));
+};
+exports.Select = Select;
+exports.SelectContainer = styled_components_1.default.div `
+  position: relative;
+  font-size: var(--select-font-size);
+  font-weight: var(--select-font-weight);
+  line-height: var(--select-line-height);
+  border-radius: var(--select-border-radius);
+  color: var(--select-text-color);
+
+  a {
+    display: block;
+    text-decoration: none;
+    color: var(--select-text-color);
+  }
+`;
+exports.SelectInput = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: var(--select-input-border-radius);
+  padding: var(--select-input-padding-vertical) var(--select-input-padding-horizontal);
+  cursor: pointer;
+`;
+exports.SelectInputValue = styled_components_1.default.div `
+  pointer-events: none;
+  ${({ withArrow }) => (withArrow ? 'margin-right: 8px;' : '')}
+`;
+exports.SelectList = styled_components_1.default.ul `
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin: 0;
+  min-width: var(--select-list-min-width);
+  max-width: var(--select-list-max-width);
+  padding: var(--select-list-padding);
+  background-color: var(--select-list-background-color);
+  border-radius: var(--select-list-border-radius);
+  box-shadow: var(--select-list-box-shadow);
+  list-style-type: none;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  z-index: 1;
+`;
+exports.SelectListItem = styled_components_1.default.li `
+  border-radius: var(--select-list-item-border-radius);
+
+  & > * {
+    padding: var(--select-list-item-vertical-padding) var(--select-list-item-horizontal-padding);
+  }
+
+  :hover {
+    background-color: var(--select-list-item-active-background-color);
+  }
+`;
+//# sourceMappingURL=Select.js.map

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

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

package/lib/components/Select/index.js

@@ -0,0 +1,18 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../../components/Select/Select"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/Sidebar/DrilldownMenuItem.js

@@ -6,11 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DrilldownMenuItem = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
+const SidebarItemIcon_1 = require("../../components/Sidebar/SidebarItemIcon");
 const hooks_1 = require("../../mocks/hooks");
 function DrilldownMenuItem({ item, className }) {
     const { translate } = (0, hooks_1.useTranslate)();
     return (react_1.default.createElement(Container, { "data-component-name": "Sidebar/DrilldownMenuItem", className: className },
-        item.icon ? react_1.default.createElement(Icon, { src: item.icon }) : null,
+        item.icon ? react_1.default.createElement(SidebarItemIcon_1.SidebarItemIcon, { src: item.icon }) : null,
         react_1.default.createElement("div", null,
             translate(item.labelTranslationKey, item.label),
             item.sublabel ? (react_1.default.createElement(SubLabel, null, translate(item.subLabelTranslationKey, item.sublabel))) : null)));
@@ -26,14 +27,6 @@ const Container = styled_components_1.default.div `
   text-transform: var(--sidebar-text-drilldown-transform);
   background: var(--sidebar-item-drilldown-background-color);
 `;
-const Icon = styled_components_1.default.img `
-  width: var(--sidebar-item-icon-size);
-  height: var(--sidebar-item-icon-size);
-  margin-right: var(--sidebar-spacing-unit);
-  border-radius: var(--sidebar-item-icon-border-radius);
-  flex-shrink: 0;
-  overflow: hidden;
-`;
 const SubLabel = styled_components_1.default.div `
   margin-top: 2px;
   color: var(--sidebar-item-sublabel-text-color);

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

@@ -0,0 +1 @@
+export declare const SidebarItemIcon: import("styled-components").StyledComponent<"img", any, {}, never>;

package/lib/components/Sidebar/SidebarItemIcon.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarItemIcon = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.SidebarItemIcon = styled_components_1.default.img `
+  width: var(--sidebar-item-icon-size);
+  height: var(--sidebar-item-icon-size);
+  margin-right: var(--sidebar-spacing-unit);
+  border-radius: var(--sidebar-item-icon-border-radius);
+  flex-shrink: 0;
+  overflow: hidden;
+`;
+//# sourceMappingURL=SidebarItemIcon.js.map

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

@@ -0,0 +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, {
+    dataAttributes: {
+        'data-component-name': string;
+    };
+} & SelectProps, "dataAttributes">;

package/lib/components/Sidebar/VersionPicker.js

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VersionPicker = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const Select_1 = require("../Select");
+exports.VersionPicker = (0, styled_components_1.default)(Select_1.Select).attrs(() => ({
+    dataAttributes: {
+        'data-component-name': 'Sidebar/VersionPicker',
+    },
+})) `
+  font-size: var(--version-picker-font-size);
+  font-weight: var(--version-picker-font-weight);
+  border-radius: var(--version-picker-border-radius);
+  line-height: var(--version-picker-line-height);
+  color: var(--version-picker-text-color);
+  margin: var(--version-picker-margin-vertical) var(--version-picker-margin-horizontal);
+
+  ${Select_1.SelectInput} {
+    border: var(--version-picker-input-border);
+    border-radius: var(--version-picker-input-border-radius);
+    padding: var(--version-picker-input-padding-vertical)
+      var(--version-picker-input-padding-horizontal);
+  }
+
+  ${Select_1.SelectList} {
+    right: 0;
+    min-width: var(--version-picker-list-min-width);
+    max-width: var(--version-picker-list-max-width);
+    padding: var(--version-picker-list-padding);
+    background-color: var(--version-picker-list-background-color);
+    border-radius: var(--version-picker-list-border-radius);
+    box-shadow: var(--version-picker-list-box-shadow);
+  }
+
+  ${Select_1.SelectListItem} {
+    border-radius: var(--version-picker-list-item-border-radius);
+
+    & > * {
+      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

@@ -9,3 +9,5 @@ export * from '../../components/Sidebar/Sidebar';
 export * from '../../components/Sidebar/SidebarLayout';
 export * from '../../components/Sidebar/FooterWrapper';
 export * from '../../components/Sidebar/HeaderWrapper';
+export * from '../../components/Sidebar/SidebarItemIcon';
+export * from '../../components/Sidebar/VersionPicker';

package/lib/components/Sidebar/index.js

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

package/lib/components/index.d.ts

@@ -33,3 +33,6 @@ export * from './Cards';
 export * from './Tiles';
 export * from './Breadcrumbs';
 export * from './Catalog';
+export * from './Product';
+export * from './Select';
+export * from './Dropdown';

package/lib/components/index.js

@@ -49,4 +49,7 @@ __exportStar(require("./Cards"), exports);
 __exportStar(require("./Tiles"), exports);
 __exportStar(require("./Breadcrumbs"), exports);
 __exportStar(require("./Catalog"), exports);
+__exportStar(require("./Product"), exports);
+__exportStar(require("./Select"), exports);
+__exportStar(require("./Dropdown"), exports);
 //# sourceMappingURL=index.js.map