@redocly/theme 0.67.0-next.0 → 0.67.0-next.2

package/src/components/Menu/MenuContainer.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
+import React, { type JSX, type PropsWithChildren } from 'react';
 import styled, { keyframes } from 'styled-components';
 
-import type { JSX, PropsWithChildren } from 'react';
 import type { MenuItemsAnimation } from '@redocly/theme/core/types';
 
 export type MenuContainerProps = PropsWithChildren<{
@@ -11,8 +10,24 @@ export type MenuContainerProps = PropsWithChildren<{
   animation?: MenuItemsAnimation;
 }>;
 
-export function MenuContainer(props: MenuContainerProps): JSX.Element {
-  return <MenuContainerComponent {...props} data-component-name="Menu/MenuContainer" />;
+export function MenuContainer({
+  growContent,
+  className,
+  hidden,
+  animation,
+  children,
+}: MenuContainerProps): JSX.Element {
+  return (
+    <MenuContainerComponent
+      data-component-name="Menu/MenuContainer"
+      $growContent={growContent === undefined ? true : growContent}
+      $animation={animation}
+      $hidden={hidden}
+      className={className}
+    >
+      {children}
+    </MenuContainerComponent>
+  );
 }
 
 const slideInRightAnimation = keyframes`
@@ -33,17 +48,18 @@ const slideInLeftAnimation = keyframes`
   }
 `;
 
-const MenuContainerComponent = styled.div.attrs<MenuContainerProps>(
-  ({ growContent, className, animation }) => ({
-    growContent: growContent === undefined ? true : growContent,
-    className,
-    animation,
-  }),
-)<MenuContainerProps>`
-  animation-name: ${({ animation }) =>
-    animation === 'slideInRight'
+const MenuContainerComponent = styled.div.attrs<{
+  'data-component-name': string;
+  $growContent: boolean;
+  $animation: MenuItemsAnimation;
+  $hidden: boolean;
+}>({
+  'data-component-name': 'Menu/MenuContainer',
+})`
+  animation-name: ${({ $animation }) =>
+    $animation === 'slideInRight'
       ? slideInRightAnimation
-      : animation === 'slideInLeft'
+      : $animation === 'slideInLeft'
         ? slideInLeftAnimation
         : 'none'};
   animation-fill-mode: forwards;
@@ -51,8 +67,8 @@ const MenuContainerComponent = styled.div.attrs<MenuContainerProps>(
   animation-timing-function: ease;
   position: relative;
   overflow-y: auto;
-  flex-grow: ${({ growContent }) => (growContent ? 1 : 0)};
+  flex-grow: ${({ $growContent }) => ($growContent ? 1 : 0)};
   padding-top: var(--menu-container-padding-top);
-  display: ${({ hidden }) => (hidden ? 'none' : 'block')};
+  display: ${({ $hidden }) => ($hidden ? 'none' : 'block')};
   overscroll-behavior: contain;
 `;

package/src/components/Menu/MenuItem.tsx

@@ -78,11 +78,11 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
 
   const label = item.label && (
     <MenuItemLabelWrapper
-      active={item.active}
-      deprecated={item.deprecated}
-      depth={depth}
-      withChevron={hasChevron}
-      isSeparator={isSeparator}
+      $active={item.active}
+      $deprecated={item.deprecated}
+      $depth={depth}
+      $withChevron={hasChevron}
+      $isSeparator={isSeparator}
       onClick={handleOnClick}
       onKeyDown={handleExpandOnEnter}
       ref={labelRef}
@@ -158,12 +158,17 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
         label
       )}
       {isNested ? (
-        <MenuItemNestedWrapper depth={depth} ref={nestedMenuRef} style={style}>
+        <MenuItemNestedWrapper
+          $isExpanded={isExpanded}
+          $depth={depth}
+          ref={nestedMenuRef}
+          style={style}
+        >
           {isExpanded || !canUnmount ? props.children : null}
         </MenuItemNestedWrapper>
       ) : null}
       {item.separatorLine ? (
-        <MenuItemSeparatorLine depth={depth} linePosition={item.linePosition} />
+        <MenuItemSeparatorLine $depth={depth} $linePosition={item.linePosition} />
       ) : null}
     </MenuItemWrapper>
   );
