@redocly/theme 0.57.0-next.2 → 0.57.0-next.3

package/lib/components/CodeBlock/CodeBlockControls.js

@@ -20,7 +20,8 @@ const CodeBlockDropdown_1 = require("../../components/CodeBlock/CodeBlockDropdow
 function CodeBlockControls({ children, className, title, controls, tabs, dropdown, }) {
     var _a, _b, _c, _d, _e;
     const { codeSnippet } = (0, hooks_1.useThemeConfig)();
-    const { useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { useTelemetry, useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
     const telemetry = useTelemetry();
     const controlsType = (codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.elementFormat) || 'icon';
     const { copy, expand, collapse, select, deselect, report } = controls || {
@@ -37,15 +38,15 @@ function CodeBlockControls({ children, className, title, controls, tabs, dropdow
         tabs && react_1.default.createElement(CodeBlockTabs_1.CodeBlockTabs, { tabs: tabs }),
         react_1.default.createElement(ControlsWrapper, null,
             dropdown && react_1.default.createElement(CodeBlockDropdown_1.CodeBlockDropdown, Object.assign({}, dropdown)),
-            report && !((_a = report === null || report === void 0 ? void 0 : report.props) === null || _a === void 0 ? void 0 : _a.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tooltipTranslationKey: "codeSnippet.report.tooltipText", placement: "top" },
+            report && !((_a = report === null || report === void 0 ? void 0 : report.props) === null || _a === void 0 ? void 0 : _a.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tip: translate('codeSnippet.report.tooltipText', 'Report a problem'), placement: "top" },
                 react_1.default.createElement(ControlButton, Object.assign({ variant: "text", size: "small", "data-testid": "report-button", icon: controlsType === 'icon' ? react_1.default.createElement(WarningSquareIcon_1.WarningSquareIcon, { size: "18px" }) : undefined }, report.props), controlsType != 'icon' && (((_b = report.props) === null || _b === void 0 ? void 0 : _b.buttonText) || 'Report')))) : null,
-            expand && !((_c = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.expand) === null || _c === void 0 ? void 0 : _c.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tooltipTranslationKey: "codeSnippet.expand.tooltipText", placement: "top" },
+            expand && !((_c = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.expand) === null || _c === void 0 ? void 0 : _c.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tip: translate('codeSnippet.expand.tooltipText', 'Expand all'), placement: "top" },
                 react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "expand-all", icon: controlsType === 'icon' ? react_1.default.createElement(MaximizeIcon_1.MaximizeIcon, null) : undefined, onClick: expand === null || expand === void 0 ? void 0 : expand.onClick }, controlsType !== 'icon' && ((expand === null || expand === void 0 ? void 0 : expand.label) || 'Expand all')))) : null,
-            collapse && !((_d = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.collapse) === null || _d === void 0 ? void 0 : _d.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tooltipTranslationKey: "codeSnippet.collapse.tooltipText", placement: "top" },
+            collapse && !((_d = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.collapse) === null || _d === void 0 ? void 0 : _d.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tip: translate('codeSnippet.collapse.tooltipText', 'Collapse all'), placement: "top" },
                 react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "collapse-all", icon: controlsType === 'icon' ? react_1.default.createElement(MinimizeIcon_1.MinimizeIcon, null) : undefined, onClick: collapse === null || collapse === void 0 ? void 0 : collapse.onClick }, controlsType !== 'icon' && ((expand === null || expand === void 0 ? void 0 : expand.label) || 'Collapse all')))) : null,
             select ? (react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "select-all", icon: controlsType === 'icon' ? react_1.default.createElement(SelectIcon_1.SelectIcon, null) : undefined, onClick: select === null || select === void 0 ? void 0 : select.onClick }, controlsType !== 'icon' && (select === null || select === void 0 ? void 0 : select.label) ? select.label : 'Select all')) : null,
             deselect ? (react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "clear-all", icon: controlsType === 'icon' ? react_1.default.createElement(DeselectIcon_1.DeselectIcon, null) : undefined, onClick: deselect === null || deselect === void 0 ? void 0 : deselect.onClick }, controlsType !== 'icon' && (deselect === null || deselect === void 0 ? void 0 : deselect.label) ? deselect.label : 'Clear all')) : null,
