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

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

package/lib/components/Product/variables.js

@@ -27,7 +27,7 @@ exports.productPicker = (0, styled_components_1.css) `
   --product-picker-dropdown-item-padding-vertical: var(--dropdown-menu-item-padding-vertical); // @presenter Spacing
   --product-picker-dropdown-item-separator-padding-top: var(--dropdown-menu-item-separator-padding-top ); // @presenter Spacing
   --product-picker-dropdown-item-separator-padding-bottom: var(--dropdown-menu-item-separator-padding-bottom ); // @presenter Spacing
-  --product-picker-dropdown-item-border-radius: var(--dropdown-menu-item-border-radius ); // @presenter BorderRadius
+  --product-picker-dropdown-item-border-radius: var(--dropdown-menu-item-border-radius); // @presenter BorderRadius
   --product-picker-dropdown-item-bg-color-active: var(--dropdown-menu-item-bg-color-active); // @presenter Color
   --product-picker-dropdown-item-bg-color-hover: var(--dropdown-menu-item-bg-color-hover); // @presenter Color
   --product-picker-dropdown-item-bg-color-disabled: var(--dropdown-menu-item-bg-color-disabled); // @presenter Color
@@ -38,5 +38,6 @@ exports.productPicker = (0, styled_components_1.css) `
   --product-picker-dropdown-item-color-hover: var(--dropdown-menu-item-color-hover);
   --product-picker-dropdown-item-border-color-focused: var(--dropdown-menu-item-border-color-focused);
 
+  // @tokens End
 `;
 //# sourceMappingURL=variables.js.map

package/lib/components/ReplayGate/ReplayGate.d.ts

@@ -7,6 +7,7 @@ export type ReplayGateProps = {
     setSelectedEnvironment: (envName: string) => void;
     selectedEnvironment?: string;
     apiId?: string;
+    onClose: () => void;
     children: React.ReactNode;
 };
 export declare function ReplayGate({ children }: ReplayGateProps): React.JSX.Element;

package/lib/components/Search/SearchAiMessage.js

@@ -218,7 +218,7 @@ const MessageWrapper = styled_components_1.default.div `
   padding: ${({ $role }) => $role === constants_2.AiSearchConversationRole.USER
     ? 'var(--spacing-sm)'
     : 'var(--spacing-sm) var(--spacing-sm) var(--spacing-xs) var(--spacing-sm)'};
-  border-radius: var(--border-radius-lg);
+  border-radius: var(--border-radius-xl);
   width: fit-content;
   max-width: 100%;
   word-wrap: break-word;

package/lib/components/Search/SearchAiNegativeFeedbackForm.js

@@ -93,7 +93,7 @@ const FeedbackFormWrapper = styled_components_1.default.div `
   padding: var(--spacing-xs);
   background: var(--search-ai-feedback-form-bg-color);
   border: 1px solid var(--search-ai-feedback-form-border-color);
-  border-radius: var(--border-radius-lg);
+  border-radius: var(--border-radius-xl);
 `;
 const FeedbackHeader = styled_components_1.default.div `
   display: flex;
@@ -128,7 +128,7 @@ const FeedbackTextArea = styled_components_1.default.textarea `
   padding: var(--spacing-xs);
   padding-right: 3rem;
   border: 1px solid var(--border-color-primary);
-  border-radius: var(--border-radius-md);
+  border-radius: var(--border-radius-lg);
   font-family: inherit;
   font-size: var(--font-size-base);
   line-height: var(--line-height-base);

package/lib/components/Search/SearchDialog.js

@@ -396,7 +396,6 @@ const SearchMessage = styled_components_1.default.div `
   gap: var(--search-message-gap);
 `;
 const SearchProductTag = (0, styled_components_1.default)(Tag_1.Tag) `
-  --tag-border-radius: var(--border-radius);
   border: none;
   margin: var(--spacing-xs) var(--spacing-sm) !important;
 `;
