@astral/ui 4.99.2 → 4.100.0

package/components/InfiniteDataList/styles.js

@@ -19,7 +19,7 @@ export const Item = styled.li `
       background-color: ${({ theme }) => theme.palette.background.element};
     }
 
-    ${({ theme }) => theme.breakpoints.down('sm')} {
+    ${({ theme }) => theme.breakpoints.down('mobile')} {
       padding: ${({ theme }) => theme.spacing(5, 4)};
 
       border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};

package/components/InfiniteTreeList/ErrorMessage/styles.js

@@ -8,7 +8,7 @@ export const Wrapper = styled.div `
 
   padding: ${({ theme }) => theme.spacing(2, 0)};
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     gap: ${({ theme }) => theme.spacing(4)};
     justify-items: normal;
 

package/components/MenuOrganization/NoData/styles.js

@@ -7,7 +7,7 @@ export const Wrapper = styled.div `
 
   height: ${PLACEHOLDER_HEIGHT};
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     height: 100%;
   }
 `;

package/components/MenuOrganization/OrganizationButton/styles.js

@@ -23,7 +23,7 @@ export const StyledButton = styled(Button) `
     background-color: ${({ theme }) => theme.palette.primary[100]};
   }
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     justify-content: space-between;
 
     width: 100%;

package/components/MenuOrganization/OrganizationItem/styles.js

@@ -8,7 +8,7 @@ export const StyledMenuItem = styled(MenuItem) `
 
   padding: ${({ theme }) => theme.microSpacing(3, 6)};
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     padding: ${({ theme }) => theme.microSpacing(5, 6)};
 
     &.${menuItemClasses.selected} {

package/components/MenuOrganization/OrganizationListSkeleton/styles.js

@@ -7,7 +7,7 @@ export const Item = styled.div `
   width: 100%;
   padding: ${({ theme }) => theme.spacing(0, 2)};
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     gap: ${({ theme }) => theme.spacing(3)};
 
     padding: ${({ theme }) => theme.spacing(3)};
@@ -22,7 +22,7 @@ export const Wrapper = styled.div `
   width: 100%;
   padding: ${({ theme }) => theme.microSpacing(5, 0)};
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     gap: ${({ theme }) => theme.spacing(2)};
 
     padding: 0;

package/components/MenuOrganization/styles.js

@@ -12,7 +12,7 @@ export const ActionWrapper = styled.div `
 
   border-top: 1px solid ${({ theme }) => theme.palette.components.border.default};
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     padding: ${({ theme }) => theme.spacing(4)};
   }
 `;
@@ -22,7 +22,7 @@ export const SearchWrapper = styled.div `
 
   border-bottom: ${({ theme }) => `1px solid ${theme.palette.components.border.default}`};
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     max-width: unset;
     padding: ${({ theme }) => theme.spacing(3, 4)};
   }
@@ -45,7 +45,7 @@ export const OrganizationsWrapper = styled.div `
     height: ${PLACEHOLDER_HEIGHT};
   }
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     width: 100%;
     height: 100%;
     max-height: unset;
@@ -81,7 +81,7 @@ export const StyledTypography = styled(Typography) `
 `;
 export const StyledPopover = styled(Popover) `
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     & .${bottomDrawerClassnames.content} {
       display: flex;
       flex-direction: column;

package/components/MinimalisticPagination/styles.js

@@ -21,7 +21,7 @@ export const PaginationWrapper = styled.nav `
     opacity: 0.3;
   }
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     justify-content: flex-end;
 
     width: 100%;

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

@@ -65,7 +65,7 @@ export const StyledListItemButton = styled(ListItemButton) `
     outline-offset: -2px;
   }
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     overflow: hidden;
 
     min-height: 48px;
@@ -91,7 +91,7 @@ export const NavMenuItemButtonIcon = styled(ListItemIcon) `
 export const NavMenuItemButtonText = styled(OverflowTypography) `
   margin-left: ${({ theme }) => theme.spacing(3)};
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     width: auto;
     margin-left: 0;
   }
@@ -113,7 +113,7 @@ export const NavMenuItemButtonChevron = styled(ChevronDOutlineMd, {
     });
 }};
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     width: 24px;
     height: 24px;
   }
@@ -126,7 +126,7 @@ export const EndAdornmentWrapper = styled.div `
   margin-left: auto;
 `;
 export const StyledPageDotOutlineMd = styled(PageDotOutlineMd) `
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     width: 24px;
     height: 24px;
   }

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

