@sima-land/ui-nucleons 45.0.0-alpha.2 → 45.0.0-alpha.21

package/chips/item.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-export interface ChipsItemProps {
-    href?: string;
-    children?: React.ReactNode;
-    withCross?: boolean;
-    target?: string;
-    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
-    checked?: boolean;
-}
-/**
- * Элемент списка "чипсов".
- * @param props Свойства.
- * @return Элемент.
- */
-export declare const ChipsItem: ({ href, children, withCross, target, onClick, checked, }: ChipsItemProps) => JSX.Element;

package/chips/item.js

@@ -1,20 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChipsItem = void 0;
-const react_1 = __importDefault(require("react"));
-const bind_1 = __importDefault(require("classnames/bind"));
-const cross_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/cross"));
-const chips_module_scss_1 = __importDefault(require("./chips.module.scss"));
-const cx = bind_1.default.bind(chips_module_scss_1.default);
-/**
- * Элемент списка "чипсов".
- * @param props Свойства.
- * @return Элемент.
- */
-const ChipsItem = ({ href, children, withCross, target, onClick, checked, }) => (react_1.default.createElement("a", { href: href, role: href ? undefined : 'button', className: cx('item', { checked }), target: target, onClick: onClick, "data-testid": 'chips:item' },
-    react_1.default.createElement("span", { className: chips_module_scss_1.default.text }, children),
-    withCross && react_1.default.createElement(cross_1.default, { className: cx('cross-svg') })));
-exports.ChipsItem = ChipsItem;

package/field-grid/field-grid.module.scss

@@ -1,30 +0,0 @@
-.container {
-  display: flex;
-  flex-wrap: wrap;
-  padding: 1px 0 0 1px;
-}
-
-.cell {
-  display: flex;
-  justify-content: stretch;
-  flex-grow: 1;
-  margin: -1px 0 0 -1px;
-}
-
-.size-third {
-  width: calc(100% / 3);
-}
-
-.size-half {
-  width: 50%;
-}
-
-.size-full {
-  width: 100%;
-}
-
-.focused-field {
-  // чтобы выделенные границы не скрывались под другими элементами сетки, поднимаем при фокусировке
-  position: relative;
-  z-index: 1;
-}

package/field-grid/index.d.ts

@@ -1,59 +0,0 @@
-import React from 'react';
-import { TextFieldProps } from '../text-field';
-type ItOrArray<T> = T[] | T;
-type CellSize = 'full' | 'half' | 'third';
-interface CommonCellProps {
-    size?: CellSize;
-    rounds?: TextFieldProps['rounds'];
-}
-type OnlyOneRequired<T, K extends keyof T = keyof T> = {
-    [key in K]?: Required<Pick<T, key>> & Partial<Record<Exclude<K, key>, undefined>>;
-}[K];
-export type CellProps = CommonCellProps & OnlyOneRequired<{
-    field: React.ReactElement<Pick<TextFieldProps, 'rounds' | 'caption' | 'classes' | 'className'>>;
-    renderField: (props: Pick<TextFieldProps, 'rounds' | 'caption'>) => React.ReactNode;
-}>;
-export interface RowProps {
-    isFirst?: boolean;
-    isLast?: boolean;
-    children: ItOrArray<React.ReactElement<CellProps, typeof Cell>>;
-}
-export interface FieldGridProps {
-    /** Содержимое. */
-    children: ItOrArray<React.ReactElement<RowProps, typeof Row>>;
-    /** Свойства корневого элемента. */
-    rootProps?: React.HTMLAttributes<HTMLDivElement>;
-}
-export interface FieldGridComponent extends React.FC<FieldGridProps> {
-    Row: typeof Row;
-    Cell: typeof Cell;
-}
-/**
- * Компонент сетки полей.
- * @deprecated В макетах больше не используются "склеивания" полей.
- * @param props Свойства.
- * @param props.children Содержимое, дочерними элементами могут быть только FieldGrid.Row.
- * @param props.rootProps Свойства корневого элемента.
- * @return Элемент.
- */
-export declare const FieldGrid: FieldGridComponent;
-/**
- * Компонент ряда для сетки полей. Может быть использован только как дочерний для FieldGrid.
- * @param props Свойства.
- * @param props.children Содержимое, дочерними элементами могут быть только FieldGrid.Cell.
- * @param props.isFirst Является ли ряд первым (будет задан автоматически).
- * @param props.isLast Является ли ряд последним (будет задан автоматически).
- * @return Элемент.
- */
-declare const Row: React.FC<RowProps>;
-/**
- * Компонент элемента для сетки полей. Может быть использован только как дочерний для FieldGrid.Row.
- * @param props Свойства.
- * @param props.size Размер ячейки по горизонтали (будет задан автоматически).
- * @param props.rounds Скругления для поля (будет задан автоматически).
- * @param props.field Поле.
- * @param props.renderField Должна вернуть поле получив свойства для него.
- * @return Элемент.
- */
-declare const Cell: React.FC<CellProps>;
-export {};