-            copy && !((_e = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.copy) === null || _e === void 0 ? void 0 : _e.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tooltipTranslationKey: "codeSnippet.copy.tooltipText", placement: "top" },
+            copy && !((_e = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.copy) === null || _e === void 0 ? void 0 : _e.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tip: translate('codeSnippet.copy.tooltipText', 'Copy to clipboard'), placement: "top" },
                 react_1.default.createElement(StyledCopyButton, { data: copy.data, "data-source": copy.dataSource, "data-hash": copy.dataHash, type: controlsType, toasterPlacement: copy.toasterPlacement, toasterDuration: copy.toasterDuration, buttonText: copy.label, onCopyClick: () => {
                         var _a;
                         // If there already is a click handler, events should be handled there, cause they pass additional data

package/lib/components/Tooltip/TooltipWrapper.d.ts

@@ -2,11 +2,11 @@ import type { JSX, ReactElement } from 'react';
 import type { TooltipProps } from '../../components/Tooltip/Tooltip';
 export type TooltipWrapperProps = {
     children: ReactElement;
-    tooltipTranslationKey: string;
+    tip: string;
     placement?: TooltipProps['placement'];
     width?: string;
     className?: string;
     showOnHover?: boolean;
     disabled?: boolean;
 };
-export declare function TooltipWrapper({ children, tooltipTranslationKey, placement, width, className, showOnHover, disabled, }: TooltipWrapperProps): JSX.Element;
+export declare function TooltipWrapper({ children, tip, placement, width, className, showOnHover, disabled, }: TooltipWrapperProps): JSX.Element;

package/lib/components/Tooltip/TooltipWrapper.js

@@ -8,10 +8,8 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const react_1 = __importDefault(require("react"));
 const hooks_1 = require("../../core/hooks");
 const Tooltip_1 = require("../../components/Tooltip/Tooltip");
-function TooltipWrapper({ children, tooltipTranslationKey, placement = 'top', width = 'max-content', className = '', showOnHover = true, disabled = false, }) {
-    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+function TooltipWrapper({ children, tip, placement = 'top', width = 'max-content', className = '', showOnHover = true, disabled = false, }) {
     const tooltip = (0, hooks_1.useControl)();
-    const { translate } = useTranslate();
     const handleMouseEnter = () => {
         if (showOnHover && !disabled) {
             tooltip.handleOpen();
@@ -27,7 +25,7 @@ function TooltipWrapper({ children, tooltipTranslationKey, placement = 'top', wi
             tooltip.handleClose();
         }
     };
-    return (react_1.default.createElement(Tooltip_1.Tooltip, { className: className, tip: translate(tooltipTranslationKey), isOpen: tooltip.isOpened, placement: placement, width: width },
+    return (react_1.default.createElement(Tooltip_1.Tooltip, { className: className, tip: tip, isOpen: tooltip.isOpened, placement: placement, width: width },
         react_1.default.createElement(TooltipEventWrapper, { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick }, children)));
 }
 const TooltipEventWrapper = styled_components_1.default.div `

package/lib/icons/PlayIcon/PlayIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const PlayIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string;
+    size?: string;
+    className?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/PlayIcon/PlayIcon.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlayIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M3.0625 12.25C2.94647 12.25 2.83519 12.2039 2.75314 12.1219C2.67109 12.0398 2.625 11.9286 2.625 11.8125V2.18753C2.62499 2.1115 2.6448 2.03678 2.68247 1.97074C2.72014 1.9047 2.77437 1.84961 2.83981 1.81092C2.90526 1.77222 2.97965 1.75124 3.05567 1.75005C3.13169 1.74887 3.20671 1.76751 3.27333 1.80415L12.0233 6.61665C12.092 6.6544 12.1492 6.70989 12.1891 6.77733C12.229 6.84476 12.25 6.92167 12.25 7.00001C12.25 7.07835 12.229 7.15526 12.1891 7.22269C12.1492 7.29013 12.092 7.34562 12.0233 7.38337L3.27333 12.1959C3.20874 12.2314 3.13622 12.25 3.0625 12.25ZM3.5 2.9273V11.0726L10.9046 7.00003L3.5 2.9273Z" })));
+exports.PlayIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/PlayIcon/PlayIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=PlayIcon.js.map

package/lib/icons/WorkflowHierarchyIcon/WorkflowHierarchyIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const WorkflowHierarchyIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string;
+    size?: string;
+    className?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/WorkflowHierarchyIcon/WorkflowHierarchyIcon.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WorkflowHierarchyIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.5 6.5H13.5C13.7651 6.4997 14.0193 6.39424 14.2068 6.20677C14.3942 6.0193 14.4997 5.76512 14.5 5.5V2.5C14.4997 2.23488 14.3942 1.9807 14.2068 1.79323C14.0193 1.60576 13.7651 1.5003 13.5 1.5H2.5C2.23488 1.5003 1.9807 1.60576 1.79323 1.79323C1.60576 1.9807 1.5003 2.23488 1.5 2.5V5.5C1.5003 5.76512 1.60576 6.0193 1.79323 6.20677C1.9807 6.39424 2.23488 6.4997 2.5 6.5H3.5H4.5ZM13.5 2.5H2.5V5.5H13.5V2.5Z" }),
+    react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.5 9.5H8.5C8.23488 9.5003 7.9807 9.60576 7.79323 9.79323C7.60576 9.9807 7.5003 10.2349 7.5 10.5V11.5H4.5V9.29295V8.5V6.5H3.5V9.29295V11.5C3.5003 11.7651 3.60576 12.0193 3.79323 12.2068C3.9807 12.3942 4.23488 12.4997 4.5 12.5H7.5V13.5C7.5003 13.7651 7.60576 14.0193 7.79323 14.2068C7.9807 14.3942 8.23488 14.4997 8.5 14.5H13.5C13.7651 14.4997 14.0193 14.3942 14.2068 14.2068C14.3942 14.0193 14.4997 13.7651 14.5 13.5V10.5C14.4997 10.2349 14.3942 9.9807 14.2068 9.79323C14.0193 9.60576 13.7651 9.5003 13.5 9.5ZM8.5 10.5V13.5H13.5V10.5H8.5Z" })));
+exports.WorkflowHierarchyIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/WorkflowHierarchyIcon/WorkflowHierarchyIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=WorkflowHierarchyIcon.js.map

package/lib/index.d.ts

@@ -238,6 +238,7 @@ export * from './icons/CharacterIcon/CharacterIcon';
 export * from './icons/FileIcon/FileIcon';
 export * from './icons/ExportIcon/ExportIcon';
 export * from './icons/CertificateIcon/CertificateIcon';
+export * from './icons/PlayIcon/PlayIcon';
 export * from './icons/PlaylistIcon/PlaylistIcon';
 export * from './icons/WorkflowAutomationIcon/WorkflowAutomationIcon';
 export * from './icons/TaskViewIcon/TaskViewIcon';
@@ -254,6 +255,7 @@ export * from './icons/RabbitMQIcon/RabbitMQIcon';
 export * from './icons/CurveAutoColonIcon/CurveAutoColonIcon';
 export * from './icons/AiStarsIcon/AiStarsIcon';
 export * from './icons/AiStarsGradientIcon/AiStarsGradientIcon';
+export * from './icons/WorkflowHierarchyIcon/WorkflowHierarchyIcon';
 export * from './icons/GenericIcon/GenericIcon';
 export * from './layouts/RootLayout';
 export * from './layouts/PageLayout';

package/lib/index.js

@@ -291,6 +291,7 @@ __exportStar(require("./icons/CharacterIcon/CharacterIcon"), exports);
 __exportStar(require("./icons/FileIcon/FileIcon"), exports);
 __exportStar(require("./icons/ExportIcon/ExportIcon"), exports);
 __exportStar(require("./icons/CertificateIcon/CertificateIcon"), exports);
+__exportStar(require("./icons/PlayIcon/PlayIcon"), exports);
 __exportStar(require("./icons/PlaylistIcon/PlaylistIcon"), exports);
 __exportStar(require("./icons/WorkflowAutomationIcon/WorkflowAutomationIcon"), exports);
 __exportStar(require("./icons/TaskViewIcon/TaskViewIcon"), exports);
@@ -307,6 +308,7 @@ __exportStar(require("./icons/RabbitMQIcon/RabbitMQIcon"), exports);
 __exportStar(require("./icons/CurveAutoColonIcon/CurveAutoColonIcon"), exports);
 __exportStar(require("./icons/AiStarsIcon/AiStarsIcon"), exports);
 __exportStar(require("./icons/AiStarsGradientIcon/AiStarsGradientIcon"), exports);
+__exportStar(require("./icons/WorkflowHierarchyIcon/WorkflowHierarchyIcon"), exports);
 __exportStar(require("./icons/GenericIcon/GenericIcon"), exports);
 /* Layouts */
 __exportStar(require("./layouts/RootLayout"), exports);

package/lib/layouts/ThreePanelLayout.js

@@ -54,14 +54,11 @@ const Wrapper = styled_components_1.default.div `
   margin: 0 auto;
   width: 100%;
 
-  ${({ layout = config_1.LayoutVariant.THREE_PANEL, collapsedSidebar }) => {
+  ${({ layout = config_1.LayoutVariant.THREE_PANEL }) => {
     return (0, styled_components_1.css) `
       max-width: ${layout === config_1.LayoutVariant.THREE_PANEL ? '100%' : ''};
 
       @media screen and (min-width: ${media_css_1.breakpoints.small}) {
-        width: ${collapsedSidebar
-        ? `var(--layout-${layout}-small-max-width)`
-        : 'calc(100% - var(--sidebar-width))'};
         max-width: var(--layout-${layout}-small-max-width);
       }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.57.0-next.2",
+  "version": "0.57.0-next.3",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -86,8 +86,8 @@
     "nprogress": "0.2.0",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.28.0",
-    "@redocly/realm-asyncapi-sdk": "0.3.0-next.0"
+    "@redocly/realm-asyncapi-sdk": "0.3.0-next.0",
+    "@redocly/config": "0.28.0"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/CodeBlock/CodeBlockControls.tsx

@@ -66,7 +66,8 @@ export function CodeBlockControls({
   dropdown,
 }: CodeBlockControlsProps): JSX.Element | null {
   const { codeSnippet } = useThemeConfig();
-  const { useTelemetry } = useThemeHooks();
+  const { useTelemetry, useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
   const telemetry = useTelemetry();
   const controlsType = (codeSnippet?.elementFormat as ControlItemType) || 'icon';
   const { copy, expand, collapse, select, deselect, report } = controls || {
@@ -87,7 +88,10 @@ export function CodeBlockControls({
       <ControlsWrapper>
         {dropdown && <CodeBlockDropdown {...dropdown} />}
         {report && !report?.props?.hide ? (
-          <TooltipWrapper tooltipTranslationKey="codeSnippet.report.tooltipText" placement="top">
+          <TooltipWrapper
+            tip={translate('codeSnippet.report.tooltipText', 'Report a problem')}
+            placement="top"
+          >
             <ControlButton
               variant="text"
               size="small"
@@ -101,7 +105,10 @@ export function CodeBlockControls({
         ) : null}
 
         {expand && !codeSnippet?.expand?.hide ? (
-          <TooltipWrapper tooltipTranslationKey="codeSnippet.expand.tooltipText" placement="top">
+          <TooltipWrapper
+            tip={translate('codeSnippet.expand.tooltipText', 'Expand all')}
+            placement="top"
+          >
             <ControlButton
               variant="text"
               size="small"
@@ -115,7 +122,10 @@ export function CodeBlockControls({
         ) : null}
 
         {collapse && !codeSnippet?.collapse?.hide ? (
-          <TooltipWrapper tooltipTranslationKey="codeSnippet.collapse.tooltipText" placement="top">
+          <TooltipWrapper
+            tip={translate('codeSnippet.collapse.tooltipText', 'Collapse all')}
+            placement="top"
+          >
             <ControlButton
               variant="text"
               size="small"
@@ -153,7 +163,10 @@ export function CodeBlockControls({
         ) : null}
 
         {copy && !codeSnippet?.copy?.hide ? (
-          <TooltipWrapper tooltipTranslationKey="codeSnippet.copy.tooltipText" placement="top">
+          <TooltipWrapper
+            tip={translate('codeSnippet.copy.tooltipText', 'Copy to clipboard')}
+            placement="top"
+          >
             <StyledCopyButton
               data={copy.data}
               data-source={copy.dataSource}

package/src/components/Tooltip/TooltipWrapper.tsx

@@ -4,12 +4,12 @@ import React from 'react';
 import type { JSX, ReactElement } from 'react';
 import type { TooltipProps } from '@redocly/theme/components/Tooltip/Tooltip';
 
-import { useThemeHooks, useControl } from '@redocly/theme/core/hooks';
+import { useControl } from '@redocly/theme/core/hooks';
 import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
 
 export type TooltipWrapperProps = {
   children: ReactElement;
-  tooltipTranslationKey: string;
+  tip: string;
   placement?: TooltipProps['placement'];
   width?: string;
   className?: string;
@@ -19,16 +19,14 @@ export type TooltipWrapperProps = {
 
 export function TooltipWrapper({
   children,
-  tooltipTranslationKey,
+  tip,
   placement = 'top',
   width = 'max-content',
   className = '',
   showOnHover = true,
   disabled = false,
 }: TooltipWrapperProps): JSX.Element {
-  const { useTranslate } = useThemeHooks();
   const tooltip = useControl();
-  const { translate } = useTranslate();
 
   const handleMouseEnter = (): void => {
     if (showOnHover && !disabled) {
@@ -51,7 +49,7 @@ export function TooltipWrapper({
   return (
     <Tooltip
       className={className}
-      tip={translate(tooltipTranslationKey)}
+      tip={tip}
       isOpen={tooltip.isOpened}
       placement={placement}
       width={width}

package/src/icons/PlayIcon/PlayIcon.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M3.0625 12.25C2.94647 12.25 2.83519 12.2039 2.75314 12.1219C2.67109 12.0398 2.625 11.9286 2.625 11.8125V2.18753C2.62499 2.1115 2.6448 2.03678 2.68247 1.97074C2.72014 1.9047 2.77437 1.84961 2.83981 1.81092C2.90526 1.77222 2.97965 1.75124 3.05567 1.75005C3.13169 1.74887 3.20671 1.76751 3.27333 1.80415L12.0233 6.61665C12.092 6.6544 12.1492 6.70989 12.1891 6.77733C12.229 6.84476 12.25 6.92167 12.25 7.00001C12.25 7.07835 12.229 7.15526 12.1891 7.22269C12.1492 7.29013 12.092 7.34562 12.0233 7.38337L3.27333 12.1959C3.20874 12.2314 3.13622 12.25 3.0625 12.25ZM3.5 2.9273V11.0726L10.9046 7.00003L3.5 2.9273Z" />
+  </svg>
+);
+
+export const PlayIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/PlayIcon/PlayIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/WorkflowHierarchyIcon/WorkflowHierarchyIcon.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M4.5 6.5H13.5C13.7651 6.4997 14.0193 6.39424 14.2068 6.20677C14.3942 6.0193 14.4997 5.76512 14.5 5.5V2.5C14.4997 2.23488 14.3942 1.9807 14.2068 1.79323C14.0193 1.60576 13.7651 1.5003 13.5 1.5H2.5C2.23488 1.5003 1.9807 1.60576 1.79323 1.79323C1.60576 1.9807 1.5003 2.23488 1.5 2.5V5.5C1.5003 5.76512 1.60576 6.0193 1.79323 6.20677C1.9807 6.39424 2.23488 6.4997 2.5 6.5H3.5H4.5ZM13.5 2.5H2.5V5.5H13.5V2.5Z"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M13.5 9.5H8.5C8.23488 9.5003 7.9807 9.60576 7.79323 9.79323C7.60576 9.9807 7.5003 10.2349 7.5 10.5V11.5H4.5V9.29295V8.5V6.5H3.5V9.29295V11.5C3.5003 11.7651 3.60576 12.0193 3.79323 12.2068C3.9807 12.3942 4.23488 12.4997 4.5 12.5H7.5V13.5C7.5003 13.7651 7.60576 14.0193 7.79323 14.2068C7.9807 14.3942 8.23488 14.4997 8.5 14.5H13.5C13.7651 14.4997 14.0193 14.3942 14.2068 14.2068C14.3942 14.0193 14.4997 13.7651 14.5 13.5V10.5C14.4997 10.2349 14.3942 9.9807 14.2068 9.79323C14.0193 9.60576 13.7651 9.5003 13.5 9.5ZM8.5 10.5V13.5H13.5V10.5H8.5Z"
+    />
+  </svg>
+);
+
+export const WorkflowHierarchyIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/WorkflowHierarchyIcon/WorkflowHierarchyIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/index.ts

@@ -264,6 +264,7 @@ export * from '@redocly/theme/icons/CharacterIcon/CharacterIcon';
 export * from '@redocly/theme/icons/FileIcon/FileIcon';
 export * from '@redocly/theme/icons/ExportIcon/ExportIcon';
 export * from '@redocly/theme/icons/CertificateIcon/CertificateIcon';
+export * from '@redocly/theme/icons/PlayIcon/PlayIcon';
 export * from '@redocly/theme/icons/PlaylistIcon/PlaylistIcon';
 export * from '@redocly/theme/icons/WorkflowAutomationIcon/WorkflowAutomationIcon';
 export * from '@redocly/theme/icons/TaskViewIcon/TaskViewIcon';
@@ -280,6 +281,7 @@ export * from '@redocly/theme/icons/RabbitMQIcon/RabbitMQIcon';
 export * from '@redocly/theme/icons/CurveAutoColonIcon/CurveAutoColonIcon';
 export * from '@redocly/theme/icons/AiStarsIcon/AiStarsIcon';
 export * from '@redocly/theme/icons/AiStarsGradientIcon/AiStarsGradientIcon';
+export * from '@redocly/theme/icons/WorkflowHierarchyIcon/WorkflowHierarchyIcon';
 export * from '@redocly/theme/icons/GenericIcon/GenericIcon';
 /* Layouts */
 export * from '@redocly/theme/layouts/RootLayout';

package/src/layouts/ThreePanelLayout.tsx

@@ -30,14 +30,11 @@ const Wrapper = styled.div<{ collapsedSidebar?: boolean; layout?: LayoutVariant
   margin: 0 auto;
   width: 100%;
 
-  ${({ layout = LayoutVariant.THREE_PANEL, collapsedSidebar }) => {
+  ${({ layout = LayoutVariant.THREE_PANEL }) => {
     return css`
       max-width: ${layout === LayoutVariant.THREE_PANEL ? '100%' : ''};
 
       @media screen and (min-width: ${breakpoints.small}) {
-        width: ${collapsedSidebar
-          ? `var(--layout-${layout}-small-max-width)`
-          : 'calc(100% - var(--sidebar-width))'};
         max-width: var(--layout-${layout}-small-max-width);
       }