@redocly/theme 0.56.0-rc.2 → 0.56.1

package/lib/components/Menu/MenuContainer.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

package/lib/components/Menu/MenuItem.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import type { MenuItemProps } from '../../core/types';
+import type { MenuItemProps } from '@redocly/theme/core/types';
 import type { JSX } from 'react';
 export declare function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Element;

package/lib/components/Menu/MenuItem.js

@@ -15,27 +15,38 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuItem = MenuItem;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
-const hooks_1 = require("../../core/hooks");
-const LaunchIcon_1 = require("../../icons/LaunchIcon/LaunchIcon");
-const Link_1 = require("../../components/Link/Link");
-const ChevronDownIcon_1 = require("../../icons/ChevronDownIcon/ChevronDownIcon");
-const ChevronRightIcon_1 = require("../../icons/ChevronRightIcon/ChevronRightIcon");
-const HttpTag_1 = require("../../components/Tags/HttpTag");
-const constants_1 = require("../../core/constants");
-const utils_1 = require("../../core/utils");
-const ArrowRightIcon_1 = require("../../icons/ArrowRightIcon/ArrowRightIcon");
-const Badge_1 = require("../../components/Badge/Badge");
+const hooks_1 = require("@redocly/theme/core/hooks");
+const LaunchIcon_1 = require("@redocly/theme/icons/LaunchIcon/LaunchIcon");
+const Link_1 = require("@redocly/theme/components/Link/Link");
+const ChevronDownIcon_1 = require("@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon");
+const ChevronRightIcon_1 = require("@redocly/theme/icons/ChevronRightIcon/ChevronRightIcon");
+const HttpTag_1 = require("@redocly/theme/components/Tags/HttpTag");
+const constants_1 = require("@redocly/theme/core/constants");
+const utils_1 = require("@redocly/theme/core/utils");
+const ArrowRightIcon_1 = require("@redocly/theme/icons/ArrowRightIcon/ArrowRightIcon");
+const Badge_1 = require("@redocly/theme/components/Badge/Badge");
+const GenericIcon_1 = require("@redocly/theme/icons/GenericIcon/GenericIcon");
 function MenuItem(props) {
     var _a;
     const { item, depth, className, onClick } = props;
@@ -75,7 +86,7 @@ function MenuItem(props) {
     const httpColor = item.deprecated ? 'http-deprecated' : item.httpVerb;
     const label = item.label && (react_1.default.createElement(MenuItemLabelWrapper, { active: item.active, deprecated: item.deprecated, depth: depth, withChevron: hasChevron, isSeparator: isSeparator, onClick: handleOnClick, onKeyDown: handleExpandOnEnter, ref: labelRef, role: item.link ? 'none' : 'link', tabIndex: !item.link ? 0 : undefined, "data-testid": "menu-item-label" },
         hasChevron ? react_1.default.createElement(ChevronWrapper, null, chevron) : null,
-        item.icon ? react_1.default.createElement(MenuItemIcon, { src: item.icon }) : null,
+        react_1.default.createElement(MenuItemIcon, { icon: item.icon, srcSet: item.srcSet }),
         react_1.default.createElement(MenuItemLabelTextWrapper, null,
             react_1.default.createElement(MenuItemLabel, null,
                 react_1.default.createElement("span", null, translate(item.labelTranslationKey, item.label)), (_a = item.badges) === null || _a === void 0 ? void 0 :
@@ -240,11 +251,10 @@ const MenuItemSubLabel = styled_components_1.default.div `
   font-size: var(--menu-item-sublabel-font-size);
   font-family: var(--menu-item-sublabel-font-family);
 `;
-const MenuItemIcon = styled_components_1.default.img `
-  width: var(--menu-item-icon-size);
-  height: var(--menu-item-icon-size);
+const MenuItemIcon = (0, styled_components_1.default)(GenericIcon_1.GenericIcon) `
+  --icon-width: var(--menu-item-icon-size);
+  --icon-height: var(--menu-item-icon-size);
   margin: var(--menu-item-icon-margin);
-  border-radius: var(--menu-item-icon-border-radius);
   flex-shrink: 0;
   overflow: hidden;
 `;

package/lib/components/Menu/MenuMobile.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,16 +40,16 @@ exports.MenuMobile = MenuMobile;
 const react_1 = __importStar(require("react"));
 const react_router_dom_1 = require("react-router-dom");
 const styled_components_1 = __importDefault(require("styled-components"));
-const utils_1 = require("../../core/utils");
-const hooks_1 = require("../../core/hooks");
-const constants_1 = require("../../core/constants");
-const ChevronRightIcon_1 = require("../../icons/ChevronRightIcon/ChevronRightIcon");
-const ChevronLeftIcon_1 = require("../../icons/ChevronLeftIcon/ChevronLeftIcon");
-const Menu_1 = require("../../components/Menu/Menu");
-const Button_1 = require("../../components/Button/Button");
-const ArrowLeftIcon_1 = require("../../icons/ArrowLeftIcon/ArrowLeftIcon");
-const UserMenuMobile_1 = require("../../components/UserMenu/UserMenuMobile");
-const Product_1 = require("../../components/Product/Product");
+const utils_1 = require("@redocly/theme/core/utils");
+const hooks_1 = require("@redocly/theme/core/hooks");
+const constants_1 = require("@redocly/theme/core/constants");
+const ChevronRightIcon_1 = require("@redocly/theme/icons/ChevronRightIcon/ChevronRightIcon");
+const ChevronLeftIcon_1 = require("@redocly/theme/icons/ChevronLeftIcon/ChevronLeftIcon");
+const Menu_1 = require("@redocly/theme/components/Menu/Menu");
+const Button_1 = require("@redocly/theme/components/Button/Button");
+const ArrowLeftIcon_1 = require("@redocly/theme/icons/ArrowLeftIcon/ArrowLeftIcon");
+const UserMenuMobile_1 = require("@redocly/theme/components/UserMenu/UserMenuMobile");
+const Product_1 = require("@redocly/theme/components/Product/Product");
 function MenuMobile({ className, hideUserProfile }) {
     var _a, _b, _c;
     const location = (0, react_router_dom_1.useLocation)();

package/lib/components/Menu/variables.js

@@ -71,7 +71,7 @@ exports.menu = (0, styled_components_1.css) `
    * @tokens Menu item icons
    */
   --menu-item-icon-size: var(--spacing-base);
-  --menu-item-icon-margin: 0px;
+  --menu-item-icon-margin: 0 var(--spacing-xxs) 0 0;
   --menu-item-icon-border-radius: 100%;
 
   --menu-item-external-icon-size: 10px;
@@ -129,7 +129,9 @@ exports.mobileMenu = (0, styled_components_1.css) `
   /**
     * @tokens Mobile Menu
     * */
+  /* Fallback for older browsers. dvh accounts for dynamic UI elements like mobile address bars */
   --menu-mobile-height: calc(100vh - var(--navbar-height));
+  --menu-mobile-height: calc(100dvh - var(--navbar-height));
   --menu-mobile-width: 100%;
   --menu-mobile-z-index: var(--z-index-raised);
   --menu-mobile-left: 0;

package/lib/components/Navbar/Navbar.js

@@ -6,19 +6,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Navbar = Navbar;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const utils_1 = require("../../core/utils");
-const hooks_1 = require("../../core/hooks");
-const NavbarLogo_1 = require("../../components/Navbar/NavbarLogo");
-const NavbarMenu_1 = require("../../components/Navbar/NavbarMenu");
-const MenuMobile_1 = require("../../components/Menu/MenuMobile");
-const ColorModeSwitcher_1 = require("../../components/ColorModeSwitcher/ColorModeSwitcher");
-const Search_1 = require("../../components/Search/Search");
-const UserMenu_1 = require("../../components/UserMenu/UserMenu");
-const LanguagePicker_1 = require("../../components/LanguagePicker/LanguagePicker");
-const ProductPicker_1 = require("../../components/Product/ProductPicker");
-const Button_1 = require("../../components/Button/Button");
-const MenuIcon_1 = require("../../icons/MenuIcon/MenuIcon");
-const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
+const utils_1 = require("@redocly/theme/core/utils");
+const hooks_1 = require("@redocly/theme/core/hooks");
+const NavbarLogo_1 = require("@redocly/theme/components/Navbar/NavbarLogo");
+const NavbarMenu_1 = require("@redocly/theme/components/Navbar/NavbarMenu");
+const MenuMobile_1 = require("@redocly/theme/components/Menu/MenuMobile");
+const ColorModeSwitcher_1 = require("@redocly/theme/components/ColorModeSwitcher/ColorModeSwitcher");
+const Search_1 = require("@redocly/theme/components/Search/Search");
+const UserMenu_1 = require("@redocly/theme/components/UserMenu/UserMenu");
+const LanguagePicker_1 = require("@redocly/theme/components/LanguagePicker/LanguagePicker");
+const ProductPicker_1 = require("@redocly/theme/components/Product/ProductPicker");
+const Button_1 = require("@redocly/theme/components/Button/Button");
+const MenuIcon_1 = require("@redocly/theme/icons/MenuIcon/MenuIcon");
+const CloseIcon_1 = require("@redocly/theme/icons/CloseIcon/CloseIcon");
 function Navbar({ className }) {
     var _a;
     const { isOpen, closeMobileMenu, openMobileMenu } = (0, hooks_1.useMobileMenu)(false);

package/lib/components/Navbar/NavbarItem.js

@@ -1,42 +1,20 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavbarItem = NavbarItem;
 const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importStar(require("styled-components"));
+const styled_components_1 = __importDefault(require("styled-components"));
 const react_router_dom_1 = require("react-router-dom");
-const DropdownMenu_1 = require("../../components/Dropdown/DropdownMenu");
-const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem");
-const utils_1 = require("../../core/utils");
-const hooks_1 = require("../../core/hooks");
-const LaunchIcon_1 = require("../../icons/LaunchIcon/LaunchIcon");
-const Link_1 = require("../../components/Link/Link");
-const Dropdown_1 = require("../../components/Dropdown/Dropdown");
+const DropdownMenu_1 = require("@redocly/theme/components/Dropdown/DropdownMenu");
+const DropdownMenuItem_1 = require("@redocly/theme/components/Dropdown/DropdownMenuItem");
+const utils_1 = require("@redocly/theme/core/utils");
+const hooks_1 = require("@redocly/theme/core/hooks");
+const LaunchIcon_1 = require("@redocly/theme/icons/LaunchIcon/LaunchIcon");
+const Link_1 = require("@redocly/theme/components/Link/Link");
+const Dropdown_1 = require("@redocly/theme/components/Dropdown/Dropdown");
+const GenericIcon_1 = require("@redocly/theme/icons/GenericIcon/GenericIcon");
 function NavbarItem({ navItem, className }) {
     const { pathname } = (0, react_router_dom_1.useLocation)();
     const { useTranslate, useL10nConfig, useTelemetry } = (0, hooks_1.useThemeHooks)();
@@ -50,7 +28,7 @@ function NavbarItem({ navItem, className }) {
     const isActive = pathname ===
         (0, utils_1.withPathPrefix)((0, utils_1.getPathnameForLocale)(normalizedPath, defaultLocale, currentLocale, locales));
     const itemContent = (react_1.default.createElement(NavbarMenuItem, { as: item.link ? Link_1.Link : undefined, active: isActive, className: className, onClick: () => telemetry.send({ type: 'navbar.menu_item_clicked', payload: { type: item.type } }), external: item.external, target: item.target, to: item.link },
-        react_1.default.createElement(NavbarIcon, { url: item.icon }),
+        react_1.default.createElement(NavbarIcon, { icon: item.icon, srcSet: item.srcSet }),
         react_1.default.createElement(NavbarLabel, { "data-translation-key": item.labelTranslationKey }, translate(item.labelTranslationKey, item.label)),
         item.external ? react_1.default.createElement(ExternalLinkIcon, { size: "10px" }) : null));
     if (navItem.items) {
@@ -60,7 +38,7 @@ function NavbarItem({ navItem, className }) {
             if (item.type !== 'link' && item.type !== 'separator')
                 return null;
             return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: `${item.label}_${index}`, to: item.link, separator: item.type === 'separator', separatorLine: item.separatorLine, "data-translation-key": item.labelTranslationKey, external: item.external },
-                react_1.default.createElement(NavbarIcon, { url: item.icon }),
+                react_1.default.createElement(NavbarIcon, { icon: item.icon, srcSet: item.srcSet }),
                 react_1.default.createElement(NavbarLabel, { "data-translation-key": item.labelTranslationKey }, translate(item.labelTranslationKey, item.label)),
                 item.external ? react_1.default.createElement(ExternalLinkIcon, { size: "10px" }) : null));
         });
@@ -100,19 +78,10 @@ const NavbarLabel = styled_components_1.default.span `
   cursor: pointer;
   vertical-align: middle;
 `;
-const NavbarIcon = styled_components_1.default.i `
-  ${({ url }) => url &&
-    (0, styled_components_1.css) `
-      background-image: url('${url}');
-      width: var(--navbar-item-icon-width);
-      height: var(--navbar-item-icon-height);
-      display: inline-block;
-      background-size: contain;
-      margin-right: var(--navbar-item-icon-margin-right);
-      vertical-align: middle;
-      background-position: center;
-      background-repeat: no-repeat;
-    `}
+const NavbarIcon = (0, styled_components_1.default)(GenericIcon_1.GenericIcon) `
+  --icon-width: var(--navbar-item-icon-width);
+  --icon-height: var(--navbar-item-icon-height);
+  margin-right: var(--navbar-item-icon-margin-right);
 `;
 const ExternalLinkIcon = (0, styled_components_1.default)(LaunchIcon_1.LaunchIcon) `
   margin-left: 5px;

package/lib/components/Navbar/NavbarLogo.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import type { LogoProps } from '../../components/Logo/Logo';
+import type { LogoProps } from '@redocly/theme/components/Logo/Logo';
 export declare function NavbarLogo(props: LogoProps): React.JSX.Element;

package/lib/components/Navbar/NavbarLogo.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavbarLogo = NavbarLogo;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const Logo_1 = require("../../components/Logo/Logo");
+const Logo_1 = require("@redocly/theme/components/Logo/Logo");
 function NavbarLogo(props) {
     return react_1.default.createElement(NavbarLogoComponent, Object.assign({}, props, { "data-component-name": "Navbar/NavbarLogo" }));
 }

package/lib/components/Navbar/NavbarMenu.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavbarMenu = NavbarMenu;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const utils_1 = require("../../core/utils");
-const NavbarItem_1 = require("../../components/Navbar/NavbarItem");
+const utils_1 = require("@redocly/theme/core/utils");
+const NavbarItem_1 = require("@redocly/theme/components/Navbar/NavbarItem");
 function NavbarMenu({ menuItems, className }) {
     if ((0, utils_1.isPrimitive)(menuItems)) {
         return null;

package/lib/components/Navbar/variables.js

@@ -37,8 +37,8 @@ exports.navbar = (0, styled_components_1.css) `
   --navbar-item-bg-color-hover: var(--bg-color);
   --navbar-item-bottom-border-hover: none;
 
-  --navbar-item-icon-width: 1.5em; // @presenter Spacing
-  --navbar-item-icon-height: 1.5em; // @presenter Spacing
+  --navbar-item-icon-width: 1.25em; // @presenter Spacing
+  --navbar-item-icon-height: 1.25em; // @presenter Spacing
   --navbar-item-icon-margin-right: 0.5em; // @presenter Spacing
 
   --navbar-logo-height: var(--logo-height);

package/lib/components/PageActions/PageActions.d.ts

@@ -0,0 +1,6 @@
+import type { JSX } from 'react';
+type PageActionProps = {
+    pageSlug: string;
+};
+export declare function PageActions(props: PageActionProps): JSX.Element | null;
+export {};

package/lib/components/PageActions/PageActions.js

@@ -0,0 +1,114 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageActions = PageActions;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const PageActionsMenuItem_1 = require("@redocly/theme/components/PageActions/PageActionsMenuItem");
+const Link_1 = require("@redocly/theme/components/Link/Link");
+const ButtonGroup_1 = require("@redocly/theme/components/Button/ButtonGroup");
+const Button_1 = require("@redocly/theme/components/Button/Button");
+const Dropdown_1 = require("@redocly/theme/components/Dropdown/Dropdown");
+const DropdownMenu_1 = require("@redocly/theme/components/Dropdown/DropdownMenu");
+const Spinner_1 = require("@redocly/theme/icons/Spinner/Spinner");
+const CheckmarkFilledIcon_1 = require("@redocly/theme/icons/CheckmarkFilledIcon/CheckmarkFilledIcon");
+const hooks_1 = require("@redocly/theme/core/hooks");
+const ACTION_DONE_DISPLAY_DURATION = 1000;
+function PageActions(props) {
+    const { pageSlug } = props;
+    const actions = (0, hooks_1.usePageActions)(pageSlug || '/');
+    const [actionState, setActionState] = (0, react_1.useState)('idle');
+    if (!actions.length) {
+        return null;
+    }
+    const buttonAction = actions[0];
+    const handleActionClick = (action) => __awaiter(this, void 0, void 0, function* () {
+        if (!('onClick' in action)) {
+            return;
+        }
+        setActionState('processing');
+        yield action.onClick();
+        setActionState('done');
+        setTimeout(() => {
+            setActionState('idle');
+        }, ACTION_DONE_DISPLAY_DURATION);
+    });
+    const menuItems = actions.map((action) => ({
+        content: 'link' in action ? (react_1.default.createElement(LinkMenuItem, { to: action.link, external: true },
+            react_1.default.createElement(PageActionsMenuItem_1.PageActionsMenuItem, { pageAction: action }))) : (react_1.default.createElement(PageActionsMenuItem_1.PageActionsMenuItem, { pageAction: action })),
+        onAction: 'onClick' in action ? () => handleActionClick(action) : undefined,
+    }));
+    return (react_1.default.createElement(PageActionsWrapper, null,
+        react_1.default.createElement(ButtonGroup_1.ButtonGroup, { variant: "outlined", size: "medium" },
+            react_1.default.createElement(Button_1.Button, { icon: renderIcon(buttonAction, actionState), to: 'link' in buttonAction ? buttonAction.link : undefined, external: true, onClick: () => handleActionClick(buttonAction) }, buttonAction.buttonText),
+            actions.length > 1 ? (react_1.default.createElement(Dropdown_1.Dropdown, { withArrow: true, trigger: react_1.default.createElement(Button_1.Button, null), placement: "bottom", alignment: "end" },
+                react_1.default.createElement(DropdownMenu_1.DropdownMenu, { items: menuItems }))) : null)));
+}
+function renderIcon(buttonAction, actionState) {
+    switch (actionState) {
+        case 'processing':
+            return react_1.default.createElement(Spinner_1.Spinner, { color: "var(--page-actions-processing-icon-color)" });
+        case 'done':
+            return react_1.default.createElement(CheckmarkFilledIcon_1.CheckmarkFilledIcon, { color: "var(--page-actions-done-icon-color)" });
+        default:
+            return react_1.default.createElement(buttonAction.iconComponent, null);
+    }
+}
+const PageActionsWrapper = styled_components_1.default.div `
+  margin-left: auto;
+  padding-left: var(--page-actions-padding-left);
+  --button-color: var(--page-actions-button-text-color);
+
+  .button-group-size-medium .button.button-size-medium {
+    --button-icon-left-padding: var(--page-actions-button-padding);
+  }
+`;
+const LinkMenuItem = (0, styled_components_1.default)(Link_1.Link) `
+  text-decoration: none;
+  --link-decoration-hover: none;
+`;
+//# sourceMappingURL=PageActions.js.map

package/lib/components/PageActions/PageActionsMenuItem.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { PageAction } from '@redocly/theme/core/types';
+type PageActionsMenuItemProps = {
+    pageAction: PageAction;
+};
+export declare function PageActionsMenuItem(props: PageActionsMenuItemProps): React.JSX.Element;
+export {};

package/lib/components/PageActions/PageActionsMenuItem.js

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageActionsMenuItem = PageActionsMenuItem;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const LaunchIcon_1 = require("@redocly/theme/icons/LaunchIcon/LaunchIcon");
+function PageActionsMenuItem(props) {
+    const { pageAction } = props;
+    return (react_1.default.createElement(MenuItemWrapper, { "data-component-name": "PageActions/PageActionsMenuItem" },
+        react_1.default.createElement(IconWrapper, null,
+            react_1.default.createElement(pageAction.iconComponent, null)),
+        react_1.default.createElement(ContentWrapper, null,
+            react_1.default.createElement(Title, null,
+                pageAction.title,
+                'link' in pageAction ? (react_1.default.createElement(LaunchIcon_1.LaunchIcon, { color: "var(--page-actions-menu-item-title-icon-color)", size: "14px" })) : null),
+            react_1.default.createElement(Description, null, pageAction.description))));
+}
+const MenuItemWrapper = styled_components_1.default.div `
+  padding: var(--page-actions-menu-item-padding);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--page-actions-menu-item-gap);
+`;
+const IconWrapper = styled_components_1.default.div `
+  color: var(--page-actions-menu-item-icon-color);
+  border: 1px solid var(--page-actions-menu-item-icon-border-color);
+  border-radius: var(--page-actions-menu-item-icon-border-radius);
+  width: var(--page-actions-menu-item-icon-wrapper-size);
+  height: var(--page-actions-menu-item-icon-wrapper-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const ContentWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: var(--page-actions-menu-item-text-gap);
+`;
+const Title = styled_components_1.default.div `
+  font-weight: var(--page-actions-menu-item-title-font-weight);
+  font-size: var(--page-actions-menu-item-title-font-size);
+  line-height: var(--page-actions-menu-item-title-line-height);
+  color: var(--page-actions-menu-item-title-color);
+  display: flex;
+  align-items: center;
+  gap: var(--page-actions-menu-item-title-icon-gap);
+`;
+const Description = styled_components_1.default.div `
+  font-weight: var(--page-actions-menu-item-description-font-weight);
+  font-size: var(--page-actions-menu-item-description-font-size);
+  line-height: var(--page-actions-menu-item-description-line-height);
+  color: var(--page-actions-menu-item-description-color);
+`;
+//# sourceMappingURL=PageActionsMenuItem.js.map

package/lib/components/PageActions/variables.d.ts

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

package/lib/components/PageActions/variables.dark.d.ts

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

package/lib/components/PageActions/variables.dark.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pageActionsDarkMode = void 0;
+const styled_components_1 = require("styled-components");
+exports.pageActionsDarkMode = (0, styled_components_1.css) `
+  --page-actions-menu-item-icon-border-color: var(--color-warm-grey-5);
+  --page-actions-menu-item-description-color: var(--text-color-secondary);
+`;
+//# sourceMappingURL=variables.dark.js.map

package/lib/components/PageActions/variables.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pageActions = void 0;
+const styled_components_1 = require("styled-components");
+exports.pageActions = (0, styled_components_1.css) `
+  /* Minimum spacing between page actions and heading text */
+  --page-actions-padding-left: var(--spacing-sm);
+
+  --page-actions-button-text-color: var(--text-color-secondary);
+  --page-actions-button-padding: 5px 14px 5px var(--spacing-sm);
+
+  --page-actions-menu-item-padding: 3px 0;
+  --page-actions-menu-item-gap: var(--spacing-xs);
+  --page-actions-menu-item-icon-color: var(--icon-color-secondary);
+  --page-actions-menu-item-icon-border-color: var(--color-warm-grey-3);
+  --page-actions-menu-item-icon-border-radius: var(--border-radius);
+  --page-actions-menu-item-icon-wrapper-size: 28px;
+
+  --page-actions-menu-item-text-gap: 2px;
+
+  --page-actions-menu-item-title-font-weight: var(--font-weight-regular);
+  --page-actions-menu-item-title-font-size: var(--font-size-base);
+  --page-actions-menu-item-title-line-height: var(--line-height-base);
+  --page-actions-menu-item-title-color: var(--text-color-secondary);
+
+  --page-actions-menu-item-title-icon-gap: var(--spacing-xxs);
+  --page-actions-menu-item-title-icon-color: var(--icon-color-secondary);
+
+  --page-actions-menu-item-description-font-weight: var(--font-weight-regular);
+  --page-actions-menu-item-description-font-size: var(--font-size-sm);
+  --page-actions-menu-item-description-line-height: var(--line-height-sm);
+  --page-actions-menu-item-description-color: var(--text-color-description);
+
+  --page-actions-processing-icon-color: var(--icon-color-interactive);
+  --page-actions-done-icon-color: var(--color-success-base);
+`;
+//# sourceMappingURL=variables.js.map

package/lib/components/PageNavigation/NavigationButton.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavigationButton = NavigationButton;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const ArrowRightIcon_1 = require("../../icons/ArrowRightIcon/ArrowRightIcon");
-const Button_1 = require("../../components/Button/Button");
-const ArrowLeftIcon_1 = require("../../icons/ArrowLeftIcon/ArrowLeftIcon");
+const ArrowRightIcon_1 = require("@redocly/theme/icons/ArrowRightIcon/ArrowRightIcon");
+const Button_1 = require("@redocly/theme/components/Button/Button");
+const ArrowLeftIcon_1 = require("@redocly/theme/icons/ArrowLeftIcon/ArrowLeftIcon");
 function NavigationButton({ label, link, text, translationKey, position, icon = position === 'left' ? react_1.default.createElement(ArrowLeftIcon_1.ArrowLeftIcon, null) : react_1.default.createElement(ArrowRightIcon_1.ArrowRightIcon, null), className, }) {
     return (react_1.default.createElement(NavigationButtonWrapper, { "data-component-name": "PageNavigation/NavigationButton", "data-translation-key": translationKey, position: position },
         react_1.default.createElement(NavigationButtonLabel, null, text),