package/field-grid/index.js

@@ -1,138 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FieldGrid = void 0;
-const react_1 = __importStar(require("react"));
-const bind_1 = __importDefault(require("classnames/bind"));
-const field_grid_module_scss_1 = __importDefault(require("./field-grid.module.scss"));
-const cx = bind_1.default.bind(field_grid_module_scss_1.default);
-const cellSizeByCount = {
-    1: 'full',
-    2: 'half',
-    3: 'third',
-};
-const TypeCheck = {
-    isRow: (child) => child && child.type === Row,
-    isCell: (child) => child && child.type === Cell,
-};
-/**
- * Компонент сетки полей.
- * @deprecated В макетах больше не используются "склеивания" полей.
- * @param props Свойства.
- * @param props.children Содержимое, дочерними элементами могут быть только FieldGrid.Row.
- * @param props.rootProps Свойства корневого элемента.
- * @return Элемент.
- */
-const FieldGrid = ({ children, rootProps }) => {
-    const rows = react_1.Children.toArray(children).filter(TypeCheck.isRow);
-    return (react_1.default.createElement("div", Object.assign({}, rootProps, { className: cx('container', rootProps === null || rootProps === void 0 ? void 0 : rootProps.className) }), rows.map((row, index) => (0, react_1.cloneElement)(row, {
-        isFirst: index === 0,
-        isLast: index === rows.length - 1,
-    }))));
-};
-exports.FieldGrid = FieldGrid;
-/**
- * Компонент ряда для сетки полей. Может быть использован только как дочерний для FieldGrid.
- * @param props Свойства.
- * @param props.children Содержимое, дочерними элементами могут быть только FieldGrid.Cell.
- * @param props.isFirst Является ли ряд первым (будет задан автоматически).
- * @param props.isLast Является ли ряд последним (будет задан автоматически).
- * @return Элемент.
- */
-const Row = ({ isFirst: isFirstRow, isLast: isLastRow, children }) => {
-    const cells = react_1.Children.toArray(children)
-        .filter(TypeCheck.isCell)
-        .slice(0, 3);
-    const cellSize = cellSizeByCount[cells.length];
-    return (react_1.default.createElement(react_1.default.Fragment, null, cells.map((cell, index) => {
-        const isFirstCell = index === 0;
-        const isLastCell = index === cells.length - 1;
-        let rounds = 'none';
-        if (isFirstRow && isLastRow) {
-            if (isFirstCell && isLastCell) {
-                rounds = 'all';
-            }
-            else if (isFirstCell) {
-                rounds = 'left';
-            }
-            else if (isLastCell) {
-                rounds = 'right';
-            }
-        }
-        else if (isFirstRow) {
-            if (isFirstCell && isLastCell) {
-                rounds = 'top';
-            }
-            else if (isFirstCell) {
-                rounds = 'topLeft';
-            }
-            else if (isLastCell) {
-                rounds = 'topRight';
-            }
-        }
-        else if (isLastRow) {
-            if (isFirstCell && isLastCell) {
-                rounds = 'bottom';
-            }
-            else if (isFirstCell) {
-                rounds = 'bottomLeft';
-            }
-            else if (isLastCell) {
-                rounds = 'bottomRight';
-            }
-        }
-        return (0, react_1.cloneElement)(cell, { size: cellSize, rounds });
-    })));
-};
-/**
- * Компонент элемента для сетки полей. Может быть использован только как дочерний для FieldGrid.Row.
- * @param props Свойства.
- * @param props.size Размер ячейки по горизонтали (будет задан автоматически).
- * @param props.rounds Скругления для поля (будет задан автоматически).
- * @param props.field Поле.
- * @param props.renderField Должна вернуть поле получив свойства для него.
- * @return Элемент.
- */
-const Cell = ({ size, rounds, field, renderField }) => {
-    var _a;
-    let content;
-    if (renderField) {
-        content = renderField({ rounds, caption: undefined });
-    }
-    else if (field) {
-        content = (0, react_1.cloneElement)(field, {
-            rounds,
-            caption: undefined,
-            classes: Object.assign(Object.assign({}, field.props.classes), { blockFocused: cx((_a = field.props.classes) === null || _a === void 0 ? void 0 : _a.blockFocused, 'focused-field') }),
-            className: cx(field.props.className, 'size-full'),
-        });
-    }
-    return react_1.default.createElement("div", { className: cx('cell', `size-${size}`) }, content);
-};
-exports.FieldGrid.Row = Row;
-exports.FieldGrid.Cell = Cell;