@@ -233,8 +238,8 @@ const MenuItemWrapper = styled.div`
 `;
 
 const MenuItemNestedWrapper = styled.div<{
-  isExpanded?: boolean;
-  depth?: number;
+  $isExpanded?: boolean;
+  $depth?: number;
 }>`
   order: 1;
   position: relative;
@@ -249,23 +254,23 @@ const MenuItemNestedWrapper = styled.div<{
     bottom: var(--spacing-unit);
     top: 0;
     z-index: var(--z-index-surface);
-    left: ${({ depth }) =>
+    left: ${({ $depth }) =>
       `calc(
         var(--menu-item-label-margin-horizontal) +
         var(--menu-item-padding-horizontal) +
         (var(--menu-item-label-chevron-size) / 2 - 1px) +
-        var(--menu-item-nested-offset) * ${depth})
+        var(--menu-item-nested-offset) * ${$depth})
       `};
     border: 0.5px solid var(--menu-item-border-color-hover);
   }
 `;
 
 const MenuItemLabelWrapper = styled.li<{
-  active?: boolean;
-  depth?: number;
-  withChevron?: boolean;
-  deprecated?: boolean;
-  isSeparator?: boolean;
+  $active?: boolean;
+  $depth?: number;
+  $withChevron?: boolean;
+  $deprecated?: boolean;
+  $isSeparator?: boolean;
 }>`
   display: flex;
   position: relative;
@@ -279,11 +284,11 @@ const MenuItemLabelWrapper = styled.li<{
   padding: var(--menu-item-label-padding);
   gap: var(--menu-item-label-gap);
 
-  padding-left: ${({ withChevron, depth, isSeparator }) =>
+  padding-left: ${({ $withChevron, $depth, $isSeparator }) =>
     `calc(
       var(--menu-item-padding-horizontal) +
-      ${!withChevron ? 'var(--menu-item-label-chevron-offset) + ' + (isSeparator ? 'var(--menu-item-separator-offest)' : '0px') : '0px'} +
-      ${depth ? 'var(--menu-item-nested-offset) * ' + depth : '0px'}
+      ${!$withChevron ? 'var(--menu-item-label-chevron-offset) + ' + ($isSeparator ? 'var(--menu-item-separator-offest)' : '0px') : '0px'} +
+      ${$depth ? 'var(--menu-item-nested-offset) * ' + $depth : '0px'}
     )`};
 
   &:hover {
@@ -298,10 +303,10 @@ const MenuItemLabelWrapper = styled.li<{
     }
   }
 
-  ${({ active, deprecated }) =>
-    active &&
+  ${({ $active, $deprecated }) =>
+    $active &&
     css`
-      color: ${deprecated ? 'var(--menu-content-color-disabled)' : 'var(--menu-item-color-active)'};
+      color: ${$deprecated ? 'var(--menu-content-color-disabled)' : 'var(--menu-item-color-active)'};
       background-color: var(--menu-item-bg-color-active);
       font-weight: var(--menu-item-font-weight-active);
 
@@ -318,8 +323,8 @@ const MenuItemLabelWrapper = styled.li<{
       }
     `};
 
-  ${({ deprecated }) =>
-    deprecated &&
+  ${({ $deprecated }) =>
+    $deprecated &&
     css`
       color: var(--menu-content-color-disabled);
 
@@ -360,19 +365,19 @@ const MenuItemLink = styled(Link)`
 `;
 
 const MenuItemSeparatorLine = styled.div<{
-  depth?: number;
-  linePosition?: string;
+  $depth?: number;
+  $linePosition?: string;
 }>`
   height: var(--menu-item-separator-line-height);
   background-color: var(--menu-item-separator-line-bg-color);
-  margin: ${({ depth }) => `
+  margin: ${({ $depth }) => `
     var(--menu-item-padding-vertical)
     var(--sidebar-margin-horizontal)
     var(--menu-item-padding-vertical)
     calc(var(--sidebar-margin-horizontal) +
-    ${depth ? 'var(--menu-item-nested-offset) * ' + depth : '0px'})
+    ${$depth ? 'var(--menu-item-nested-offset) * ' + $depth : '0px'})
   `};
