@redocly/theme 0.1.2 → 0.1.5

package/Navbar/NavbarItem.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+export declare enum MenuStyle {
+    Drilldown = "drilldown"
+}
+export declare type ResolvedNavLinkItem = {
+    type: 'link';
+    link: string;
+    label: string;
+    items?: ResolvedNavItem[];
+    external?: boolean;
+    version?: string;
+    default?: string;
+    httpVerb?: string;
+    separatorLine?: boolean;
+    active?: boolean;
+};
+export declare type ResolvedNavGroupItem = {
+    type: 'group';
+    link?: string;
+    label: string;
+    items: ResolvedNavItem[];
+    version?: string;
+    default?: string;
+    menuStyle?: MenuStyle;
+    separatorLine?: boolean;
+    active?: boolean;
+};
+export declare type ResolvedNavItem = ResolvedNavLinkItem | ResolvedNavGroupItem | {
+    type: 'separator';
+    label?: string;
+    separatorLine?: boolean;
+} | {
+    type: 'error';
+    label: string;
+};
+interface NavbarItemProps {
+    navItem: ResolvedNavLinkItem;
+}
+export default function NavbarItem({ navItem }: NavbarItemProps): JSX.Element;
+export {};

package/Navbar/NavbarItem.js

@@ -0,0 +1,50 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuStyle = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importDefault(require("styled-components"));
+var react_router_dom_1 = require("react-router-dom");
+var Link_1 = require("../mocks/Link");
+var utils_1 = require("../mocks/utils");
+var MenuStyle;
+(function (MenuStyle) {
+    MenuStyle["Drilldown"] = "drilldown";
+})(MenuStyle = exports.MenuStyle || (exports.MenuStyle = {}));
+function NavbarItem(_a) {
+    var navItem = _a.navItem;
+    var pathname = (0, react_router_dom_1.useLocation)().pathname;
+    var isActive = pathname === (0, utils_1.withPathPrefix)(navItem.link);
+    return ((0, jsx_runtime_1.jsx)(NavMenuItem, __assign({ active: isActive, "data-component-name": "Navbar/NavbarItem" }, { children: (0, jsx_runtime_1.jsx)(NavLink, __assign({ to: navItem.link, active: isActive }, { children: (0, jsx_runtime_1.jsx)(NavLabel, { children: navItem.label }) })) })));
+}
+exports.default = NavbarItem;
+var NavMenuItem = styled_components_1.default.li(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-block;\n  padding: 20px calc(var(--sidebar-padding-horizontal) * 2);\n  text-align: center;\n  line-height: 1;\n  font-size: var(--navbar-item-font-size);\n  margin-left: var(--navbar-item-margin-horizontal);\n  margin-right: var(--navbar-item-margin-horizontal);\n  border-radius: var(--navbar-item-border-radius);\n  font-weight: var(--navbar-item-font-weight);\n  background: ", ";\n"], ["\n  display: inline-block;\n  padding: 20px calc(var(--sidebar-padding-horizontal) * 2);\n  text-align: center;\n  line-height: 1;\n  font-size: var(--navbar-item-font-size);\n  margin-left: var(--navbar-item-margin-horizontal);\n  margin-right: var(--navbar-item-margin-horizontal);\n  border-radius: var(--navbar-item-border-radius);\n  font-weight: var(--navbar-item-font-weight);\n  background: ", ";\n"])), function (_a) {
+    var active = _a.active;
+    return (active ? 'var(--navbar-item-active-background-color)' : 'none');
+});
+var NavLink = (0, styled_components_1.default)(Link_1.Link)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n  text-decoration: ", ";\n"], ["\n  color: ", ";\n  text-decoration: ", ";\n"])), function (_a) {
+    var active = _a.active;
+    return active ? 'var(--navbar-item-active-text-color)' : 'var(--navbar-color-text)';
+}, function (_a) {
+    var active = _a.active;
+    return active ? 'var(--navbar-item-active-text-decoration)' : 'none';
+});
+var NavLabel = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  cursor: pointer;\n  vertical-align: middle;\n"], ["\n  cursor: pointer;\n  vertical-align: middle;\n"])));
+var templateObject_1, templateObject_2, templateObject_3;

package/Navbar/NavbarMenu.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export default function NavbarMenu({ menuItems }: {
+    menuItems: any[];
+}): JSX.Element | null;

package/Navbar/NavbarMenu.js