@@ -10,7 +10,7 @@ export const StyledTypography = styled(Typography) `
 
   border-left: 2px solid ${({ theme }) => theme.palette.components.border.default};
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     margin-bottom: 0;
     margin-left: 11px;
     padding-left: 15px;

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

@@ -4,7 +4,7 @@ import { STEPPER_ORDER_COUNTER_NAME } from '../../constants';
 export const MobileLabelGroup = styled.div `
   display: none;
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     display: flex;
     align-items: center;
   }
@@ -17,7 +17,7 @@ export const MobileCompactLabel = styled(Typography) `
   }
 `;
 export const DesktopLabel = styled(Typography) `
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     display: none;
   }
 `;

package/components/NewStepper/Step/styles.js

@@ -87,7 +87,7 @@ export const Wrapper = styled.div `
 
           border-left: none;
 
-          ${({ theme }) => theme.breakpoints.down('sm')} {
+          ${({ theme }) => theme.breakpoints.down('mobile')} {
             padding-left: ${({ theme }) => theme.spacing(7)};
           }
         }
@@ -141,7 +141,7 @@ export const Wrapper = styled.div `
     }
   }
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     &.${stepClassnames.connectorArrow} {
       & .${stepClassnames.content} {
         padding: ${({ theme }) => theme.spacing(2, 0)};
@@ -178,7 +178,7 @@ export const IconWrapper = styled.div `
       color: ${({ theme }) => theme.palette.warning[800]};
     }
 
-    ${({ theme }) => theme.breakpoints.down('sm')} {
+    ${({ theme }) => theme.breakpoints.down('mobile')} {
       width: 24px;
       height: 24px;
     }
@@ -190,7 +190,7 @@ export const ArrowConnector = styled(NextOutlineMd) `
 
   color: ${({ theme }) => theme.palette.grey[400]};
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     width: 24px;
     height: 24px;
   }
@@ -218,7 +218,7 @@ export const LineConnector = styled.div `
     border-top: unset;
     border-left: 2px solid ${({ theme }) => theme.palette.components.border.default};
 
-    ${({ theme }) => theme.breakpoints.down('sm')} {
+    ${({ theme }) => theme.breakpoints.down('mobile')} {
       margin-left: 11px;
     }
   }
@@ -236,7 +236,7 @@ export const LabelWrapper = styled.div `
 })};
   }
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     white-space: nowrap;
   }
 `;
@@ -245,7 +245,7 @@ export const StepContentWrapper = styled.div `
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(1)};
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     gap: ${({ theme }) => theme.microSpacing(1)};
   }
 `;
@@ -265,7 +265,7 @@ export const StyledButton = styled(Button) `
   background: transparent;
   border: 0;
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     gap: ${({ theme }) => theme.microSpacing(1)};
 
     height: auto;

package/components/NewStepper/styles.js

@@ -28,7 +28,7 @@ export const Wrapper = styled.div `
     }
   }
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     /* Убираем видимую полосу прокрутки в firefox */
     scrollbar-width: none;
 

package/components/NotFoundPage/styles.js

@@ -13,7 +13,7 @@ export const Wrapper = styled.div `
   text-align: center;
 `;
 export const Header = styled(Typography) `
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     font-size: ${({ theme }) => theme.typography.h4.fontSize};
     line-height: ${({ theme }) => theme.typography.h4.lineHeight};
   }
@@ -21,7 +21,7 @@ export const Header = styled(Typography) `
 export const Subheader = styled(Typography) `
   margin-top: ${({ theme }) => theme.spacing(-2)};
   margin-bottom: ${({ theme }) => theme.spacing(2)};
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     font-size: ${({ theme }) => theme.typography.subtitle1.fontSize};
     line-height: ${({ theme }) => theme.typography.subtitle1.lineHeight};
   }
