@astral/ui 4.101.0 → 4.102.0

package/node/components/InfiniteDataList/styles.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 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.li `
   list-style-type: none;
 
-  ${`.${constants_1.infiniteDataListClassnames.item}`} {
+  ${`.${constants_2.infiniteDataListClassnames.item}`} {
     cursor: pointer;
 
     padding: ${({ theme }) => theme.spacing(3, 4)};
@@ -18,8 +19,10 @@ exports.Item = styled_1.styled.li `
     duration: theme.transitions.duration.shortest,
 })};
 
-    &:hover {
-      background-color: ${({ theme }) => theme.palette.background.element};
+    ${constants_1.HOVER_MEDIA} {
+      &:hover {
+        background-color: ${({ theme }) => theme.palette.background.element};
+      }
     }
 
     ${({ theme }) => theme.breakpoints.down('mobile')} {

package/node/components/InfiniteTreeList/InfiniteTreeListItem/styles.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LoaderWrapper = exports.ActionsWrapper = exports.Wrapper = void 0;
+const constants_1 = require("../../constants");
 const styled_1 = require("../../styled");
-const constants_1 = require("./constants");
+const constants_2 = require("./constants");
 exports.Wrapper = styled_1.styled.div `
   cursor: default;
 
@@ -21,26 +22,28 @@ exports.Wrapper = styled_1.styled.div `
     duration: theme.transitions.duration.shortest,
 })};
 
-  &:hover {
-    background-color: ${({ theme }) => theme.palette.background.elementHover};
+  ${constants_1.HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme }) => theme.palette.background.elementHover};
+    }
   }
 