@@ -0,0 +1,35 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importDefault(require("styled-components"));
+var NavbarItem_1 = __importDefault(require("../Navbar/NavbarItem"));
+function NavbarMenu(_a) {
+    var menuItems = _a.menuItems;
+    if (!menuItems || !menuItems.length) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(NavItemsContainer, __assign({ "data-component-name": "Navbar/NavbarMenu" }, { children: menuItems.map(function (navItem, index) {
+            return (0, jsx_runtime_1.jsx)(NavbarItem_1.default, { "data-cy": navItem.label, navItem: navItem }, index);
+        }) })));
+}
+exports.default = NavbarMenu;
+var NavItemsContainer = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: block;\n"], ["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: block;\n"])));
+var templateObject_1;

package/Panel/CodePanel.d.ts

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

package/Panel/CodePanel.js

@@ -0,0 +1,19 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodePanel = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var ShelfIcon_1 = require("../icons/ShelfIcon");
+var Panel_1 = require("./Panel");
+var PanelHeader_1 = require("./PanelHeader");
+var DarkHeader_1 = require("./DarkHeader");
+var PanelBody_1 = require("./PanelBody");
+var PanelHeaderTitle_1 = require("./PanelHeaderTitle");
+exports.CodePanel = (0, styled_components_1.default)(Panel_1.Panel)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  > ", " {\n    ", ";\n    min-height: 50px;\n    ", " {\n      fill: var(--color-content-inverse);\n      position: relative;\n    }\n    ", " {\n      color: var(--color-content-inverse);\n    }\n  }\n\n  && {\n    ", " {\n      padding: 10px 20px 20px;\n      background-color: var(--samples-panel-background-color);\n      color: var(--color-content-inverse);\n    }\n  }\n"], ["\n  > ", " {\n    ", ";\n    min-height: 50px;\n    ", " {\n      fill: var(--color-content-inverse);\n      position: relative;\n    }\n    ", " {\n      color: var(--color-content-inverse);\n    }\n  }\n\n  && {\n    ", " {\n      padding: 10px 20px 20px;\n      background-color: var(--samples-panel-background-color);\n      color: var(--color-content-inverse);\n    }\n  }\n"])), PanelHeader_1.PanelHeader, DarkHeader_1.DarkHeader, ShelfIcon_1.ShelfIcon, PanelHeaderTitle_1.PanelHeaderTitle, PanelBody_1.PanelBody);
+var templateObject_1;

package/Panel/ContentPanel.d.ts

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

package/Panel/ContentPanel.js

@@ -0,0 +1,18 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentPanel = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var ShelfIcon_1 = require("../icons/ShelfIcon");
+var PanelHeaderTitle_1 = require("./PanelHeaderTitle");
+var Panel_1 = require("./Panel");
+var PanelBody_1 = require("./PanelBody");
+var PanelHeader_1 = require("./PanelHeader");
+exports.ContentPanel = (0, styled_components_1.default)(Panel_1.Panel)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: 1px solid var(--global-border-color);\n\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-regular);\n  line-height: var(--line-height-base);\n\n  &:not(:last-child) {\n    margin-bottom: 20px;\n  }\n\n  > ", " {\n    padding: calc(var(--spacing-unit) * 4);\n    font-size: 18px;\n    font-weight: var(--font-weight-bold);\n    background-color: var(--panels-background-color);\n\n    ", " {\n      color: var(--color-content);\n    }\n\n    ", " {\n      fill: var(--color-content);\n    }\n  }\n\n  > ", " {\n    padding: calc(var(--spacing-unit) * 4);\n  }\n\n  > ", " + ", " {\n    padding-top: 1px; /* to prevent border overflow */\n  }\n"], ["\n  border: 1px solid var(--global-border-color);\n\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-regular);\n  line-height: var(--line-height-base);\n\n  &:not(:last-child) {\n    margin-bottom: 20px;\n  }\n\n  > ", " {\n    padding: calc(var(--spacing-unit) * 4);\n    font-size: 18px;\n    font-weight: var(--font-weight-bold);\n    background-color: var(--panels-background-color);\n\n    ", " {\n      color: var(--color-content);\n    }\n\n    ", " {\n      fill: var(--color-content);\n    }\n  }\n\n  > ", " {\n    padding: calc(var(--spacing-unit) * 4);\n  }\n\n  > ", " + ", " {\n    padding-top: 1px; /* to prevent border overflow */\n  }\n"])), PanelHeader_1.PanelHeader, PanelHeaderTitle_1.PanelHeaderTitle, ShelfIcon_1.ShelfIcon, PanelBody_1.PanelBody, PanelHeader_1.PanelHeader, PanelBody_1.PanelBody);
+var templateObject_1;

