@redocly/theme 0.69.0 → 0.70.0-next.1

package/src/components/Catalog/CatalogTableView/CatalogEntityCell.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighlight';
 import { CatalogEntityTypeIcon } from '@redocly/theme/components/Catalog/CatalogEntityTypeIcon';
-import { BffCatalogEntity } from '@redocly/theme/core/types';
+import type { BffCatalogEntity } from '@redocly/theme/core/types';
 
 type Entity = Pick<BffCatalogEntity, 'type' | 'title' | 'summary'>;
 export type CatalogEntityCellProps<T extends Entity> = {

package/src/components/Catalog/CatalogTableView/CatalogTableHeaderCell.tsx

@@ -4,7 +4,7 @@ import styled, { css } from 'styled-components';
 import { CaretDownIcon } from '@redocly/theme/icons/CaretDownIcon/CaretDownIcon';
 import { CaretUpIcon } from '@redocly/theme/icons/CaretUpIcon/CaretUpIcon';
 import { useCatalogTableHeaderCellActions } from '@redocly/theme/core/hooks';
-import {
+import type {
   BaseEntity,
   CatalogColumn,
 } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';

package/src/components/Catalog/CatalogTableView/CatalogTableView.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';

package/src/components/Catalog/CatalogTableView/CatalogTableViewRow.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';

package/src/components/Catalog/CatalogTableView/CatalogTagsCell.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { BffCatalogEntity } from '@redocly/theme/core/types';
+import type { BffCatalogEntity } from '@redocly/theme/core/types';
 import { CatalogTags } from '@redocly/theme/components/Catalog/CatalogTags';
 
 export type CatalogTagsCellProps = {

package/src/components/Catalog/CatalogTags.tsx

@@ -1,8 +1,10 @@
-import React, { JSX } from 'react';
+import type { JSX } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 import { CATALOG_TAG_MAX_LENGTH } from '@redocly/theme/core/constants';
-import { Tag, TagProps } from '@redocly/theme/components/Tag/Tag';
+import type { TagProps } from '@redocly/theme/components/Tag/Tag';
+import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
 import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighlight';
 import { useThemeHooks } from '@redocly/theme/core/hooks';

package/src/components/Catalog/CatalogViewModeToggle.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { TableIcon } from '@redocly/theme/icons/TableIcon/TableIcon';
 import { CardsIcon } from '@redocly/theme/icons/CardsIcon/CardsIcon';
-import { CatalogViewMode } from '@redocly/theme/core/types';
+import type { CatalogViewMode } from '@redocly/theme/core/types';
 
 export type CatalogViewModeToggleProps = {
   viewMode: CatalogViewMode;

package/src/components/Catalog/variables.ts

@@ -471,33 +471,31 @@ export const catalog = 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
 
   /**
@@ -506,50 +504,44 @@ export const catalog = 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);
 
@@ -573,7 +565,6 @@ export const catalog = 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/src/components/CatalogClassic/CatalogClassicInfoBlock.tsx

@@ -1,13 +1,10 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import styled from 'styled-components';
 
-import type { JSX } from 'react';
-
 import { useThemeHooks } from '@redocly/theme/core/hooks';
-import { getScorecardColorVariable } from '@redocly/theme/core/utils';
+import { getScorecardColorVariable, getBaseDataAttributes } from '@redocly/theme/core/utils';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { Link } from '@redocly/theme/components/Link/Link';
-import { getBaseDataAttributes } from '@redocly/theme/core/utils';
 
 export type CatalogClassicInfoBlockProps = {
   metadata?: {

package/src/components/CatalogClassic/CatalogClassicVirtualizedGroups.tsx

@@ -2,7 +2,7 @@ import React, { useMemo, useEffect, useState } from 'react';
 import { useWindowVirtualizer } from '@tanstack/react-virtual';
 import styled from 'styled-components';
 
-import { CatalogItem, ResolvedFilter } from '@redocly/theme/core/types';
+import type { CatalogItem, ResolvedFilter } from '@redocly/theme/core/types';
 import { useElementSize } from '@redocly/theme/core/hooks';
 import { CatalogClassicCard } from '@redocly/theme/components/CatalogClassic/CatalogClassicCard';
 import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';

package/src/components/CodeBlock/CodeBlockControls.tsx

@@ -7,7 +7,8 @@ import type { CodeBlockItems } from '@redocly/theme/components/CodeBlock/CodeBlo
 import { CodeBlockTabs } from '@redocly/theme/components/CodeBlock/CodeBlockTabs';
 import { CopyButton } from '@redocly/theme/components/Buttons/CopyButton';
 import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
-import { useThemeHooks, useThemeConfig, ReportButtonProps } from '@redocly/theme/core/hooks';
+import type { ReportButtonProps } from '@redocly/theme/core/hooks';
+import { useThemeHooks, useThemeConfig } from '@redocly/theme/core/hooks';
 import { DeselectIcon } from '@redocly/theme/icons/DeselectIcon/DeselectIcon';
 import { MaximizeIcon } from '@redocly/theme/icons/MaximizeIcon/MaximizeIcon';
 import { MinimizeIcon } from '@redocly/theme/icons/MinimizeIcon/MinimizeIcon';

package/src/components/Dropdown/Dropdown.tsx

@@ -116,8 +116,12 @@ export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
       const wrapper = wrapperRef.current;
       if (!wrapper) return;
       const rect = wrapper.getBoundingClientRect();
+      const menuHeight = menuRef.current?.offsetHeight ?? 0;
+      const fitsBelow = rect.bottom + menuHeight <= window.innerHeight;
+      const fitsAbove = rect.top - menuHeight >= 0;
+      const openUpward = placement === 'top' ? fitsAbove || !fitsBelow : !fitsBelow && fitsAbove;
       const style: CSSProperties = { minWidth: rect.width };
-      if (placement === 'top') {
+      if (openUpward) {
         style.bottom = window.innerHeight - rect.top;
       } else {
         style.top = rect.bottom;
@@ -212,13 +216,6 @@ const DropdownWrapper = styled.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.div<{

package/src/components/Filter/FilterOptionLabel.tsx

@@ -1,4 +1,4 @@
-import React, { type PropsWithChildren, JSX } from 'react';
+import React, { type JSX, type PropsWithChildren } from 'react';
 import styled from 'styled-components';
 
 export type FilterOptionLabelProps = PropsWithChildren<{

package/src/components/LoadMore/LoadMore.tsx

@@ -1,4 +1,5 @@
-import React, { JSX } from 'react';
+import type { JSX } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 import { Button } from '@redocly/theme/components/Button/Button';

package/src/components/MCP/McpConnectionTabs.tsx

@@ -9,7 +9,6 @@ import type { CodeBlockControlsProps } from '@redocly/theme/components/CodeBlock
 import { useMCPConfig, useThemeHooks } from '@redocly/theme/core/hooks';
 import {
   generateClaudeCodeCommand,
-  generateClaudeDesktopConfig,
   generateCodexCommand,
   generateMcpInstallPrompt,
   getBaseDataAttributes,
@@ -177,12 +176,12 @@ function renderTabContent(
               <TabHint>
                 {translate(
                   'page.mcpNotAllowed.snippets.claudeDesktop.instruction',
-                  'In Claude Desktop, open Settings → Developer → Edit Config, add this to the configuration file, and restart Claude Desktop:',
+                  'Open Customize → Connectors → Add custom connector and paste this server URL:',
                 )}
               </TabHint>
               <CodeBlock
-                lang="json"
-                source={generateClaudeDesktopConfig(connection)}
+                lang="text"
+                source={connection.url}
                 header={snippetHeader(option, 'claude-desktop')}
               />
             </>

package/src/components/PageActions/PageActions.tsx

@@ -12,7 +12,8 @@ import { SplitButton } from '@redocly/theme/components/SplitButton/SplitButton';
 import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
 import { Spinner } from '@redocly/theme/icons/Spinner/Spinner';
 import { CheckmarkFilledIcon } from '@redocly/theme/icons/CheckmarkFilledIcon/CheckmarkFilledIcon';
-import { PageActionType, usePageActions, useThemeHooks } from '@redocly/theme/core/hooks';
+import type { PageActionType } from '@redocly/theme/core/hooks';
+import { usePageActions, useThemeHooks } from '@redocly/theme/core/hooks';
 
 type ActionState = 'idle' | 'processing' | 'done';
 

package/src/components/ReplaySecuritySchemeActions/ReplaySecuritySchemeActions.tsx

@@ -0,0 +1,19 @@
+// Named after the OpenAPI fields, not the labels Replay shows, so renaming a label cannot
+// silently change what a project matches on. Only schemes that take a single credential are
+// here: Replay renders no slot for the rest, which `setValue` could not fill anyway.
+export type ReplaySecurityType = 'oauth2' | 'openIdConnect' | 'apiKey' | 'http-bearer';
+
+export type ReplaySecuritySchemeActionsProps = {
+  schemeId: string | null;
+  securityType: ReplaySecurityType;
+  environment: string;
+  // Undefined for an operation with no documented id, and in the workflow tab, which has no operation.
+  operationId?: string;
+  value: string;
+  setValue: (value: string) => void;
+  apiId?: string;
+};
+
+export function ReplaySecuritySchemeActions(_props: ReplaySecuritySchemeActionsProps) {
+  return null;
+}

package/src/components/Search/SearchAiDialog.tsx

@@ -13,8 +13,8 @@ import type {
 import { useThemeConfig, useThemeHooks } from '@redocly/theme/core/hooks';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { SearchAiConversationInput } from '@redocly/theme/components/Search/SearchAiConversationInput';
+import type { AiSearchError } from '@redocly/theme/core/constants';
 import {
-  AiSearchError,
   AI_SEARCH_ERROR_CONFIG as ERROR_CONFIG,
   AiSearchConversationRole,
 } from '@redocly/theme/core/constants';

package/src/components/Search/SearchAiMessage.tsx

@@ -1,19 +1,16 @@
-import React, { memo, useState } from 'react';
+import React, { memo, useState, type JSX } from 'react';
 import styled from 'styled-components';
 
-import type { JSX } from 'react';
-
 import {
   FeedbackType,
   type SearchAiMessageResource,
   type ToolCall,
   type ContentSegment,
+  ToolCallName,
 } from '@redocly/theme/core/types';
-import { TOOL_CALL_DISPLAY_TEXT } from '@redocly/theme/core/constants';
-import { ToolCallName } from '@redocly/theme/core/types';
+import { TOOL_CALL_DISPLAY_TEXT, AiSearchConversationRole } from '@redocly/theme/core/constants';
 import { Link } from '@redocly/theme/components/Link/Link';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
-import { AiSearchConversationRole } from '@redocly/theme/core/constants';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Markdown } from '@redocly/theme/components/Markdown/Markdown';
 import { DocumentIcon } from '@redocly/theme/icons/DocumentIcon/DocumentIcon';

package/src/components/Search/SearchAiResponse.tsx

@@ -13,10 +13,8 @@ import { Markdown } from '@redocly/theme/components/Markdown/Markdown';
 import { Typography } from '@redocly/theme/components/Typography/Typography';
 import { Admonition } from '@redocly/theme/components/Admonition/Admonition';
 import { ErrorFilledIcon } from '@redocly/theme/icons/ErrorFilledIcon/ErrorFilledIcon';
-import {
-  AiSearchError,
-  AI_SEARCH_ERROR_CONFIG as ERROR_CONFIG,
-} from '@redocly/theme/core/constants';
+import type { AiSearchError } from '@redocly/theme/core/constants';
+import { AI_SEARCH_ERROR_CONFIG as ERROR_CONFIG } from '@redocly/theme/core/constants';
 import { ChatIcon } from '@redocly/theme/icons/ChatIcon/ChatIcon';
 
 export type SearchAiResponseProps = {

package/src/components/Search/SearchGroups.tsx

@@ -3,11 +3,7 @@ import styled from 'styled-components';
 
 import type { JSX } from 'react';
 
-import {
-  type SearchFacet,
-  type SearchFacetCount,
-  type SearchFilterItem,
-} from '@redocly/theme/core/types';
+import type { SearchFacet, SearchFacetCount, SearchFilterItem } from '@redocly/theme/core/types';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 

package/src/components/SplitButton/SplitButton.tsx

@@ -14,6 +14,7 @@ export type SplitButtonProps = {
   children: ComponentProps<typeof Dropdown>['children'];
   variant?: ButtonGroupVariant;
   size?: ButtonGroupSize;
+  tone?: ButtonProps['tone'];
   placement?: 'top' | 'bottom';
   alignment?: 'start' | 'end';
   portalled?: boolean;
@@ -31,6 +32,7 @@ export function SplitButton(props: SplitButtonProps): JSX.Element {
     children,
     variant,
     size,
+    tone,
     placement = 'bottom',
     alignment = 'end',
     portalled,
@@ -63,6 +65,7 @@ export function SplitButton(props: SplitButtonProps): JSX.Element {
                 aria-haspopup="menu"
                 variant={variant}
                 size={size}
+                tone={tone}
                 disabled={disabled}
               />
             }

package/src/components/Tooltip/AnchorTooltip.tsx

@@ -132,15 +132,13 @@ const PLACEMENTS = {
       $withArrow &&
       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%);'}
         }
       `}
   `,
@@ -166,15 +164,13 @@ const PLACEMENTS = {
       $withArrow &&
       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%);'}
         }
       `}
   `,
@@ -188,11 +184,9 @@ const PLACEMENTS = {
       $withArrow &&
       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%);
@@ -209,11 +203,9 @@ const PLACEMENTS = {
       $withArrow &&
       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%);
@@ -263,9 +255,7 @@ const TooltipBody = styled.span.attrs<{ $anchorName: string }>(({ $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);