package/file-icon/unknown.svg

@@ -1,9 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path opacity="0.88" d="M6 5C6 3.89543 6.89543 3 8 3H20L26 9V27C26 28.1046 25.1046 29 24 29H8C6.89543 29 6 28.1046 6 27V5Z" fill="#C2C2C2"/>
-  <path opacity="0.32" d="M21 9L26 9L20 3L20 8C20 8.55229 20.4477 9 21 9Z" fill="white"/>
-  <path opacity="0.24" d="M25.1667 9L21 9L26 15L26 9C25.5833 9 25.6269 9 25.1667 9Z" fill="black"/>
-  <g opacity="0.8">
-    <path d="M9 22H23V24H9V22Z" fill="white"/>
-    <path d="M9 18H19V20H9V18Z" fill="white"/>
-  </g>
-</svg>

package/helpers/format-number.d.ts

@@ -1,7 +0,0 @@
-/**
- * Форматирует число.
- * @param value Число для форматирования.
- * @param separator Разделяющий символ для чисел больше 999.
- * @return Массив строк с целой и дробной отоформатированными частями числа.
- */
-export declare function formatNumber(value: number | string, separator?: string): string[];

package/helpers/format-number.js

@@ -1,29 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatNumber = void 0;
-/**
- * Форматирует число.
- * @param value Число для форматирования.
- * @param separator Разделяющий символ для чисел больше 999.
- * @return Массив строк с целой и дробной отоформатированными частями числа.
- */
-function formatNumber(value, separator) {
-    const pureSeparator = String(separator) === separator ? separator : ' ';
-    const number = Number(value);
-    let result = [];
-    if (!isNaN(number) && isFinite(number)) {
-        const decimals = number < 0.01 && number > 0 ? 4 : 2;
-        result = [
-            number.toFixed(2).replace(/\.[^.]*$/g, ''),
-            number.toFixed(decimals).replace(/^.*\./g, ''), // убираем все числа до точки и точку
-        ];
-        const array = result[0].split(''); // получаем массив строк с цифрами из строки целой части числа
-        const separated = [];
-        while (array.length) {
-            separated.unshift(array.splice(-3).join('')); // вытаскиваем последние три цифры и объединяем в строку
-        }
-        result[0] = separated.join(pureSeparator); // подменяем целую часть на целую разделённую
-    }
-    return result;
-}
-exports.formatNumber = formatNumber;

package/helpers/get-no-index.d.ts

@@ -1,8 +0,0 @@
-/**
- * Возвращает объект с исходной строкой в тэге <!--noindex--> для запрета отслеживания контента поисковиками.
- * @param content Исходная строка.
- * @return Объект, содержащий обернутую строку, для использования c атрибутом dangerouslySetInnerHTML.
- */
-export declare function getNoIndex(content: unknown): {
-    __html: string;
-} | undefined;

package/helpers/get-no-index.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getNoIndex = void 0;
-/**
- * Возвращает объект с исходной строкой в тэге <!--noindex--> для запрета отслеживания контента поисковиками.
- * @param content Исходная строка.
- * @return Объект, содержащий обернутую строку, для использования c атрибутом dangerouslySetInnerHTML.
- */
-function getNoIndex(content) {
-    return content ? { __html: `<!--noindex-->${String(content)}<!--/noindex-->` } : undefined;
-}
-exports.getNoIndex = getNoIndex;

