@astral/ui 4.100.0 → 4.102.0

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]};
       }
     }

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