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

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@redocly/theme",
-  "version": "0.59.0-next.1",
+  "version": "0.59.0-next.3",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
     "redocly"
   ],
   "author": "team@redocly.com",
-  "license": "SEE LICENSE IN LICENSE",
+  "license": "MIT",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "exports": {
@@ -63,10 +63,10 @@
     "styled-system": "5.1.5",
     "ts-node": "10.9.2",
     "ts-node-dev": "2.0.0",
-    "tsc-alias": "1.8.10",
+    "tsc-alias": "1.8.16",
     "tsconfig-paths": "4.2.0",
     "tsconfig-paths-webpack-plugin": "3.5.2",
-    "typescript": "5.6.2",
+    "typescript": "5.9.3",
     "vitest": "3.2.4",
     "vitest-when": "0.6.2",
     "webpack": "5.94.0"
@@ -84,10 +84,10 @@
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "4.1.1",
     "nprogress": "0.2.0",
-    "openapi-sampler": "1.6.1",
+    "openapi-sampler": "1.6.2",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.35.1",
+    "@redocly/config": "0.36.0",
     "@redocly/realm-asyncapi-sdk": "0.5.0-next.0"
   },
   "scripts": {

package/src/components/Catalog/Catalog.tsx

@@ -20,8 +20,11 @@ import { CatalogViewModeToggle } from '@redocly/theme/components/Catalog/Catalog
 import { CatalogSortButton } from '@redocly/theme/components/Catalog/CatalogSortButton';
 import { CatalogEntities } from '@redocly/theme/components/Catalog/CatalogEntities';
 
+type CatalogFiltersWithCounts = Record<string, { value: string; count: number }[]>;
+
 export type CatalogProps = {
   catalogConfig: CatalogEntityConfig;
+  filters?: CatalogFiltersWithCounts;
   entitiesTypes: string[];
   initialEntitiesList?: BffCatalogEntityList;
   catalogSwitcherItems: CatalogSwitcherItem[];
@@ -29,9 +32,11 @@ export type CatalogProps = {
 };
 
 const customCatalogOptionsCasing = (str: string): string => {
-  if (!str) return str;
+  const trimmedStr = str.trim();
+  if (!trimmedStr) return trimmedStr;
+
+  const words = trimmedStr.split(/[\s-_]+/);
 
-  const words = str.split(/[\s-_]+/);
   return words
     .map((word, index) => {
       if (index === 0 && word.toLowerCase() === 'api') {
@@ -45,6 +50,7 @@ const customCatalogOptionsCasing = (str: string): string => {
 export function Catalog(props: CatalogProps): JSX.Element {
   const {
     catalogConfig,
+    filters: serverFilters,
     entitiesTypes,
     initialEntitiesList,
     catalogSwitcherItems,
@@ -72,7 +78,12 @@ export function Catalog(props: CatalogProps): JSX.Element {
     onChangeCollapseSidebarClick,
     layout,
     collapsedSidebar,
-  } = useCatalog(catalogConfig, initialEntitiesList?.page.total || 0, initialViewMode);
+  } = useCatalog(
+    catalogConfig,
+    serverFilters,
+    initialEntitiesList?.page.total || 0,
+    initialViewMode,
+  );
 
   return (
     <>
@@ -94,7 +105,7 @@ export function Catalog(props: CatalogProps): JSX.Element {
               filters={filters}
               filterTerm={searchQuery}
               hideSearch={true}
-              showCounter={false}
+              showCounter={true}
               filterValuesCasing={customCatalogOptionsCasing}
             />
           }

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations.tsx

@@ -46,7 +46,7 @@ export function CatalogEntityApiDescriptionRelations({
 }: CatalogEntityApiDescriptionRelationsProps): JSX.Element {
   return (
     <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations">
-      <Tabs key={entity.id} size={TabsSize.MEDIUM}>
+      <Tabs key={entity.id} forceReady={relations.length > 0} size={TabsSize.MEDIUM}>
         <TabItem
           label="Operations"
           icon={<MoleculesIcon />}

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations.tsx

@@ -74,7 +74,7 @@ export function CatalogEntityTeamRelations({
 }: CatalogEntityTeamRelationsProps): JSX.Element {
   return (
     <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations">
-      <Tabs size={TabsSize.MEDIUM}>
+      <Tabs forceReady={relations.length > 0} size={TabsSize.MEDIUM}>
         <TabItem label="Members" icon={<PeopleIcon />} onClick={() => setFilter('type:user')}>
           <CatalogEntityRelationsTable
             key="members-table"

package/src/components/Dropdown/Dropdown.tsx

@@ -1,7 +1,7 @@
-import React, { cloneElement, useRef } from 'react';
+import React, { cloneElement, useRef, forwardRef } from 'react';
 import styled from 'styled-components';
 
-import type { PropsWithChildren, ReactElement, JSX } from 'react';
+import type { PropsWithChildren, ReactElement } from 'react';
 
 import { useOutsideClick, useControlledState } from '@redocly/theme/core/hooks';
 import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
@@ -32,84 +32,89 @@ export type DropdownProps = PropsWithChildren<{
   onClose?: () => void;
 }>;
 
-export function Dropdown({
-  children,
-  className,
-  active,
-  trigger,
-  triggerEvent = 'click',
-  closeOnClick = true,
-  withArrow,
-  dataAttributes,
-  placement,
-  alignment,
-  onClick,
-  onClose,
-}: DropdownProps): JSX.Element {
-  const dropdownRef = useRef<HTMLDivElement | null>(null);
-  const [isOpen, setIsOpen] = useControlledState<boolean>(false, active);
-
-  const handleOpen = () => {
-    setIsOpen(true);
-  };
-
-  const handleClose = () => {
-    setIsOpen(false);
-    onClose?.();
-  };
-
-  const handleChildClick = () => {
-    handleClose();
-  };
-
-  const handleToggle = (event: React.UIEvent) => {
-    event.stopPropagation();
-    event.preventDefault();
-    setIsOpen(!isOpen);
-  };
-
-  const handleKeyDown = (event: React.KeyboardEvent) => {
-    if (event.key === 'Enter' || event.key === ' ') {
-      handleToggle(event);
-    }
-  };
-
-  useOutsideClick(dropdownRef, handleClose);
-
-  const triggerChild = React.Children.only(trigger) as ReactElement<TriggerProps>;
-
-  const dropdownTrigger = cloneElement(triggerChild, {
-    onClick: triggerEvent === 'click' ? handleToggle : undefined,
-    icon: withArrow ? isOpen ? <ChevronUpIcon /> : <ChevronDownIcon /> : undefined,
-    ...(withArrow ? { iconPosition: 'right' } : {}),
-    ...triggerChild.props,
-    onKeyDown: triggerEvent === 'click' ? handleKeyDown : undefined,
-  });
-
-  return (
-    <DropdownWrapper
-      data-component-name="Dropdown/Dropdown"
-      data-testid="dropdown"
-      {...dataAttributes}
-      className={className}
-      ref={dropdownRef}
-      onPointerEnter={triggerEvent === 'hover' ? handleOpen : undefined}
-      onPointerLeave={triggerEvent === 'hover' ? handleClose : undefined}
-      onClick={onClick}
-    >
-      {dropdownTrigger}
-
-      <ChildrenWrapper
-        placement={placement}
-        alignment={alignment}
-        isOpen={isOpen}
-        onClick={closeOnClick ? handleChildClick : undefined}
+export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
+  (
+    {
+      children,
+      className,
+      active,
+      trigger,
+      triggerEvent = 'click',
+      closeOnClick = true,
+      withArrow,
+      dataAttributes,
+      placement,
+      alignment,
+      onClick,
+      onClose,
+    },
+    ref,
+  ) => {
+    const dropdownRef = useRef<HTMLDivElement | null>(null);
+    const [isOpen, setIsOpen] = useControlledState<boolean>(false, active);
+
+    const handleOpen = () => {
+      setIsOpen(true);
+    };
+
+    const handleClose = () => {
+      setIsOpen(false);
+      onClose?.();
+    };
+
+    const handleChildClick = () => {
+      handleClose();
+    };
+
+    const handleToggle = (event: React.UIEvent) => {
+      event.stopPropagation();
+      event.preventDefault();
+      setIsOpen(!isOpen);
+    };
+
+    const handleKeyDown = (event: React.KeyboardEvent) => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        handleToggle(event);
+      }
+    };
+
+    useOutsideClick((ref as React.RefObject<HTMLElement | null>) || dropdownRef, handleClose);
+
+    const triggerChild = React.Children.only(trigger) as ReactElement<TriggerProps>;
+
+    const dropdownTrigger = cloneElement(triggerChild, {
+      onClick: triggerEvent === 'click' ? handleToggle : undefined,
+      icon: withArrow ? isOpen ? <ChevronUpIcon /> : <ChevronDownIcon /> : undefined,
+      ...(withArrow ? { iconPosition: 'right' } : {}),
+      ...triggerChild.props,
+      onKeyDown: triggerEvent === 'click' ? handleKeyDown : undefined,
+    });
+
+    return (
+      <DropdownWrapper
+        data-component-name="Dropdown/Dropdown"
+        data-testid="dropdown"
+        {...dataAttributes}
+        className={className}
+        ref={ref || dropdownRef}
+        onPointerEnter={triggerEvent === 'hover' ? handleOpen : undefined}
+        onPointerLeave={triggerEvent === 'hover' ? handleClose : undefined}
+        onClick={onClick}
       >
-        {children}
-      </ChildrenWrapper>
-    </DropdownWrapper>
-  );
-}
+        {dropdownTrigger}
+
+        <ChildrenWrapper
+          placement={placement}
+          alignment={alignment}
+          isOpen={isOpen}
+          onClick={closeOnClick ? handleChildClick : undefined}
+        >
+          {children}
+        </ChildrenWrapper>
+      </DropdownWrapper>
+    );
+  },
+);
 
 const DropdownWrapper = styled.div`
   --button-gap: var(--spacing-xxs);

package/src/components/Menu/MenuItem.tsx

@@ -82,6 +82,7 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
       role={item.link ? 'none' : 'link'}
       tabIndex={!item.link ? 0 : undefined}
       data-testid="menu-item-label"
+      data-active={item.active}
     >
       {hasChevron ? <ChevronWrapper>{chevron}</ChevronWrapper> : null}
       <MenuItemIcon icon={item.icon} srcSet={item.srcSet} />

package/src/components/Navbar/NavbarItem.tsx

@@ -34,12 +34,13 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
   if (navItem.type !== 'link' && !navItem.items) return null;
 
   const item = navItem as ResolvedNavLinkItem;
-  const normalizedPath =
-    (item.link && item.link !== '/' ? removeTrailingSlash(item.link) : item.link) || '';
+  const normalizedPath = (item.link ? removeTrailingSlash(item.link) : item.link) || '';
 
-  const isActive =
-    pathname ===
-    withPathPrefix(getPathnameForLocale(normalizedPath, defaultLocale, currentLocale, locales));
+  const pathWithPathPrefix = withPathPrefix(
+    getPathnameForLocale(normalizedPath, defaultLocale, currentLocale, locales),
+  );
+
+  const isActive = removeTrailingSlash(pathname) === removeTrailingSlash(pathWithPathPrefix);
 
   const itemContent = (
     <NavbarMenuItem

package/src/components/Search/FilterFields/SearchFilterFieldTags.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import type { SearchFacet, SearchFacetCount } from '@redocly/theme/core/types';
 
-import { Tag, type TagProps } from '@redocly/theme/components/Tag/Tag';
+import { Tag } from '@redocly/theme/components/Tag/Tag';
 
 type SearchFilterFieldTagsProps = {
   className?: string;
@@ -47,6 +47,7 @@ export function SearchFilterFieldTags({
             }}
             active={active}
             borderless
+            selectable
           >
             {value} {isCounterVisible && <span>{count}</span>}
           </FilterTagWrapper>
@@ -62,9 +63,8 @@ const FilterTagsWrapper = styled.div`
   gap: var(--search-filter-field-tags-gap);
 `;
 
-const FilterTagWrapper = styled(Tag)<{ color: TagProps['color'] }>`
+const FilterTagWrapper = styled(Tag)`
   text-transform: uppercase;
   cursor: pointer;
-  ${({ color }) => color && `background-color: var(--tag-operation-bg-color-${color});`}
   margin: var(--search-filter-field-tags-tag-margin);
 `;

package/src/components/Search/SearchAiConversationInput.tsx

@@ -13,6 +13,7 @@ type SearchAiConversationInputProps = {
   isGeneratingResponse: boolean;
   placeholder?: string;
   className?: string;
+  disabled?: boolean;
 };
 
 export function SearchAiConversationInput({
@@ -20,6 +21,7 @@ export function SearchAiConversationInput({
   onMessageSent,
   className,
   placeholder,
+  disabled,
 }: SearchAiConversationInputProps): JSX.Element {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
@@ -36,6 +38,8 @@ export function SearchAiConversationInput({
   }, [isGeneratingResponse]);
 
   const handleSendMessage = () => {
+    if (disabled) return;
+
     setQuery('');
     onMessageSent(query);
   };
@@ -46,7 +50,7 @@ export function SearchAiConversationInput({
     }
   };
 
-  const isDisabled = isGeneratingResponse || query.trim().length === 0;
+  const isDisabled = disabled || isGeneratingResponse || query.trim().length === 0;
 
   return (
     <SearchAiConversationInputWrapper
@@ -62,7 +66,7 @@ export function SearchAiConversationInput({
         onChange={(e) => setQuery(e.target.value)}
         onKeyUp={handleOnKeyUp}
         value={query}
-        disabled={isGeneratingResponse}
+        disabled={disabled || isGeneratingResponse}
         maxLength={AI_SEARCH_MAX_MESSAGE_LENGTH}
       />
 
@@ -111,6 +115,10 @@ const ConversationInput = styled.input`
     border-color: var(--search-ai-conversation-input-border-color-focus);
   }
 
+  &:disabled {
+    background-color: var(--search-ai-conversation-input-bg-color-disabled);
+  }
+
   &:focus:disabled {
     border-color: var(--search-ai-conversation-input-border-color-disabled);
   }
@@ -126,6 +134,8 @@ const SendButton = styled(Button)`
   display: flex;
   align-items: center;
   justify-content: center;
+  border-radius: var(--search-ai-conversation-input-send-button-border-radius);
+  padding: var(--search-ai-conversation-input-send-button-padding);
 
   &:hover {
     background-color: var(--search-ai-conversation-input-send-button-bg-color-hover);

package/src/components/Search/SearchDialog.tsx

@@ -48,6 +48,7 @@ export function SearchDialog({
   const products = useProducts();
   const currentProduct = useCurrentProduct();
   const [product, setProduct] = useState(currentProduct);
+  const searchSessionId = `search-${Date.now()}-${Math.random().toString(36).substring(2, 8)}`;
   const [mode, setMode] = useState<'search' | 'ai-dialog'>(initialMode);
   const autoSearchDisabled = mode !== 'search';
   const {
@@ -62,7 +63,7 @@ export function SearchDialog({
     advancedSearch,
     askAi,
     groupField,
-  } = useSearch(product?.name, autoSearchDisabled);
+  } = useSearch(product?.name, autoSearchDisabled, searchSessionId);
   const {
     isFilterOpen,
     onFilterToggle,
@@ -72,7 +73,7 @@ export function SearchDialog({
     onQuickFilterReset,
   } = useSearchFilter(filter, setFilter);
   const { addSearchHistoryItem } = useRecentSearches();
-  const aiSearch = useAiSearch({ filter });
+  const aiSearch = useAiSearch({ filter }, searchSessionId);
 
   const searchInputRef = useRef<HTMLInputElement>(null);
   const modalRef = useRef<HTMLDivElement>(null);
@@ -150,13 +151,14 @@ export function SearchDialog({
               totalResults: results.length.toString(),
               index: index.toString(),
               searchEngine: mode,
+              searchSessionId,
             });
             onClose();
           }}
         />
       );
     },
-    [onClose, product, products, addSearchHistoryItem, query, telemetry, mode],
+    [onClose, product, products, addSearchHistoryItem, query, telemetry, mode, searchSessionId],
   );
 
   const showLoadMore = useCallback(
@@ -389,6 +391,7 @@ export function SearchDialog({
                         telemetry.sendSearchRecentClickedMessage({
                           query,
                           index: index.toString(),
+                          searchSessionId,
                         });
                         setQuery(query);
                         focusSearchInput();

package/src/components/Search/SearchGroups.tsx

@@ -45,6 +45,7 @@ export function SearchGroups({
         borderless
         active={!searchFilter.some((item) => item.isQuickFilter)}
         onClick={() => searchFilter.some((item) => item.isQuickFilter) && onQuickFilterReset()}
+        selectable
       >
         All
       </GroupTag>
@@ -61,6 +62,7 @@ export function SearchGroups({
               onClick={() => handleGroupTagClick(value, facet.field, active, currentValues)}
               active={active}
               borderless
+              selectable
             >
               {value} {isCounterVisible && <span>{count}</span>}
             </GroupTag>

package/src/components/Search/variables.ts

@@ -171,6 +171,7 @@ export const search = css`
   --search-ai-assistant-bg-color: var(--layer-color);
   --search-ai-assistant-text-color: var(--text-color-primary);
   --search-ai-assistant-border: 1px solid var(--border-color-primary);
+  --search-ai-assistant-message-max-width: 80%;
 
   --search-ai-resources-gap: var(--spacing-base);
   --search-ai-resources-title-font-weight: var(--font-weight-medium);
@@ -232,6 +233,7 @@ export const search = css`
   * @tokens AI Search Conversation Input
   */
   --search-ai-conversation-input-bg-color: var(--bg-color);
+  --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);
@@ -241,10 +243,12 @@ export const search = css`
   --search-ai-conversation-input-border-color-disabled: var(--border-color-secondary);
 
   --search-ai-conversation-input-send-button-right: 12px;
+  --search-ai-conversation-input-send-button-padding: 5px;
   --search-ai-conversation-input-send-button-bg-color: var(--button-bg-color-primary);
   --search-ai-conversation-input-send-button-bg-color-hover: var(--button-bg-color-primary-hover);
   --search-ai-conversation-input-send-button-bg-color-disabled: var(--button-bg-color-disabled);
   --search-ai-conversation-input-send-button-border-disabled: 1px solid var(--button-border-color-disabled);
+  --search-ai-conversation-input-send-button-border-radius: var(--border-radius);
 
   /**
   * @tokens AI Search Response
@@ -277,7 +281,7 @@ export const search = css`
 
   --search-ai-suggestions-gap: var(--spacing-sm);
   --search-ai-suggestions-margin-left: var(--spacing-xs);
-  --search-ai-suggestion-item-gap: var(--spacing-xs);
+  --search-ai-suggestion-item-gap: var(--spacing-xxs);
 
   --search-ai-suggestions-title-text-color: var(--text-color-description);
   --search-ai-suggestions-title-font-size: var(--font-size-base);

package/src/components/Select/SelectInput.tsx

@@ -83,6 +83,7 @@ export function SelectInput<T>(props: SelectInputProps<T>): React.ReactNode {
   const selectTags = selectedOptions.map((option, index) => (
     <SelectInputTag
       closable
+      tabIndex={0}
       key={index}
       onClose={() => {
         clearHandler?.(option);

package/src/components/Tag/Tag.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import type { JSX } from 'react';
 
@@ -56,6 +56,7 @@ export type TagProps = {
   maxLength?: number;
   textTransform?: 'uppercase' | 'lowercase' | 'capitalize' | 'none';
   variant?: 'outline' | 'filled';
+  selectable?: boolean;
 };
 
 export function Tag({
@@ -75,6 +76,7 @@ export function Tag({
   maxLength,
   textTransform,
   variant = 'filled',
+  selectable,
   ...otherProps
 }: TagProps): JSX.Element {
   const truncateText = (text: string, maxLen: number): string => {
@@ -152,6 +154,7 @@ export function Tag({
       hasCloseButton={closable}
       textTransform={textTransform}
       variant={variant}
+      selectable={selectable}
       {...otherProps}
     >
       {withStatusDot ? <StatusDot color={statusDotColor} /> : icon ? icon : null}
@@ -186,16 +189,28 @@ const CloseButton = styled.div`
   justify-content: center;
   align-self: stretch;
   border-radius: 0 var(--tag-border-radius) var(--tag-border-radius) 0;
+  margin: calc(-1 * var(--tag-border-width));
+  padding: var(--tag-border-width);
 
   &:hover {
     background: var(--tag-close-button-bg-color-hover);
   }
+
+  &:focus-visible {
+    background: var(--tag-close-button-bg-color-focus);
+  }
 `;
 
-const TagWrapper = styled.div.attrs(({ className, color, size }: TagProps) => ({
-  className:
-    (className || '') +
-    ` tag-default ${color ? `tag-${color}` : ''} ${size ? `tag-size-${size}` : ''}`,
+const TagWrapper = styled.div.attrs(({ className, color, size, variant }: TagProps) => ({
+  className: [
+    className,
+    'tag-default',
+    color && `tag-${color}`,
+    size && `tag-size-${size}`,
+    `tag-variant-${variant || 'filled'}`,
+  ]
+    .filter(Boolean)
+    .join(' '),
 }))<
   TagProps & {
     hasCloseButton?: boolean;
@@ -227,12 +242,11 @@ const TagWrapper = styled.div.attrs(({ className, color, size }: TagProps) => ({
     `text-transform: ${textTransform ? `${textTransform}` : 'var(--tag-text-transform)'};`}
 
   color: var(--tag-color);
-  background-color: ${({ variant }) =>
-    variant === 'filled' ? 'var(--tag-bg-color)' : 'transparent'};
-  ${({ borderless, variant }) =>
+  background-color: var(--tag-bg-color);
+  ${({ borderless }) =>
     borderless
       ? ''
-      : `border: var(--tag-border-width) var(--tag-border-style) ${variant === 'filled' ? 'transparent' : 'var(--tag-border-color)'};`}
+      : `border: var(--tag-border-width) var(--tag-border-style) var(--tag-border-color);`}
   border-radius: var(--tag-border-radius);
 
   svg {
@@ -240,18 +254,20 @@ const TagWrapper = styled.div.attrs(({ className, color, size }: TagProps) => ({
     height: var(--tag-icon-height);
   }
 
-  &:hover {
-    background-color: ${({ variant }) =>
-      variant === 'filled' ? 'var(--tag-bg-color-hover)' : 'transparent'};
-    border-color: ${({ variant }) =>
-      variant === 'outline' ? 'var(--tag-border-color-hover)' : 'transparent'};
-  }
+  ${({ selectable }) =>
+    selectable &&
+    css`
+      &:hover {
+        background-color: var(--tag-bg-color-hover);
+        border-color: var(--tag-border-color-hover);
+      }
 
-  &:focus-visible {
-    outline: 1px solid var(--tag-border-color-focused);
-    outline-offset: 2px;
-    border-radius: var(--tag-border-radius-focused);
-  }
+      &:focus-visible {
+        outline: 1px solid var(--tag-border-color-focused);
+        outline-offset: 2px;
+        border-radius: var(--tag-border-radius-focused);
+      }
+    `};
 `;
 
 const StatusDot = styled.div<{ color: string }>`