@redocly/theme 0.10.0 → 0.11.0

package/lib/components/Navbar/NavbarItem.js

@@ -0,0 +1,72 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavbarMenuItem = exports.NavbarLink = exports.NavbarMenuItemWithDropdownWrapper = exports.NavbarItem = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const react_router_dom_1 = require("react-router-dom");
+const Link_1 = require("../../mocks/Link");
+const NavbarDropdown_1 = require("../../components/Navbar/NavbarDropdown");
+const utils_1 = require("../../utils");
+function NavbarItem({ navItem, className }) {
+    const { pathname } = (0, react_router_dom_1.useLocation)();
+    if (navItem.link) {
+        const item = navItem;
+        const isActive = pathname === (0, utils_1.withPathPrefix)(item.link);
+        return (react_1.default.createElement(exports.NavbarMenuItem, { active: isActive, "data-component-name": "Navbar/NavbarItem", className: className },
+            react_1.default.createElement(exports.NavbarLink, { to: item.link, external: item.external, target: item.target, active: isActive },
+                react_1.default.createElement(NavbarLabel, null, item.label))));
+    }
+    if (navItem.items) {
+        const item = navItem;
+        return (react_1.default.createElement(exports.NavbarMenuItemWithDropdownWrapper, null,
+            react_1.default.createElement(exports.NavbarMenuItem, { active: false, "data-component-name": "Navbar/NavbarItem", className: className },
+                react_1.default.createElement(NavbarLabel, null, item.label)),
+            react_1.default.createElement(NavbarDropdown_1.NavbarDropdown, { items: item.items })));
+    }
+    return null;
+}
+exports.NavbarItem = NavbarItem;
+exports.NavbarMenuItemWithDropdownWrapper = styled_components_1.default.div `
+  display: inline-block;
+  position: relative;
+  border-radius: var(--navbar-item-border-radius);
+  &:hover {
+    background: var(--navbar-item-active-background-color);
+    ${NavbarDropdown_1.DropdownWrapper} {
+      display: block;
+    }
+  }
+`;
+exports.NavbarLink = (0, styled_components_1.default)(Link_1.Link) `
+  color: ${({ active }) => active ? 'var(--navbar-item-active-text-color)' : 'var(--navbar-text-color)'};
+  text-decoration: ${({ active }) => active ? 'var(--navbar-item-active-text-decoration)' : 'none'};
+`;
+exports.NavbarMenuItem = styled_components_1.default.li `
+  display: inline-block;
+  padding: var(--navbar-item-paddin-vertical) var(--navbar-item-padding-horizontal);
+  margin-left: var(--navbar-item-margin-horizontal);
+  text-align: center;
+  line-height: 1;
+  font-size: var(--navbar-item-font-size);
+  border-radius: var(--navbar-item-border-radius);
+  font-weight: var(--navbar-item-font-weight);
+  background: ${({ active }) => active && 'var(--navbar-item-active-background-color)'};
+  color: ${({ active }) => active && 'var(--navbar-item-active-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);
+    ${exports.NavbarLink} {
+      color: var(--navbar-item-hover-text-color);
+      text-decoration: var(--navbar-item-hover-text-decoration);
+    }
+  }
+`;
+const NavbarLabel = styled_components_1.default.span `
+  cursor: pointer;
+  vertical-align: middle;
+`;
+//# sourceMappingURL=NavbarItem.js.map

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { ResolvedConfigLinks } from '../../types/portal';
+export declare function NavbarMenu({ menuItems }: {
+    menuItems: ResolvedConfigLinks;
+}): JSX.Element | null;

package/lib/components/Navbar/NavbarMenu.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavbarMenu = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const NavbarItem_1 = require("../../components/Navbar/NavbarItem");
+const utils_1 = require("../../utils");
+function NavbarMenu({ menuItems }) {
+    if ((0, utils_1.isPrimitive)(menuItems)) {
+        return null;
+    }
+    return (react_1.default.createElement(NavItemsContainer, { "data-component-name": "Navbar/NavbarMenu" }, menuItems.map((navItem, index) => {
+        return (react_1.default.createElement(NavbarItem_1.NavbarItem, { key: `${navItem.label}_${index}`, "data-cy": navItem.label, navItem: navItem }));
+    })));
+}
+exports.NavbarMenu = NavbarMenu;
+const NavItemsContainer = styled_components_1.default.ul `
+  list-style: none;
+  margin: 0 var(--navbar-item-margin-horizontal);
+  padding: 0;
+  display: none;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: flex-end;
+  flex: 1;
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: flex;
+  }
+`;
+//# sourceMappingURL=NavbarMenu.js.map

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

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

