@redocly/theme 0.18.2 → 0.18.3-patch.0

package/lib/components/Profile/UserProfile.js

@@ -34,6 +34,8 @@ const Link_1 = require("../../mocks/Link");
 const useThemeConfig_1 = require("../../hooks/useThemeConfig");
 const hooks_1 = require("../../mocks/hooks");
 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)();
@@ -42,7 +44,7 @@ function UserProfile({ userData, handleLogout, hasDeveloperOnboarding = false, }
         logout: 'theme.profile.logout',
     };
     const [isOpened, setIsOpened] = (0, react_1.useState)(false);
-    const menuItems = [];
+    const menuItems = [react_1.default.createElement(UserProfileData_1.UserProfileData, { key: userData.name, userData: userData })];
     if (hasDeveloperOnboarding) {
         menuItems.push(react_1.default.createElement(Link_1.Link, { to: "/apps", "data-translation-key": translationKeys.myApps }, translate(translationKeys.myApps, 'My Apps')));
     }
@@ -51,8 +53,10 @@ 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" }, translate(translationKeys.logout, (userProfile === null || userProfile === void 0 ? void 0 : userProfile.logoutLabel) || 'Log out')));
-    return (react_1.default.createElement(ProfileDropdown, { items: menuItems },
+    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" },
         react_1.default.createElement(Profile_1.Profile, { name: userData.name, imageUrl: userData.picture, onClick: userData.logoutDisabled ? undefined : () => setIsOpened(!isOpened) })));
 }
 exports.UserProfile = UserProfile;
@@ -80,15 +84,23 @@ const ProfileDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown).at
   ${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);
     }
+
+    :first-child {
+      cursor: default;
+      background-color: var(--profile-dropdown-list-background-color);
+    }
   }
 `;
-const Logout = styled_components_1.default.div ``;
+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);
+`;
 //# sourceMappingURL=UserProfile.js.map

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface UserProfileDataProps {
+    userData: {
+        name: string;
+        picture: string;
+    };
+}
+export declare function UserProfileData(props: UserProfileDataProps): JSX.Element;
+export {};

package/lib/components/Profile/UserProfileData.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserProfileData = void 0;
+const _theme_1 = require("../../index.js");
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Profile_1 = require("../../components/Profile/Profile");
+function UserProfileData(props) {
+    const { userData } = props;
+    return (react_1.default.createElement(UserProfileDataWrapper, null,
+        react_1.default.createElement(ProfilePicture, null,
+            react_1.default.createElement(_theme_1.Profile, { name: userData.name, imageUrl: userData.picture })),
+        react_1.default.createElement(UserName, null, userData.name)));
+}
+exports.UserProfileData = UserProfileData;
+const UserProfileDataWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+`;
+const ProfilePicture = styled_components_1.default.div `
+  margin-right: 16px;
+
+  ${Profile_1.AvatarWrapper} {
+    margin: 0;
+  }
+
+  ${Profile_1.ProfileWrapper} {
+    padding: 0;
+  }
+`;
+const UserName = styled_components_1.default.div ``;
+//# sourceMappingURL=UserProfileData.js.map

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

@@ -4,3 +4,4 @@ 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,4 +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 });
 exports.UserProfile = exports.LoginLink = exports.Profile = void 0;
 var Profile_1 = require("./Profile");
@@ -7,4 +21,5 @@ 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/Profile/styledVariables.d.ts

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

package/lib/components/Profile/styledVariables.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.userProfileDropdown = exports.userProfile = void 0;
+const styled_components_1 = require("styled-components");
+exports.userProfile = (0, styled_components_1.css) `
+
+  /**
+    * @tokens User Profile
+    */
+
+   --profile-avatar-width: var(--control-height-base); // @presenter Spacing
+   --profile-avatar-height: var(--control-height-base); // @presenter Spacing
+   --profile-avatar-border-radius: 50%; // @presenter BorderRadius
+
+   --profile-avatar-font-family: var(--navbar-item-font-family); // @presenter FontFamily
+   --profile-avatar-font-size: var(--navbar-item-font-size); // @presenter FontSize
+   --profile-avatar-font-weight: var(--font-weight-regular); // @presenter FontWeight
+   --profile-avatar-line-height: var(--line-height-base); // @presenter LineHeight
+  
+   --profile-avatar-padding-vertical: var(--spacing-base); // @presenter Spacing
+   --profile-avatar-padding-horizontal: var(--spacing-base); // @presenter Spacing
+
+   // @tokens End
+`;
+exports.userProfileDropdown = (0, styled_components_1.css) `
+  /**
+    * @tokens User profile menu dropdown
+    * */
+
+  --profile-dropdown-font-size: var(--dropdown-font-size); // @presenter FontSize
+  --profile-dropdown-font-weight: var(--dropdown-font-weight); // @presenter FontWeight
+  --profile-dropdown-line-height: var(--dropdown-line-height); // @presenter LineHeight
+  --profile-dropdown-text-color: var(--dropdown-text-color); // @presenter Color
+  --profile-dropdown-border-radius: var(--dropdown-border-radius); // @presenter BorderRadius
+
+  --profile-dropdown-list-min-width: var(--dropdown-list-min-width);
+  --profile-dropdown-list-max-width: var(--dropdown-list-max-width);
+  --profile-dropdown-list-padding: var(--dropdown-list-padding); // @presenter Spacing
+  --profile-dropdown-list-border-radius: var(--dropdown-list-border-radius); // @presenter BorderRadius
+  --profile-dropdown-list-background-color: var(--dropdown-list-background-color); // @presenter Color
+  --profile-dropdown-list-box-shadow: var(--dropdown-list-box-shadow); // @presenter Shadow
+
+  --profile-dropdown-list-item-horizontal-padding: var(--dropdown-list-item-horizontal-padding); // @presenter Spacing
+  --profile-dropdown-list-item-vertical-padding: var(--dropdown-list-item-vertical-padding); // @presenter Spacing
+  --profile-dropdown-list-item-border-radius: var(--dropdown-list-item-border-radius); // @presenter BorderRadius
+  --profile-dropdown-list-item-active-background-color: var(--dropdown-list-item-active-background-color); // @presenter Color
+  --profile-dropdown-list-item-separator-color: var(--dropdown-list-item-separator-color); // @presenter Color
+
+  --profile-dropdown-logout-color: var(--color-error-base);
+  --profile-dropdown-logout-border-color: var(--border-secondary);
+  --profile-dropdown-logout-padding: 0 0 0 var(--spacing-xxs);
+
+  // @tokens End
+`;
+//# sourceMappingURL=styledVariables.js.map

package/lib/components/Search/CancelSearch.js

@@ -30,28 +30,16 @@ 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, { "data-translation-keys": translationKeys.cancel }, translate(translationKeys.cancel, 'Cancel'))));
+        React.createElement(Button_1.Button, { "data-translation-keys": translationKeys.cancel, fullWidth: true, variant: "outlined" }, 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: #f2f2f2;
-  border: 1px solid rgba(0, 0, 0, 0.12);
-  border-radius: 12px;
+  background: var(--bg-overlay);
+  border: 1px solid var(--border-secondary);
+  border-radius: var(--border-radius-xlg);
   margin-right: 16px;
 `;
 const Label = styled_components_1.default.span `
-  color: #1f2933;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 20px;
+  color: var(--text-secondary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
 `;
 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: 600;
