@redocly/theme 0.0.0-react18-20231120182601

package/lib/components/Sidebar/SidebarLayout.js

@@ -0,0 +1,82 @@
+"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.SidebarLayout = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Sidebar_1 = require("../../components/Sidebar/Sidebar");
+const FooterWrapper_1 = require("../../components/Sidebar/FooterWrapper");
+const HeaderWrapper_1 = require("../../components/Sidebar/HeaderWrapper");
+const useMobileMenu_1 = require("../../hooks/useMobileMenu");
+const MobileSidebarButton_1 = require("../../components/Sidebar/MobileSidebarButton");
+const MenuContainer_1 = require("../../components/Menu/MenuContainer");
+const useThemeConfig_1 = require("../../hooks/useThemeConfig");
+const telemetry_1 = require("../../mocks/telemetry");
+const MobileSidebarIcon_1 = require("./MobileSidebarIcon");
+const StyledFooterWrapper = (0, styled_components_1.default)(FooterWrapper_1.FooterWrapper) `
+  display: none;
+
+  ${({ theme }) => { var _a; return (_a = theme.mediaQueries) === null || _a === void 0 ? void 0 : _a.medium; }} {
+    display: flex;
+  }
+`;
+function SidebarLayout({ versions, menu, footer, header, growContent, collapsed, onToggleMenu, className, }) {
+    const [isOpen, setIsOpen] = (0, useMobileMenu_1.useMobileMenu)();
+    const [mappedCollapsed, setMappedCollapsed] = react_1.default.useState(collapsed);
+    (0, react_1.useEffect)(() => {
+        setMappedCollapsed(collapsed && !isOpen);
+    }, [isOpen, collapsed, setMappedCollapsed]);
+    const toggleMenu = () => {
+        onToggleMenu === null || onToggleMenu === void 0 ? void 0 : onToggleMenu(!isOpen);
+        setIsOpen(!isOpen);
+    };
+    const { sidebar } = (0, useThemeConfig_1.useThemeConfig)();
+    if (sidebar === null || sidebar === void 0 ? void 0 : sidebar.hide) {
+        return null;
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null, mappedCollapsed ? (footer ? (react_1.default.createElement(Wrapper, { collapsed: true },
+        react_1.default.createElement(StyledFooterWrapper, { "data-component-name": "Sidebar/FooterWrapper", collapsed: true }, footer),
+        react_1.default.createElement(MobileSidebarButton_1.MobileSidebarButton, { opened: isOpen, onClick: toggleMenu },
+            react_1.default.createElement(MobileSidebarIcon_1.MobileSidebarIcon, null)))) : null) : (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/SidebarLayout", className: className },
+        react_1.default.createElement(Sidebar_1.Sidebar, { animate: true, opened: isOpen },
+            header ? (react_1.default.createElement(HeaderWrapper_1.HeaderWrapper, { onClick: () => telemetry_1.telemetry.send('back_to_catalog_button_clicked', {}) }, header)) : null,
+            versions ? react_1.default.createElement(react_1.default.Fragment, null, versions) : null,
+            react_1.default.createElement(MenuContainer_1.MenuContainer, { growContent: growContent }, menu),
+            footer && !isOpen ? (react_1.default.createElement(FooterWrapper_1.FooterWrapper, { "data-component-name": "Sidebar/FooterWrapper" }, footer)) : null)))));
+}
+exports.SidebarLayout = SidebarLayout;
+const Wrapper = styled_components_1.default.div `
+  ${({ collapsed }) => collapsed &&
+    `
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        border-right: 1px solid var(--sidebar-border-color);
+    `}
+`;
+//# sourceMappingURL=SidebarLayout.js.map

package/lib/components/Sidebar/VersionPicker.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { SelectProps } from '../Select';
+import type { Version } from '../../types/portal';
+import { Select } from '../Select';
+export interface VersionPickerProps extends SelectProps {
+}
+export declare function VersionPicker(props: {
+    versions?: Version[];
+    onChange: (v: Version) => void;
+}): React.JSX.Element | null;
+export declare const VersionPickerSelect: import("styled-components").StyledComponent<typeof Select, any, SelectProps<any>, never>;

