@redocly/theme 0.0.0-react18-20231120182601

package/lib/components/Separator/Separator.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Separator = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const SeparatorLine_1 = require("../../components/Separator/SeparatorLine");
+const SeparatorItem_1 = require("../../components/Separator/SeparatorItem");
+const hooks_1 = require("../../mocks/hooks");
+const hooks_2 = require("../../hooks");
+function Separator({ item, className }) {
+    const { translate } = (0, hooks_1.useTranslate)();
+    const { sidebar } = (0, hooks_2.useThemeConfig)();
+    const separatorLine = item.separatorLine || (sidebar === null || sidebar === void 0 ? void 0 : sidebar.separatorLine);
+    const linePosition = item.linePosition || (sidebar === null || sidebar === void 0 ? void 0 : sidebar.linePosition) || 'bottom';
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/Separator", className: className, linePosition: linePosition, withLabel: !!item.label },
+        react_1.default.createElement(SeparatorItem_1.SeparatorItem, null, translate(item.labelTranslationKey, item.label)),
+        separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));
+}
+exports.Separator = Separator;
+const Wrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: ${({ linePosition }) => (linePosition === 'top' ? 'column-reverse' : 'column')};
+  margin-top: ${({ withLabel }) => (withLabel ? 'var(--sidebar-item-separator-offset)' : '0')};
+`;
+//# sourceMappingURL=Separator.js.map

package/lib/components/Separator/SeparatorItem.d.ts

@@ -0,0 +1,3 @@
+export declare const SeparatorItem: import("styled-components").StyledComponent<"li", any, {
+    active?: boolean | undefined;
+}, never>;

package/lib/components/Separator/SeparatorItem.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SeparatorItem = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const MenuItemLabel_1 = require("../../components/Menu/MenuItemLabel");
+exports.SeparatorItem = (0, styled_components_1.default)(MenuItemLabel_1.MenuItemLabel).attrs(({ className }) => ({
+    'data-component-name': 'Sidebar/SeparatorItem',
+    className,
+})) `
+  cursor: default;
+  font-weight: var(--sidebar-item-separator-font-weight);
+  color: var(--sidebar-item-separator-text-color);
+  font-size: var(--sidebar-item-separator-font-size);
+  text-transform: var(--sidebar-item-separator-text-transform);
+  background: var(--mobile-menu-background);
+  border-radius: 0;
+  padding: var(--sidebar-item-separator-padding);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    background: var(--sidebar-item-separator-background-color);
+  }
+
+  :hover {
+    color: var(--sidebar-item-separator-text-color);
+    background: none;
+  }
+`;
+//# sourceMappingURL=SeparatorItem.js.map

package/lib/components/Separator/SeparatorLine.d.ts

@@ -0,0 +1 @@
+export declare const SeparatorLine: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/Separator/SeparatorLine.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SeparatorLine = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.SeparatorLine = styled_components_1.default.div.attrs(({ className }) => ({
+    'data-component-name': 'Sidebar/SeparatorLine',
+    className,
+})) `
+  height: var(--sidebar-item-separator-border-width);
+  background-color: var(--sidebar-item-separator-border-color);
+  margin: var(--mobile-sidebar-item-separator-line-offset);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    margin: var(--sidebar-item-separator-line-offset);
+  }
+`;
+//# sourceMappingURL=SeparatorLine.js.map

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

@@ -0,0 +1,3 @@
+export * from '../../components/Separator/Separator';
+export * from '../../components/Separator/SeparatorLine';
+export * from '../../components/Separator/SeparatorItem';

package/lib/components/Separator/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/Separator/Separator"), exports);
+__exportStar(require("../../components/Separator/SeparatorLine"), exports);
+__exportStar(require("../../components/Separator/SeparatorItem"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Tag } from '../../components/Tag';
+import type { MenuItemProps } from '../../components/Sidebar/types';
+export declare function ApiCallItem({ item, className }: MenuItemProps): JSX.Element;
+export declare const HttpTag: import("styled-components").StyledComponent<typeof Tag, any, {
+    className: "tag-http";
+}, "className">;

package/lib/components/Sidebar/ApiCallItem.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HttpTag = exports.ApiCallItem = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Tag_1 = require("../../components/Tag");
+const MenuLinkItem_1 = require("../../components/Menu/MenuLinkItem");
+const SeparatorLine_1 = require("../../components/Separator/SeparatorLine");
+const MenuItemLabel_1 = require("../../components/Menu/MenuItemLabel");
+function ApiCallItem({ item, className }) {
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/ApiCallItem", className: className },
+        react_1.default.createElement(MenuLinkItem_1.MenuLinkItem, { item: item },
+            react_1.default.createElement(Label, { active: item.active },
+                item.label,
+                react_1.default.createElement(exports.HttpTag, { color: item.httpVerb || '' }, item.httpVerb === 'hook' ? 'event' : item.httpVerb))),
+        item.separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));
+}
+exports.ApiCallItem = ApiCallItem;
+const Label = (0, styled_components_1.default)(MenuItemLabel_1.MenuItemLabel) `
+  display: flex;
+  justify-content: space-between;
+  color: var(--mobile-menu-item-text-color);
+  padding-left: var(--sidebar-item-label-padding);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    color: var(--sidebar-item-text-color);
+  }
+`;
+const Wrapper = styled_components_1.default.div ``;
+exports.HttpTag = (0, styled_components_1.default)(Tag_1.Tag).attrs({
+    className: 'tag-http',
+}) `
+  flex-shrink: 0;
+  margin: var(--sidebar-item-http-tag-margin);
+
+  width: var(--sidebar-item-http-tag-width);
+  height: var(--sidebar-item-http-tag-height);
+
+  font-size: var(--sidebar-item-http-tag-font-size);
+  font-family: var(--sidebar-item-http-tag-font-family);
+  font-weight: var(--sidebar-item-http-tag-font-weight);
+  border-radius: var(--sidebar-item-http-tag-border-radius);
+`;
+//# sourceMappingURL=ApiCallItem.js.map

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

@@ -0,0 +1,7 @@
+import React from 'react';
+interface BackButtonProps {
+    back: () => void;
+    className?: string;
+}
+export declare function BackButton({ children, back, className, }: React.PropsWithChildren<BackButtonProps>): JSX.Element;
+export {};

package/lib/components/Sidebar/BackButton.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BackButton = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const ArrowBack_1 = require("../../ui/ArrowBack");
+function BackButton({ children, back, className, }) {
+    return (react_1.default.createElement(Button, { onClick: back, "data-component-name": "Sidebar/BackButton", className: className },
+        react_1.default.createElement(ArrowBack, { dataComponentName: "Sidebar/ArrowBack" }),
+        children));
+}
+exports.BackButton = BackButton;
+const Button = styled_components_1.default.button `
+  width: 100%;
+  background-color: var(--sidebar-back-button-background-color);
+  padding: 0;
+  border: 0;
+  outline: 0;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  color: var(--sidebar-back-button-text-color);
+  font-size: var(--sidebar-back-button-font-size);
+  font-family: var(--sidebar-back-button-font-family);
+  text-transform: var(--sidebar-back-button-transform);
+
+  transition: color 0.25s ease;
+  text-align: left;
+  margin: var(--sidebar-back-button-margin);
+
+  &:hover {
+    color: var(--sidebar-back-button-hover-text-color);
+    background: var(--sidebar-back-button-hover-background-color);
+  }
+`;
+const ArrowBack = (0, styled_components_1.default)(ArrowBack_1.ArrowBack) `
+  margin-right: var(--spacing-sm);
+`;
+//# sourceMappingURL=BackButton.js.map

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { DrilldownMenuProps } from '../../components/Sidebar/types';
+interface DrilldownProps extends DrilldownMenuProps {
+    isExpanded: boolean;
+    expand: () => void;
+    className?: string;
+}
+export declare function Drilldown({ isExpanded, item, expand, className, ...props }: React.PropsWithChildren<DrilldownProps>): JSX.Element;
+export {};

package/lib/components/Sidebar/Drilldown.js

@@ -0,0 +1,45 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Drilldown = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const MenuItemLabel_1 = require("../../components/Menu/MenuItemLabel");
+const SeparatorLine_1 = require("../../components/Separator/SeparatorLine");
+const DrilldownMenuItem_1 = require("../../components/Sidebar/DrilldownMenuItem");
+const DrilldownMenu_1 = require("../../components/Sidebar/DrilldownMenu");
+const Menu_1 = require("../../components/Menu");
+function Drilldown(_a) {
+    var { isExpanded, item, expand, className } = _a, props = __rest(_a, ["isExpanded", "item", "expand", "className"]);
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/Drilldown", className: className },
+        react_1.default.createElement(Menu_1.MenuLinkItem, { item: item },
+            react_1.default.createElement(DrilldownLabel, { onClick: expand },
+                react_1.default.createElement(DrilldownMenuItem_1.DrilldownMenuItem, { item: item }))),
+        isExpanded ? react_1.default.createElement(DrilldownMenu_1.DrilldownMenu, Object.assign({ item: item }, props)) : null,
+        item.separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));
+}
+exports.Drilldown = Drilldown;
+const Wrapper = styled_components_1.default.div ``;
+const DrilldownLabel = (0, styled_components_1.default)(MenuItemLabel_1.MenuItemLabel) `
+  padding: var(--sidebar-item-nested-offset) var(--sidebar-item-padding-horizontal);
+  font-weight: var(--font-weight-bold);
+
+  &:hover {
+    color: initial;
+    background-color: initial;
+  }
+`;
+//# sourceMappingURL=Drilldown.js.map

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { DrilldownMenuProps } from '../../components/Sidebar/types';
+export declare function DrilldownMenu({ item, back, children, className, }: React.PropsWithChildren<DrilldownMenuProps>): JSX.Element;

package/lib/components/Sidebar/DrilldownMenu.js

@@ -0,0 +1,75 @@
+"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.DrilldownMenu = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const BackButton_1 = require("../../components/Sidebar/BackButton");
+const DrilldownMenuItem_1 = require("../../components/Sidebar/DrilldownMenuItem");
+const hooks_1 = require("../../mocks/hooks");
+const Menu_1 = require("../../components/Menu");
+function DrilldownMenu({ item, back, children, className, }) {
+    const { translate } = (0, hooks_1.useTranslate)();
+    return (react_1.default.createElement(MenuContainer, { "data-component-name": "Sidebar/DrilldownMenu", className: className },
+        react_1.default.createElement(MenuContent, null,
+            react_1.default.createElement(MenuWrapper, null,
+                react_1.default.createElement(BackButton_1.BackButton, { back: back, "data-translation-key": "theme.sidebar.menu.backLabel" }, translate('theme.sidebar.menu.backLabel', 'Back')),
+                react_1.default.createElement(Menu_1.MenuLinkItem, { item: item },
+                    react_1.default.createElement(DrilldownMenuItem_1.DrilldownMenuItem, { item: item }))),
+            children)));
+}
+exports.DrilldownMenu = DrilldownMenu;
+const MenuContainer = styled_components_1.default.div `
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  z-index: var(--z-index-raised);
+  background-color: var(--sidebar-item-drilldown-background-color);
+  padding: var(--sidebar-item-nested-offset) var(--sidebar-item-padding-horizontal);
+`;
+const slideInAnimation = (0, styled_components_1.keyframes) `
+  0% {
+    transform: translateX(100%)
+  }
+  100% {
+    transform: translateX(0%)
+  }
+`;
+const MenuContent = styled_components_1.default.div `
+  animation-name: ${slideInAnimation};
+  animation-fill-mode: forwards;
+  animation-duration: 0.3s;
+  animation-timing-function: ease;
+  background-color: transparent;
+`;
+const MenuWrapper = styled_components_1.default.div `
+  padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);
+  word-break: break-word;
+`;
+//# sourceMappingURL=DrilldownMenu.js.map

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { MenuItemProps } from '../../components/Sidebar/types';
+export declare function DrilldownMenuItem({ item, className }: MenuItemProps): JSX.Element;

package/lib/components/Sidebar/DrilldownMenuItem.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DrilldownMenuItem = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const SidebarItemIcon_1 = require("../../components/Sidebar/SidebarItemIcon");
+const hooks_1 = require("../../mocks/hooks");
+function DrilldownMenuItem({ item, className }) {
+    const { translate } = (0, hooks_1.useTranslate)();
+    return (react_1.default.createElement(Container, { "data-component-name": "Sidebar/DrilldownMenuItem", className: className },
+        item.icon ? react_1.default.createElement(SidebarItemIcon_1.SidebarItemIcon, { src: item.icon }) : null,
+        react_1.default.createElement("div", null,
+            translate(item.labelTranslationKey, item.label),
+            item.sublabel ? (react_1.default.createElement(SubLabel, null, translate(item.subLabelTranslationKey, item.sublabel))) : null)));
+}
+exports.DrilldownMenuItem = DrilldownMenuItem;
+const Container = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  color: var(--sidebar-item-drilldown-text-color);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--sidebar-item-drilldown-font-size);
+  font-family: var(--sidebar-item-drilldown-font-family);
+  text-transform: var(--sidebar-text-drilldown-transform);
+  background: var(--sidebar-item-drilldown-background-color);
+`;
+const SubLabel = styled_components_1.default.div `
+  margin-top: 2px;
+  color: var(--sidebar-item-sublabel-text-color);
+  font-weight: var(-sidebar-item-sublabel-font-weight);
+  font-size: var(--sidebar-item-sublabel-font-size);
+  font-family: var(--sidebar-item-sublabel-font-family);
+`;
+//# sourceMappingURL=DrilldownMenuItem.js.map

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

