@astral/ui 4.101.0 → 4.103.0

package/components/InputGroup/styles.js

@@ -1,5 +1,6 @@
 import { formControlClasses } from '@mui/material/FormControl';
 import { inputBaseClasses } from '@mui/material/InputBase';
+import { HOVER_MEDIA } from '../constants';
 import { styled } from '../styled';
 export const InputsWrapper = styled.fieldset `
   display: grid;
@@ -76,11 +77,13 @@ export const InputsWrapper = styled.fieldset `
     width: auto;
     margin-right: -2px;
     
-    &:hover {
-      z-index: 3;
-      
-      &.${inputBaseClasses.disabled} {
-        z-index: 1;
+    ${HOVER_MEDIA} {
+      &:hover {
+        z-index: 3;
+
+        &.${inputBaseClasses.disabled} {
+          z-index: 1;
+        }
       }
     }
   }

package/components/JsonViewer/JsonNode/styles.js

@@ -1,4 +1,5 @@
 import { ChevronROutlineMd } from '../../../icons/ChevronROutlineMd';
+import { HOVER_MEDIA } from '../../constants';
 import { styled } from '../../styled';
 export const NodeContainer = styled('dl', {
     shouldForwardProp: (prop) => prop !== 'level' && prop !== 'isExpandable',
@@ -21,8 +22,10 @@ export const NodeContainer = styled('dl', {
     duration: theme.transitions.duration.shortest,
 })};
 
-  &:hover {
-    background-color: ${({ theme, isExpandable }) => isExpandable ? theme.palette.background.elementHover : 'transparent'};
+  ${HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme, isExpandable }) => isExpandable ? theme.palette.background.elementHover : 'transparent'};
+    }
   }
 `;
 export const IconWrapper = styled('div', {

package/components/Link/styles.js

@@ -1,4 +1,5 @@
 import Link from '@mui/material/Link';
+import { HOVER_MEDIA } from '../constants';
 import { svgIconClassnames } from '../SvgIcon';
 import { styled } from '../styled';
 import { linkClassnames } from './constants';
@@ -16,9 +17,11 @@ export const StyledLink = styled(Link) `
     color: ${({ theme }) => theme.palette.components.link.visited};
   }
 
-  &:hover {
-    color: ${({ theme }) => theme.palette.components.link.hover};
-    text-decoration: underline;
+  ${HOVER_MEDIA} {
+    &:hover {
+      color: ${({ theme }) => theme.palette.components.link.hover};
+      text-decoration: underline;
+    }
   }
 
   &:active {
@@ -32,10 +35,12 @@ export const StyledLink = styled(Link) `
       color: ${({ theme }) => theme.palette.components.link.contrast.visited};
     }
 
-    &:hover {
-      color: ${({ theme }) => theme.palette.components.link.contrast.hover};
+    ${HOVER_MEDIA} {
+      &:hover {
+        color: ${({ theme }) => theme.palette.components.link.contrast.hover};
+      }
     }
-    
+
     &:active {
       color: ${({ theme }) => theme.palette.components.link.contrast.active};
     }

package/components/ListItem/styles.js

@@ -1,4 +1,5 @@
 import ListItem from '@mui/material/ListItem';
+import { HOVER_MEDIA } from '../constants';
 import { styled } from '../styled';
 import { ListItemStates } from './constants';
 export const getBgColor = ({ selected, theme, }) => {
@@ -32,10 +33,12 @@ export const StyledListItem = styled(ListItem, {
   background-color: ${(props) => getBgColor({ ...props })};
   border-radius: ${({ theme }) => theme.shape.small};
 
-  :hover {
-    color: ${(props) => getColor({
+  ${HOVER_MEDIA} {
+    :hover {
+      color: ${(props) => getColor({
     ...props,
     listItemState: ListItemStates.Hover,
 })};
+    }
   }
 `;

package/components/MenuOrganization/OrganizationButton/styles.js

@@ -1,5 +1,6 @@
 import { Button } from '../../Button';
 import { Chevron } from '../../Chevron';
+import { HOVER_MEDIA } from '../../constants';
 import { styled } from '../../styled/styled';
 import { Typography } from '../../Typography';
 export const StyledButton = styled(Button) `
@@ -13,8 +14,10 @@ export const StyledButton = styled(Button) `
 
   text-align: left;
 
-  &:hover {
-    background-color: ${({ theme }) => theme.palette.background.elementHover};
+  ${HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme }) => theme.palette.background.elementHover};
+    }
   }
 
   &:active {
@@ -32,10 +35,6 @@ export const StyledButton = styled(Button) `
 
     border-radius: 0;
 
-    &:hover {
-      background-color: initial;
-    }
-
     &:active {
       background-color: ${({ theme }) => theme.palette.primary[100]};
     }

package/components/NavMenu/Item/ItemButton/styles.js

@@ -1,6 +1,7 @@
 import { listItemButtonClasses } from '@mui/material/ListItemButton';
 import { ChevronDOutlineMd } from '../../../../icons/ChevronDOutlineMd';
 import { PageDotOutlineMd } from '../../../../icons/PageDotOutlineMd';
+import { HOVER_MEDIA } from '../../../constants';
 import { ListItemButton } from '../../../ListItemButton';
 import { ListItemIcon } from '../../../ListItemIcon';
 import { OverflowTypography } from '../../../OverflowTypography';
@@ -33,23 +34,29 @@ export const StyledListItemButton = styled(ListItemButton) `
       border-left: 3px solid ${({ theme }) => theme.palette.primary[800]};
     }
     
