@redocly/theme 0.18.3 → 0.18.4-patch.1

package/lib/components/Menu/styledVariables.js

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.menu = exports.mobileMenu = void 0;
+const styled_components_1 = require("styled-components");
+exports.mobileMenu = (0, styled_components_1.css) `
+  /**
+      * @tokens Mobile Menu icons
+      */
+  --mobile-menu-icons-size: var(--spacing-md); // @presenter Spacing
+  --mobile-menu-search-icon-size: var(--spacing-md); // @presenter Spacing
+
+  /**
+      * @tokens Mobile Menu wrapper
+      * */
+  --mobile-menu-wrapper-height: calc(100vh - var(--navbar-height));
+  --mobile-menu-wrapper-width: 100%;
+  --mobile-menu-wrapper-z-index: var(--z-index-raised);
+  --mobile-menu-wrapper-left: 0;
+  --mobile-menu-wrapper-top: var(--navbar-height);
+  --mobile-menu-wrapper-transition: 0.5s;
+  --mobile-menu-wrapper-background: var(--bg-base); // @presenter Color
+
+  /**
+      * @tokens Mobile Menu
+      * */
+  --mobile-menu-margin: var(--mobile-menu-items-margin-top) var(--mobile-menu-horizontal-margin) 0
+    var(--mobile-menu-horizontal-margin);
+  --mobile-menu-line-height: var(--line-height-base); // @presenter LineHeight
+  --mobile-menu-padding-top: var(--spacing-sm); // @presenter Spacing
+  --mobile-menu-items-margin-top: var(--spacing-xxs); // @presenter Spacing
+  --mobile-menu-burger-button-margin: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) 0; // @presenter Spacing
+  --mobile-menu-background: var(--bg-base); // @presenter Color
+  --mobile-menu-profile-background: var(--bg-base); // @presenter Color
+  --mobile-menu-profile-border-color: var(--border-secondary); // @presenter Color
+  --mobile-menu-group-padding-right: var(--spacing-base); // @presenter Spacing
+  --mobile-menu-horizontal-margin: var(--spacing-xs); // @presenter Spacing
+  --mobile-menu-item-margin: 0; // @presenter Spacing
+  --mobile-menu-item-nested-offset: var(--spacing-xs); // @presenter Spacing
+  --mobile-menu-item-radius: var(--border-radius-md); // @presenter Spacing
+  --mobile-menu-item-text-color: var(--text-secondary); // @presenter Color
+  --mobile-menu-item-active-background-color: var(--bg-raised); // @presenter Color
+  --mobile-menu-item-active-text-color: var(--text-primary); // @presenter Color
+
+  /**
+      * @tokens Mobile Menu control button
+      * */
+  --mobile-menu-control-button-padding-vertical: 0; // @presenter Spacing
+  --mobile-menu-control-button-padding-horizontal: var(--spacing-xxs); // @presenter Spacing
+  --mobile-menu-control-button-padding: var(--mobile-menu-control-button-padding-vertical) var(--mobile-menu-control-button-padding-horizontal); // @presenter Spacing
+  --mobile-menu-control-button-margin-vertical: 0; // @presenter Spacing
+  --mobile-menu-control-button-margin-horizontal: var(--spacing-xs); // @presenter Spacing
+  --mobile-menu-control-button-margin: var(--mobile-menu-control-button-margin-vertical) var(--mobile-menu-control-button-margin-horizontal); // @presenter Spacing
+  --mobile-menu-control-button-font-size: var(--font-size-base); // @presenter FontSize
+  --mobile-menu-control-button-weight: var(--font-weight-regular); // @presenter FontWeight
+  --mobile-menu-control-button-color: var(--mobile-menu-item-text-color); // @presenter Color
+  --mobile-menu-control-button-hover-color: var(--text-primary); // @presenter Color
+  --mobile-menu-control-button-text-align: center;
+  --mobile-menu-control-button-line-height: var(--line-height-base); // @presenter LineHeight
+
+  /**
+      * @tokens Mobile Menu Login button
+      * */
+  --mobile-menu-login-button-background: var(--color-primary-bg); // @presenter Color
+  --mobile-menu-login-button-color: var(--color-primary-text); // @presenter Color
+  --mobile-menu-login-button-hover-color: var(--text-primary); // @presenter Color
+  --mobile-menu-login-button-border-color: var(--color-primary-border); // @presenter Color
+  --mobile-menu-login-button-border-radius: var(--border-radius-md); // @presenter Spacing
+  --mobile-menu-login-button-font-size: var(--font-size-base); // @presenter FontSize
+  --mobile-menu-login-button-font-family: inherit; // @presenter FontFamily
+  --mobile-menu-login-button-font-weight: var(--font-weight-bold); // @presenter FontWeight
+  --mobile-menu-login-button-line-height: var(--line-height-base); // @presenter LineHeight
+
+  /**
+      * @tokens Mobile Menu Product
+      * */
+  --mobile-menu-product-name-color: var(--mobile-menu-item-text-color);
+  --mobile-menu-product-name-border-radius: var(--mobile-menu-item-radius);
+  --mobile-menu-product-name-border: 1px solid var(--border-secondary);
+  --mobile-menu-product-name-padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);
+  --mobile-menu-product-name-margin: var(--spacing-sm) var(--spacing-xs) 0 var(--spacing-xs);
+  
+  // @tokens End
+`;
+exports.menu = (0, styled_components_1.css) `
+  /**
+    * @tokens Menu
+    */
+  --menu-padding: 0;
+  --menu-margin: 0;
+  --menu-list-style: none;
+  --menu-text-color: var(--sidebar-item-text-color);
+
+  --menu-item-label-align-items: center;
+  --menu-item-label-transition: background-color 0.3s, color 0.3s;
+  --menu-item-label-word-break: break-word;
+  --menu-item-label-margin: 0 var(--sidebar-margin-horizontal);
+  --menu-item-label-padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);
+
+  // @tokens End
+`;
+//# sourceMappingURL=styledVariables.js.map