package/helpers/rename.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="lodash" />
-/// <reference types="lodash" />
-type ObjectKey = string | number | symbol;
-/**
- * Переименовывает свойство, возвращая новый объект.
- * @deprecated Эта функция не относится напрямую к работе с UI и будет удалена в будущем.
- * @param fromKey Старый ключ.
- * @param toKey Новый ключ.
- * @param source Объект.
- * @return Новый объект.
- */
-export declare const rename: import("lodash").CurriedFunction3<ObjectKey, ObjectKey, any, import("lodash").Omit<any, ObjectKey>>;
-export default rename;

package/helpers/rename.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.rename = void 0;
-const fp_1 = require("lodash/fp");
-/**
- * Переименовывает свойство, возвращая новый объект.
- * @deprecated Эта функция не относится напрямую к работе с UI и будет удалена в будущем.
- * @param fromKey Старый ключ.
- * @param toKey Новый ключ.
- * @param source Объект.
- * @return Новый объект.
- */
-exports.rename = (0, fp_1.curry)((fromKey, toKey, source) => (0, fp_1.assoc)(toKey, (0, fp_1.prop)(fromKey, source), (0, fp_1.omit)([fromKey], source)));
-exports.default = exports.rename;

package/helpers/with-prevent.d.ts

@@ -1,11 +0,0 @@
-import { SyntheticEvent } from 'react';
-/**
- * Декорирует переданную функцию-обработчик события вызывая preventDefault и stopPropagation.
- * @param callback Функция-обработчик.
- * @return Декорированная функция-обработчик.
- */
-export declare function withEventMute<T extends Event | SyntheticEvent>(callback?: (event: T) => void): (event: T) => void;
-/**
- * @deprecated Следует использовать именованный экспорт. Экспорт по умолчанию будет удалён в будущем.
- */
-export default withEventMute;

package/helpers/with-prevent.js

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.withEventMute = void 0;
-/**
- * Декорирует переданную функцию-обработчик события вызывая preventDefault и stopPropagation.
- * @param callback Функция-обработчик.
- * @return Декорированная функция-обработчик.
- */
-function withEventMute(callback) {
-    return (event) => {
-        event.preventDefault();
-        event.stopPropagation(); // @todo придумать как вынести
-        callback === null || callback === void 0 ? void 0 : callback(event);
-    };
-}
-exports.withEventMute = withEventMute;
-/**
- * @deprecated Следует использовать именованный экспорт. Экспорт по умолчанию будет удалён в будущем.
- */
-exports.default = withEventMute;

package/hint-deprecated/hint.module.scss

@@ -1,61 +0,0 @@
-@use '../colors';
-
-.root {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  &.top,
-  &.bottom {
-    flex-direction: column;
-  }
-  &.top::after {
-    content: '';
-    display: block;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 4px 4px 0;
-    border-color: colors.$basic-gray76 transparent transparent transparent;
-  }
-  &.right::before {
-    content: '';
-    display: block;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 4px 4px 4px 0;
-    border-color: transparent colors.$basic-gray76 transparent transparent;
-  }
-  &.bottom::before {
-    content: '';
-    display: block;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 0 4px 4px;
-    border-color: transparent transparent colors.$basic-gray76 transparent;
-  }
-  &.left::after {
-    content: '';
-    display: block;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 4px 0 4px 4px;
-    border-color: transparent transparent transparent colors.$basic-gray76;
-  }
-}
-
-.body {
-  align-items: center;
-  background: colors.$basic-gray76;
-  border-radius: 4px;
-  color: #fff;
-  display: flex;
-  font-size: 14px;
-  line-height: 20px;
-  min-height: 36px;
-  padding: 8px;
-  white-space: nowrap;
-  text-align: center;
-}

package/hint-deprecated/index.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-type Direction = 'top' | 'left' | 'bottom' | 'right';
-export interface HintProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** С какой стороны появляется хинт. */
-    direction: Direction;
-}
-/**
- * @deprecated Теперь нужно использовать `hint`.
- */
-export declare const Hint: React.ForwardRefExoticComponent<HintProps & React.RefAttributes<HTMLDivElement | null>>;
-export {};

package/hint-deprecated/index.js

