@redocly/theme 0.69.0-next.1 → 0.69.0-next.10

package/lib/components/Feedback/Sentiment.js

@@ -38,7 +38,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Sentiment = Sentiment;
 const React = __importStar(require("react"));
-const react_1 = require("react");
 const styled_components_1 = __importDefault(require("styled-components"));
 const Reasons_1 = require("../../components/Feedback/Reasons");
 const hooks_1 = require("../../core/hooks");
@@ -82,10 +81,12 @@ function Sentiment({ settings, onSubmit, className }) {
         }
         return !(scoreSpecificReasonsSettings === null || scoreSpecificReasonsSettings === void 0 ? void 0 : scoreSpecificReasonsSettings.hide);
     };
+    const hasComment = !(commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.hide);
+    const hasOptionalEmail = !(optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.hide) && !(userData === null || userData === void 0 ? void 0 : userData.isAuthenticated);
     const displayReasons = checkIfShouldDisplayReasons(score);
-    const displayComment = !!(score && !(commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.hide));
+    const displayComment = !!score && hasComment;
     const displaySubmitBnt = !!(score && (displayReasons || displayComment));
-    const displayFeedbackEmail = !!score && !(optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.hide) && !userData.isAuthenticated;
+    const displayFeedbackEmail = !!score && hasOptionalEmail;
     const commentLabel = score === 1
         ? (commentSettings && commentSettings.likeLabel) ||
             translate('feedback.settings.comment.likeLabel', 'What was most helpful?')
@@ -105,29 +106,32 @@ function Sentiment({ settings, onSubmit, className }) {
         const scoreSpecificReasonSettings = getScoreSpecificReasonSettings(score);
         return scoreSpecificReasonSettings === null || scoreSpecificReasonSettings === void 0 ? void 0 : scoreSpecificReasonSettings.component;
     };