package/lib/components/Sidebar/VersionPicker.js

@@ -0,0 +1,117 @@
+"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.VersionPickerSelect = exports.VersionPicker = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const hooks_1 = require("../../hooks");
+const hooks_2 = require("../../mocks/hooks");
+const Select_1 = require("../Select");
+function VersionPicker(props) {
+    var _a;
+    const themeConfig = (0, hooks_1.useThemeConfig)();
+    const { versionPicker } = themeConfig;
+    const { translate } = (0, hooks_2.useTranslate)();
+    const { versions = [], onChange } = props;
+    const options = versions.map((version) => {
+        return {
+            element: version.label || version.version,
+            value: version,
+            active: version.active,
+        };
+    });
+    if (versionPicker === null || versionPicker === void 0 ? void 0 : versionPicker.hide) {
+        return null;
+    }
+    const value = (_a = options.find((item) => item.active)) === null || _a === void 0 ? void 0 : _a.value;
+    if (!options.length && !(versionPicker === null || versionPicker === void 0 ? void 0 : versionPicker.showForUnversioned))
+        return null;
+    return (React.createElement(VersionsPickerWrapper, null,
+        React.createElement(VersionPickerLabel, { "data-translation-key": "theme.versionPicker.label" }, translate('theme.versionPicker.label', 'Version:')),
+        React.createElement(exports.VersionPickerSelect, { placeholder: translate('theme.versionPicker.unversioned', 'All versions'), disabled: !options.length, options: options, value: value, onChange: onChange })));
+}
+exports.VersionPicker = VersionPicker;
+const VersionPickerLabel = styled_components_1.default.label `
+  font-size: var(--version-picker-label-font-size);
+  font-weight: var(--version-picker-label-font-weight);
+`;
+exports.VersionPickerSelect = (0, styled_components_1.default)(Select_1.Select) `
+  --select-list-item-active-background-color: var(
+    --version-picker-list-item-active-background-color
+  );
+  --select-list-item-hover-background-color: var(--version-picker-list-item-hover-background-color);
+
+  flex: 1;
+
+  font-size: var(--version-picker-font-size);
+  font-weight: var(--version-picker-font-weight);
+  border-radius: var(--version-picker-border-radius);
+  line-height: var(--version-picker-line-height);
+  color: var(--version-picker-text-color);
+
+  ${Select_1.SelectInput} {
+    border: var(--version-picker-input-border);
+    border-radius: var(--version-picker-input-border-radius);
+    padding: var(--version-picker-input-padding-vertical)
+      var(--version-picker-input-padding-horizontal);
+  }
+
+  ${Select_1.SelectList} {
+    right: 0;
+    width: 100%;
+    min-width: var(--version-picker-list-min-width);
+    max-width: var(--version-picker-list-max-width);
+    padding: var(--version-picker-list-padding);
+    background-color: var(--version-picker-list-background-color);
+    border-radius: var(--version-picker-list-border-radius);
+    box-shadow: var(--version-picker-list-box-shadow);
+  }
+
+  ${Select_1.SelectListItem} {
+    border-radius: var(--version-picker-list-item-border-radius);
+
+    & > * {
+      padding: var(--version-picker-list-item-vertical-padding)
+        var(--version-picker-list-item-horizontal-padding);
+    }
+  }
+`;
+const VersionsPickerWrapper = styled_components_1.default.div.attrs(() => ({
+    dataAttributes: {
+        'data-component-name': 'Sidebar/VersionPicker',
+    },
+})) `
+  display: flex;
+  gap: 10px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--version-picker-padding-vertical) var(--version-picker-padding-horizontal);
+  border-bottom: var(--version-picker-border-bottom);
+`;
+//# sourceMappingURL=VersionPicker.js.map

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