-  font-size: var(--font-size-small);
-  line-height: 20px;
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
   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: #8d8d8d;
+  fill: var(--text-description);
 `;
 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-200);
+    outline: 2px solid var(--color-primary);
     border-radius: 2px;
   }
 

package/lib/components/Search/Search.js

@@ -71,7 +71,5 @@ 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({ 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" })));
+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" })));
 exports.SearchIcon = (0, styled_components_1.default)(Icon).attrs(({ className }) => ({
     'data-component-name': 'Search/SearchIcon',
     className,

package/lib/components/Search/SearchItem.js

@@ -29,12 +29,12 @@ 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 OperationBadge_1 = require("../../components/OperationBadge");
+const Tag_1 = require("../../components/Tag");
 const Link_1 = require("../../mocks/Link");
 const utils_1 = require("../../components/Search/utils");
 const ProductTag_1 = require("../../components/Search/ProductTag");
 function SearchItem({ item, className, product }) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const ref = (0, react_1.useRef)();
     (0, react_1.useEffect)(() => {
         var _a;
@@ -45,23 +45,20 @@ 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(OperationBadge_1.OperationBadge, { type: item.httpVerb }, item.httpVerb),
+            react_1.default.createElement(Tag_1.Tag, { color: item.httpVerb }, item.httpVerb.toUpperCase()),
             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));
-    return (react_1.default.createElement(react_1.default.Fragment, null, ((_a = item.parameters) === null || _a === void 0 ? void 0 : _a.length) ? (react_1.default.createElement(react_1.default.Fragment, null, item.parameters.map((param, index) => {
-        var _a, _b;
-        const path = `${param.place} → ${((_a = param.path) === null || _a === void 0 ? void 0 : _a.length) ? ((_b = param.path) === null || _b === void 0 ? void 0 : _b.join(' → ')) + ' → ' : ''}`;
-        return (react_1.default.createElement(SearchLink, { className: className, key: `${item.id}-${index}`, to: item.url, tabIndex: 0, innerRef: ref, "data-component-name": "Search/SearchItem" },
-            header,
-            react_1.default.createElement(Place, null,
-                react_1.default.createElement("div", null,
-                    path,
-                    (0, utils_1.highlight)(param.name)),
-                react_1.default.createElement("div", null, (0, utils_1.highlight)(param.description)))));
-    }))) : (react_1.default.createElement(SearchLink, { className: className, to: item.url, tabIndex: 0, innerRef: ref, "data-component-name": "Search/SearchItem" },
+    const itemParam = (_a = item.parameters) === null || _a === void 0 ? void 0 : _a[0];
+    return (react_1.default.createElement(react_1.default.Fragment, null, itemParam ? (react_1.default.createElement(SearchLink, { className: className, key: `${item.id}-${0}`, to: item.url, tabIndex: 0, innerRef: ref, "data-component-name": "Search/SearchItem" },
         header,
-        react_1.default.createElement(Path, null, (_b = item.path) === null || _b === void 0 ? void 0 : _b.join(' → '))))));
+        react_1.default.createElement(Place, null,
+            react_1.default.createElement("div", null,
+                `${itemParam.place} → ${((_b = itemParam.path) === null || _b === void 0 ? void 0 : _b.length) ? ((_c = itemParam.path) === null || _c === void 0 ? void 0 : _c.join(' → ')) + ' → ' : ''}`,
+                (0, utils_1.highlight)(itemParam.name)),
+            react_1.default.createElement("div", null, (0, utils_1.highlight)(itemParam.description))))) : (react_1.default.createElement(SearchLink, { className: className, to: item.url, tabIndex: 0, innerRef: ref, "data-component-name": "Search/SearchItem" },
+        header,
+        react_1.default.createElement(Path, null, (_d = item.path) === null || _d === void 0 ? void 0 : _d.join(' → '))))));
 }
 exports.SearchItem = SearchItem;
 const Wrapper = styled_components_1.default.div `
