@redocly/theme 0.18.3-patch.8 → 0.18.4

package/lib/components/OperationBadge/OperationBadge.js

@@ -0,0 +1,68 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OperationBadge = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.OperationBadge = styled_components_1.default.span.attrs((props) => ({
+    className: `operation-type ${props.type}`,
+    'data-component-name': 'OperationBadge/OperationBadge',
+})) `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--badge-http-font-size);
+  font-family: var(--badge-http-font-family);
+  font-weight: var(--badge-http-font-weight);
+  line-height: var(--badge-http-line-height);
+  color: var(--badge-http-text-color);
+  background-color: var(--badge-background-color);
+  border-radius: var(--badge-http-border-radius);
+  width: 58px;
+  text-transform: uppercase;
+  text-align: center;
+  margin-right: 6px;
+
+  &.get {
+    background-color: var(--color-http-get);
+  }
+
+  &.post {
+    background-color: var(--color-http-post);
+  }
+
+  &.put {
+    background-color: var(--color-http-put);
+  }
+
+  &.options {
+    background-color: var(--color-http-options);
+  }
+
+  &.patch {
+    background-color: var(--color-http-patch);
+  }
+
+  &.delete {
+    background-color: var(--color-http-delete);
+  }
+
+  &.basic,
+  &.schema {
+    background-color: var(--color-http-basic);
+  }
+
+  &.link {
+    background-color: var(--color-http-link);
+  }
+
+  &.head {
+    background-color: var(--color-http-head);
+  }
+
+  &.hook {
+    background-color: var(--color-http-hook);
+  }
+`;
+//# sourceMappingURL=OperationBadge.js.map

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

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

package/lib/{icons/LanguageIcon → components/OperationBadge}/index.js

@@ -14,5 +14,5 @@ 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("../../icons/LanguageIcon/LanguageIcon"), exports);
+__exportStar(require("../../components/OperationBadge/OperationBadge"), exports);
 //# sourceMappingURL=index.js.map

package/lib/components/Panel/PanelHeader.js