@@ -0,0 +1,3 @@
+export declare const FooterWrapper: import("styled-components").StyledComponent<"div", any, {
+    collapsed?: boolean | undefined;
+}, never>;

package/lib/components/Sidebar/FooterWrapper.js

@@ -0,0 +1,22 @@
+"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 `
+  padding: var(--sidebar-footer-padding-vertical) var(--sidebar-footer-padding-horizontal);
+
+  ${({ collapsed }) => collapsed &&
+    `
+        position: sticky;
+        bottom: 0;
+        padding: 0;
+    `}
+
+  button {
+    margin: 0;
+  }
+`;
+//# sourceMappingURL=FooterWrapper.js.map

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

@@ -0,0 +1 @@
+export declare const HeaderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/Sidebar/HeaderWrapper.js

@@ -0,0 +1,16 @@
+"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(({ className }) => ({
+    'data-component-name': 'Sidebar/HeaderWrapper',
+    className,
+})) `
+  margin: var(--sidebar-offset-top) 0 0 0;
+  padding: 0 0 var(--sidebar-header-padding-bottom) var(--sidebar-offset-left);
+  border-bottom: solid 1px var(--border-primary);
+`;
+//# sourceMappingURL=HeaderWrapper.js.map

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

@@ -0,0 +1,3 @@
+export declare const MobileSidebarButton: import("styled-components").StyledComponent<"span", any, {
+    opened?: boolean | undefined;
+}, never>;

package/lib/components/Sidebar/MobileSidebarButton.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileSidebarButton = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.MobileSidebarButton = styled_components_1.default.span.attrs(({ className }) => ({
+    'data-component-name': 'Sidebar/MobileSidebarButton',
+    className,
+})) `
+  background-color: var(
+    ${(props) => (props.opened ? '--fab-active-background' : '--fab-background-color')}
+  );
+  width: 55px;
+  user-select: none;
+  height: 55px;
+  bottom: 44px;
+  cursor: pointer;
+  position: fixed;
+  right: 20px;
+  z-index: var(--z-index-surface);
+  box-shadow: ${(props) => props.opened ? 'var(--fab-active-box-shadow)' : 'var(--fab-box-shadow)'};
+  border-radius: 50%;
+  transform: ${(props) => (props.opened ? 'rotate(180deg)' : 'rotate(0deg)')};
+  transition: transform 0.75s;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  fill: var(--fab-icon-color);
+
+  &:hover {
+    background-color: var(--fab-background-color);
+    box-shadow: var(--fab-hover-box-shadow);
+  }
+
+  ${({ theme }) => { var _a; return (_a = theme.mediaQueries) === null || _a === void 0 ? void 0 : _a.medium; }} {
+    display: none;
+    transform: rotate(180deg);
+  }
+
+  ${({ theme }) => { var _a; return (_a = theme.mediaQueries) === null || _a === void 0 ? void 0 : _a.print; }} {
+    display: none !important;
+  }
+`;
+//# sourceMappingURL=MobileSidebarButton.js.map

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const MobileSidebarIcon: ({ className }: {
+    className?: string | undefined;
+}) => JSX.Element;

package/lib/components/Sidebar/MobileSidebarIcon.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileSidebarIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const MobileSidebarIcon = ({ className }) => (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "25px", height: "25px", viewBox: "0 0 294.842 294.842", className: className },
+    react_1.default.createElement("path", { d: "M292.128,214.846c-2.342-2.344-6.143-2.344-8.484,0l-59.512,59.511V6c0-3.313-2.687-6-6-6s-6,2.687-6,6v268.356 l-59.513-59.512c-2.342-2.342-6.142-2.343-8.485,0.001c-2.343,2.343-2.343,6.142,0.001,8.485l69.755,69.754 c1.171,1.171,2.707,1.757,4.242,1.757s3.071-0.586,4.242-1.758l69.754-69.754C294.472,220.987,294.472,217.188,292.128,214.846z" }),
+    react_1.default.createElement("path", { d: "M6.956,12h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,12,6.956,12z" }),
+    react_1.default.createElement("path", { d: "M6.956,82.228h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,82.228,6.956,82.228z" }),
+    react_1.default.createElement("path", { d: "M6.956,152.456h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,152.456,6.956,152.456z" }),
+    react_1.default.createElement("path", { d: "M124.438,210.685H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,210.685,124.438,210.685z" }),
+    react_1.default.createElement("path", { d: "M124.438,280.912H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,280.912,124.438,280.912z" })));
+exports.MobileSidebarIcon = MobileSidebarIcon;
+//# sourceMappingURL=MobileSidebarIcon.js.map

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

@@ -0,0 +1,6 @@
+interface SidebarProps {
+    opened?: boolean;
+    animate?: boolean;
+}
+export declare const Sidebar: import("styled-components").StyledComponent<"aside", any, SidebarProps, never>;
+export {};

package/lib/components/Sidebar/Sidebar.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sidebar = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.Sidebar = styled_components_1.default.aside.attrs(({ className }) => ({
+    'data-component-name': 'Sidebar/Sidebar',
+    className,
+})) `
+  border-right: 1px solid var(--sidebar-border-color);
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+  background: var(--sidebar-background-color);
+  font-size: var(--sidebar-item-font-size);
+  font-family: var(--sidebar-item-font-family);
+  color: var(--sidebar-item-text-color);
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  -webkit-font-smoothing: antialiased;
+  top: var(--navbar-height);
+  height: calc(100vh - 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'};
+    }
+  `};
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    position: sticky;
+    pointer-events: auto;
+    display: flex;
+    opacity: 1;
+    flex-shrink: 0;
+    width: var(--sidebar-width);
+
+    & > * {
+      transform: none;
+    }
+  }
+
+  ${({ theme }) => theme.mediaQueries.large} {
+    transform: none;
+  }
+`;
+//# sourceMappingURL=Sidebar.js.map

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

