@redocly/theme 0.66.0-next.1 → 0.66.0-next.3

package/lib/markdoc/components/Tabs/TabList.js

@@ -163,7 +163,7 @@ function TabList({ childrenArray, size, activeTab, onTabChange, containerRef, on
             return renderTab(child, index, size, setTabRef, handleKeyboard, onTabClick);
         }),
         hasOverflow && (react_1.default.createElement(exports.TabItem, { size: size, active: isMoreActive || showAsSelector, tabIndex: 0, className: "dropdown-tab" },
-            react_1.default.createElement(DropdownWrapper, { "$top": dropdownPosition.top, "$left": dropdownPosition.left, onClickCapture: () => {
+            react_1.default.createElement(DropdownWrapper, { $top: dropdownPosition.top, $left: dropdownPosition.left, onClickCapture: () => {
                     setIsDropdownOpen(true);
                 } },
                 react_1.default.createElement(FixedPositionDropdown, { ref: dropdownRef, trigger: react_1.default.createElement(exports.TabButtonLink, { size: size, className: isMoreActive || showAsSelector ? 'active' : undefined }, showAsSelector ? react_1.default.createElement(TabButtonText, null, activeTab) : 'More'), alignment: "start", withArrow: true, onClose: () => {

package/lib/markdoc/components/Tabs/Tabs.d.ts

@@ -19,6 +19,6 @@ type TabsProps = {
     initialTab?: string;
     activeTab?: string;
 };
-export declare function Tabs({ id, children, className, size, initialTab: propInitialTab, activeTab: controlledActiveTab, }: TabsProps): JSX.Element;
-export declare const TabContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare function Tabs({ id, children, className, size, initialTab: propInitialTab, activeTab: controlledActiveTab }: TabsProps): JSX.Element;
+export declare const TabContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export {};

package/lib/markdoc/components/Tabs/Tabs.js

@@ -50,7 +50,8 @@ var TabsSize;
     TabsSize["MEDIUM"] = "medium";
 })(TabsSize || (exports.TabsSize = TabsSize = {}));
 function Tabs({ id, children, className, size, initialTab: propInitialTab, activeTab: controlledActiveTab, }) {
-    var _a, _b;
+    var _a;
+    var _b;
     const childrenArray = react_1.default.Children.toArray(children);
     const containerRef = (0, react_1.useRef)(null);
     const initialTab = (_b = propInitialTab !== null && propInitialTab !== void 0 ? propInitialTab : (_a = childrenArray[0]) === null || _a === void 0 ? void 0 : _a.props.label) !== null && _b !== void 0 ? _b : '';

package/lib/markdoc/components/Tabs/variables.d.ts

@@ -1 +1 @@
-export declare const markdownTabs: import("styled-components").FlattenSimpleInterpolation;
+export declare const markdownTabs: import("styled-components").RuleSet<object>;

package/lib/markdoc/default.d.ts

@@ -5,131 +5,6 @@ export * from '../markdoc/attributes/img-srcset';
 export * from '../markdoc/attributes/relative-path';
 export * from '../markdoc/attributes/svg-content';
 export * as components from '../markdoc/components/default';
-import { admonition } from '../markdoc/tags/admonition';
-import { html } from '../markdoc/tags/html';
-import { markdocExample } from '../markdoc/tags/markdoc-example';
-import { partial } from '../markdoc/tags/partial';
-import { tab } from '../markdoc/tags/tab';
-import { tabs } from '../markdoc/tags/tabs';
-import { debug } from '../markdoc/tags/debug';
-import { codeSnippet } from '../markdoc/tags/code-snippet';
-import { inlineSvg } from '../markdoc/tags/inline-svg';
-import { cards } from '../markdoc/tags/cards';
-import { card } from '../markdoc/tags/card';
-import { img } from '../markdoc/tags/img';
-import { codeWalkthrough } from '../markdoc/tags/code-walkthrough';
-import { codeStep } from '../markdoc/tags/code-step';
-import { input } from '../markdoc/tags/input';
-import { toggle } from '../markdoc/tags/code-toggle';
-import { codeGroup } from '../markdoc/tags/code-group';
-import { icon } from '../markdoc/tags/icon';
-import { connectMcp } from '../markdoc/tags/connect-mcp';
-import { loginButton } from '../markdoc/tags/login-button';
-import { diagram } from '../markdoc/tags/diagram';
 export declare const tags: {
-    [admonition.tagName]: import("@markdoc/markdoc").Schema & {
-        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
-            resolver?: string;
-        }>;
-    };
-    [debug.tagName]: import("@markdoc/markdoc").Schema & {
-        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
-            resolver?: string;
-        }>;
-    };
-    [html.tagName]: import("@markdoc/markdoc").Schema & {
-        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
-            resolver?: string;
-        }>;
-    };
-    [markdocExample.tagName]: import("@markdoc/markdoc").Schema & {
-        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
-            resolver?: string;
-        }>;
-    };
-    [partial.tagName]: import("@markdoc/markdoc").Schema & {
-        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
-            resolver?: string;
-        }>;
-    };
-    [tab.tagName]: import("@markdoc/markdoc").Schema & {
-        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
-            resolver?: string;
-        }>;
-    };
-    [tabs.tagName]: import("@markdoc/markdoc").Schema & {
-        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
-            resolver?: string;
-        }>;
-    };
-    [codeSnippet.tagName]: import("@markdoc/markdoc").Schema & {
-        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
-            resolver?: string;
-        }>;
-    };
-    [inlineSvg.tagName]: import("@markdoc/markdoc").Schema & {
-        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
-            resolver?: string;
-        }>;
-    };
-    [cards.tagName]: import("@markdoc/markdoc").Schema & {
-        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
-            resolver?: string;
-        }>;
-    };
-    [card.tagName]: import("@markdoc/markdoc").Schema & {
-        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
-            resolver?: string;
-        }>;
-    };
-    [img.tagName]: import("@markdoc/markdoc").Schema & {
-        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
-            resolver?: string;
-        }>;
-    };
-    [codeWalkthrough.tagName]: import("@markdoc/markdoc").Schema & {
-        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
-            resolver?: string;
-        }>;
-    };
-    [codeStep.tagName]: import("@markdoc/markdoc").Schema & {
-        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
-            resolver?: string;
-        }>;
-    };
-    [toggle.tagName]: import("@markdoc/markdoc").Schema & {
-        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
-            resolver?: string;
-        }>;
-    };
-    [input.tagName]: import("@markdoc/markdoc").Schema & {
-        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
-            resolver?: string;
-        }>;
-    };
-    [codeGroup.tagName]: import("@markdoc/markdoc").Schema & {
-        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
-            resolver?: string;
-        }>;
-    };
-    [icon.tagName]: import("@markdoc/markdoc").Schema & {
-        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
-            resolver?: string;
-        }>;
-    };
-    [connectMcp.tagName]: import("@markdoc/markdoc").Schema & {
-        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
-            resolver?: string;
-        }>;
-    };
-    [loginButton.tagName]: import("@markdoc/markdoc").Schema & {
-        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
-            resolver?: string;
-        }>;
-    };
-    [diagram.tagName]: import("@markdoc/markdoc").Schema & {
-        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
-            resolver?: string;
-        }>;
-    };
+    [x: string]: import("./tags/types").MarkdocTagSchema;
 };