@@ -0,0 +1,15 @@
+export * from '../../components/Sidebar/ApiCallItem';
+export * from '../../components/Sidebar/BackButton';
+export * from '../../components/Sidebar/Drilldown';
+export * from '../../components/Sidebar/DrilldownMenu';
+export * from '../../components/Sidebar/DrilldownMenuItem';
+export * from '../../components/Sidebar/MobileSidebarButton';
+export * from '../../components/Sidebar/MobileSidebarIcon';
+export * from '../../components/Sidebar/Sidebar';
+export * from '../../components/Sidebar/SidebarLayout';
+export * from '../../components/Sidebar/FooterWrapper';
+export * from '../../components/Sidebar/HeaderWrapper';
+export * from '../../components/Sidebar/SidebarItemIcon';
+export * from '../../components/Sidebar/VersionPicker';
+export * from '../../components/Sidebar/styledVariables';
+export * from '../../components/Sidebar/types';

package/lib/components/Sidebar/index.js

@@ -0,0 +1,32 @@
+"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/Sidebar/ApiCallItem"), exports);
+__exportStar(require("../../components/Sidebar/BackButton"), exports);
+__exportStar(require("../../components/Sidebar/Drilldown"), exports);
+__exportStar(require("../../components/Sidebar/DrilldownMenu"), exports);
+__exportStar(require("../../components/Sidebar/DrilldownMenuItem"), exports);
+__exportStar(require("../../components/Sidebar/MobileSidebarButton"), exports);
+__exportStar(require("../../components/Sidebar/MobileSidebarIcon"), exports);
+__exportStar(require("../../components/Sidebar/Sidebar"), exports);
+__exportStar(require("../../components/Sidebar/SidebarLayout"), exports);
+__exportStar(require("../../components/Sidebar/FooterWrapper"), exports);
+__exportStar(require("../../components/Sidebar/HeaderWrapper"), exports);
+__exportStar(require("../../components/Sidebar/SidebarItemIcon"), exports);
+__exportStar(require("../../components/Sidebar/VersionPicker"), exports);
+__exportStar(require("../../components/Sidebar/styledVariables"), exports);
+__exportStar(require("../../components/Sidebar/types"), exports);
+//# sourceMappingURL=index.js.map

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

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

package/lib/components/Sidebar/styledVariables.js

