@redocly/theme 0.69.0 → 0.70.0-next.1

package/lib/components/Catalog/variables.js

@@ -473,33 +473,31 @@ exports.catalog = (0, styled_components_1.css) `
     * @tokens Catalog history button
     */
   --catalog-history-button-width: 252px;
-  --catalog-history-button-item-width: 244px;
   --catalog-history-separator-border-color: var(--border-color-secondary);
-  --catalog-history-separator-margin-bottom: var(--spacing-sm);
+  --catalog-history-separator-margin: var(--spacing-sm) 0;
   --catalog-history-item-padding: var(--spacing-xxs);
-  --catalog-history-item-margin-bottom: calc(var(--spacing-xxs) * -1);
-  --catalog-history-item-gap: var(--spacing-xs);
-  --catalog-history-item-border-radius: var(--menu-item-label-border-radius);
+  --catalog-history-item-gap: var(--spacing-xxs);
+  --catalog-history-item-border-radius: var(--border-radius-lg);
   --catalog-history-item-bg-color-hover: var(--menu-item-bg-color-hover);
   --catalog-history-icon-size: 16px;
-  --catalog-history-content-max-width: 212px;
+  --catalog-history-icon-gap: 2px;
   --catalog-history-text-font-family: var(--font-family-base);
   --catalog-history-text-font-size: var(--font-size-base);
   --catalog-history-text-font-weight: var(--font-weight-regular);
   --catalog-history-text-line-height: var(--line-height-base);
-  --catalog-history-text-color: var(--text-color-primary);
+  --catalog-history-text-color: var(--menu-content-color);
   --catalog-history-pill-gap: var(--spacing-xxs);
+  --catalog-history-pill-height: 22px;
   --catalog-history-pill-padding-vertical: 1px;
   --catalog-history-pill-padding-horizontal: var(--spacing-xs);
   --catalog-history-pill-border-color: var(--border-color-primary);
-  --catalog-history-pill-border-radius: 12px;
-  --catalog-history-pill-icon-size: 16px;
+  --catalog-history-pill-border-radius: var(--border-radius-xl);
+  --catalog-history-pill-icon-size: 14px;
   --catalog-history-pill-icon-color: var(--color-green-8);
   --catalog-history-pill-font-family: var(--font-family-base);
   --catalog-history-pill-font-size: var(--font-size-base);
   --catalog-history-pill-line-height: var(--line-height-base);
   --catalog-history-pill-text-color: var(--text-color-primary);
-  --catalog-history-pill-min-width: calc(100% - 118px - var(--catalog-history-item-gap));
   // @tokens End
 
   /**
@@ -508,50 +506,44 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-history-sidebar-width: 320px;
   --catalog-history-sidebar-bg-color: var(--sidebar-bg-color);
   --catalog-history-sidebar-border-color: var(--border-color-secondary);
+  --catalog-history-sidebar-padding: var(--spacing-base) var(--spacing-base) 0;
+  --catalog-history-sidebar-divider-margin: var(--spacing-sm) 0 0;
 
-  --catalog-history-sidebar-header-padding: var(--spacing-base) var(--spacing-sm) var(--spacing-base);
+  --catalog-history-sidebar-header-padding: var(--spacing-xxs);
   --catalog-history-sidebar-header-font-family: var(--font-family-base);
   --catalog-history-sidebar-header-font-size: var(--font-size-base);
   --catalog-history-sidebar-header-font-weight: var(--font-weight-regular);
   --catalog-history-sidebar-header-line-height: var(--line-height-base);
   --catalog-history-sidebar-header-letter-spacing: 0;
-  --catalog-history-sidebar-header-color: var(--text-color-primary);
+  --catalog-history-sidebar-header-color: var(--menu-content-color);
 
-  --catalog-history-sidebar-close-button-size: 32px;
-  --catalog-history-sidebar-close-button-border-radius: var(--border-radius-md);
+  --catalog-history-sidebar-close-button-size: 22px;
+  --catalog-history-sidebar-close-button-border-radius: var(--border-radius-xl);
   --catalog-history-sidebar-close-button-bg-color-hover: var(--color-hover-base);
   --catalog-history-sidebar-close-icon-color: var(--text-color-primary);
 
-  --catalog-history-sidebar-content-padding: 0 var(--spacing-sm);
-  --catalog-history-sidebar-content-margin-top: calc(var(--spacing-xxs) * -1);
-
-  --catalog-history-sidebar-version-header-padding: var(--spacing-xs) var(--spacing-xxs);
+  --catalog-history-sidebar-version-header-padding: var(--spacing-xxs);
   --catalog-history-sidebar-version-header-border-radius: var(--border-radius-md);
   --catalog-history-sidebar-version-header-bg-color-hover: var(--color-hover-base);
+  --catalog-history-sidebar-version-header-bg-color-current: var(--menu-item-bg-color-active);
 
-  --catalog-history-sidebar-version-icon-size: 32px;
-  --catalog-history-sidebar-version-icon-color: var(--text-color-secondary);
+  --catalog-history-sidebar-version-icon-size: 20px;
+  --catalog-history-sidebar-version-icon-color: var(--text-color-primary);
   --catalog-history-sidebar-version-icon-color-current: var(--color-static-white);
-  --catalog-history-sidebar-version-icon-margin-right: var(--spacing-xs);
+  --catalog-history-sidebar-version-icon-margin-right: var(--spacing-xxs);
   --catalog-history-sidebar-chevron-icon-color: var(--text-color-secondary);
-  --catalog-history-sidebar-version-info-gap: 2px;
 
   --catalog-history-sidebar-version-title-font-family: var(--font-family-base);
   --catalog-history-sidebar-version-title-font-size: var(--font-size-base);
-  --catalog-history-sidebar-version-title-font-weight: var(--font-weight-medium);
+  --catalog-history-sidebar-version-title-font-weight: var(--font-weight-regular);
   --catalog-history-sidebar-version-title-line-height: var(--line-height-base);
-  --catalog-history-sidebar-version-title-color: var(--color-warm-grey-7);
-
-  --catalog-history-sidebar-version-date-font-family: var(--font-family-base);
-  --catalog-history-sidebar-version-date-font-size: var(--font-size-sm);
-  --catalog-history-sidebar-version-date-font-weight: var(--font-weight-regular);
-  --catalog-history-sidebar-version-date-line-height: var(--line-height-sm);
-  --catalog-history-sidebar-version-date-color: var(--color-warm-grey-7);
+  --catalog-history-sidebar-version-title-color: var(--menu-content-color);
 
-  --catalog-history-sidebar-revisions-padding-left: 40px;
+  --catalog-history-sidebar-revisions-padding-left: 28px;
   --catalog-history-sidebar-revisions-padding-bottom: var(--spacing-base);
+  --catalog-history-sidebar-revision-line-left: 14px;
 
-  --catalog-history-sidebar-revision-item-padding: var(--spacing-xs) var(--spacing-sm);
+  --catalog-history-sidebar-revision-item-padding: var(--spacing-xxs) var(--spacing-sm);
   --catalog-history-sidebar-revision-item-border-radius: var(--border-radius-md);
   --catalog-history-sidebar-revision-item-bg-color-hover: var(--bg-color-hover);
 
@@ -575,7 +567,6 @@ exports.catalog = (0, styled_components_1.css) `
   /**
    * @tokens Catalog history tag border radius
    */
