@redocly/theme 0.18.3-patch.0 → 0.18.3

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

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

package/lib/{icons/ErrorIcon → 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/ErrorIcon/ErrorIcon"), exports);
+__exportStar(require("../../components/OperationBadge/OperationBadge"), exports);
 //# sourceMappingURL=index.js.map

package/lib/components/Panel/PanelHeader.js

@@ -13,7 +13,6 @@ 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);
 
   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/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

@@ -8,13 +8,16 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const useThemeConfig_1 = require("../../hooks/useThemeConfig");
 const hooks_1 = require("../../mocks/hooks");
+const telemetry_1 = require("../../mocks/telemetry");
 function LoginLink({ href }) {
     const { userProfile } = (0, useThemeConfig_1.useThemeConfig)();
     const { translate } = (0, hooks_1.useTranslate)();
     const translationKeys = {
         login: 'theme.profile.login',
     };
-    return (react_1.default.createElement(StyledLink, { href: href, "data-translation-key": translationKeys.login }, translate(translationKeys.login, (userProfile === null || userProfile === void 0 ? void 0 : userProfile.loginLabel) || 'Login')));
+    return (react_1.default.createElement(StyledLink, { href: href, "data-translation-key": translationKeys.login, onClick: () => {
+            telemetry_1.telemetry.send('login_button_clicked', {});
+        } }, translate(translationKeys.login, (userProfile === null || userProfile === void 0 ? void 0 : userProfile.loginLabel) || 'Login')));
 }
 exports.LoginLink = LoginLink;
 const StyledLink = styled_components_1.default.a.attrs(() => ({
@@ -23,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

@@ -33,9 +33,8 @@ const Profile_1 = require("../../components/Profile/Profile");
 const Link_1 = require("../../mocks/Link");
 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)();
@@ -44,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')));
     }
@@ -53,10 +52,11 @@ function UserProfile({ userData, handleLogout, hasDeveloperOnboarding = false, }
             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" },
-        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" },
+    menuItems.push(react_1.default.createElement(Logout, { onClick: () => {
+            handleLogout();
+            telemetry_1.telemetry.send('logout_menu_item_clicked', {});
+        }, "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;
@@ -84,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);
+  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

@@ -7,19 +7,12 @@ export interface SelectProps {
     withArrow?: boolean;
     triggerEvent?: 'click' | 'hover';
     onChange?: (value: React.ReactNode | string) => void;
-    placement?: 'top' | 'bottom';
-    alignment?: 'start' | 'end';
-    icon?: React.ReactNode;
-    onlyIcon?: boolean;
 }
-export declare const Select: ({ className, selected, options, dataAttributes, withArrow, triggerEvent, onChange, placement, alignment, icon, onlyIcon, }: SelectProps) => 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, {
-    withIcon?: boolean | undefined;
-}, never>;
-export declare const SelectList: import("styled-components").StyledComponent<"ul", any, {
-    placement?: string | undefined;
-    alignment?: string | undefined;
+    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

@@ -31,7 +31,7 @@ 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, placement, alignment, icon, onlyIcon, }) => {
+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);
@@ -56,10 +56,9 @@ const Select = ({ className, selected, options, dataAttributes, withArrow, trigg
     }, [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,
-            !onlyIcon && (react_1.default.createElement(exports.SelectInputValue, { withIcon: withArrow || !!icon }, _selected)),
-            icon,
+            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, { 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, 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 `
@@ -86,14 +85,12 @@ exports.SelectInput = styled_components_1.default.div `
 `;
 exports.SelectInputValue = styled_components_1.default.div `
   pointer-events: none;
-  ${({ withIcon }) => (withIcon ? 'margin-right: 8px;' : '')}
+  ${({ withArrow }) => (withArrow ? 'margin-right: 8px;' : '')}
 `;
 exports.SelectList = styled_components_1.default.ul `
   position: absolute;
-  top: ${({ placement }) => (placement === 'top' ? 'auto' : '100%')};
-  bottom: ${({ placement }) => (placement === 'top' ? '100%' : 'auto')};
-  left: ${({ alignment }) => (alignment === 'start' ? '0' : 'auto')};
-  right: ${({ alignment }) => (alignment === 'end' ? '0' : 'auto')};
+  top: 100%;
+  left: 0;
   margin: 0;
   min-width: var(--select-list-min-width);
   max-width: var(--select-list-max-width);

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

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

package/lib/components/Select/index.js

@@ -15,5 +15,4 @@ 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/Separator/SeparatorItem.js

@@ -11,15 +11,12 @@ exports.SeparatorItem = (0, styled_components_1.default)(MenuItemLabel_1.MenuIte
     className,
 })) `
   cursor: default;
-  font-weight: var(--sidebar-item-separator-font-weight);
-  color: var(--sidebar-item-separator-text-color);
+  font-weight: var(--font-weight-bold);
+  color: var(--sidebar-separator-item-color);
+  font-family: var(--sidebar-item-separator-font-family);
   font-size: var(--sidebar-item-separator-font-size);
   text-transform: var(--sidebar-item-separator-text-transform);
   background: var(--mobile-menu-background);
-  border-radius: 0;
-  border-top: var(--sidebar-item-separator-border-width) solid
-    var(--sidebar-item-separator-border-color);
-  padding-top: var(--sidebar-item-separator-padding-top);
 
   ${({ theme }) => theme.mediaQueries.medium} {
     background: var(--sidebar-item-separator-background-color);
@@ -30,7 +27,8 @@ exports.SeparatorItem = (0, styled_components_1.default)(MenuItemLabel_1.MenuIte
   }
 
   :hover {
-    color: var(--sidebar-item-separator-text-color);
+    color: inherit;
+    background-color: inherit;
   }
 `;
 //# sourceMappingURL=SeparatorItem.js.map

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

@@ -1,5 +1,9 @@
 /// <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 HttpTag: import("styled-components").StyledComponent<typeof Tag, any, {}, never>;
+export declare const Badge: import("styled-components").StyledComponent<"span", any, {
+    className: `operation-type ${string}`;
+    'data-component-name': string;
+} & {
+    type: string;
+}, "className" | "data-component-name">;