@@ -107,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-small);
+  font-size: var(--font-size-sm);
   overflow: hidden;
   text-overflow: ellipsis;
   line-height: 22px;
@@ -116,7 +113,7 @@ const Place = styled_components_1.default.div `
   display: flex;
   flex-direction: column;
   gap: 5px;
-  font-size: var(--font-size-small);
+  font-size: var(--font-size-sm);
   overflow: hidden;
   text-overflow: ellipsis;
 

package/lib/components/Search/SearchTrigger.js

@@ -52,8 +52,9 @@ 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: 5px 10px 5px 14px;
+  padding: var(--search-trigger-padding);
   user-select: none;
+  gap: var(--search-trigger-gap);
 
   :hover {
     background-color: var(--search-trigger-hover-background-color);
@@ -68,13 +69,11 @@ 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: 13px;
-  height: 13px;
+  width: var(--search-trigger-icon-size);
+  height: var(--search-trigger-icon-size);
   fill: var(--search-trigger-text-color);
 `;
 //# sourceMappingURL=SearchTrigger.js.map

package/lib/components/Search/ShortcutKey.js

@@ -21,10 +21,6 @@ function ShortcutKey(props) {
 }
 exports.ShortcutKey = ShortcutKey;
 exports.Wrapper = styled_components_1.default.div `
-  cursor: pointer;
-  font-size: 0.75em;
-  right: 1em;
-  color: var(--search-trigger-shortcut-text-color);
-  opacity: 0.5;
+  font-size: var(--search-trigger-shortcut-font-size);
 `;
 //# 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-small);
-  line-height: 20px;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
   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-200);
+    outline: 2px solid var(--color-primary);
     border-radius: 2px;
   }
 `;

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

@@ -14,3 +14,4 @@ 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,4 +30,5 @@ __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/Search/styledVariables.d.ts

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

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

@@ -7,12 +7,19 @@ 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, }: SelectProps) => JSX.Element;
+export declare const Select: ({ className, selected, options, dataAttributes, withArrow, triggerEvent, onChange, placement, alignment, icon, onlyIcon, }: 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;
+    withIcon?: boolean | undefined;
+}, never>;
+export declare const SelectList: import("styled-components").StyledComponent<"ul", any, {
+    placement?: string | undefined;
+    alignment?: string | 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, }) => {
+const Select = ({ className, selected, options, dataAttributes, withArrow, triggerEvent = 'click', onChange, placement, alignment, icon, onlyIcon, }) => {
     const selectRef = (0, react_1.useRef)(null);
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const [_selected, setSelected] = (0, react_1.useState)(selected);
@@ -56,9 +56,10 @@ 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,
-            react_1.default.createElement(exports.SelectInputValue, { withArrow: withArrow }, _selected),
+            !onlyIcon && (react_1.default.createElement(exports.SelectInputValue, { withIcon: withArrow || !!icon }, _selected)),
+            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) }, option)))))));
 };
 exports.Select = Select;
 exports.SelectContainer = styled_components_1.default.div `
@@ -85,12 +86,14 @@ exports.SelectInput = styled_components_1.default.div `
 `;
 exports.SelectInputValue = styled_components_1.default.div `
   pointer-events: none;
-  ${({ withArrow }) => (withArrow ? 'margin-right: 8px;' : '')}
+  ${({ withIcon }) => (withIcon ? 'margin-right: 8px;' : '')}
 `;
 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);

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;