@redocly/theme 0.69.0-next.0 → 0.69.0-next.10

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useMemo } from 'react';
 import styled from 'styled-components';
 
 import type { SearchFacet, SearchFacetCount, SearchFilterItem } from '@redocly/theme/core/types';
@@ -27,15 +27,8 @@ export function SearchFilterFieldSelect({
   const { useFacetQuery, useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   const { searchFacet, setSearchFacet, setSearchFacetQuery } = useFacetQuery(facet.field);
-  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-  const [selectOptions, setSelectOptions] = useState<any[]>([]);
   const isMultiple = facet.type === 'multi-select';
 
-  useEffect(() => {
-    setSelectOptions(getSelectOptions());
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [searchFacet, facet]);
-
   const onSearch = (value: string | null) => {
     if (value === null) {
       setSearchFacet(null);
@@ -49,38 +42,10 @@ export function SearchFilterFieldSelect({
     }
   };
 
-  const getSelectOptions = () => {
-    return searchFacet
-      ? searchFacet.values.map(facetValueToSelectOption)
-      : facet.values.map(facetValueToSelectOption);
-  };
-
-  const facetValueToSelectOption = (facetValue?: SearchFacetCount | string) => {
-    if (!facetValue) {
-      return { element: null, value: '' };
-    }
-    if (typeof facetValue === 'string') {
-      return {
-        element: (
-          <FilterSelectOptionWrapper>
-            <FilterSelectOptionText>{facetValue}</FilterSelectOptionText>
-          </FilterSelectOptionWrapper>
-        ),
-        value: facetValue,
-      };
-    } else {
-      const { value, count, isCounterVisible } = facetValue as SearchFacetCount;
-      return {
-        element: (
-          <FilterSelectOptionWrapper>
-            <FilterSelectOptionText>{value}</FilterSelectOptionText>
-            {isCounterVisible && <CounterTag>{count}</CounterTag>}
-          </FilterSelectOptionWrapper>
-        ),
-        value: value,
-      };
-    }
-  };
+  const selectOptions = useMemo(
+    () => (searchFacet ? searchFacet.values : facet.values).map(facetValueToSelectOption),
+    [searchFacet, facet],
+  );
 
   return (
     <Select
@@ -113,6 +78,33 @@ export function SearchFilterFieldSelect({
   );
 }
 
+function facetValueToSelectOption(facetValue?: SearchFacetCount | string) {
+  if (!facetValue) {
+    return { element: null, value: '' };
+  }
+  if (typeof facetValue === 'string') {
+    return {
+      element: (
+        <FilterSelectOptionWrapper>
+          <FilterSelectOptionText>{facetValue}</FilterSelectOptionText>
+        </FilterSelectOptionWrapper>
+      ),
+      value: facetValue,
+    };
+  } else {
+    const { value, count, isCounterVisible } = facetValue as SearchFacetCount;
+    return {
+      element: (
+        <FilterSelectOptionWrapper>
+          <FilterSelectOptionText>{value}</FilterSelectOptionText>
+          {isCounterVisible && <CounterTag>{count}</CounterTag>}
+        </FilterSelectOptionWrapper>
+      ),
+      value: value,
+    };
+  }
+}
+
 const FilterSelectOptionWrapper = styled.div`
   width: 100%;
   display: flex;

package/src/components/Search/SearchAiDialog.tsx

@@ -94,6 +94,7 @@ export function SearchAiDialog({
     if (!initialMessage?.trim().length) {
       return;
     }
+    // oxlint-disable-next-line react-you-might-not-need-an-effect/no-pass-data-to-parent -- appends the initial message into the conversation state lifted to the search root once the dialog mounts
     setConversation((prev) => [
       ...prev,
       { role: AiSearchConversationRole.USER, content: initialMessage },
@@ -105,6 +106,7 @@ export function SearchAiDialog({
       return;
     }
 
+    // oxlint-disable-next-line react-you-might-not-need-an-effect/no-pass-data-to-parent -- merges the streamed assistant response into the lifted conversation state as chunks arrive
     setConversation((prev) => {
       const lastMessage = prev[prev.length - 1];
       const content: string = response || '';
@@ -146,6 +148,7 @@ export function SearchAiDialog({
 
   useEffect(() => {
     if (error) {
+      // oxlint-disable-next-line react-you-might-not-need-an-effect/no-pass-data-to-parent -- drops the pending message from the lifted conversation state once the request errors
       setConversation((prev) => prev.slice(0, -1));
     }
   }, [error, setConversation]);
@@ -176,7 +179,7 @@ export function SearchAiDialog({
           />
           {translate(
             'search.ai.welcomeText',
-            'Welcome to AI search! Feel free to ask me anything. How can I help you? ',
+            'Welcome to AI assistant! Feel free to ask me anything. How can I help you? ',
           )}
         </WelcomeWrapper>
       )}

package/src/components/Search/SearchAiMessage.tsx

@@ -308,7 +308,7 @@ const MessageWrapper = styled.div<{ $role: string }>`
     $role === AiSearchConversationRole.USER
       ? 'var(--spacing-sm)'
       : 'var(--spacing-sm) var(--spacing-sm) var(--spacing-xs) var(--spacing-sm)'};
-  border-radius: var(--border-radius-lg);
+  border-radius: var(--border-radius-xl);
   width: fit-content;
   max-width: 100%;
   word-wrap: break-word;

package/src/components/Search/SearchAiNegativeFeedbackForm.tsx

@@ -128,7 +128,7 @@ const FeedbackFormWrapper = styled.div`
   padding: var(--spacing-xs);
   background: var(--search-ai-feedback-form-bg-color);
   border: 1px solid var(--search-ai-feedback-form-border-color);
-  border-radius: var(--border-radius-lg);
+  border-radius: var(--border-radius-xl);
 `;
 
 const FeedbackHeader = styled.div`
@@ -170,7 +170,7 @@ const FeedbackTextArea = styled.textarea`
   padding: var(--spacing-xs);
   padding-right: 3rem;
   border: 1px solid var(--border-color-primary);
-  border-radius: var(--border-radius-md);
+  border-radius: var(--border-radius-lg);
   font-family: inherit;
   font-size: var(--font-size-base);
   line-height: var(--line-height-base);

package/src/components/Search/SearchDialog.tsx

@@ -493,7 +493,7 @@ export function SearchDialog({
               <AiDisclaimer>
                 {translate(
                   'search.ai.disclaimer',
-                  'AI search might provide incomplete or incorrect results. Verify important information.',
+                  'AI assistant might provide incomplete or incorrect results. Verify important information.',
                 )}
               </AiDisclaimer>
             ) : (
@@ -672,7 +672,6 @@ const SearchMessage = styled.div`
 `;
 
 const SearchProductTag = styled(Tag)`
-  --tag-border-radius: var(--border-radius);
   border: none;
   margin: var(--spacing-xs) var(--spacing-sm) !important;
 `;
@@ -747,6 +746,7 @@ const SearchWithAI = styled.div`
   outline: none;
   border-top: 1px solid var(--search-item-border-color);
   border-bottom: 1px solid var(--search-item-border-color);
+  border-radius: var(--search-item-border-radius);
 
   transition: all 0.3s ease;
 

package/src/components/Search/SearchItem.tsx

@@ -114,7 +114,12 @@ export function SearchItem({
             <div>
               {searchHighlight(parameter.place)}
               {` → `}
-              {parameter.path?.length ? searchHighlight(parameter.path?.join(' → ')) + ' → ' : ''}
+              {parameter.path?.length ? (
+                <>
+                  {searchHighlight(parameter.path.join(' → '))}
+                  {` → `}
+                </>
+              ) : null}
               {searchHighlight(parameter.name)}
             </div>
             <div>{searchHighlight(parameter.description)}</div>
@@ -145,6 +150,7 @@ const SearchItemWrapper = styled(Link)`
   outline: none;
   border-top: 1px solid var(--search-item-border-color);
   border-bottom: 1px solid var(--search-item-border-color);
+  border-radius: var(--search-item-border-radius);
 
   ${ReturnKeyIcon} {
     align-self: center;

package/src/components/Search/SearchRecent.tsx

@@ -97,6 +97,7 @@ const SearchRecentItem = styled.div`
   font-weight: var(--search-recent-item-font-weight);
   line-height: var(--search-recent-item-line-height);
   padding: var(--search-recent-item-padding);
+  border-radius: var(--search-recent-item-border-radius);
   color: var(--search-recent-item-text-color);
   cursor: pointer;
 

package/src/components/Search/SearchSuggestedPages.tsx

@@ -81,6 +81,7 @@ const SearchSuggestedItem = styled(Link)`
   line-height: var(--search-suggested-item-line-height);
   color: var(--search-suggested-item-text-color);
   padding: var(--search-suggested-item-padding);
+  border-radius: var(--search-suggested-item-border-radius);
   cursor: pointer;
 
   &:hover {

package/src/components/Search/variables.ts

@@ -10,7 +10,7 @@ export const search = css`
   --search-modal-min-height: 705px;
   --search-modal-bg-color: var(--modal-bg-color);
   --search-modal-box-shadow: var(--modal-box-shadow);
-  --search-modal-border-radius: var(--border-radius-lg);
+  --search-modal-border-radius: var(--border-radius-xxl);
   --search-modal-border: 1px solid var(--border-color-secondary);
 
   --search-modal-header-bg-color: var(--bg-color-tonal); // @presenter Color
@@ -34,7 +34,7 @@ export const search = css`
   --search-input-gap: var(--spacing-sm);
   --search-input-height: 40px;
   --search-input-border: none;
-  --search-input-border-radius: var(--border-radius); // @presenter BorderRadius
+  --search-input-border-radius: var(--border-radius-xl); // @presenter BorderRadius
 
   --search-group-title-padding: var(--spacing-sm);
   --search-group-title-bg-color: var(--bg-color-tonal); // @presenter Color
@@ -53,6 +53,7 @@ export const search = css`
   --search-item-bg-color-hover: var(--layer-color-ontonal-hover); // @presenter Color
   --search-item-border-color-focused: var(--color-blue-4); // @presenter Color
   --search-item-border-color: transparent; // @presenter Color
+  --search-item-border-radius: var(--border-radius-lg);
   --search-item-padding: var(--spacing-sm) var(--spacing-lg);
   --search-item-gap: var(--spacing-xxs);
   --search-item-product-icon-size: 16px;
@@ -71,6 +72,7 @@ export const search = css`
   --search-recent-item-title-padding: var(--spacing-md) var(--spacing-lg) var(--spacing-xxs) var(--spacing-lg); // @presenter Color
   --search-recent-item-bg-color-active: var(--layer-color); // @presenter Color
   --search-recent-item-border-color-focused: var(--color-blue-4); // @presenter Color
+  --search-recent-item-border-radius: var(--search-item-border-radius);
 
   --search-suggested-item-font-size: var(--font-size-base); // @presenter FontSize
   --search-suggested-item-font-weight: var(--font-weight-regular); // @presenter FontWeight
@@ -86,6 +88,7 @@ export const search = css`
   --search-suggested-item-title-padding: var(--spacing-md) var(--spacing-lg) var(--spacing-xxs) var(--spacing-lg); // @presenter Color
   --search-suggested-item-bg-color-active: var(--layer-color); // @presenter Color
   --search-suggested-item-border-color-focused: var(--color-blue-4); // @presenter Color
+  --search-suggested-item-border-radius: var(--search-item-border-radius);
 
   --search-shortcuts-gap: var(--spacing-xs);
 
@@ -94,6 +97,7 @@ export const search = css`
   --search-message-line-height: var(--line-height-lg); // @presenter LineHeight
   --search-message-text-color: var(--text-color-secondary); // @presenter Color
   --search-message-gap: var(--spacing-md);
+  --search-message-padding: var(--spacing-md);
 
   --search-header-buttons-gap: var(--spacing-sm);
   --search-header-buttons-padding-left: var(--spacing-sm);
@@ -133,7 +137,7 @@ export const search = css`
   --search-trigger-border-style: var(--border-style);
   --search-trigger-border-color: var(--input-border-color);
   --search-trigger-border-color-hover: var(--input-border-color-hover);
-  --search-trigger-border-radius: var(--border-radius-md);
+  --search-trigger-border-radius: var(--border-radius-lg);
   --search-trigger-padding-vertical: var(--input-padding-vertical);
   --search-trigger-padding-horizontal: var(--input-padding-horizontal);
   --search-trigger-padding: var(--search-trigger-padding-vertical) var(--search-trigger-padding-horizontal);
@@ -244,7 +248,7 @@ export const search = css`
   --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);
+  --search-ai-conversation-input-border-radius: var(--border-radius-xl);
   --search-ai-conversation-input-font-size: var(--font-size-base);
   --search-ai-conversation-input-placeholder-color: var(--search-input-placeholder-color);
   --search-ai-conversation-input-border-color-focus: var(--color-primary-base, var(--search-ai-conversation-input-border-color-focus-legacy));
@@ -252,7 +256,7 @@ export const search = css`
 
   --search-ai-conversation-input-send-button-right: 12px;
   --search-ai-conversation-input-send-button-padding: 5px;
-  --search-ai-conversation-input-send-button-border-radius: var(--border-radius);
+  --search-ai-conversation-input-send-button-border-radius: var(--border-radius-md);
   --search-ai-conversation-input-send-button-border-disabled: 1px solid var(--button-border-color-disabled);
 
   --search-ai-conversation-input-min-height: 48px;

package/src/components/Segmented/Segmented.tsx

@@ -16,6 +16,7 @@ function SegmentedComponent<T>(
       data-component-name="Segmented/Segmented"
       className={`tag-grey ${size} ${className}`}
       role="tablist"
+      $size={size}
     >
       {options.map((opt, index) => (
         <React.Fragment key={index}>
@@ -40,12 +41,13 @@ export const Segmented = typedMemo(forwardRef(SegmentedComponent)) as <T>(
   props: SegmentedProps<T> & { ref?: ForwardedRef<HTMLDivElement> },
 ) => ReactElement;
 
-const SegmentedGroup = styled.div`
+const SegmentedGroup = styled.div<{ $size: string }>`
   display: flex;
   background: var(--segmented-buttons-bg-color-main);
   padding: calc(var(--spacing-xxs) / 2);
   gap: calc(var(--spacing-xxs) / 2);
-  border-radius: var(--border-radius-md);
+  border-radius: ${({ $size }) =>
+    $size === 'small' ? 'var(--border-radius-md)' : 'var(--border-radius-lg)'};
   max-width: 100%;
   width: fit-content;
 `;
@@ -75,7 +77,8 @@ const SegmentedItem = styled.button<{ $isActive: boolean; $size: string }>`
           cursor: pointer;
         `}
   line-height: var(--segmented-line-height);
-  border-radius: var(--border-radius);
+  border-radius: ${({ $size }) =>
+    $size === 'small' ? 'var(--border-radius)' : 'var(--border-radius-md)'};
   padding: ${({ $size }) => ($size === 'small' ? 0 : '3px')} var(--spacing-sm);
   white-space: nowrap;
   text-overflow: ellipsis;

package/src/components/Select/Select.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect, useId, useRef, useState } from 'react';
+import React, { Fragment, useId, useRef, useState } from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
@@ -68,33 +68,47 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
     setDropdownActive(false);
   });
 
-  useEffect(() => {
+  const [prevOptions, setPrevOptions] = useState(options);
+  const [prevValue, setPrevValue] = useState(value);
+  const [prevMultiple, setPrevMultiple] = useState(multiple);
+
+  if (prevOptions !== options) {
+    setPrevOptions(options);
     setFilteredOptions(options);
-  }, [options]);
+  }
 
-  useEffect(() => {
+  if (prevValue !== value || prevMultiple !== multiple) {
+    setPrevValue(value);
+    setPrevMultiple(multiple);
     setSelectedOptions(getSelectedOptionsFromPropsValue());
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [multiple, value]);
+  }
+
+  const changeSearchValue = (newSearchValue: string | null) => {
+    if (newSearchValue === searchValue) {
+      return;
+    }
+
+    setSearchValue(newSearchValue);
 
-  useEffect(() => {
     if (onSearch) {
-      onSearch?.(searchValue as T);
-    } else {
-      if (typeof searchValue === 'string') {
-        const filteredOptions = options.filter((option) => {
+      onSearch(newSearchValue as T);
+      return;
+    }
+
+    if (typeof newSearchValue === 'string') {
+      setFilteredOptions(
+        options.filter((option) => {
           const valueForSearch = String(option.label ?? option.value ?? '');
           return (
-            !valueForSearch || valueForSearch.toLowerCase().indexOf(searchValue.toLowerCase()) > -1
+            !valueForSearch ||
+            valueForSearch.toLowerCase().indexOf(newSearchValue.toLowerCase()) > -1
           );
-        });
-        setFilteredOptions(filteredOptions);
-      } else {
-        setFilteredOptions(options);
-      }
+        }),
+      );
+    } else {
+      setFilteredOptions(options);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [searchValue]);
+  };
 
   const selectHandler = (selectedOption: SelectOption<T>) => {
     const newSelectedOptions = multiple
@@ -113,7 +127,7 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
 
     setSelectedOptions(newSelectedOptions);
     onChange?.(newSelectedValues);
-    setSearchValue(null);
+    changeSearchValue(null);
     setDropdownActive(false);
 
     if (!multiple) {
@@ -125,7 +139,7 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
 
   const searchHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
     const targetValue = e.target.value;
-    setSearchValue(targetValue);
+    changeSearchValue(targetValue);
     setDropdownActive(true);
   };
 
@@ -150,7 +164,7 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
       if (!e.relatedTarget || e.relatedTarget?.id !== inputId) {
         setDropdownActive(false);
       }
-      setSearchValue(null);
+      changeSearchValue(null);
       setStickyInputValue('');
     }
   };

package/src/components/Select/variables.ts

@@ -8,7 +8,7 @@ export const select = css`
   --select-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --select-line-height: var(--line-height-base); // @presenter LineHeight
   --select-text-color: var(--text-color-secondary); // @presenter Color
-  --select-border-radius: var(--border-radius); // @presenter BorderRadius
+  --select-border-radius: var(--border-radius-lg); // @presenter BorderRadius
   --select-border: var(--border-width) var(--border-style) var(--border-color-primary); // @presenter Border
   
   --select-input-padding-vertical: 6px; // @presenter Spacing
@@ -16,7 +16,7 @@ export const select = css`
   --select-input-padding: var(--select-input-padding-vertical) var(--select-input-padding-horizontal);
   --select-input-gap: var(--spacing-xs); // @presenter Spacing
   --select-input-value-gap: var(--spacing-unit); // @presenter Spacing
-  --select-input-border-radius: var(--border-radius); // @presenter BorderRadius
+  --select-input-border-radius: var(--border-radius-lg); // @presenter BorderRadius
   --select-input-font-size: var(--font-size-base); // @presenter FontSize
   --select-input-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --select-input-line-height: var(--line-height-base); // @presenter LineHeight
@@ -35,7 +35,7 @@ export const select = css`
   --select-list-item-padding: var(--select-list-item-padding-vertical) var(--select-list-item-padding-horizontal);
 
   --select-list-item-gap: var(--spacing-xs); // @presenter Spacing
-  --select-list-item-border-radius: var(--border-radius); // @presenter BorderRadius
+  --select-list-item-border-radius: var(--border-radius-md); // @presenter BorderRadius
   --select-list-item-bg-color-active: transparent; // @presenter Color
   --select-list-item-bg-color-hover: var(--menu-item-bg-color-hover); // @presenter Color
   --select-list-item-font-weight-active: var(--font-weight-medium); // @presenter Color  

package/src/components/Sidebar/Sidebar.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
@@ -36,11 +36,7 @@ export function Sidebar({
   menuItemsAnimation,
 }: SidebarProps): JSX.Element | null {
   const { isOpen } = useMobileMenu();
-  const [mappedCollapsed, setMappedCollapsed] = React.useState(collapsed);
-
-  useEffect(() => {
-    setMappedCollapsed(collapsed && !isOpen);
-  }, [isOpen, collapsed, setMappedCollapsed]);
+  const mappedCollapsed = collapsed && !isOpen;
 
   const { sidebar } = useThemeConfig();
 

package/src/components/SplitButton/SplitButton.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { ComponentProps, JSX } from 'react';
+import type { ButtonProps } from '@redocly/theme/components/Button/Button';
+import type { ButtonGroupSize, ButtonGroupVariant } from '@redocly/theme/core/types';
+
+import { Button } from '@redocly/theme/components/Button/Button';
+import { ButtonGroup } from '@redocly/theme/components/Button/ButtonGroup';
+import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
+
+export type SplitButtonProps = {
+  button: React.ReactElement<ButtonProps>;
+  children: ComponentProps<typeof Dropdown>['children'];
+  variant?: ButtonGroupVariant;
+  size?: ButtonGroupSize;
+  placement?: 'top' | 'bottom';
+  alignment?: 'start' | 'end';
+  portalled?: boolean;
+  closeOnSelect?: boolean;
+  disabled?: boolean;
+  toggleAriaLabel: string;
+  onOpen?: () => void;
+  onClose?: () => void;
+  className?: string;
+};
+
+export function SplitButton(props: SplitButtonProps): JSX.Element {
+  const {
+    button,
+    children,
+    variant,
+    size,
+    placement = 'bottom',
+    alignment = 'end',
+    portalled,
+    closeOnSelect = true,
+    disabled,
+    toggleAriaLabel,
+    onOpen,
+    onClose,
+    className,
+  } = props;
+
+  const hasMenu = typeof children === 'function' || React.Children.toArray(children).length > 0;
+
+  return (
+    <SplitButtonWrapper data-component-name="SplitButton/SplitButton" className={className}>
+      <ButtonGroup variant={variant} size={size}>
+        {button}
+        {hasMenu ? (
+          <ToggleDropdown
+            closeOnClick={closeOnSelect}
+            placement={placement}
+            alignment={alignment}
+            portalled={portalled}
+            withArrow
+            onOpen={onOpen}
+            onClose={onClose}
+            trigger={
+              <Button
+                aria-label={toggleAriaLabel}
+                aria-haspopup="menu"
+                variant={variant}
+                size={size}
+                disabled={disabled}
+              />
+            }
+          >
+            {children}
+          </ToggleDropdown>
+        ) : null}
+      </ButtonGroup>
+    </SplitButtonWrapper>
+  );
+}
+
+const SplitButtonWrapper = styled.div`
+  position: relative;
+  display: inline-flex;
+
+  /* Themed button margins must not split the group apart. Direct-child chains
+     keep the rule off buttons rendered inside the dropdown menu. */
+  > * > .button,
+  > * > * > .button {
+    margin: 0;
+  }
+`;
+
+/* The non-portalled menu is absolutely positioned against the nearest positioned
+   ancestor; keep the dropdown segment static so that ancestor is the whole
+   split button rather than the toggle segment. */
+const ToggleDropdown = styled(Dropdown)`
+  position: static;
+`;

package/src/components/Switch/variables.dark.ts

@@ -14,7 +14,7 @@ export const switcherDarkMode = css`
     --switch-border-color-disabled: var(--color-warm-grey-5); // @presenter Color
     --switch-border-color-selected: var(--color-primary-base, var(--switch-border-color-selected-legacy)); // @presenter Color
     --switch-border-width: var(--border-width); // @presenter Border
-    --switch-border-radius: var(--border-radius); // @presenter BorderRadius
+    --switch-border-radius: var(--border-radius-full); // @presenter BorderRadius
 
     --switch-width: 32px; // @presenter Width
     --switch-height: 18px; // @presenter Height
@@ -27,7 +27,7 @@ export const switcherDarkMode = css`
     --switch-knob-bg-color-selected: var(--color-static-white); // @presenter Color
     --switch-knob-bg-color-disabled: var(--color-warm-grey-6); // @presenter Color
 
-    --switch-knob-border-radius: calc(var(--border-radius) / 2); // @presenter BorderRadius
+    --switch-knob-border-radius: var(--border-radius-full); // @presenter BorderRadius
     --switch-knob-height: 14px; // @presenter Height
     --switch-knob-width: 14px; // @presenter Width
     --switch-knob-transition: all 0.3s; // @presenter Transition

package/src/components/Switch/variables.ts

@@ -13,7 +13,7 @@ export const switcher = css`
     --switch-border-color-pressed: transparent; // @presenter Color
     --switch-border-color-disabled: transparent; // @presenter Color
     --switch-border-color-selected: transparent; // @presenter Color
-    --switch-border-radius: var(--border-radius); // @presenter BorderRadius
+    --switch-border-radius: var(--border-radius-full); // @presenter BorderRadius
     --switch-border-width: var(--border-width); // @presenter Border
 
     --switch-width: 32px; // @presenter Width
@@ -27,7 +27,7 @@ export const switcher = css`
     --switch-knob-bg-color-selected: var(--color-white); // @presenter Color
     --switch-knob-bg-color-disabled: var(--color-warm-grey-1); // @presenter Color
 
-    --switch-knob-border-radius: calc(var(--border-radius) / 2); // @presenter BorderRadius
+    --switch-knob-border-radius: var(--border-radius-full); // @presenter BorderRadius
     --switch-knob-height: 14px; // @presenter Height
     --switch-knob-width: 14px; // @presenter Width
     --switch-knob-transition: transform 0.3s; // @presenter Transition

package/src/components/Tag/variables.ts

@@ -8,9 +8,9 @@ export const tag = css`
 
   --tag-border-width: 1px; //@presenter Border
   --tag-border-style: solid; //@presenter Border
-  --tag-border-radius: var(--border-radius); // @presenter BorderRadius
+  --tag-border-radius: var(--border-radius-md); // @presenter BorderRadius
   --tag-box-shadow: none; // @presenter Shadow
-  --tag-border-radius-focused: var(--border-radius); // @presenter BorderRadius
+  --tag-border-radius-focused: var(--tag-border-radius); // @presenter BorderRadius
 
   --tag-status-dot-color-default: var(--color-persian-green-7);
   --tag-badge-size: var(--spacing-xs);

package/src/components/Tags/variables.ts

@@ -13,6 +13,6 @@ export const httpTag = css`
   --http-tag-bg-color: none;
 
   --counter-tag-padding: 0px var(--spacing-xxs);
-  --counter-tag-border-radius: var(--border-radius);
+  --counter-tag-border-radius: var(--tag-border-radius);
   --counter-tag-min-width: var(--spacing-md);
 `

package/src/components/Toast/variables.ts

@@ -16,7 +16,7 @@ export const toast = css`
   --toast-max-width: 360px;
   --toast-bg-color: var(--layer-color); // @presenter Color
   --toast-border: var(--border-width) var(--border-style) var(--border-color-secondary); // @presenter Border
-  --toast-border-radius: var(--border-radius-md); // @presenter BorderRadius
+  --toast-border-radius: var(--border-radius-lg); // @presenter BorderRadius
   --toast-font-family: var(--font-family-base); // @presenter FontFamily
 
   /**

package/src/components/Tooltip/AnchorTooltip.tsx

@@ -250,7 +250,7 @@ const TooltipBody = styled.span.attrs<{ $anchorName: string }>(({ $anchorName })
   overflow-wrap: break-word;
   text-align: left;
 
-  border-radius: var(--border-radius-md);
+  border-radius: var(--border-radius-lg);
   transition: opacity 0.3s ease-out;
 
   font-size: var(--font-size-base);
@@ -270,7 +270,7 @@ const TooltipBody = styled.span.attrs<{ $anchorName: string }>(({ $anchorName })
 
   background: var(--tooltip-bg-color);
   color: var(--tooltip-text-color);
-  border: var(--tooltip-border-width, 0) var(--tooltip-border-style, solid)
+  border: var(--tooltip-border-width, 2px) var(--tooltip-border-style, solid)
     var(--tooltip-border-color, transparent);
   box-shadow: var(--bg-raised-shadow);