-  --catalog-history-sidebar-version-tag-border-radius: var(--border-radius-xl);
   --catalog-history-sidebar-revision-tag-border-radius: var(--border-radius-xl);
   // @tokens End
 

package/lib/components/CatalogClassic/CatalogClassicInfoBlock.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'react';
+import { type JSX } from 'react';
 export type CatalogClassicInfoBlockProps = {
     metadata?: {
         scorecardLevel?: string;

package/lib/components/CatalogClassic/CatalogClassicInfoBlock.js

@@ -10,7 +10,6 @@ const hooks_1 = require("../../core/hooks");
 const utils_1 = require("../../core/utils");
 const Tag_1 = require("../../components/Tag/Tag");
 const Link_1 = require("../../components/Link/Link");
-const utils_2 = require("../../core/utils");
 function CatalogClassicInfoBlock(props) {
     var _a, _b, _c, _d;
     const scorecardBadge = ((_a = props.metadata) === null || _a === void 0 ? void 0 : _a.scorecardLevel) ? (react_1.default.createElement(ScorecardBadge, { level: props.metadata.scorecardLevel, slug: (_b = props.metadata) === null || _b === void 0 ? void 0 : _b.scoreCardSlug, colorVariable: (0, utils_1.getScorecardColorVariable)(((_c = props.metadata) === null || _c === void 0 ? void 0 : _c.scorecardLevelIdx) || 0, Object.keys(((_d = props.metadata) === null || _d === void 0 ? void 0 : _d.scorecardLevels) || {}).length) })) : null;
@@ -22,7 +21,7 @@ function ScorecardBadge(props) {
     const { useTelemetry } = (0, hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
     return (react_1.default.createElement(Link_1.Link, { to: slug },
-        react_1.default.createElement(Tag_1.Tag, { onClick: () => telemetry.sendScorecardLinkClickedMessage([(0, utils_2.getBaseDataAttributes)('scorecardLink', 'tag')]), withStatusDot: true, statusDotColor: `var(${colorVariable})` }, level)));
+        react_1.default.createElement(Tag_1.Tag, { onClick: () => telemetry.sendScorecardLinkClickedMessage([(0, utils_1.getBaseDataAttributes)('scorecardLink', 'tag')]), withStatusDot: true, statusDotColor: `var(${colorVariable})` }, level)));
 }
 const CatalogInfoBlockWrapper = styled_components_1.default.div `
   position: relative;

package/lib/components/CatalogClassic/CatalogClassicVirtualizedGroups.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CatalogItem, ResolvedFilter } from '../../core/types';
+import type { CatalogItem, ResolvedFilter } from '../../core/types';
 export type Group = {
     title: string;
     items: CatalogItem[];

package/lib/components/CodeBlock/CodeBlockControls.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { JSX } from 'react';
 import type { CodeBlockItems } from '../../components/CodeBlock/CodeBlock';
-import { ReportButtonProps } from '../../core/hooks';
+import type { ReportButtonProps } from '../../core/hooks';
 export type CodeBlockControlsProps = {
     children?: React.ReactNode;
     className?: string;

package/lib/components/Dropdown/Dropdown.js

@@ -77,12 +77,18 @@ exports.Dropdown = (0, react_1.forwardRef)(({ children, className, active, trigg
         }
     };
     const updateMenuPosition = (0, react_1.useCallback)(() => {
+        var _a;
+        var _b;
         const wrapper = wrapperRef.current;
         if (!wrapper)
             return;
         const rect = wrapper.getBoundingClientRect();
+        const menuHeight = (_b = (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0;
+        const fitsBelow = rect.bottom + menuHeight <= window.innerHeight;
+        const fitsAbove = rect.top - menuHeight >= 0;
+        const openUpward = placement === 'top' ? fitsAbove || !fitsBelow : !fitsBelow && fitsAbove;
         const style = { minWidth: rect.width };
-        if (placement === 'top') {
+        if (openUpward) {
             style.bottom = window.innerHeight - rect.top;
         }
         else {
@@ -136,13 +142,6 @@ const DropdownWrapper = styled_components_1.default.div `
   position: relative;
 
   text-decoration: none;
-
-  /* The trigger keeps its hovered appearance while the menu is open. */
-  > .button[aria-expanded='true'] {
-    background-color: var(--button-bg-color-hover);
-    color: var(--button-color-hover);
-    border-color: var(--button-border-color-hover);
-  }
 `;
 const ChildrenWrapper = styled_components_1.default.div `
   padding-top: var(--dropdown-menu-padding-top);

package/lib/components/Filter/FilterOptionLabel.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren, JSX } from 'react';
+import { type JSX, type PropsWithChildren } from 'react';
 export type FilterOptionLabelProps = PropsWithChildren<{
     className?: string;
 }>;

package/lib/components/LoadMore/LoadMore.d.ts

@@ -1,4 +1,4 @@
-import { JSX } from 'react';
+import type { JSX } from 'react';
 export declare function LoadMore({ icon, onClick, disabled, blinking, label, }: {
     icon: JSX.Element;
     onClick: () => void;

package/lib/components/MCP/McpConnectionTabs.js

@@ -113,8 +113,8 @@ function renderTabContent(option, connection, translate, snippetHeader) {
                 {
                     headline: translate('page.mcpNotAllowed.snippets.claudeDesktop.headline', 'Claude Desktop'),
                     content: (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(TabHint, null, translate('page.mcpNotAllowed.snippets.claudeDesktop.instruction', 'In Claude Desktop, open Settings → Developer → Edit Config, add this to the configuration file, and restart Claude Desktop:')),
-                        react_1.default.createElement(CodeBlock_1.CodeBlock, { lang: "json", source: (0, utils_1.generateClaudeDesktopConfig)(connection), header: snippetHeader(option, 'claude-desktop') }))),
+                        react_1.default.createElement(TabHint, null, translate('page.mcpNotAllowed.snippets.claudeDesktop.instruction', 'Open Customize → Connectors → Add custom connector and paste this server URL:')),
+                        react_1.default.createElement(CodeBlock_1.CodeBlock, { lang: "text", source: connection.url, header: snippetHeader(option, 'claude-desktop') }))),
                 },
             ]);
         case 'chatgpt':

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

