@astral/ui 4.101.0 → 4.102.0

package/node/components/Notification/NotificationStackContainer/styles.js

@@ -3,8 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CloseButton = exports.StaticInner = exports.Inner = exports.Wrapper = void 0;
 const react_toastify_next_1 = require("react-toastify-next");
 const Button_1 = require("../../Button");
+const constants_1 = require("../../constants");
 const styled_1 = require("../../styled");
-const constants_1 = require("../constants");
+const constants_2 = require("../constants");
 const fade = (0, styled_1.keyframes) `
   from {
     opacity: 0;
@@ -69,7 +70,7 @@ exports.Wrapper = styled_1.styled.div `
     );
   }
 
-  &.${constants_1.notifyClassnames.container} {
+  &.${constants_2.notifyClassnames.container} {
     display: flex;
     flex-direction: column;
     justify-content: end;
@@ -84,7 +85,7 @@ exports.Wrapper = styled_1.styled.div `
     /* stylelint-enable plugin/no-unsupported-browser-features */
 
     ${({ theme }) => theme.breakpoints.up('mobile')} {
-      .${constants_1.notifyClassnames.stackHost} .Toastify {
+      .${constants_2.notifyClassnames.stackHost} .Toastify {
         overflow: hidden;
       }
     }
@@ -94,11 +95,11 @@ exports.Wrapper = styled_1.styled.div `
 
       height: auto;
 
-      .${constants_1.notifyClassnames.stackHost} .Toastify {
+      .${constants_2.notifyClassnames.stackHost} .Toastify {
         overflow: visible;
       }
 
-      .${constants_1.notifyClassnames.stack} {
+      .${constants_2.notifyClassnames.stack} {
         overflow: hidden auto;
         display: flex;
         flex-direction: column;
@@ -113,7 +114,7 @@ exports.Wrapper = styled_1.styled.div `
         -webkit-overflow-scrolling: touch;
       }
 
-      .${constants_1.notifyClassnames.stack} .${constants_1.notifyClassnames.root} {
+      .${constants_2.notifyClassnames.stack} .${constants_2.notifyClassnames.root} {
         pointer-events: auto !important;
 
         position: relative !important;
@@ -124,7 +125,7 @@ exports.Wrapper = styled_1.styled.div `
         width: 100% !important;
         max-width: 100%;
         height: auto !important;
-        min-height: ${constants_1.NOTIFY_HEIGHT_MOBILE};
+        min-height: ${constants_2.NOTIFY_HEIGHT_MOBILE};
         max-height: fit-content !important;
         margin-top: 0 !important;
         margin-right: 0 !important;
@@ -137,40 +138,40 @@ exports.Wrapper = styled_1.styled.div `
         На мобильных контейнер не получает mouseEnter — toastify оставляет data-collapsed=true
         и скрывает direct children не‑последних тостов (.Toastify__toast--stacked[data-collapsed=true]:not(:last-child)>*{opacity:0})
       */
-      .${constants_1.notifyClassnames.stack} .Toastify__toast--stacked > * {
+      .${constants_2.notifyClassnames.stack} .Toastify__toast--stacked > * {
         opacity: 1 !important;
       }
 
-      .${constants_1.notifyClassnames.stack} .${constants_1.notifyClassnames.root}__content {
+      .${constants_2.notifyClassnames.stack} .${constants_2.notifyClassnames.root}__content {
         max-height: 400px;
         margin: ${({ theme }) => theme.spacing(2, 0, 0, 8)};
       }
 
-      .${constants_1.notifyClassnames.stack} .${constants_1.notifyClassnames.root}__footer {
+      .${constants_2.notifyClassnames.stack} .${constants_2.notifyClassnames.root}__footer {
         margin-bottom: 0;
       }
 
-      .${constants_1.notifyClassnames.stack} .Toastify__toast--stacked::before {
+      .${constants_2.notifyClassnames.stack} .Toastify__toast--stacked::before {
         display: none;
       }
     }
   }
 
-  .${constants_1.notifyClassnames.animationIn} {
+  .${constants_2.notifyClassnames.animationIn} {
     animation: ${leaveIn} ease-in-out ${({ theme }) => theme.transitions.duration.standard}ms;
     animation-fill-mode: both;
   }
 
-  .${constants_1.notifyClassnames.animationOut} {
+  .${constants_2.notifyClassnames.animationOut} {
     animation: ${leaveOut} ease-in-out;
     animation-fill-mode: both;
   }
 
-  .${constants_1.notifyClassnames.root} {
+  .${constants_2.notifyClassnames.root} {
     overflow: hidden !important;
 
     width: 400px;
-    height: ${constants_1.NOTIFY_HEIGHT};
+    height: ${constants_2.NOTIFY_HEIGHT};
     padding: 0;
 
     box-shadow: ${({ theme }) => theme.elevation[300]};
@@ -193,10 +194,10 @@ exports.Wrapper = styled_1.styled.div `
       height: 3px;
     }
     ${({ theme }) => theme.breakpoints.up('mobile')} {
-      min-height: ${constants_1.NOTIFY_HEIGHT};
+      min-height: ${constants_2.NOTIFY_HEIGHT};
     }
     ${({ theme }) => theme.breakpoints.down('mobile')} {
-      min-height: ${constants_1.NOTIFY_HEIGHT_MOBILE};
+      min-height: ${constants_2.NOTIFY_HEIGHT_MOBILE};
     }
 
     .Toastify__progress-bar--wrp {
@@ -209,16 +210,16 @@ exports.Wrapper = styled_1.styled.div `
       opacity: 1;
     }
 
-    &--${constants_1.NotificationVariantTypes.Info} {
+    &--${constants_2.NotificationVariantTypes.Info} {
       --toastify-color-progress-light: ${({ theme }) => theme.palette.primary[800]};
     }
-    &--${constants_1.NotificationVariantTypes.Success} {
+    &--${constants_2.NotificationVariantTypes.Success} {
       --toastify-color-progress-light: ${({ theme }) => theme.palette.success[800]};
     }
-    &--${constants_1.NotificationVariantTypes.Warning} {
+    &--${constants_2.NotificationVariantTypes.Warning} {
       --toastify-color-progress-light: ${({ theme }) => theme.palette.warning[800]};
     }
-    &--${constants_1.NotificationVariantTypes.Error} {
+    &--${constants_2.NotificationVariantTypes.Error} {
       --toastify-color-progress-light: ${({ theme }) => theme.palette.error[800]};
     }
 
@@ -228,14 +229,14 @@ exports.Wrapper = styled_1.styled.div `
     }
   }
 
-  .${constants_1.notifyClassnames.root}__content {
+  .${constants_2.notifyClassnames.root}__content {
     overflow: hidden;
 
     max-height: 0;
     margin-top: 0;
   }
 
-  .${constants_1.notifyClassnames.root}__footer {
+  .${constants_2.notifyClassnames.root}__footer {
     margin-bottom: ${({ theme }) => theme.spacing(-3)};
 
     transition: ${({ theme }) => theme.transitions.create(['margin-bottom'], {
@@ -246,21 +247,21 @@ exports.Wrapper = styled_1.styled.div `
 
   /* Стили для уведомлений в стеке */
   ${({ theme }) => theme.breakpoints.up('mobile')} { 
-    .${constants_1.notifyClassnames.stack} .${constants_1.notifyClassnames.root} {
+    .${constants_2.notifyClassnames.stack} .${constants_2.notifyClassnames.root} {
       position: relative;
       transform: scale(var(--s));
 
       &:not(:last-of-type) {
         margin-bottom: calc(
-          ${({ theme }) => theme.spacing(4)} - ${constants_1.NOTIFY_HEIGHT}
+          ${({ theme }) => theme.spacing(4)} - ${constants_2.NOTIFY_HEIGHT}
         );
       }
 
       &:last-of-type {
         height: auto;
-        min-height: ${constants_1.NOTIFY_HEIGHT};
+        min-height: ${constants_2.NOTIFY_HEIGHT};
 
-        .${constants_1.notifyClassnames.root}__content {
+        .${constants_2.notifyClassnames.root}__content {
           max-height: 400px;
           margin: ${({ theme }) => theme.spacing(2, 0, 0, 8)};
         }
@@ -268,13 +269,13 @@ exports.Wrapper = styled_1.styled.div `
 
       /* В свернутом виде показываем не более 3-x уведомлений */
       &:not(:nth-last-of-type(-n + 3)) {
-        margin-bottom: -${constants_1.NOTIFY_HEIGHT};
+        margin-bottom: -${constants_2.NOTIFY_HEIGHT};
 
         opacity: 0;
       }
 
       /* Отключаем анимацию при появлении нового уведомления */
-      &[${constants_1.NOTIFY_NO_TRANSITION_ATTR}='true'] {
+      &[${constants_2.NOTIFY_NO_TRANSITION_ATTR}='true'] {
         transition-duration: 0s !important;
       }
     }
@@ -282,8 +283,8 @@ exports.Wrapper = styled_1.styled.div `
 
   /* Мобильный стек в свёрнутом виде: последний в DOM (самый новый) — сверху; остальные без участия в раскладке */
   ${({ theme }) => theme.breakpoints.down('mobile')} {
-    &:not(.${constants_1.notifyClassnames.container}) {
-      .${constants_1.notifyClassnames.stack} {
+    &:not(.${constants_2.notifyClassnames.container}) {
+      .${constants_2.notifyClassnames.stack} {
         position: relative;
 
         overflow: visible;
@@ -301,7 +302,7 @@ exports.Wrapper = styled_1.styled.div `
 
         /* Причина игнора: Не критично для отображения */
         /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
-        &:has(.${constants_1.notifyClassnames.root}:not(.${constants_1.notifyClassnames.animationOut}) ~ .${constants_1.notifyClassnames.root}:not(.${constants_1.notifyClassnames.animationOut})) {
+        &:has(.${constants_2.notifyClassnames.root}:not(.${constants_2.notifyClassnames.animationOut}) ~ .${constants_2.notifyClassnames.root}:not(.${constants_2.notifyClassnames.animationOut})) {
           padding-top: ${({ theme }) => theme.spacing(4)};
 
           &::before,
@@ -314,7 +315,7 @@ exports.Wrapper = styled_1.styled.div `
             right: ${({ theme }) => theme.spacing(2)};
             left: ${({ theme }) => theme.spacing(2)};
 
-            height: ${constants_1.NOTIFY_HEIGHT_MOBILE};
+            height: ${constants_2.NOTIFY_HEIGHT_MOBILE};
 
             background: ${({ theme }) => theme.palette.background.paper};
             border-radius: ${({ theme }) => theme.shape.medium};
@@ -333,7 +334,7 @@ exports.Wrapper = styled_1.styled.div `
         }
       }
 
-      .${constants_1.notifyClassnames.stack} .${constants_1.notifyClassnames.root}:not(:last-of-type) {
+      .${constants_2.notifyClassnames.stack} .${constants_2.notifyClassnames.root}:not(:last-of-type) {
         pointer-events: none;
 
         position: absolute;
@@ -352,13 +353,13 @@ exports.Wrapper = styled_1.styled.div `
         clip-path: inset(50%);
         border: 0;
 
-        .${constants_1.notifyClassnames.root}__content {
+        .${constants_2.notifyClassnames.root}__content {
           max-height: 0 !important;
           margin: 0 !important;
         }
       }
 
-      .${constants_1.notifyClassnames.stack} .${constants_1.notifyClassnames.root}:last-of-type {
+      .${constants_2.notifyClassnames.stack} .${constants_2.notifyClassnames.root}:last-of-type {
         position: relative;
         z-index: 1;
         transform: scale(var(--s, 1));
@@ -369,24 +370,24 @@ exports.Wrapper = styled_1.styled.div `
         width: 100% !important;
         min-width: 0 !important;
         max-width: 100% !important;
-        min-height: ${constants_1.NOTIFY_HEIGHT_MOBILE};
+        min-height: ${constants_2.NOTIFY_HEIGHT_MOBILE};
         margin-bottom: 0 !important;
 
         opacity: 1;
         border-radius: ${({ theme }) => theme.shape.medium};
 
-        .${constants_1.notifyClassnames.root}__content {
+        .${constants_2.notifyClassnames.root}__content {
           max-height: 400px;
           margin: ${({ theme }) => theme.spacing(2, 0, 0, 8)};
         }
       }
 
-      .${constants_1.notifyClassnames.stackHost} .Toastify,
-      .${constants_1.notifyClassnames.stackHost} .${constants_1.notifyClassnames.stack} {
+      .${constants_2.notifyClassnames.stackHost} .Toastify,
+      .${constants_2.notifyClassnames.stackHost} .${constants_2.notifyClassnames.stack} {
         overflow: visible !important;
       }
 
-      .${constants_1.notifyClassnames.animationOut} {
+      .${constants_2.notifyClassnames.animationOut} {
         animation: ${leaveOutMobileStacked} ease-in-out ${({ theme }) => theme.transitions.duration.standard}ms;
         animation-fill-mode: both;
       }
@@ -404,7 +405,7 @@ exports.Inner = (0, styled_1.styled)(react_toastify_next_1.ToastContainer) `
   padding-bottom: 0 !important;
   padding-left: ${({ theme }) => theme.spacing(3)} !important;
 
-  .${constants_1.notifyClassnames.root} {
+  .${constants_2.notifyClassnames.root} {
     border-radius: ${({ theme }) => theme.shape.medium};
     
     &:last-of-type{
@@ -420,23 +421,23 @@ exports.Inner = (0, styled_1.styled)(react_toastify_next_1.ToastContainer) `
 
         height: 100%;
 
-        .${constants_1.notifyClassnames.root} {
+        .${constants_2.notifyClassnames.root} {
           position: relative;
           transform: unset;
 
           height: auto;
-          min-height: ${constants_1.NOTIFY_HEIGHT};
+          min-height: ${constants_2.NOTIFY_HEIGHT};
           margin-bottom: ${({ theme }) => theme.spacing(1)} !important;
 
           opacity: 1 !important;
         }
 
-        .${constants_1.notifyClassnames.root}__content {
+        .${constants_2.notifyClassnames.root}__content {
           max-height: 400px;
           margin: ${({ theme }) => theme.spacing(2, 0, 0, 8)};
         }
 
-        .${constants_1.notifyClassnames.root}__footer {
+        .${constants_2.notifyClassnames.root}__footer {
           margin-bottom: 0;
         }
 
@@ -453,20 +454,20 @@ exports.Inner = (0, styled_1.styled)(react_toastify_next_1.ToastContainer) `
     padding-right: ${({ theme }) => theme.spacing(2)} !important;
     padding-left: ${({ theme }) => theme.spacing(2)} !important;
 
-    .${constants_1.notifyClassnames.root} {
+    .${constants_2.notifyClassnames.root} {
       width: 100% !important;
       max-width: 100%;
       height: auto !important;
-      min-height: ${constants_1.NOTIFY_HEIGHT_MOBILE};
+      min-height: ${constants_2.NOTIFY_HEIGHT_MOBILE};
       margin-bottom: ${({ theme }) => theme.spacing(2)} !important;
     }
 
-    .${constants_1.notifyClassnames.root}__content {
+    .${constants_2.notifyClassnames.root}__content {
       max-height: 400px;
       margin: ${({ theme }) => theme.spacing(2, 0, 0, 8)};
     }
 
-    .${constants_1.notifyClassnames.root}__footer {
+    .${constants_2.notifyClassnames.root}__footer {
       margin-bottom: 0;
     }
   }
@@ -474,7 +475,7 @@ exports.Inner = (0, styled_1.styled)(react_toastify_next_1.ToastContainer) `
 exports.StaticInner = (0, styled_1.styled)(exports.Inner) `
   margin-top: 0;
   
-  .${constants_1.notifyClassnames.root} {
+  .${constants_2.notifyClassnames.root} {
     margin-bottom: ${({ theme }) => theme.spacing(1)};
   }
 `;
@@ -488,11 +489,13 @@ exports.CloseButton = (0, styled_1.styled)(Button_1.Button) `
 
   animation: ${fade} 500ms linear;
 
-  &:hover {
-    box-shadow: ${({ theme }) => theme.elevation[300]};
+  ${constants_1.HOVER_MEDIA} {
+    &:hover {
+      box-shadow: ${({ theme }) => theme.elevation[300]};
+    }
   }
 
-  &.${constants_1.notifyClassnames.closeButtonAnimationOut} {
+  &.${constants_2.notifyClassnames.closeButtonAnimationOut} {
     opacity: 0;
   }
 

package/node/components/PageAsideNavigation/PageAsideNavigationItem/styles.js

@@ -1,15 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IconWrapper = exports.Wrapper = void 0;
-const constants_1 = require("../../SvgIcon/constants");
+const constants_1 = require("../../constants");
+const constants_2 = require("../../SvgIcon/constants");
 const styled_1 = require("../../styled");
-const constants_2 = require("./constants");
+const constants_3 = require("./constants");
 exports.Wrapper = styled_1.styled.li `
   cursor: pointer;
 
   height: 44px;
 
-  & .${constants_2.pageAsideNavigationItemClassnames.root} {
+  & .${constants_3.pageAsideNavigationItemClassnames.root} {
     cursor: pointer;
     
     position: relative;
@@ -36,8 +37,10 @@ exports.Wrapper = styled_1.styled.li `
       color: ${({ theme }) => theme.palette.grey[800]};
     }
 
-    &:hover {
-      color: ${({ theme }) => theme.palette.primary[800]};
+    ${constants_1.HOVER_MEDIA} {
+      &:hover {
+        color: ${({ theme }) => theme.palette.primary[800]};
+      }
     }
 
     &:active {
@@ -45,7 +48,7 @@ exports.Wrapper = styled_1.styled.li `
     }
   }
 
-  & .${constants_2.pageAsideNavigationItemClassnames.isActive} {
+  & .${constants_3.pageAsideNavigationItemClassnames.isActive} {
     background-color: ${({ theme }) => theme.palette.primary[100]};
 
     &::before {
@@ -65,7 +68,7 @@ exports.Wrapper = styled_1.styled.li `
     height: 40px;
     -webkit-tap-highlight-color: transparent;
     
-    & .${constants_2.pageAsideNavigationItemClassnames.root} {
+    & .${constants_3.pageAsideNavigationItemClassnames.root} {
       box-sizing: border-box;
       height: inherit;
       padding: ${({ theme }) => theme.microSpacing(5, 6)};
@@ -76,10 +79,6 @@ exports.Wrapper = styled_1.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]};
@@ -88,7 +87,7 @@ exports.Wrapper = styled_1.styled.li `
       }
     }
 
-    & .${constants_2.pageAsideNavigationItemClassnames.isActive} {
+    & .${constants_3.pageAsideNavigationItemClassnames.isActive} {
       background-color: ${({ theme }) => theme.palette.grey[100]};
       border-color: ${({ theme }) => theme.palette.grey[800]};
 
@@ -105,7 +104,7 @@ exports.Wrapper = styled_1.styled.li `
 exports.IconWrapper = styled_1.styled.div `
   display: flex;
 
-  & .${constants_1.svgIconClassnames.root} {
+  & .${constants_2.svgIconClassnames.root} {
     width: 20px;
     height: 20px;
   }

package/node/components/PageHeader/MobilePageActions/styles.js

@@ -66,10 +66,6 @@ exports.ShowMoreButton = (0, styled_1.styled)(Button_1.default) `
     height: 40px;
     min-height: 40px;
     padding: 0;
-
-    &:hover {
-      background-color: unset;
-    }
   }
 `;
 exports.StyledCollapse = (0, styled_1.styled)(Collapse_1.default) `

package/node/components/Radio/styles.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IconWrapper = exports.Input = exports.Wrapper = void 0;
+const constants_1 = require("../constants");
 const styled_1 = require("../styled");
 const mixins_1 = require("../styled/mixins");
-const constants_1 = require("./constants");
+const constants_2 = require("./constants");
 const getOutlineColor = ({ theme, isHover, isDisabled, isError, isChecked, }) => {
     if (isDisabled) {
         return isChecked
@@ -35,14 +36,14 @@ const getFillColor = ({ theme, isHover, isDisabled, isError, isChecked, }) => {
 exports.Wrapper = (0, styled_1.styled)('span', {
     shouldForwardProp: (prop) => !['$isDisabled', '$isError', '$isChecked'].includes(prop),
 }) `
-  .${constants_1.radioClassnames.dot} {
+  .${constants_2.radioClassnames.dot} {
     transform-origin: center;
     transform: ${({ $isChecked }) => ($isChecked ? 'scale(1)' : 'scale(0)')};
 
     ${mixins_1.easeOutBackTransition};
   }
   
-  .${constants_1.radioClassnames.outerCircle} {
+  .${constants_2.radioClassnames.outerCircle} {
     fill: ${({ theme, $isDisabled, $isError, $isChecked }) => getFillColor({
     theme,
     isHover: false,
@@ -61,22 +62,24 @@ exports.Wrapper = (0, styled_1.styled)('span', {
     ${mixins_1.easeOutBackTransition}; 
   }
 
-  &:hover {    
-    .${constants_1.radioClassnames.outerCircle} {
-      fill: ${({ theme, $isDisabled, $isError, $isChecked }) => getFillColor({
+  ${constants_1.HOVER_MEDIA} {
+    &:hover {
+      .${constants_2.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,
 })};
+      }
     }
   }
 `;
@@ -85,19 +88,19 @@ exports.Input = styled_1.styled.input `
   
   position: absolute;
 
-  width: ${constants_1.RADIO_SIZE};
-  height: ${constants_1.RADIO_SIZE};
+  width: ${constants_2.RADIO_SIZE};
+  height: ${constants_2.RADIO_SIZE};
   margin: 0;
 
   opacity: 0;
 
   ${({ theme }) => theme.breakpoints.down('mobile')} {
-    width: ${constants_1.MOBILE_RADIO_SIZE};
-    height: ${constants_1.MOBILE_RADIO_SIZE};
+    width: ${constants_2.MOBILE_RADIO_SIZE};
+    height: ${constants_2.MOBILE_RADIO_SIZE};
   }
 
   &:focus-visible {
-    ~.${constants_1.radioClassnames.iconWrapper} > .${constants_1.radioClassnames.icon} {
+    ~.${constants_2.radioClassnames.iconWrapper} > .${constants_2.radioClassnames.icon} {
       border-radius: ${({ theme }) => theme.shape.medium};
       outline: 2px solid ${({ theme }) => theme.palette.components.focused};
       outline-offset: -2px;
@@ -109,14 +112,14 @@ exports.IconWrapper = styled_1.styled.span `
   align-items: center;
   justify-content: center;
 
-  width: ${constants_1.RADIO_SIZE};
-  height: ${constants_1.RADIO_SIZE};
+  width: ${constants_2.RADIO_SIZE};
+  height: ${constants_2.RADIO_SIZE};
 
   ${({ theme }) => theme.breakpoints.down('mobile')} {
-    width: ${constants_1.MOBILE_RADIO_SIZE};
-    height: ${constants_1.MOBILE_RADIO_SIZE};
+    width: ${constants_2.MOBILE_RADIO_SIZE};
+    height: ${constants_2.MOBILE_RADIO_SIZE};
 
-    .${constants_1.radioClassnames.icon} {
+    .${constants_2.radioClassnames.icon} {
       width: 20px;
       height: 20px;
     }

package/node/components/RadioCard/styles.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledRadio = exports.Content = exports.Wrapper = void 0;
+const constants_1 = require("../constants");
 const Radio_1 = require("../Radio");
 const styled_1 = require("../styled");
-const constants_1 = require("./constants");
+const constants_2 = require("./constants");
 exports.Wrapper = styled_1.styled.label `
   cursor: pointer;
 
@@ -62,14 +63,16 @@ exports.Wrapper = styled_1.styled.label `
       outline-offset: -2px;
     `}
 
-  & .${Radio_1.radioClassnames.disabled} ~ .${constants_1.radioCardClassnames.content} {
+  & .${Radio_1.radioClassnames.disabled} ~ .${constants_2.radioCardClassnames.content} {
     cursor: default;
   }
 
-  &:hover {
-    background-color: ${({ theme, $isDisabled }) => $isDisabled
+  ${constants_1.HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme, $isDisabled }) => $isDisabled
     ? theme.palette.background.element
     : theme.palette.background.elementHover};
+    }
   }
 `;
 exports.Content = styled_1.styled.div `

package/node/components/StaticCalendar/StaticCalendarGridButton/styles.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StaticCalendarGridButton = void 0;
 const Button_1 = require("@mui/material/Button");
+const constants_1 = require("../../constants");
 const styled_1 = require("../../styled");
 const StaticCalendarButton_1 = require("../StaticCalendarButton");
 const utils_1 = require("./utils");
@@ -56,11 +57,13 @@ exports.StaticCalendarGridButton = (0, styled_1.styled)(StaticCalendarButton_1.S
     background-color: currentColor;
   }
   
-  &:hover {
-    border-radius: ${(props) => (0, utils_1.getLeftBorderRadius)({ isHovered: true, ...props })}
-    ${(props) => (0, utils_1.getRightBorderRadius)({ isHovered: true, ...props })}
-    ${(props) => (0, utils_1.getRightBorderRadius)({ isHovered: true, ...props })}
-    ${(props) => (0, utils_1.getLeftBorderRadius)({ isHovered: true, ...props })};
+  ${constants_1.HOVER_MEDIA} {
+    &:hover {
+      border-radius: ${(props) => (0, utils_1.getLeftBorderRadius)({ isHovered: true, ...props })}
+      ${(props) => (0, utils_1.getRightBorderRadius)({ isHovered: true, ...props })}
+      ${(props) => (0, utils_1.getRightBorderRadius)({ isHovered: true, ...props })}
+      ${(props) => (0, utils_1.getLeftBorderRadius)({ isHovered: true, ...props })};
+    }
   }
 
   &,

package/node/components/Tabs/Tab/styles.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledTab = void 0;
 const Tab_1 = __importDefault(require("@mui/material/Tab"));
+const constants_1 = require("../../constants");
 const styled_1 = require("../../styled");
 exports.StyledTab = (0, styled_1.styled)(Tab_1.default) `
   min-height: 36px;
@@ -19,8 +20,10 @@ exports.StyledTab = (0, styled_1.styled)(Tab_1.default) `
     margin-right: 0;
   }
 
-  &:hover {
-    color: ${({ theme }) => theme.palette.primary[800]};
+  ${constants_1.HOVER_MEDIA} {
+    &:hover {
+      color: ${({ theme }) => theme.palette.primary[800]};
+    }
   }
 
   &:active {