@redocly/theme 0.8.1 → 0.8.3

package/lib/Button/Button.js

@@ -73,8 +73,8 @@ exports.baseButtonStyles = (0, styled_components_1.css) `
     box-shadow: var(--button-active-box-shadow);
   }
 `;
-const StyledButton = styled_components_1.default.button.attrs(({ color = 'default', extraClass }) => ({
-    className: `button-color-${color}${extraClass ? ` ${extraClass}` : ''}`,
+const StyledButton = styled_components_1.default.button.attrs(({ color = 'default', extraClass, variant }) => ({
+    className: `button-color-${color}${variant ? ` button-variant-${variant}` : ''}${extraClass ? ` ${extraClass}` : ''}`,
     'data-component-name': 'Button/Button',
 })) `
   text-decoration: none;

package/lib/Catalog/Filter.js

@@ -12,9 +12,7 @@ function Filter({ filter }) {
     if (!filter.parentUsed)
         return null;
     return (react_1.default.createElement(FilterGroup, { key: filter.property + filter.title },
-        react_1.default.createElement(FilterTitle, null,
-            filter.title,
-            " filter"),
+        react_1.default.createElement(FilterTitle, null, filter.title),
         filter.type === 'select' ? (react_1.default.createElement(StyledSelect, { onChange: (e) => filter.selectOption(e.target.value), value: ((_a = filter.selectedOptions.values().next()) === null || _a === void 0 ? void 0 : _a.value) || '' },
             react_1.default.createElement("option", { key: "none", value: "" }, "All"),
             filter.filteredOptions.map((value) => (react_1.default.createElement("option", { key: value.value, value: value.value },

package/lib/Markdown/Admonition.d.ts

@@ -4,8 +4,9 @@ interface AdmonitionTypeProps {
 }
 export interface AdmonitionProps extends Partial<AdmonitionTypeProps> {
     name?: string;
+    className?: string;
     'data-source'?: string;
     'data-hash'?: string;
 }
-export declare function Admonition({ type, name, children, 'data-source': dataSource, 'data-hash': dataHash, }: React.PropsWithChildren<AdmonitionProps>): JSX.Element;
+export declare function Admonition({ type, name, children, className, 'data-source': dataSource, 'data-hash': dataHash, }: React.PropsWithChildren<AdmonitionProps>): JSX.Element;
 export {};

package/lib/Markdown/Admonition.js

@@ -7,8 +7,8 @@ exports.Admonition = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const AlertIcon_1 = require("../icons/AlertIcon/AlertIcon");
-function Admonition({ type = 'info', name, children, 'data-source': dataSource, 'data-hash': dataHash, }) {
-    return (react_1.default.createElement(Wrapper, { type: type, "data-component-name": "Markdown/Admonition", "data-source": dataSource, "data-hash": dataHash },
+function Admonition({ type = 'info', name, children, className, 'data-source': dataSource, 'data-hash': dataHash, }) {
+    return (react_1.default.createElement(Wrapper, { type: type, className: className, "data-component-name": "Markdown/Admonition", "data-source": dataSource, "data-hash": dataHash },
         react_1.default.createElement(AlertIcon_1.AlertIcon, { type: type }),
         name ? react_1.default.createElement(Heading, { type: type }, name) : null,
         react_1.default.createElement(Content, null, children)));

package/lib/Profile/Profile.js

@@ -27,7 +27,7 @@ exports.Profile = void 0;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const utils_1 = require("../utils");
-function ProfileComponent({ name, imageUrl, onClick, color }) {
+function ProfileComponent({ name = 'User', imageUrl, onClick, color }) {
     var _a;
     if (imageUrl) {
         return (react_1.default.createElement(ProfileWrapper, { onClick: onClick },

package/lib/ReferenceDocs/ClearButton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface ClearButtonProps {
+    className?: string;
+    style?: React.CSSProperties;
+    handleClear?: () => void;
+}
+export declare const ClearButton: import("styled-components").StyledComponent<React.NamedExoticComponent<ClearButtonProps>, any, {}, never>;
+export {};

package/lib/ReferenceDocs/ClearButton.js

@@ -0,0 +1,48 @@
+"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.ClearButton = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const ClearButtonComponent = ({ className, style, handleClear }) => (react_1.default.createElement("button", { className: className, style: style, onClick: handleClear }, "\u2715"));
+exports.ClearButton = (0, styled_components_1.default)((0, react_1.memo)(ClearButtonComponent)) `
+  z-index: 1;
+  position: absolute;
+  right: 24px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #89949f;
+  background: none;
+  border: none;
+  cursor: pointer;
+
+  &:hover {
+    color: #fff;
+  }
+`;
+//# sourceMappingURL=ClearButton.js.map

package/lib/ReferenceDocs/DevOnboardingTryItSecurity.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { TryItSecurityAppsProps } from './TryItSecurityApps';
+export declare function DevOnboardingTryItSecurity(props: TryItSecurityAppsProps): JSX.Element | null;

package/lib/ReferenceDocs/DevOnboardingTryItSecurity.js

@@ -0,0 +1,158 @@
+"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 _theme_1 = require("../index.js");
+const styled_components_1 = __importDefault(require("styled-components"));
+const usePageData_1 = require("../mocks/hooks/usePageData");
+const Dropdown_1 = require("./Dropdown");
+function DevOnboardingTryItSecurity(props) {
+    const apiId = props.apiId;
+    // @ts-ignore
+    const { userData } = (0, usePageData_1.usePageData)('userData') || {};
+    // 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);
+    React.useEffect(() => {
+        if (!props.value && initialRender.current)
+            return;
+        if (acceptValueUpdate) {
+            setAcceptValueUpdate(false);
+        }
+        else {
+            setAppId('');
+        }
+        // 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) => {
+                    if (res.ok) {
+                        setApps(data.apps);
+                    }
+                    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) {
+        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...' : undefined;
+    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 || appLoading, color: "secondary", blinking: appLoading, onClick: () => selectedAppSecret && props.onChange(selectedAppSecret) }, "Use key"))));
+}
+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)(_theme_1.Button) `
+  width: 100px;
+  align-self: flex-end;
+  margin-top: 16px;
+  margin-right: 0;
+`;
+//# sourceMappingURL=DevOnboardingTryItSecurity.js.map

package/lib/ReferenceDocs/Dropdown.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+export interface DropdownOption {
+    idx?: number;
+    value: string;
+    title?: string;
+    serverUrl?: string;
+    label?: string;
+}
+export interface DropdownProps {
+    options: DropdownOption[];
+    onChange: (option: DropdownOption) => void;
+    handleClear?: () => void;
+    clearable?: boolean;
+    ariaLabel?: string;
+    className?: string;
+    placeholder?: string;
+    value?: string;
+    dense?: boolean;
+    fullWidth?: boolean;
+    variant?: 'dark' | 'light';
+}
+export interface ArrowIconProps {
+    className?: string;
+    variant?: 'light' | 'dark';
+    style?: React.CSSProperties;
+}
+export declare const Dropdown: import("styled-components").StyledComponent<React.NamedExoticComponent<DropdownProps>, any, {}, never>;
+export declare const normalizeText: (description?: string | Record<string, any>) => string;

package/lib/ReferenceDocs/Dropdown.js

@@ -0,0 +1,150 @@
+"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.normalizeText = exports.Dropdown = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const ClearButton_1 = require("./ClearButton");
+const ArrowSvg = ({ className, style }) => (react_1.default.createElement("svg", { className: className, style: style, xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" },
+    react_1.default.createElement("polyline", { points: "6 9 12 15 18 9" })));
+const ArrowIcon = (0, styled_components_1.default)(ArrowSvg) `
+  position: absolute;
+  pointer-events: none;
+  z-index: 1;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+  right: 8px;
+  margin: auto;
+  text-align: center;
+  polyline {
+    color: ${(props) => props.variant === 'dark' && 'white'};
+  }
+`;
+const DropdownComponent = ({ options, onChange, handleClear, clearable, placeholder, value = '', className, variant = 'light', }) => {
+    var _a;
+    const handleOnChange = (event) => {
+        const { selectedIndex } = event.target;
+        const index = placeholder || !value ? selectedIndex - 1 : selectedIndex;
+        onChange(options[index]);
+    };
+    const renderOptions = (0, react_1.useMemo)(() => options.map(({ idx, value, title }, index) => {
+        const normalizedValue = (0, exports.normalizeText)(value);
+        return (react_1.default.createElement("option", { key: idx || normalizedValue + index, value: normalizedValue, className: "dropdown-option" }, title || normalizedValue));
+    }), [options]);
+    const normalizedValue = (0, exports.normalizeText)(value);
+    const title = ((_a = options.find((option) => option.value === value)) === null || _a === void 0 ? void 0 : _a.title) || normalizedValue;
+    return (react_1.default.createElement("div", { className: className + ' dropdown-wrapper' },
+        react_1.default.createElement(ArrowIcon, { variant: variant }),
+        clearable && (normalizedValue === null || normalizedValue === void 0 ? void 0 : normalizedValue.length) > 0 && react_1.default.createElement(ClearButton_1.ClearButton, { handleClear: handleClear }),
+        react_1.default.createElement("select", { onChange: handleOnChange, value: normalizedValue, className: "dropdown-select" },
+            placeholder && (react_1.default.createElement("option", { disabled: true, hidden: true, value: placeholder }, placeholder)),
+            !normalizedValue && !placeholder && react_1.default.createElement("option", { disabled: true }),
+            renderOptions),
+        react_1.default.createElement("label", null, title)));
+};
+exports.Dropdown = (0, styled_components_1.default)((0, react_1.memo)(DropdownComponent)) `
+
+box-sizing: border-box;
+  outline: none;
+  display: inline-block;
+  border-radius: var(--border-radius);
+  vertical-align: bottom;
+  position: relative;
+  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+  cursor: pointer;
+  text-transform: none;
+
+  label {
+    box-sizing: border-box;
+    min-width: 90px;
+    height: 36px;
+    outline: none;
+    display: inline-block;
+    color: var(--dropdown-text-color);
+    border-radius: var(--border-radius);
+    border: var(--dropdown-border);
+    padding: var(--dropdown-padding);
+    vertical-align: bottom;
+    width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+    text-transform: none;
+    line-height: inherit;
+    font-size: var(--dropdown-font-size);
+    font-family: inherit;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+
+    &,
+    &:hover,
+    &:focus-within {
+      border: 1px solid var(--border-color);
+      box-shadow: none;
+    }
+
+    ${({ variant }) => (variant === 'dark' ? darkDropdownStyle : '')};
+  }
+
+  .dropdown-select {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    border: none;
+    appearance: none;
+    cursor: pointer;
+
+    color: var(--text-color);
+    line-height: inherit;
+    font-size: 14px;
+    font-family: inherit;
+    padding: var(--dropdown-padding);
+    ${({ variant }) => (variant === 'dark' ? darkDropdownStyle : '')};
+
+`;
+const darkDropdownStyle = `
+  background-color: var(--panel-samples-dropdown-background-color);
+  border: var(--panel-samples-dropdown-border);
+  color: var(--panel-samples-dropdown-color);
+
+  &,
+  &:hover,
+  &:focus-within {
+    border: none;
+    box-shadow: none;
+  }
+`;
+function isString(value) {
+    return typeof value === 'string';
+}
+const normalizeText = (description) => isString(description) ? description : description === null || description === void 0 ? void 0 : description.raw;
+exports.normalizeText = normalizeText;
+//# sourceMappingURL=Dropdown.js.map

package/lib/ReferenceDocs/TryItSecurityApps.d.ts

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

package/lib/ReferenceDocs/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/ReferenceDocs/index.d.ts

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

package/lib/ReferenceDocs/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("./TryItSecurityApps"), exports);
+//# sourceMappingURL=index.js.map

package/lib/Sidebar/FooterWrapper.d.ts

@@ -0,0 +1,3 @@
+export declare const FooterWrapper: import("styled-components").StyledComponent<"div", any, {
+    'data-component-name': string;
+}, "data-component-name">;

package/lib/Sidebar/FooterWrapper.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.FooterWrapper = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.FooterWrapper = styled_components_1.default.div.attrs(() => ({
+    'data-component-name': 'Sidebar/FooterWrapper',
+})) `
+  margin: var(--sidebar-offset-top) 0 var(--sidebar-spacing-unit) var(--sidebar-offset-left);
+  padding-top: var(--sidebar-spacing-unit);
+  border-top: solid 1px #daddde;
+`;
+//# sourceMappingURL=FooterWrapper.js.map

package/lib/Sidebar/HeaderWrapper.d.ts

@@ -0,0 +1,3 @@
+export declare const HeaderWrapper: import("styled-components").StyledComponent<"div", any, {
+    'data-component-name': string;
+}, "data-component-name">;

package/lib/Sidebar/HeaderWrapper.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.HeaderWrapper = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.HeaderWrapper = styled_components_1.default.div.attrs(() => ({
+    'data-component-name': 'Sidebar/HeaderWrapper',
+})) `
+  margin: var(--sidebar-offset-top) 0 0 var(--sidebar-offset-left);
+  padding-bottom: var(--sidebar-spacing-unit);
+  border-bottom: solid 1px #daddde;
+`;
+//# sourceMappingURL=HeaderWrapper.js.map

package/lib/Sidebar/MenuContainer.d.ts

@@ -1,3 +1,5 @@
-export declare const MenuContainer: import("styled-components").StyledComponent<"div", any, {
-    'data-component-name': string;
-}, "data-component-name">;
+interface MenuContainerProps {
+    growContent?: boolean;
+}
+export declare const MenuContainer: import("styled-components").StyledComponent<"div", any, MenuContainerProps, never>;
+export {};

package/lib/Sidebar/MenuContainer.js

@@ -5,12 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuContainer = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.MenuContainer = styled_components_1.default.div.attrs(() => ({
+exports.MenuContainer = styled_components_1.default.div.attrs(({ growContent }) => ({
     'data-component-name': 'Sidebar/MenuContainer',
+    growContent: growContent === undefined ? true : growContent,
 })) `
   position: relative;
   overflow-y: auto;
-  flex-grow: 1;
+  flex-grow: ${({ growContent }) => (growContent ? 1 : 0)};
   padding-top: var(--sidebar-offset-top);
 `;
 //# sourceMappingURL=MenuContainer.js.map

package/lib/Sidebar/MenuItemLabel.js

@@ -35,8 +35,8 @@ exports.MenuItemLabel = styled_components_1.default.li.attrs(() => ({
     : null};
 
   :hover {
-    color: var(--sidebar-item-active-color);
-    background-color: var(--sidebar-item-active-background-color);
+    color: var(--sidebar-item-hover-color);
+    background-color: var(--sidebar-item-hover-background-color);
   }
 
   :empty {

package/lib/Sidebar/Sidebar.d.ts

@@ -1,5 +1,4 @@
 interface SidebarProps {
-    isNavbar: boolean;
     opened?: boolean;
     animate?: boolean;
 }

package/lib/Sidebar/Sidebar.js

@@ -23,15 +23,10 @@ exports.Sidebar = styled_components_1.default.aside.attrs(() => ({
   width: 100%;
   -webkit-font-smoothing: antialiased;
 
-  ${({ isNavbar }) => `
-    top: ${isNavbar ? 'var(--navbar-height)' : '0'};
-    height: calc(100vh ${isNavbar ? '- var(--navbar-height)' : ''});
-  `};
-
   ${({ opened, animate }) => `
     opacity: ${opened ? '1' : '0'};
     pointer-events: ${opened ? 'auto' : 'none'};
-    
+
     & > * {
       transform: ${opened ? 'translate(0, 0)' : 'translate(0, 40px)'};
       transition: ${animate ? 'transform 0.65s ease, opacity 0.25s ease;' : 'none'};

package/lib/Sidebar/SidebarLayout.d.ts

@@ -6,7 +6,9 @@ interface SidebarLayoutProps {
         label: string;
         slug: string;
     };
-    isNavbar: boolean;
+    footer?: React.ReactNode;
+    header?: React.ReactNode;
+    growContent?: boolean;
 }
-export declare function SidebarLayout({ versions, menu, backLink, isNavbar, }: SidebarLayoutProps): JSX.Element | null;
+export declare function SidebarLayout({ versions, menu, footer, header, growContent, }: SidebarLayoutProps): JSX.Element | null;
 export {};