@redocly/theme 0.9.12-alpha.0 → 0.9.13

package/lib/Catalog/Filter.d.ts

@@ -1,7 +1,5 @@
 /// <reference types="react" />
 import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalog';
 export declare function Filter({ filter }: {
-    filter: ResolvedFilter & {
-        selectedOptions: any;
-    };
+    filter: ResolvedFilter;
 }): JSX.Element | null;

package/lib/Catalog/Filter.js

@@ -7,36 +7,19 @@ exports.Filter = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Checkbox_1 = require("../ui/Checkbox");
-// TODO: figure out how to fix this
-const DatePicker = 
-// eslint-disable-next-line @typescript-eslint/no-var-requires, import/order, import/no-extraneous-dependencies
-require('react-date-picker').default;
-// disabled type checking for selectedOptions
 function Filter({ filter }) {
-    var _a, _b;
+    var _a;
     if (!filter.parentUsed)
         return null;
     return (react_1.default.createElement(FilterGroup, { key: filter.property + filter.title },
-        react_1.default.createElement(FilterTitle, null,
-            filter.title,
-            ((_a = filter.selectedOptions) === null || _a === void 0 ? void 0 : _a.size) ? (react_1.default.createElement("a", { onClick: () => filter.selectOption('') }, " Clear ")) : null),
-        filter.type === 'select' ? (react_1.default.createElement(StyledSelect, { onChange: (e) => filter.selectOption(e.target.value), value: ((_b = filter.selectedOptions.values().next()) === null || _b === void 0 ? void 0 : _b.value) || '' },
+        react_1.default.createElement(FilterTitle, null, filter.title),
+        filter.type === 'select' ? (react_1.default.createElement(StyledSelect, { onChange: (e) => filter.selectOption(e.target.value), value: ((_a = filter.selectedOptions.values().next()) === null || _a === void 0 ? void 0 : _a.value) || '' },
             react_1.default.createElement("option", { key: "none", value: "" }, "All"),
             filter.filteredOptions.map((value) => (react_1.default.createElement("option", { key: value.value, value: value.value },
                 value.value,
                 " (",
                 value.count,
-                ")"))))) : filter.type === 'date-range' ? (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(DatePickerWrapper, null,
-                react_1.default.createElement("span", null, " From: "),
-                react_1.default.createElement(DatePicker, { closeCalendar: true, format: "y-MM-dd", dayPlaceholder: "DD", monthPlaceholder: "MM", yearPlaceholder: "YYYY", value: filter.selectedOptions.from ? new Date(filter.selectedOptions.from) : null, minDetail: "decade", maxDate: new Date(), onChange: (from) => {
-                        filter.selectOption(Object.assign(Object.assign({}, filter.selectedOptions), { from: formatDateWithNoTimeZone(from) }));
-                    } })),
-            react_1.default.createElement(DatePickerWrapper, null,
-                react_1.default.createElement("span", null, " To: "),
-                react_1.default.createElement(DatePicker, { closeCalendar: true, dayPlaceholder: "DD", monthPlaceholder: "MM", yearPlaceholder: "YYYY", format: "y-MM-dd", minDate: filter.selectedOptions.from ? new Date(filter.selectedOptions.from) : undefined, value: filter.selectedOptions.to ? new Date(filter.selectedOptions.to) : null, minDetail: "decade", onChange: (to) => {
-                        filter.selectOption(Object.assign(Object.assign({}, filter.selectedOptions), { to: formatDateWithNoTimeZone(to) }));
-                    } })))) : (filter.filteredOptions.map((value) => {
+                ")"))))) : (filter.filteredOptions.map((value) => {
             const id = 'filter--' + filter.property + '--' + slug(value.value);
             return (react_1.default.createElement(FilterValue, { key: id },
                 react_1.default.createElement(Checkbox_1.Checkbox, { type: "checkbox", id: id, checked: filter.selectedOptions.has(value.value), onChange: () => filter.toggleOption(value.value) }),
@@ -61,11 +44,6 @@ const FilterTitle = styled_components_1.default.h4 `
   font-weight: var(--font-weight-bold);
   margin: 0;
   margin-bottom: 16px;
-
-  > a {
-    font-size: 14px;
-    cursor: pointer;
-  }
 `;
 const FilterValue = styled_components_1.default.label `
   display: block;
@@ -100,66 +78,9 @@ const StyledSelect = styled_components_1.default.select `
   background-position: right 10px center;
   background-size: 1em;
   width: 100%;
-  padding-right: 25px;
 `;
 // TODO: import from portal
 function slug(str) {
     return str.replace(/\s/g, '-').toLowerCase();
 }
-const DatePickerWrapper = styled_components_1.default.div `
-  display: flex;
-  flex-direction: row;
-  margin-bottom: 5px;
-
-  align-items: center;
-  gap: 10px;
-
-  > span {
-    width: 50px;
-  }
-
-  .react-date-picker {
-    flex: 1;
-  }
-
-  .react-calendar__tile--now {
-    background: #cbf7f1;
-    color: black;
-
-    &:enabled:hover,
-    &:enabled:focus {
-      background: #b1efe7;
-      color: black;
-    }
-  }
-
-  .react-date-picker__inputGroup__input:invalid {
-    background: rgb(255 125 0 / 10%);
-  }
-
-  .react-date-picker__button {
-    padding: 4px 4px;
-    svg {
-      width: 12px;
-    }
-  }
-
-  .react-date-picker__wrapper {
-    border: 1px solid rgba(0, 0, 0, 0.23);
-    border-radius: var(--border-radius);
-    padding: var(--input-padding);
-  }
-
-  .react-date-picker__inputGroup__input {
-    width: 20px;
-  }
-`;
-function padZero(num) {
-    return num < 10 ? '0' + num : num;
-}
-function formatDateWithNoTimeZone(date) {
-    if (!date)
-        return date;
-    return `${date.getFullYear()}-${padZero(date.getMonth() + 1)}-${padZero(date.getDate())}`;
-}
 //# sourceMappingURL=Filter.js.map

package/lib/ReferenceDocs/DevOnboardingTryItSecurity.js

@@ -31,11 +31,13 @@ const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Button_1 = require("../Button/Button");
 const usePageData_1 = require("../mocks/hooks/usePageData");
+const usePreloadHistory_1 = require("../mocks/usePreloadHistory");
 const Dropdown_1 = require("./Dropdown");
 function DevOnboardingTryItSecurity(props) {
     const apiId = props.apiId;
     // @ts-ignore
     const { userData } = (0, usePageData_1.usePageData)('userData') || {};
+    const history = (0, usePreloadHistory_1.usePreloadHistory)();
     // TODO: handle error
     const [_error, setError] = React.useState();
     const [apps, setApps] = React.useState();
@@ -45,6 +47,7 @@ function DevOnboardingTryItSecurity(props) {
     const [selectedAppSecret, setSelectedAppSecret] = React.useState();
     const [acceptValueUpdate, setAcceptValueUpdate] = React.useState(true);
     const initialRender = React.useRef(true);
+    const hasApiAccess = !loading && !!(apps === null || apps === void 0 ? void 0 : apps.length);
     React.useEffect(() => {
         if (!props.value && initialRender.current)
             return;
@@ -110,7 +113,11 @@ function DevOnboardingTryItSecurity(props) {
                 .finally(() => setAppLoading(false));
         });
     };
-    const placeholder = loading ? 'Loading your apps...' : undefined;
+    const placeholder = loading
+        ? 'Loading your apps...'
+        : hasApiAccess
+            ? undefined
+            : 'You do not have access to this API';
     return (React.createElement(React.Fragment, null,
         React.createElement(FormLabel, { htmlFor: "server" }, "Select app: "),
         React.createElement(FormControl, null,
@@ -118,7 +125,14 @@ function DevOnboardingTryItSecurity(props) {
                     setAppId(value);
                     loadAppCredentials(value);
                 } }),
-            React.createElement(UseKeyButton, { disabled: !selectedAppSecret || appLoading, color: "secondary", onClick: () => selectedAppSecret && props.onChange(selectedAppSecret) }, appLoading ? 'Loading...' : 'Use key'))));
+            React.createElement(UseKeyButton, { disabled: (!selectedAppSecret && hasApiAccess) || appLoading, color: "secondary", onClick: () => {
+                    if (selectedAppSecret) {
+                        props.onChange(selectedAppSecret);
+                    }
+                    else if (!hasApiAccess) {
+                        history.push('/apps/?createApp&apiId=' + apiId);
+                    }
+                } }, appLoading ? 'Loading...' : hasApiAccess ? 'Use key' : 'Request access'))));
 }
 exports.DevOnboardingTryItSecurity = DevOnboardingTryItSecurity;
 const TryItDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown) `
@@ -156,7 +170,7 @@ const FormLabel = styled_components_1.default.label `
     `}
 `;
 const UseKeyButton = (0, styled_components_1.default)(Button_1.Button) `
-  width: 100px;
+  min-width: 100px;
   align-self: flex-end;
   margin-top: 10px;
   margin-right: 0;

package/lib/Sidebar/FooterWrapper.d.ts

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

package/lib/Sidebar/FooterWrapper.js

@@ -5,9 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FooterWrapper = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.FooterWrapper = styled_components_1.default.div.attrs(() => ({
-    'data-component-name': 'Sidebar/FooterWrapper',
-})) `
+exports.FooterWrapper = styled_components_1.default.div `
+  ${({ collapsed }) => collapsed &&
+    `
+        position: sticky;
+        bottom: 0;
+    `}
   margin: var(--sidebar-offset-top) 0 var(--sidebar-spacing-unit) var(--sidebar-offset-left);
   padding-top: var(--sidebar-spacing-unit);
   padding-right: var(--sidebar-spacing-unit);

package/lib/Sidebar/SidebarLayout.d.ts

@@ -1,14 +1,17 @@
 import React from 'react';
 interface SidebarLayoutProps {
-    versions: React.ReactNode;
-    menu: React.ReactNode;
+    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;
 }
-export declare function SidebarLayout({ versions, menu, footer, header, growContent, }: SidebarLayoutProps): JSX.Element | null;
+export declare function SidebarLayout({ versions, menu, footer, header, growContent, collapsed, onToggleMenu, }: SidebarLayoutProps): JSX.Element | null;
 export {};

package/lib/Sidebar/SidebarLayout.js

@@ -1,10 +1,33 @@
 "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 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Sidebar_1 = require("../Sidebar/Sidebar");
 const FooterWrapper_1 = require("../Sidebar/FooterWrapper");
@@ -15,23 +38,48 @@ const MenuContainer_1 = require("../Sidebar/MenuContainer");
 const SidebarSearch_1 = require("../Search/SidebarSearch");
 const useThemeConfig_1 = require("../hooks/useThemeConfig");
 const MobileSidebarIcon_1 = require("./MobileSidebarIcon");
-function SidebarLayout({ versions, menu, footer, header, growContent, }) {
+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, }) {
     const [isOpen, setIsOpen] = (0, useMobileMenu_1.useMobileMenu)();
-    const toggleMenu = () => setIsOpen(!isOpen);
+    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 { search, sidebar } = (0, useThemeConfig_1.useThemeConfig)();
     if (sidebar === null || sidebar === void 0 ? void 0 : sidebar.hide) {
         return null;
     }
-    return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/SidebarLayout" },
+    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" },
         react_1.default.createElement(MobileSidebarButton_1.MobileSidebarButton, { opened: isOpen, onClick: toggleMenu },
             react_1.default.createElement(MobileSidebarIcon_1.MobileSidebarIcon, null)),
         !(search === null || search === void 0 ? void 0 : search.hide) && (search === null || search === void 0 ? void 0 : search.placement) === 'sidebar' ? react_1.default.createElement(SidebarSearch_1.SidebarSearch, null) : null,
         react_1.default.createElement(Sidebar_1.Sidebar, { animate: true, opened: isOpen },
             header ? react_1.default.createElement(HeaderWrapper_1.HeaderWrapper, null, header) : null,
-            versions,
+            versions ? react_1.default.createElement(react_1.default.Fragment, null, versions) : null,
             react_1.default.createElement(MenuContainer_1.MenuContainer, { growContent: growContent }, menu),
-            footer ? react_1.default.createElement(FooterWrapper_1.FooterWrapper, null, footer) : null)));
+            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 ``;
+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/Sidebar/index.d.ts

@@ -13,6 +13,7 @@ export * from '../Sidebar/MenuItemLabel';
 export * from '../Sidebar/MenuLink';
 export * from '../Sidebar/MenuLinkItem';
 export * from '../Sidebar/MobileSidebarButton';
+export * from '../Sidebar/MobileSidebarIcon';
 export * from '../Sidebar/Separator';
 export * from '../Sidebar/SeparatorItem';
 export * from '../Sidebar/Sidebar';

package/lib/Sidebar/index.js

@@ -29,6 +29,7 @@ __exportStar(require("../Sidebar/MenuItemLabel"), exports);
 __exportStar(require("../Sidebar/MenuLink"), exports);
 __exportStar(require("../Sidebar/MenuLinkItem"), exports);
 __exportStar(require("../Sidebar/MobileSidebarButton"), exports);
+__exportStar(require("../Sidebar/MobileSidebarIcon"), exports);
 __exportStar(require("../Sidebar/Separator"), exports);
 __exportStar(require("../Sidebar/SeparatorItem"), exports);
 __exportStar(require("../Sidebar/Sidebar"), exports);

package/lib/SidebarActions/ChangeViewButton.d.ts

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

package/lib/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("./SidebarActions");
+const styled_1 = require("./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/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/SidebarActions/CollapseSidebarButton.js

@@ -0,0 +1,13 @@
+"use strict";
+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_1 = require("./styled");
+const CollapseSidebarButton = ({ initialValue, onClick, }) => {
+    return (react_1.default.createElement(styled_1.StyledToggleRightPanelButton, { title: initialValue ? 'Show sidebar' : 'Hide sidebar', onClick: onClick }, initialValue ? react_1.default.createElement(styled_1.HideLeftPanelSVG, null) : react_1.default.createElement(styled_1.ShowLeftPanelSVG, null)));
+};
+exports.CollapseSidebarButton = CollapseSidebarButton;
+//# sourceMappingURL=CollapseSidebarButton.js.map

package/lib/SidebarActions/SidebarActions.d.ts

@@ -0,0 +1,20 @@
+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;
+}
+export declare const SidebarActions: ({ showChangeLayoutButton, showRightPanelToggle, layout, initialShowRightPanelToggle, hideCollapseSidebarButton, collapsedSidebar, isOpenapiDocs, onChangeRightPanelViewClick, onChangeViewClick, onChangeCollapseSidebarClick, requestAccessButton, }: SidebarActionsProps) => JSX.Element;
+export {};

package/lib/SidebarActions/SidebarActions.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarActions = exports.LayoutVariant = void 0;
+const react_1 = __importDefault(require("react"));
+const ChangeViewButton_1 = require("./ChangeViewButton");
+const ToggleRightPanelButton_1 = require("./ToggleRightPanelButton");
+const CollapseSidebarButton_1 = require("./CollapseSidebarButton");
+const styled_1 = require("./styled");
+var LayoutVariant;
+(function (LayoutVariant) {
+    LayoutVariant["STACKED"] = "stacked";
+    LayoutVariant["THREE_PANEL"] = "three-panel";
+})(LayoutVariant = exports.LayoutVariant || (exports.LayoutVariant = {}));
+const SidebarActions = ({ showChangeLayoutButton, showRightPanelToggle, layout, initialShowRightPanelToggle, hideCollapseSidebarButton = false, collapsedSidebar, isOpenapiDocs, onChangeRightPanelViewClick, onChangeViewClick, onChangeCollapseSidebarClick, requestAccessButton, }) => {
+    return (react_1.default.createElement(styled_1.ControlsWrap, { isOpenapiDocs: isOpenapiDocs, isCollapsed: collapsedSidebar },
+        isOpenapiDocs && (react_1.default.createElement(styled_1.ControlsWrapChangeLayoutButtons, { isCollapsed: collapsedSidebar },
+            initialShowRightPanelToggle && (react_1.default.createElement(ToggleRightPanelButton_1.ToggleRightPanelButton, { showRightPanelToggle: showRightPanelToggle, onClick: onChangeRightPanelViewClick })),
+            showChangeLayoutButton && showRightPanelToggle && (react_1.default.createElement(ChangeViewButton_1.ChangeViewButton, { layout: layout, onClick: onChangeViewClick })))),
+        !collapsedSidebar && requestAccessButton,
+        !hideCollapseSidebarButton && (react_1.default.createElement(CollapseSidebarButton_1.CollapseSidebarButton, { initialValue: collapsedSidebar, onClick: onChangeCollapseSidebarClick }))));
+};
+exports.SidebarActions = SidebarActions;
+//# sourceMappingURL=SidebarActions.js.map

package/lib/SidebarActions/ToggleRightPanelButton.d.ts

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

package/lib/SidebarActions/ToggleRightPanelButton.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToggleRightPanelButton = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_1 = require("./styled");
+const ToggleRightPanelButton = ({ showRightPanelToggle, onClick, }) => {
+    return (react_1.default.createElement(styled_1.StyledToggleRightPanelButton, { title: showRightPanelToggle ? 'Hide samples' : 'Show samples', onClick: onClick }, showRightPanelToggle ? react_1.default.createElement(styled_1.HideRightPanelSVG, null) : react_1.default.createElement(styled_1.ShowRightPanelSVG, null)));
+};
+exports.ToggleRightPanelButton = ToggleRightPanelButton;
+//# sourceMappingURL=ToggleRightPanelButton.js.map

package/lib/SidebarActions/index.d.ts

@@ -0,0 +1 @@
+export { SidebarActions, LayoutVariant } from './SidebarActions';

package/lib/SidebarActions/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayoutVariant = exports.SidebarActions = void 0;
+var SidebarActions_1 = require("./SidebarActions");
+Object.defineProperty(exports, "SidebarActions", { enumerable: true, get: function () { return SidebarActions_1.SidebarActions; } });
+Object.defineProperty(exports, "LayoutVariant", { enumerable: true, get: function () { return SidebarActions_1.LayoutVariant; } });
+//# sourceMappingURL=index.js.map

package/lib/SidebarActions/styled.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export declare const ShowLeftPanelSVG: import("styled-components").StyledComponent<() => JSX.Element, any, {}, never>;
+export declare const HideLeftPanelSVG: import("styled-components").StyledComponent<() => JSX.Element, any, {}, never>;
+export declare const StyledToggleRightPanelButton: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const HideRightPanelSVG: import("styled-components").StyledComponent<() => JSX.Element, any, {}, never>;
+export declare const ShowRightPanelSVG: import("styled-components").StyledComponent<() => JSX.Element, any, {}, never>;
+export declare const StyledChangeViewButton: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const ChangeViewSvgRow: import("styled-components").StyledComponent<() => JSX.Element, any, {}, never>;
+export declare const ChangeViewSvgColumn: import("styled-components").StyledComponent<() => JSX.Element, any, {}, never>;
+export declare const ControlsWrap: import("styled-components").StyledComponent<"span", any, {
+    iconCount?: number | undefined;
+    isCollapsed?: boolean | undefined;
+    isOpenapiDocs?: boolean | undefined;
+}, never>;
+export declare const ControlsWrapChangeLayoutButtons: import("styled-components").StyledComponent<"span", any, {
+    isCollapsed?: boolean | undefined;
+}, never>;

package/lib/SidebarActions/styled.js

@@ -0,0 +1,124 @@
+"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.ControlsWrapChangeLayoutButtons = exports.ControlsWrap = exports.ChangeViewSvgColumn = exports.ChangeViewSvgRow = exports.StyledChangeViewButton = exports.ShowRightPanelSVG = exports.HideRightPanelSVG = exports.StyledToggleRightPanelButton = exports.HideLeftPanelSVG = exports.ShowLeftPanelSVG = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+exports.ShowLeftPanelSVG = (0, styled_components_1.default)(() => (react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    react_1.default.createElement("path", { d: "M4.375 7L8.75 2.625L9.3625 3.2375L5.6 7L9.3625 10.7625L8.75 11.375L4.375 7Z", fill: "var(--color-emphasis-400)" })))) `
+  position: absolute;
+`;
+exports.HideLeftPanelSVG = (0, styled_components_1.default)(() => (react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    react_1.default.createElement("path", { d: "M9.62495 7L5.24995 11.375L4.63745 10.7625L8.39995 7L4.63745 3.2375L5.24995 2.625L9.62495 7Z", fill: "var(--color-emphasis-400)" })))) `
+  position: absolute;
+`;
+exports.StyledToggleRightPanelButton = styled_components_1.default.a `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  z-index: 1;
+  /* Rectangle 201 */
+  border-radius: var(--border-radius);
+  padding: var(--spacing-unit);
+
+  &:hover {
+    background-color: var(--sidebar-item-active-background-color);
+  }
+`;
+exports.HideRightPanelSVG = (0, styled_components_1.default)(() => (react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    react_1.default.createElement("path", { d: "M14 2H2C1.73478 2 1.48043 2.10536 1.29289 2.29289C1.10536 2.48043 1 2.73478 1 3V13C1 13.2652 1.10536 13.5196 1.29289 13.7071C1.48043 13.8946 1.73478 14 2 14H14C14.2652 14 14.5196 13.8946 14.7071 13.7071C14.8946 13.5196 15 13.2652 15 13V3C15 2.73478 14.8946 2.48043 14.7071 2.29289C14.5196 2.10536 14.2652 2 14 2V2ZM2 3H10V13H2V3Z", fill: "var(--color-emphasis-400)" })))) `
+  position: absolute;
+`;
+exports.ShowRightPanelSVG = (0, styled_components_1.default)(() => (react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    react_1.default.createElement("path", { d: "M14 2H2C1.73478 2 1.48043 2.10536 1.29289 2.29289C1.10536 2.48043 1 2.73478 1 3V13C1 13.2652 1.10536 13.5196 1.29289 13.7071C1.48043 13.8946 1.73478 14 2 14H14C14.2652 14 14.5196 13.8946 14.7071 13.7071C14.8946 13.5196 15 13.2652 15 13V3C15 2.73478 14.8946 2.48043 14.7071 2.29289C14.5196 2.10536 14.2652 2 14 2V2ZM2 3H10V13H2V3ZM14 13H11V3H14V13Z", fill: "var(--color-emphasis-400)" })))) `
+  position: absolute;
+`;
+exports.StyledChangeViewButton = styled_components_1.default.a `
+  display: flex;
+  position: relative;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  border-radius: var(--border-radius);
+  z-index: 1;
+  /* Rectangle 201 */
+  padding: var(--spacing-unit);
+
+  &:hover {
+    background-color: var(--sidebar-item-active-background-color);
+  }
+`;
+exports.ChangeViewSvgRow = (0, styled_components_1.default)(() => (react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    react_1.default.createElement("path", { d: "M1.75 2.625L12.25 2.625L12.25 1.75L1.75 1.75L1.75 2.625Z", fill: "var(--color-emphasis-400)" }),
+    react_1.default.createElement("path", { d: "M1.75 5.6875L12.25 5.6875L12.25 4.8125L1.75 4.8125L1.75 5.6875Z", fill: "var(--color-emphasis-400)" }),
+    react_1.default.createElement("path", { d: "M2.625 11.375L2.625 8.75L11.375 8.75L11.375 11.375L2.625 11.375ZM2.625 12.25L11.375 12.25C11.6071 12.25 11.8296 12.1578 11.9937 11.9937C12.1578 11.8296 12.25 11.6071 12.25 11.375L12.25 8.75C12.25 8.51794 12.1578 8.29538 11.9937 8.13128C11.8296 7.96719 11.6071 7.875 11.375 7.875L2.625 7.875C2.39294 7.875 2.17038 7.96719 2.00628 8.13128C1.84219 8.29538 1.75 8.51793 1.75 8.75L1.75 11.375C1.75 11.6071 1.84219 11.8296 2.00628 11.9937C2.17038 12.1578 2.39294 12.25 2.625 12.25Z", fill: "var(--color-emphasis-400)" })))) `
+  position: absolute;
+`;
+exports.ChangeViewSvgColumn = (0, styled_components_1.default)(() => (react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    react_1.default.createElement("path", { d: "M2.625 12.25L2.625 1.75L1.75 1.75L1.75 12.25L2.625 12.25Z", fill: "var(--color-emphasis-400)" }),
+    react_1.default.createElement("path", { d: "M5.6875 12.25L5.6875 1.75L4.8125 1.75L4.8125 12.25L5.6875 12.25Z", fill: "var(--color-emphasis-400)" }),
+    react_1.default.createElement("path", { d: "M11.375 11.375L8.75 11.375L8.75 2.625L11.375 2.625L11.375 11.375ZM12.25 11.375L12.25 2.625C12.25 2.39294 12.1578 2.17038 11.9937 2.00628C11.8296 1.84219 11.6071 1.75 11.375 1.75L8.75 1.75C8.51794 1.75 8.29538 1.84219 8.13128 2.00628C7.96719 2.17038 7.875 2.39294 7.875 2.625L7.875 11.375C7.875 11.6071 7.96719 11.8296 8.13128 11.9937C8.29538 12.1578 8.51794 12.25 8.75 12.25L11.375 12.25C11.6071 12.25 11.8296 12.1578 11.9937 11.9937C12.1578 11.8296 12.25 11.6071 12.25 11.375Z", fill: "var(--color-emphasis-400)" })))) `
+  position: absolute;
+`;
+exports.ControlsWrap = styled_components_1.default.span `
+  display: none;
+  justify-content: ${({ isOpenapiDocs }) => (isOpenapiDocs ? 'space-between' : 'flex-end')};
+  bottom: 0;
+  flex-direction: row;
+  gap: var(--spacing-unit);
+  align-items: center;
+  margin-left: '15px';
+  z-index: 2;
+  background: var(--sidebar-background-color);
+
+  ${({ isCollapsed }) => isCollapsed &&
+    (0, styled_components_1.css) `
+      flex-direction: column;
+      gap: 10px;
+      padding-bottom: 10px;
+    `}
+
+  ${({ theme }) => (0, styled_components_1.css) `
+    ${theme.mediaQueries[theme.showAtBreakpoint.sidebar]} {
+      display: flex;
+    }
+
+    ${theme.mediaQueries.print} {
+      display: none;
+    }
+  `}
+`;
+exports.ControlsWrapChangeLayoutButtons = styled_components_1.default.span `
+  display: flex;
+  bottom: 0;
+  flex-direction: ${({ isCollapsed }) => (isCollapsed ? 'column-reverse' : 'row')};
+  gap: ${({ isCollapsed }) => (isCollapsed ? '10px' : 'var(--spacing-unit)')};
+  align-items: center;
+`;
+//# sourceMappingURL=styled.js.map

package/lib/globalStyle.js

@@ -1273,8 +1273,7 @@ const apiReferenceDocs = (0, styled_components_1.css) `
   /**
   * @tokens API Reference Schemas Layout
   */
-
-  --layout-controls-top-offset: 20px; // @presenter Spacing
+  --layout-controls-margin: 20px; // @presenter Spacing
   --layout-controls-height: 36px; // @presenter Spacing
   --layout-controls-width: 36px; // @presenter Spacing
 

package/lib/index.d.ts

@@ -24,3 +24,4 @@ export * from './config';
 export * from './Pages';
 export * from './Markdown';
 export * from './ReferenceDocs';
+export * from './SidebarActions';