-    &:hover {
-      background-color: ${({ theme }) => theme.palette.primary[100]};
+    ${HOVER_MEDIA} {
+      &:hover {
+        background-color: ${({ theme }) => theme.palette.primary[100]};
+      }
     }
 
     &.${navMenuItemButtonClassnames.hasGroup} {
       background-color: inherit;
 
-      &:hover {
-        background-color: inherit;
+      ${HOVER_MEDIA} {
+        &:hover {
+          background-color: inherit;
+        }
       }
     }
   }
 
-  &:hover {
-    color: ${({ theme }) => theme.palette.primary['800']};
+  ${HOVER_MEDIA} {
+    &:hover {
+      color: ${({ theme }) => theme.palette.primary['800']};
 
-    background-color: inherit;
+      background-color: inherit;
+    }
   }
 
   &:active {

package/components/NewPopover/NewPopover.js

@@ -23,6 +23,7 @@ export const NewPopover = ({ children, onClose, isOpen, title, className, style,
         disableAutoFocus,
         hasArrow,
         disableMobileDrawer,
+        placement,
     });
     if (shouldRenderDrawer) {
         return (_jsx(BottomDrawer, { title: title, onClose: handleClose, open: isOpened, className: className, style: style, ModalProps: {

package/components/NewPopover/constants.d.ts

@@ -18,6 +18,11 @@ export declare const ARROW_PADDING = 24;
 export declare const ARROW_MIN_PADDING = 16;
 /** Мин. «ход» стрелки вдоль кромки (px). */
 export declare const ARROW_MIN_TRACK = 16;
+/**
+ * Мин. отступ popover от края вьюпорта (px).
+ * Наружу отдаётся CSS-переменной `--popover-viewport-padding`.
+ */
+export declare const VIEWPORT_MIN_PADDING = 16;
 /**
  * Базовые модификаторы Popper.js. У MUI Popper (popper.js)
  */

package/components/NewPopover/constants.js

@@ -18,12 +18,17 @@ export const ARROW_PADDING = 24;
 export const ARROW_MIN_PADDING = 16;
 /** Мин. «ход» стрелки вдоль кромки (px). */
 export const ARROW_MIN_TRACK = 16;
+/**
+ * Мин. отступ popover от края вьюпорта (px).
+ * Наружу отдаётся CSS-переменной `--popover-viewport-padding`.
+ */
+export const VIEWPORT_MIN_PADDING = 16;
 /**
  * Базовые модификаторы Popper.js. У MUI Popper (popper.js)
  */
 export const DEFAULT_MODIFIERS = [
     {
         name: 'preventOverflow',
-        options: { altAxis: true, tether: false, padding: 8 },
+        options: { altAxis: true, tether: false, padding: VIEWPORT_MIN_PADDING },
     },
 ];

package/components/NewPopover/styles.js

@@ -1,10 +1,11 @@
 import MuiPopper from '@mui/material/Popper';
 import { styled } from '../styled';
-import { ARROW_BASE, ARROW_HEIGHT, popoverClassnames } from './constants';
+import { ARROW_BASE, ARROW_HEIGHT, popoverClassnames, VIEWPORT_MIN_PADDING, } from './constants';
 export const StyledMuiPopper = styled(MuiPopper) `
   &.${popoverClassnames.root} {
     --arrow-base: ${ARROW_BASE}px;
     --arrow-height: ${ARROW_HEIGHT}px;
+    --popover-viewport-padding: ${VIEWPORT_MIN_PADDING}px;
 
     z-index: ${({ theme }) => theme.zIndex.modal};
   }

package/components/NewPopover/types.d.ts

@@ -23,7 +23,7 @@ export type NewPopoverProps = {
      */
     isOpen?: boolean;
     /**
-     * Позиция относительно anchor
+     * Позиция относительно anchor.
      * @default 'bottom'
      */
     placement?: NewPopoverPlacement;

package/components/NewPopover/useLogic/useLogic.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { type NewPopoverModifier, type NewPopoverProps } from '../types';
-type UseLogicParams = Pick<NewPopoverProps, 'isOpen' | 'anchorEl' | 'onClose' | 'disableAutoFocus' | 'hasArrow' | 'disableMobileDrawer'>;
-export declare const useLogic: ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow, disableMobileDrawer, }: UseLogicParams) => {
+type UseLogicParams = Pick<NewPopoverProps, 'isOpen' | 'anchorEl' | 'onClose' | 'disableAutoFocus' | 'hasArrow' | 'disableMobileDrawer'> & Required<Pick<NewPopoverProps, 'placement'>>;
+export declare const useLogic: ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow, disableMobileDrawer, placement, }: UseLogicParams) => {
     shouldRenderDrawer: boolean;
     isOpened: boolean;
     shouldRender: boolean;

package/components/NewPopover/useLogic/useLogic.js

@@ -5,10 +5,8 @@ import { useFocusTrapEffect } from '../../useFocusTrapEffect';
 import { usePopoverAnimation } from '../../usePopoverAnimation';
 import { useViewportType } from '../../useViewportType';
 import { DEFAULT_MODIFIERS } from '../constants';
-import { getArrowPadding } from './utils/getArrowPadding';
-import { getPopoverCssVars } from './utils/getPopoverCssVars';
-import { resolveAnchorNode } from './utils/resolveAnchorNode';
-export const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow, disableMobileDrawer, }) => {
+import { getArrowPadding, getFallbackPlacements, getPopoverCssVars, resolveAnchorNode, } from './utils';
+export const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow, disableMobileDrawer, placement, }) => {
     const containerRef = useRef(null);
     const [isContainerMounted, setIsContainerMounted] = useState(false);
     const [arrowElement, setArrowElement] = useState(null);
@@ -50,18 +48,20 @@ export const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow
         fallbackFocus: () => containerRef.current || document.body,
     });
     const mergedModifiers = useMemo(() => {
-        if (!hasArrow) {
-            return DEFAULT_MODIFIERS;
+        const modifiers = [...DEFAULT_MODIFIERS];
+        const fallbackPlacements = getFallbackPlacements(placement);
+        if (fallbackPlacements) {
+            modifiers.push({ name: 'flip', options: { fallbackPlacements } });
         }
-        return [
-            ...DEFAULT_MODIFIERS,
-            {
+        if (hasArrow) {
+            modifiers.push({
                 name: 'arrow',
                 enabled: true,
                 options: { element: arrowElement, padding: getArrowPadding },
-            },
-        ];
-    }, [hasArrow, arrowElement]);
+            });
+        }
+        return modifiers;
+    }, [hasArrow, arrowElement, placement]);
     return {
         shouldRenderDrawer,
         isOpened,

package/components/NewPopover/useLogic/utils/getFallbackPlacements/getFallbackPlacements.d.ts

@@ -0,0 +1,7 @@
+import { type NewPopoverPlacement } from '../../../types';
+/**
+ * Значение fallbackPlacements для модификатора flip: заданная сторона не подошла —
+ * берётся следующая по списку. Для вертикальной стороны и `auto` список не задаётся,
+ * flip справляется сам.
+ */
+export declare const getFallbackPlacements: (placement: NewPopoverPlacement) => NewPopoverPlacement[] | undefined;

package/components/NewPopover/useLogic/utils/getFallbackPlacements/getFallbackPlacements.js

@@ -0,0 +1,19 @@
+const OPPOSITE_SIDE = {
+    left: 'right',
+    right: 'left',
+};
+const VERTICAL_SIDES = ['bottom', 'top'];
+const checkIsSidePlacement = (side) => side in OPPOSITE_SIDE;
+/**
+ * Значение fallbackPlacements для модификатора flip: заданная сторона не подошла —
+ * берётся следующая по списку. Для вертикальной стороны и `auto` список не задаётся,
+ * flip справляется сам.
+ */
+export const getFallbackPlacements = (placement) => {
+    const [side, alignment] = placement.split('-');
+    if (!checkIsSidePlacement(side)) {
+        return undefined;
+    }
+    const suffix = alignment ? `-${alignment}` : '';
+    return [OPPOSITE_SIDE[side], ...VERTICAL_SIDES].map((fallbackSide) => `${fallbackSide}${suffix}`);
+};

package/components/NewPopover/useLogic/utils/getFallbackPlacements/index.d.ts

@@ -0,0 +1 @@
+export * from './getFallbackPlacements';

package/components/NewPopover/useLogic/utils/getFallbackPlacements/index.js

@@ -0,0 +1 @@
+export * from './getFallbackPlacements';

package/components/NewPopover/useLogic/utils/index.d.ts

@@ -0,0 +1,4 @@
+export * from './getArrowPadding';
+export * from './getFallbackPlacements';
+export * from './getPopoverCssVars';
+export * from './resolveAnchorNode';

package/components/NewPopover/useLogic/utils/index.js

@@ -0,0 +1,4 @@
+export * from './getArrowPadding';
+export * from './getFallbackPlacements';
+export * from './getPopoverCssVars';
+export * from './resolveAnchorNode';

package/components/NewStepper/Step/styles.js

@@ -1,5 +1,6 @@
 import { NextOutlineMd } from '../../../icons/NextOutlineMd';
 import { Button } from '../../Button';
+import { HOVER_MEDIA } from '../../constants';
 import { styled } from '../../styled';
 import { typographyClassnames } from '../../Typography/constants';
 import { STEPPER_ORDER_COUNTER_NAME } from '../constants';
@@ -271,26 +272,28 @@ export const StyledButton = styled(Button) `
     height: auto;
   }
 
-  &:hover {
-    background: transparent;
+  ${HOVER_MEDIA} {
+    &:hover {
+      background: transparent;
 
-    & .${stepClassnames.label} {
-      color: ${({ theme }) => theme.palette.grey[700]};
-    }
+      & .${stepClassnames.label} {
+        color: ${({ theme }) => theme.palette.grey[700]};
+      }
 
-    & .${stepIconClassnames.root} {
-      color: ${({ theme }) => theme.palette.primary[700]};
+      & .${stepIconClassnames.root} {
+        color: ${({ theme }) => theme.palette.primary[700]};
 
-      &.${stepIconClassnames.success} {
-        color: ${({ theme }) => theme.palette.success[700]};
-      }
+        &.${stepIconClassnames.success} {
+          color: ${({ theme }) => theme.palette.success[700]};
+        }
 
-      &.${stepIconClassnames.error} {
-        color: ${({ theme }) => theme.palette.error[700]};
-      }
+        &.${stepIconClassnames.error} {
+          color: ${({ theme }) => theme.palette.error[700]};
+        }
 
-      &.${stepIconClassnames.warning} {
-        color: ${({ theme }) => theme.palette.warning[700]};
+        &.${stepIconClassnames.warning} {
+          color: ${({ theme }) => theme.palette.warning[700]};
+        }
       }
     }
   }

package/components/Notification/NotificationStackContainer/styles.js

@@ -1,5 +1,6 @@
 import { ToastContainer } from 'react-toastify-next';
 import { Button } from '../../Button';
+import { HOVER_MEDIA } from '../../constants';
 import { keyframes, styled } from '../../styled';
 import { NOTIFY_HEIGHT, NOTIFY_HEIGHT_MOBILE, NOTIFY_NO_TRANSITION_ATTR, NotificationVariantTypes, notifyClassnames, } from '../constants';
 const fade = keyframes `
@@ -485,8 +486,10 @@ export const CloseButton = styled(Button) `
 
   animation: ${fade} 500ms linear;
 
-  &:hover {
-    box-shadow: ${({ theme }) => theme.elevation[300]};
+  ${HOVER_MEDIA} {
+    &:hover {
+      box-shadow: ${({ theme }) => theme.elevation[300]};
+    }
   }
 
   &.${notifyClassnames.closeButtonAnimationOut} {

package/components/Onboarding/types/step.d.ts

@@ -45,7 +45,7 @@ export type Step = {
      */
     type: StepType;
     /**
-     * Желаемая позиция popover (только для highlight).
+     * Желаемая позиция popover относительно подсвечиваемого элемента (только для highlight).
      * @default 'bottom'
      */
     position?: StepPosition;

package/components/Onboarding/ui/StepStrategy/steps/HighlightStep/styles.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const StepPopover: import("../../../../../styled").StyledComponent<Omit<import("../../../../../NewPopover").NewPopoverProps, "title" | "hasArrow" | "disableMobileDrawer"> & {
+export declare const StepPopover: import("../../../../../styled").StyledComponent<Omit<import("../../../../../NewPopover").NewPopoverProps, "title" | "disableMobileDrawer" | "hasArrow"> & {
     variant?: import("../../../../../HintPopover").HintPopoverVariant | undefined;
     title?: import("react").ReactNode;
     action?: import("react").ReactNode;

package/components/Onboarding/ui/StepStrategy/steps/StandaloneStep/StandaloneStep.js

@@ -7,5 +7,5 @@ import { Footer, StepDialog } from './styles';
  */
 export const StandaloneStep = ({ activeStep, isClosing, }) => {
     const { step, isConfirming, requestClose } = activeStep;
-    return (_jsxs(StepDialog, { open: !isConfirming && !isClosing, title: step.title, onClose: requestClose, size: step.dialogSize, disableAutoFocus: true, children: [_jsx(DialogContent, { children: step.content }), _jsx(Footer, { children: _jsx(StepFooter, { activeStep: activeStep }) })] }));
+    return (_jsxs(StepDialog, { open: !isConfirming && !isClosing, title: step.title, onClose: requestClose, size: step.dialogSize, disableAutoFocus: true, disableMobileDrawer: true, children: [_jsx(DialogContent, { children: step.content }), _jsx(Footer, { children: _jsx(StepFooter, { activeStep: activeStep }) })] }));
 };

package/components/Onboarding/ui/StepStrategy/steps/StandaloneStep/styles.d.ts

@@ -4,6 +4,7 @@ export declare const StepDialog: import("../../../../../styled").StyledComponent
     disableBackdropClick?: boolean | undefined;
     size?: import("../../../../../Dialog").DialogSize | undefined;
     headerContent?: import("react").ReactNode;
+    disableMobileDrawer?: boolean | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/Onboarding/ui/hooks/useTrackedRect/constants.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Сколько миллисекунд без изменений области считать покоем и останавливать
+ * отслеживание по кадрам. Перекрывает длительность анимаций MUI, чтобы
+ * отслеживание не выключилось в паузе перед стартом анимации.
+ */
+export declare const TRACKING_IDLE_TIMEOUT_MS = 300;

package/components/Onboarding/ui/hooks/useTrackedRect/constants.js

@@ -0,0 +1,6 @@
+/**
+ * Сколько миллисекунд без изменений области считать покоем и останавливать
+ * отслеживание по кадрам. Перекрывает длительность анимаций MUI, чтобы
+ * отслеживание не выключилось в паузе перед стартом анимации.
+ */
+export const TRACKING_IDLE_TIMEOUT_MS = 300;

package/components/Onboarding/ui/hooks/useTrackedRect/useTrackedRect.js

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { clampToScrollParents, getViewport, isSameRect, rectFromDomRect, } from '../../../utils/geometry';
 import { getScrollParents } from '../../../utils/getScrollParents';
+import { TRACKING_IDLE_TIMEOUT_MS } from './constants';
 /**
  * Отслеживает область элемента для hole overlay и якоря popover.
  */
@@ -11,32 +12,53 @@ export const useTrackedRect = (element) => {
             setRect(null);
             return;
         }
-        // ID текущей рAF-очереди обновления.
+        // ID кадра активного отслеживания, 0 — отслеживание остановлено.
         let frame = 0;
+        let lastChangeTime = 0;
+        let lastRect = null;
         const scrollParents = getScrollParents(element);
         const update = () => {
             const elementRect = rectFromDomRect(element.getBoundingClientRect());
             const viewport = getViewport();
             const next = clampToScrollParents(elementRect, scrollParents.map((parent) => rectFromDomRect(parent.getBoundingClientRect())), viewport);
-            setRect((prev) => (isSameRect(prev, next) ? prev : next));
+            if (isSameRect(lastRect, next)) {
+                return false;
+            }
+            lastRect = next;
+            setRect(next);
+            return true;
         };
-        const scheduleUpdate = () => {
-            cancelAnimationFrame(frame);
-            frame = requestAnimationFrame(update);
+        const track = () => {
+            if (update()) {
+                lastChangeTime = performance.now();
+            }
+            if (performance.now() - lastChangeTime >= TRACKING_IDLE_TIMEOUT_MS) {
+                frame = 0;
+                return;
+            }
+            frame = requestAnimationFrame(track);
+        };
+        // Продлевает отслеживание, а если оно уже остановилось — запускает заново.
+        const scheduleTracking = () => {
+            lastChangeTime = performance.now();
+            if (!frame) {
+                frame = requestAnimationFrame(track);
+            }
         };
         update();
+        scheduleTracking();
         const scrollOptions = { passive: true };
-        scrollParents.forEach((parent) => parent.addEventListener('scroll', scheduleUpdate, scrollOptions));
-        window.addEventListener('scroll', scheduleUpdate, scrollOptions);
-        window.addEventListener('resize', scheduleUpdate);
-        const resizeObserver = new ResizeObserver(scheduleUpdate);
+        scrollParents.forEach((parent) => parent.addEventListener('scroll', scheduleTracking, scrollOptions));
+        window.addEventListener('scroll', scheduleTracking, scrollOptions);
+        window.addEventListener('resize', scheduleTracking);
+        const resizeObserver = new ResizeObserver(scheduleTracking);
         resizeObserver.observe(element);
         return () => {
             cancelAnimationFrame(frame);
             resizeObserver.disconnect();
-            scrollParents.forEach((parent) => parent.removeEventListener('scroll', scheduleUpdate, scrollOptions));
-            window.removeEventListener('scroll', scheduleUpdate, scrollOptions);
-            window.removeEventListener('resize', scheduleUpdate);
+            scrollParents.forEach((parent) => parent.removeEventListener('scroll', scheduleTracking, scrollOptions));
+            window.removeEventListener('scroll', scheduleTracking, scrollOptions);
+            window.removeEventListener('resize', scheduleTracking);
         };
     }, [element]);
     return rect;

package/components/PageAsideNavigation/PageAsideNavigationItem/styles.js

@@ -1,3 +1,4 @@
+import { HOVER_MEDIA } from '../../constants';
 import { svgIconClassnames } from '../../SvgIcon/constants';
 import { styled } from '../../styled';
 import { pageAsideNavigationItemClassnames } from './constants';
@@ -33,8 +34,10 @@ export const Wrapper = styled.li `
       color: ${({ theme }) => theme.palette.grey[800]};
     }
 
-    &:hover {
-      color: ${({ theme }) => theme.palette.primary[800]};
+    ${HOVER_MEDIA} {
+      &:hover {
+        color: ${({ theme }) => theme.palette.primary[800]};
+      }
     }
 
     &:active {
@@ -73,10 +76,6 @@ export const Wrapper = styled.li `
       transition: ${({ theme }) => theme.transitions.create(['border-color', 'background-color'], {
     duration: theme.transitions.duration.shortest,
 })};
-      
-      &:hover {
-        color: ${({ theme }) => theme.palette.grey[800]};
-      }
 
       &:active {
         color: ${({ theme }) => theme.palette.grey[800]};

package/components/PageHeader/MobilePageActions/styles.js

@@ -37,10 +37,6 @@ export const ShowMoreButton = styled(Button) `
     height: 40px;
     min-height: 40px;
     padding: 0;
-
-    &:hover {
-      background-color: unset;
-    }
   }
 `;
 export const StyledCollapse = styled(Collapse) `

package/components/Radio/styles.js

@@ -1,3 +1,4 @@
+import { HOVER_MEDIA } from '../constants';
 import { styled } from '../styled';
 import { easeOutBackTransition } from '../styled/mixins';
 import { MOBILE_RADIO_SIZE, RADIO_SIZE, radioClassnames } from './constants';
@@ -58,22 +59,24 @@ export const Wrapper = styled('span', {
     ${easeOutBackTransition}; 
   }
 
-  &:hover {    
-    .${radioClassnames.outerCircle} {
-      fill: ${({ theme, $isDisabled, $isError, $isChecked }) => getFillColor({
+  ${HOVER_MEDIA} {
+    &:hover {
+      .${radioClassnames.outerCircle} {
+        fill: ${({ theme, $isDisabled, $isError, $isChecked }) => getFillColor({
     theme,
     isHover: true,
     isDisabled: $isDisabled,
     isError: $isError,
     isChecked: $isChecked,
 })};
-      stroke: ${({ theme, $isDisabled, $isError, $isChecked }) => getOutlineColor({
+        stroke: ${({ theme, $isDisabled, $isError, $isChecked }) => getOutlineColor({
     theme,
     isHover: true,
     isDisabled: $isDisabled,
     isError: $isError,
     isChecked: $isChecked,
 })};
+      }
     }
   }
 `;

package/components/RadioCard/styles.js

@@ -1,3 +1,4 @@
+import { HOVER_MEDIA } from '../constants';
 import { Radio, radioClassnames } from '../Radio';
 import { styled } from '../styled';
 import { radioCardClassnames } from './constants';
@@ -63,10 +64,12 @@ export const Wrapper = styled.label `
     cursor: default;
   }
 
-  &:hover {
-    background-color: ${({ theme, $isDisabled }) => $isDisabled
+  ${HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme, $isDisabled }) => $isDisabled
     ? theme.palette.background.element
     : theme.palette.background.elementHover};
+    }
   }
 `;
 export const Content = styled.div `