@@ -1,5 +1,5 @@
 import type { JSX } from 'react';
-import { PageActionType } from '../../core/hooks';
+import type { PageActionType } from '../../core/hooks';
 type PageActionProps = {
     pageSlug?: string;
     mcpUrl?: string;

package/lib/components/ReplaySecuritySchemeActions/ReplaySecuritySchemeActions.d.ts

@@ -0,0 +1,11 @@
+export type ReplaySecurityType = 'oauth2' | 'openIdConnect' | 'apiKey' | 'http-bearer';
+export type ReplaySecuritySchemeActionsProps = {
+    schemeId: string | null;
+    securityType: ReplaySecurityType;
+    environment: string;
+    operationId?: string;
+    value: string;
+    setValue: (value: string) => void;
+    apiId?: string;
+};
+export declare function ReplaySecuritySchemeActions(_props: ReplaySecuritySchemeActionsProps): null;

package/lib/components/ReplaySecuritySchemeActions/ReplaySecuritySchemeActions.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReplaySecuritySchemeActions = ReplaySecuritySchemeActions;
+function ReplaySecuritySchemeActions(_props) {
+    return null;
+}
+//# sourceMappingURL=ReplaySecuritySchemeActions.js.map

package/lib/components/Search/SearchAiDialog.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { JSX } from 'react';
 import type { AiSearchConversationItem, SearchAiMessageResource, ToolCall, ContentSegment } from '../../core/types';
-import { AiSearchError } from '../../core/constants';
+import type { AiSearchError } from '../../core/constants';
 export type SearchAiDialogProps = {
     response: string | undefined;
     isGeneratingResponse: boolean;

package/lib/components/Search/SearchAiMessage.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
-import type { JSX } from 'react';
+import React, { type JSX } from 'react';
 import { FeedbackType, type SearchAiMessageResource, type ToolCall, type ContentSegment } from '../../core/types';
 import { AiSearchConversationRole } from '../../core/constants';
 export type SearchAiMessageProps = {

package/lib/components/Search/SearchAiMessage.js

@@ -41,10 +41,8 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const types_1 = require("../../core/types");
 const constants_1 = require("../../core/constants");
-const types_2 = require("../../core/types");
 const Link_1 = require("../../components/Link/Link");
 const Tag_1 = require("../../components/Tag/Tag");
-const constants_2 = require("../../core/constants");
 const hooks_1 = require("../../core/hooks");
 const Markdown_1 = require("../../components/Markdown/Markdown");
 const DocumentIcon_1 = require("../../icons/DocumentIcon/DocumentIcon");
@@ -70,7 +68,7 @@ function getExecuteDescription(args) {
 }
 function getToolCallDisplayText(toolCall) {
     var _a;
-    if (toolCall.name === types_2.ToolCallName.Execute) {
+    if (toolCall.name === types_1.ToolCallName.Execute) {
         const description = getExecuteDescription(toolCall.args);
         if (description) {
             return { inProgressText: description, completedText: description };
@@ -123,8 +121,8 @@ function SearchAiMessageComponent({ role, content, isThinking, resources, classN
         }
     };
     return (react_1.default.createElement(SearchAiMessageWrapper, { "data-component-name": "Search/SearchAiMessage", $role: role, className: className, "data-testid": "search-ai-message" },
-        role === constants_2.AiSearchConversationRole.ASSISTANT && (react_1.default.createElement(AiStarsIcon_1.AiStarsIcon, { size: "32px", background: "var(--search-ai-icon-bg-color)", borderRadius: "var(--border-radius-lg)", color: "var(--search-ai-icon-color)", margin: "0 var(--spacing-xs) 0 0" })),
-        react_1.default.createElement(MessageContentWrapper, null, role === constants_2.AiSearchConversationRole.ASSISTANT ? (react_1.default.createElement(react_1.default.Fragment, null,
+        role === constants_1.AiSearchConversationRole.ASSISTANT && (react_1.default.createElement(AiStarsIcon_1.AiStarsIcon, { size: "32px", background: "var(--search-ai-icon-bg-color)", borderRadius: "var(--border-radius-lg)", color: "var(--search-ai-icon-color)", margin: "0 var(--spacing-xs) 0 0" })),
+        react_1.default.createElement(MessageContentWrapper, null, role === constants_1.AiSearchConversationRole.ASSISTANT ? (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(MessageWrapper, { $role: role },
                 contentSegments.map((segment, index) => {
                     if (segment.type === 'tool') {
@@ -189,7 +187,7 @@ const SearchAiMessageWrapper = styled_components_1.default.div `
   flex-direction: row;
   align-items: flex-start;
   width: 100%;
-  justify-content: ${({ $role }) => $role === constants_2.AiSearchConversationRole.USER ? 'flex-end' : 'flex-start'};
+  justify-content: ${({ $role }) => $role === constants_1.AiSearchConversationRole.USER ? 'flex-end' : 'flex-start'};
 `;
 const MessageContentWrapper = styled_components_1.default.div `
   display: flex;
@@ -215,7 +213,7 @@ const ResponseText = (0, styled_components_1.default)(Markdown_1.Markdown) `
   }
 `;
 const MessageWrapper = styled_components_1.default.div `
-  padding: ${({ $role }) => $role === constants_2.AiSearchConversationRole.USER
+  padding: ${({ $role }) => $role === constants_1.AiSearchConversationRole.USER
     ? 'var(--spacing-sm)'
     : 'var(--spacing-sm) var(--spacing-sm) var(--spacing-xs) var(--spacing-sm)'};
   border-radius: var(--border-radius-xl);
@@ -223,11 +221,11 @@ const MessageWrapper = styled_components_1.default.div `
   max-width: 100%;
   word-wrap: break-word;
   white-space: pre-wrap;
-  background-color: ${({ $role }) => $role === constants_2.AiSearchConversationRole.USER
+  background-color: ${({ $role }) => $role === constants_1.AiSearchConversationRole.USER
     ? 'var(--search-ai-user-bg-color)'
     : 'var(--search-ai-assistant-bg-color)'};
-  border: ${({ $role }) => $role === constants_2.AiSearchConversationRole.USER ? 'none' : 'var(--search-ai-assistant-border)'};
-  color: ${({ $role }) => $role === constants_2.AiSearchConversationRole.USER
+  border: ${({ $role }) => $role === constants_1.AiSearchConversationRole.USER ? 'none' : 'var(--search-ai-assistant-border)'};
+  color: ${({ $role }) => $role === constants_1.AiSearchConversationRole.USER
     ? 'var(--search-ai-user-text-color)'
     : 'var(--search-ai-assistant-text-color)'};
 `;

package/lib/components/Search/SearchAiResponse.d.ts

@@ -1,5 +1,5 @@
 import type { JSX } from 'react';
-import { AiSearchError } from '../../core/constants';
+import type { AiSearchError } from '../../core/constants';
 export type SearchAiResponseProps = {
     question: string;
     isGeneratingResponse: boolean;

package/lib/components/Search/SearchGroups.d.ts

@@ -1,5 +1,5 @@
 import type { JSX } from 'react';
-import { type SearchFacet, type SearchFilterItem } from '../../core/types';
+import type { SearchFacet, SearchFilterItem } from '../../core/types';
 type SearchGroupsProps = {
     facets: SearchFacet[];
     searchFilter: SearchFilterItem[];

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

@@ -8,6 +8,7 @@ export type SplitButtonProps = {
     children: ComponentProps<typeof Dropdown>['children'];
     variant?: ButtonGroupVariant;
     size?: ButtonGroupSize;
+    tone?: ButtonProps['tone'];
     placement?: 'top' | 'bottom';
     alignment?: 'start' | 'end';
     portalled?: boolean;

package/lib/components/SplitButton/SplitButton.js

@@ -10,12 +10,12 @@ 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 { button, children, variant, size, tone, 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)));
+            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, tone: tone, disabled: disabled }) }, children)) : null)));
 }
 const SplitButtonWrapper = styled_components_1.default.div `
   position: relative;

package/lib/components/Tooltip/AnchorTooltip.js

@@ -103,15 +103,13 @@ const PLACEMENTS = {
     ${({ $withArrow, $arrowPosition }) => $withArrow &&
         (0, styled_components_1.css) `
         &::after {
-          border-left: 14px solid transparent;
-          border-right: 14px solid transparent;
-          border-top-width: 8px;
-          border-top-style: solid;
-          border-radius: 2px;
+          width: 16px;
+          height: 8px;
+          clip-path: path('M0 0H16L9.414 6.586A2 2 0 0 1 6.586 6.586Z');
           bottom: 0;
-          ${$arrowPosition === 'left' && 'left: 16px; transform: translateY(100%);'}
+          ${$arrowPosition === 'left' && 'left: 22px; transform: translateY(100%);'}
           ${$arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, 100%);'}
-          ${$arrowPosition === 'right' && 'right: 16px; transform: translateY(100%);'}
+          ${$arrowPosition === 'right' && 'right: 22px; transform: translateY(100%);'}
         }
       `}
   `,
@@ -135,15 +133,13 @@ const PLACEMENTS = {
     ${({ $withArrow, $arrowPosition }) => $withArrow &&
         (0, styled_components_1.css) `
         &::after {
-          border-left: 14px solid transparent;
-          border-right: 14px solid transparent;
-          border-bottom-width: 8px;
-          border-bottom-style: solid;
-          border-radius: 0 0 2px 2px;
+          width: 16px;
+          height: 8px;
+          clip-path: path('M0 8H16L9.414 1.414A2 2 0 0 0 6.586 1.414Z');
           top: 0;
-          ${$arrowPosition === 'left' && 'left: 16px; transform: translateY(-100%);'}
+          ${$arrowPosition === 'left' && 'left: 22px; transform: translateY(-100%);'}
           ${$arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, -100%);'}
-          ${$arrowPosition === 'right' && 'right: 16px; transform: translateY(-100%);'}
+          ${$arrowPosition === 'right' && 'right: 22px; transform: translateY(-100%);'}
         }
       `}
   `,
@@ -156,11 +152,9 @@ const PLACEMENTS = {
     ${({ $withArrow }) => $withArrow &&
         (0, styled_components_1.css) `
         &::after {
-          border-top: 14px solid transparent;
-          border-bottom: 14px solid transparent;
-          border-left-width: 8px;
-          border-left-style: solid;
-          border-radius: 2px 0 0 2px;
+          width: 8px;
+          height: 16px;
+          clip-path: path('M0 0V16L6.586 9.414A2 2 0 0 0 6.586 6.586Z');
           right: -9px;
           top: 50%;
           transform: translateY(-50%);
@@ -176,11 +170,9 @@ const PLACEMENTS = {
     ${({ $withArrow }) => $withArrow &&
         (0, styled_components_1.css) `
         &::after {
-          border-top: 14px solid transparent;
-          border-bottom: 14px solid transparent;
-          border-right-width: 8px;
-          border-right-style: solid;
-          border-radius: 0 2px 2px 0;
+          width: 8px;
+          height: 16px;
+          clip-path: path('M8 0V16L1.414 9.414A2 2 0 0 1 1.414 6.586Z');
           left: -9px;
           top: 50%;
           transform: translateY(-50%);
@@ -222,9 +214,7 @@ const TooltipBody = styled_components_1.default.span.attrs(({ $anchorName }) =>
 
     content: ' ';
     display: inline-block;
-    width: 0;
-    height: 0;
-    border-color: var(--tooltip-arrow-color, var(--tooltip-bg-color));
+    background: var(--tooltip-arrow-color, var(--tooltip-bg-color));
   }
 
   background: var(--tooltip-bg-color);

package/lib/components/Tooltip/JsTooltip.js

@@ -112,12 +112,12 @@ function TooltipComponent({ children, isOpen, tip, withArrow = true, placement =
 exports.Tooltip = (0, react_1.memo)(TooltipComponent);
 const PLACEMENTS = {
     top: (0, styled_components_1.css) `
-    ${({ withArrow, arrowPosition }) => withArrow && arrowPosition === 'left'
+    ${({ $withArrow, $arrowPosition }) => $withArrow && $arrowPosition === 'left'
         ? (0, styled_components_1.css) `
             transform: translate(0, -100%);
             margin-top: -10px;
           `
-        : arrowPosition === 'right'
+        : $arrowPosition === 'right'
             ? (0, styled_components_1.css) `
               transform: translate(-100%, -100%);
               margin-top: -10px;
@@ -127,28 +127,26 @@ const PLACEMENTS = {
               margin-top: -10px;
             `}
 
-    ${({ withArrow, arrowPosition }) => withArrow &&
+    ${({ $withArrow, $arrowPosition }) => $withArrow &&
         (0, styled_components_1.css) `
         &::after {
-          border-left: 14px solid transparent;
-          border-right: 14px solid transparent;
-          border-top-width: 8px;
-          border-top-style: solid;
-          border-radius: 2px;
+          width: 16px;
+          height: 8px;
+          clip-path: path('M0 0H16L9.414 6.586A2 2 0 0 1 6.586 6.586Z');
           bottom: 0;
-          ${arrowPosition === 'left' && 'left: 16px; transform: translateY(99%);'}
-          ${arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, 99%);'}
-          ${arrowPosition === 'right' && 'right: 16px; transform: translateY(99%);'}
+          ${$arrowPosition === 'left' && 'left: 22px; transform: translateY(99%);'}
+          ${$arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, 99%);'}
+          ${$arrowPosition === 'right' && 'right: 22px; transform: translateY(99%);'}
         }
       `}
   `,
     bottom: (0, styled_components_1.css) `
-    ${({ withArrow, arrowPosition }) => withArrow && arrowPosition === 'left'
+    ${({ $withArrow, $arrowPosition }) => $withArrow && $arrowPosition === 'left'
         ? (0, styled_components_1.css) `
             transform: translate(0, 10px);
             margin-top: 0;
           `
-        : arrowPosition === 'right'
+        : $arrowPosition === 'right'
             ? (0, styled_components_1.css) `
               transform: translate(-100%, 10px);
               margin-top: 0;
@@ -158,18 +156,16 @@ const PLACEMENTS = {
               margin-top: 0;
             `}
 
-    ${({ withArrow, arrowPosition }) => withArrow &&
+    ${({ $withArrow, $arrowPosition }) => $withArrow &&
         (0, styled_components_1.css) `
         &::after {
-          border-left: 14px solid transparent;
-          border-right: 14px solid transparent;
-          border-bottom-width: 8px;
-          border-bottom-style: solid;
-          border-radius: 0 0 2px 2px;
+          width: 16px;
+          height: 8px;
+          clip-path: path('M0 8H16L9.414 1.414A2 2 0 0 0 6.586 1.414Z');
           top: 0;
-          ${arrowPosition === 'left' && 'left: 16px; transform: translateY(-99%);'}
-          ${arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, -99%);'}
-          ${arrowPosition === 'right' && 'right: 16px; transform: translateY(-99%);'}
+          ${$arrowPosition === 'left' && 'left: 22px; transform: translateY(-99%);'}
+          ${$arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, -99%);'}
+          ${$arrowPosition === 'right' && 'right: 22px; transform: translateY(-99%);'}
         }
       `}
   `,
@@ -177,19 +173,17 @@ const PLACEMENTS = {
     transform: translate(-100%, -50%);
     margin-left: -10px;
 
-    ${({ withArrow, arrowPosition }) => withArrow &&
+    ${({ $withArrow, $arrowPosition }) => $withArrow &&
         (0, styled_components_1.css) `
         &::after {
-          border-top: 14px solid transparent;
-          border-bottom: 14px solid transparent;
-          border-left-width: 8px;
-          border-left-style: solid;
-          border-radius: 2px 0 0 2px;
+          width: 8px;
+          height: 16px;
+          clip-path: path('M0 0V16L6.586 9.414A2 2 0 0 0 6.586 6.586Z');
           top: 50%;
           right: 0;
-          ${arrowPosition === 'top' && 'top: 16px; transform: translateX(99%);'}
-          ${arrowPosition === 'center' && 'top: 50%; transform: translate(99%, -50%);'}
-          ${arrowPosition === 'bottom' && 'bottom: 16px; transform: translateX(99%);'}
+          ${$arrowPosition === 'top' && 'top: 22px; transform: translateX(99%);'}
+          ${$arrowPosition === 'center' && 'top: 50%; transform: translate(99%, -50%);'}
+          ${$arrowPosition === 'bottom' && 'bottom: 22px; transform: translateX(99%);'}
         }
       `}
   `,
@@ -197,19 +191,17 @@ const PLACEMENTS = {
     transform: translate(0, -50%);
     margin-left: 10px;
 
-    ${({ withArrow, arrowPosition }) => withArrow &&
+    ${({ $withArrow, $arrowPosition }) => $withArrow &&
         (0, styled_components_1.css) `
         &::after {
-          border-top: 14px solid transparent;
-          border-bottom: 14px solid transparent;
-          border-right-width: 8px;
-          border-right-style: solid;
-          border-radius: 0 2px 2px 0;
+          width: 8px;
+          height: 16px;
+          clip-path: path('M8 0V16L1.414 9.414A2 2 0 0 1 1.414 6.586Z');
           top: 50%;
           left: 0;
-          ${arrowPosition === 'top' && 'top: 16px; transform: translateX(-99%);'}
-          ${arrowPosition === 'center' && 'top: 50%; transform: translate(-99%, -50%);'}
-          ${arrowPosition === 'bottom' && 'bottom: 16px; transform: translateX(-99%);'}
+          ${$arrowPosition === 'top' && 'top: 22px; transform: translateX(-99%);'}
+          ${$arrowPosition === 'center' && 'top: 50%; transform: translate(-99%, -50%);'}
+          ${$arrowPosition === 'bottom' && 'bottom: 22px; transform: translateX(-99%);'}
         }
       `}
   `,
@@ -240,9 +232,7 @@ const TooltipBody = styled_components_1.default.span `
 
     content: ' ';
     display: inline-block;
-    width: 0;
-    height: 0;
-    border-color: var(--tooltip-arrow-color, var(--tooltip-bg-color));
+    background: var(--tooltip-arrow-color, var(--tooltip-bg-color));
   }
 
   background: var(--tooltip-bg-color);
@@ -252,8 +242,6 @@ const TooltipBody = styled_components_1.default.span `
   box-shadow: var(--bg-raised-shadow);
 
   width: ${({ $width }) => $width || 'max-content'};
-  ${({ $placement }) => (0, styled_components_1.css) `
-    ${PLACEMENTS[$placement]};
-  `}
+  ${({ $placement }) => PLACEMENTS[$placement]}
 `;
 //# sourceMappingURL=JsTooltip.js.map

package/lib/components/Tooltip/Tooltip.js

@@ -41,8 +41,7 @@ const hooks_1 = require("../../core/hooks");
 const utils_1 = require("../../core/utils");
 function TooltipComponent(props) {
     var _a, _b;
-    const { useAnchorPositioning } = (0, hooks_1.useThemeHooks)();
-    const { isSupported } = useAnchorPositioning();
+    const { isSupported } = (0, hooks_1.useAnchorPositioning)();
     const fallbackPlacements = (_a = props.fallbackPlacements) !== null && _a !== void 0 ? _a : (0, utils_1.getDefaultFallbackPlacements)((_b = props.placement) !== null && _b !== void 0 ? _b : 'top');
     if (isSupported) {
         return (react_1.default.createElement(AnchorTooltip_1.Tooltip, Object.assign({}, props, { fallbackPlacements: fallbackPlacements, arrowPosition: prepareArrowPosition(props.arrowPosition) })));

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

@@ -1 +1,3 @@
 export declare const MARKDOWN_CLASS_NAME = "md";
+export declare const MARKDOC_EXAMPLE_TAG = "markdoc-example";
+export declare const EXAMPLE_CONTENT_ATTRIBUTE = "exampleContent";