@@ -1,53 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Hint = void 0;
-const react_1 = __importStar(require("react"));
-const shadows_1 = require("../styling/shadows");
-const bind_1 = __importDefault(require("classnames/bind"));
-const hint_module_scss_1 = __importDefault(require("./hint.module.scss"));
-const cx = bind_1.default.bind(hint_module_scss_1.default);
-/**
- * @deprecated Теперь нужно использовать `hint`.
- */
-exports.Hint = (0, react_1.forwardRef)((_a, ref) => {
-    var { children, className, direction } = _a, restProps = __rest(_a, ["children", "className", "direction"]);
-    return (react_1.default.createElement("div", Object.assign({}, restProps, { ref: ref, className: cx('root', className, direction), "data-testid": 'hint' }),
-        react_1.default.createElement("div", { className: cx('body', shadows_1.BoxShadow.z4) }, children)));
-});

package/hooks/styles.d.ts

@@ -1,6 +0,0 @@
-import { RefObject } from 'react';
-/**
- * Хук, устанавливающий css-переменную "--vh" на переданный элемент.
- * @param ref Ref элемента.
- */
-export declare function useViewportHeightUnit(ref: RefObject<HTMLElement | null>): void;

package/hooks/styles.js

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useViewportHeightUnit = void 0;
-const react_1 = require("react");
-const on_1 = require("../helpers/on");
-const styles_1 = require("../helpers/styles");
-/**
- * Хук, устанавливающий css-переменную "--vh" на переданный элемент.
- * @param ref Ref элемента.
- */
-function useViewportHeightUnit(ref) {
-    (0, react_1.useEffect)(() => {
-        const { visualViewport } = window;
-        const offList = [];
-        // eslint-disable-next-line require-jsdoc, jsdoc/require-jsdoc
-        function setVariable() {
-            ref.current && (0, styles_1.setViewportHeightUnit)(ref.current);
-        }
-        offList.push((0, on_1.on)(window, 'resize', setVariable));
-        offList.push((0, on_1.on)(window, 'orientationchange', setVariable));
-        visualViewport && offList.push((0, on_1.on)(visualViewport, 'resize', setVariable));
-        setVariable();
-        return () => offList.forEach(fn => fn());
-    }, []);
-}
-exports.useViewportHeightUnit = useViewportHeightUnit;

package/input/input.module.scss

@@ -1,20 +0,0 @@
-@use '../colors';
-
-.main {
-  display: flex;
-  width: 100%;
-}
-
-.input {
-  min-width: 0;
-  width: 0;
-  flex-grow: 1;
-  background: inherit;
-  font: inherit;
-  line-height: inherit;
-}
-
-.clear-button {
-  fill: colors.$basic-gray38;
-  cursor: pointer;
-}

package/layout/layout.module.scss

@@ -1,56 +0,0 @@
-@use '../breakpoints';
-
-.layout {
-  @each $key, $val in breakpoints.$map {
-    @include breakpoints.up($key) {
-      &.disabled-#{$key} {
-        width: auto;
-        max-width: none;
-        padding-left: 0;
-        padding-right: 0;
-        margin-left: 0;
-        margin-right: 0;
-      }
-      &:not(.disabled-#{$key}) {
-        // ВАЖНО: не используем 100vw так как при использовании 100vw не вычитается ширина полосы прокрутки страницы
-        width: 100%;
-        max-width: var(--layout-fixed-width);
-        margin-left: auto;
-        margin-right: auto;
-        padding-left: var(--layout-fluid-gutter);
-        padding-right: var(--layout-fluid-gutter);
-      }
-    }
-  }
-  @include breakpoints.up('mxs') {
-    --layout-fixed-width: initial;
-    --layout-fluid-gutter: 16px;
-  }
-  @include breakpoints.up('mm') {
-    --layout-fixed-width: 656px;
-    --layout-fluid-gutter: initial;
-  }
-  @include breakpoints.up('ml') {
-    --layout-fixed-width: 672px;
-    --layout-fluid-gutter: initial;
-  }
-  @include breakpoints.up('xs') {
-    --layout-fixed-width: initial;
-    --layout-fluid-gutter: 64px;
-  }
-  @include breakpoints.up('l') {
-    --layout-fixed-width: 1472px;
-    --layout-fluid-gutter: initial;
-  }
-  @include breakpoints.up('xl') {
-    --layout-fixed-width: 1504px;
-    --layout-fluid-gutter: initial;
-  }
-
-  // пока что не даём использовать приватные переменные чтобы не раскрывать принцип работы
-  // так как он может измениться
-  *:not(.layout) {
-    --layout-fixed-width: initial;
-    --layout-fluid-gutter: initial;
-  }
-}