@astral/ui 4.101.0 → 4.103.0

package/node/components/Breadcrumbs/styles.js

@@ -7,6 +7,7 @@ exports.StyledBreadcrumbs = void 0;
 const Breadcrumbs_1 = __importDefault(require("@mui/material/Breadcrumbs"));
 const ButtonBase_1 = require("@mui/material/ButtonBase");
 const Link_1 = require("@mui/material/Link");
+const constants_1 = require("../constants");
 const styled_1 = require("../styled");
 exports.StyledBreadcrumbs = (0, styled_1.styled)(Breadcrumbs_1.default) `
   .${ButtonBase_1.buttonBaseClasses.root} {
@@ -20,22 +21,24 @@ exports.StyledBreadcrumbs = (0, styled_1.styled)(Breadcrumbs_1.default) `
       outline: 2px solid ${({ theme }) => theme.palette.components.focused};
     }
 
-    &:hover {
-      &::after {
-        content: '';
+    ${constants_1.HOVER_MEDIA} {
+      &:hover {
+        &::after {
+          content: '';
 
-        position: absolute;
-        bottom: 3px;
-        left: ${({ theme }) => theme.microSpacing(3)};
+          position: absolute;
+          bottom: 3px;
+          left: ${({ theme }) => theme.microSpacing(3)};
 
-        width: ${({ theme }) => theme.spacing(3)};
-        height: 1px;
+          width: ${({ theme }) => theme.spacing(3)};
+          height: 1px;
 
-        background-color: currentColor;
+          background-color: currentColor;
+        }
       }
     }
   }
-  
+
   .MuiTypography-body1 {
     color: ${({ theme }) => theme.palette.primary[800]};
   }
@@ -46,9 +49,11 @@ exports.StyledBreadcrumbs = (0, styled_1.styled)(Breadcrumbs_1.default) `
     &:visited {
       color: ${({ theme }) => theme.palette.grey[700]};
     }
-    
-    &:hover {
-      color: ${({ theme }) => theme.palette.grey[800]};
+
+    ${constants_1.HOVER_MEDIA} {
+      &:hover {
+        color: ${({ theme }) => theme.palette.grey[800]};
+      }
     }
   }
 `;

package/node/components/CheckableTag/styles.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledTag = exports.HiddenInput = exports.Wrapper = void 0;
 const Badge_1 = require("@mui/material/Badge");
+const constants_1 = require("../constants");
 const styled_1 = require("../styled");
 const Tag_1 = require("../Tag");
 const getHoverBgColor = ({ theme, color, isChecked, variant, disabled, }) => {
@@ -118,21 +119,23 @@ exports.StyledTag = (0, styled_1.styled)(Tag_1.Tag, {
     cursor: pointer;
   }
 
-  &:hover {
-    background-color: ${({ theme, color, variant, disabled, $isChecked }) => getHoverBgColor({
+  ${constants_1.HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme, color, variant, disabled, $isChecked }) => getHoverBgColor({
     theme,
     color,
     variant,
     disabled,
     isChecked: $isChecked,
 })};
-    border: ${({ theme, variant, $isChecked, color }) => getBorder({
+      border: ${({ theme, variant, $isChecked, color }) => getBorder({
     theme,
     variant,
     isChecked: $isChecked,
     tagState: 'hover',
     color,
 })};
+    }
   }
 
   &:active {

package/node/components/Checkbox/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, isIndeterminate, }) => {
     if (isDisabled) {
         return theme.palette.components.border.default;
@@ -24,17 +25,17 @@ exports.Wrapper = (0, styled_1.styled)('span', {
   display: flex;
   justify-content: center;
 
-  .${constants_1.checkboxClassnames.icon} {
+  .${constants_2.checkboxClassnames.icon} {
     fill: ${({ $isDisabled, theme }) => $isDisabled && theme.palette.components.disabled};
   }
 
-  .${constants_1.checkboxClassnames.symbol} {
+  .${constants_2.checkboxClassnames.symbol} {
     fill: ${({ $isDisabled, theme }) => $isDisabled ? theme.palette.grey[500] : 'white'};
 
     ${mixins_1.easeOutBackTransition};
   }
 
-  .${constants_1.checkboxClassnames.outline} {
+  .${constants_2.checkboxClassnames.outline} {
     fill: ${({ $isDisabled, $isChecked, $isIndeterminate }) => !$isDisabled && !$isChecked && !$isIndeterminate && 'white'};
     stroke: ${({ theme, $isDisabled, $isError, $isChecked, $isIndeterminate, }) => getOutlineColor({
     theme,
@@ -48,31 +49,32 @@ exports.Wrapper = (0, styled_1.styled)('span', {
     ${mixins_1.easeOutBackTransition};
   }
 
-  .${constants_1.checkboxClassnames.iconChecked} {
+  .${constants_2.checkboxClassnames.iconChecked} {
     transform-origin: bottom;
     transform: ${({ $isChecked, $isIndeterminate }) => $isChecked && !$isIndeterminate ? 'scale(1)' : 'scale(0)'};
 
     opacity: ${({ $isChecked, $isIndeterminate }) => $isChecked && !$isIndeterminate ? 1 : 0};
   }
 
-  .${constants_1.checkboxClassnames.iconIndeterminate} {
+  .${constants_2.checkboxClassnames.iconIndeterminate} {
     transform-origin: bottom;
     transform: ${({ $isIndeterminate }) => $isIndeterminate ? 'scale(1)' : 'scale(0)'};
 
     opacity: ${({ $isIndeterminate }) => ($isIndeterminate ? 1 : 0)};
   }
 
-  &:hover {
-    .${constants_1.checkboxClassnames.icon} {
-      color: ${({ $isError, theme }) => $isError ? theme.palette.error[700] : theme.palette.primary[700]};
-    }
+  ${constants_1.HOVER_MEDIA} {
+    &:hover {
+      .${constants_2.checkboxClassnames.icon} {
+        color: ${({ $isError, theme }) => $isError ? theme.palette.error[700] : theme.palette.primary[700]};
+      }
 
-    .${constants_1.checkboxClassnames.outline} {
-      fill: ${({ theme, $isDisabled, $isChecked, $isIndeterminate }) => !$isDisabled &&
+      .${constants_2.checkboxClassnames.outline} {
+        fill: ${({ theme, $isDisabled, $isChecked, $isIndeterminate }) => !$isDisabled &&
     !$isChecked &&
     !$isIndeterminate &&
     theme.palette.background.elementHover};
-      stroke: ${({ theme, $isDisabled, $isError, $isChecked, $isIndeterminate, }) => getOutlineColor({
+        stroke: ${({ theme, $isDisabled, $isError, $isChecked, $isIndeterminate, }) => getOutlineColor({
     theme,
     isHover: true,
     isDisabled: $isDisabled,
@@ -80,6 +82,7 @@ exports.Wrapper = (0, styled_1.styled)('span', {
     isChecked: $isChecked,
     isIndeterminate: $isIndeterminate,
 })};
+      }
     }
   }
 `;
@@ -88,19 +91,19 @@ exports.Input = styled_1.styled.input `
 
   position: absolute;
 
-  width: ${constants_1.CHECKBOX_SIZE};
-  height: ${constants_1.CHECKBOX_SIZE};
+  width: ${constants_2.CHECKBOX_SIZE};
+  height: ${constants_2.CHECKBOX_SIZE};
   margin: 0;
 
   opacity: 0;
 
   ${({ theme }) => theme.breakpoints.down('mobile')} {
-    width: ${constants_1.MOBILE_CHECKBOX_SIZE};
-    height: ${constants_1.MOBILE_CHECKBOX_SIZE};
+    width: ${constants_2.MOBILE_CHECKBOX_SIZE};
+    height: ${constants_2.MOBILE_CHECKBOX_SIZE};
   }
 
   &:focus-visible {
-    ~ .${constants_1.checkboxClassnames.iconWrapper} > .${constants_1.checkboxClassnames.icon} {
+    ~ .${constants_2.checkboxClassnames.iconWrapper} > .${constants_2.checkboxClassnames.icon} {
       border-radius: ${({ theme }) => theme.shape.small};
       outline: 2px solid ${({ theme }) => theme.palette.components.focused};
       outline-offset: -2px;
@@ -112,14 +115,14 @@ exports.IconWrapper = styled_1.styled.span `
   align-items: center;
   justify-content: center;
 
-  width: ${constants_1.CHECKBOX_SIZE};
-  height: ${constants_1.CHECKBOX_SIZE};
+  width: ${constants_2.CHECKBOX_SIZE};
+  height: ${constants_2.CHECKBOX_SIZE};
 
   ${({ theme }) => theme.breakpoints.down('mobile')} {
-    width: ${constants_1.MOBILE_CHECKBOX_SIZE};
-    height: ${constants_1.MOBILE_CHECKBOX_SIZE};
+    width: ${constants_2.MOBILE_CHECKBOX_SIZE};
+    height: ${constants_2.MOBILE_CHECKBOX_SIZE};
 
-    .${constants_1.checkboxClassnames.icon} {
+    .${constants_2.checkboxClassnames.icon} {
       width: 20px;
       height: 20px;
     }

package/node/components/Chip/styles.js

@@ -3,9 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Label = exports.AdornmentWrapper = exports.StyledCounter = exports.HiddenInput = exports.Wrapper = void 0;
 const Badge_1 = require("@mui/material/Badge");
 const Counter_1 = require("../Counter");
+const constants_1 = require("../constants");
 const styled_1 = require("../styled");
 const Typography_1 = require("../Typography");
-const constants_1 = require("./constants");
+const constants_2 = require("./constants");
 exports.Wrapper = styled_1.styled.div `
   cursor: pointer;
   user-select: none;
@@ -24,9 +25,11 @@ exports.Wrapper = styled_1.styled.div `
     duration: theme.transitions.duration.shortest,
 })};
 
-  &:hover {
-    background-color: ${({ theme }) => theme.palette.background.elementHover};
-    border-color: ${({ theme }) => theme.palette.grey[400]};
+  ${constants_1.HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme }) => theme.palette.background.elementHover};
+      border-color: ${({ theme }) => theme.palette.grey[400]};
+    }
   }
 
   &:active {
@@ -34,63 +37,65 @@ exports.Wrapper = styled_1.styled.div `
     border-color: ${({ theme }) => theme.palette.grey[800]};
   }
 
-  &.${constants_1.chipClassnames.hasIcon}, 
-  &.${constants_1.chipClassnames.hasEndAdornment}:not(.${constants_1.chipClassnames.hasStatusIcon}),
-  &.${constants_1.chipClassnames.hasCounter}:not(.${constants_1.chipClassnames.hasStatusIcon}) {
+  &.${constants_2.chipClassnames.hasIcon}, 
+  &.${constants_2.chipClassnames.hasEndAdornment}:not(.${constants_2.chipClassnames.hasStatusIcon}),
+  &.${constants_2.chipClassnames.hasCounter}:not(.${constants_2.chipClassnames.hasStatusIcon}) {
     gap: ${({ theme }) => theme.spacing(1)};
   }
 
-  &.${constants_1.chipClassnames.hasStatusIcon} {
-    & .${constants_1.chipClassnames.label} {
+  &.${constants_2.chipClassnames.hasStatusIcon} {
+    & .${constants_2.chipClassnames.label} {
       margin-left: ${({ theme }) => theme.microSpacing(1)};
     }
 
-    &.${constants_1.chipClassnames.hasCounter} .${constants_1.chipClassnames.label},
-    &.${constants_1.chipClassnames.hasEndAdornment} .${constants_1.chipClassnames.label} {
+    &.${constants_2.chipClassnames.hasCounter} .${constants_2.chipClassnames.label},
+    &.${constants_2.chipClassnames.hasEndAdornment} .${constants_2.chipClassnames.label} {
       margin-right: ${({ theme }) => theme.spacing(1)};
     }
   }
 
-  &.${constants_1.chipClassnames.hasStatusIcon} {
+  &.${constants_2.chipClassnames.hasStatusIcon} {
     padding-left: ${({ theme }) => theme.microSpacing(1)};
   }
 
-  &.${constants_1.chipClassnames.sizeSmall} {
-    height: ${constants_1.chipSize.small.desktop};
+  &.${constants_2.chipClassnames.sizeSmall} {
+    height: ${constants_2.chipSize.small.desktop};
 
     ${({ theme }) => theme.breakpoints.down('mobile')} {
-        height: ${constants_1.chipSize.small.mobile};
+        height: ${constants_2.chipSize.small.mobile};
     }
   }
 
-  &.${constants_1.chipClassnames.sizeMedium} {
-    height: ${constants_1.chipSize.medium.desktop};
+  &.${constants_2.chipClassnames.sizeMedium} {
+    height: ${constants_2.chipSize.medium.desktop};
 
     ${({ theme }) => theme.breakpoints.down('mobile')} {
-        height: ${constants_1.chipSize.medium.mobile};
+        height: ${constants_2.chipSize.medium.mobile};
     }
   }
 
-  &.${constants_1.chipClassnames.sizeLarge} {
-    height: ${constants_1.chipSize.large.desktop};
+  &.${constants_2.chipClassnames.sizeLarge} {
+    height: ${constants_2.chipSize.large.desktop};
     padding: ${({ theme }) => theme.spacing(0, 3)};
 
-    &.${constants_1.chipClassnames.hasStatusIcon} {
+    &.${constants_2.chipClassnames.hasStatusIcon} {
       padding-left: ${({ theme }) => theme.spacing(2)};
     }
 
     ${({ theme }) => theme.breakpoints.down('mobile')} {
-      height: ${constants_1.chipSize.large.mobile};
+      height: ${constants_2.chipSize.large.mobile};
     }
   }
 
-  &.${constants_1.chipClassnames.selected} {
+  &.${constants_2.chipClassnames.selected} {
     background-color: ${({ theme }) => theme.palette.grey[100]};
     border-color: ${({ theme }) => theme.palette.grey[800]};
 
-    &:hover {
-      background-color: ${({ theme }) => theme.palette.background.elementHover};
-      border-color: ${({ theme }) => theme.palette.grey[800]};
+    ${constants_1.HOVER_MEDIA} {
+      &:hover {
+        background-color: ${({ theme }) => theme.palette.background.elementHover};
+        border-color: ${({ theme }) => theme.palette.grey[800]};
+      }
     }
 
     &:active {
@@ -99,7 +104,7 @@ exports.Wrapper = styled_1.styled.div `
     }
   }
 
-  &.${constants_1.chipClassnames.disabled} {
+  &.${constants_2.chipClassnames.disabled} {
     cursor: default;
 
     background-color: ${({ theme }) => theme.palette.components.disabled};
@@ -107,9 +112,9 @@ exports.Wrapper = styled_1.styled.div `
     /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
     mix-blend-mode: luminosity;
 
-    & .${constants_1.chipClassnames.startAdornment},
-    & .${constants_1.chipClassnames.endAdornment},
-    & .${constants_1.chipClassnames.label} {
+    & .${constants_2.chipClassnames.startAdornment},
+    & .${constants_2.chipClassnames.endAdornment},
+    & .${constants_2.chipClassnames.label} {
       opacity: 0.3;
     }
   }
@@ -162,7 +167,7 @@ exports.Label = styled_1.styled.label `
 
   /* Причина игнора: Не критично для отображения */
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
-  &:has(> input:focus-visible) .${constants_1.chipClassnames.root} {
+  &:has(> input:focus-visible) .${constants_2.chipClassnames.root} {
     outline: 2px solid ${({ theme }) => theme.palette.components.focused};
     outline-offset: 2px;
   }

package/node/components/CodeField/styles.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledHelperText = exports.FieldLabel = exports.Digit = exports.DigitsItem = exports.DigitsWrapper = exports.Wrapper = void 0;
+const constants_1 = require("../constants");
 const FormHelperText_1 = require("../FormHelperText");
 const styled_1 = require("../styled");
 const Typography_1 = require("../Typography");
@@ -51,10 +52,12 @@ exports.Digit = styled_1.styled.input `
   border-radius: ${({ theme }) => theme.shape.medium};
   outline: none;
 
-  &:hover {
-    background-color: ${({ theme, disabled }) => disabled
+  ${constants_1.HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme, disabled }) => disabled
     ? theme.palette.components.disabled
     : theme.palette.background.elementHover};
+    }
   }
 `;
 exports.FieldLabel = (0, styled_1.styled)(Typography_1.Typography) `

package/node/components/CopyTypography/styles.js

@@ -2,9 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledCopyIcon = exports.TypographyWrapper = exports.Wrapper = void 0;
 const CopyOutlineSm_1 = require("../../icons/CopyOutlineSm");
+const constants_1 = require("../constants");
 const styled_1 = require("../styled");
 const Typography_1 = require("../Typography");
-const constants_1 = require("./constants");
+const constants_2 = require("./constants");
 exports.Wrapper = (0, styled_1.styled)(Typography_1.Typography) `
   cursor: pointer;
 
@@ -12,19 +13,27 @@ exports.Wrapper = (0, styled_1.styled)(Typography_1.Typography) `
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
+
+  ${constants_1.HOVER_MEDIA} {
+    &:hover {
+      text-decoration: underline;
+
+      .${constants_2.copyTypographyClassnames.showIconOnHover} {
+        display: unset;
+      }
+    }
+  }
   
-  &:hover {
-    text-decoration: underline;
-    
-    .${constants_1.copyTypographyClassnames.showIconOnHover} {
-      display: unset;
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
+    &:active {
+      text-decoration: underline;
     }
   }
 `;
 exports.TypographyWrapper = styled_1.styled.div `
   overflow: hidden;
   
-  &.${constants_1.copyTypographyClassnames.overflow} {
+  &.${constants_2.copyTypographyClassnames.overflow} {
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -35,7 +44,12 @@ exports.StyledCopyIcon = (0, styled_1.styled)(CopyOutlineSm_1.CopyOutlineSm, {
   margin-right: ${({ $copyPosition, theme }) => $copyPosition === 'left' ? theme.spacing(1) : ''};
   margin-left: ${({ $copyPosition, theme }) => $copyPosition === 'right' ? theme.spacing(1) : ''};
 
-  &.${constants_1.copyTypographyClassnames.showIconOnHover} {
+  &.${constants_2.copyTypographyClassnames.showIconOnHover} {
     display: none;
+
+    /* На тач-устройствах иконка копирования недостижима наведением — показываем постоянно */
+    ${constants_1.HOVER_NONE_MEDIA} {
+      display: unset;
+    }
   }
 `;

package/node/components/DashboardLayout/Header/styles.js

@@ -2,15 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MobileNotificationListWrapper = exports.PriorityFeatureWrapper = exports.HeaderContent = exports.ExitButton = exports.ProfileWrapper = exports.ProductSwitcherWrapper = exports.HeaderContentSection = exports.HeaderSection = exports.MobileSidebarTogglerWrapper = exports.HeaderRoot = void 0;
 const Button_1 = require("@mui/material/Button");
+const constants_1 = require("../../constants");
 const DashboardLayoutNotificationList_1 = require("../../DashboardLayoutNotificationList");
 const IconButton_1 = require("../../IconButton");
-const constants_1 = require("../../MenuOrganization/constants");
-const constants_2 = require("../../MenuOrganization/OrganizationButton/constants");
-const constants_3 = require("../../Profile/constants");
+const constants_2 = require("../../MenuOrganization/constants");
+const constants_3 = require("../../MenuOrganization/OrganizationButton/constants");
+const constants_4 = require("../../Profile/constants");
 const styled_1 = require("../../styled");
-const constants_4 = require("../constants");
-const constants_5 = require("../DashboardSidebar/constants");
-const constants_6 = require("./constants");
+const constants_5 = require("../constants");
+const constants_6 = require("../DashboardSidebar/constants");
+const constants_7 = require("./constants");
 exports.HeaderRoot = (0, styled_1.styled)('header', {
     shouldForwardProp: (prop) => !['$isFocusedMode'].includes(prop),
 }) `
@@ -23,8 +24,8 @@ exports.HeaderRoot = (0, styled_1.styled)('header', {
   justify-content: space-between;
 
   width: 100%;
-  height: ${constants_4.HEADER_HEIGHT_DESKTOP};
-  margin-top: ${({ $isFocusedMode }) => $isFocusedMode ? `-${constants_4.HEADER_HEIGHT_DESKTOP}` : 0};
+  height: ${constants_5.HEADER_HEIGHT_DESKTOP};
+  margin-top: ${({ $isFocusedMode }) => $isFocusedMode ? `-${constants_5.HEADER_HEIGHT_DESKTOP}` : 0};
   margin-bottom: ${({ theme }) => theme.spacing(4)};
 
   transition: ${({ theme }) => {
@@ -34,14 +35,14 @@ exports.HeaderRoot = (0, styled_1.styled)('header', {
 }};
 
   ${({ theme }) => theme.breakpoints.down('laptop')} {
-    height: ${constants_4.HEADER_HEIGHT_LAPTOP};
+    height: ${constants_5.HEADER_HEIGHT_LAPTOP};
   }
 
   ${({ theme }) => theme.breakpoints.down('mobile')} {
     grid-row: 2;
     justify-content: flex-start;
 
-    height: ${constants_4.HEADER_HEIGHT_MOBILE};
+    height: ${constants_5.HEADER_HEIGHT_MOBILE};
     margin-bottom: 0;
     padding: ${({ theme }) => theme.spacing(0, 2, 0, 1)};
 
@@ -62,7 +63,7 @@ exports.MobileSidebarTogglerWrapper = styled_1.styled.div `
   
   /* Причина игнора: Не критично для отображения */
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
-  .${constants_4.dashboardLayoutClassnames.root}:not(:has(.${constants_5.dashboardSidebarClassnames.root}))
+  .${constants_5.dashboardLayoutClassnames.root}:not(:has(.${constants_6.dashboardSidebarClassnames.root}))
     & {
     display: none;
   }
@@ -87,11 +88,11 @@ exports.HeaderContentSection = (0, styled_1.styled)(exports.HeaderSection) `
     flex-shrink: unset;
     gap: ${({ theme }) => theme.spacing(2)};
 
-    &.${constants_6.dashboardLayoutHeaderClassnames.priorityFeatureMenuOrg} {
-      & .${constants_1.menuOrganizationClassnames.organizationData} {
+    &.${constants_7.dashboardLayoutHeaderClassnames.priorityFeatureMenuOrg} {
+      & .${constants_2.menuOrganizationClassnames.organizationData} {
         display: none;
       }
-      & .${constants_1.menuOrganizationClassnames.button} {
+      & .${constants_2.menuOrganizationClassnames.button} {
         border-radius: ${({ theme }) => theme.shape.medium};
       }
     }
@@ -148,16 +149,16 @@ exports.PriorityFeatureWrapper = styled_1.styled.div `
 
     min-width: 0;
 
-    &.${constants_6.dashboardLayoutHeaderClassnames.priorityFeatureMenuOrg} {
-      & .${constants_1.menuOrganizationClassnames.button} {
+    &.${constants_7.dashboardLayoutHeaderClassnames.priorityFeatureMenuOrg} {
+      & .${constants_2.menuOrganizationClassnames.button} {
         padding: ${({ theme }) => theme.spacing(2, 0)};
       }
     }
 
-    &.${constants_6.dashboardLayoutHeaderClassnames.featureInSidebar} {
+    &.${constants_7.dashboardLayoutHeaderClassnames.featureInSidebar} {
       position: absolute;
       z-index: ${({ theme }) => theme.zIndex.appBar - 1};
-      top: calc(var(--alert-height, 0px) + ${constants_4.HEADER_HEIGHT_MOBILE});
+      top: calc(var(--alert-height, 0px) + ${constants_5.HEADER_HEIGHT_MOBILE});
       left: 0;
       
       /* Необходимо для анимации компонента вместе с sidebar */
@@ -177,18 +178,20 @@ exports.PriorityFeatureWrapper = styled_1.styled.div `
     });
 }};
 
-      &.${constants_6.dashboardLayoutHeaderClassnames.mobileSidebarPriorityFeatureVisible} {
+      &.${constants_7.dashboardLayoutHeaderClassnames.mobileSidebarPriorityFeatureVisible} {
         transform: translateX(0);
       }
 
-      & .${constants_1.menuOrganizationClassnames.button}, & .${constants_3.profileClassnames.button} {
-        height: ${constants_2.MOBILE_BUTTON_HEIGHT};
+      & .${constants_2.menuOrganizationClassnames.button}, & .${constants_4.profileClassnames.button} {
+        height: ${constants_3.MOBILE_BUTTON_HEIGHT};
         padding: ${({ theme }) => theme.spacing(3, 4)};
 
         border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
 
-        &:hover {
-          border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
+        ${constants_1.HOVER_MEDIA} {
+          &:hover {
+            border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
+          }
         }
 
         &:active {
@@ -196,15 +199,15 @@ exports.PriorityFeatureWrapper = styled_1.styled.div `
         }
       }
 
-      &.${constants_6.dashboardLayoutHeaderClassnames.hasNotificationList} {
+      &.${constants_7.dashboardLayoutHeaderClassnames.hasNotificationList} {
         gap: ${({ theme }) => theme.spacing(4)};
 
-        height: ${constants_2.MOBILE_BUTTON_HEIGHT};
+        height: ${constants_3.MOBILE_BUTTON_HEIGHT};
         padding: ${({ theme }) => theme.spacing(2, 3)};
 
         border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
 
-        & .${constants_1.menuOrganizationClassnames.button}, & .${constants_3.profileClassnames.button} {
+        & .${constants_2.menuOrganizationClassnames.button}, & .${constants_4.profileClassnames.button} {
           flex-grow: 1;
 
           height: unset;
@@ -214,29 +217,29 @@ exports.PriorityFeatureWrapper = styled_1.styled.div `
         }
       }
 
-      &.${constants_6.dashboardLayoutHeaderClassnames.priorityFeatureMenuOrg} {
-        & .${constants_1.menuOrganizationClassnames.button} {
+      &.${constants_7.dashboardLayoutHeaderClassnames.priorityFeatureMenuOrg} {
+        & .${constants_2.menuOrganizationClassnames.button} {
           padding: ${({ theme }) => theme.spacing(2, 0)};
         }
 
-        & .${constants_6.dashboardLayoutHeaderClassnames.profile} {
+        & .${constants_7.dashboardLayoutHeaderClassnames.profile} {
           display: block;
           flex-grow: 1;
         }
 
 
-        & .${constants_3.profileClassnames.button} {
+        & .${constants_4.profileClassnames.button} {
           width: 100%;
           max-width: unset;
 
           border-radius: 0;
         }
 
-        & .${constants_3.profileClassnames.avatar} {
+        & .${constants_4.profileClassnames.avatar} {
           display: none;
         }
 
-        & .${constants_3.profileClassnames.user} {
+        & .${constants_4.profileClassnames.user} {
           display: flex;
           align-items: center;
           justify-content: space-between;

package/node/components/DashboardSidebarPopover/SidebarPopoverItem/styles.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ItemWrapper = exports.IconWrapper = exports.Wrapper = exports.Item = void 0;
+const constants_1 = require("../../constants");
 const styled_1 = require("../../styled");
-const constants_1 = require("./constants");
+const constants_2 = require("./constants");
 exports.Item = styled_1.styled.div `
   pointer-events: ${({ $isDisabled }) => ($isDisabled ? 'none' : 'auto')};
 
@@ -17,8 +18,10 @@ exports.Item = styled_1.styled.div `
     });
 }};
 
-  &:hover {
-    background-color: ${({ theme }) => theme.palette.background.elementHover};
+  ${constants_1.HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme }) => theme.palette.background.elementHover};
+    }
   }
 
   &:active {
@@ -27,7 +30,7 @@ exports.Item = styled_1.styled.div `
 
   /* Причина игнора: Не критично для отображения */
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
-  &:has(.${constants_1.sidebarPopoverItemClassnames.content}:focus-visible) {
+  &:has(.${constants_2.sidebarPopoverItemClassnames.content}:focus-visible) {
     border-radius: ${({ theme }) => theme.shape.small};
     outline: 2px solid ${({ theme }) => theme.palette.components.focused};
     outline-offset: -2px;