package/Panel/DarkHeader.d.ts

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

package/Panel/DarkHeader.js

@@ -0,0 +1,10 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DarkHeader = void 0;
+var styled_components_1 = require("styled-components");
+exports.DarkHeader = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 10px 20px;\n  line-height: 30px;\n  z-index: 0;\n  background-color: var(--samples-panel-controls-background-color);\n"], ["\n  padding: 10px 20px;\n  line-height: 30px;\n  z-index: 0;\n  background-color: var(--samples-panel-controls-background-color);\n"])));
+var templateObject_1;

package/Panel/Panel.d.ts

@@ -0,0 +1,2 @@
+import { PanelComponent } from './PanelComponent';
+export declare const Panel: import("styled-components").StyledComponent<typeof PanelComponent, any, {}, never>;

package/Panel/Panel.js

@@ -0,0 +1,16 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Panel = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var PanelBody_1 = require("./PanelBody");
+var PanelComponent_1 = require("./PanelComponent");
+var PanelHeader_1 = require("./PanelHeader");
+exports.Panel = (0, styled_components_1.default)(PanelComponent_1.PanelComponent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: var(--panels-border-radius);\n\n  ", " + ", " {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n\n  &:not(:last-child) {\n    margin-bottom: 10px;\n  }\n"], ["\n  border-radius: var(--panels-border-radius);\n\n  ", " + ", " {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n\n  &:not(:last-child) {\n    margin-bottom: 10px;\n  }\n"])), PanelHeader_1.PanelHeader, PanelBody_1.PanelBody);
+var templateObject_1;

package/Panel/PanelBody.d.ts

@@ -0,0 +1,6 @@
+interface PanelBodyProps {
+    animate?: boolean;
+    hidden?: boolean;
+}
+export declare const PanelBody: import("styled-components").StyledComponent<"div", any, PanelBodyProps, never>;
+export {};

package/Panel/PanelBody.js

@@ -0,0 +1,41 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelBody = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var showPanel = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    transform: translateY(-10px);\n  }\n  100% {\n    transform: translateY(0);\n  }\n"], ["\n  0% {\n    transform: translateY(-10px);\n  }\n  100% {\n    transform: translateY(0);\n  }\n"])));
+var showPanelAnimation = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  animation: ", " 0.2s;\n"], ["\n  animation: ", " 0.2s;\n"])), showPanel);
+exports.PanelBody = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n  ", ";\n\n  border-top-left-radius: var(--panels-border-radius);\n  border-top-right-radius: var(--panels-border-radius);\n  border-bottom-right-radius: var(--panels-border-radius);\n  border-bottom-left-radius: var(--panels-border-radius);\n  background-color: var(--panels-background-color);\n"], ["\n  ", ";\n  ", ";\n\n  border-top-left-radius: var(--panels-border-radius);\n  border-top-right-radius: var(--panels-border-radius);\n  border-bottom-right-radius: var(--panels-border-radius);\n  border-bottom-left-radius: var(--panels-border-radius);\n  background-color: var(--panels-background-color);\n"])), function (_a) {
+    var animate = _a.animate;
+    return animate && showPanelAnimation;
+}, function (_a) {
+    var hidden = _a.hidden;
+    return hidden && 'visibility: hidden';
+});
+var templateObject_1, templateObject_2, templateObject_3;

package/Panel/PanelComponent.d.ts

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

package/Panel/PanelComponent.js

