@astral/ui 4.99.2 → 4.101.0

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

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

@@ -11,7 +11,7 @@ export const StyledSkeleton = styled(Skeleton) `
   width: 200px;
   height: 20px;
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     width: 100%;
   }
 `;

package/components/PageContent/PageContentHeader/styles.js

@@ -10,7 +10,7 @@ export const Wrapper = styled.header `
 
   border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     gap: ${({ theme }) => theme.spacing(5)};
 
     height: 48px;
@@ -25,7 +25,7 @@ export const TitleBlock = styled.div `
   display: flex;
   flex-direction: column;
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     width: 100%;
 
     & .${pageContentHeaderClassnames.description} {

package/components/PageContent/styles.js

@@ -18,7 +18,7 @@ export const Wrapper = styled('article', {
     ? `1px solid ${theme.palette.components.border.default}`
     : 'none'};
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     overflow: unset;
     flex-grow: 1;
     order: 4;
@@ -73,7 +73,7 @@ export const Content = styled.div `
     }
   }
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     scrollbar-gutter: unset;
 
     overflow: hidden;
@@ -112,14 +112,14 @@ export const Content = styled.div `
 
     padding-right: 0;
 
-    ${({ theme }) => theme.breakpoints.down('sm')} {
+    ${({ theme }) => theme.breakpoints.down('mobile')} {
       scrollbar-gutter: auto;
 
       padding: ${({ theme }) => theme.spacing(4, 4, 3)};
     }
   }
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     &&.${pageContentClassnames.withPdfViewer} {
       margin: 0;
       padding-top: 0;

package/components/PageHeader/HeaderContent/Description/styles.js

@@ -7,7 +7,7 @@ export const StyledTypography = styled(Typography) `
 
   padding-top: ${({ theme }) => theme.spacing(1)};
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     display: none;
   }
 `;
@@ -17,7 +17,7 @@ export const StyledSkeleton = styled(Skeleton) `
 
   margin: ${({ theme }) => theme.spacing(1, 0)};
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     display: none;
   }
 `;

package/components/PageHeader/HeaderContent/styles.js

@@ -10,7 +10,7 @@ export const BreadcrumbsWrapper = styled.div `
     display: none;
   }
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     display: none;
   }
 `;
@@ -24,7 +24,7 @@ export const TabsWrapper = styled.div `
     display: none;
   }
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     padding: ${({ theme }) => theme.spacing(0, 0, 4, 0)};
 
     .${tabsClassnames.root} {
@@ -42,14 +42,14 @@ export const PageSubheader = styled.div `
     display: none;
   }
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     padding: ${({ theme }) => theme.spacing(0, 4, 4, 4)};
   }
 `;
 export const DesktopTitleWrapper = styled.div `
   display: contents;
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     display: none;
 
     min-height: 48px;

package/components/PageHeader/MobilePageActions/styles.js

@@ -6,7 +6,7 @@ import { MainActions } from '../PageActions';
 export const Wrapper = styled.div `
   display: none;
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     position: sticky;
     z-index: ${({ theme }) => theme.zIndex.speedDial};
     bottom: 0;
@@ -31,7 +31,7 @@ export const Wrapper = styled.div `
   }
 `;
 export const ShowMoreButton = styled(Button) `
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     display: flex;
 
     height: 40px;
@@ -62,7 +62,7 @@ export const SecondaryActionsWrapper = styled('div') `
 export const StyledMainActions = styled(MainActions, {
     shouldForwardProp: (prop) => !['$isVisibleShowMoreButton'].includes(prop),
 }) `
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     padding-bottom: ${({ theme, $isVisibleShowMoreButton }) => $isVisibleShowMoreButton ? theme.spacing(2) : 0};
   }
 `;

package/components/PageHeader/PageActions/MainActions/styles.js

@@ -5,7 +5,7 @@ export const Wrapper = styled.div `
   display: flex;
   gap: ${({ theme, $spacing }) => theme.spacing($spacing)};
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     flex-wrap: wrap;
     gap: ${({ theme }) => theme.spacing(2)};
     order: -1;

package/components/PageHeader/PageActions/SecondaryActions/styles.js

@@ -6,14 +6,14 @@ export const StyledMobileButton = styled(Button) `
 
   width: 100%;
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     display: flex;
   }
 `;
 export const StyledSecondaryActions = styled(SecondaryActions) `
   display: flex;
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     display: none;
   }
 `;

package/components/PageHeader/PageActions/SecondaryVisibleActions/styles.js

@@ -5,14 +5,14 @@ export const StyledMobileButton = styled(Button) `
   display: none;
   flex-grow: 1;
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     display: flex;
   }
 `;
 export const StyledSecondaryVisibleActions = styled(SecondaryVisibleActions) `
   display: flex;
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     display: none;
   }
 `;

package/components/PageHeader/PageActions/styles.js

@@ -11,7 +11,7 @@ export const Wrapper = styled.div `
     grid-column: 4;
   }
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     display: none;
   }
 `;
@@ -36,7 +36,7 @@ export const SecondaryVisibleWrapper = styled('div') `
     }
   }
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     gap: ${({ theme }) => theme.spacing(2)};
   }
 `;
@@ -51,7 +51,7 @@ export const CollapsedActionsWrapper = styled.div `
     }
   }
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     display: none;
   }
 `;
@@ -60,7 +60,7 @@ export const ActionWrapper = styled.div `
   flex-direction: row-reverse;
   gap: ${({ theme, $spacing }) => theme.spacing($spacing)};
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     gap: ${({ theme }) => theme.spacing(2)};
   }
 `;

package/components/PageHeader/Title/styles.js

@@ -26,7 +26,7 @@ export const TitleWrapper = styled(Typography, {
 
   line-height: ${({ theme }) => theme.typography.h2.lineHeight};
   
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     font-size: ${({ theme }) => theme.typography.h5.fontSize};
     line-height: ${({ theme }) => theme.typography.h5.lineHeight};
     white-space: nowrap;
@@ -38,7 +38,7 @@ export const BackButton = styled(IconButton) `
 
   margin-right: ${({ theme }) => theme.spacing(3)};
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     margin-right: ${({ theme }) => theme.spacing(1)};
     
     border: unset;

package/components/PageHeader/styles.js

@@ -19,7 +19,7 @@ export const Wrapper = styled.header `
     }
   }
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     position: sticky;
     z-index: ${({ theme }) => theme.zIndex.fab};
     top: ${PAGE_HEADER_HEIGHT_MOBILE};
@@ -68,7 +68,7 @@ export const Wrapper = styled.header `
       margin-top: ${({ theme }) => theme.spacing(3)};
     }
 
-    ${({ theme }) => theme.breakpoints.down('sm')} {
+    ${({ theme }) => theme.breakpoints.down('mobile')} {
       display: none;
     }
   }
@@ -76,7 +76,7 @@ export const Wrapper = styled.header `
 export const MobileTitleWrapper = styled.div `
   display: none;
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     position: sticky;
     z-index: ${({ theme }) => theme.zIndex.fab};
     top: 0;

package/components/PageLayout/styles.js

@@ -2,7 +2,7 @@ import { alertClassnames } from '../Alert';
 import { styled } from '../styled';
 export const MobileAlertWrapper = styled.div `
   display: none;
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     display: flex;
     flex-direction: column;
     gap: ${({ theme }) => theme.spacing(2)};
@@ -33,12 +33,12 @@ export const DesktopAlertWrapper = styled.div `
     margin-bottom: ${({ theme }) => theme.spacing(4)};
   }
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     display: none;
   }
 `;
 export const LoaderWrapper = styled.div `
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     order: 4;
 
     height: 100%;