-  &.${constants_1.infiniteTreeListItemClassnames.hasNested} {
+  &.${constants_2.infiniteTreeListItemClassnames.hasNested} {
     cursor: pointer;
   }
 
-  &.${constants_1.infiniteTreeListItemClassnames.loading} {
+  &.${constants_2.infiniteTreeListItemClassnames.loading} {
     cursor: default;
   }
 
-  &.${constants_1.infiniteTreeListItemClassnames.disabled} {
+  &.${constants_2.infiniteTreeListItemClassnames.disabled} {
     cursor: default;
 
     opacity: 0.5;
   }
 
-  &.${constants_1.infiniteTreeListItemClassnames.loading}:hover,
-  &.${constants_1.infiniteTreeListItemClassnames.disabled}:hover {
+  &.${constants_2.infiniteTreeListItemClassnames.loading}:hover,
+  &.${constants_2.infiniteTreeListItemClassnames.disabled}:hover {
     background-color: ${({ theme }) => theme.palette.background.default};
   }
 `;

package/node/components/InputGroup/styles.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputsWrapper = void 0;
 const FormControl_1 = require("@mui/material/FormControl");
 const InputBase_1 = require("@mui/material/InputBase");
+const constants_1 = require("../constants");
 const styled_1 = require("../styled");
 exports.InputsWrapper = styled_1.styled.fieldset `
   display: grid;
@@ -79,11 +80,13 @@ exports.InputsWrapper = styled_1.styled.fieldset `
     width: auto;
     margin-right: -2px;
     
-    &:hover {
-      z-index: 3;
-      
-      &.${InputBase_1.inputBaseClasses.disabled} {
-        z-index: 1;
+    ${constants_1.HOVER_MEDIA} {
+      &:hover {
+        z-index: 3;
+
+        &.${InputBase_1.inputBaseClasses.disabled} {
+          z-index: 1;
+        }
       }
     }
   }

package/node/components/JsonViewer/JsonNode/styles.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Chevron = exports.IconWrapper = exports.NodeContainer = void 0;
 const ChevronROutlineMd_1 = require("../../../icons/ChevronROutlineMd");
+const constants_1 = require("../../constants");
 const styled_1 = require("../../styled");
 exports.NodeContainer = (0, styled_1.styled)('dl', {
     shouldForwardProp: (prop) => prop !== 'level' && prop !== 'isExpandable',
@@ -24,8 +25,10 @@ exports.NodeContainer = (0, styled_1.styled)('dl', {
     duration: theme.transitions.duration.shortest,
 })};
 
-  &:hover {
-    background-color: ${({ theme, isExpandable }) => isExpandable ? theme.palette.background.elementHover : 'transparent'};
+  ${constants_1.HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme, isExpandable }) => isExpandable ? theme.palette.background.elementHover : 'transparent'};
+    }
   }
 `;
 exports.IconWrapper = (0, styled_1.styled)('div', {

package/node/components/Link/styles.js

@@ -5,9 +5,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledLink = void 0;
 const Link_1 = __importDefault(require("@mui/material/Link"));
+const constants_1 = require("../constants");
 const SvgIcon_1 = require("../SvgIcon");
 const styled_1 = require("../styled");
-const constants_1 = require("./constants");
+const constants_2 = require("./constants");
 exports.StyledLink = (0, styled_1.styled)(Link_1.default) `
   display: inline-flex;
   gap: ${({ theme }) => theme.spacing(1)};
@@ -22,26 +23,30 @@ exports.StyledLink = (0, styled_1.styled)(Link_1.default) `
     color: ${({ theme }) => theme.palette.components.link.visited};
   }
 
-  &:hover {
-    color: ${({ theme }) => theme.palette.components.link.hover};
-    text-decoration: underline;
+  ${constants_1.HOVER_MEDIA} {
+    &:hover {
+      color: ${({ theme }) => theme.palette.components.link.hover};
+      text-decoration: underline;
+    }
   }
 
   &:active {
     color: ${({ theme }) => theme.palette.components.link.active};
   }
 
-  &.${constants_1.linkClassnames.isContrast} {
+  &.${constants_2.linkClassnames.isContrast} {
     color: ${({ theme }) => theme.palette.components.link.contrast.main};
 
     &:visited {
       color: ${({ theme }) => theme.palette.components.link.contrast.visited};
     }
 
-    &:hover {
-      color: ${({ theme }) => theme.palette.components.link.contrast.hover};
+    ${constants_1.HOVER_MEDIA} {
+      &:hover {
+        color: ${({ theme }) => theme.palette.components.link.contrast.hover};
+      }
     }
-    
+
     &:active {
       color: ${({ theme }) => theme.palette.components.link.contrast.active};
     }

package/node/components/ListItem/styles.js

@@ -5,8 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledListItem = exports.getColor = exports.getBgColor = void 0;
 const ListItem_1 = __importDefault(require("@mui/material/ListItem"));
+const constants_1 = require("../constants");
 const styled_1 = require("../styled");
-const constants_1 = require("./constants");
+const constants_2 = require("./constants");
 const getBgColor = ({ selected, theme, }) => {
     if (selected) {
         return theme.palette.grey[200];
@@ -18,10 +19,10 @@ const getColor = ({ theme, selected, listItemState, }) => {
     if (selected) {
         return theme.palette.primary[800];
     }
-    if (listItemState === constants_1.ListItemStates.Default) {
+    if (listItemState === constants_2.ListItemStates.Default) {
         return theme.palette.grey[900];
     }
-    if (listItemState === constants_1.ListItemStates.Hover) {
+    if (listItemState === constants_2.ListItemStates.Hover) {
         return theme.palette.primary[800];
     }
     return theme.palette.grey[900];
@@ -35,15 +36,17 @@ exports.StyledListItem = (0, styled_1.styled)(ListItem_1.default, {
 
   padding-left: ${({ theme }) => theme.spacing(3)};
 
-  color: ${(props) => (0, exports.getColor)({ ...props, listItemState: constants_1.ListItemStates.Default })};
+  color: ${(props) => (0, exports.getColor)({ ...props, listItemState: constants_2.ListItemStates.Default })};
 
   background-color: ${(props) => (0, exports.getBgColor)({ ...props })};
   border-radius: ${({ theme }) => theme.shape.small};
 
-  :hover {
-    color: ${(props) => (0, exports.getColor)({
+  ${constants_1.HOVER_MEDIA} {
+    :hover {
+      color: ${(props) => (0, exports.getColor)({
     ...props,
-    listItemState: constants_1.ListItemStates.Hover,
+    listItemState: constants_2.ListItemStates.Hover,
 })};
+    }
   }
 `;

package/node/components/MenuOrganization/OrganizationButton/styles.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledTypography = exports.Container = exports.StyledChevron = exports.StyledButton = void 0;
 const Button_1 = require("../../Button");
 const Chevron_1 = require("../../Chevron");
+const constants_1 = require("../../constants");
 const styled_1 = require("../../styled/styled");
 const Typography_1 = require("../../Typography");
 exports.StyledButton = (0, styled_1.styled)(Button_1.Button) `
@@ -16,8 +17,10 @@ exports.StyledButton = (0, styled_1.styled)(Button_1.Button) `
 
   text-align: left;
 
-  &:hover {
-    background-color: ${({ theme }) => theme.palette.background.elementHover};
+  ${constants_1.HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme }) => theme.palette.background.elementHover};
+    }
   }
 
   &:active {
@@ -35,10 +38,6 @@ exports.StyledButton = (0, styled_1.styled)(Button_1.Button) `
 
     border-radius: 0;
 
-    &:hover {
-      background-color: initial;
-    }
-
     &:active {
       background-color: ${({ theme }) => theme.palette.primary[100]};
     }

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

@@ -4,13 +4,14 @@ exports.StyledPageDotOutlineMd = exports.EndAdornmentWrapper = exports.NavMenuIt
 const ListItemButton_1 = require("@mui/material/ListItemButton");
 const ChevronDOutlineMd_1 = require("../../../../icons/ChevronDOutlineMd");
 const PageDotOutlineMd_1 = require("../../../../icons/PageDotOutlineMd");
+const constants_1 = require("../../../constants");
 const ListItemButton_2 = require("../../../ListItemButton");
 const ListItemIcon_1 = require("../../../ListItemIcon");
 const OverflowTypography_1 = require("../../../OverflowTypography");
 const SvgIcon_1 = require("../../../SvgIcon");
 const styled_1 = require("../../../styled");
 const mixins_1 = require("../../../styled/mixins");
-const constants_1 = require("./constants");
+const constants_2 = require("./constants");
 exports.StyledListItemButton = (0, styled_1.styled)(ListItemButton_2.ListItemButton) `
   overflow: hidden;
 
@@ -36,23 +37,29 @@ exports.StyledListItemButton = (0, styled_1.styled)(ListItemButton_2.ListItemBut
       border-left: 3px solid ${({ theme }) => theme.palette.primary[800]};
     }
     
-    &:hover {
-      background-color: ${({ theme }) => theme.palette.primary[100]};
+    ${constants_1.HOVER_MEDIA} {
+      &:hover {
+        background-color: ${({ theme }) => theme.palette.primary[100]};
+      }
     }
 
-    &.${constants_1.navMenuItemButtonClassnames.hasGroup} {
+    &.${constants_2.navMenuItemButtonClassnames.hasGroup} {
       background-color: inherit;
 
-      &:hover {
-        background-color: inherit;
+      ${constants_1.HOVER_MEDIA} {
+        &:hover {
+          background-color: inherit;
+        }
       }
     }
   }
 
-  &:hover {
-    color: ${({ theme }) => theme.palette.primary['800']};
+  ${constants_1.HOVER_MEDIA} {
+    &:hover {
+      color: ${({ theme }) => theme.palette.primary['800']};
 
-    background-color: inherit;
+      background-color: inherit;
+    }
   }
 
   &:active {

package/node/components/NewStepper/Step/styles.js

@@ -3,87 +3,88 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledButton = exports.StepContentWrapper = exports.LabelWrapper = exports.LineConnector = exports.ArrowConnector = exports.IconWrapper = exports.Wrapper = void 0;
 const NextOutlineMd_1 = require("../../../icons/NextOutlineMd");
 const Button_1 = require("../../Button");
+const constants_1 = require("../../constants");
 const styled_1 = require("../../styled");
-const constants_1 = require("../../Typography/constants");
-const constants_2 = require("../constants");
-const constants_3 = require("../StepIcon/constants");
-const constants_4 = require("./constants");
+const constants_2 = require("../../Typography/constants");
+const constants_3 = require("../constants");
+const constants_4 = require("../StepIcon/constants");
+const constants_5 = require("./constants");
 exports.Wrapper = styled_1.styled.div `
-  counter-increment: ${constants_2.STEPPER_ORDER_COUNTER_NAME};
+  counter-increment: ${constants_3.STEPPER_ORDER_COUNTER_NAME};
 
   display: flex;
   gap: ${({ theme }) => theme.microSpacing(5)};
   align-items: center;
 
-  &.${constants_4.stepClassnames.alternativeLabel} {
+  &.${constants_5.stepClassnames.alternativeLabel} {
     position: relative;
 
     flex: 1;
     flex-direction: column;
 
-    & .${constants_4.stepClassnames.labelContainer} {
+    & .${constants_5.stepClassnames.labelContainer} {
       flex-direction: column;
 
       text-align: center;
     }
 
     &:first-of-type {
-      & .${constants_4.stepClassnames.connector} {
+      & .${constants_5.stepClassnames.connector} {
         display: none;
       }
     }
   }
 
-  &.${constants_4.stepClassnames.connectorArrow} {
-    & .${constants_4.stepClassnames.content} {
+  &.${constants_5.stepClassnames.connectorArrow} {
+    & .${constants_5.stepClassnames.content} {
       padding: ${({ theme }) => theme.microSpacing(5, 0)};
     }
     
-    &:not(:first-of-type) .${constants_4.stepClassnames.content} {
+    &:not(:first-of-type) .${constants_5.stepClassnames.content} {
       margin-left: ${({ theme }) => theme.spacing(2)};
     }
 
-    &:last-of-type .${constants_4.stepClassnames.connector} {
+    &:last-of-type .${constants_5.stepClassnames.connector} {
       display: none;
     }
   }
 
-  &.${constants_4.stepClassnames.connectorLine} {
-    &.${constants_4.stepClassnames.orientationHorizontal} {
-      & .${constants_4.stepClassnames.content} {
+  &.${constants_5.stepClassnames.connectorLine} {
+    &.${constants_5.stepClassnames.orientationHorizontal} {
+      & .${constants_5.stepClassnames.content} {
         align-items: center;
 
         padding: ${({ theme }) => theme.spacing(0, 1)};
       }
 
     
-      &.${constants_4.stepClassnames.alternativeLabel} {
-        & .${constants_4.stepClassnames.content} {
+      &.${constants_5.stepClassnames.alternativeLabel} {
+        & .${constants_5.stepClassnames.content} {
           padding: ${({ theme }) => theme.microSpacing(3, 0)};
         }
       }
     }
 
-    &.${constants_4.stepClassnames.orientationVertical} {
-      & .${constants_4.stepClassnames.labelContainer} {
+    &.${constants_5.stepClassnames.orientationVertical} {
+      & .${constants_5.stepClassnames.labelContainer} {
         color: ${({ theme }) => theme.palette.grey[900]};
       }
 
-      & .${constants_4.stepClassnames.label} {
+      & .${constants_5.stepClassnames.label} {
         font-size: ${({ theme }) => theme.typography.body1.fontSize};
         line-height: ${({ theme }) => theme.typography.body1.lineHeight};
       }
       
-      & .${constants_4.stepClassnames.content} {
+      & .${constants_5.stepClassnames.content} {
         padding: ${({ theme }) => theme.spacing(1, 0, 0)};
       }
 
-      & .${constants_4.stepClassnames.connector}:not(.${constants_4.stepClassnames.hasDescription}) {
+      & .${constants_5.stepClassnames.connector}:not(.${constants_5.stepClassnames.hasDescription}) {
         margin-bottom: ${({ theme }) => theme.microSpacing(1)};
       }
 
       &:last-of-type {
-        & .${constants_4.stepClassnames.description} {
+        & .${constants_5.stepClassnames.description} {
           min-height: 0;
           margin: 0;
           padding-left: ${({ theme }) => theme.spacing(6)};
@@ -95,49 +96,49 @@ exports.Wrapper = styled_1.styled.div `
           }
         }
 
-        & .${constants_4.stepClassnames.connector} {
+        & .${constants_5.stepClassnames.connector} {
           display: none;
         }
       }
 
       &:last-of-type {
-        & .${constants_4.stepClassnames.content} {
+        & .${constants_5.stepClassnames.content} {
           padding: ${({ theme }) => theme.spacing(1, 0)};
     
-          & .${constants_4.stepClassnames.description} {
+          & .${constants_5.stepClassnames.description} {
             margin-bottom: 0;
           }
         }
       }
 
-      & .${constants_4.stepClassnames.labelMobile} {
+      & .${constants_5.stepClassnames.labelMobile} {
         display: none;
       }
 
-      & .${constants_4.stepClassnames.label} {
+      & .${constants_5.stepClassnames.label} {
         display: block;
       }
     }
   }
 
-  & .${constants_4.stepClassnames.content} {
-    &.${constants_4.stepClassnames.active} {
-      & .${constants_4.stepClassnames.label} {
+  & .${constants_5.stepClassnames.content} {
+    &.${constants_5.stepClassnames.active} {
+      & .${constants_5.stepClassnames.label} {
         color: ${({ theme }) => theme.palette.grey[900]};
       }
 
-      & .${constants_3.stepIconClassnames.root} {
+      & .${constants_4.stepIconClassnames.root} {
         color: ${({ theme }) => theme.palette.primary[800]};
 
-        &.${constants_3.stepIconClassnames.success} {
+        &.${constants_4.stepIconClassnames.success} {
           color: ${({ theme }) => theme.palette.success[800]};
         }
 
-        &.${constants_3.stepIconClassnames.error} {
+        &.${constants_4.stepIconClassnames.error} {
           color: ${({ theme }) => theme.palette.error[800]};
         }
 
-        &.${constants_3.stepIconClassnames.warning} {
+        &.${constants_4.stepIconClassnames.warning} {
           color: ${({ theme }) => theme.palette.warning[800]};
         }
       }
@@ -145,8 +146,8 @@ exports.Wrapper = styled_1.styled.div `
   }
 
   ${({ theme }) => theme.breakpoints.down('mobile')} {
-    &.${constants_4.stepClassnames.connectorArrow} {
-      & .${constants_4.stepClassnames.content} {
+    &.${constants_5.stepClassnames.connectorArrow} {
+      & .${constants_5.stepClassnames.content} {
         padding: ${({ theme }) => theme.spacing(2, 0)};
       }
     }
@@ -155,7 +156,7 @@ exports.Wrapper = styled_1.styled.div `
 exports.IconWrapper = styled_1.styled.div `
   display: flex;
 
-  & .${constants_3.stepIconClassnames.root} {
+  & .${constants_4.stepIconClassnames.root} {
     width: 20px;
     height: 20px;
 
@@ -165,19 +166,19 @@ exports.IconWrapper = styled_1.styled.div `
     duration: theme.transitions.duration.shorter,
 })};
 
-    &.${constants_3.stepIconClassnames.active} {
+    &.${constants_4.stepIconClassnames.active} {
       color: ${({ theme }) => theme.palette.primary[800]};
     }
 
-    &.${constants_3.stepIconClassnames.success} {
+    &.${constants_4.stepIconClassnames.success} {
       color: ${({ theme }) => theme.palette.success[800]};
     }
 
-    &.${constants_3.stepIconClassnames.error} {
+    &.${constants_4.stepIconClassnames.error} {
       color: ${({ theme }) => theme.palette.error[800]};
     }
 
-    &.${constants_3.stepIconClassnames.warning} {
+    &.${constants_4.stepIconClassnames.warning} {
       color: ${({ theme }) => theme.palette.warning[800]};
     }
 
@@ -205,14 +206,14 @@ exports.LineConnector = styled_1.styled.div `
 
   border-top: 2px solid ${({ theme }) => theme.palette.components.border.default};
 
-  &.${constants_4.stepClassnames.alternativeLabel} {
+  &.${constants_5.stepClassnames.alternativeLabel} {
     position: absolute;
     top: 15px;
     right: calc(50% + 14px);
     left: calc(-50% + 14px);
   }
 
-  &.${constants_4.stepClassnames.orientationVertical} {
+  &.${constants_5.stepClassnames.orientationVertical} {
     min-height: 16px;
 
     /* Смещение необходимо для центрирования линии относительно иконки, т.к. линия шириной 2px, то для выравнивания необходимо число не кратное 2ум  */
@@ -233,7 +234,7 @@ exports.LabelWrapper = styled_1.styled.div `
 
   color: ${({ theme }) => theme.palette.grey[700]};
 
-  & .${constants_1.typographyClassnames.root} {
+  & .${constants_2.typographyClassnames.root} {
     transition: ${({ theme }) => theme.transitions.create(['color'], {
     duration: theme.transitions.duration.shorter,
 })};
@@ -274,48 +275,50 @@ exports.StyledButton = (0, styled_1.styled)(Button_1.Button) `
     height: auto;
   }
 
-  &:hover {
-    background: transparent;
+  ${constants_1.HOVER_MEDIA} {
+    &:hover {
+      background: transparent;
 
-    & .${constants_4.stepClassnames.label} {
-      color: ${({ theme }) => theme.palette.grey[700]};
-    }
+      & .${constants_5.stepClassnames.label} {
+        color: ${({ theme }) => theme.palette.grey[700]};
+      }
 
-    & .${constants_3.stepIconClassnames.root} {
-      color: ${({ theme }) => theme.palette.primary[700]};
+      & .${constants_4.stepIconClassnames.root} {
+        color: ${({ theme }) => theme.palette.primary[700]};
 
-      &.${constants_3.stepIconClassnames.success} {
-        color: ${({ theme }) => theme.palette.success[700]};
-      }
+        &.${constants_4.stepIconClassnames.success} {
+          color: ${({ theme }) => theme.palette.success[700]};
+        }
 
-      &.${constants_3.stepIconClassnames.error} {
-        color: ${({ theme }) => theme.palette.error[700]};
-      }
+        &.${constants_4.stepIconClassnames.error} {
+          color: ${({ theme }) => theme.palette.error[700]};
+        }
 
-      &.${constants_3.stepIconClassnames.warning} {
-        color: ${({ theme }) => theme.palette.warning[700]};
+        &.${constants_4.stepIconClassnames.warning} {
+          color: ${({ theme }) => theme.palette.warning[700]};
+        }
       }
     }
   }
 
   &:active {
     background: transparent;
-    & .${constants_4.stepClassnames.label} {
+    & .${constants_5.stepClassnames.label} {
       color: ${({ theme }) => theme.palette.grey[900]};
     }
 
-    & .${constants_3.stepIconClassnames.root} {
+    & .${constants_4.stepIconClassnames.root} {
       color: ${({ theme }) => theme.palette.primary[800]};
 
-      &.${constants_3.stepIconClassnames.success} {
+      &.${constants_4.stepIconClassnames.success} {
         color: ${({ theme }) => theme.palette.success[800]};
       }
 
-      &.${constants_3.stepIconClassnames.error} {
+      &.${constants_4.stepIconClassnames.error} {
         color: ${({ theme }) => theme.palette.error[800]};
       }
 
-      &.${constants_3.stepIconClassnames.warning} {
+      &.${constants_4.stepIconClassnames.warning} {
         color: ${({ theme }) => theme.palette.warning[700]};
       }
     }