@@ -0,0 +1,222 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.versionPicker = exports.sidebar = void 0;
+const styled_components_1 = require("styled-components");
+exports.sidebar = (0, styled_components_1.css) `
+  /* === Sidebar === */
+
+  /**
+    * @tokens Sidebar logo
+    */
+
+  --sidebar-logo-max-height: 285px; // @presenter Spacing
+  --sidebar-logo-max-width: 285px; // @presenter Spacing
+  --sidebar-logo-padding: 2px; // @presenter Spacing
+
+  /**
+    * @tokens Sidebar typography
+    */
+  --sidebar-word-break: inherit;
+
+  /**
+    * @tokens Sidebar colors
+    * @presenter Color
+    */
+  --sidebar-background-color: var(--bg-base); // @presenter Color
+  --sidebar-border-color: var(--border-secondary); // @presenter Color
+
+  /**
+    * @tokens Sidebar spacing
+    * @presenter Spacing
+    */
+  --sidebar-spacing-unit: var(--spacing-base); // @presenter Spacing
+  --sidebar-width: 285px; // @presenter Spacing
+
+  --sidebar-offset-top: var(--sidebar-spacing-unit); // @presenter Spacing
+  --sidebar-offset-left: var(--sidebar-spacing-unit); // @presenter Spacing
+
+  --sidebar-header-padding-bottom: var(--sidebar-spacing-unit); // @presenter Spacing
+
+  --sidebar-chevron-size: var(--spacing-xs); // @presenter Spacing
+
+  /* === Sidebar Item === */
+
+  /**
+    * @tokens Sidebar item typography
+    */
+  --sidebar-item-font-family: var(--font-family-base); // @presenter FontFamily
+  --sidebar-item-font-size: var(--font-size-base); // @presenter FontSize
+  --sidebar-item-font-weight: var(--font-weight-regular); // @presenter FontSize
+  --sidebar-item-line-height: var(--line-height-base); // @presenter LineHeight
+
+  /**
+    * @tokens Sidebar item colors
+    *  @presenter Color
+    */
+  --sidebar-item-text-color: var(--text-secondary); // @presenter Color
+  --sidebar-item-background-color: transparent; // @presenter Color
+
+  --sidebar-item-active-color: var(--text-primary); // @presenter Color
+  --sidebar-item-active-background-color: var(--bg-overlay); // @presenter Color
+
+  --sidebar-item-hover-background-color: var(--bg-raised); // @presenter Color
+  --sidebar-item-hover-color: var(--text-primary); // @presenter Color
+
+  /**
+    * @tokens Sidebar item spacing
+    * @presenter Spacing
+    */
+
+  --sidebar-item-nested-offset: var(--spacing-xs); // @presenter Spacing
+  --sidebar-margin-horizontal: var(--spacing-base); // @presenter Spacing
+  --sidebar-item-padding-vertical: var(--spacing-xs); // @presenter Spacing
+  --sidebar-item-padding-horizontal: var(--spacing-xs); // @presenter Spacing
+  --sidebar-item-label-padding: var(--spacing-xl); // @presenter Spacing
+
+  /**
+    * @tokens Sidebar item border
+    */
+  --sidebar-item-border-radius: 6px; // @presenter BorderRadius
+
+  /**
+    * @tokens Sidebar item icon
+    */
+  --sidebar-item-icon-size: var(--spacing-xl);
+  --sidebar-item-icon-border-radius: 100%;
+
+  /**
+    * @tokens Sidebar item sublabel
+    */
+  --sidebar-item-sublabel-font-family: inherit; // sublabel is for drilldown only but I would like to support it in general
+  --sidebar-item-sublabel-font-size: var(--font-size-base); // @presenter FontSize
+  --sidebar-item-sublabel-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --sidebar-item-sublabel-text-color: var(--sidebar-item-text-color); // @presenter Color
+
+  /**
+    * @tokens Sidebar item drilldown
+    */
+
+  --sidebar-item-drilldown-font-family: var(--sidebar-item-font-family);
+  --sidebar-item-drilldown-font-size: var(--sidebar-item-font-size); // @presenter FontSize
+  --sidebar-text-drilldown-transform: inherit; // @presenter TextTransform
+  --sidebar-item-drilldown-text-color: var(--sidebar-item-text-color); // @presenter Color
+  --sidebar-item-drilldown-background-color: var(--sidebar-background-color); // @presenter Color
+
+  /**
+    * @tokens Sidebar item group
+    */
+  --sidebar-item-group-font-family: var(--sidebar-item-font-family);
+  --sidebar-item-group-font-size: var(--sidebar-item-font-size); // @presenter FontSize
+  --sidebar-text-group-transform: inherit;
+  --sidebar-item-group-text-color: var(--sidebar-item-text-color); // @presenter Color
+  --sidebar-item-group-background-color: var(--sidebar-background-color); // @presenter Color
+  --sidebar-item-group-active-text-color: var(--sidebar-item-active-color); // @presenter Color
+  --sidebar-item-group-active-background-color: var(--sidebar-item-active-background-color);
+  --sidebar-item-group-gap: var(--spacing-xs); // @presenter Spacing
+
+  // we need a theme config for chevron-location: left (default), right-compact, right, none
+  // we need another theme config for chevron-style: up-down, down-up, right-down, down-right
+
+  --sidebar-group-item-chevron-size: var(--spacing-xs); // @presenter Spacing
+  --sidebar-group-item-chevron-color: var(--sidebar-item-text-color); // @presenter Color
+
+  /**
+    * @tokens Sidebar item separator
+    */
+  --sidebar-item-separator-font-family: var(--sidebar-item-font-family);
+  --sidebar-item-separator-font-size: var(--sidebar-item-font-size); // @presenter FontSize
+  --sidebar-item-separator-font-weight: var(--sidebar-item-font-weight); // @presenter FontWeight
+  --sidebar-item-separator-text-transform: inherit; // @presenter TextTransform
+  --sidebar-item-separator-text-color: var(--text-placeholder); // @presenter Color
+
+  --sidebar-item-separator-background-color: var(--sidebar-background-color); // @presenter Color
+  --sidebar-item-separator-line-color: var(--border-primary); // @presenter Color
+  --sidebar-item-separator-offset: var(--spacing-sm); // @presenter Spacing
+  --sidebar-item-separator-line-offset: var(--spacing-xxs) var(--sidebar-margin-horizontal); // @presenter Spacing
+  --mobile-sidebar-item-separator-line-offset: var(--spacing-xxs) var(--spacing-xs); // @presenter Spacing
+  --sidebar-item-separator-border-width: 1px; // @presenter Spacing
+  --sidebar-item-separator-border-color: var(--border-primary); // @presenter Color
+  --sidebar-item-separator-padding: var(--spacing-xxs) var(--sidebar-item-padding-horizontal); // @presenter Spacing
+
+  /**
+   * @tokens Sidebar item http tag
+   */
+
+  --sidebar-item-http-tag-width: auto;
+  --sidebar-item-http-tag-height: 20px;
+  --sidebar-item-http-tag-font-family: var(--font-family-base); // @presenter FontFamily
+  --sidebar-item-http-tag-font-size: var(--font-size-sm); // @presenter FontSize
+  --sidebar-item-http-tag-font-weight: normal; //@presenter FontWeight
+  --sidebar-item-http-tag-border-radius: var(--border-radius-xlg); // @presenter BorderRadius
+  --sidebar-item-http-tag-margin: 0 0 0 5px;
+
+  /**
+    * @tokens Sidebar back button
+    */
+  --sidebar-back-button-font-family: var(--sidebar-item-font-family);
+  --sidebar-back-button-font-size: var(--sidebar-item-font-size); // @presenter FontSize
+  --sidebar-back-button-transform: inherit; // @presenter TextTransform
+  --sidebar-back-button-text-color: var(--sidebar-item-text-color); // @presenter Color
+  --sidebar-back-button-background-color: transparent; // @presenter Color
+  --sidebar-back-button-hover-text-color: var(--sidebar-item-active-color); // @presenter Color
+  --sidebar-back-button-hover-background-color: transparent; // @presenter Color
+  --sidebar-back-button-icon-color: var(--sidebar-item-text-color); // @presenter Color
+  --sidebar-back-button-margin: 0 0 var(--spacing-lg) 0; // @presenter Spacing
+  --sidebar-back-padding-left: var(--spacing-xs); // @presenter Spacing
+  --sidebar-back-button-icon: none;
+
+  /**
+  * @tokens Sidebar footer
+  */
+  --sidebar-footer-padding-vertical: var(--spacing-sm); // @presenter Spacing
+  --sidebar-footer-padding-horizontal: var(--spacing-lg); // @presenter Spacing
+  --sidebar-collapse-button-background-color: var(--bg-overlay); // @presenter Color
+  --sidebar-collapse-button-icon-color: var(--text-primary); // @presenter Color
+  --sidebar-collapse-button-border-color: var(--border-primary); // @presenter Color
+  --sidebar-collapse-button-active-background-color: unset; // @presenter Color
+  --sidebar-collapse-button-active-border-color: 0; // @presenter Color
+
+  --sidebar-controls-collapsed-gap: var(--spacing-xs); // @presenter Spacing
+  --sidebar-controls-collapsed-padding-vertical: var(--spacing-xs); // @presenter Spacing
+  --sidebar-controls-collapsed-padding-horizontal: var(--spacing-xxs); // @presenter Spacing
+
+  // @tokens End
+`;
+exports.versionPicker = (0, styled_components_1.css) `
+  /**
+    * @tokens Version picker
+    * */
+
+  --version-picker-font-size: var(--font-size-base); // @presenter FontSize
+  --version-picker-font-weight: var(--select-font-weight); // @presenter FontWeight
+  --version-picker-line-height: var(--select-line-height); // @presenter LineHeight
+  --version-picker-text-color: var(--select-text-color); // @presenter Color
+  --version-picker-border-radius: var(--select-border-radius); // @presenter BorderRadius
+  --version-picker-padding-vertical: 10px; // @presenter Spacing
+  --version-picker-padding-horizontal: calc(var(--sidebar-margin-horizontal) + var(--sidebar-item-padding-horizontal)); // @presenter Spacing
+  --version-picker-border-bottom: 1px solid var(--border-primary); // @presenter Border
+
+  --version-picker-label-font-size: var(--font-size-base);
+  --version-picker-label-font-weight: var(--font-weight-bold);
+
+  --version-picker-input-padding-horizontal: var(--select-input-padding-horizontal); // @presenter Spacing
+  --version-picker-input-padding-vertical: var(--select-input-padding-vertical); // @presenter Spacing
+  --version-picker-input-border: 1px solid var(--border-primary); // @presenter Border
+  --version-picker-input-border-radius: var(--select-input-border-radius); // @presenter BorderRadius
+
+  --version-picker-list-min-width: var(--select-list-min-width);
+  --version-picker-list-max-width: var(--select-list-max-width);
+  --version-picker-list-padding: var(--select-list-padding); // @presenter Spacing
+  --version-picker-list-border-radius: var(--select-list-border-radius); // @presenter BorderRadius
+  --version-picker-list-background-color: var(--select-list-background-color); // @presenter Color
+  --version-picker-list-box-shadow: var(--select-list-box-shadow); // @presenter Shadow
+
+  --version-picker-list-item-horizontal-padding: var(--select-list-item-horizontal-padding); // @presenter Spacing
+  --version-picker-list-item-vertical-padding: var(--select-list-item-vertical-padding); // @presenter Spacing
+  --version-picker-list-item-border-radius: var(--select-list-item-border-radius); // @presenter BorderRadius
+  --version-picker-list-item-active-background-color: var(--select-list-item-active-background-color); // @presenter Color
+  --version-picker-list-item-hover-background-color: var(--select-list-item-hover-background-color); // @presenter Color
+
+  // @tokens End
+`;
+//# sourceMappingURL=styledVariables.js.map