@@ -0,0 +1,47 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InlineBox = exports.PanelComponent = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = __importDefault(require("styled-components"));
+var icons_1 = require("../icons");
+var PanelBody_1 = require("./PanelBody");
+var PanelHeader_1 = require("./PanelHeader");
+var PanelHeaderTitle_1 = require("./PanelHeaderTitle");
+function PanelComponent(_a) {
+    var _b = _a.expanded, expanded = _b === void 0 ? true : _b, header = _a.header, className = _a.className, children = _a.children, onToggle = _a.onToggle;
+    var _c = (0, react_1.useState)(expanded), isExpanded = _c[0], setExpanded = _c[1];
+    var _d = (0, react_1.useState)(false), animate = _d[0], setAnimate = _d[1];
+    var toggle = function (_a) {
+        var target = _a.target;
+        if (target instanceof HTMLAnchorElement)
+            return;
+        setAnimate(true);
+        setExpanded(!isExpanded);
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle(!isExpanded);
+    };
+    (0, react_1.useEffect)(function () { return setExpanded(expanded); }, [expanded]);
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: className, "data-cy": typeof header === 'string' ? ('panel-' + header).replace(/ /g, '-').toLowerCase() : null }, { children: [header &&
+                (typeof header === 'function' ? (header({ expanded: isExpanded, toggle: toggle })) : ((0, jsx_runtime_1.jsx)(PanelHeader_1.PanelHeader, __assign({ "data-cy": "panel-header", onClick: toggle, expanded: isExpanded }, { children: (0, jsx_runtime_1.jsxs)(exports.InlineBox, { children: [(0, jsx_runtime_1.jsx)(PanelHeaderTitle_1.PanelHeaderTitle, __assign({ "data-cy": "title" }, { children: header })), (0, jsx_runtime_1.jsx)(icons_1.ShelfIcon, { direction: isExpanded ? 'down' : 'right' })] }) })))), isExpanded && ((0, jsx_runtime_1.jsx)(PanelBody_1.PanelBody, __assign({ "data-cy": "panel-body", hidden: !isExpanded, animate: animate }, { children: children })))] })));
+}
+exports.PanelComponent = PanelComponent;
+exports.InlineBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n"], ["\n  display: inline-flex;\n  align-items: center;\n"])));
+var templateObject_1;

package/Panel/PanelHeader.d.ts

@@ -0,0 +1,7 @@
+import { BaseSyntheticEvent } from 'react';
+export interface PanelHeaderProps {
+    expanded: boolean;
+    disabled?: boolean;
+    toggle?: (e: BaseSyntheticEvent) => void;
+}
+export declare const PanelHeader: import("styled-components").StyledComponent<"div", any, PanelHeaderProps, never>;

package/Panel/PanelHeader.js

@@ -0,0 +1,22 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelHeader = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.PanelHeader = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  white-space: nowrap;\n  cursor: pointer;\n\n  border-top-left-radius: var(--panels-border-radius);\n  border-top-right-radius: var(--panels-border-radius);\n  border-bottom-right-radius: ", ";\n  border-bottom-left-radius: ", ";\n\n  pointer-events: ", ";\n"], ["\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  white-space: nowrap;\n  cursor: pointer;\n\n  border-top-left-radius: var(--panels-border-radius);\n  border-top-right-radius: var(--panels-border-radius);\n  border-bottom-right-radius: ", ";\n  border-bottom-left-radius: ", ";\n\n  pointer-events: ", ";\n"])), function (_a) {
+    var expanded = _a.expanded;
+    return (expanded ? '0' : 'var(--panels-border-radius)');
+}, function (_a) {
+    var expanded = _a.expanded;
+    return (expanded ? '0' : 'var(--panels-border-radius)');
+}, function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? 'none' : 'auto');
+});
+var templateObject_1;

package/Panel/PanelHeaderTitle.d.ts

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

package/Panel/PanelHeaderTitle.js

@@ -0,0 +1,13 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelHeaderTitle = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.PanelHeaderTitle = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  line-height: 1;\n  margin-right: 5px;\n  font-weight: 700;\n  /* changed from var(--color-content-inverse) to var(--color-content)\n     should change several components in openapi/graphql reference-docs to use inverse color\n   */\n  color: var(--color-content);\n"], ["\n  line-height: 1;\n  margin-right: 5px;\n  font-weight: 700;\n  /* changed from var(--color-content-inverse) to var(--color-content)\n     should change several components in openapi/graphql reference-docs to use inverse color\n   */\n  color: var(--color-content);\n"])));
+var templateObject_1;

package/Panel/index.d.ts

@@ -0,0 +1,7 @@
+export * from './CodePanel';
+export * from './ContentPanel';
+export * from './DarkHeader';
+export * from './Panel';
+export * from './PanelBody';
+export * from './PanelHeader';
+export * from './PanelHeaderTitle';

package/Panel/index.js

@@ -0,0 +1,23 @@
+"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("./CodePanel"), exports);
+__exportStar(require("./ContentPanel"), exports);
+__exportStar(require("./DarkHeader"), exports);
+__exportStar(require("./Panel"), exports);
+__exportStar(require("./PanelBody"), exports);
+__exportStar(require("./PanelHeader"), exports);
+__exportStar(require("./PanelHeaderTitle"), exports);

package/SamplesPanelControls/SamplesPanelControls.d.ts

@@ -0,0 +1,4 @@
+export declare const SamplesControlButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const SampleControls: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SampleControlsWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PreformattedCodeBlock: import("styled-components").StyledComponent<"pre", any, {}, never>;

