@astral/ui 4.101.0 → 4.102.0

package/components/theme/components/MuiSwitch.js

@@ -1,3 +1,4 @@
+import { HOVER_MEDIA } from '../../constants';
 const prepareColorToUrl = (color) => color.replace('#', '%23');
 const getCheckBackgroundImage = (color) => {
     const preparedColor = prepareColorToUrl(color);
@@ -30,13 +31,15 @@ export const MuiSwitch = {
                         opacity: 1,
                     },
                 },
-                // CHECKED HOVER
-                '& .Mui-checked:hover + .MuiSwitch-track': {
-                    backgroundColor: theme.palette.primary[700],
-                },
-                // NOT CHECKED HOVER
-                '& :not(.Mui-checked):hover + .MuiSwitch-track': {
-                    backgroundColor: theme.palette.grey[600],
+                [HOVER_MEDIA]: {
+                    // CHECKED HOVER
+                    '& .Mui-checked:hover + .MuiSwitch-track': {
+                        backgroundColor: theme.palette.primary[700],
+                    },
+                    // NOT CHECKED HOVER
+                    '& :not(.Mui-checked):hover + .MuiSwitch-track': {
+                        backgroundColor: theme.palette.grey[600],
+                    },
                 },
                 // DISABLED TRACK
                 '& .MuiButtonBase-root.MuiSwitch-switchBase.Mui-disabled': {
@@ -58,8 +61,10 @@ export const MuiSwitch = {
         },
         switchBase: {
             padding: 0,
-            '&:hover, &.Mui-checked:hover': {
-                backgroundColor: 'transparent',
+            [HOVER_MEDIA]: {
+                '&:hover, &.Mui-checked:hover': {
+                    backgroundColor: 'transparent',
+                },
             },
         },
         track({ theme }) {

package/components/theme/components/MuiTableRow.js

@@ -1,10 +1,18 @@
+import { HOVER_MEDIA, HOVER_NONE_MEDIA } from '../../constants';
 export const MuiTableRow = {
     styleOverrides: {
         root({ theme }) {
             return {
-                '&.MuiTableRow-hover:hover': {
-                    backgroundColor: theme.palette.background.elementHover,
-                    cursor: 'pointer',
+                [HOVER_MEDIA]: {
+                    '&.MuiTableRow-hover:hover': {
+                        backgroundColor: theme.palette.background.elementHover,
+                        cursor: 'pointer',
+                    },
+                },
+                [HOVER_NONE_MEDIA]: {
+                    '&.MuiTableRow-hover:hover': {
+                        backgroundColor: 'transparent',
+                    },
                 },
                 '&.Mui-selected': {
                     backgroundColor: theme.palette.primary['100'],

package/node/components/Alert/styles.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Title = exports.StyledTypography = exports.BodyWrapper = exports.IconWrapper = exports.Wrapper = exports.StyledIconButton = exports.StyledGrid = void 0;
+const constants_1 = require("../constants");
 const Grid_1 = require("../Grid");
 const IconButton_1 = require("../IconButton");
 const SvgIcon_1 = require("../SvgIcon");
 const styled_1 = require("../styled");
 const Typography_1 = require("../Typography");
-const constants_1 = require("./constants");
+const constants_2 = require("./constants");
 exports.StyledGrid = (0, styled_1.styled)(Grid_1.Grid) `
   grid-auto-flow: column;
   justify-content: flex-start;
@@ -23,8 +24,17 @@ exports.StyledIconButton = (0, styled_1.styled)(IconButton_1.IconButton) `
     margin-top: ${({ theme }) => `calc(${theme.microSpacing(3)} + (20px - 40px) / 2)`};
   }
 
-  &:hover {
-    background-color: rgb(0 0 0 / 4%);
+  ${constants_1.HOVER_MEDIA} {
+    &:hover {
+      background-color: rgb(0 0 0 / 4%);
+    }
+  }
+  
+  /* Переопределяем active на мобильных устройствах для сохранения исходной стилизации */
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
+    &:active {
+      background-color: rgb(0 0 0 / 4%);
+    }
   }
 `;
 exports.Wrapper = styled_1.styled.div `
@@ -36,38 +46,38 @@ exports.Wrapper = styled_1.styled.div `
   border: 1px solid transparent;
   border-radius: ${({ theme }) => theme.shape.medium};
 
-  &.${constants_1.alertClassnames.severityInfo} {
+  &.${constants_2.alertClassnames.severityInfo} {
     background-color: ${({ theme }) => theme.palette.primary[100]};
     border-color: ${({ theme }) => theme.palette.primary[300]};
 
-    .${constants_1.alertClassnames.iconWrapper} {
+    .${constants_2.alertClassnames.iconWrapper} {
       color: ${({ theme }) => theme.palette.primary[800]};
     }
   }
 
-  &.${constants_1.alertClassnames.severitySuccess} {
+  &.${constants_2.alertClassnames.severitySuccess} {
     background-color: ${({ theme }) => theme.palette.success[100]};
     border-color: ${({ theme }) => theme.palette.success[300]};
 
-    .${constants_1.alertClassnames.iconWrapper} {
+    .${constants_2.alertClassnames.iconWrapper} {
       color: ${({ theme }) => theme.palette.success[800]};
     }
   }
 
-  &.${constants_1.alertClassnames.severityError} {
+  &.${constants_2.alertClassnames.severityError} {
     background-color: ${({ theme }) => theme.palette.error[100]};
     border-color: ${({ theme }) => theme.palette.error[300]};
 
-    .${constants_1.alertClassnames.iconWrapper} {
+    .${constants_2.alertClassnames.iconWrapper} {
       color: ${({ theme }) => theme.palette.error[800]};
     }
   }
 
-  &.${constants_1.alertClassnames.severityWarning} {
+  &.${constants_2.alertClassnames.severityWarning} {
     background-color: ${({ theme }) => theme.palette.warning[100]};
     border-color: ${({ theme }) => theme.palette.warning[300]};
 
-    .${constants_1.alertClassnames.iconWrapper} {
+    .${constants_2.alertClassnames.iconWrapper} {
       color: ${({ theme }) => theme.palette.warning[800]};
     }
   }
@@ -102,15 +112,15 @@ exports.BodyWrapper = styled_1.styled.div `
   min-width: 0;
   margin-block: ${({ theme }) => theme.microSpacing(3)};
 
-  .${constants_1.alertClassnames.hasCloseButton} & {
+  .${constants_2.alertClassnames.hasCloseButton} & {
     margin-right: ${({ theme }) => theme.spacing(1)};
   }
 
-  & > .${constants_1.alertClassnames.title} + .${constants_1.alertClassnames.content} {
+  & > .${constants_2.alertClassnames.title} + .${constants_2.alertClassnames.content} {
     margin-top: ${({ theme }) => theme.spacing(1)};
   }
 
-  & > .${constants_1.alertClassnames.actions} {
+  & > .${constants_2.alertClassnames.actions} {
     margin-top: ${({ theme }) => theme.spacing(2)};
   }
 `;

package/node/components/Autocomplete/styles.js

@@ -28,10 +28,11 @@ const Autocomplete_1 = __importStar(require("@mui/material/Autocomplete"));
 const FormControl_1 = require("@mui/material/FormControl");
 const IconButton_1 = require("@mui/material/IconButton");
 const InputBase_1 = require("@mui/material/InputBase");
+const constants_1 = require("../constants");
 const MenuItem_1 = require("../MenuItem");
 const SvgIcon_1 = require("../SvgIcon");
 const styled_1 = require("../styled");
-const constants_1 = require("./constants");
+const constants_2 = require("./constants");
 exports.StyledMenuItem = (0, styled_1.styled)(MenuItem_1.MenuItem) `
     max-height: ${({ theme }) => theme.spacing(13)};
 
@@ -48,16 +49,18 @@ exports.StyledAutocomplete = (0, styled_1.styled)(Autocomplete_1.default) `
       }`);
 }}
   
-  & .${Autocomplete_1.autocompleteClasses.endAdornment} .${IconButton_1.iconButtonClasses.root}:hover {
-      background-color: ${({ loading, theme }) => (loading ? 'transparent' : theme.palette.grey[100])};
+  ${constants_1.HOVER_MEDIA} {
+    & .${Autocomplete_1.autocompleteClasses.endAdornment} .${IconButton_1.iconButtonClasses.root}:hover {
+        background-color: ${({ loading, theme }) => (loading ? 'transparent' : theme.palette.grey[100])};
+    }
   }
 
-  &:not(.${constants_1.autocompleteClassnames.emptyValue}) .${InputBase_1.inputBaseClasses.root} {
+  &:not(.${constants_2.autocompleteClassnames.emptyValue}) .${InputBase_1.inputBaseClasses.root} {
     gap: ${({ theme }) => theme.spacing(3)};
   }
 
   & .${Autocomplete_1.autocompleteClasses.inputRoot} .${InputBase_1.inputBaseClasses.input} {
-    min-width: ${constants_1.INPUT_MIN_WIDTH}px;
+    min-width: ${constants_2.INPUT_MIN_WIDTH}px;
   }
 
   & .${Autocomplete_1.autocompleteClasses.inputRoot} {

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;
+    }
   }
 `;