package/lib/components/Sidebar/types.d.ts

@@ -0,0 +1,48 @@
+export declare enum MenuStyle {
+    Drilldown = "drilldown"
+}
+export interface ItemState extends NavItem {
+    items: ItemState[];
+    active: boolean;
+    hasActiveSubItem: boolean;
+    menuStyle?: MenuStyle;
+}
+export interface DrilldownMenuProps {
+    back: () => void;
+    item: ItemState;
+    className?: string;
+}
+export interface MenuItemProps {
+    item: ItemState;
+    activeItem?: ItemState;
+    className?: string;
+    isMobile?: boolean;
+}
+export interface NavItem {
+    label?: string;
+    labelTranslationKey?: string;
+    sublabel?: string;
+    subLabelTranslationKey?: string;
+    icon?: string;
+    link?: string;
+    type?: string;
+    httpVerb?: string;
+    expanded?: string;
+    selectFirstItemOnExpand?: boolean;
+    pageId?: string;
+    redocPrevLink?: string;
+    redocPrevLabel?: string;
+    redocNextLink?: string;
+    redocNextLabel?: string;
+    redocFakePage?: boolean;
+    redocInfoPageId?: string;
+    target?: string;
+    external?: boolean;
+    items?: NavItem[];
+    requiredPermission?: string;
+    menuStyle?: MenuStyle;
+    separatorLine?: boolean;
+    linePosition?: 'top' | 'bottom';
+    version?: string;
+    default?: boolean;
+}

