@astral/ui 4.99.2 → 4.101.0

package/components/InfiniteTreeList/utils/getIdsToKeep/index.d.ts

@@ -0,0 +1 @@
+export * from './getIdsToKeep';

package/components/InfiniteTreeList/utils/getIdsToKeep/index.js

@@ -0,0 +1 @@
+export * from './getIdsToKeep';

package/components/InfiniteTreeList/{useLogic/utils → utils}/getInitialExpandedIds/getInitialExpandedIds.d.ts

@@ -1,5 +1,7 @@
-import type { InfiniteTreeListData } from '../../../types';
+import type { InfiniteTreeListData } from '../../types';
 /**
- * Получает начальный набор раскрытых узлов
+ * Получает начальный набор раскрытых узлов.
+ * Узел с подгружаемыми дочерними элементами раскрывается наравне
+ * со статической веткой
  */
 export declare const getInitialExpandedIds: <TData extends InfiniteTreeListData<TData>>(prev: Set<string>, items: TData[], initialExpandedLevel?: number, currentLevel?: number) => Set<string>;

package/components/InfiniteTreeList/{useLogic/utils → utils}/getInitialExpandedIds/getInitialExpandedIds.js

@@ -1,19 +1,20 @@
 /**
- * Получает начальный набор раскрытых узлов
+ * Получает начальный набор раскрытых узлов.
+ * Узел с подгружаемыми дочерними элементами раскрывается наравне
+ * со статической веткой
  */
 export const getInitialExpandedIds = (prev, items, initialExpandedLevel, currentLevel = 0) => {
     const expandedIds = new Set(prev);
-    // Более точная проверка
     if (initialExpandedLevel === undefined) {
         return expandedIds;
     }
     const shouldExpand = currentLevel < initialExpandedLevel;
     items.forEach((item) => {
-        if (shouldExpand && item.children) {
+        const hasNested = Boolean(item.children) || item.hasChildren === true;
+        if (shouldExpand && hasNested) {
             if (!prev?.has(item.id)) {
                 expandedIds.add(item.id);
             }
-            // Рекурсивно обрабатываем существующих детей
             if (item.children?.length) {
                 const childExpandedIds = getInitialExpandedIds(prev, item.children, initialExpandedLevel, currentLevel + 1);
                 childExpandedIds.forEach((id) => expandedIds.add(id));

package/components/InfiniteTreeList/utils/getNestedItems/getNestedItems.d.ts

@@ -0,0 +1,6 @@
+import type { FlattenTree, InfiniteTreeListData } from '../../types';
+/**
+ * Собирает вложенные строки узла из плоского списка.
+ * Свёрнутых веток в списке нет
+ */
+export declare const getNestedItems: <TData extends InfiniteTreeListData<TData>>(flatList: FlattenTree<TData>[], parentId: string) => FlattenTree<TData>[];

package/components/InfiniteTreeList/utils/getNestedItems/getNestedItems.js

@@ -0,0 +1,18 @@
+/**
+ * Собирает вложенные строки узла из плоского списка.
+ * Свёрнутых веток в списке нет
+ */
+export const getNestedItems = (flatList, parentId) => {
+    const result = [];
+    const collectChildren = (id) => {
+        const children = flatList.filter((item) => item.meta.parentId === id);
+        children.forEach((child) => {
+            result.push(child);
+            if (child.meta.isExpanded) {
+                collectChildren(child.id);
+            }
+        });
+    };
+    collectChildren(parentId);
+    return result;
+};

package/components/InfiniteTreeList/utils/getNestedItems/index.d.ts

@@ -0,0 +1 @@
+export * from './getNestedItems';

package/components/InfiniteTreeList/utils/getNestedItems/index.js

@@ -0,0 +1 @@
+export * from './getNestedItems';

package/components/InfiniteTreeList/utils/index.d.ts

@@ -0,0 +1,20 @@
+export * from './checkHasSkeletonPlaceholders';
+export * from './checkIsChildrenPlaceholder';
+export * from './checkIsChildrenPlaceholderOf';
+export * from './checkIsDirectChild';
+export * from './checkIsNoDataChildren';
+export * from './checkIsSameChildren';
+export * from './countDirectChildren';
+export * from './createParentSlots';
+export * from './createTailRegistry';
+export * from './flattenChildren';
+export * from './flattenTree';
+export * from './getEnteringChildren';
+export * from './getIdsToKeep';
+export * from './getInitialExpandedIds';
+export * from './getNestedItems';
+export * from './insertChildren';
+export * from './removeChildren';
+export * from './sortCollapsed';
+export * from './startRemoveAnimation';
+export * from './syncChildrenPlaceholders';

package/components/InfiniteTreeList/utils/index.js

@@ -0,0 +1,20 @@
+export * from './checkHasSkeletonPlaceholders';
+export * from './checkIsChildrenPlaceholder';
+export * from './checkIsChildrenPlaceholderOf';
+export * from './checkIsDirectChild';
+export * from './checkIsNoDataChildren';
+export * from './checkIsSameChildren';
+export * from './countDirectChildren';
+export * from './createParentSlots';
+export * from './createTailRegistry';
+export * from './flattenChildren';
+export * from './flattenTree';
+export * from './getEnteringChildren';
+export * from './getIdsToKeep';
+export * from './getInitialExpandedIds';
+export * from './getNestedItems';
+export * from './insertChildren';
+export * from './removeChildren';
+export * from './sortCollapsed';
+export * from './startRemoveAnimation';
+export * from './syncChildrenPlaceholders';

package/components/InfiniteTreeList/utils/insertChildren/index.d.ts

@@ -0,0 +1 @@
+export * from './insertChildren';

package/components/InfiniteTreeList/utils/insertChildren/index.js

@@ -0,0 +1 @@
+export * from './insertChildren';

package/components/InfiniteTreeList/utils/insertChildren/insertChildren.d.ts

@@ -0,0 +1,5 @@
+import type { FlattenTree, InfiniteTreeListData } from '../../types';
+/**
+ * Вставляет дочерние элементы после родителя в плоский список.
+ */
+export declare const insertChildren: <TData extends InfiniteTreeListData<TData>>(flatList: FlattenTree<TData>[], parentId: string, childrenData: TData[], expandedIds: Set<string>) => FlattenTree<TData>[];

package/components/InfiniteTreeList/utils/insertChildren/insertChildren.js

@@ -0,0 +1,41 @@
+import { checkIsDirectChild } from '../checkIsDirectChild';
+import { flattenChildren } from '../flattenChildren';
+import { getNestedItems } from '../getNestedItems';
+/**
+ * Возвращает прямых дочерних элементов родителя из плоского списка
+ */
+const getDirectChildren = (flatList, parentId) => flatList.filter((item) => checkIsDirectChild(item, parentId));
+/**
+ * Вставляет дочерние элементы после родителя в плоский список.
+ */
+export const insertChildren = (flatList, parentId, childrenData, expandedIds) => {
+    const parentIndex = flatList.findIndex((item) => item.id === parentId);
+    if (parentIndex === -1) {
+        return flatList;
+    }
+    const parent = flatList[parentIndex];
+    const nextChildren = flattenChildren(childrenData, parent, expandedIds);
+    const existingDirect = getDirectChildren(flatList, parentId);
+    const sameBranch = existingDirect.length === nextChildren.length &&
+        existingDirect.every((item, index) => item.id === nextChildren[index]?.id);
+    if (sameBranch) {
+        return flatList;
+    }
+    const nestedItems = getNestedItems(flatList, parentId);
+    const nextBranch = [];
+    nextChildren.forEach((child) => {
+        nextBranch.push(child);
+        const sourceChild = childrenData.find((item) => item.id === child.id);
+        const isNestedFlattened = Boolean(child.meta.isExpanded && sourceChild?.children?.length);
+        if (!isNestedFlattened) {
+            nextBranch.push(...getNestedItems(flatList, child.id));
+        }
+    });
+    const branchEnd = parentIndex + 1 + nestedItems.length;
+    return [
+        ...flatList.slice(0, parentIndex),
+        { ...parent, children: childrenData },
+        ...nextBranch,
+        ...flatList.slice(branchEnd),
+    ];
+};

package/components/InfiniteTreeList/utils/removeChildren/index.d.ts

@@ -0,0 +1 @@
+export * from './removeChildren';

package/components/InfiniteTreeList/utils/removeChildren/index.js

@@ -0,0 +1 @@
+export * from './removeChildren';

package/components/InfiniteTreeList/utils/removeChildren/removeChildren.d.ts

@@ -0,0 +1,5 @@
+import type { FlattenTree, InfiniteTreeListData } from '../../types';
+/**
+ * Удаляет дочерние элементы родителя из плоского списка и сворачивает родителя
+ */
+export declare const removeChildren: <TData extends InfiniteTreeListData<TData>>(flatList: FlattenTree<TData>[], parentId: string) => FlattenTree<TData>[];

package/components/InfiniteTreeList/utils/removeChildren/removeChildren.js

@@ -0,0 +1,12 @@
+import { getNestedItems } from '../getNestedItems';
+/**
+ * Удаляет дочерние элементы родителя из плоского списка и сворачивает родителя
+ */
+export const removeChildren = (flatList, parentId) => {
+    const descendantIds = new Set(getNestedItems(flatList, parentId).map((item) => item.id));
+    return flatList
+        .filter((item) => !descendantIds.has(item.id))
+        .map((item) => item.id === parentId
+        ? { ...item, meta: { ...item.meta, isExpanded: false } }
+        : item);
+};

package/components/InfiniteTreeList/utils/sortCollapsed/sortCollapsed.d.ts

@@ -0,0 +1,5 @@
+import type { FlattenTree, InfiniteTreeListData } from '../../types';
+/**
+ * Сортирует элементы для корректной последовательности анимации при сворачивании
+ */
+export declare const sortCollapsed: <TData extends InfiniteTreeListData<TData>>(items: FlattenTree<TData>[]) => FlattenTree<TData>[];

package/components/InfiniteTreeList/{useLogic/utils → utils}/sortCollapsed/sortCollapsed.js

@@ -1,10 +1,5 @@
 /**
- * Сортирует элементы для корректной последовательности анимации при сворачивании.
- * Сначала более глубокие уровни, затем по индексу среди соседей.
- *
- * @typeParam T - тип данных элемента дерева
- * @param items - элементы в формате `FlattenTree<T>`
- * @returns Отсортированный массив `FlattenTree<T>`
+ * Сортирует элементы для корректной последовательности анимации при сворачивании
  */
 export const sortCollapsed = (items) => {
     return [...items].sort((a, b) => {

package/components/InfiniteTreeList/utils/startRemoveAnimation/index.d.ts

@@ -0,0 +1 @@
+export * from './startRemoveAnimation';

package/components/InfiniteTreeList/utils/startRemoveAnimation/index.js

@@ -0,0 +1 @@
+export * from './startRemoveAnimation';

package/components/InfiniteTreeList/utils/startRemoveAnimation/startRemoveAnimation.d.ts

@@ -0,0 +1 @@
+export declare const startRemoveAnimation: (nodeId: string) => void;

package/components/InfiniteTreeList/utils/startRemoveAnimation/startRemoveAnimation.js

@@ -0,0 +1,5 @@
+import { infiniteTreeListClassnames } from '../../constants';
+export const startRemoveAnimation = (nodeId) => {
+    const treeItem = document.getElementById(nodeId);
+    treeItem?.classList.add(infiniteTreeListClassnames.rowRemoveAnimation);
+};

package/components/InfiniteTreeList/utils/syncChildrenPlaceholders/index.d.ts

@@ -0,0 +1 @@
+export * from './syncChildrenPlaceholders';

package/components/InfiniteTreeList/utils/syncChildrenPlaceholders/index.js

@@ -0,0 +1 @@
+export * from './syncChildrenPlaceholders';

package/components/InfiniteTreeList/utils/syncChildrenPlaceholders/syncChildrenPlaceholders.d.ts

@@ -0,0 +1,11 @@
+import type { FlattenTree, InfiniteTreeListData } from '../../types';
+/**
+ * Возвращает id строк-заглушек, которые получит родитель.
+ */
+export declare const getChildrenPlaceholderIds: (parentId: string, count: number) => string[];
+/**
+ * Приводит строки-заглушки ветки родителя к состоянию загрузки её дочерних
+ * элементов:
+ * ставит нужный вид заглушки, меняет его или убирает заглушки совсем
+ */
+export declare const syncChildrenPlaceholders: <TData extends InfiniteTreeListData<TData>>(flatList: FlattenTree<TData>[], parentId: string, isLoading: boolean, skeletonCount: number, isError?: boolean, isNoData?: boolean) => FlattenTree<TData>[];

package/components/InfiniteTreeList/utils/syncChildrenPlaceholders/syncChildrenPlaceholders.js

@@ -0,0 +1,99 @@
+import { checkIsChildrenPlaceholderOf } from '../checkIsChildrenPlaceholderOf';
+import { checkIsDirectChild } from '../checkIsDirectChild';
+import { countDirectChildren } from '../countDirectChildren';
+import { getNestedItems } from '../getNestedItems';
+/**
+ * Возвращает стабильный id строки-заглушки для родителя.
+ */
+const getPlaceholderId = (parentId, index) => `loader-${parentId}-${index}`;
+/**
+ * Возвращает стабильный id строки-заглушки «Нет данных».
+ */
+const getNoDataId = (parentId) => `no-data-${parentId}`;
+/**
+ * Возвращает id строк-заглушек, которые получит родитель.
+ */
+export const getChildrenPlaceholderIds = (parentId, count) => Array.from({ length: count }, (_, index) => getPlaceholderId(parentId, index));
+/**
+ * Какую заглушку должна показывать ветка при текущем состоянии загрузки
+ * дочерних элементов.
+ */
+const resolveChildrenPlaceholderKind = (isLoading, isError, isNoData, realChildren) => {
+    if (isLoading) {
+        return realChildren ? 'spinner' : 'skeleton';
+    }
+    if (isError) {
+        return 'error';
+    }
+    if (isNoData && !realChildren) {
+        return 'no-data';
+    }
+    return undefined;
+};
+const getPlaceholderCount = (kind, skeletonCount) => {
+    if (!kind) {
+        return 0;
+    }
+    return kind === 'skeleton' ? skeletonCount : 1;
+};
+/**
+ * Создаёт строку-заглушку ветки
+ */
+const createChildrenPlaceholder = (parent, { kind, index, siblingIndex, }) => {
+    const id = kind === 'no-data'
+        ? getNoDataId(parent.id)
+        : getPlaceholderId(parent.id, index);
+    return {
+        id,
+        placeholderKind: kind,
+        meta: {
+            hasNested: false,
+            isChildrenAsync: false,
+            level: parent.meta.level + 1,
+            path: [...parent.meta.path, id],
+            isExpanded: false,
+            parentId: parent.id,
+            siblingIndex,
+            nodeId: `infinite-tree-item-${id}`,
+        },
+    };
+};
+/**
+ * Приводит строки-заглушки ветки родителя к состоянию загрузки её дочерних
+ * элементов:
+ * ставит нужный вид заглушки, меняет его или убирает заглушки совсем
+ */
+export const syncChildrenPlaceholders = (flatList, parentId, isLoading, skeletonCount, isError, isNoData) => {
+    const parentIndex = flatList.findIndex((item) => item.id === parentId);
+    if (parentIndex === -1) {
+        return flatList;
+    }
+    const parent = flatList[parentIndex];
+    const existingPlaceholders = flatList.filter((item) => checkIsChildrenPlaceholderOf(item, parentId));
+    const realChildren = flatList.some((item) => checkIsDirectChild(item, parentId));
+    const kind = resolveChildrenPlaceholderKind(isLoading, Boolean(isError), Boolean(isNoData), realChildren);
+    const desiredCount = getPlaceholderCount(kind, skeletonCount);
+    const samePlaceholders = existingPlaceholders.length === desiredCount &&
+        existingPlaceholders.every((item) => item.placeholderKind === kind);
+    if (samePlaceholders) {
+        return flatList;
+    }
+    const withoutPlaceholders = flatList.filter((item) => !checkIsChildrenPlaceholderOf(item, parentId));
+    if (!kind) {
+        return withoutPlaceholders;
+    }
+    const nextParentIndex = withoutPlaceholders.findIndex((item) => item.id === parentId);
+    const nestedItems = getNestedItems(withoutPlaceholders, parentId);
+    const insertIndex = nextParentIndex + 1 + nestedItems.length;
+    const realDirectCount = countDirectChildren(withoutPlaceholders, parentId);
+    const placeholders = Array.from({ length: desiredCount }, (_, index) => createChildrenPlaceholder(parent, {
+        kind,
+        index,
+        siblingIndex: realDirectCount + index,
+    }));
+    return [
+        ...withoutPlaceholders.slice(0, insertIndex),
+        ...placeholders,
+        ...withoutPlaceholders.slice(insertIndex),
+    ];
+};

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