package/lib/markdoc/tags/types.d.ts

@@ -1,9 +1,15 @@
-import type { Schema, SchemaAttribute } from '@markdoc/markdoc';
+import type { Node, Schema, SchemaAttribute } from '@markdoc/markdoc';
+export type RenderForLlmsContext = {
+    getBody: () => string;
+};
+export type RenderForLlmsFn = (node: Node, context: RenderForLlmsContext) => string;
+export type MarkdocTagSchema = Schema & {
+    attributes?: Record<string, SchemaAttribute & {
+        resolver?: string;
+    }>;
+    renderForLlms?: RenderForLlmsFn;
+};
 export type MarkdocSchemaWrapper = {
-    schema: Schema & {
-        attributes?: Record<string, SchemaAttribute & {
-            resolver?: string;
-        }>;
-    };
+    schema: MarkdocTagSchema;
     tagName: string;
 };

package/lib/plugin.d.ts

@@ -1,4 +1,4 @@
-declare function _exports(): {
+declare const _default: () => {
     id: string;
 };
-export = _exports;
+export = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.66.0-next.1",
+  "version": "0.66.0-next.3",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -35,6 +35,7 @@
     "styled-components": "^4.1.1 || ^5.3.11 || ^6.0.0"
   },
   "devDependencies": {
+    "@babel/core": "7.29.7",
     "@markdoc/markdoc": "0.5.2",
     "@shikijs/types": "3.21.0",
     "@testing-library/react": "16.3.0",
@@ -43,29 +44,29 @@
     "@types/highlight-words-core": "1.2.3",
     "@types/lodash.debounce": "4.0.9",
     "@types/lodash.throttle": "4.1.9",
-    "@types/node": "22.18.13",
+    "@types/node": "24.1.0",
     "@types/nprogress": "0.2.3",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "@types/styled-components": "5.1.34",
     "@vitest/coverage-v8": "4.0.10",
-    "@vitest/ui": "3.2.4",
+    "@vitest/ui": "4.0.10",
     "concurrently": "7.6.0",
     "react-router-dom": "^6.30.3",
     "resize-observer-polyfill": "1.5.1",
     "rimraf": "5.0.7",
-    "styled-components": "5.3.11",
+    "styled-components": "^6.4.2",
     "ts-node": "10.9.2",
     "tsc-alias": "1.8.16",
     "tsconfig-paths": "4.2.0",
     "tsconfig-paths-webpack-plugin": "3.5.2",
-    "typescript": "5.9.3",
+    "typescript": "6.0.3",
     "vitest": "4.0.10",
     "vitest-when": "0.6.2",
     "webpack": "5.105.2",
-    "@redocly/realm-asyncapi-sdk": "0.12.0-next.1"
+    "@redocly/realm-asyncapi-sdk": "0.12.0-next.3"
   },
   "dependencies": {
+    "@emotion/is-prop-valid": "^1.3.1",
     "@tanstack/react-query": "5.62.3",
     "@tanstack/react-virtual": "3.13.0",
     "@xyflow/react": "^12.8.2",
@@ -84,10 +85,10 @@
     "@redocly/config": "0.49.0"
   },
   "scripts": {
-    "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",
-    "ts:check": "tsc --noEmit --skipLibCheck",
+    "watch": "tsgo -p tsconfig.build.json && (concurrently \"tsgo -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",
+    "ts:check": "tsgo --noEmit --skipLibCheck",
     "clean": "rimraf lib",
-    "compile": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
+    "compile": "tsgo -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
     "test": "nx run vitest:test",
     "build": "pnpm run clean && pnpm run compile"
   }