@@ -13,9 +13,7 @@ exports.PanelHeader = styled_components_1.default.div.attrs(({ className }) => (
   display: flex;
   align-items: center;
   justify-content: space-between;
-  min-height: 40px;
   white-space: var(--panel-heading-white-space-local);
-  color: var(--panel-heading-text-color);
 
   cursor: pointer;
 

package/lib/components/Panel/PanelHeaderTitle.js

@@ -13,6 +13,10 @@ exports.PanelHeaderTitle = styled_components_1.default.span.attrs(({ className }
   font-weight: var(--panel-heading-font-weight-local);
   overflow: hidden;
   text-overflow: ellipsis;
+
+  /* changed from var(--text-color-inverse) to var(--text-color)
+     should change several components in openapi/graphql reference-docs to use inverse color
+   */
   color: var(--panel-heading-text-color);
 `;
 //# sourceMappingURL=PanelHeaderTitle.js.map

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

@@ -3,4 +3,3 @@ export * from '../../components/Panel/PanelBody';
 export * from '../../components/Panel/PanelComponent';
 export * from '../../components/Panel/PanelHeader';
 export * from '../../components/Panel/PanelHeaderTitle';
-export * from '../../components/Panel/styledVariables';

package/lib/components/Panel/index.js

@@ -19,5 +19,4 @@ __exportStar(require("../../components/Panel/PanelBody"), exports);
 __exportStar(require("../../components/Panel/PanelComponent"), exports);
 __exportStar(require("../../components/Panel/PanelHeader"), exports);
 __exportStar(require("../../components/Panel/PanelHeaderTitle"), exports);
-__exportStar(require("../../components/Panel/styledVariables"), exports);
 //# sourceMappingURL=index.js.map

package/lib/components/Product/ProductPicker.js

@@ -7,8 +7,7 @@ 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 usePreloadHistory_1 = require("../../mocks/usePreloadHistory");
-// import { Link } from '../../mocks/Link';
+const Link_1 = require("../../mocks/Link");
 const icons_1 = require("../../icons");
 const Select_1 = require("../Select");
 const Product_1 = require("./Product");
@@ -16,22 +15,11 @@ const ProductPicker = () => {
     var _a;
     const globalData = (0, hooks_1.useGlobalData)();
     const currentProduct = (0, hooks_1.useCurrentProduct)();
-    // const currentProductComponent = currentProduct ? (
-    //   <Product product={currentProduct} />
-    // ) : (
-    //   'Products'
-    // );
-    const { push } = (0, usePreloadHistory_1.usePreloadHistory)();
+    const currentProductComponent = currentProduct ? (react_1.default.createElement(Product_1.Product, { product: currentProduct })) : ('Products');
     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) => ({
-        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;
+    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, withArrow: true, triggerEvent: "hover" })) : null;
 };
 exports.ProductPicker = ProductPicker;
 const ProductSelect = (0, styled_components_1.default)(Select_1.Select).attrs(() => ({

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

@@ -1,3 +1,2 @@
 export * from '../../components/Product/ProductPicker';
 export * from '../../components/Product/Product';
-export * from '../../components/Product/styledVariables';

package/lib/components/Product/index.js

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

package/lib/components/Profile/LoginLink.js

@@ -26,9 +26,10 @@ const StyledLink = styled_components_1.default.a.attrs(() => ({
   display: inline-block;
   color: var(--navbar-text-color);
   text-decoration: none;
+  padding: 0 var(--navbar-item-padding-horizontal);
   text-align: center;
   line-height: 1;
-  font-size: var(--navbar-font-size);
+  font-size: var(--navbar-item-font-size);
   font-weight: var(--navbar-item-font-weight);
   &:hover {
     color: var(--navbar-item-hover-text-color);

package/lib/components/Profile/Profile.js

@@ -27,14 +27,17 @@ exports.AvatarWrapper = exports.ProfileWrapper = exports.Profile = void 0;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const utils_1 = require("../../utils");
-function ProfileComponent({ name = 'User', imageUrl, onClick }) {
+function ProfileComponent({ name = 'User', imageUrl, onClick, color }) {
     var _a;
     if (imageUrl) {
-        return (react_1.default.createElement(exports.ProfileWrapper, { onClick: onClick, role: "link" }, imageUrl && (react_1.default.createElement(exports.AvatarWrapper, null,
-            react_1.default.createElement("img", { "data-cy": "user-avatar", src: imageUrl, alt: "profile" })))));
+        return (react_1.default.createElement(exports.ProfileWrapper, { onClick: onClick, role: "link" },
+            react_1.default.createElement(StyledUserName, { "data-cy": "user-name", color: color }, name),
+            imageUrl && (react_1.default.createElement(exports.AvatarWrapper, null,
+                react_1.default.createElement("img", { "data-cy": "user-avatar", src: imageUrl, alt: "profile" })))));
     }
     const avatarLetters = `${name.charAt(0).toUpperCase()}${((_a = name.split(' ')[1]) === null || _a === void 0 ? void 0 : _a.charAt(0).toUpperCase()) || ''}`;
     return (react_1.default.createElement(exports.ProfileWrapper, { onClick: onClick, role: "link" },
+        react_1.default.createElement(StyledUserName, { "data-cy": "user-name", color: color }, name),
         react_1.default.createElement(exports.AvatarWrapper, { background: (0, utils_1.stringToHslColor)(name) },
             react_1.default.createElement("span", null, avatarLetters))));
 }
@@ -46,6 +49,21 @@ exports.ProfileWrapper = styled_components_1.default.div.attrs(() => ({
   align-items: center;
   cursor: pointer;
   width: auto;
+  padding: 0 var(--navbar-item-padding-horizontal);
+`;
+const StyledUserName = styled_components_1.default.span `
+  font-family: var(--profile-name-font-family);
+  font-size: var(--profile-name-font-size);
+  font-weight: var(--profile-name-font-weight);
+  color: var(--profile-name-text-color);
+  padding: var(--profile-name-padding-vertical) var(--profile-name-padding-horizontal);
+  margin: 0 var(--profile-name-margin-horizontal);
+
+  display: none;
+
+  ${({ theme }) => { var _a; return (_a = theme.mediaQueries) === null || _a === void 0 ? void 0 : _a.medium; }} {
+    display: block;
+  }
 `;
 exports.AvatarWrapper = styled_components_1.default.div `
   width: var(--profile-avatar-width);
@@ -64,6 +82,7 @@ exports.AvatarWrapper = styled_components_1.default.div `
   font-weight: var(--profile-avatar-font-weight);
 
   border-radius: var(--profile-avatar-border-radius);
+  margin-left: var(--profile-avatar-margin-left);
 
   ${({ background }) => (0, styled_components_1.css) `
     background-color: ${background};

package/lib/components/Profile/UserProfile.js

@@ -35,8 +35,6 @@ const useThemeConfig_1 = require("../../hooks/useThemeConfig");
 const hooks_1 = require("../../mocks/hooks");
 const telemetry_1 = require("../../mocks/telemetry");
 const Dropdown_1 = require("../../components/Dropdown");
-const UserProfileData_1 = require("../../components/Profile/UserProfileData");
-const icons_1 = require("../../icons");
 function UserProfile({ userData, handleLogout, hasDeveloperOnboarding = false, }) {
     const { userProfile } = (0, useThemeConfig_1.useThemeConfig)();
     const { translate } = (0, hooks_1.useTranslate)();
@@ -45,7 +43,7 @@ function UserProfile({ userData, handleLogout, hasDeveloperOnboarding = false, }
         logout: 'theme.profile.logout',
     };
     const [isOpened, setIsOpened] = (0, react_1.useState)(false);
-    const menuItems = [react_1.default.createElement(UserProfileData_1.UserProfileData, { key: userData.name, userData: userData })];
+    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')));
     }
@@ -57,10 +55,8 @@ function UserProfile({ userData, handleLogout, hasDeveloperOnboarding = false, }
     menuItems.push(react_1.default.createElement(Logout, { onClick: () => {
             handleLogout();
             telemetry_1.telemetry.send('logout_menu_item_clicked', {});
-        }, "data-translation-key": translationKeys.logout, role: "link" },
-        react_1.default.createElement(icons_1.LogoutIcon, null),
-        translate(translationKeys.logout, (userProfile === null || userProfile === void 0 ? void 0 : userProfile.logoutLabel) || 'Log out')));
-    return (react_1.default.createElement(ProfileDropdown, { items: menuItems, alignment: "end" },
+        }, "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;
@@ -88,23 +84,15 @@ const ProfileDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown).at
   ${Dropdown_1.DropdownListItem} {
     border-radius: var(--profile-dropdown-list-item-border-radius);
 
-    :hover {
-      background-color: var(--profile-dropdown-list-item-active-background-color);
+    & > * {
+      padding: var(--profile-dropdown-list-item-vertical-padding)
+        var(--profile-dropdown-list-item-horizontal-padding);
     }
 
-    :first-child {
-      cursor: default;
-      background-color: var(--profile-dropdown-list-background-color);
+    :hover {
+      background-color: var(--profile-dropdown-list-item-active-background-color);
     }
   }
 `;
-const Logout = styled_components_1.default.div `
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  color: var(--profile-dropdown-logout-color);
-  fill: var(--profile-dropdown-logout-color);
-  border-top: 1px solid var(--profile-dropdown-logout-border-color);
-  padding: var(--profile-dropdown-logout-padding);
-`;
+const Logout = styled_components_1.default.div ``;
 //# sourceMappingURL=UserProfile.js.map

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

@@ -4,4 +4,3 @@ export { LoginLink } from './LoginLink';
 export type { LoginLinkProps } from './LoginLink';
 export { UserProfile } from './UserProfile';
 export type { UserProfileProps } from './types';
-export * from '../../components/Profile/styledVariables';

package/lib/components/Profile/index.js

@@ -1,18 +1,4 @@
 "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 });
 exports.UserProfile = exports.LoginLink = exports.Profile = void 0;
 var Profile_1 = require("./Profile");
@@ -21,5 +7,4 @@ var LoginLink_1 = require("./LoginLink");
 Object.defineProperty(exports, "LoginLink", { enumerable: true, get: function () { return LoginLink_1.LoginLink; } });
 var UserProfile_1 = require("./UserProfile");
 Object.defineProperty(exports, "UserProfile", { enumerable: true, get: function () { return UserProfile_1.UserProfile; } });
-__exportStar(require("../../components/Profile/styledVariables"), exports);
 //# sourceMappingURL=index.js.map

package/lib/components/Search/CancelSearch.js

@@ -30,16 +30,28 @@ exports.CancelSearch = void 0;
 const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../mocks/hooks");
-const Button_1 = require("../../components/Button");
 function CancelSearch({ onClick, className, }) {
     const { translate } = (0, hooks_1.useTranslate)();
     const translationKeys = {
         cancel: 'theme.search.cancel',
     };
     return (React.createElement(Wrapper, { "data-component-name": "Search/CancelSearch", onClick: onClick, className: className },
-        React.createElement(Button_1.Button, { "data-translation-keys": translationKeys.cancel, fullWidth: true, variant: "outlined" }, translate(translationKeys.cancel, 'Cancel'))));
+        React.createElement(Button, { "data-translation-keys": translationKeys.cancel }, translate(translationKeys.cancel, 'Cancel'))));
 }
 exports.CancelSearch = CancelSearch;
+const Button = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex-grow: 1;
+  padding: 4px 16px;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 6px;
+  font-size: 14px;
+  line-height: 22px;
+  height: 32px;
+`;
 const Wrapper = styled_components_1.default.div `
   display: flex;
   padding: 12px 16px 16px;

package/lib/components/Search/ProductTag.js

@@ -42,16 +42,16 @@ const Wrapper = styled_components_1.default.div `
   align-items: center;
   padding: 1px 8px;
   gap: 4px;
-  background: var(--bg-overlay);
-  border: 1px solid var(--border-secondary);
-  border-radius: var(--border-radius-xlg);
-  margin-right: var(--spacing-base);
+  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: var(--text-secondary);
-  font-weight: var(--font-weight-regular);
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-sm);
+  color: #1f2933;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 20px;
 `;
 const ClearIcon = (0, styled_components_1.default)(ClearIcon_1.ClearIcon) `
   width: 8px;

package/lib/components/Search/RecentSearches.js

@@ -65,9 +65,9 @@ const Wrapper = styled_components_1.default.div `
 `;
 const Title = styled_components_1.default.div `
   color: var(--search-item-title-text-color);
-  font-weight: var(--font-weight-bold);
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-sm);
+  font-weight: 600;
+  font-size: var(--font-size-small);
+  line-height: 20px;
   padding: 8px 24px;
 `;
 const RecentItems = styled_components_1.default.div `
@@ -79,7 +79,7 @@ const RecentItems = styled_components_1.default.div `
 const ClockBackwardsIcon = (0, styled_components_1.default)(ClockBackwardsIcon_1.ClockBackwardsIcon) `
   width: 16px;
   height: 16px;
-  fill: var(--text-description);
+  fill: #8d8d8d;
 `;
 const ClearIcon = (0, styled_components_1.default)(ClearIcon_1.ClearIcon) `
   display: inline;
@@ -111,7 +111,7 @@ const Item = styled_components_1.default.div `
   }
 
   :focus-visible {
-    outline: 2px solid var(--color-primary);
+    outline: 2px solid var(--color-primary-200);
     border-radius: 2px;
   }
 

package/lib/components/Search/Search.js

@@ -71,5 +71,7 @@ function Search({ className }) {
 exports.Search = Search;
 const Wrapper = styled_components_1.default.div `
   margin-left: auto;
+
+  padding: 0 var(--navbar-item-padding-horizontal);
 `;
 //# sourceMappingURL=Search.js.map

package/lib/components/Search/SearchIcon.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SearchIcon = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-component-name": "Search/SearchIcon" }, props),
-    react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.66667 2.5C5.84258 2.5 5.037 2.74437 4.35179 3.20221C3.66659 3.66005 3.13254 4.31079 2.81717 5.07215C2.50181 5.83351 2.41929 6.67129 2.58006 7.47954C2.74084 8.2878 3.13767 9.03023 3.72039 9.61295C4.30311 10.1957 5.04554 10.5925 5.85379 10.7533C6.66205 10.914 7.49982 10.8315 8.26118 10.5162C9.02254 10.2008 9.67329 9.66675 10.1311 8.98154C10.589 8.29634 10.8333 7.49076 10.8333 6.66667C10.8333 5.5616 10.3943 4.50179 9.61295 3.72039C8.83155 2.93899 7.77174 2.5 6.66667 2.5ZM3.79622 2.37074C4.64588 1.80302 5.6448 1.5 6.66667 1.5C8.03695 1.5 9.35112 2.04434 10.3201 3.01328C11.289 3.98222 11.8333 5.29638 11.8333 6.66667C11.8333 7.68854 11.5303 8.68746 10.9626 9.53711C10.8672 9.67996 10.7649 9.8175 10.6565 9.94935L14.3536 13.6464C14.5488 13.8417 14.5488 14.1583 14.3536 14.3536C14.1583 14.5488 13.8417 14.5488 13.6464 14.3536L9.94935 10.6565C9.55739 10.979 9.11792 11.2437 8.64387 11.44C7.69978 11.8311 6.66094 11.9334 5.6587 11.7341C4.65647 11.5347 3.73586 11.0426 3.01328 10.3201C2.29071 9.59748 1.79864 8.67687 1.59928 7.67463C1.39992 6.6724 1.50224 5.63355 1.89329 4.68947C2.28434 3.74538 2.94657 2.93846 3.79622 2.37074Z", fill: "#A8A8A8" })));
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", version: "1.1", x: "0", y: "0", viewBox: "0 0 490 490", "data-component-name": "Search/SearchIcon" }, props),
+    react_1.default.createElement("path", { d: "M484 455.2L366.2 337.4c29.2-35.6 46.8-81.2 46.8-130.9C413 92.5 320.5 0 206.5 0 92.4 0 0 92.5 0 206.5S92.4 413 206.5 413c49.7 0 95.2-17.5 130.8-46.7L455.1 484c8 8 20.9 8 28.9 0C492 476.1 492 463.1 484 455.2zM206.5 371.9C115.2 371.9 41 297.7 41 206.5S115.2 41 206.5 41C297.7 41 372 115.3 372 206.5S297.7 371.9 206.5 371.9z" })));
 exports.SearchIcon = (0, styled_components_1.default)(Icon).attrs(({ className }) => ({
     'data-component-name': 'Search/SearchIcon',
     className,

package/lib/components/Search/SearchItem.js

@@ -29,7 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SearchItem = void 0;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const Tag_1 = require("../../components/Tag");
+const OperationBadge_1 = require("../../components/OperationBadge");
 const Link_1 = require("../../mocks/Link");
 const utils_1 = require("../../components/Search/utils");
 const ProductTag_1 = require("../../components/Search/ProductTag");
@@ -45,7 +45,7 @@ function SearchItem({ item, className, product }) {
     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(Tag_1.Tag, { color: item.httpVerb }, item.httpVerb.toUpperCase()),
+            react_1.default.createElement(OperationBadge_1.OperationBadge, { type: item.httpVerb }, item.httpVerb),
             item.pathName ? (0, utils_1.highlight)(item.pathName) : null)) : null,
         react_1.default.createElement(Title, null, (0, utils_1.highlight)(item.title)),
         Array.isArray(item.text) ? react_1.default.createElement(Description, null, (0, utils_1.highlight)(item.text)) : null));
@@ -104,7 +104,7 @@ const Description = styled_components_1.default.div `
   text-overflow: ellipsis;
 `;
 const Path = styled_components_1.default.div `
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-small);
   overflow: hidden;
   text-overflow: ellipsis;
   line-height: 22px;
@@ -113,7 +113,7 @@ const Place = styled_components_1.default.div `
   display: flex;
   flex-direction: column;
   gap: 5px;
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-small);
   overflow: hidden;
   text-overflow: ellipsis;
 

package/lib/components/Search/SearchTrigger.js

@@ -52,9 +52,8 @@ const Wrapper = styled_components_1.default.div `
   background-color: var(--search-trigger-background-color);
   border: var(--search-trigger-border);
   border-radius: var(--search-trigger-border-radius);
-  padding: var(--search-trigger-padding);
+  padding: 5px 10px 5px 14px;
   user-select: none;
-  gap: var(--search-trigger-gap);
 
   :hover {
     background-color: var(--search-trigger-hover-background-color);
@@ -69,11 +68,13 @@ const Wrapper = styled_components_1.default.div `
 }}
 `;
 const Label = styled_components_1.default.span `
+  padding-left: 10px;
+  padding-right: 16px;
   font-size: var(--search-trigger-font-size);
 `;
 const SearchIconSmall = (0, styled_components_1.default)(SearchIcon_1.SearchIcon) `
-  width: var(--search-trigger-icon-size);
-  height: var(--search-trigger-icon-size);
+  width: 13px;
+  height: 13px;
   fill: var(--search-trigger-text-color);
 `;
 //# sourceMappingURL=SearchTrigger.js.map

package/lib/components/Search/ShortcutKey.js

@@ -21,6 +21,10 @@ function ShortcutKey(props) {
 }
 exports.ShortcutKey = ShortcutKey;
 exports.Wrapper = styled_components_1.default.div `
-  font-size: var(--search-trigger-shortcut-font-size);
+  cursor: pointer;
+  font-size: 0.75em;
+  right: 1em;
+  color: var(--search-trigger-shortcut-text-color);
+  opacity: 0.5;
 `;
 //# sourceMappingURL=ShortcutKey.js.map

package/lib/components/Search/SuggestedPages.js

@@ -57,8 +57,8 @@ const Wrapper = styled_components_1.default.div `
 const Title = styled_components_1.default.div `
   color: var(--search-item-title-text-color);
   font-weight: var(--font-weight-bold);
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-sm);
+  font-size: var(--font-size-small);
+  line-height: 20px;
   padding: 8px 24px;
 `;
 const SuggestedItems = styled_components_1.default.div `
@@ -95,7 +95,7 @@ const PageLink = (0, styled_components_1.default)(Link_1.Link) `
     }
   }
   :focus-visible {
-    outline: 2px solid var(--color-primary);
+    outline: 2px solid var(--color-primary-200);
     border-radius: 2px;
   }
 `;

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

@@ -14,4 +14,3 @@ export * from '../../components/Search/MobileSearchTrigger';
 export * from '../../components/Search/CancelSearch';
 export * from '../../components/Search/ProductTag';
 export * from '../../components/Search/utils';
-export * from '../../components/Search/styledVariables';

package/lib/components/Search/index.js

@@ -30,5 +30,4 @@ __exportStar(require("../../components/Search/MobileSearchTrigger"), exports);
 __exportStar(require("../../components/Search/CancelSearch"), exports);
 __exportStar(require("../../components/Search/ProductTag"), exports);
 __exportStar(require("../../components/Search/utils"), exports);
-__exportStar(require("../../components/Search/styledVariables"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1,30 +1,18 @@
 import React from 'react';
-export interface SelectProps<T = any> {
-    value: T;
-    options: {
-        element: React.ReactNode | string;
-        value: T;
-        label?: string;
-    }[];
+export interface SelectProps {
+    selected: React.ReactNode | string;
+    options: React.ReactNode[] | string[];
     dataAttributes?: Record<string, string>;
     className?: string;
     withArrow?: boolean;
     triggerEvent?: 'click' | 'hover';
-    onChange?: (value: any) => void;
-    placement?: 'top' | 'bottom';
-    alignment?: 'start' | 'end';
-    icon?: React.ReactNode;
-    onlyIcon?: boolean;
-    placeholder?: string;
+    onChange?: (value: React.ReactNode | string) => void;
 }
-export declare function Select<T>({ className, value, options, dataAttributes, withArrow, triggerEvent, onChange, placement, alignment, icon, onlyIcon, placeholder, }: SelectProps<T>): JSX.Element;
+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, {}, 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;
+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>;