package/lib/components/Navbar/Navbar.js

@@ -38,7 +38,7 @@ const useThemeConfig_1 = require("../../hooks/useThemeConfig");
 const Search_1 = require("../../components/Search/Search");
 const AuthUserProfile_1 = require("../../components/Profile/AuthUserProfile");
 const hooks_1 = require("../../mocks/hooks");
-const LanguagePicker_1 = require("../../I18n/LanguagePicker");
+const LanguagePicker_1 = require("../../i18n/LanguagePicker");
 const Product_1 = require("../../components/Product");
 const BurgerButton_1 = require("../../components/Navbar/BurgerButton");
 const EmptyNavbarHack = (0, styled_components_1.createGlobalStyle) `
@@ -88,11 +88,11 @@ function NavbarPresentational(props) {
             react_1.default.createElement(Product_1.ProductPicker, null),
             react_1.default.createElement(Navbar_1.NavbarMenu, { menuItems: menu }),
             hideSearch ? null : react_1.default.createElement(Search_1.Search, null),
-            react_1.default.createElement(LanguagePicker_1.LanguagePicker, { onChangeLanguage: changeLanguage }),
-            hideUserProfile ? null : (react_1.default.createElement(AuthUserProfileWrapper, null,
-                react_1.default.createElement(AuthUserProfile_1.AuthUserProfile, null))),
+            react_1.default.createElement(LanguagePicker_1.LanguagePicker, { onChangeLanguage: changeLanguage, onlyIcon: true }),
             react_1.default.createElement(ColorModeSwitcherWrapper, { isVisible: isOpen },
-                react_1.default.createElement(ColorModeSwitcher_1.ColorModeSwitcher, null)))));
+                react_1.default.createElement(ColorModeSwitcher_1.ColorModeSwitcher, null)),
+            hideUserProfile ? null : (react_1.default.createElement(AuthUserProfileWrapper, null,
+                react_1.default.createElement(AuthUserProfile_1.AuthUserProfile, null))))));
 }
 exports.NavbarPresentational = NavbarPresentational;
 const ColorModeSwitcherWrapper = styled_components_1.default.div `