package/SamplesPanelControls/SamplesPanelControls.js

@@ -0,0 +1,23 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PreformattedCodeBlock = exports.SampleControlsWrap = exports.SampleControls = exports.SamplesControlButton = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var CodeBlock_1 = require("../CodeBlock");
+exports.SamplesControlButton = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: var(--samples-panel-controls-background-color);\n  border: 0;\n  outline: 0;\n  border-radius: var(--global-border-radius);\n  height: 20px;\n  color: var(--color-content-inverse);\n  font-size: 12px;\n  line-height: 12px;\n  cursor: pointer;\n  padding: 1px 6px;\n  min-width: 90px;\n\n  ", " {\n    padding: 2px 20px;\n  }\n\n  :hover,\n  :focus {\n    background-color: var(--samples-panel-controls-hover-background-color);\n  }\n"], ["\n  background-color: var(--samples-panel-controls-background-color);\n  border: 0;\n  outline: 0;\n  border-radius: var(--global-border-radius);\n  height: 20px;\n  color: var(--color-content-inverse);\n  font-size: 12px;\n  line-height: 12px;\n  cursor: pointer;\n  padding: 1px 6px;\n  min-width: 90px;\n\n  ", " {\n    padding: 2px 20px;\n  }\n\n  :hover,\n  :focus {\n    background-color: var(--samples-panel-controls-hover-background-color);\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.mediaQueries.small;
+});
+exports.SampleControls = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 10px 0;\n  opacity: 0.7;\n  transition: opacity 0.3s ease;\n  text-align: right;\n\n  &:focus-within {\n    opacity: 1;\n  }\n\n  > div,\n  > ", " {\n    /* can have tooltip wrapper div also */\n    margin-top: 5px;\n    margin-left: 10px;\n\n    ", " {\n      margin-top: 0;\n    }\n\n    &:first-child {\n      margin-left: 0;\n    }\n  }\n"], ["\n  padding: 10px 0;\n  opacity: 0.7;\n  transition: opacity 0.3s ease;\n  text-align: right;\n\n  &:focus-within {\n    opacity: 1;\n  }\n\n  > div,\n  > ", " {\n    /* can have tooltip wrapper div also */\n    margin-top: 5px;\n    margin-left: 10px;\n\n    ", " {\n      margin-top: 0;\n    }\n\n    &:first-child {\n      margin-left: 0;\n    }\n  }\n"])), exports.SamplesControlButton, function (_a) {
+    var theme = _a.theme;
+    return theme.mediaQueries.small;
+});
+exports.SampleControlsWrap = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  &:hover ", " {\n    opacity: 1;\n  }\n"], ["\n  &:hover ", " {\n    opacity: 1;\n  }\n"])), exports.SampleControls);
+exports.PreformattedCodeBlock = (0, styled_components_1.default)(CodeBlock_1.CodeBlock.withComponent('pre'))(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  overflow-x: auto;\n  margin: 0;\n  font-family: var(--code-font-family);\n  padding: 20px;\n  border-radius: var(--global-border-radius);\n  background-color: var(--samples-panel-controls-background-color);\n  color: var(--color-content-inverse);\n  font-size: var(--code-font-size);\n  white-space: var(--code-wrap, pre);\n"], ["\n  overflow-x: auto;\n  margin: 0;\n  font-family: var(--code-font-family);\n  padding: 20px;\n  border-radius: var(--global-border-radius);\n  background-color: var(--samples-panel-controls-background-color);\n  color: var(--color-content-inverse);\n  font-size: var(--code-font-size);\n  white-space: var(--code-wrap, pre);\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/SamplesPanelControls/index.d.ts

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

package/SamplesPanelControls/index.js

@@ -0,0 +1,17 @@
+"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("./SamplesPanelControls"), exports);

package/SidebarLogo/SidebarLogo.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export interface LogoProps {
+    imageUrl?: string;
+    href?: string;
+    altText?: string;
+    dataTestId?: string;
+    backgroundColor?: string;
+}
+export declare function SidebarLogo({ imageUrl, href, altText, backgroundColor, dataTestId, }?: LogoProps): JSX.Element | null;

package/SidebarLogo/SidebarLogo.js

@@ -0,0 +1,36 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarLogo = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importDefault(require("styled-components"));
+function SidebarLogo(_a) {
+    var _b = _a === void 0 ? {} : _a, imageUrl = _b.imageUrl, href = _b.href, altText = _b.altText, backgroundColor = _b.backgroundColor, dataTestId = _b.dataTestId;
+    if (!imageUrl) {
+        return null;
+    }
+    var logo = (0, jsx_runtime_1.jsx)(LogoImgEl, { src: imageUrl, alt: altText || 'logo' });
+    return ((0, jsx_runtime_1.jsx)(LogoWrap, __assign({ "data-cy": dataTestId, style: { backgroundColor: backgroundColor } }, { children: href ? (0, jsx_runtime_1.jsx)(Link, __assign({ href: href }, { children: logo })) : logo })));
+}
+exports.SidebarLogo = SidebarLogo;
+var LogoImgEl = styled_components_1.default.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-height: var(--logo-max-height);\n  max-width: var(--logo-max-width);\n  padding: var(--logo-padding);\n  width: 100%;\n  display: block;\n"], ["\n  max-height: var(--logo-max-height);\n  max-width: var(--logo-max-width);\n  padding: var(--logo-padding);\n  width: 100%;\n  display: block;\n"])));
+var LogoWrap = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  text-align: center;\n  line-height: 0;\n"], ["\n  text-align: center;\n  line-height: 0;\n"])));
+var Link = styled_components_1.default.a(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: inline-block;\n"], ["\n  display: inline-block;\n"])));
+var templateObject_1, templateObject_2, templateObject_3;

package/SidebarLogo/index.d.ts

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

package/SidebarLogo/index.js

@@ -0,0 +1,17 @@
+"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("./SidebarLogo"), exports);

package/SourceCode/SourceCode.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+export interface SourceCodeProps {
+    lang: string;
+    source?: string;
+    externalSource?: ExternalSource;
+    withCopyButton?: boolean;
+    dataTestId?: string;
+}
+export interface Sample {
+    lang: string;
+    label?: string;
+}
+export declare type UnstableExternalCodeSample = Sample & {
+    get: (source: ExternalSource) => string;
+};
+export interface ExternalSource {
+    sample: UnstableExternalCodeSample;
+    exampleName?: string;
+    pathParams?: any;
+    properties?: any;
+    operation?: any;
+}
+export declare function Code({ source, lang, dataTestId, }: Required<Omit<SourceCodeProps, 'externalSource' | 'withCopyButton'>>): JSX.Element;
+export declare function SourceCode({ lang, source, externalSource, withCopyButton, dataTestId, }: SourceCodeProps): JSX.Element;

package/SourceCode/SourceCode.js

@@ -0,0 +1,36 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SourceCode = exports.Code = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var highlight_1 = require("../utils/highlight");
+var SamplesPanelControls_1 = require("../SamplesPanelControls");
+var CopyButton_1 = require("../CopyButton");
+function Code(_a) {
+    var source = _a.source, lang = _a.lang, dataTestId = _a.dataTestId;
+    return ((0, jsx_runtime_1.jsx)(SamplesPanelControls_1.PreformattedCodeBlock, { dangerouslySetInnerHTML: { __html: (0, highlight_1.highlight)(source, lang) }, "data-cy": dataTestId }));
+}
+exports.Code = Code;
+function SourceCode(_a) {
+    var _b, _c;
+    var lang = _a.lang, source = _a.source, externalSource = _a.externalSource, withCopyButton = _a.withCopyButton, _d = _a.dataTestId, dataTestId = _d === void 0 ? 'source-code' : _d;
+    var _source = source || ((_c = (_b = externalSource === null || externalSource === void 0 ? void 0 : externalSource.sample) === null || _b === void 0 ? void 0 : _b.get) === null || _c === void 0 ? void 0 : _c.call(_b, externalSource)) || '';
+    if (withCopyButton) {
+        return ((0, jsx_runtime_1.jsx)(CopyButton_1.CopyButtonWrapper, __assign({ data: source }, { children: function (_a) {
+                var renderCopyButton = _a.renderCopyButton;
+                return ((0, jsx_runtime_1.jsxs)(SamplesPanelControls_1.SampleControlsWrap, { children: [(0, jsx_runtime_1.jsx)(SamplesPanelControls_1.SampleControls, __assign({ "data-cy": "copy-button" }, { children: renderCopyButton() })), (0, jsx_runtime_1.jsx)(Code, { lang: lang, source: _source, dataTestId: dataTestId })] }));
+            } })));
+    }
+    return (0, jsx_runtime_1.jsx)(Code, { dataTestId: dataTestId, lang: lang, source: _source });
+}
+exports.SourceCode = SourceCode;

package/SourceCode/index.d.ts

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