-  order: ${({ linePosition }) => (linePosition === 'top' ? 0 : 1)};
+  order: ${({ $linePosition }) => ($linePosition === 'top' ? 0 : 1)};
 `;
 
 const MenuItemLabel = styled.span`

package/src/components/Menu/MenuMobile.tsx

@@ -48,9 +48,9 @@ export function MenuMobile({ className, hideUserProfile }: MobileMenuProps): JSX
 
   return (
     <MobileMenuWrapper data-component-name="Menu/MenuMobile" className={className}>
-      <ScrollableArea isButtonsSectionVisible={!!isButtonsSectionVisible}>
+      <ScrollableArea $isButtonsSectionVisible={!!isButtonsSectionVisible}>
         {isButtonsSectionVisible && (
-          <ButtonsSection alignRight={!prevLevelName && !!nextLevelName}>
+          <ButtonsSection $alignRight={!prevLevelName && !!nextLevelName}>
             {prevLevelName && (
               <ControlButton
                 data-testid="control-button"
@@ -60,7 +60,7 @@ export function MenuMobile({ className, hideUserProfile }: MobileMenuProps): JSX
                 }}
               >
                 <ChevronLeftIcon size="12px" color="--tree-content-color-default" />
-                <ControlButtonLabel paddingDirection="left">{prevLevelName}</ControlButtonLabel>
+                <ControlButtonLabel $paddingDirection="left">{prevLevelName}</ControlButtonLabel>
               </ControlButton>
             )}
             {nextLevelName && (
@@ -68,7 +68,7 @@ export function MenuMobile({ className, hideUserProfile }: MobileMenuProps): JSX
                 data-testid="control-button"
                 onClick={() => setMenuLevel(menuLevel + 1)}
               >
-                <ControlButtonLabel paddingDirection="right">{nextLevelName}</ControlButtonLabel>
+                <ControlButtonLabel $paddingDirection="right">{nextLevelName}</ControlButtonLabel>
                 <ChevronRightIcon size="12px" color="--tree-content-color-default" />
               </ControlButton>
             )}
@@ -117,14 +117,14 @@ const MobileMenuWrapper = styled.div`
   }
 `;
 
-const ScrollableArea = styled.div<{ isButtonsSectionVisible: boolean }>`
-  padding-top: ${({ isButtonsSectionVisible }) =>
-    isButtonsSectionVisible ? '0px' : 'var(--menu-mobile-padding-top)'};
+const ScrollableArea = styled.div<{ $isButtonsSectionVisible: boolean }>`
+  padding-top: ${({ $isButtonsSectionVisible }) =>
+    $isButtonsSectionVisible ? '0px' : 'var(--menu-mobile-padding-top)'};
   overflow-y: scroll;
   flex-grow: 1;
 `;
 
-const ButtonsSection = styled.div<{ alignRight: boolean }>`
+const ButtonsSection = styled.div<{ $alignRight: boolean }>`
   align-items: center;
   display: flex;
   justify-content: space-between;
@@ -132,7 +132,7 @@ const ButtonsSection = styled.div<{ alignRight: boolean }>`
   margin: 0 0 var(--spacing-sm) 0;
   background: var(--layer-color);
   gap: var(--spacing-xs);
-  ${({ alignRight }) => alignRight && 'justify-content: flex-end'};
+  ${({ $alignRight }) => $alignRight && 'justify-content: flex-end'};
 `;
 
 const MenuWrapper = styled.div`
@@ -166,10 +166,10 @@ const ControlButton = styled.li`
   }
 `;
 
-const ControlButtonLabel = styled.span<{ paddingDirection: 'right' | 'left' }>`
+const ControlButtonLabel = styled.span<{ $paddingDirection: 'right' | 'left' }>`
   vertical-align: middle;
-  ${({ paddingDirection }) => paddingDirection === 'left' && 'padding-left: 8px'};
-  ${({ paddingDirection }) => paddingDirection === 'right' && 'padding-right: 8px'};
+  ${({ $paddingDirection }) => $paddingDirection === 'left' && 'padding-left: 8px'};
+  ${({ $paddingDirection }) => $paddingDirection === 'right' && 'padding-right: 8px'};
 `;
 
 const ProductNameWrapper = styled.div`

package/src/components/Navbar/NavbarItem.tsx

@@ -4,7 +4,7 @@ import { useLocation } from 'react-router-dom';
 
 import type { JSX } from 'react';
 import type { ResolvedNavItem, ResolvedNavLinkItem, ResolvedNavGroupItem } from '@redocly/config';
-import type { LinkProps } from '@redocly/theme/components/Link/Link';
+import type { LinkProps } from '@redocly/theme/core/types';
 
 import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
 import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
@@ -45,7 +45,7 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
   const itemContent = (
     <NavbarMenuItem
       as={item.link ? Link : undefined}
-      active={isActive}
+      $active={isActive}
       className={className}
       onClick={() =>
         telemetry.sendNavbarMenuItemClickedMessage([{ object: 'menu_item', type: item.type }])
@@ -103,7 +103,7 @@ const NavbarMenuItemDropdown = styled(Dropdown)`
   --dropdown-menu-item-separator-line-height: var(--navbar-separator-line-height);
 `;
 
-const NavbarMenuItem = styled.li<LinkProps & { active?: boolean }>`
+const NavbarMenuItem = styled.li<LinkProps & { $active: boolean }>`
   display: inline-block;
   padding: var(--navbar-item-padding);
   text-align: center;
@@ -111,21 +111,21 @@ const NavbarMenuItem = styled.li<LinkProps & { active?: boolean }>`
   font-weight: var(--navbar-item-font-weight);
 
   border-radius: var(--navbar-item-border-radius);
-  border-bottom: ${({ active }) =>
-    active ? 'var(--navbar-item-bottom-border-active)' : 'var(--navbar-item-bottom-border)'};
+  border-bottom: ${({ $active }) =>
+    $active ? 'var(--navbar-item-bottom-border-active)' : 'var(--navbar-item-bottom-border)'};
 
-  background: ${({ active }) => active && 'var(--navbar-item-bg-color-active)'};
-  color: ${({ active }) =>
-    active ? 'var(--navbar-item-text-color-active)' : 'var(--navbar-text-color)'};
-  text-decoration: ${({ active }) =>
-    active ? 'var(--navbar-item-text-decoration-active)' : 'none'};
+  background: ${({ $active }) => $active && 'var(--navbar-item-bg-color-active)'};
+  color: ${({ $active }) =>
+    $active ? 'var(--navbar-item-text-color-active)' : 'var(--navbar-text-color)'};
+  text-decoration: ${({ $active }) =>
+    $active ? 'var(--navbar-item-text-decoration-active)' : 'none'};
 
   &:hover {
     color: var(--navbar-item-text-color-hover);
     text-decoration: var(--navbar-item-text-decoration-hover);
-    border-bottom: ${({ active }) => !active && 'var(--navbar-item-bottom-border-hover)'};
-    background: ${({ active }) =>
-      active ? 'var(--navbar-item-bg-color-active)' : 'var(--navbar-item-bg-color-hover)'};
+    border-bottom: ${({ $active }) => !$active && 'var(--navbar-item-bottom-border-hover)'};
+    background: ${({ $active }) =>
+      $active ? 'var(--navbar-item-bg-color-active)' : 'var(--navbar-item-bg-color-hover)'};
   }
 `;
 

package/src/components/PageNavigation/NavigationButton.tsx

@@ -33,7 +33,7 @@ export function NavigationButton({
     <NavigationButtonWrapper
       data-component-name="PageNavigation/NavigationButton"
       data-translation-key={translationKey}
-      position={position}
+      $position={position}
     >
       <PageNavigationTitle>{label}</PageNavigationTitle>
       <Button to={link} extraClass={className} variant="link" icon={icon} iconPosition={position}>
@@ -44,13 +44,13 @@ export function NavigationButton({
 }
 
 const NavigationButtonWrapper = styled.div<{
-  position: NavigationButtonPosition;
+  $position: NavigationButtonPosition;
 }>`
   display: flex;
   flex-direction: column;
   width: var(--page-navigation-button-width);
-  text-align: ${({ position }) => position};
-  margin: ${({ position }) => (position === 'right' ? '0 0 0 auto' : '0 auto 0 0')};
+  text-align: ${({ $position }) => $position};
+  margin: ${({ $position }) => ($position === 'right' ? '0 0 0 auto' : '0 auto 0 0')};
   padding: var(--page-navigation-button-padding);
   gap: var(--page-navigation-button-gap);
   border: var(--page-navigation-button-border);

package/src/components/Panel/PanelBody.tsx

@@ -18,10 +18,13 @@ export type PanelBodyProps = {
   hidden?: boolean;
 };
 
-export const PanelBody = styled.div.attrs<{ className?: string }>(({ className }) => ({
-  'data-component-name': 'Panel/PanelBody',
-  className,
-}))<PanelBodyProps>`
+export const PanelBody = styled.div
+  .withConfig({
+    shouldForwardProp: (prop) => !['animate', 'hidden'].includes(prop),
+  })
+  .attrs<{ 'data-component-name': string }>({
+    'data-component-name': 'Panel/PanelBody',
+  })<PanelBodyProps>`
   ${({ animate }) => animate && showPanelAnimation};
   ${({ hidden }) => hidden && 'visibility: hidden'};
 

package/src/components/Panel/PanelHeader.tsx

@@ -7,12 +7,17 @@ export type PanelHeaderProps = {
   expanded?: boolean;
   disabled?: boolean;
   toggle?: (e: BaseSyntheticEvent) => void;
+  className?: string;
 };
 
-export const PanelHeader = styled.div.attrs<{ className?: string }>(({ className }) => ({
-  'data-component-name': 'Panel/PanelHeader',
-  className,
-}))<PanelHeaderProps>`
+export const PanelHeader = styled.div
+  .withConfig({
+    shouldForwardProp: (prop) => !['isExpandable', 'expanded', 'disabled', 'toggle'].includes(prop),
+  })
+  .attrs<PanelHeaderProps>(({ toggle }) => ({
+    'data-component-name': 'Panel/PanelHeader',
+    onClick: toggle,
+  }))`
   display: flex;
   flex-wrap: wrap;
   gap: var(--spacing-unit);

package/src/components/Search/SearchAiMessage.tsx

@@ -81,7 +81,9 @@ function SearchAiMessageComponent({
     try {
       telemetry.sendSearchAIFeedbackMessage([
         {
+          id: messageId,
           object: 'feedback',
+          uri: `urn:redocly:realm:ui:feedback:${messageId}`,
           feedback: feedbackValue,
           messageId,
           reason: dislikeReason,
@@ -111,7 +113,7 @@ function SearchAiMessageComponent({
   return (
     <SearchAiMessageWrapper
       data-component-name="Search/SearchAiMessage"
-      role={role}
+      $role={role}
       className={className}
       data-testid="search-ai-message"
     >
@@ -127,7 +129,7 @@ function SearchAiMessageComponent({
       <MessageContentWrapper>
         {role === AiSearchConversationRole.ASSISTANT ? (
           <>
-            <MessageWrapper role={role}>
+            <MessageWrapper $role={role}>
               {contentSegments.map((segment, index) => {
                 if (segment.type === 'tool') {
                   const toolCallCompleted = Boolean(segment.toolCall.result);
@@ -212,7 +214,7 @@ function SearchAiMessageComponent({
             )}
           </>
         ) : (
-          <MessageWrapper role={role}>{content}</MessageWrapper>
+          <MessageWrapper $role={role}>{content}</MessageWrapper>
         )}
       </MessageContentWrapper>
     </SearchAiMessageWrapper>
@@ -247,13 +249,13 @@ export const SearchAiMessage = memo(SearchAiMessageComponent, (prevProps, nextPr
   );
 });
 
-const SearchAiMessageWrapper = styled.div<{ role: string }>`
+const SearchAiMessageWrapper = styled.div<{ $role: string }>`
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   width: 100%;
-  justify-content: ${({ role }) =>
-    role === AiSearchConversationRole.USER ? 'flex-end' : 'flex-start'};
+  justify-content: ${({ $role }) =>
+    $role === AiSearchConversationRole.USER ? 'flex-end' : 'flex-start'};
 `;
 
 const MessageContentWrapper = styled.div`
@@ -281,9 +283,9 @@ const ResponseText = styled(Markdown)`
   }
 `;
 
-const MessageWrapper = styled.div<{ role: string }>`
-  padding: ${({ role }) =>
-    role === AiSearchConversationRole.USER
+const MessageWrapper = styled.div<{ $role: string }>`
+  padding: ${({ $role }) =>
+    $role === AiSearchConversationRole.USER
       ? 'var(--spacing-sm)'
       : 'var(--spacing-sm) var(--spacing-sm) var(--spacing-xs) var(--spacing-sm)'};
   border-radius: var(--border-radius-lg);
@@ -291,14 +293,14 @@ const MessageWrapper = styled.div<{ role: string }>`
   max-width: 100%;
   word-wrap: break-word;
   white-space: pre-wrap;
-  background-color: ${({ role }) =>
-    role === AiSearchConversationRole.USER
+  background-color: ${({ $role }) =>
+    $role === AiSearchConversationRole.USER
       ? 'var(--search-ai-user-bg-color)'
       : 'var(--search-ai-assistant-bg-color)'};
-  border: ${({ role }) =>
-    role === AiSearchConversationRole.USER ? 'none' : 'var(--search-ai-assistant-border)'};
-  color: ${({ role }) =>
-    role === AiSearchConversationRole.USER
+  border: ${({ $role }) =>
+    $role === AiSearchConversationRole.USER ? 'none' : 'var(--search-ai-assistant-border)'};
+  color: ${({ $role }) =>
+    $role === AiSearchConversationRole.USER
       ? 'var(--search-ai-user-text-color)'
       : 'var(--search-ai-assistant-text-color)'};
 `;

package/src/components/Search/SearchDialog.tsx

@@ -259,7 +259,9 @@ export function SearchDialog({
                           }
                           telemetry.sendSearchAiOpenedMessage([
                             {
+                              id: 'searchAiButton',
                               object: 'search',
+                              uri: 'urn:redocly:realm:ui:search:searchAiButton',
                               method: 'ai_search_button',
                             },
                           ]);
@@ -353,7 +355,9 @@ export function SearchDialog({
                         }
                         telemetry.sendSearchAiOpenedMessage([
                           {
+                            id: 'searchAiInput',
                             object: 'search',
+                            uri: 'urn:redocly:realm:ui:search:searchAiInput',
                             method: 'ai_search_input',
                           },
                         ]);
@@ -366,7 +370,9 @@ export function SearchDialog({
                           }
                           telemetry.sendSearchAiOpenedMessage([
                             {
+                              id: 'searchAiInput',
                               object: 'search',
+                              uri: 'urn:redocly:realm:ui:search:searchAiInput',
                               method: 'ai_search_input',
                             },
                           ]);

package/src/components/Search/SearchSuggestedPages.tsx

@@ -11,8 +11,17 @@ export type SearchSuggestedPagesProps = {
   className?: string;
 };
 
+type SuggestedPage = {
+  link?: string;
+  label?: string;
+  labelTranslationKey?: string;
+  external?: boolean;
+  target?: '_self' | '_blank';
+  languageInsensitive?: boolean;
+};
+
 export function SearchSuggestedPages({ className }: SearchSuggestedPagesProps): JSX.Element | null {
-  const pages = useSuggestedPages();
+  const pages: SuggestedPage[] = useSuggestedPages();
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   if (!pages.length) return null;
@@ -23,12 +32,18 @@ export function SearchSuggestedPages({ className }: SearchSuggestedPagesProps):
         {translate('search.suggested', 'Suggested pages')}
       </SearchSuggestedTitle>
       <SearchSuggestedItems>
-        {pages.map((page) =>
-          page.link ? (
-            <SearchSuggestedItem key={page.label} to={page.link} {...page}>
+        {pages.map(({ link, label, external, target, languageInsensitive, labelTranslationKey }) =>
+          link ? (
+            <SearchSuggestedItem
+              key={label ?? link}
+              to={link}
+              external={external}
+              target={target}
+              languageInsensitive={languageInsensitive}
+            >
               <SearchSuggestedItemWrapper>
                 <RecentlyViewedIcon color="--search-item-text-color" />
-                {page.label}
+                {translate(labelTranslationKey, label)}
               </SearchSuggestedItemWrapper>
             </SearchSuggestedItem>
           ) : null,

package/src/components/Select/Select.tsx

@@ -270,7 +270,9 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
   );
 }
 
-export const SelectWrapper = styled.div<{ disabled?: boolean }>`
+export const SelectWrapper = styled.div.withConfig({
+  shouldForwardProp: (prop) => prop !== 'disabled',
+})<{ disabled?: boolean }>`
   display: flex;
   position: relative;
   font-size: var(--select-font-size);

package/src/components/Select/SelectInput.tsx

@@ -17,6 +17,7 @@ type SelectInputProps<T> = {
   stickyValue: any;
   onlyIcon?: boolean;
   icon?: React.ReactNode;
+  iconPosition?: string;
   customIcon?: React.ReactNode;
   placeholder?: string;
   multiple?: boolean;
@@ -54,6 +55,7 @@ export function SelectInput<T>(props: SelectInputProps<T>): React.ReactNode {
     searchValue,
     inputBlurHandler,
     inputFocusHandler,
+    inputRef: forwardedInputRef,
   } = props;
   const inputRef = useRef<HTMLInputElement | null>(null);
 
@@ -122,15 +124,15 @@ export function SelectInput<T>(props: SelectInputProps<T>): React.ReactNode {
 
         inputRef.current = input;
 
-        if (!props.inputRef) return;
+        if (!forwardedInputRef) return;
 
-        if (typeof props.inputRef === 'function') {
-          props.inputRef(input);
+        if (typeof forwardedInputRef === 'function') {
+          forwardedInputRef(input);
         } else {
-          props.inputRef.current = input;
+          forwardedInputRef.current = input;
         }
       }}
-      width={multiple ? (!searchValue && selectedOptions.length ? '10px' : 'auto') : '100%'}
+      $width={multiple ? (!searchValue && selectedOptions.length ? '10px' : 'auto') : '100%'}
       tabIndex={0}
       onFocus={(e) => {
         e.stopPropagation();
@@ -155,7 +157,6 @@ export function SelectInput<T>(props: SelectInputProps<T>): React.ReactNode {
 
   return (
     <SelectInputWrapper
-      {...props}
       id={id}
       onFocus={onFocusHandler}
       onClick={onClickHandler}
@@ -218,9 +219,9 @@ const SelectInputTag = styled(Tag)`
   --tag-content-padding: 0;
 `;
 
-const SelectInternalInput = styled.input.attrs<{ width?: string }>({
+const SelectInternalInput = styled.input.attrs({
   type: 'text',
-})`
+})<{ $width?: string }>`
   outline: none;
   border-radius: var(--select-input-border-radius);
   border: none;
@@ -233,7 +234,7 @@ const SelectInternalInput = styled.input.attrs<{ width?: string }>({
     color: var(--select-input-placeholder-color);
   }
 
-  width: ${({ width }) => width || 'auto'};
+  width: ${({ $width }) => $width || 'auto'};
 `;
 
 const SelectInternalInputPlaceholder = styled.div`