@@ -110,6 +110,8 @@ const AuthUserProfileWrapper = styled_components_1.default.div `
   }
 `;
 exports.NavbarContainer = styled_components_1.default.nav `
+  border: var(--navbar-border);
+
   --text-color: var(--navbar-text-color);
 
   height: var(--navbar-height);
@@ -118,17 +120,13 @@ exports.NavbarContainer = styled_components_1.default.nav `
   align-items: center;
   flex-shrink: 0;
 
-  font-size: 0.875rem;
+  font-size: var(--navbar-font-size);
   position: sticky;
   top: 0;
   z-index: var(--z-index-raised);
-  padding: var(--navbar-item-padding-vertical) var(--navbar-item-padding-horizontal);
+  padding: 0;
   background: var(--navbar-background-color);
-  font-family: var(--navbar-item-font-family);
-
-  ${({ theme }) => theme.mediaQueries.medium} {
-    font-size: 1rem;
-  }
+  font-family: var(--navbar-font-family);
 
   ${({ theme }) => theme.mediaQueries.print} {
     background: transparent;
@@ -141,14 +139,23 @@ exports.NavbarContainer = styled_components_1.default.nav `
       margin: 0;
     }
   }
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    padding: var(--navbar-padding);
+  }
 `;
 exports.NavbarRow = styled_components_1.default.div `
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin: 0 auto;
-  width: 100%;
+  width: 90%;
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    width: 100%;
+  }
 
+  gap: var(--navbar-menu-items-gap);
   max-width: var(--navbar-container-max-width);
 `;
 //# sourceMappingURL=Navbar.js.map

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

@@ -6,7 +6,7 @@ export interface NavbarItemProps {
     className?: string;
 }
 export declare function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element | null;
-export declare const NavbarMenuItemDropdown: import("styled-components").StyledComponent<({ children, className, items, withArrow, triggerEvent, onChange, dataAttributes, }: import("../../components/Dropdown").DropdownProps) => JSX.Element, any, {
+export declare const NavbarMenuItemDropdown: import("styled-components").StyledComponent<({ children, className, items, withArrow, triggerEvent, onChange, dataAttributes, placement, alignment, icon, }: import("../../components/Dropdown").DropdownProps) => JSX.Element, any, {
     dataAttributes: {
         'data-component-name': string;
     };

package/lib/components/Navbar/NavbarItem.js

@@ -36,6 +36,7 @@ const hooks_1 = require("../../mocks/hooks");
 const utils_2 = require("../../utils");
 const telemetry_1 = require("../../mocks/telemetry");
 const Dropdown_1 = require("../../components/Dropdown");
+const icons_1 = require("../../icons");
 function NavbarItem({ navItem, className }) {
     const { pathname } = (0, react_router_dom_1.useLocation)();
     const { translate } = (0, hooks_1.useTranslate)();
@@ -47,7 +48,8 @@ function NavbarItem({ navItem, className }) {
         return (react_1.default.createElement(exports.NavbarMenuItem, { active: isActive, "data-component-name": "Navbar/NavbarItem", className: className, onClick: () => telemetry_1.telemetry.send('navbar_menu_item_clicked', { type: 'link' }) },
             react_1.default.createElement(exports.NavbarLink, { to: item.link, external: item.external, target: item.target, active: isActive },
                 item.icon ? react_1.default.createElement(exports.NavbarIcon, { url: item.icon }) : null,
-                react_1.default.createElement(NavbarLabel, null, translate(item.labelTranslationKey, item.label)))));
+                react_1.default.createElement(NavbarLabel, null, translate(item.labelTranslationKey, item.label)),
+                item.external ? react_1.default.createElement(icons_1.ExternalIcon, null) : null)));
     }
     if (navItem.items) {
         const item = navItem;
@@ -56,7 +58,8 @@ function NavbarItem({ navItem, className }) {
         return (react_1.default.createElement(exports.NavbarMenuItemDropdown, { items: groupItemsComponents, triggerEvent: "hover" },
             react_1.default.createElement(exports.NavbarMenuItem, { active: false, "data-component-name": "Navbar/NavbarItem", className: className, onClick: () => telemetry_1.telemetry.send('navbar_menu_item_clicked', { type: 'group' }) },
                 react_1.default.createElement(exports.NavbarIcon, { url: item.icon }),
-                react_1.default.createElement(NavbarLabel, null, translate(item.labelTranslationKey, item.label)))));
+                react_1.default.createElement(NavbarLabel, null, translate(item.labelTranslationKey, item.label)),
+                item.external ? react_1.default.createElement(icons_1.ExternalIcon, null) : null)));
     }
     return null;
 }