@@ -0,0 +1 @@
+export declare const SidebarItemIcon: import("styled-components").StyledComponent<"img", any, {}, never>;

package/lib/components/Sidebar/SidebarItemIcon.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarItemIcon = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.SidebarItemIcon = styled_components_1.default.img `
+  width: var(--sidebar-item-icon-size);
+  height: var(--sidebar-item-icon-size);
+  margin-right: var(--sidebar-spacing-unit);
+  border-radius: var(--sidebar-item-icon-border-radius);
+  flex-shrink: 0;
+  overflow: hidden;
+`;
+//# sourceMappingURL=SidebarItemIcon.js.map

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

@@ -0,0 +1,18 @@
+import React from 'react';
+interface SidebarLayoutProps {
+    versions?: React.ReactNode;
+    menu?: React.ReactNode;
+    backLink?: {
+        label: string;
+        slug: string;
+    };
+    footer?: React.ReactNode;
+    actions?: React.ReactNode;
+    header?: React.ReactNode;
+    growContent?: boolean;
+    collapsed?: boolean;
+    onToggleMenu?: (isOpen: boolean) => void;
+    className?: string;
+}
+export declare function SidebarLayout({ versions, menu, footer, header, growContent, collapsed, onToggleMenu, className, }: SidebarLayoutProps): JSX.Element | null;
+export {};