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

package/lib/components/Accordion/Accordion.js

@@ -47,6 +47,11 @@ const ChevronRightIcon_1 = require("../../icons/ChevronRightIcon/ChevronRightIco
 function Accordion({ expanded = true, isExpandable = true, renderChildrenHidden = false, header, className, children, onToggle, dataTestId, }) {
     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 Accordion({ expanded = true, isExpandable = true, renderChildrenHidden
         setExpanded(!isExpanded);
         onToggle === null || onToggle === void 0 ? void 0 : onToggle(!isExpanded);
     };
-    (0, react_1.useEffect)(() => setExpanded(expanded), [expanded]);
     return (react_1.default.createElement(AccordionWrapper, { className: className, "data-testid": dataTestId, "data-component-name": "Accordion/Accordion" },
         header &&
             (typeof header === 'function' ? (header({ expanded: isExpanded })) : (react_1.default.createElement(AccordionHeader_1.AccordionHeader, { "data-testid": "accordion-header", onClick: toggle, expanded: isExpanded, isExpandable: isExpandable },

package/lib/components/Accordion/variables.js

@@ -14,7 +14,7 @@ exports.accordion = (0, styled_components_1.css) `
   * @tokens Accordion common
   */
 
-  --accordion-border-radius: var(--border-radius); // @presenter BorderRadius
+  --accordion-border-radius: var(--border-radius-xl); // @presenter BorderRadius
   --accordion-border: none; // @presenter Border
 
   --accordion-line-height: var(--line-height-base); // @presenter LineHeight

package/lib/components/Admonition/Admonition.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { JSX } from 'react';
 type AdmonitionTypeProps = {
-    type: 'warning' | 'success' | 'danger' | 'info' | 'default';
+    type: 'warning' | 'success' | 'danger' | 'info' | 'idea';
 };
 export type AdmonitionProps = Partial<AdmonitionTypeProps> & {
     name?: string;

package/lib/components/Admonition/Admonition.js

@@ -49,7 +49,7 @@ const IconsMap = {
     success: CheckmarkOutlineIcon_1.CheckmarkOutlineIcon,
     danger: ErrorIcon_1.ErrorIcon,
     info: InformationIcon_1.InformationIcon,
-    default: IdeaIcon_1.IdeaIcon,
+    idea: IdeaIcon_1.IdeaIcon,
 };
 function Admonition({ type = 'info', name, children, className, 'data-source': dataSource, 'data-hash': dataHash, }) {
     const Icon = IconsMap[type] || IconsMap['info'];

package/lib/components/Admonition/variables.dark.js

@@ -15,7 +15,7 @@ exports.admonitionDarkMode = (0, styled_components_1.css) `
   --admonition-success-bg-color: color-mix(in srgb, var(--color-green-1) 40%, transparent); // @presenter Color
   --admonition-success-border: var(--admonition-border-width) var(--admonition-border-style) color-mix(in srgb, var(--color-green-3) 40%, transparent); // @presenter Border
 
-  --admonition-default-bg-color: color-mix(in srgb, var(--color-primary-bg, var(--admonition-default-bg-color-legacy)) 40%, transparent); // @presenter Color
-  --admonition-default-border: var(--admonition-border-width) var(--admonition-border-style) color-mix(in srgb, var(--color-primary-border, var(--admonition-default-border-color-legacy)) 40%, transparent); // @presenter Border
+  --admonition-idea-bg-color: color-mix(in srgb, var(--color-primary-bg, var(--admonition-default-bg-color-legacy)) 40%, transparent); // @presenter Color
+  --admonition-idea-border: var(--admonition-border-width) var(--admonition-border-style) color-mix(in srgb, var(--color-primary-border, var(--admonition-default-border-color-legacy)) 40%, transparent); // @presenter Border
 `;
 //# sourceMappingURL=variables.dark.js.map

package/lib/components/Admonition/variables.js

@@ -34,7 +34,7 @@ exports.admonition = (0, styled_components_1.css) `
   * @tokens Admonition border
   */
 
-  --admonition-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --admonition-border-radius: var(--border-radius-xl); // @presenter BorderRadius
   --admonition-border-style: var(--border-style);
   --admonition-border-width: 1px;
 
@@ -92,17 +92,17 @@ exports.admonition = (0, styled_components_1.css) `
   --admonition-success-border: var(--admonition-success-border-width) var(--admonition-success-border-style) var(--admonition-success-border-color); // @presenter Border
 
   /**
-  * @tokens Admonition type primary
+  * @tokens Admonition type idea
   */
 
-  --admonition-default-bg-color: var(--color-primary-bg, var(--admonition-default-bg-color-legacy)); // @presenter Color
-  --admonition-default-text-color: var(--admonition-heading-text-color); // @presenter Color
-  --admonition-default-heading-text-color: var(--admonition-heading-text-color); // @presenter Color
-  --admonition-default-icon-color: var(--color-primary-base, var(--admonition-default-icon-color-legacy)); // @presenter Color
-  --admonition-default-border-color: var(--color-primary-border, var(--admonition-default-border-color-legacy)); // @presenter Color
-  --admonition-default-border-style: var(--admonition-border-style); // @presenter Color
-  --admonition-default-border-width: var(--admonition-border-width); // @presenter Color
-  --admonition-default-border: var(--admonition-default-border-width) var(--admonition-default-border-style) var(--admonition-default-border-color); // @presenter Border
+  --admonition-idea-bg-color: var(--color-primary-bg, var(--admonition-default-bg-color-legacy)); // @presenter Color
+  --admonition-idea-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-idea-heading-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-idea-icon-color: var(--color-primary-base, var(--admonition-default-icon-color-legacy)); // @presenter Color
+  --admonition-idea-border-color: var(--color-primary-border, var(--admonition-default-border-color-legacy)); // @presenter Color
+  --admonition-idea-border-style: var(--admonition-border-style); // @presenter Color
+  --admonition-idea-border-width: var(--admonition-border-width); // @presenter Color
+  --admonition-idea-border: var(--admonition-idea-border-width) var(--admonition-idea-border-style) var(--admonition-idea-border-color); // @presenter Border
   
   // @tokens End
 `;

package/lib/components/Badge/Badge.d.ts

@@ -5,5 +5,7 @@ export type BadgeProps = PropsWithChildren<{
     key?: string;
     className?: string;
     icon?: string;
+    /** Inline SVG content for the icon */
+    iconRawContent?: string;
 }>;
-export declare function Badge({ icon, children, deprecated, color, ...props }: BadgeProps): JSX.Element;
+export declare function Badge({ icon, iconRawContent, children, deprecated, color, ...props }: BadgeProps): JSX.Element;

package/lib/components/Badge/Badge.js

@@ -52,9 +52,9 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const GenericIcon_1 = require("../../icons/GenericIcon/GenericIcon");
 function Badge(_a) {
-    var { icon, children, deprecated, color } = _a, props = __rest(_a, ["icon", "children", "deprecated", "color"]);
+    var { icon, iconRawContent, children, deprecated, color } = _a, props = __rest(_a, ["icon", "iconRawContent", "children", "deprecated", "color"]);
     return (react_1.default.createElement(BadgeComponent, Object.assign({}, props, { $color: color, $deprecated: deprecated, "data-component-name": "Badge/Badge" }),
-        icon ? react_1.default.createElement(BadgeIcon, { icon: icon }) : null,
+        icon || iconRawContent ? react_1.default.createElement(BadgeIcon, { icon: icon, rawContent: iconRawContent }) : null,
         children));
 }
 const BadgeComponent = styled_components_1.default.span `
@@ -82,5 +82,10 @@ const BadgeIcon = (0, styled_components_1.default)(GenericIcon_1.GenericIcon) `
   margin-right: var(--spacing-xxs);
   flex-shrink: 0;
   vertical-align: middle;
+
+  /* For inline SVG to align properly */
+  svg {
+    display: block;
+  }
 `;
 //# sourceMappingURL=Badge.js.map

package/lib/components/Banner/variables.dark.js

@@ -8,5 +8,7 @@ exports.bannerDarkMode = (0, styled_components_1.css) `
   */
  
   --banner-warning-text-color: var(--color-white); // @presenter Color
+
+  // @tokens End
 `;
 //# sourceMappingURL=variables.dark.js.map

package/lib/components/Banner/variables.js

@@ -10,7 +10,7 @@ exports.banner = (0, styled_components_1.css) `
   --banner-button-size: 22px;
   --banner-button-padding: 3px; // @presenter Spacing
   --banner-button-font-size: var(--font-size-base);
-  --banner-button-border-radius: var(--border-radius);
+  --banner-button-border-radius: var(--border-radius-md);
   --banner-button-padding-inline: 1px var(--spacing-sm);
   --banner-button-line-height: var(--line-height-base); // @presenter LineHeight
   --banner-button-icon-size: 14px;
@@ -49,5 +49,7 @@ exports.banner = (0, styled_components_1.css) `
   --banner-error-link-color: var(--banner-error-text-color); // @presenter Color
   --banner-error-link-decoration: underline 1px var(--banner-error-link-color);
   --banner-error-link-decoration-hover: underline 2px var(--banner-error-link-color);
+
+  // @tokens End
 `;
 //# sourceMappingURL=variables.js.map

package/lib/components/Breadcrumbs/Breadcrumb.js

@@ -58,7 +58,7 @@ const baseBreadcrumbStyles = `
   align-items: center;
   gap: var(--breadcrumbs-gap);
   padding: var(--breadcrumb-padding);
-  border-radius: var(--border-radius);
+  border-radius: var(--breadcrumbs-border-radius);
   color: var(--breadcrumbs-text-color);
   text-decoration: none;
 

package/lib/components/Breadcrumbs/variables.js

@@ -15,7 +15,7 @@ exports.breadcrumbs = (0, styled_components_1.css) `
   --breadcrumbs-icon-size: var(--font-size-base); // @presenter FontSize
   --breadcrumbs-font-weight-active: var(--font-weight-medium); // @presenter FontWeight
 
-  --breadcrumbs-border-radius: var(--border-radius); // @presenter BorderRadius
+  --breadcrumbs-border-radius: var(--border-radius-md); // @presenter BorderRadius
   --breadcrumbs-gap: var(--spacing-xxs); // @presenter Spacing
 
   --breadcrumbs-padding: 2px var(--spacing-xs); // @presenter Spacing

package/lib/components/Button/ButtonGroup.d.ts

@@ -1,12 +1,10 @@
 import React from 'react';
 import type { JSX } from 'react';
-import type { ButtonSize } from '../../components/Button/Button';
-type ButtonGroupVariant = 'outlined';
-type ButtonGroupProps = {
+import type { ButtonGroupSize, ButtonGroupVariant } from '../../core/types';
+export type ButtonGroupProps = {
     variant?: ButtonGroupVariant;
-    size?: ButtonSize;
+    size?: ButtonGroupSize;
     children: React.ReactNode;
     className?: string;
 };
 export declare function ButtonGroup(props: ButtonGroupProps): JSX.Element;
-export {};

package/lib/components/Button/ButtonGroup.js

@@ -14,25 +14,45 @@ const ButtonGroupWrapper = styled_components_1.default.div `
   display: flex;
   line-height: var(--button-line-height);
 
-  .button {
+  & > .button,
+  & > * > .button {
     border-radius: 0;
   }
 
   & > .button:first-child,
-  *:first-child > .button {
+  & > *:first-child > .button {
     border-top-left-radius: var(--button-border-radius);
     border-bottom-left-radius: var(--button-border-radius);
   }
 
   & > .button:last-child,
-  *:last-child > .button {
+  & > *:last-child > .button {
     border-top-right-radius: var(--button-border-radius);
     border-bottom-right-radius: var(--button-border-radius);
   }
 
+  /* Adjacent segments share a single divider line: the leading segment drops its
+     own right border and the trailing one draws the divider as its left border. */
+  & > .button:not(:last-child),
+  & > *:not(:last-child) > .button {
+    border-right-style: none;
+    border-right-width: 0;
+  }
+
   & > .button:not(:first-child),
-  *:not(:first-child) > .button {
-    border-left: none;
+  & > *:not(:first-child) > .button {
+    border-left-width: 1px;
+    border-left-style: solid;
+    border-left-color: color-mix(
+      in srgb,
+      var(--button-group-divider-color) calc(var(--button-group-divider-opacity) * 100%),
+      transparent
+    );
+  }
+
+  & > .button:not(:first-child):disabled,
+  & > *:not(:first-child) > .button:disabled {
+    border-left-color: var(--button-group-divider-color-disabled);
   }
 `;
 //# sourceMappingURL=ButtonGroup.js.map

package/lib/components/Button/variables.js

@@ -70,7 +70,7 @@ exports.button = (0, styled_components_1.css) `
   --button-font-weight: var(--font-weight-regular);
   --button-font-size: var(--font-size-base);
   --button-line-height: var(--line-height-base);
-  --button-border-radius: var(--border-radius-md);
+  --button-border-radius: var(--border-radius-lg);
   --button-padding: 5px var(--spacing-sm);
   --button-text-wrap: nowrap;
   --button-gap: var(--spacing-xs);
@@ -96,7 +96,7 @@ exports.button = (0, styled_components_1.css) `
   .button-size-small,
   .button-group-size-small .button {
     --button-font-size: var(--font-size-base);
-    --button-border-radius: var(--border-radius);
+    --button-border-radius: var(--border-radius-md);
     --button-padding: 1px var(--spacing-sm);
     --button-line-height: var(--line-height-base);
     
@@ -109,7 +109,7 @@ exports.button = (0, styled_components_1.css) `
   .button-size-medium,
   .button-group-size-medium .button {
     --button-font-size: var(--font-size-base);
-    --button-border-radius: var(--border-radius-md);
+    --button-border-radius: var(--border-radius-lg);
     --button-padding: 5px var(--spacing-sm);
     --button-line-height: var(--line-height-base);
 
@@ -122,7 +122,7 @@ exports.button = (0, styled_components_1.css) `
   .button-size-large,
   .button-group-size-large .button {
     --button-font-size: var(--font-size-lg); // @presenter FontSize
-    --button-border-radius: var(--border-radius-md);
+    --button-border-radius: var(--border-radius-xl);
     --button-padding: var(--spacing-xs) var(--spacing-md);
     --button-line-height: var(--line-height-lg); // @presenter LineHeight
     
@@ -243,6 +243,29 @@ exports.button = (0, styled_components_1.css) `
     --button-icon-right-padding: 0;
   }
 
+  /**
+    * @tokens Button group divider
+    */
+
+  --button-group-divider-color: transparent;
+  --button-group-divider-opacity: 1;
+  --button-group-divider-color-disabled: var(--color-warm-grey-2); // @presenter Color
+
+  .button-group-primary {
+    --button-group-divider-color: var(--button-content-color-inverse); // @presenter Color
+    --button-group-divider-opacity: 0.32;
+  }
+
+  .button-group-secondary {
+    --button-group-divider-color: var(--button-content-color); // @presenter Color
+    --button-group-divider-opacity: 0.12;
+  }
+
+  .button-group-outlined {
+    --button-group-divider-color: var(--button-border-color); // @presenter Color
+    --button-group-divider-opacity: 1;
+  }
+
   // @tokens End
 `;
 //# sourceMappingURL=variables.js.map

package/lib/components/Buttons/ConnectMCPButton.js

@@ -1,54 +1,24 @@
 "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.ConnectMCPButton = ConnectMCPButton;
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const DropdownMenu_1 = require("../../components/Dropdown/DropdownMenu");
 const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem");
+const DropdownMenuItemContent_1 = require("../../components/Dropdown/DropdownMenuItemContent");
 const Button_1 = require("../../components/Button/Button");
+const SplitButton_1 = require("../../components/SplitButton/SplitButton");
 const CursorIcon_1 = require("../../icons/CursorIcon/CursorIcon");
 const VSCodeIcon_1 = require("../../icons/VSCodeIcon/VSCodeIcon");
+const ClaudeIcon_1 = require("../../icons/ClaudeIcon/ClaudeIcon");
+const CodexIcon_1 = require("../../icons/CodexIcon/CodexIcon");
 const CopyIcon_1 = require("../../icons/CopyIcon/CopyIcon");
 const CheckmarkFilledIcon_1 = require("../../icons/CheckmarkFilledIcon/CheckmarkFilledIcon");
-const ChevronDownIcon_1 = require("../../icons/ChevronDownIcon/ChevronDownIcon");
-const ChevronUpIcon_1 = require("../../icons/ChevronUpIcon/ChevronUpIcon");
 const hooks_1 = require("../../core/hooks");
+const constants_1 = require("../../core/constants");
 const MENU_OPTIONS = [
     {
         key: 'cursor',
@@ -66,6 +36,22 @@ const MENU_OPTIONS = [
         descriptionTranslationKey: 'page.actions.connectMcp.vscodeDescription',
         descriptionDefault: 'Install MCP server on VS Code',
     },
+    {
+        key: 'claude-code',
+        icon: ClaudeIcon_1.ClaudeIcon,
+        titleTranslationKey: 'page.actions.connectMcp.claudeCode',
+        titleDefault: 'Connect to Claude Code',
+        descriptionTranslationKey: 'page.actions.connectMcp.claudeCodeDescription',
+        descriptionDefault: 'Copy the Claude Code CLI command',
+    },
+    {
+        key: 'codex',
+        icon: CodexIcon_1.CodexIcon,
+        titleTranslationKey: 'page.actions.connectMcp.codex',
+        titleDefault: 'Connect to Codex CLI',
+        descriptionTranslationKey: 'page.actions.connectMcp.codexDescription',
+        descriptionDefault: 'Copy the Codex CLI command',
+    },
     {
         key: 'copy',
         icon: CopyIcon_1.CopyIcon,
@@ -75,104 +61,34 @@ const MENU_OPTIONS = [
         descriptionDefault: 'Copy MCP JSON Configuration',
     },
 ];
-function ConnectMCPButton({ placement = 'bottom', alignment = 'end', options = ['cursor', 'vscode', 'copy'], }) {
+// Copy actions keep the dropdown open so the copied checkmark is visible.
+const COPY_OPTIONS = ['claude-code', 'codex', 'copy'];
+function ConnectMCPButton({ placement = 'bottom', alignment = 'end', options = constants_1.DEFAULT_MCP_OPTIONS, }) {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    const wrapperRef = (0, react_1.useRef)(null);
-    const { isCopied, visibleOptions, handleAction } = (0, hooks_1.useConnectMCPButton)({ options });
-    (0, hooks_1.useOutsideClick)(wrapperRef, () => setIsOpen(false));
+    const { copiedOption, visibleOptions, handleAction } = (0, hooks_1.useConnectMCPButton)({ options });
     const menuOptions = MENU_OPTIONS.filter((option) => visibleOptions.includes(option.key));
     const primaryOption = menuOptions[0];
     const dropdownOptions = menuOptions.slice(1);
     if (!primaryOption)
         return null;
     const PrimaryIcon = primaryOption.icon;
-    // When copy is the primary action there is no dropdown item to show the copied state, so the
-    // primary button itself must reflect it.
-    const showPrimaryCopied = primaryOption.key === 'copy' && isCopied;
-    const handleMenuAction = (key) => {
-        handleAction(key);
-        setIsOpen(false);
-    };
-    return (react_1.default.createElement(ConnectMCPButtonWrapper, { ref: wrapperRef, "data-component-name": "Buttons/ConnectMCPButton" },
-        react_1.default.createElement(SplitButtonGroup, null,
-            react_1.default.createElement(PrimaryButton, { variant: "secondary", icon: showPrimaryCopied ? (react_1.default.createElement(CheckmarkFilledIcon_1.CheckmarkFilledIcon, { color: "var(--color-success-base)" })) : (react_1.default.createElement(PrimaryIcon, null)), onClick: () => handleAction(primaryOption.key) }, translate(primaryOption.titleTranslationKey, primaryOption.titleDefault)),
-            dropdownOptions.length > 0 && (react_1.default.createElement(ChevronButton, { variant: "secondary", "aria-label": translate('page.actions.connectMcp.moreOptions', 'More options'), "aria-expanded": isOpen, "aria-haspopup": "menu", onClick: () => setIsOpen((prev) => !prev) }, isOpen ? react_1.default.createElement(ChevronUpIcon_1.ChevronUpIcon, null) : react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, null)))),
-        isOpen && dropdownOptions.length > 0 && (react_1.default.createElement(DropdownWrapper, { $placement: placement, $alignment: alignment },
-            react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, dropdownOptions.map((option) => {
-                const Icon = option.icon;
-                const showCheckmark = option.key === 'copy' && isCopied;
-                return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: option.key, onAction: () => handleMenuAction(option.key) },
-                    react_1.default.createElement(MenuItemContent, null,
-                        react_1.default.createElement(MenuItemIcon, null, showCheckmark ? (react_1.default.createElement(CheckmarkFilledIcon_1.CheckmarkFilledIcon, { color: "var(--color-success-base)" })) : (react_1.default.createElement(Icon, null))),
-                        react_1.default.createElement(MenuItemText, null,
-                            react_1.default.createElement(MenuItemTitle, null, translate(option.titleTranslationKey, option.titleDefault)),
-                            react_1.default.createElement(MenuItemDescription, null, translate(option.descriptionTranslationKey, option.descriptionDefault))))));
-            }))))));
+    const showPrimaryCopied = copiedOption === primaryOption.key;
+    return (react_1.default.createElement(ConnectMCPButtonWrapper, { "data-component-name": "Buttons/ConnectMCPButton" }, react_1.default.createElement(SplitButton_1.SplitButton, { variant: "secondary", placement: placement, alignment: alignment, closeOnSelect: false, toggleAriaLabel: translate('page.actions.connectMcp.moreOptions', 'More options'), button: react_1.default.createElement(Button_1.Button, { variant: "secondary", icon: showPrimaryCopied ? (react_1.default.createElement(CheckmarkFilledIcon_1.CheckmarkFilledIcon, { color: "var(--color-success-base)" })) : (react_1.default.createElement(PrimaryIcon, null)), onClick: () => handleAction(primaryOption.key) }, translate(primaryOption.titleTranslationKey, primaryOption.titleDefault)) }, dropdownOptions.length > 0
+        ? ({ close }) => (react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, dropdownOptions.map((option) => {
+            const Icon = option.icon;
+            const showCheckmark = copiedOption === option.key;
+            return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: option.key, onAction: () => {
+                    handleAction(option.key);
+                    if (!COPY_OPTIONS.includes(option.key)) {
+                        close();
+                    }
+                } }, react_1.default.createElement(DropdownMenuItemContent_1.DropdownMenuItemContent, { icon: showCheckmark ? (react_1.default.createElement(CheckmarkFilledIcon_1.CheckmarkFilledIcon, { color: "var(--color-success-base)" })) : (react_1.default.createElement(Icon, null)), title: translate(option.titleTranslationKey, option.titleDefault), description: translate(option.descriptionTranslationKey, option.descriptionDefault) })));
+        })))
+        : null)));
 }
 const ConnectMCPButtonWrapper = styled_components_1.default.div `
   display: inline-block;
   position: relative;
 `;
-const SplitButtonGroup = styled_components_1.default.div `
-  display: inline-flex;
-  align-items: stretch;
-`;
-const PrimaryButton = (0, styled_components_1.default)(Button_1.Button) `
-  --button-gap: var(--connect-mcp-button-gap);
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-`;
-const ChevronButton = (0, styled_components_1.default)(Button_1.Button) `
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  border-left: none;
-  padding-inline: var(--connect-mcp-button-chevron-padding-inline);
-`;
-const DropdownWrapper = styled_components_1.default.div `
-  position: absolute;
-  top: ${({ $placement }) => ($placement === 'top' ? 'auto' : '100%')};
-  bottom: ${({ $placement }) => ($placement === 'top' ? '100%' : 'auto')};
-  left: ${({ $alignment }) => ($alignment === 'start' ? '0' : 'auto')};
-  right: ${({ $alignment }) => ($alignment === 'end' ? '0' : 'auto')};
-  padding-top: var(--dropdown-menu-padding-top);
-  z-index: var(--dropdown-menu-z-index);
-`;
-const MenuItemContent = styled_components_1.default.div `
-  display: flex;
-  align-items: center;
-  gap: var(--connect-mcp-button-menu-item-gap);
-  padding: var(--connect-mcp-button-menu-item-padding-block)
-    var(--connect-mcp-button-menu-item-padding-inline);
-`;
-const MenuItemIcon = styled_components_1.default.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--connect-mcp-button-menu-item-icon-size);
-  height: var(--connect-mcp-button-menu-item-icon-size);
-  flex-shrink: 0;
-  border: var(--connect-mcp-button-menu-item-icon-border);
-  border-radius: var(--connect-mcp-button-menu-item-icon-border-radius);
-  color: var(--connect-mcp-button-menu-item-icon-color);
-`;
-const MenuItemText = styled_components_1.default.div `
-  display: flex;
-  flex-direction: column;
-  gap: var(--connect-mcp-button-menu-item-text-gap);
-  flex: 1;
-`;
-const MenuItemTitle = styled_components_1.default.div `
-  font-size: var(--connect-mcp-button-menu-item-title-font-size);
-  font-weight: var(--connect-mcp-button-menu-item-title-font-weight);
-  line-height: var(--connect-mcp-button-menu-item-title-line-height);
-  color: var(--connect-mcp-button-menu-item-title-color);
-`;
-const MenuItemDescription = styled_components_1.default.div `
-  font-size: var(--connect-mcp-button-menu-item-description-font-size);
-  font-weight: var(--connect-mcp-button-menu-item-description-font-weight);
-  line-height: var(--connect-mcp-button-menu-item-description-line-height);
-  color: var(--connect-mcp-button-menu-item-description-color);
-`;
 //# sourceMappingURL=ConnectMCPButton.js.map

package/lib/components/Buttons/CopyButton.js

@@ -44,9 +44,20 @@ function CopyButtonComponent({ data, type = 'icon', toasterPlacement = 'top', to
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const tooltip = (0, hooks_1.useControl)();
     const { translate } = useTranslate();
+    const closeTimerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            if (closeTimerRef.current) {
+                clearTimeout(closeTimerRef.current);
+            }
+        };
+    }, []);
     const showTooltip = (duration = 1500) => {
         tooltip.handleOpen();
-        setTimeout(() => {
+        if (closeTimerRef.current) {
+            clearTimeout(closeTimerRef.current);
+        }
+        closeTimerRef.current = setTimeout(() => {
             tooltip.handleClose();
         }, duration);
     };

package/lib/components/Buttons/variables.d.ts

@@ -1,2 +1 @@
 export declare const aiAssistantButton: import("styled-components").RuleSet<object>;
-export declare const connectMCPButton: import("styled-components").RuleSet<object>;

package/lib/components/Buttons/variables.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.connectMCPButton = exports.aiAssistantButton = void 0;
+exports.aiAssistantButton = void 0;
 const styled_components_1 = require("styled-components");
 /* eslint-disable theme/no-raw-colors-in-styles */
 exports.aiAssistantButton = (0, styled_components_1.css) `
@@ -48,49 +48,8 @@ exports.aiAssistantButton = (0, styled_components_1.css) `
 
   /* Transition */
   --ai-assistant-button-transition: box-shadow 0.3s ease, transform 0.2s ease;
-`;
-/* eslint-enable theme/no-raw-colors-in-styles */
-exports.connectMCPButton = (0, styled_components_1.css) `
-  /**
-   * @tokens Connect MCP Button
-   * @presenter Color
-   */
-
-  /* Button gap */
-  --connect-mcp-button-gap: var(--spacing-xs);
 
-  /* Chevron button */
-  --connect-mcp-button-chevron-padding-inline: var(--spacing-xs);
-
-  /* Menu item layout */
-  --connect-mcp-button-menu-item-gap: var(--spacing-sm);
-  --connect-mcp-button-menu-item-padding-block: var(--spacing-xxs);
-  --connect-mcp-button-menu-item-padding-inline: 0;
-
-  /* Menu item icon */
-  --connect-mcp-button-menu-item-icon-size: 32px;
-  --connect-mcp-button-menu-item-icon-border-color: var(--border-color-secondary);
-  --connect-mcp-button-menu-item-icon-border-style: solid;
-  --connect-mcp-button-menu-item-icon-border-width: 1px;
-  --connect-mcp-button-menu-item-icon-border: var(--connect-mcp-button-menu-item-icon-border-width)
-    var(--connect-mcp-button-menu-item-icon-border-style)
-    var(--connect-mcp-button-menu-item-icon-border-color);
-  --connect-mcp-button-menu-item-icon-border-radius: var(--border-radius);
-  --connect-mcp-button-menu-item-icon-color: var(--icon-color-secondary);
-
-  /* Menu item text */
-  --connect-mcp-button-menu-item-text-gap: var(--spacing-xxs);
-
-  /* Menu item title */
-  --connect-mcp-button-menu-item-title-font-size: var(--font-size-base);
-  --connect-mcp-button-menu-item-title-font-weight: var(--font-weight-regular);
-  --connect-mcp-button-menu-item-title-line-height: var(--line-height-base);
-  --connect-mcp-button-menu-item-title-color: var(--text-color-secondary);
-
-  /* Menu item description */
-  --connect-mcp-button-menu-item-description-font-size: var(--font-size-sm);
-  --connect-mcp-button-menu-item-description-font-weight: var(--font-weight-regular);
-  --connect-mcp-button-menu-item-description-line-height: var(--line-height-sm);
-  --connect-mcp-button-menu-item-description-color: var(--text-color-description);
+  // @tokens End
 `;
+/* eslint-enable theme/no-raw-colors-in-styles */
 //# sourceMappingURL=variables.js.map

package/lib/components/Catalog/CatalogEntities.js

@@ -70,6 +70,7 @@ function CatalogEntities(props) {
     const shouldShowLoadMore = query.hasNextPage ||
         (query.isPlaceholderData && entities && entities.length >= LOAD_MORE_THRESHOLD);
     (0, react_1.useEffect)(() => {
+        // oxlint-disable-next-line react-you-might-not-need-an-effect/no-pass-data-to-parent -- the entities query lives in this ejectable component; the fetched total is mirrored up so the portal page header can show the count
         setEntitiesCounter(total || 0);
     }, [total, setEntitiesCounter]);
     if (!query.isPending && (!entities || entities.length === 0)) {

package/lib/components/Catalog/CatalogEntity/CatalogEntityLinks.js

@@ -29,7 +29,7 @@ function CatalogEntityLinks({ entity }) {
 const LinksWrapper = styled_components_1.default.div `
   display: flex;
   flex-direction: column;
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-xl);
   background-color: var(--catalog-metadata-bg-color);
   transition: all 0.2s ease-in-out;
   margin: var(--spacing-lg) 0;

package/lib/components/Catalog/CatalogEntity/CatalogEntityMetadata.js

@@ -90,7 +90,7 @@ const JsonViewerWrapper = (0, styled_components_1.default)(JsonViewer_1.JsonView
 const MetadataWrapper = styled_components_1.default.div `
   display: flex;
   flex-direction: column;
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-xl);
   background-color: var(--catalog-metadata-bg-color);
   transition: all 0.2s ease-in-out;
   margin-bottom: var(--spacing-base);