@redocly/theme 0.69.0-next.5 → 0.69.0-next.7

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/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;
 

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,55 +1,22 @@
 "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 = [
@@ -99,10 +66,7 @@ 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 { copiedOption, visibleOptions, handleAction } = (0, hooks_1.useConnectMCPButton)({ options });
-    (0, hooks_1.useOutsideClick)(wrapperRef, () => setIsOpen(false));
     const menuOptions = MENU_OPTIONS.filter((option) => visibleOptions.includes(option.key));
     const primaryOption = menuOptions[0];
     const dropdownOptions = menuOptions.slice(1);
@@ -110,98 +74,21 @@ function ConnectMCPButton({ placement = 'bottom', alignment = 'end', options = c
         return null;
     const PrimaryIcon = primaryOption.icon;
     const showPrimaryCopied = copiedOption === primaryOption.key;
-    const handleMenuAction = (key) => {
-        handleAction(key);
-        if (!COPY_OPTIONS.includes(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 = copiedOption === option.key;
-                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))))));
-            }))))));
+    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;
-`;
-/* Doubled selectors outrank the base button class in any style injection order,
-   and margin: 0 keeps themed button margins from splitting the group apart. */
-const PrimaryButton = (0, styled_components_1.default)(Button_1.Button) `
-  && {
-    --button-gap: var(--connect-mcp-button-gap);
-    margin: 0;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-`;
-const ChevronButton = (0, styled_components_1.default)(Button_1.Button) `
-  && {
-    margin: 0;
-    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/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);

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

@@ -34,7 +34,7 @@ const PathLabel = styled_components_1.default.label `
 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: 0 0 var(--spacing-base) 0;

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

@@ -68,7 +68,7 @@ function CatalogEntitySchema({ entity, relatedEntity, RedocSchema, StoreProvider
 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);
   margin-bottom: var(--spacing-lg);
 `;

package/lib/components/Catalog/CatalogFilter/CatalogFilterSelect.js

@@ -116,6 +116,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/Catalog/variables.js

@@ -192,7 +192,7 @@ exports.catalog = (0, styled_components_1.css) `
     */
   --catalog-sort-trigger-gap: var(--spacing-xs);
   --catalog-sort-trigger-padding: 6px 8px;
-  --catalog-sort-trigger-border-radius: var(--border-radius-md);
+  --catalog-sort-trigger-border-radius: var(--border-radius-lg);
   --catalog-sort-trigger-hover-bg-color: var(--button-bg-color-secondary-hover);
   --catalog-sort-icon-color: var(--text-color-secondary);
   --catalog-sort-text-font-size: var(--font-size-sm);
@@ -222,7 +222,7 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-card-border-width: var(--border-width);
   --catalog-card-border-style: var(--border-style);
   --catalog-card-border-color-hover: var(--border-color-primary);
-  --catalog-card-border-radius: var(--border-radius-lg);
+  --catalog-card-border-radius: var(--border-radius-xl);
   --catalog-cards-group-margin: 0 0 var(--spacing-base) 0;
   --catalog-cards-group-gap: var(--spacing-lg);
 
@@ -231,7 +231,7 @@ exports.catalog = (0, styled_components_1.css) `
     */
   --catalog-card-icon-width: 30px;
   --catalog-card-icon-height: 30px;
-  --catalog-card-icon-border-radius: 4px;
+  --catalog-card-icon-border-radius: var(--border-radius);
   --catalog-card-icon-bg-color: var(--bg-color);
   --catalog-card-icon-border-color: var(--border-color-secondary);
   --catalog-card-icon-border-width: 1px;
@@ -309,7 +309,7 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-actions-min-height: 40px;
   --catalog-actions-bg-color: var(--bg-color-tonal);
 
-  --catalog-page-badge-border-radius: var(--border-radius);
+  --catalog-page-badge-border-radius: var(--badge-border-radius);
   --catalog-page-badge-padding: 0 var(--spacing-xs);
   --catalog-page-badge-font-size: var(--font-size-base);
   --catalog-page-badge-line-height: var(--line-height-base);
@@ -345,7 +345,7 @@ exports.catalog = (0, styled_components_1.css) `
     */
   --catalog-table-icon-width: 32px;
   --catalog-table-icon-height: 32px;
-  --catalog-table-icon-border-radius: 4px;
+  --catalog-table-icon-border-radius: var(--border-radius);
   --catalog-table-icon-bg-color: var(--bg-color-tonal);
   --catalog-table-icon-border-color: var(--border-color-secondary);
   --catalog-table-icon-border-width: 1px;

package/lib/components/CatalogClassic/variables.js

@@ -59,7 +59,7 @@ exports.catalogClassic = (0, styled_components_1.css) `
   --catalog-classic-card-border-width: var(--border-width);
   --catalog-classic-card-border-style: var(--border-style);
   --catalog-classic-card-border-color-hover: var(--border-color-primary);
-  --catalog-classic-card-border-radius: var(--border-radius-xxl);
+  --catalog-classic-card-border-radius: var(--border-radius-xl);
   --catalog-classic-cards-group-margin: 0 0 var(--spacing-base) 0;
   --catalog-classic-cards-group-gap: var(--spacing-xl);
 
@@ -96,7 +96,7 @@ exports.catalogClassic = (0, styled_components_1.css) `
   --catalog-classic-actions-min-height: 40px;
   --catalog-classic-actions-bg-color: var(--bg-color-tonal);
 
-  --catalog-classic-page-badge-border-radius: var(--border-radius);
+  --catalog-classic-page-badge-border-radius: var(--border-radius-md);
   --catalog-classic-page-badge-padding: 0 var(--spacing-xs);
   --catalog-classic-page-badge-font-size: var(--font-size-base);
   --catalog-classic-page-badge-line-height: var(--line-height-base);

package/lib/components/CodeBlock/CodeBlock.js

@@ -98,6 +98,7 @@ function CodeBlock(_a) {
         var _a, _b;
         const _source = source || ((_b = (_a = externalSource === null || externalSource === void 0 ? void 0 : externalSource.sample) === null || _a === void 0 ? void 0 : _a.get) === null || _b === void 0 ? void 0 : _b.call(_a, externalSource));
         if (_source) {
+            // oxlint-disable-next-line react-you-might-not-need-an-effect/no-derived-state
             setSourceCode(_source);
         }
     }, [source, externalSource]);
@@ -128,7 +129,7 @@ const ContainerWrapper = styled_components_1.default.div `
 `;
 const CodeBlockWrapper = styled_components_1.default.div `
   border: 1px solid var(--border-color-secondary);
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-xl);
   background-color: var(--code-block-bg-color);
   margin: 0 0 var(--spacing-sm);
 