@@ -72,6 +75,8 @@ exports.NavbarMenuItemDropdown = (0, styled_components_1.default)(Dropdown_1.Dro
   }
 `;
 exports.NavbarLink = (0, styled_components_1.default)(Link_1.Link) `
+  display: flex;
+  align-items: center;
   color: ${({ active }) => active ? 'var(--navbar-item-active-text-color)' : 'var(--navbar-text-color)'};
   text-decoration: ${({ active }) => active ? 'var(--navbar-item-active-text-decoration)' : 'none'};
 `;
@@ -79,16 +84,23 @@ exports.NavbarMenuItem = styled_components_1.default.li `
   display: inline-block;
   padding: var(--navbar-item-padding-vertical) var(--navbar-item-padding-horizontal);
   text-align: center;
-  line-height: 1;
-  font-size: var(--navbar-item-font-size);
-  border-radius: var(--navbar-item-border-radius);
+  line-height: var(--navbar-item-line-height);
   font-weight: var(--navbar-item-font-weight);
+
+  border-radius: var(--navbar-item-border-radius);
+  border-bottom: ${({ active }) => active ? 'var(--navbar-item-active-bottom-border)' : 'var(--navbar-item-bottom-border)'};
+
   background: ${({ active }) => active && 'var(--navbar-item-active-background-color)'};
   color: ${({ active }) => active ? 'var(--navbar-item-active-text-color)' : 'var(--navbar-text-color)'};