package/lib/components/Sidebar/types.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuStyle = void 0;
+var MenuStyle;
+(function (MenuStyle) {
+    MenuStyle["Drilldown"] = "drilldown";
+})(MenuStyle || (exports.MenuStyle = MenuStyle = {}));
+//# sourceMappingURL=types.js.map

package/lib/components/SidebarActions/ChangeViewButton.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { LayoutVariant } from '../../components/SidebarActions';
+interface ChangeViewButtonProps {
+    layout: LayoutVariant;
+    onClick: () => void;
+}
+export declare const ChangeViewButton: ({ layout, onClick, }: ChangeViewButtonProps) => JSX.Element | null;
+export {};

package/lib/components/SidebarActions/ChangeViewButton.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChangeViewButton = void 0;
+const react_1 = __importDefault(require("react"));
+const SidebarActions_1 = require("../../components/SidebarActions");
+const styled_1 = require("../../components/SidebarActions/styled");
+const ChangeViewButton = ({ layout, onClick, }) => {
+    return (react_1.default.createElement(styled_1.StyledChangeViewButton, { title: "Change layout", onClick: onClick }, layout === SidebarActions_1.LayoutVariant.STACKED ? react_1.default.createElement(styled_1.ChangeViewSvgRow, null) : react_1.default.createElement(styled_1.ChangeViewSvgColumn, null)));
+};
+exports.ChangeViewButton = ChangeViewButton;
+//# sourceMappingURL=ChangeViewButton.js.map