package/src/components/Catalog/CatalogFilter/CatalogFilterSelect.tsx

@@ -129,7 +129,7 @@ const StyledSelect = styled(Select)<SelectProps>`
   --select-border-radius: var(--filter-select-border-radius);
   padding: var(--filter-select-padding);
 
-  :hover {
+  &:hover {
     border-color: var(--filter-select-border-color-hover);
   }
   --filter-option-margin: var(--filter-select-option-margin);

package/src/components/CodeBlock/CodeBlockControls.tsx

@@ -186,7 +186,12 @@ export function CodeBlockControls({
                   copy?.onClick?.();
                 } else {
                   telemetry.sendCopyCodeSnippetClickedMessage([
-                    { object: 'code_snippet', snippetType: 'copy' },
+                    {
+                      id: 'copyCodeSnippetButton',
+                      object: 'button',
+                      uri: 'urn:redocly:redoc:ui:button:copyCodeSnippetButton',
+                      snippetType: 'copy',
+                    },
                   ]);
                 }
               }}

package/src/components/CodeBlock/CodeBlockTabs.tsx

@@ -97,7 +97,7 @@ const ShadowWrapper = styled.div`
   position: relative;
   overflow: hidden;
 
-  :after {
+  &:after {
     position: absolute;
     content: '';
     width: 16px;

package/src/components/Feedback/Stars.tsx

@@ -45,9 +45,9 @@ const StarsWrapper = styled.div`
   align-items: center;
 `;
 
-const Star = styled.button.attrs(() => ({
+const Star = styled.button.attrs({
   type: 'button',
-}))`
+})`
   cursor: pointer;
   padding: 0;
   border: none;

package/src/components/Filter/FilterPopover.tsx

@@ -81,7 +81,7 @@ const FilterPopoverHeaderLabel = styled.div`
   font-weight: var(--filter-popover-header-label-font-weight);
 `;
 
-const FilterPopoverHeaderButton = styled.div.attrs({
+const FilterPopoverHeaderButton = styled.div.attrs<{ 'data-testid': string }>({
   'data-testid': 'FilterPopover/DoneButton',
 })`
   color: var(--filter-popover-header-button-color);

package/src/components/Filter/FilterSelect.tsx

@@ -79,7 +79,7 @@ const StyledSelect = styled(Select)<SelectProps>`
   --select-border-radius: var(--filter-select-border-radius);
   padding: var(--filter-select-padding);
 
-  :hover {
+  &:hover {
     border-color: var(--filter-select-border-color-hover);
   }
   --filter-option-margin: var(--filter-select-option-margin);

package/src/components/Link/Link.tsx

@@ -1,8 +1,10 @@
 import * as React from 'react';
 import { useContext } from 'react';
 import { Link as ReactLink } from 'react-router-dom';
+import isPropValid from '@emotion/is-prop-valid';
 
 import type { JSX } from 'react';
+import type { RelativeRoutingType } from 'react-router-dom';
 
 import { ThemeDataContext } from '@redocly/theme/core/contexts/ThemeDataContext';
 
@@ -15,6 +17,12 @@ export type LinkProps = {
   innerRef?: React.Ref<HTMLAnchorElement>;
   languageInsensitive?: boolean;
   onClick?: () => void;
+  reloadDocument?: boolean;
+  replace?: boolean;
+  state?: unknown;
+  preventScrollReset?: boolean;
+  relative?: RelativeRoutingType;
+  viewTransition?: boolean;
   [key: string]: unknown;
   rel?: string;
 };
@@ -27,18 +35,34 @@ export function Link(props: React.PropsWithChildren<LinkProps>): JSX.Element {
     return <LinkComponent {...props} />;
   } else {
     const {
-      active: _,
-      httpVerb: _1,
-      hasActiveSubItem: _2,
-      routeSlug: _3,
-      external: _4,
-      languageInsensitive: _5,
-      iconPosition: _6,
       innerRef,
-      ...filteredProps
+      to,
+      external: _external,
+      languageInsensitive: _languageInsensitive,
+      reloadDocument,
+      replace,
+      state,
+      preventScrollReset,
+      relative,
+      viewTransition,
+      ...restProps
     } = props;
+    const linkProps = Object.fromEntries(
+      Object.entries(restProps).filter(([key, value]) => value !== undefined && isPropValid(key)),
+    );
 
-    // We omit properties to avoid "Warning: Received value for a non-boolean attribute"
-    return <ReactLink ref={innerRef} {...filteredProps} />;
+    return (
+      <ReactLink
+        ref={innerRef}
+        to={to}
+        reloadDocument={reloadDocument}
+        replace={replace}
+        state={state}
+        preventScrollReset={preventScrollReset}
+        relative={relative}
+        viewTransition={viewTransition}
+        {...linkProps}
+      />
+    );
   }
 }

package/src/components/Markdown/Markdown.tsx

@@ -177,15 +177,15 @@ export const Markdown = styled.main.attrs<{
       cursor: pointer;
     }
 
-    > :not(summary):first-of-type {
+    & > :not(summary):first-of-type {
       margin-top: 1.25em;
     }
 
-    > *:last-child {
+    & > *:last-child {
       margin-bottom: 1.25em;
     }
 
-    > :not(summary) {
+    & > :not(summary) {
       margin-left: 2em;
     }
   }

package/src/components/Markdown/styles/heading-anchor.ts

@@ -1,8 +1,8 @@
 import { css } from 'styled-components';
 
-import type { FlattenSimpleInterpolation } from 'styled-components';
+import type { RuleSet } from 'styled-components';
 
-export function headingAnchorCss(className: string): FlattenSimpleInterpolation {
+export function headingAnchorCss(className: string): RuleSet<object> {
   return css`
     .${className}.before {
       position: absolute;
@@ -26,7 +26,7 @@ export function headingAnchorCss(className: string): FlattenSimpleInterpolation
       background-position: center;
     }
 
-    :hover .${className} svg,
+    &:hover .${className} svg,
     .${className}:focus svg {
       visibility: visible;
     }

package/src/components/Product/ProductPicker.tsx

@@ -48,11 +48,11 @@ export function ProductPicker(): JSX.Element | null {
   ) : null;
 }
 
-const ProductDropdown = styled(Dropdown).attrs(() => ({
+const ProductDropdown = styled(Dropdown).attrs({
   dataAttributes: {
     'data-component-name': 'Product/ProductPicker',
   },
-}))`
+})`
   display: none;
   @media screen and (min-width: ${breakpoints.medium}) {
     display: block;

package/src/components/Search/SearchRecent.tsx

@@ -102,7 +102,7 @@ const SearchRecentItem = styled.div`
     display: none;
   }
 
-  :hover {
+  &:hover {
     background-color: var(--search-recent-item-bg-color-hover);
     color: var(--search-recent-item-text-color-hover);
 
@@ -112,7 +112,7 @@ const SearchRecentItem = styled.div`
     }
   }
 
-  :focus-visible {
+  &:focus-visible {
     outline: 1px solid var(--search-recent-item-border-color-focused);
     background-color: var(--search-recent-item-bg-color-active);
   }

package/src/components/Select/SelectInput.tsx

@@ -218,9 +218,9 @@ const SelectInputTag = styled(Tag)`
   --tag-content-padding: 0;
 `;
 
-const SelectInternalInput = styled.input.attrs(() => ({
+const SelectInternalInput = styled.input.attrs<{ width?: string }>({
   type: 'text',
-}))<{ width?: string }>`
+})`
   outline: none;
   border-radius: var(--select-input-border-radius);
   border: none;

package/src/components/StatusCode/StatusCode.tsx

@@ -1,8 +1,9 @@
 import styled from 'styled-components';
 
-export const StatusCode = styled.button.attrs({ 'data-component-name': 'StatusCode/StatusCode' })<{
+export const StatusCode = styled.button.attrs<{
   status: string;
-}>`
+  'data-component-name': string;
+}>({ 'data-component-name': 'StatusCode/StatusCode' })`
   background: none;
   padding: 0;
   display: flex;

package/src/components/TableOfContent/TableOfContent.tsx

@@ -122,7 +122,7 @@ const TableOfContentMenuItem = styled.a<{ depth: number }>`
 
   border-left: solid 2px transparent;
 
-  :hover {
+  &:hover {
     color: var(--toc-item-text-color-active);
   }
   &.active {
@@ -131,7 +131,7 @@ const TableOfContentMenuItem = styled.a<{ depth: number }>`
     font-weight: var(--toc-item-font-weight-active);
   }
 
-  :empty {
+  &:empty {
     padding: 0;
   }
 `;

package/src/components/Tag/Tag.tsx

@@ -202,7 +202,12 @@ const CloseButton = styled.div`
   }
 `;
 
-const TagWrapper = styled.div.attrs(({ className, color, size, variant }: TagProps) => ({
+const TagWrapper = styled.div.attrs<
+  TagProps & {
+    hasCloseButton?: boolean;
+    textTransform?: 'uppercase' | 'lowercase' | 'capitalize' | 'none';
+  }
+>(({ className, color, size, variant }) => ({
   className: [
     className,
     'tag-default',
@@ -212,12 +217,7 @@ const TagWrapper = styled.div.attrs(({ className, color, size, variant }: TagPro
   ]
     .filter(Boolean)
     .join(' '),
-}))<
-  TagProps & {
-    hasCloseButton?: boolean;
-    textTransform?: 'uppercase' | 'lowercase' | 'capitalize' | 'none';
-  }
->`
+}))`
   display: inline-flex;
   align-items: center;
   justify-content: center;

package/src/components/Tags/CounterTag.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 
-export const CounterTag = styled(Tag).attrs({
+export const CounterTag = styled(Tag).attrs<{ 'data-component-name': string }>({
   className: 'tag-counter',
   'data-component-name': 'Tags/CounterTag',
 })`

package/src/components/Tags/HttpTag.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 
-export const HttpTag = styled(Tag).attrs({
+export const HttpTag = styled(Tag).attrs<{ 'data-component-name': string }>({
   className: 'tag-http',
   'data-component-name': 'Tags/HttpTag',
 })`

package/src/components/Typography/CompactTypography.tsx

@@ -2,8 +2,12 @@ import styled from 'styled-components';
 
 import { Typography } from '@redocly/theme/components/Typography/Typography';
 
-export const CompactTypography = styled(Typography).attrs(() => ({
+export const CompactTypography = styled(Typography).attrs<{
+  mt: string;
+  mb: string;
+  'data-component-name': string;
+}>({
   mt: '0em',
   mb: '0em',
   'data-component-name': 'Typography/CompactTypography',
-}))``;
+})``;

package/src/components/Typography/Typography.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-export interface TypographyProps {
+export type TypographyProps = {
   color?: string;
   fontFamily?: string;
   fontSize?: string;
@@ -11,12 +11,13 @@ export interface TypographyProps {
   marginBottom?: string;
   marginTop?: string;
   textAlign?: string;
-}
+  'data-component-name'?: string;
+};
 
-export const Typography = styled.span.attrs<{ className?: string }>(({ className }) => ({
+export const Typography = styled.span.attrs<TypographyProps>(({ className }) => ({
   'data-component-name': 'Typography/Typography',
   className,
-}))<TypographyProps>`
+}))`
   color: ${({ color }) => color || 'var(--text-color-primary)'};
   font-family: ${({ fontFamily }) => fontFamily || 'var(--font-family-base)'};
   font-size: ${({ fontSize }) => fontSize || 'var(--font-size-base)'};

package/src/components/UserMenu/UserInfoMenuItem.tsx

@@ -36,7 +36,7 @@ export function UserInfoMenuItem({
   );
 }
 
-const UserInfoMenuItemWrapper = styled(DropdownMenuItem).attrs({
+const UserInfoMenuItemWrapper = styled(DropdownMenuItem).attrs<{ 'data-component-name': string }>({
   'data-component-name': 'UserMenu/UserInfoMenuItem',
 })`
   display: flex;

package/src/components/UserMenu/UserMenu.tsx

@@ -84,9 +84,9 @@ const UserMenuWrapper = styled.div`
   }
 `;
 
-const UserMenuTrigger = styled.div.attrs(() => ({
+const UserMenuTrigger = styled.div.attrs<{ 'data-testid': string }>({
   'data-testid': 'user-menu-button',
-}))`
+})`
   display: flex;
   align-items: center;
   cursor: pointer;
@@ -94,11 +94,11 @@ const UserMenuTrigger = styled.div.attrs(() => ({
   padding: 0;
 `;
 
-const StyledDropdown = styled(Dropdown).attrs(() => ({
+const StyledDropdown = styled(Dropdown).attrs<{ 'data-testid': string }>({
   dataAttributes: {
     'data-testid': 'user-menu-dropdown',
   },
-}))`
+})`
   --dropdown-menu-font-size: var(--user-menu-dropdown-font-size);
   --dropdown-menu-font-weight: var(--user-menu-dropdown-font-weight);
   --dropdown-menu-line-height: var(--user-menu-dropdown-line-height);