-    const onSubmitSentimentForm = () => {
+    const submitSentiment = (sentimentScore) => {
         const trimmedComment = (comment === null || comment === void 0 ? void 0 : comment.trim()) || undefined;
         const trimmedEmail = (email === null || email === void 0 ? void 0 : email.trim()) || undefined;
         onSubmit({
-            score,
+            score: sentimentScore,
             comment: trimmedComment,
             reasons,
             email: trimmedEmail,
         });
         setIsSubmitted(true);
     };
+    const onSubmitSentimentForm = () => {
+        submitSentiment(score);
+    };
+    const onScoreChange = (newScore) => {
+        setScore(newScore);
+        if (newScore && !checkIfShouldDisplayReasons(newScore) && !hasComment && !hasOptionalEmail) {
+            submitSentiment(newScore);
+        }
+    };
     const onCancelSentimentForm = () => {
         setScore(0);
         setComment('');
         setReasons([]);
         setEmail(undefined);
     };
-    (0, react_1.useEffect)(() => {
-        if (score && !displayComment && !displayReasons && !displayFeedbackEmail) {
-            onSubmitSentimentForm();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [score, displayComment, displayReasons, displayFeedbackEmail]);
     if (isSubmitted) {
         return (React.createElement(SentimentWrapper, { "data-component-name": "Feedback/Sentiment" },
             React.createElement(StyledFormMandatoryFields, null,
@@ -141,10 +145,10 @@ function Sentiment({ settings, onSubmit, className }) {
                 React.createElement(Label, { "data-translation-key": "feedback.settings.label" }, label || translate('feedback.settings.label', 'Was this helpful?')),
                 React.createElement(StyledMandatoryFieldContainer, null,
                     React.createElement(Button_1.Button, { type: "button", size: "medium", variant: score === 1 ? 'primary' : 'secondary', onClick: () => {
-                            setScore(1);
+                            onScoreChange(1);
                         }, "aria-label": translate('feedback.sentiment.thumbUp', 'Like'), icon: React.createElement(ThumbUpIcon_1.ThumbUpIcon, null) }),
                     React.createElement(Button_1.Button, { size: "medium", type: "button", variant: score === -1 ? 'primary' : 'secondary', tone: score === -1 ? 'danger' : 'default', onClick: () => {
-                            setScore(-1);
+                            onScoreChange(-1);
                         }, "aria-label": translate('feedback.sentiment.thumbDown', 'Dislike'), icon: React.createElement(ThumbDownIcon_1.ThumbDownIcon, null) }))),
             (displayReasons || displayComment) && (React.createElement(StyledFormOptionalFields, null,
                 displayReasons && (React.createElement(Reasons_1.Reasons, { settings: {

package/lib/components/Filter/FilterInput.js

@@ -44,9 +44,11 @@ const SearchIcon_1 = require("../../icons/SearchIcon/SearchIcon");
 function FilterInput(props) {
     const { value: initialValue, onChange, dataTestId } = props;
     const [value, setValue] = (0, react_1.useState)(initialValue);
-    (0, react_1.useEffect)(() => {
+    const [prevInitialValue, setPrevInitialValue] = (0, react_1.useState)(initialValue);
+    if (prevInitialValue !== initialValue) {
+        setPrevInitialValue(initialValue);
         setValue(initialValue);
-    }, [initialValue]);
+    }
     const handleChange = (e) => {
         const newValue = e.target.value;
         setValue(newValue);

package/lib/components/Filter/FilterSelect.js

@@ -53,6 +53,7 @@ const StyledSelect = (0, styled_components_1.default)(Select_1.Select) `
   --select-text-color: var(--filter-select-color);
   border: 1px solid var(--filter-select-border-color);
   --select-border-radius: var(--filter-select-border-radius);
+  --select-input-border-radius: var(--filter-select-border-radius);
   padding: var(--filter-select-padding);
 
   &:hover {

package/lib/components/Filter/variables.js

@@ -74,7 +74,7 @@ exports.filter = (0, styled_components_1.css) `
   --filter-select-max-width: 100%;
   --filter-select-color: var(--text-color-primary);
   --filter-select-border-color: var(--border-color-primary);
-  --filter-select-border-radius: calc(var(--spacing-unit) * 1.5);
+  --filter-select-border-radius: var(--input-border-radius);
   --filter-select-padding: 0;
   --filter-select-border-color-hover: var(--text-color-primary);
   --filter-select-option-margin: 0;
@@ -94,7 +94,7 @@ exports.filter = (0, styled_components_1.css) `
   --filter-date-picker-icon-width: var(--spacing-sm);
   --filter-date-picker-icon-stroke-hover: var(--text-color-primary);
   --filter-date-picker-wrapper-border-color: var(--border-color-primary);
-  --filter-date-picker-wrapper-radius: calc(var(--spacing-unit) * 1.5);
+  --filter-date-picker-wrapper-radius: var(--border-radius-md);
   --filter-date-picker-wrapper-padding: calc(var(--spacing-xxs) / 2) var(--spacing-xs);
 
   // @tokens End

package/lib/components/Image/variables.js

@@ -12,7 +12,7 @@ exports.image = (0, styled_components_1.css) `
   --image-frame-border-color: var(--border-color-secondary);
   --image-frame-border-radius: var(--border-radius-xxl);
   --image-frame-bg-color: var(--bg-color-raised);
-  --image-frame-image-border-radius: var(--border-radius-lg);
+  --image-frame-image-border-radius: var(--border-radius-xl);
 
   /**
     * @tokens Image caption
@@ -26,7 +26,7 @@ exports.image = (0, styled_components_1.css) `
   /**
     * @tokens Image gallery
     */
-  --image-gallery-border-radius: var(--border-radius-lg);
+  --image-gallery-border-radius: var(--border-radius-xl);
   --image-gallery-image-bg-color: var(--bg-color-tonal);
 
   /**
@@ -51,9 +51,11 @@ exports.image = (0, styled_components_1.css) `
   --image-lightbox-close-size: 40px;
   --image-lightbox-close-icon-size: 18px;
   --image-lightbox-close-offset: var(--spacing-base);
-  --image-lightbox-close-border-radius: var(--border-radius-lg);
+  --image-lightbox-close-border-radius: var(--border-radius-xl);
   --image-lightbox-side-gutter: calc(
     var(--image-lightbox-close-size) + var(--image-lightbox-close-offset) + var(--spacing-sm)
   );
+
+  // @tokens End
 `;
 //# sourceMappingURL=variables.js.map

package/lib/components/JsonViewer/Helpers.js

@@ -1,43 +1,10 @@
 "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 () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __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.JsonValue = JsonValue;
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Button_1 = require("../../components/Button/Button");
 const ShowMoreToggleButton_1 = require("../../components/Button/ShowMoreToggleButton");
@@ -47,14 +14,15 @@ function JsonValue(props) {
     const indent = ' '.repeat(level * 2);
     const [isExpandedState, setExpanded] = react_1.default.useState(expandAllSignal !== null && expandAllSignal !== void 0 ? expandAllSignal : level < defaultExpandLevel);
     const isExpanded = expandAllSignal !== undefined && level > 0 ? expandAllSignal : isExpandedState;
-    (0, react_1.useEffect)(() => {
-        if (expandAllSignal !== undefined) {
-            if (expandAllSignal === false && level === 0) {
-                return;
-            }
+    const [prevExpandAllSignal, setPrevExpandAllSignal] = react_1.default.useState(expandAllSignal);
+    const [prevLevel, setPrevLevel] = react_1.default.useState(level);
+    if (prevExpandAllSignal !== expandAllSignal || prevLevel !== level) {
+        setPrevExpandAllSignal(expandAllSignal);
+        setPrevLevel(level);
+        if (expandAllSignal !== undefined && !(expandAllSignal === false && level === 0)) {
             setExpanded(expandAllSignal);
         }
-    }, [expandAllSignal, level]);
+    }
     const keys = (value && Object.keys(value).filter((key) => value[key] !== undefined)) || []; // filter out undefined properties
     const valueType = typeof value;
     const isPrimitive = (valueType !== 'object' && value !== null) || keys.length === 0;
@@ -94,11 +62,13 @@ function JsonKeyValue(props) {
     const isCollapsible = typeof value === 'object' && value !== null && keys.length > 0;
     const [isExpandedState, setExpanded] = react_1.default.useState(expandAllSignal !== null && expandAllSignal !== void 0 ? expandAllSignal : level < defaultExpandLevel);
     const isExpanded = expandAllSignal !== undefined ? expandAllSignal : isExpandedState;
-    (0, react_1.useEffect)(() => {
+    const [prevExpandAllSignal, setPrevExpandAllSignal] = react_1.default.useState(expandAllSignal);
+    if (prevExpandAllSignal !== expandAllSignal) {
+        setPrevExpandAllSignal(expandAllSignal);
         if (expandAllSignal !== undefined) {
             setExpanded(expandAllSignal);
         }
-    }, [expandAllSignal]);
+    }
     const openingPunctuation = Array.isArray(value) ? '[' : '{';
     const closingPunctuation = Array.isArray(value) ? ']' : '}';
     const valueElement = isCollapsible ? (react_1.default.createElement(react_1.default.Fragment, null,

package/lib/components/LanguagePicker/variables.js

@@ -24,7 +24,7 @@ exports.languagePicker = (0, styled_components_1.css) `
   --language-picker-dropdown-item-padding-vertical: var(--dropdown-menu-item-padding-vertical); // @presenter Spacing
   --language-picker-dropdown-item-separator-padding-top: var(--dropdown-menu-item-separator-padding-top ); // @presenter Spacing
   --language-picker-dropdown-item-separator-padding-bottom: var(--dropdown-menu-item-separator-padding-bottom ); // @presenter Spacing
-  --language-picker-dropdown-item-border-radius: var(--dropdown-menu-item-border-radius ); // @presenter BorderRadius
+  --language-picker-dropdown-item-border-radius: var(--dropdown-menu-item-border-radius); // @presenter BorderRadius
   --language-picker-dropdown-item-bg-color-active: var(--dropdown-menu-item-bg-color-active); // @presenter Color
   --language-picker-dropdown-item-bg-color-hover: var(--dropdown-menu-item-bg-color-hover); // @presenter Color
   --language-picker-dropdown-item-bg-color-disabled: var(--dropdown-menu-item-bg-color-disabled); // @presenter Color

package/lib/components/MCP/McpConnectionTabs.d.ts

@@ -0,0 +1,7 @@
+import type { JSX } from 'react';
+export type McpConnectionTab = 'claude' | 'chatgpt' | 'json';
+export type McpConnectionTabsProps = {
+    options?: McpConnectionTab[];
+    className?: string;
+};
+export declare function McpConnectionTabs({ options, className, }: McpConnectionTabsProps): JSX.Element | null;

package/lib/components/MCP/McpConnectionTabs.js

@@ -0,0 +1,151 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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.McpConnectionTabs = McpConnectionTabs;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const hooks_1 = require("../../core/hooks");
+const utils_1 = require("../../core/utils");
+const CodeBlock_1 = require("../../components/CodeBlock/CodeBlock");
+const ClaudeIcon_1 = require("../../icons/ClaudeIcon/ClaudeIcon");
+const ChatGptIcon_1 = require("../../icons/ChatGptIcon/ChatGptIcon");
+const Tabs_1 = require("../../markdoc/components/Tabs/Tabs");
+const TabItemFragment_1 = require("../../markdoc/components/Tabs/TabItemFragment");
+const NumberedList_1 = require("../../markdoc/components/NumberedList/NumberedList");
+const NumberedItem_1 = require("../../markdoc/components/NumberedList/NumberedItem");
+const DEFAULT_TAB_OPTIONS = ['claude', 'chatgpt', 'json'];
+const TAB_LABELS = {
+    claude: {
+        translationKey: 'page.mcpNotAllowed.tabs.claude',
+        defaultLabel: 'Claude',
+        icon: ClaudeIcon_1.ClaudeIcon,
+    },
+    chatgpt: {
+        translationKey: 'page.mcpNotAllowed.tabs.chatgpt',
+        defaultLabel: 'ChatGPT',
+        icon: ChatGptIcon_1.ChatGptIcon,
+    },
+    json: { translationKey: 'page.mcpNotAllowed.tabs.json', defaultLabel: 'JSON' },
+};
+// The report control is docs feedback, not useful on the connection page.
+const CODE_BLOCK_HEADER = { controls: { copy: {}, report: { hidden: true } } };
+function McpConnectionTabs({ options = DEFAULT_TAB_OPTIONS, className, }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const { serverName, serverUrl, isMcpDisabled } = (0, hooks_1.useMCPConfig)();
+    // The SSR markup of error pages is cached with the build-time origin, so the
+    // tabs remount after hydration to pick up the real browser origin.
+    const [hydrated, setHydrated] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => setHydrated(true), []);
+    if (isMcpDisabled) {
+        return null;
+    }
+    const connection = { serverName, url: serverUrl };
+    return (react_1.default.createElement(McpConnectionTabsWrapper, { key: hydrated ? 'client' : 'ssr', "data-component-name": "MCP/McpConnectionTabs", "data-testid": "mcp-connection-tabs", className: className },
+        react_1.default.createElement(Tabs_1.Tabs, { size: Tabs_1.TabsSize.SMALL }, options.map((option) => {
+            const { translationKey, defaultLabel, icon: TabIcon } = TAB_LABELS[option];
+            return (react_1.default.createElement(TabItemFragment_1.TabItemFragment, { key: option, label: translate(translationKey, defaultLabel), icon: TabIcon ? react_1.default.createElement(TabIcon, null) : undefined }, renderTabContent(option, connection, translate)));
+        }))));
+}
+function renderTabContent(option, connection, translate) {
+    const terminalHint = (react_1.default.createElement(TabHint, null, translate('page.mcpNotAllowed.snippets.terminal.hint', 'Run this command in your terminal:')));
+    const urlBlock = react_1.default.createElement(CodeBlock_1.CodeBlock, { lang: "text", source: connection.url, header: CODE_BLOCK_HEADER });
+    const assistantPromptClient = {
+        headline: translate('page.mcpNotAllowed.snippets.prompt.headline', 'Prompt'),
+        content: (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(TabHint, null, translate('page.mcpNotAllowed.snippets.prompt.hint', 'Or paste this prompt into the chat to have it add the server for you:')),
+            react_1.default.createElement(CodeBlock_1.CodeBlock, { lang: "text", source: (0, utils_1.generateMcpInstallPrompt)(connection), header: CODE_BLOCK_HEADER, wrapContents: true }))),
+    };
+    switch (option) {
+        case 'claude':
+            return renderClientList([
+                {
+                    headline: translate('page.mcpNotAllowed.snippets.claudeCode.headline', 'Claude Code'),
+                    content: (react_1.default.createElement(react_1.default.Fragment, null,
+                        terminalHint,
+                        react_1.default.createElement(CodeBlock_1.CodeBlock, { lang: "shell", source: (0, utils_1.generateClaudeCodeCommand)(connection), header: CODE_BLOCK_HEADER, wrapContents: true }))),
+                },
+                {
+                    headline: translate('page.mcpNotAllowed.snippets.claudeDesktop.headline', 'Claude Desktop'),
+                    content: (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(TabHint, null, translate('page.mcpNotAllowed.snippets.claudeDesktop.instruction', 'In Claude Desktop, open Settings → Developer → Edit Config, add this to the configuration file, and restart Claude Desktop:')),
+                        react_1.default.createElement(CodeBlock_1.CodeBlock, { lang: "json", source: (0, utils_1.generateClaudeDesktopConfig)(connection), header: CODE_BLOCK_HEADER }))),
+                },
+            ]);
+        case 'chatgpt':
+            return renderClientList([
+                {
+                    headline: translate('page.mcpNotAllowed.snippets.codexCli.headline', 'Codex CLI'),
+                    content: (react_1.default.createElement(react_1.default.Fragment, null,
+                        terminalHint,
+                        react_1.default.createElement(CodeBlock_1.CodeBlock, { lang: "shell", source: (0, utils_1.generateCodexCommand)(connection), header: CODE_BLOCK_HEADER, wrapContents: true }))),
+                },
+                {
+                    headline: translate('page.mcpNotAllowed.snippets.chatgptApp.headline', 'ChatGPT desktop app'),
+                    content: (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(TabHint, null, translate('page.mcpNotAllowed.snippets.chatgptApp.instruction', 'In the ChatGPT desktop app, go to Settings → Plugins → MCPs and add a server with the "Streamable HTTP" type and this URL (restart the app afterwards):')),
+                        urlBlock)),
+                },
+                assistantPromptClient,
+            ]);
+        case 'json':
+            return (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(TabHint, null, translate('page.mcpNotAllowed.snippets.json.hint', 'Add this server entry to your MCP client configuration file:')),
+                react_1.default.createElement(CodeBlock_1.CodeBlock, { lang: "json", source: JSON.stringify({ [connection.serverName]: { url: connection.url, description: 'MCP Server' } }, null, 2), header: CODE_BLOCK_HEADER })));
+    }
+}
+function renderClientList(clients) {
+    return (react_1.default.createElement(NumberedList_1.NumberedList, null, clients.map((client, index) => (react_1.default.createElement(NumberedItem_1.NumberedItem, { key: index, type: "dot", size: "small", headline: client.headline, index: index + 1, isLast: index === clients.length - 1 }, client.content)))));
+}
+const McpConnectionTabsWrapper = styled_components_1.default.div `
+  --md-numbered-list-margin: 0 0 var(--spacing-sm);
+
+  font-size: var(--page-mcp-405-snippets-font-size);
+  line-height: var(--page-mcp-405-snippets-line-height);
+  text-align: left;
+
+  /* The copy control floats over the code, so wrapped lines need room to clear it. */
+  pre[data-testid='source-code'] {
+    padding-right: var(--page-mcp-405-snippets-code-padding-right);
+  }
+`;
+const TabHint = styled_components_1.default.p `
+  margin: 0 0 var(--spacing-xs);
+  color: var(--page-mcp-405-snippets-hint-text-color);
+`;
+//# sourceMappingURL=McpConnectionTabs.js.map

package/lib/components/Markdown/styles/base-table.js

@@ -46,6 +46,14 @@ exports.markdownBaseTableCss = (0, styled_components_1.css) `
       background-color: var(--md-table-header-bg-color);
     }
 
+    /* hide the header row when every cell is empty; one labelled cell keeps it visible */
+    thead:has(th:empty) {
+      display: none;
+    }
+    thead:has(th:not(:empty)) {
+      display: table-header-group;
+    }
+
     tr {
       background-color: var(--md-table-stripe-bg-color);
     }

package/lib/components/Markdown/variables.js

@@ -42,7 +42,7 @@ exports.markdown = (0, styled_components_1.css) `
   --md-table-line-height: var(--line-height-md); // @presenter FontSize
   --md-table-margin-vertical: 20px; // @presenter Spacing
   --md-table-bg-color: transparent; // @presenter Color
-  --md-table-border-radius: var(--border-radius);
+  --md-table-border-radius: var(--border-radius-xl);
 
   --md-table-border-width: 1px;
   --md-table-header-bg-color: var(--layer-color);

package/lib/components/Menu/MenuItem.js

@@ -116,7 +116,7 @@ function MenuItemImpl(props) {
         deprecated: item.deprecated,
         httpVerb: item.httpVerb || '',
     });
-    const label = item.label && (react_1.default.createElement(MenuItemLabelWrapper, { $active: item.active, $deprecated: item.deprecated, $depth: depth, $withChevron: hasChevron, $isSeparator: isSeparator, onClick: handleOnClick, onKeyDown: handleExpandOnEnter, ref: labelRef, role: item.link ? 'none' : 'link', tabIndex: !item.link ? 0 : undefined, "data-testid": "menu-item-label", "data-active": item.active },
+    const label = item.label && (react_1.default.createElement(MenuItemLabelWrapper, { $active: item.active, $deprecated: item.deprecated, $depth: depth, $withChevron: hasChevron, $isSeparator: isSeparator, onClick: handleOnClick, onKeyDown: handleExpandOnEnter, ref: labelRef, role: item.link || isSeparator ? 'none' : 'link', tabIndex: !item.link && !isSeparator ? 0 : undefined, "data-testid": "menu-item-label", "data-active": item.active },
         hasChevron ? react_1.default.createElement(ChevronWrapper, null, chevron) : null,
         react_1.default.createElement(MenuItemIcon, { icon: item.icon, srcSet: item.srcSet }),
         react_1.default.createElement(MenuItemLabelTextWrapper, null,

package/lib/components/Menu/variables.js

@@ -58,7 +58,7 @@ exports.menu = (0, styled_components_1.css) `
   --menu-item-label-margin: var(--menu-item-label-margin-vertical) var(--menu-item-label-margin-horizontal);
   --menu-item-label-padding: var(--menu-item-padding-vertical) var(--menu-item-padding-horizontal);
   --menu-item-label-gap: var(--spacing-xxs);
-  --menu-item-label-border-radius: 6px;
+  --menu-item-label-border-radius: var(--border-radius-lg);
   --menu-item-label-chevron-size: 12px;
   --menu-item-label-chevron-offset: calc(var(--menu-item-label-gap) + var(--menu-item-label-chevron-size));
 

package/lib/components/Navbar/variables.js

@@ -29,7 +29,7 @@ exports.navbar = (0, styled_components_1.css) `
 
   --navbar-item-line-height: var(--line-height-base);
   --navbar-item-bg-color-active: var(--bg-color-active);
-  --navbar-item-border-radius: var(--border-radius);
+  --navbar-item-border-radius: var(--border-radius-lg);
   --navbar-item-bottom-border: none;
 
   --navbar-item-text-color-hover: var(--text-color-primary);

package/lib/components/PageActions/PageActions.js

@@ -51,9 +51,8 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const PageActionsMenuItem_1 = require("../../components/PageActions/PageActionsMenuItem");
 const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem");
 const Link_1 = require("../../components/Link/Link");
-const ButtonGroup_1 = require("../../components/Button/ButtonGroup");
 const Button_1 = require("../../components/Button/Button");
-const Dropdown_1 = require("../../components/Dropdown/Dropdown");
+const SplitButton_1 = require("../../components/SplitButton/SplitButton");
 const DropdownMenu_1 = require("../../components/Dropdown/DropdownMenu");
 const Spinner_1 = require("../../icons/Spinner/Spinner");
 const CheckmarkFilledIcon_1 = require("../../icons/CheckmarkFilledIcon/CheckmarkFilledIcon");
@@ -61,6 +60,8 @@ const hooks_1 = require("../../core/hooks");
 const ACTION_DONE_DISPLAY_DURATION = 1000;
 function PageActions(props) {
     const { pageSlug, mcpUrl } = props;
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
     const actions = (0, hooks_1.usePageActions)(pageSlug || '/', mcpUrl, props.actions);
     const [actionState, setActionState] = (0, react_1.useState)('idle');
     if (!actions.length) {
@@ -86,10 +87,7 @@ function PageActions(props) {
         return (react_1.default.createElement(StyledDropdownMenuItem, { key: key, onAction: () => handleActionClick(action) }, content));
     });
     return (react_1.default.createElement(PageActionsWrapper, { "data-component-name": "PageActions/PageActions" },
-        react_1.default.createElement(ButtonGroup_1.ButtonGroup, { variant: "outlined", size: "medium" },
-            react_1.default.createElement(Button_1.Button, { icon: renderIcon(buttonAction, actionState), to: 'link' in buttonAction ? buttonAction.link : undefined, external: true, onClick: () => handleActionClick(buttonAction) }, buttonAction.buttonText),
-            actions.length > 1 ? (react_1.default.createElement(Dropdown_1.Dropdown, { withArrow: true, portalled: true, trigger: react_1.default.createElement(Button_1.Button, { "aria-label": "More actions" }), placement: "bottom", alignment: "end" },
-                react_1.default.createElement(StyledDropdownMenu, null, menuItems))) : null)));
+        react_1.default.createElement(SplitButton_1.SplitButton, { portalled: true, variant: "outlined", size: "medium", toggleAriaLabel: translate('page.actions.moreActions', 'More actions'), button: react_1.default.createElement(Button_1.Button, { variant: "outlined", icon: renderIcon(buttonAction, actionState), to: 'link' in buttonAction ? buttonAction.link : undefined, external: true, onClick: () => handleActionClick(buttonAction) }, buttonAction.buttonText) }, actions.length > 1 ? react_1.default.createElement(StyledDropdownMenu, null, menuItems) : null)));
 }
 function renderIcon(buttonAction, actionState) {
     switch (actionState) {

package/lib/components/PageActions/PageActionsMenuItem.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
+import type { JSX } from 'react';
 import type { PageAction } from '../../core/types';
-type PageActionsMenuItemProps = {
+export type PageActionsMenuItemProps = {
     pageAction: PageAction;
+    className?: string;
 };
-export declare function PageActionsMenuItem(props: PageActionsMenuItemProps): React.JSX.Element;
-export {};
+export declare function PageActionsMenuItem(props: PageActionsMenuItemProps): JSX.Element;

package/lib/components/PageActions/PageActionsMenuItem.js

@@ -6,53 +6,37 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageActionsMenuItem = PageActionsMenuItem;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
+const DropdownMenuItemContent_1 = require("../../components/Dropdown/DropdownMenuItemContent");
 const LaunchIcon_1 = require("../../icons/LaunchIcon/LaunchIcon");
 function PageActionsMenuItem(props) {
-    const { pageAction } = props;
-    return (react_1.default.createElement(MenuItemWrapper, { "data-component-name": "PageActions/PageActionsMenuItem" },
-        react_1.default.createElement(IconWrapper, null,
-            react_1.default.createElement(pageAction.iconComponent, null)),
-        react_1.default.createElement(ContentWrapper, null,
-            react_1.default.createElement(Title, null,
+    const { pageAction, className } = props;
+    return (react_1.default.createElement(MenuItemWrapper, { "data-component-name": "PageActions/PageActionsMenuItem", className: className },
+        react_1.default.createElement(DropdownMenuItemContent_1.DropdownMenuItemContent, { icon: react_1.default.createElement(pageAction.iconComponent, null), title: react_1.default.createElement(react_1.default.Fragment, null,
                 pageAction.title,
-                'link' in pageAction ? (react_1.default.createElement(LaunchIcon_1.LaunchIcon, { color: "var(--page-actions-menu-item-title-icon-color)", size: "14px" })) : null),
-            react_1.default.createElement(Description, null, pageAction.description))));
+                'link' in pageAction ? (react_1.default.createElement(LaunchIcon_1.LaunchIcon, { color: "var(--page-actions-menu-item-title-icon-color)", size: "14px" })) : null), description: pageAction.description })));
 }
 const MenuItemWrapper = styled_components_1.default.div `
-  padding: var(--page-actions-menu-item-padding);
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--page-actions-menu-item-gap);
-`;
-const IconWrapper = styled_components_1.default.div `
-  color: var(--page-actions-menu-item-icon-color);
-  border: 1px solid var(--page-actions-menu-item-icon-border-color);
-  border-radius: var(--page-actions-menu-item-icon-border-radius);
-  width: var(--page-actions-menu-item-icon-wrapper-size);
-  height: var(--page-actions-menu-item-icon-wrapper-size);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-const ContentWrapper = styled_components_1.default.div `
-  display: flex;
-  flex-direction: column;
-  gap: var(--page-actions-menu-item-text-gap);
-`;
-const Title = styled_components_1.default.div `
-  font-weight: var(--page-actions-menu-item-title-font-weight);
-  font-size: var(--page-actions-menu-item-title-font-size);
-  line-height: var(--page-actions-menu-item-title-line-height);
-  color: var(--page-actions-menu-item-title-color);
-  display: flex;
-  align-items: center;
-  gap: var(--page-actions-menu-item-title-icon-gap);
-`;
-const Description = styled_components_1.default.div `
-  font-weight: var(--page-actions-menu-item-description-font-weight);
-  font-size: var(--page-actions-menu-item-description-font-size);
-  line-height: var(--page-actions-menu-item-description-line-height);
-  color: var(--page-actions-menu-item-description-color);
+  --dropdown-menu-item-content-gap: var(--page-actions-menu-item-gap);
+  --dropdown-menu-item-content-padding: var(--page-actions-menu-item-padding);
+  --dropdown-menu-item-content-icon-size: var(--page-actions-menu-item-icon-wrapper-size);
+  --dropdown-menu-item-content-icon-color: var(--page-actions-menu-item-icon-color);
+  --dropdown-menu-item-content-icon-border: 1px solid var(--page-actions-menu-item-icon-border-color);
+  --dropdown-menu-item-content-icon-border-radius: var(--page-actions-menu-item-icon-border-radius);
+  --dropdown-menu-item-content-text-gap: var(--page-actions-menu-item-text-gap);
+  --dropdown-menu-item-content-title-icon-gap: var(--page-actions-menu-item-title-icon-gap);
+  --dropdown-menu-item-content-title-font-weight: var(--page-actions-menu-item-title-font-weight);
+  --dropdown-menu-item-content-title-font-size: var(--page-actions-menu-item-title-font-size);
+  --dropdown-menu-item-content-title-line-height: var(--page-actions-menu-item-title-line-height);
+  --dropdown-menu-item-content-title-color: var(--page-actions-menu-item-title-color);
+  --dropdown-menu-item-content-description-font-weight: var(
+    --page-actions-menu-item-description-font-weight
+  );
+  --dropdown-menu-item-content-description-font-size: var(
+    --page-actions-menu-item-description-font-size
+  );
+  --dropdown-menu-item-content-description-line-height: var(
+    --page-actions-menu-item-description-line-height
+  );
+  --dropdown-menu-item-content-description-color: var(--page-actions-menu-item-description-color);
 `;
 //# sourceMappingURL=PageActionsMenuItem.js.map

package/lib/components/Panel/Panel.js

@@ -47,6 +47,11 @@ const ChevronRightIcon_1 = require("../../icons/ChevronRightIcon/ChevronRightIco
 function Panel({ expanded = true, isExpandable = true, renderChildrenHidden = false, header, footer, className = 'panel-default', children, onToggle, description, }) {
     const [isExpanded, setExpanded] = (0, react_1.useState)(expanded);
     const [animate, setAnimate] = (0, react_1.useState)(false);
+    const [prevExpanded, setPrevExpanded] = (0, react_1.useState)(expanded);
+    if (prevExpanded !== expanded) {
+        setPrevExpanded(expanded);
+        setExpanded(expanded);
+    }
     const toggle = ({ target }) => {
         if (target instanceof HTMLAnchorElement || !isExpandable)
             return;
@@ -54,7 +59,6 @@ function Panel({ expanded = true, isExpandable = true, renderChildrenHidden = fa
         setExpanded(!isExpanded);
         onToggle === null || onToggle === void 0 ? void 0 : onToggle(!isExpanded);
     };
-    (0, react_1.useEffect)(() => setExpanded(expanded), [expanded]);
     return (react_1.default.createElement(PanelWrapper, { className: className, "data-testid": typeof header === 'string' ? ('panel-' + header).replace(/ /g, '-').toLowerCase() : null, "data-component-name": "Panel/Panel" },
         header &&
             (typeof header === 'function' ? (header({ expanded: isExpanded, toggle })) : (react_1.default.createElement(PanelHeader_1.PanelHeader, { "data-testid": "panel-header", toggle: toggle, expanded: isExpanded, isExpandable: isExpandable },

package/lib/components/Panel/variables.js

@@ -179,7 +179,7 @@ exports.apiReferencePanels = (0, styled_components_1.css) `
   * @tokens Panel common
   */
 
-  --panel-border-radius: var(--border-radius); // @presenter BorderRadius
+  --panel-border-radius: var(--border-radius-xl); // @presenter BorderRadius
   --panel-border: 1px solid var(--border-color-secondary); // @presenter Border
 
   --panel-line-height: var(--line-height-base); // @presenter LineHeight