@@ -462,6 +461,7 @@ const SearchWithAI = styled_components_1.default.div `
   outline: none;
   border-top: 1px solid var(--search-item-border-color);
   border-bottom: 1px solid var(--search-item-border-color);
+  border-radius: var(--search-item-border-radius);
 
   transition: all 0.3s ease;
 

package/lib/components/Search/SearchItem.js

@@ -113,6 +113,7 @@ const SearchItemWrapper = (0, styled_components_1.default)(Link_1.Link) `
   outline: none;
   border-top: 1px solid var(--search-item-border-color);
   border-bottom: 1px solid var(--search-item-border-color);
+  border-radius: var(--search-item-border-radius);
 
   ${ReturnKeyIcon_1.ReturnKeyIcon} {
     align-self: center;

package/lib/components/Search/SearchRecent.js

@@ -97,6 +97,7 @@ const SearchRecentItem = styled_components_1.default.div `
   font-weight: var(--search-recent-item-font-weight);
   line-height: var(--search-recent-item-line-height);
   padding: var(--search-recent-item-padding);
+  border-radius: var(--search-recent-item-border-radius);
   color: var(--search-recent-item-text-color);
   cursor: pointer;
 

package/lib/components/Search/SearchSuggestedPages.js

@@ -80,6 +80,7 @@ const SearchSuggestedItem = (0, styled_components_1.default)(Link_1.Link) `
   line-height: var(--search-suggested-item-line-height);
   color: var(--search-suggested-item-text-color);
   padding: var(--search-suggested-item-padding);
+  border-radius: var(--search-suggested-item-border-radius);
   cursor: pointer;
 
   &:hover {

package/lib/components/Search/variables.js

@@ -11,7 +11,7 @@ exports.search = (0, styled_components_1.css) `
   --search-modal-min-height: 705px;
   --search-modal-bg-color: var(--modal-bg-color);
   --search-modal-box-shadow: var(--modal-box-shadow);
-  --search-modal-border-radius: var(--border-radius-lg);
+  --search-modal-border-radius: var(--border-radius-xxl);
   --search-modal-border: 1px solid var(--border-color-secondary);
 
   --search-modal-header-bg-color: var(--bg-color-tonal); // @presenter Color
@@ -35,7 +35,7 @@ exports.search = (0, styled_components_1.css) `
   --search-input-gap: var(--spacing-sm);
   --search-input-height: 40px;
   --search-input-border: none;
-  --search-input-border-radius: var(--border-radius); // @presenter BorderRadius
+  --search-input-border-radius: var(--border-radius-xl); // @presenter BorderRadius
 
   --search-group-title-padding: var(--spacing-sm);
   --search-group-title-bg-color: var(--bg-color-tonal); // @presenter Color
@@ -54,6 +54,7 @@ exports.search = (0, styled_components_1.css) `
   --search-item-bg-color-hover: var(--layer-color-ontonal-hover); // @presenter Color
   --search-item-border-color-focused: var(--color-blue-4); // @presenter Color
   --search-item-border-color: transparent; // @presenter Color
+  --search-item-border-radius: var(--border-radius-lg);
   --search-item-padding: var(--spacing-sm) var(--spacing-lg);
   --search-item-gap: var(--spacing-xxs);
   --search-item-product-icon-size: 16px;
@@ -72,6 +73,7 @@ exports.search = (0, styled_components_1.css) `
   --search-recent-item-title-padding: var(--spacing-md) var(--spacing-lg) var(--spacing-xxs) var(--spacing-lg); // @presenter Color
   --search-recent-item-bg-color-active: var(--layer-color); // @presenter Color
   --search-recent-item-border-color-focused: var(--color-blue-4); // @presenter Color
+  --search-recent-item-border-radius: var(--search-item-border-radius);
 
   --search-suggested-item-font-size: var(--font-size-base); // @presenter FontSize
   --search-suggested-item-font-weight: var(--font-weight-regular); // @presenter FontWeight
@@ -87,6 +89,7 @@ exports.search = (0, styled_components_1.css) `
   --search-suggested-item-title-padding: var(--spacing-md) var(--spacing-lg) var(--spacing-xxs) var(--spacing-lg); // @presenter Color
   --search-suggested-item-bg-color-active: var(--layer-color); // @presenter Color
   --search-suggested-item-border-color-focused: var(--color-blue-4); // @presenter Color
+  --search-suggested-item-border-radius: var(--search-item-border-radius);
 
   --search-shortcuts-gap: var(--spacing-xs);
 
@@ -134,7 +137,7 @@ exports.search = (0, styled_components_1.css) `
   --search-trigger-border-style: var(--border-style);
   --search-trigger-border-color: var(--input-border-color);
   --search-trigger-border-color-hover: var(--input-border-color-hover);
-  --search-trigger-border-radius: var(--border-radius-md);
+  --search-trigger-border-radius: var(--border-radius-lg);
   --search-trigger-padding-vertical: var(--input-padding-vertical);
   --search-trigger-padding-horizontal: var(--input-padding-horizontal);
   --search-trigger-padding: var(--search-trigger-padding-vertical) var(--search-trigger-padding-horizontal);
@@ -245,7 +248,7 @@ exports.search = (0, styled_components_1.css) `
   --search-ai-conversation-input-bg-color-disabled: var(--color-warm-grey-1);
   --search-ai-conversation-input-padding: var(--spacing-sm) var(--spacing-md);
   --search-ai-conversation-input-border: 1px solid var(--border-color-secondary);
-  --search-ai-conversation-input-border-radius: var(--border-radius-lg);
+  --search-ai-conversation-input-border-radius: var(--border-radius-xl);
   --search-ai-conversation-input-font-size: var(--font-size-base);
   --search-ai-conversation-input-placeholder-color: var(--search-input-placeholder-color);
   --search-ai-conversation-input-border-color-focus: var(--color-primary-base, var(--search-ai-conversation-input-border-color-focus-legacy));
@@ -253,7 +256,7 @@ exports.search = (0, styled_components_1.css) `
 
   --search-ai-conversation-input-send-button-right: 12px;
   --search-ai-conversation-input-send-button-padding: 5px;
-  --search-ai-conversation-input-send-button-border-radius: var(--border-radius);
+  --search-ai-conversation-input-send-button-border-radius: var(--border-radius-md);
   --search-ai-conversation-input-send-button-border-disabled: 1px solid var(--button-border-color-disabled);
 
   --search-ai-conversation-input-min-height: 48px;

package/lib/components/Segmented/Segmented.js

@@ -38,7 +38,7 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const typed_memo_1 = require("../../core/hoc/typed-memo");
 function SegmentedComponent({ options, onChange, value, className = '', size = 'regular' }, ref) {
-    return (react_1.default.createElement(SegmentedGroup, { ref: ref, "data-component-name": "Segmented/Segmented", className: `tag-grey ${size} ${className}`, role: "tablist" }, options.map((opt, index) => (react_1.default.createElement(react_1.default.Fragment, { key: index },
+    return (react_1.default.createElement(SegmentedGroup, { ref: ref, "data-component-name": "Segmented/Segmented", className: `tag-grey ${size} ${className}`, role: "tablist", $size: size }, options.map((opt, index) => (react_1.default.createElement(react_1.default.Fragment, { key: index },
         opt.divider,
         react_1.default.createElement(SegmentedItem, { key: opt.label, role: "tab", title: opt.label, onClick: () => onChange(opt), $isActive: value == opt.value, $size: size }, opt.element || opt.label))))));
 }
@@ -48,7 +48,7 @@ const SegmentedGroup = styled_components_1.default.div `
   background: var(--segmented-buttons-bg-color-main);
   padding: calc(var(--spacing-xxs) / 2);
   gap: calc(var(--spacing-xxs) / 2);
-  border-radius: var(--border-radius-md);
+  border-radius: ${({ $size }) => $size === 'small' ? 'var(--border-radius-md)' : 'var(--border-radius-lg)'};
   max-width: 100%;
   width: fit-content;
 `;
@@ -75,7 +75,7 @@ const SegmentedItem = styled_components_1.default.button `
           cursor: pointer;
         `}
   line-height: var(--segmented-line-height);
-  border-radius: var(--border-radius);
+  border-radius: ${({ $size }) => $size === 'small' ? 'var(--border-radius)' : 'var(--border-radius-md)'};
   padding: ${({ $size }) => ($size === 'small' ? 0 : '3px')} var(--spacing-sm);
   white-space: nowrap;
   text-overflow: ellipsis;

package/lib/components/Select/Select.js

@@ -78,25 +78,27 @@ function Select(props) {
         setSelectedOptions(getSelectedOptionsFromPropsValue());
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [multiple, value]);
-    (0, react_1.useEffect)(() => {
+    const changeSearchValue = (newSearchValue) => {
+        if (newSearchValue === searchValue) {
+            return;
+        }
+        setSearchValue(newSearchValue);
         if (onSearch) {
-            onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchValue);
+            onSearch(newSearchValue);
+            return;
+        }
+        if (typeof newSearchValue === 'string') {
+            setFilteredOptions(options.filter((option) => {
+                var _a, _b;
+                const valueForSearch = String((_b = (_a = option.label) !== null && _a !== void 0 ? _a : option.value) !== null && _b !== void 0 ? _b : '');
+                return (!valueForSearch ||
+                    valueForSearch.toLowerCase().indexOf(newSearchValue.toLowerCase()) > -1);
+            }));
         }
         else {
-            if (typeof searchValue === 'string') {
-                const filteredOptions = options.filter((option) => {
-                    var _a, _b;
-                    const valueForSearch = String((_b = (_a = option.label) !== null && _a !== void 0 ? _a : option.value) !== null && _b !== void 0 ? _b : '');
-                    return (!valueForSearch || valueForSearch.toLowerCase().indexOf(searchValue.toLowerCase()) > -1);
-                });
-                setFilteredOptions(filteredOptions);
-            }
-            else {
-                setFilteredOptions(options);
-            }
+            setFilteredOptions(options);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [searchValue]);
+    };
     const selectHandler = (selectedOption) => {
         var _a;
         const newSelectedOptions = multiple
@@ -113,7 +115,7 @@ function Select(props) {
                 : '';
         setSelectedOptions(newSelectedOptions);
         onChange === null || onChange === void 0 ? void 0 : onChange(newSelectedValues);
-        setSearchValue(null);
+        changeSearchValue(null);
         setDropdownActive(false);
         if (!multiple) {
             setStickyInputValue('');
@@ -122,7 +124,7 @@ function Select(props) {
     };
     const searchHandler = (e) => {
         const targetValue = e.target.value;
-        setSearchValue(targetValue);
+        changeSearchValue(targetValue);
         setDropdownActive(true);
     };
     const clearHandler = (option) => {
@@ -146,7 +148,7 @@ function Select(props) {
             if (!e.relatedTarget || ((_b = e.relatedTarget) === null || _b === void 0 ? void 0 : _b.id) !== inputId) {
                 setDropdownActive(false);
             }
-            setSearchValue(null);
+            changeSearchValue(null);
             setStickyInputValue('');
         }
     };

package/lib/components/Select/variables.js

@@ -10,7 +10,7 @@ exports.select = (0, styled_components_1.css) `
   --select-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --select-line-height: var(--line-height-base); // @presenter LineHeight
   --select-text-color: var(--text-color-secondary); // @presenter Color
-  --select-border-radius: var(--border-radius); // @presenter BorderRadius
+  --select-border-radius: var(--border-radius-lg); // @presenter BorderRadius
   --select-border: var(--border-width) var(--border-style) var(--border-color-primary); // @presenter Border
   
   --select-input-padding-vertical: 6px; // @presenter Spacing
@@ -18,7 +18,7 @@ exports.select = (0, styled_components_1.css) `
   --select-input-padding: var(--select-input-padding-vertical) var(--select-input-padding-horizontal);
   --select-input-gap: var(--spacing-xs); // @presenter Spacing
   --select-input-value-gap: var(--spacing-unit); // @presenter Spacing
-  --select-input-border-radius: var(--border-radius); // @presenter BorderRadius
+  --select-input-border-radius: var(--border-radius-lg); // @presenter BorderRadius
   --select-input-font-size: var(--font-size-base); // @presenter FontSize
   --select-input-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --select-input-line-height: var(--line-height-base); // @presenter LineHeight
@@ -37,7 +37,7 @@ exports.select = (0, styled_components_1.css) `
   --select-list-item-padding: var(--select-list-item-padding-vertical) var(--select-list-item-padding-horizontal);
 
   --select-list-item-gap: var(--spacing-xs); // @presenter Spacing
-  --select-list-item-border-radius: var(--border-radius); // @presenter BorderRadius
+  --select-list-item-border-radius: var(--border-radius-md); // @presenter BorderRadius
   --select-list-item-bg-color-active: transparent; // @presenter Color
   --select-list-item-bg-color-hover: var(--menu-item-bg-color-hover); // @presenter Color
   --select-list-item-font-weight-active: var(--font-weight-medium); // @presenter Color  

package/lib/components/SplitButton/SplitButton.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { ComponentProps, JSX } from 'react';
+import type { ButtonProps } from '../../components/Button/Button';
+import type { ButtonGroupSize, ButtonGroupVariant } from '../../core/types';
+import { Dropdown } from '../../components/Dropdown/Dropdown';
+export type SplitButtonProps = {
+    button: React.ReactElement<ButtonProps>;
+    children: ComponentProps<typeof Dropdown>['children'];
+    variant?: ButtonGroupVariant;
+    size?: ButtonGroupSize;
+    placement?: 'top' | 'bottom';
+    alignment?: 'start' | 'end';
+    portalled?: boolean;
+    closeOnSelect?: boolean;
+    disabled?: boolean;
+    toggleAriaLabel: string;
+    onOpen?: () => void;
+    onClose?: () => void;
+    className?: string;
+};
+export declare function SplitButton(props: SplitButtonProps): JSX.Element;

package/lib/components/SplitButton/SplitButton.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SplitButton = SplitButton;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Button_1 = require("../../components/Button/Button");
+const ButtonGroup_1 = require("../../components/Button/ButtonGroup");
+const Dropdown_1 = require("../../components/Dropdown/Dropdown");
+function SplitButton(props) {
+    const { button, children, variant, size, placement = 'bottom', alignment = 'end', portalled, closeOnSelect = true, disabled, toggleAriaLabel, onOpen, onClose, className, } = props;
+    const hasMenu = typeof children === 'function' || react_1.default.Children.toArray(children).length > 0;
+    return (react_1.default.createElement(SplitButtonWrapper, { "data-component-name": "SplitButton/SplitButton", className: className },
+        react_1.default.createElement(ButtonGroup_1.ButtonGroup, { variant: variant, size: size },
+            button,
+            hasMenu ? (react_1.default.createElement(ToggleDropdown, { closeOnClick: closeOnSelect, placement: placement, alignment: alignment, portalled: portalled, withArrow: true, onOpen: onOpen, onClose: onClose, trigger: react_1.default.createElement(Button_1.Button, { "aria-label": toggleAriaLabel, "aria-haspopup": "menu", variant: variant, size: size, disabled: disabled }) }, children)) : null)));
+}
+const SplitButtonWrapper = styled_components_1.default.div `
+  position: relative;
+  display: inline-flex;
+
+  /* Themed button margins must not split the group apart. Direct-child chains
+     keep the rule off buttons rendered inside the dropdown menu. */
+  > * > .button,
+  > * > * > .button {
+    margin: 0;
+  }
+`;
+/* The non-portalled menu is absolutely positioned against the nearest positioned
+   ancestor; keep the dropdown segment static so that ancestor is the whole
+   split button rather than the toggle segment. */
+const ToggleDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown) `
+  position: static;
+`;
+//# sourceMappingURL=SplitButton.js.map

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

@@ -16,7 +16,7 @@ exports.switcherDarkMode = (0, styled_components_1.css) `
     --switch-border-color-disabled: var(--color-warm-grey-5); // @presenter Color
     --switch-border-color-selected: var(--color-primary-base, var(--switch-border-color-selected-legacy)); // @presenter Color
     --switch-border-width: var(--border-width); // @presenter Border
-    --switch-border-radius: var(--border-radius); // @presenter BorderRadius
+    --switch-border-radius: var(--border-radius-full); // @presenter BorderRadius
 
     --switch-width: 32px; // @presenter Width
     --switch-height: 18px; // @presenter Height
@@ -29,7 +29,7 @@ exports.switcherDarkMode = (0, styled_components_1.css) `
     --switch-knob-bg-color-selected: var(--color-static-white); // @presenter Color
     --switch-knob-bg-color-disabled: var(--color-warm-grey-6); // @presenter Color
 
-    --switch-knob-border-radius: calc(var(--border-radius) / 2); // @presenter BorderRadius
+    --switch-knob-border-radius: var(--border-radius-full); // @presenter BorderRadius
     --switch-knob-height: 14px; // @presenter Height
     --switch-knob-width: 14px; // @presenter Width
     --switch-knob-transition: all 0.3s; // @presenter Transition

package/lib/components/Switch/variables.js

@@ -15,7 +15,7 @@ exports.switcher = (0, styled_components_1.css) `
     --switch-border-color-pressed: transparent; // @presenter Color
     --switch-border-color-disabled: transparent; // @presenter Color
     --switch-border-color-selected: transparent; // @presenter Color
-    --switch-border-radius: var(--border-radius); // @presenter BorderRadius
+    --switch-border-radius: var(--border-radius-full); // @presenter BorderRadius
     --switch-border-width: var(--border-width); // @presenter Border
 
     --switch-width: 32px; // @presenter Width
@@ -29,7 +29,7 @@ exports.switcher = (0, styled_components_1.css) `
     --switch-knob-bg-color-selected: var(--color-white); // @presenter Color
     --switch-knob-bg-color-disabled: var(--color-warm-grey-1); // @presenter Color
 
-    --switch-knob-border-radius: calc(var(--border-radius) / 2); // @presenter BorderRadius
+    --switch-knob-border-radius: var(--border-radius-full); // @presenter BorderRadius
     --switch-knob-height: 14px; // @presenter Height
     --switch-knob-width: 14px; // @presenter Width
     --switch-knob-transition: transform 0.3s; // @presenter Transition

package/lib/components/Tag/variables.js

@@ -10,9 +10,9 @@ exports.tag = (0, styled_components_1.css) `
 
   --tag-border-width: 1px; //@presenter Border
   --tag-border-style: solid; //@presenter Border
-  --tag-border-radius: var(--border-radius); // @presenter BorderRadius
+  --tag-border-radius: var(--border-radius-md); // @presenter BorderRadius
   --tag-box-shadow: none; // @presenter Shadow
-  --tag-border-radius-focused: var(--border-radius); // @presenter BorderRadius
+  --tag-border-radius-focused: var(--tag-border-radius); // @presenter BorderRadius
 
   --tag-status-dot-color-default: var(--color-persian-green-7);
   --tag-badge-size: var(--spacing-xs);

package/lib/components/Tags/variables.js

@@ -15,7 +15,7 @@ exports.httpTag = (0, styled_components_1.css) `
   --http-tag-bg-color: none;
 
   --counter-tag-padding: 0px var(--spacing-xxs);
-  --counter-tag-border-radius: var(--border-radius);
+  --counter-tag-border-radius: var(--tag-border-radius);
   --counter-tag-min-width: var(--spacing-md);
 `;
 //# sourceMappingURL=variables.js.map

package/lib/components/Toast/variables.js

@@ -18,7 +18,7 @@ exports.toast = (0, styled_components_1.css) `
   --toast-max-width: 360px;
   --toast-bg-color: var(--layer-color); // @presenter Color
   --toast-border: var(--border-width) var(--border-style) var(--border-color-secondary); // @presenter Border
-  --toast-border-radius: var(--border-radius-md); // @presenter BorderRadius
+  --toast-border-radius: var(--border-radius-lg); // @presenter BorderRadius
   --toast-font-family: var(--font-family-base); // @presenter FontFamily
 
   /**

package/lib/components/Tooltip/AnchorTooltip.js

@@ -209,7 +209,7 @@ const TooltipBody = styled_components_1.default.span.attrs(({ $anchorName }) =>
   overflow-wrap: break-word;
   text-align: left;
 
-  border-radius: var(--border-radius-md);
+  border-radius: var(--border-radius-lg);
   transition: opacity 0.3s ease-out;
 
   font-size: var(--font-size-base);
@@ -229,7 +229,7 @@ const TooltipBody = styled_components_1.default.span.attrs(({ $anchorName }) =>
 
   background: var(--tooltip-bg-color);
   color: var(--tooltip-text-color);
-  border: var(--tooltip-border-width, 0) var(--tooltip-border-style, solid)
+  border: var(--tooltip-border-width, 2px) var(--tooltip-border-style, solid)
     var(--tooltip-border-color, transparent);
   box-shadow: var(--bg-raised-shadow);
 

package/lib/components/Tooltip/JsTooltip.js

@@ -227,7 +227,7 @@ const TooltipBody = styled_components_1.default.span `
   word-break: normal;
   overflow-wrap: break-word;
 
-  border-radius: var(--border-radius-md);
+  border-radius: var(--border-radius-lg);
   transition: opacity 0.3s ease-out;
 
   font-size: var(--font-size-base);
@@ -247,7 +247,7 @@ const TooltipBody = styled_components_1.default.span `
 
   background: var(--tooltip-bg-color);
   color: var(--tooltip-text-color);
-  border: var(--tooltip-border-width, 0) var(--tooltip-border-style, solid)
+  border: var(--tooltip-border-width, 2px) var(--tooltip-border-style, solid)
     var(--tooltip-border-color, transparent);
   box-shadow: var(--bg-raised-shadow);
 

package/lib/components/UserMenu/variables.js

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

package/lib/core/constants/mcp.d.ts

@@ -1,3 +1,5 @@
 import type { MCPOption } from '../types/mcp';
 export declare const DEFAULT_MCP_SERVER_NAME = "mcp-server";
+export declare const MCP_ROUTE = "/mcp";
+export declare const PUBLIC_MCP_ROUTE = "/mcp-public";
 export declare const DEFAULT_MCP_OPTIONS: MCPOption[];

package/lib/core/constants/mcp.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_MCP_OPTIONS = exports.DEFAULT_MCP_SERVER_NAME = void 0;
+exports.DEFAULT_MCP_OPTIONS = exports.PUBLIC_MCP_ROUTE = exports.MCP_ROUTE = exports.DEFAULT_MCP_SERVER_NAME = void 0;
 exports.DEFAULT_MCP_SERVER_NAME = 'mcp-server';
+exports.MCP_ROUTE = '/mcp';
+exports.PUBLIC_MCP_ROUTE = '/mcp-public';
 exports.DEFAULT_MCP_OPTIONS = [
     'cursor',
     'vscode',

package/lib/core/hooks/use-control.js

@@ -11,6 +11,9 @@ const useControl = (initialVal = false) => {
             clearTimeout(timeoutRef.current);
         }
     }, []);
+    (0, react_1.useEffect)(() => {
+        return clearOpenTimer;
+    }, [clearOpenTimer]);
     const handleOpen = (0, react_1.useCallback)(() => {
         clearOpenTimer();
         timeoutRef.current = setTimeout(() => {

package/lib/core/hooks/use-mcp-config.d.ts

@@ -5,5 +5,7 @@ export type McpConfig = {
     cursorUrl: string;
     vscodeUrl: string;
     isMcpDisabled: boolean;
+    isPublicEndpointPage: boolean;
+    alternateServerUrl?: string;
 };
 export declare function useMCPConfig(): McpConfig;