package/lib/components/CodeBlock/CodeBlockContainer.js

@@ -68,6 +68,7 @@ const CodeBlockContainerComponent = styled_components_1.default.pre `
     white-space: ${({ $wrapContents }) => ($wrapContents ? 'pre-wrap' : 'var(--code-wrap, pre)')};
     max-height: ${({ $maxHeight }) => $maxHeight ? $maxHeight : 'var(--code-block-max-height, 600px);'};
     word-break: var(--code-block-word-break, initial);
+    border-radius: var(--border-radius-xl);
 
     pre,
     code {

package/lib/components/Dropdown/Dropdown.d.ts

@@ -1,7 +1,12 @@
 import React from 'react';
-import type { PropsWithChildren } from 'react';
-export type DropdownProps = PropsWithChildren<{
+import type { RenderableChildren } from '../../core/types';
+type DropdownMenuContext = {
+    close: () => void;
+    isOpen: boolean;
+};
+export type DropdownProps = {
     trigger: React.ReactNode;
+    children: RenderableChildren<DropdownMenuContext>;
     triggerEvent?: 'click' | 'hover';
     placement?: 'top' | 'bottom';
     alignment?: 'start' | 'end';
@@ -14,21 +19,6 @@ export type DropdownProps = PropsWithChildren<{
     onClick?: (event: React.UIEvent) => void;
     onClose?: () => void;
     onOpen?: () => void;
-}>;
-export declare const Dropdown: React.ForwardRefExoticComponent<{
-    trigger: React.ReactNode;
-    triggerEvent?: 'click' | 'hover';
-    placement?: 'top' | 'bottom';
-    alignment?: 'start' | 'end';
-    active?: boolean;
-    closeOnClick?: boolean;
-    dataAttributes?: Record<string, string>;
-    className?: string;
-    withArrow?: boolean;
-    portalled?: boolean;
-    onClick?: (event: React.UIEvent) => void;
-    onClose?: () => void;
-    onOpen?: () => void;
-} & {
-    children?: React.ReactNode | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
+};
+export declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>>;
+export {};