@@ -30,13 +30,13 @@ export const Image = styled.img `
   width: 500px;
   height: 232px;
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     width: 326px;
     height: 166px;
   }
 `;
 export const StyledPageContent = styled(PageContent) `
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     margin-top: ${({ theme }) => theme.spacing(4)};
   }
 `;

package/components/Notification/NotificationContainer/styles.js

@@ -35,7 +35,7 @@ const leaveInMobile = keyframes `
 export const Wrapper = styled('div', {
     shouldForwardProp: (prop) => !['$isBanner'].includes(prop),
 }) `
-  ${({ theme }) => theme.breakpoints.up('sm')} {
+  ${({ theme }) => theme.breakpoints.up('mobile')} {
     ${({ $isBanner, theme }) => $isBanner &&
     `
         position: fixed;
@@ -47,7 +47,7 @@ export const Wrapper = styled('div', {
   }
 
   .Toastify__toast-container {
-    ${({ theme }) => theme.breakpoints.down('sm')} {
+    ${({ theme }) => theme.breakpoints.down('mobile')} {
       padding: ${({ theme }) => theme.spacing(4)};
     }
   }
@@ -56,7 +56,7 @@ export const Wrapper = styled('div', {
     animation: ${leaveIn} ease-in-out ${({ theme }) => theme.transitions.duration.standard}ms;
     animation-fill-mode: both;
 
-    ${({ theme }) => theme.breakpoints.down('sm')} {
+    ${({ theme }) => theme.breakpoints.down('mobile')} {
       animation: ${leaveInMobile} ease-in-out ${({ theme }) => theme.transitions.duration.standard}ms;
       animation-fill-mode: both;
     }
@@ -86,14 +86,14 @@ export const Wrapper = styled('div', {
       width: 100%;
       height: 3px;
     }
-      ${({ theme }) => theme.breakpoints.up('sm')} {
+      ${({ theme }) => theme.breakpoints.up('mobile')} {
       min-height: ${NOTIFY_HEIGHT};
     }
-    ${({ theme }) => theme.breakpoints.down('sm')} {
+    ${({ theme }) => theme.breakpoints.down('mobile')} {
       min-height: ${NOTIFY_HEIGHT_MOBILE};
     }
 
-    ${({ theme }) => theme.breakpoints.down('sm')} {
+    ${({ theme }) => theme.breakpoints.down('mobile')} {
       margin-bottom: ${({ theme }) => theme.spacing(3)};
     }
 
@@ -137,7 +137,7 @@ export const Inner = styled(ToastContainer, {
     shouldForwardProp: (prop) => !['$isBanner'].includes(prop),
 }) `
   min-width: 400px;
-  ${({ theme }) => theme.breakpoints.up('sm')} {
+  ${({ theme }) => theme.breakpoints.up('mobile')} {
     ${({ $isBanner, theme }) => $isBanner &&
     `
         position: relative !important;
@@ -150,7 +150,7 @@ export const Inner = styled(ToastContainer, {
       `}
   }
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     width: 100%;
     min-width: unset;
     max-width: unset;

package/components/Notification/NotificationStackContainer/styles.js

@@ -54,7 +54,7 @@ export const Wrapper = styled.div `
 
   width: 432px;
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     inset: 0 0 auto;
 
     width: 100%;
@@ -80,13 +80,13 @@ export const Wrapper = styled.div `
     }
     /* stylelint-enable plugin/no-unsupported-browser-features */
 
-    ${({ theme }) => theme.breakpoints.up('sm')} {
+    ${({ theme }) => theme.breakpoints.up('mobile')} {
       .${notifyClassnames.stackHost} .Toastify {
         overflow: hidden;
       }
     }
 
-    ${({ theme }) => theme.breakpoints.down('sm')} {
+    ${({ theme }) => theme.breakpoints.down('mobile')} {
       justify-content: flex-start;
 
       height: auto;
@@ -189,10 +189,10 @@ export const Wrapper = styled.div `
       width: 100%;
       height: 3px;
     }
-    ${({ theme }) => theme.breakpoints.up('sm')} {
+    ${({ theme }) => theme.breakpoints.up('mobile')} {
       min-height: ${NOTIFY_HEIGHT};
     }
-    ${({ theme }) => theme.breakpoints.down('sm')} {
+    ${({ theme }) => theme.breakpoints.down('mobile')} {
       min-height: ${NOTIFY_HEIGHT_MOBILE};
     }
 
@@ -242,7 +242,7 @@ export const Wrapper = styled.div `
   }
 
   /* Стили для уведомлений в стеке */
-  ${({ theme }) => theme.breakpoints.up('sm')} { 
+  ${({ theme }) => theme.breakpoints.up('mobile')} { 
     .${notifyClassnames.stack} .${notifyClassnames.root} {
       position: relative;
       transform: scale(var(--s));
@@ -278,7 +278,7 @@ export const Wrapper = styled.div `
   }
 
   /* Мобильный стек в свёрнутом виде: последний в DOM (самый новый) — сверху; остальные без участия в раскладке */
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     &:not(.${notifyClassnames.container}) {
       .${notifyClassnames.stack} {
         position: relative;
@@ -410,7 +410,7 @@ export const Inner = styled(ToastContainer) `
   }
 
   /* Только устройства с реальным hover и ≥sm — иначе на touch :hover залипает и ломает мобильный стек */
-  ${({ theme }) => theme.breakpoints.up('sm')} {
+  ${({ theme }) => theme.breakpoints.up('mobile')} {
     @media (hover: hover) and (pointer: fine) {
       &:hover {
         overflow: hidden auto;
@@ -444,7 +444,7 @@ export const Inner = styled(ToastContainer) `
     }
   }
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     min-width: unset;
     max-width: 100%;
     padding-right: ${({ theme }) => theme.spacing(2)} !important;
@@ -493,7 +493,7 @@ export const CloseButton = styled(Button) `
     opacity: 0;
   }
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     width: calc(100% - ${({ theme }) => theme.spacing(4)});
     margin: ${({ theme }) => theme.spacing(0, 5, 2, 5)};
   }

package/components/Notification/NotificationTemplate/styles.js

@@ -18,7 +18,7 @@ export const Wrapper = styled.article `
 
   background: ${({ theme }) => theme.palette.background.default};
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     padding: ${({ theme }) => theme.spacing(2, 3)};
   }
 `;
@@ -29,7 +29,7 @@ export const Header = styled.header `
   width: 100%;
   min-height: 24px;
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     .${buttonClassnames.root} {
       width: 24px;
       height: 24px;
@@ -52,7 +52,7 @@ export const IconWrapper = styled.div `
 
   margin-right: ${({ theme }) => theme.spacing(2)};
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     .${svgIconClassnames.root} {
       width: 24px;
       height: 24px;

package/components/NotificationList/ListItem/styles.js

@@ -40,7 +40,7 @@ export const Wrapper = styled.li `
     background-color: ${({ theme }) => theme.palette.grey[300]};
   }
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     grid-template-columns: 8px 1fr;
 
     padding: ${({ theme }) => theme.spacing(4)};

package/components/NotificationList/SettingsButton/styles.js

@@ -8,7 +8,7 @@ export const Wrapper = styled.div `
   margin-right: ${({ theme }) => theme.spacing(1)};
 `;
 export const StyledDivider = styled(Divider) `
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     display: none;
   }
 `;

package/components/NotificationList/styles.js

@@ -17,7 +17,7 @@ export const TabsWrapper = styled(SideDialogContent) `
   max-height: 50px;
   padding: ${({ theme }) => theme.spacing(3, 6, 0)};
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     min-height: unset;
     max-height: unset;
     padding: ${({ theme }) => theme.spacing(3, 4, 0)};
@@ -30,12 +30,12 @@ export const ContentWrapper = styled(SideDialogContent) `
   padding-right: ${({ theme }) => `calc(${theme.spacing(6)} - ${SCROLLBAR_SIZE})`};
   padding-bottom: ${({ theme }) => theme.spacing(1)};
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     padding: ${({ theme }) => theme.spacing(0)};
   }
 `;
 export const StyledSideDialogActions = styled(SideDialogActions) `
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     border-top-left-radius: ${({ theme }) => theme.shape.large};
     border-top-right-radius: ${({ theme }) => theme.shape.large};
 
@@ -48,7 +48,7 @@ export const StyledSideDialogActions = styled(SideDialogActions) `
   }
 `;
 export const StyledSideDialog = styled(SideDialog) `
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     & .${drawerClasses.paper} {
       height: calc(100vh - ${OFFSET_TOP_SCREEN});
 

package/components/PageAside/MobileAsideButton/styles.js

@@ -6,7 +6,7 @@ import { styled } from '../../styled';
 export const StyledButton = styled(Button) `
   display: none;
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     display: flex;
     order: 3;
 

package/components/PageAside/styles.js

@@ -23,14 +23,14 @@ export const Wrapper = styled.aside `
     padding: ${({ theme }) => theme.spacing(4)};
   }
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     display: none;
   }
 `;
 export const MobileAsideHeader = styled.div `
   display: none;
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     display: block;
     order: 3;
 
@@ -52,7 +52,7 @@ export const StyledDivider = styled(Divider) `
 export const MobileAsideNavigation = styled.div `
   display: none;
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     display: block;
   }
 `;

package/components/PageAsideBlock/styles.js

@@ -18,7 +18,7 @@ export const Wrapper = styled.div `
     }
   }
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     padding: ${({ theme }) => theme.spacing(4, 0)};
 
     :first-of-type {
@@ -43,7 +43,7 @@ export const StyledDivider = styled(Divider, {
     width: ${({ $isFullWidth, theme }) => ($isFullWidth ? `calc(100% + ${theme.spacing(10)})` : '100%')};
   }
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     left: ${({ $isFullWidth, theme }) => $isFullWidth ? `${theme.spacing(-4)}` : '0'};
 
     width: ${({ $isFullWidth, theme }) => $isFullWidth ? `calc(100% + ${theme.spacing(8)})` : '100%'};

package/components/PageAsideNavigation/PageAsideNavigationItem/styles.js

@@ -58,7 +58,7 @@ export const Wrapper = styled.li `
   }
 
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     height: 40px;
     -webkit-tap-highlight-color: transparent;
     
@@ -107,7 +107,7 @@ export const IconWrapper = styled.div `
     height: 20px;
   }
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     display: none;
   }
 `;

package/components/PageAsideNavigation/styles.js

@@ -4,7 +4,7 @@ export const Wrapper = styled.div `
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(10)};
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     gap: ${({ theme }) => theme.spacing(3)};
 
     width: 100%;
@@ -24,7 +24,7 @@ export const NavigationList = styled.ul `
 
   list-style: none;
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     /* Убираем видимую полосу прокрутки в firefox */
     scrollbar-width: none;
 
@@ -42,7 +42,7 @@ export const NavigationList = styled.ul `
   }
 `;
 export const AddonNavigationWrapper = styled.div `
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     padding: ${({ theme }) => theme.spacing(0, 4)};
   }
 `;

package/components/PageContent/PageContentHeader/Description/styles.js

@@ -4,7 +4,7 @@ export const SkeletonWrapper = styled.div `
 
   padding: ${({ theme }) => theme.spacing(1, 0)};
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     display: none;
   }
 `;

package/components/PageContent/PageContentHeader/PageContentHeaderActions/MobilePageContentHeaderActions/styles.js

@@ -16,7 +16,7 @@ export const AddonInfoWrapper = styled.div `
   gap: ${({ theme }) => theme.spacing(3)};
 `;
 export const StyledIconButton = styled(IconButton) `
-  ${({ theme }) => theme.breakpoints.up('sm')} {
+  ${({ theme }) => theme.breakpoints.up('mobile')} {
     display: none;
   }
 `;
@@ -30,12 +30,12 @@ export const ActionsWrapper = styled.div `
   }
 `;
 export const StyledMainActions = styled(MainActions) `
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     padding-bottom: 0;
   }
 `;
 export const StyledSkeleton = styled(Skeleton) `
-  ${({ theme }) => theme.breakpoints.up('sm')} {
+  ${({ theme }) => theme.breakpoints.up('mobile')} {
     display: none;
   }
 `;

package/components/PageContent/PageContentHeader/PageContentHeaderActions/PageContentHeaderActionsSkeleton/styles.js

@@ -6,7 +6,7 @@ export const StyledSkeleton = styled(Skeleton) `
   width: 180px;
   height: 32px;
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     width: 40px;
     height: 40px;
   }