+
   &:hover {
     color: var(--navbar-item-hover-text-color);
     text-decoration: var(--navbar-item-hover-text-decoration);
-    background: var(--navbar-item-hover-background-color);
+    border-bottom: ${({ active }) => !active && 'var(--navbar-item-hover-bottom-border)'};
+    background: ${({ active }) => active
+    ? 'var(--navbar-item-active-background-color)'
+    : 'var(--navbar-item-hover-background-color)'};
+
     ${exports.NavbarLink} {
       color: var(--navbar-item-hover-text-color);
       text-decoration: var(--navbar-item-hover-text-decoration);

package/lib/components/Navbar/NavbarMenu.js

@@ -23,9 +23,9 @@ const NavItemsContainer = styled_components_1.default.ul `
   display: none;
   flex-wrap: nowrap;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: var(--navbar-menu-justify-content);
   flex: 1;
-  gap: var(--navbar-item-gap);
+  gap: var(--navbar-menu-items-gap);
 
   ${({ theme }) => theme.mediaQueries.medium} {
     display: flex;

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

@@ -1,3 +1,4 @@
 export * from '../../components/Navbar/Navbar';
 export * from '../../components/Navbar/NavbarItem';
 export * from '../../components/Navbar/NavbarMenu';
+export * from '../../components/Navbar/styledVariables';

package/lib/components/Navbar/index.js

@@ -17,4 +17,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../../components/Navbar/Navbar"), exports);
 __exportStar(require("../../components/Navbar/NavbarItem"), exports);
 __exportStar(require("../../components/Navbar/NavbarMenu"), exports);
+__exportStar(require("../../components/Navbar/styledVariables"), exports);
 //# sourceMappingURL=index.js.map

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

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

package/lib/components/Navbar/styledVariables.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.navbar = void 0;
+const styled_components_1 = require("styled-components");
+exports.navbar = (0, styled_components_1.css) `
+  --navbar-background-color: var(--bg-base); // @presenter Color
+  --navbar-border-color: var(--border-secondary);
+  --navbar-border: 1px solid var(--navbar-border-color);
+
+  --navbar-text-color: var(--text-secondary); // @presenter Color
+  --navbar-height: 64px; // @presenter Spacing
+  --navbar-font-size: var(--font-size-base);
+  --navbar-padding: 0 var(--spacing-xl); // @presenter Spacing
+  --navbar-font-family: var(--font-family-base);
+  --navbar-container-max-width: 100%;
+
+  --navbar-menu-items-gap: var(--spacing-base);
+  --navbar-menu-justify-content: flex-start;
+
+  --navbar-item-font-weight: var(--font-weight-regular);
+
+  --navbar-item-active-text-color: var(--text-primary);
+  --navbar-item-active-text-decoration: none;
+  --navbar-item-active-bottom-border: 2px solid var(--navbar-item-active-text-color);
+
+  --navbar-item-padding-vertical: var(--spacing-xxs);
+  --navbar-item-padding-horizontal: var(--spacing-sm);
+  --navbar-item-line-height: var(--line-height-base);
+  --navbar-item-active-background-color: none;
+  --navbar-item-border-radius: 0;
+  --navbar-item-bottom-border: 2px solid transparent;
+
+  --navbar-item-hover-text-color: var(--text-primary);
+  --navbar-item-hover-text-decoration: none;
+  --navbar-item-hover-background-color: none;
+  --navbar-item-hover-bottom-border: 2px solid var(--border-primary);
+
+  --navbar-item-icon-width: 1.5em; // @presenter Spacing
+  --navbar-item-icon-height: 1.5em; // @presenter Spacing
+  --navbar-item-icon-margin-right: 0.5em; // @presenter Spacing
+`;
+//# sourceMappingURL=styledVariables.js.map

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

@@ -1,7 +1,10 @@
 /// <reference types="react" />
 import type { LogoConfig } from '../../types/portal';
 export type NavbarLogoProps = {
-    logo: Pick<LogoConfig, 'image' | 'link' | 'altText'>;
+    logo: Pick<LogoConfig, 'image' | 'link' | 'altText' | 'srcSet'>;
     className?: string;
 };
 export declare function NavbarLogo({ logo, className }: NavbarLogoProps): JSX.Element | null;
+export declare const LogoContainer: import("styled-components").StyledComponent<"div", any, {
+    'data-component-name': string;
+}, "data-component-name">;

package/lib/components/NavbarLogo/NavbarLogo.js

@@ -3,23 +3,31 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavbarLogo = void 0;
+exports.LogoContainer = exports.NavbarLogo = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Link_1 = require("../../mocks/Link");
+const Image_1 = require("../../components/Image/Image");
 const telemetry_1 = require("../../mocks/telemetry");
 function NavbarLogo({ logo, className }) {
-    if (!logo.image) {
+    if (!logo.image && !logo.srcSet) {
         return null;
     }
-    const img = (react_1.default.createElement(NavLogo, { className: className, src: logo.image, alt: logo.altText, "data-component-name": "NavbarLogo/NavbarLogo", onClick: () => telemetry_1.telemetry.send('logo_clicked', {}) }));
-    return logo.link ? react_1.default.createElement(Link_1.Link, { to: logo.link }, img) : img;
+    const img = (react_1.default.createElement(Image_1.Image, { className: className, src: logo.image, srcSet: logo.srcSet, alt: logo.altText }));
+    return (react_1.default.createElement(exports.LogoContainer, null, logo.link ? (react_1.default.createElement(Link_1.Link, { to: logo.link, onClick: () => telemetry_1.telemetry.send('logo_clicked', {}) }, img)) : (img)));
 }
 exports.NavbarLogo = NavbarLogo;
-const NavLogo = styled_components_1.default.img `
+exports.LogoContainer = styled_components_1.default.div.attrs({
+    'data-component-name': 'NavbarLogo/NavbarLogo',
+}) `
   max-width: var(--navbar-logo-max-width);
   max-height: var(--navbar-logo-max-height);
   height: var(--navbar-logo-height);
   margin: var(--navbar-logo-margin);
+
+  img {
+    max-width: 100%;
+    max-height: 100%;
+  }
 `;
 //# sourceMappingURL=NavbarLogo.js.map

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

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

package/lib/components/NavbarLogo/index.js

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

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

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

package/lib/components/NavbarLogo/styledVariables.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.logo = void 0;
+const styled_components_1 = require("styled-components");
+exports.logo = (0, styled_components_1.css) `
+  /**
+    * @tokens Logo
+    */
+
+  --navbar-logo-height: 2rem; // @presenter Spacing
+  --navbar-logo-width: auto;
+  --navbar-logo-margin: 16px; // @presenter Spacing
+  --navbar-logo-max-width: 285px; // @presenter Spacing
+  --navbar-logo-max-height: 285px; // @presenter Spacing
+
+  // @tokens End
+`;
+//# sourceMappingURL=styledVariables.js.map

package/lib/components/OpenApiDocs/DevOnboardingTryItSecurity.js

@@ -125,7 +125,7 @@ function DevOnboardingTryItSecurity(props) {
                     setAppId(value);
                     loadAppCredentials(value);
                 } }),