package/lib/components/Navbar/index.js

@@ -0,0 +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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../../components/Navbar/Navbar"), exports);
+__exportStar(require("../../components/Navbar/NavbarItem"), exports);
+__exportStar(require("../../components/Navbar/NavbarMenu"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { LogoConfig } from '../../types/portal';
+export type NavbarLogoProps = {
+    logo: Pick<LogoConfig, 'image' | 'link' | 'altText'>;
+};
+export declare function NavbarLogo({ logo }: NavbarLogoProps): JSX.Element | null;

package/lib/components/NavbarLogo/NavbarLogo.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavbarLogo = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Link_1 = require("../../mocks/Link");
+function NavbarLogo({ logo }) {
+    if (!logo.image) {
+        return null;
+    }
+    const img = (react_1.default.createElement(NavLogo, { src: logo.image, alt: logo.altText, "data-component-name": "NavbarLogo/NavbarLogo" }));
+    return logo.link ? react_1.default.createElement(Link_1.Link, { to: logo.link }, img) : img;
+}
+exports.NavbarLogo = NavbarLogo;
+const NavLogo = styled_components_1.default.img `
+  max-width: var(--navbar-logo-max-width);
+  max-height: var(--navbar-logo-max-height);
+  height: var(--navbar-logo-height);
+  margin: var(--navbar-logo-margin);
+`;
+//# sourceMappingURL=NavbarLogo.js.map

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

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

package/lib/components/NavbarLogo/index.js

@@ -0,0 +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 });
+__exportStar(require("../../components/NavbarLogo/NavbarLogo"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/OpenAPIDocs/DevOnboardingTryItSecurity.js

@@ -0,0 +1,177 @@
+"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.DevOnboardingTryItSecurity = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Button_1 = require("../../components/Button/Button");
+const usePreloadHistory_1 = require("../../mocks/usePreloadHistory");
+const Dropdown_1 = require("./Dropdown");
+function DevOnboardingTryItSecurity(props) {
+    const apiId = props.apiId;
+    const history = (0, usePreloadHistory_1.usePreloadHistory)();
+    // @ts-ignore
+    const { userData } = props;
+    // TODO: handle error
+    const [_error, setError] = React.useState();
+    const [apps, setApps] = React.useState();
+    const [appId, setAppId] = React.useState('');
+    const [loading, setLoading] = React.useState(true);
+    const [appLoading, setAppLoading] = React.useState(false);
+    const [selectedAppSecret, setSelectedAppSecret] = React.useState();
+    const [acceptValueUpdate, setAcceptValueUpdate] = React.useState(true);
+    const initialRender = React.useRef(true);
+    const hasApiAccess = !loading && !!(apps === null || apps === void 0 ? void 0 : apps.length);
+    React.useEffect(() => {
+        if (!props.value && initialRender.current)
+            return;
+        if (acceptValueUpdate) {
+            setAcceptValueUpdate(false);
+        }
+        else {
+            setAppId('');
+            setSelectedAppSecret('');
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.value]);
+    React.useEffect(() => {
+        initialRender.current = false;
+        const prevAppId = sessionStorage.getItem('redocly_onboarding:prevAppId');
+        if (prevAppId) {
+            setAppId(prevAppId);
+        }
+        if (userData === null || userData === void 0 ? void 0 : userData.isAuthenticated) {
+            fetch(`/api/api-keys/api-products/${apiId}/access?expand=1`).then((res) => {
+                return res
+                    .json()
+                    .then((data) => {
+                    var _a;
+                    if (res.ok) {
+                        setApps(data.apps);
+                        if ((_a = data.apps[0]) === null || _a === void 0 ? void 0 : _a.id) {
+                            setAppId(data.apps[0].id);
+                            loadAppCredentials(data.apps[0].id);
+                        }
+                    }
+                    else {
+                        setError(data.message);
+                    }
+                })
+                    .catch(() => setError('Something went wrong'))
+                    .finally(() => setLoading(false));
+            });
+        }
+    }, [apiId, userData === null || userData === void 0 ? void 0 : userData.isAuthenticated]);
+    React.useEffect(() => {
+        sessionStorage.setItem('redocly_onboarding:prevAppId', appId || '');
+    }, [appId]);
+    if (!apiId || !(userData === null || userData === void 0 ? void 0 : userData.isAuthenticated)) {
+        return null;
+    }
+    const loadAppCredentials = (appId) => {
+        setAppLoading(true);
+        fetch(`/api/api-keys/apps/${appId}`).then((res) => {
+            return res
+                .json()
+                .then((data) => {
+                if (res.ok) {
+                    const cred = data.credentials.find((cred) => cred.status === 'approved');
+                    setAcceptValueUpdate(true);
+                    setSelectedAppSecret(cred.clientSecret);
+                }
+                else {
+                    setError(data.message);
+                }
+            })
+                .catch(() => setError('Something went wrong'))
+                .finally(() => setAppLoading(false));
+        });
+    };
+    const placeholder = loading
+        ? 'Loading your apps...'
+        : hasApiAccess
+            ? undefined
+            : 'You do not have access to this API';
+    return (React.createElement(React.Fragment, null,
+        React.createElement(FormLabel, { htmlFor: "server" }, "Select app: "),
+        React.createElement(FormControl, null,
+            React.createElement(TryItDropdown, { placeholder: placeholder, value: appId || placeholder, options: (apps === null || apps === void 0 ? void 0 : apps.map((app) => ({ title: app.title, value: app.id }))) || [], fullWidth: true, onChange: ({ value }) => {
+                    setAppId(value);
+                    loadAppCredentials(value);
+                } }),
+            React.createElement(UseKeyButton, { disabled: (!selectedAppSecret && hasApiAccess) || appLoading, color: "secondary", onClick: () => {
+                    if (selectedAppSecret) {
+                        props.onChange(selectedAppSecret);
+                    }
+                    else if (!hasApiAccess) {
+                        history.push('/apps/?createApp&apiId=' + apiId);
+                    }
+                } }, appLoading ? 'Loading...' : hasApiAccess ? 'Use key' : 'Request access'))));
+}
+exports.DevOnboardingTryItSecurity = DevOnboardingTryItSecurity;
+const TryItDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown) `
+  .dropdown-select,
+  label {
+    background-color: var(--panel-try-it-dropdown-background-color);
+    border: var(--panel-try-it-dropdown-border);
+    color: var(--panel-try-it-dropdown-color);
+  }
+`;
+const FormControl = styled_components_1.default.div `
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 10px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+const FormLabel = styled_components_1.default.label `
+  padding-bottom: 6px;
+  display: block;
+  white-space: nowrap;
+  line-height: 1em;
+
+  ${({ required }) => required &&
+    `
+      &:after {
+        display: inline-block;
+        content: '*';
+        margin-left: 4px;
+        color: var(--color-error-500);
+      }
+    `}
+`;
+const UseKeyButton = (0, styled_components_1.default)(Button_1.Button) `
+  min-width: 100px;
+  align-self: flex-end;
+  margin-top: 10px;
+  margin-right: 0;
+`;
+//# sourceMappingURL=DevOnboardingTryItSecurity.js.map

package/lib/components/OpenAPIDocs/TryItSecurityApps.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export type TryItSecurityAppsProps = {
+    apiId?: string;
+    value?: string;
+    onChange: (newSecretKey: string) => void;
+    userData?: any;
+};
+export declare function TryItSecurityApps(props: TryItSecurityAppsProps): JSX.Element | null;

package/lib/components/OpenAPIDocs/TryItSecurityApps.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TryItSecurityApps = void 0;
+const react_1 = __importDefault(require("react"));
+const hooks_1 = require("../../mocks/hooks");
+const DevOnboardingTryItSecurity_1 = require("./DevOnboardingTryItSecurity");
+function TryItSecurityApps(props) {
+    const { hasDeveloperOnboarding } = (0, hooks_1.useGlobalData)() || {};
+    return hasDeveloperOnboarding && props.apiId ? react_1.default.createElement(DevOnboardingTryItSecurity_1.DevOnboardingTryItSecurity, Object.assign({}, props)) : null;
+}
+exports.TryItSecurityApps = TryItSecurityApps;
+//# sourceMappingURL=TryItSecurityApps.js.map

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

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

package/lib/components/OperationBadge/index.js

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

package/lib/components/PageNavigation/NextButton.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { ResolvedNavItemWithLink } from '../../types/portal';
+interface NextPageType {
+    nextPage?: ResolvedNavItemWithLink | null;
+}
+export declare function NextButton({ nextPage }: NextPageType): JSX.Element;
+export {};

package/lib/components/PageNavigation/NextButton.js

@@ -0,0 +1,47 @@
+"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.NextButton = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Button_1 = require("../../components/Button");
+const useThemeConfig_1 = require("../../hooks/useThemeConfig");
+function NextButton({ nextPage }) {
+    var _a, _b;
+    const { navigation } = (0, useThemeConfig_1.useThemeConfig)();
+    if (!nextPage || ((_a = navigation === null || navigation === void 0 ? void 0 : navigation.nextButton) === null || _a === void 0 ? void 0 : _a.hide)) {
+        return React.createElement("div", null, "\u00A0");
+    }
+    const text = (((_b = navigation === null || navigation === void 0 ? void 0 : navigation.nextButton) === null || _b === void 0 ? void 0 : _b.text) || 'Next to {label}').replace('{label}', nextPage.label || nextPage.routeSlug || '');
+    return (React.createElement(StyledButton, { variant: "outlined", size: "large", to: nextPage.link, "data-component-name": "PageNavigation/NextPageLink" }, text));
+}
+exports.NextButton = NextButton;
+const StyledButton = (0, styled_components_1.default)(Button_1.Button) `
+  font-family: var(--font-family-base);
+`;
+//# sourceMappingURL=NextButton.js.map

package/lib/components/PageNavigation/PageNavigation.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { ResolvedNavItemWithLink } from '../../types/portal';
+interface PageNavigationType {
+    nextPage?: ResolvedNavItemWithLink | null;
+    prevPage?: ResolvedNavItemWithLink | null;
+}
+export declare function PageNavigation({ nextPage, prevPage }: PageNavigationType): JSX.Element | null;
+export {};

package/lib/components/PageNavigation/PageNavigation.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageNavigation = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const PreviousButton_1 = require("../../components/PageNavigation/PreviousButton");
+const NextButton_1 = require("../../components/PageNavigation/NextButton");
+const useThemeConfig_1 = require("../../hooks/useThemeConfig");
+function PageNavigation({ nextPage, prevPage }) {
+    var _a, _b;
+    const { navigation } = (0, useThemeConfig_1.useThemeConfig)();
+    if (((_a = navigation === null || navigation === void 0 ? void 0 : navigation.previousButton) === null || _a === void 0 ? void 0 : _a.hide) && ((_b = navigation === null || navigation === void 0 ? void 0 : navigation.nextButton) === null || _b === void 0 ? void 0 : _b.hide)) {
+        return null;
+    }
+    return (react_1.default.createElement(PageNavigationWrapper, { "data-component-name": "PageNavigation/PageNavigation" },
+        react_1.default.createElement(PreviousButton_1.PreviousButton, { prevPage: prevPage }),
+        react_1.default.createElement(NextButton_1.NextButton, { nextPage: nextPage })));
+}
+exports.PageNavigation = PageNavigation;
+const PageNavigationWrapper = styled_components_1.default.div `
+  display: flex;
+  justify-content: space-between;
+  margin: 25px 0;
+
+  @media print {
+    display: none;
+  }
+`;
+//# sourceMappingURL=PageNavigation.js.map

package/lib/components/PageNavigation/PreviousButton.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { ResolvedNavItemWithLink } from '../../types/portal';
+interface PreviousPageType {
+    prevPage?: ResolvedNavItemWithLink | null;
+}
+export declare function PreviousButton({ prevPage }: PreviousPageType): JSX.Element;
+export {};

package/lib/components/PageNavigation/PreviousButton.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PreviousButton = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Button_1 = require("../../components/Button");
+const useThemeConfig_1 = require("../../hooks/useThemeConfig");
+function PreviousButton({ prevPage }) {
+    var _a, _b;
+    const { navigation } = (0, useThemeConfig_1.useThemeConfig)();
+    if (!prevPage || ((_a = navigation === null || navigation === void 0 ? void 0 : navigation.previousButton) === null || _a === void 0 ? void 0 : _a.hide)) {
+        return react_1.default.createElement("div", null, "\u00A0");
+    }
+    const text = (((_b = navigation === null || navigation === void 0 ? void 0 : navigation.previousButton) === null || _b === void 0 ? void 0 : _b.text) || 'Back to {label}').replace('{label}', prevPage.label || prevPage.routeSlug || '');
+    return (react_1.default.createElement(StyledButton, { variant: "outlined", size: "large", to: prevPage.link, "data-component-name": "PageNavigation/PreviousPageLink" }, text));
+}
+exports.PreviousButton = PreviousButton;
+const StyledButton = (0, styled_components_1.default)(Button_1.Button) `
+  font-family: var(--font-family-base);
+`;
+//# sourceMappingURL=PreviousButton.js.map

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

@@ -0,0 +1,3 @@
+export * from '../../components/PageNavigation/NextButton';
+export * from '../../components/PageNavigation/PageNavigation';
+export * from '../../components/PageNavigation/PreviousButton';

package/lib/components/PageNavigation/index.js

@@ -0,0 +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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../../components/PageNavigation/NextButton"), exports);
+__exportStar(require("../../components/PageNavigation/PageNavigation"), exports);
+__exportStar(require("../../components/PageNavigation/PreviousButton"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,5 @@
+import { PanelComponent } from '../../components/Panel/PanelComponent';
+export declare const Panel: import("styled-components").StyledComponent<typeof PanelComponent, any, {
+    'data-component-name': string;
+    className: string;
+}, "className" | "data-component-name">;

package/lib/components/Panel/Panel.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Panel = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const PanelHeader_1 = require("../../components/Panel/PanelHeader");
+const PanelBody_1 = require("../../components/Panel/PanelBody");
+const PanelComponent_1 = require("../../components/Panel/PanelComponent");
+const ShelfIcon_1 = require("../../icons/ShelfIcon");
+exports.Panel = (0, styled_components_1.default)(PanelComponent_1.PanelComponent).attrs(({ className }) => ({
+    'data-component-name': 'Panel/Panel',
+    className: className || 'panel-default',
+})) `
+  background-color: var(--panel-background-color);
+  color: var(--panel-text-color);
+  font-family: var(--panel-font-family-local);
+  font-size: var(--panel-font-size-local);
+  font-weight: var(--panel-font-weight-local);
+  border-radius: var(--panel-border-radius-local);
+  border: var(--panel-border-local);
+
+  ${PanelHeader_1.PanelHeader} + ${PanelBody_1.PanelBody} {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  ${PanelHeader_1.PanelHeader} {
+    ${ShelfIcon_1.ShelfIcon} {
+      fill: var(--panel-chevron-icon-color);
+    }
+  }
+
+  &:not(:last-child) {
+    margin-bottom: var(--panel-gap-vertical);
+  }
+`;
+//# sourceMappingURL=Panel.js.map

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { PropsWithChildren, ReactNode } from 'react';
+import type { PanelHeaderProps } from '../../components/Panel/PanelHeader';
+export interface PanelComponentProps {
+    expanded?: boolean;
+    className?: string;
+    renderChildrenHidden?: boolean;
+    header?: ReactNode | ((props: PanelHeaderProps) => ReactNode);
+    onToggle?: (expanded: boolean) => void;
+    description?: React.ReactNode;
+}
+export declare function PanelComponent({ expanded, renderChildrenHidden, header, className, children, onToggle, description, }: PropsWithChildren<PanelComponentProps>): JSX.Element;
+export declare const InlineBox: import("styled-components").StyledComponent<"div", any, {}, never>;