package/lib/components/SidebarActions/CollapseSidebarButton.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface CollapseSidebarButtonProps {
+    initialValue: boolean;
+    onClick: () => void;
+}
+export declare const CollapseSidebarButton: ({ initialValue, onClick, }: CollapseSidebarButtonProps) => JSX.Element;
+export {};

package/lib/components/SidebarActions/CollapseSidebarButton.js

@@ -0,0 +1,53 @@
+"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.CollapseSidebarButton = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const styled_1 = require("../../components/SidebarActions/styled");
+const CollapseSidebarButton = ({ initialValue, onClick, }) => {
+    return (react_1.default.createElement(ToggleButton, { title: initialValue ? 'Show sidebar' : 'Hide sidebar', onClick: onClick, collapsed: initialValue }, initialValue ? react_1.default.createElement(styled_1.HideLeftPanelSVG, null) : react_1.default.createElement(styled_1.ShowLeftPanelSVG, null)));
+};
+exports.CollapseSidebarButton = CollapseSidebarButton;
+const ToggleButton = (0, styled_components_1.default)(styled_1.StyledToggleRightPanelButton) `
+  background: var(--sidebar-collapse-button-background-color);
+  fill: var(--sidebar-collapse-button-icon-color);
+  margin-right: ${({ collapsed }) => (collapsed ? 0 : 'calc(var(--spacing-unit) * -9)')};
+  border: 1px solid var(--sidebar-collapse-button-border-color);
+  border-radius: var(--border-radius-md);
+  padding: var(--spacing-xxs);
+  height: var(--control-height-sm);
+  width: var(--control-height-sm);
+
+  ${({ collapsed }) => collapsed &&
+    (0, styled_components_1.css) `
+      background: var(--sidebar-collapse-button-active-background-color);
+      border: var(--sidebar-collapse-button-active-border-color);
+    `}
+`;
+//# sourceMappingURL=CollapseSidebarButton.js.map

package/lib/components/SidebarActions/SidebarActions.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export declare enum LayoutVariant {
+    STACKED = "stacked",
+    THREE_PANEL = "three-panel"
+}
+interface SidebarActionsProps {
+    showChangeLayoutButton: boolean;
+    showRightPanelToggle: boolean;
+    layout: LayoutVariant;
+    initialShowRightPanelToggle: boolean;
+    collapsedSidebar: boolean;
+    isOpenapiDocs: boolean;
+    hideCollapseSidebarButton?: boolean;
+    onChangeRightPanelViewClick: () => void;
+    onChangeViewClick: () => void;
+    onChangeCollapseSidebarClick: () => void;
+    requestAccessButton?: React.ReactElement | null;
+    className?: string;
+}
+export declare const SidebarActions: ({ showChangeLayoutButton, showRightPanelToggle, layout, initialShowRightPanelToggle, hideCollapseSidebarButton, collapsedSidebar, isOpenapiDocs, onChangeRightPanelViewClick, onChangeViewClick, onChangeCollapseSidebarClick, requestAccessButton, className, }: SidebarActionsProps) => React.JSX.Element;
+export {};