-            React.createElement(UseKeyButton, { disabled: (!selectedAppSecret && hasApiAccess) || appLoading, color: "secondary", onClick: () => {
+            React.createElement(UseKeyButton, { disabled: (!selectedAppSecret && hasApiAccess) || appLoading, onClick: () => {
                     if (selectedAppSecret) {
                         props.onChange(selectedAppSecret);
                     }
@@ -165,7 +165,7 @@ const FormLabel = styled_components_1.default.label `
         display: inline-block;
         content: '*';
         margin-left: 4px;
-        color: var(--color-error-500);
+        color: var(--color-error);
       }
     `}
 `;

package/lib/components/OpenApiDocs/Dropdown.js

@@ -104,7 +104,7 @@ box-sizing: border-box;
     &,
     &:hover,
     &:focus-within {
-      border: 1px solid var(--border-color);
+      border: 1px solid var(--border-primary);
       box-shadow: none;
     }
 
@@ -122,9 +122,9 @@ box-sizing: border-box;
     appearance: none;
     cursor: pointer;
 
-    color: var(--text-color);
+    color: var(--text-secondary);
     line-height: inherit;
-    font-size: 14px;
+    font-size: var(--font-size-base);
     font-family: inherit;
     padding: var(--docs-dropdown-padding);
     ${({ variant }) => (variant === 'dark' ? darkDropdownStyle : '')};

package/lib/components/PageNavigation/NextButton.js

@@ -43,7 +43,7 @@ function NextButton({ nextPage, className }) {
     const defaultText = (((_b = navigation === null || navigation === void 0 ? void 0 : navigation.nextButton) === null || _b === void 0 ? void 0 : _b.text) || 'Next to {label}').replace('{label}', nextPageText);
     const translationKey = 'theme.page.nextButton';
     const text = translate(translationKey, { label: nextPageText, defaultValue: defaultText });
-    return (React.createElement(StyledButton, { variant: "outlined", size: "large", to: nextPage.link, "data-component-name": "PageNavigation/NextPageLink", "data-translation-key": translationKey, extraClass: className }, text));
+    return (React.createElement(StyledButton, { size: "large", to: nextPage.link, "data-component-name": "PageNavigation/NextPageLink", "data-translation-key": translationKey, extraClass: className }, text));
 }
 exports.NextButton = NextButton;
 const StyledButton = (0, styled_components_1.default)(Button_1.Button) `

package/lib/components/PageNavigation/PreviousButton.js

@@ -23,7 +23,7 @@ function PreviousButton({ prevPage, className }) {
         label: prevPageText,
         defaultValue: defaultText,
     });
-    return (react_1.default.createElement(StyledButton, { variant: "outlined", size: "large", to: prevPage.link, "data-component-name": "PageNavigation/PreviousPageLink", "data-translation-key": translationKey, extraClass: className }, text));
+    return (react_1.default.createElement(StyledButton, { size: "large", to: prevPage.link, "data-component-name": "PageNavigation/PreviousPageLink", "data-translation-key": translationKey, extraClass: className }, text));
 }
 exports.PreviousButton = PreviousButton;
 const StyledButton = (0, styled_components_1.default)(Button_1.Button) `

package/lib/components/Panel/PanelHeader.js

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

package/lib/components/Panel/PanelHeaderTitle.js

@@ -13,10 +13,6 @@ 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,3 +3,4 @@ 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,4 +19,5 @@ __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/Panel/styledVariables.d.ts

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