@sima-land/ui-nucleons 45.0.0-alpha.7 → 45.0.0-alpha.71

package/dist/unknown-content/unknown-content.module.scss

@@ -0,0 +1,286 @@
+@use '../colors';
+@use '../breakpoints';
+
+.root {
+  color: colors.$basic-gray87;
+  font-size: 16px;
+  line-height: 24px;
+
+  // сброс отступов
+  * {
+    border: 0;
+    margin: 0;
+    padding: 0;
+  }
+
+  // ссылки
+  a {
+    color: colors.$basic-blue;
+    text-decoration: none;
+    &:hover {
+      color: colors.$additional-deep-blue;
+    }
+  }
+
+  // параграф
+  p {
+    margin-bottom: 24px;
+  }
+
+  // курсив
+  i,
+  em {
+    font-style: normal; // да, вот так по гайдам
+  }
+
+  // заголовки
+  h1 {
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 32px;
+    margin-bottom: 32px;
+  }
+  h2 {
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 28px;
+    margin-bottom: 24px;
+  }
+  h3 {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    margin-bottom: 24px;
+  }
+  h4 {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    color: colors.$basic-gray38;
+    margin-bottom: 16px;
+  }
+  h5 {
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 20px;
+    color: colors.$basic-gray38;
+    margin-bottom: 24px;
+  }
+  h6 {
+    font-weight: normal;
+    font-size: 12px;
+    line-height: 16px;
+    margin-bottom: 24px;
+  }
+
+  @include breakpoints.gte('xs') {
+    h1 {
+      font-weight: bold;
+      font-size: 32px;
+      line-height: 40px;
+      margin-bottom: 32px;
+    }
+    h2 {
+      font-weight: 600;
+      font-size: 24px;
+      line-height: 32px;
+      margin-bottom: 24px;
+    }
+    h3 {
+      font-weight: 600;
+      font-size: 20px;
+      line-height: 28px;
+      margin-bottom: 24px;
+    }
+    h4 {
+      font-weight: 600;
+      font-size: 16px;
+      line-height: 24px;
+      color: colors.$basic-gray38;
+      margin-bottom: 16px;
+    }
+    h5 {
+      font-size: 14px;
+      line-height: 20px;
+      color: colors.$basic-gray38;
+      margin-bottom: 24px;
+    }
+    h6 {
+      font-size: 12px;
+      line-height: 16px;
+    }
+  }
+
+  // списки
+  ol,
+  ul {
+    margin-bottom: 24px;
+    li + li {
+      margin-top: 16px;
+    }
+  }
+  ol {
+    // ВАЖНО: экспериментально используем стили таблицы чтобы содержимое элемента списка не залезало под номер
+    // это не позволяет сделать отступ от номера 12px по гайдам - согласовано с дизайнерами
+    // при возникновении проблем пересмотреть подход
+    display: table;
+    border-spacing: 0 16px;
+    counter-reset: ordered-list;
+    list-style: none;
+    li {
+      display: table-row;
+      counter-increment: ordered-list;
+    }
+    li::before {
+      content: counter(ordered-list) '.';
+      display: table-cell;
+
+      // ВАЖНО: 10 вместо 12 по гайдам - согласовано с дизайнерами
+      // уменьшили потому что при табличной стилизации отступ от номера формируется по самому длинному номеру
+      padding-right: 10px;
+    }
+  }
+  ul {
+    display: table;
+    border-spacing: 0 16px;
+    list-style: none;
+    li {
+      display: table-row;
+      counter-increment: ordered-list;
+    }
+    li::before {
+      content: '—';
+      display: table-cell;
+      padding-right: 10px;
+    }
+  }
+
+  // таблицы
+  table {
+    width: 100%;
+    margin-bottom: 40px;
+    border-collapse: collapse;
+  }
+  @include breakpoints.gte('xs') {
+    table {
+      thead {
+        color: colors.$basic-gray38;
+        font-size: 14px;
+        line-height: 20px;
+        td,
+        th {
+          padding-top: 0;
+        }
+      }
+      td {
+        border: 0;
+        padding: 24px 0;
+
+        // накидываем именно сюда чтобы работало в Safari
+        box-shadow: inset 0 -1px 0 colors.$basic-gray12;
+        &:not(:last-child) {
+          padding-right: 32px;
+        }
+      }
+    }
+  }
+  @include breakpoints.lt('xs') {
+    table,
+    tr,
+    th,
+    td,
+    thead,
+    tbody {
+      display: block;
+    }
+    table {
+      box-shadow: inset 0 1px 0 colors.$basic-gray12;
+    }
+    thead {
+      position: absolute;
+      top: -9999px;
+      left: -9999px;
+    }
+    tr {
+      padding: 32px 0;
+      box-shadow: inset 0 -1px 0 colors.$basic-gray12;
+    }
+    td + td {
+      margin-top: 24px;
+    }
+    td::before {
+      content: attr(data-table-column-title);
+      display: block;
+      font-size: 14px;
+      line-height: 20px;
+      color: colors.$basic-gray38;
+      margin-bottom: 8px;
+    }
+  }
+
+  // медиа
+  img,
+  video {
+    display: block;
+    max-width: 100%;
+    margin-bottom: 32px;
+    @include breakpoints.gte('xs') {
+      margin-bottom: 40px;
+    }
+  }
+
+  // цитата
+  blockquote {
+    position: relative;
+    display: block;
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    padding-left: 40px;
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+
+      /* stylelint-disable-next-line function-url-quotes */
+      background-image: url('data:image/svg+xml,%3Csvg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Crect width="32" height="32"/%3E%3Cpath d="M15.1665 5.33301H8.36963L2.6665 26.0361H12.1196L15.1665 5.33301ZM28.9165 5.33301H22.1196L16.4165 26.0361H25.8696L28.9165 5.33301Z" fill="%23E0E0E0"/%3E%3C/svg%3E%0A');
+      width: 32px;
+      height: 32px;
+    }
+    @include breakpoints.gte('xs') {
+      font-size: 20px;
+      line-height: 28px;
+      padding-left: 72px;
+      &::before {
+        /* stylelint-disable-next-line function-url-quotes */
+        background-image: url('data:image/svg+xml,%3Csvg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Crect width="48" height="48"/%3E%3Cpath d="M22.75 8H12.5547L4 39.0547H18.1797L22.75 8ZM43.375 8H33.1797L24.625 39.0547H38.8047L43.375 8Z" fill="%23E0E0E0"/%3E%3C/svg%3E%0A');
+        width: 48px;
+        height: 48px;
+      }
+    }
+    * {
+      margin: 0;
+    }
+    cite {
+      display: block;
+      margin-top: 16px;
+      font-style: normal;
+      font-weight: normal;
+      font-size: 16px;
+      line-height: 24px;
+      color: colors.$basic-gray38;
+    }
+  }
+
+  // горизонтальная черта
+  hr {
+    display: block;
+    width: 100%;
+    height: 1px;
+    background: colors.$basic-gray12;
+    margin-bottom: 32px;
+    @include breakpoints.gte('xs') {
+      margin-bottom: 40px;
+    }
+  }
+}

package/dist/unknown-content/utils.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setTableRowLabels = void 0;
+/**
+ * Ищет в заданном элементе все ячейки таблиц и задает им атрибут "data-table-column-title".
+ * Необходимо для стилизации адаптивных таблиц по гайдам.
+ * @param element Элемент.
+ */
+const setTableRowLabels = (element) => {
+    element.querySelectorAll('tbody td').forEach(td => {
+        // считаем, что parentNode есть всегда т.к. селектор это подразумевает
+        const index = [...td.parentNode.children].indexOf(td);
+        // считаем, что index не может быть равен -1 т.к. поиск внутри родительского элемента
+        td.setAttribute('data-table-column-title', td.closest('table').querySelector(`thead td:nth-child(${index + 1})`)
+            ?.textContent || '');
+    });
+};
+exports.setTableRowLabels = setTableRowLabels;
+//# sourceMappingURL=utils.js.map

package/dist/unknown-content/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/unknown-content/utils.ts"],"names":[],"mappings":";;;AAAA;;;;GAIG;AACI,MAAM,iBAAiB,GAAG,CAAC,OAAgB,EAAQ,EAAE;IAC1D,OAAO,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE;QAChD,sEAAsE;QACtE,MAAM,KAAK,GAAG,CAAC,GAAI,EAAE,CAAC,UAAyB,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QAEtE,qFAAqF;QACrF,EAAE,CAAC,YAAY,CACb,yBAAyB,EACxB,EAAE,CAAC,OAAO,CAAC,OAAO,CAAsB,CAAC,aAAa,CAAC,sBAAsB,KAAK,GAAG,CAAC,GAAG,CAAC;YACzF,EAAE,WAAW,IAAI,EAAE,CACtB,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAZW,QAAA,iBAAiB,qBAY5B"}

package/dist/upload-area/index.d.ts

@@ -0,0 +1,3 @@
+export type { UploadAreaProps, UploadAreaSize, DescriptionPayload } from './types';
+export { UploadArea } from './upload-area';
+export { getFilesDescription } from './utils';

package/dist/upload-area/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFilesDescription = exports.UploadArea = void 0;
+var upload_area_1 = require("./upload-area");
+Object.defineProperty(exports, "UploadArea", { enumerable: true, get: function () { return upload_area_1.UploadArea; } });
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "getFilesDescription", { enumerable: true, get: function () { return utils_1.getFilesDescription; } });
+//# sourceMappingURL=index.js.map

package/dist/upload-area/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/upload-area/index.ts"],"names":[],"mappings":";;;AACA,6CAA2C;AAAlC,yGAAA,UAAU,OAAA;AACnB,iCAA8C;AAArC,4GAAA,mBAAmB,OAAA"}

package/dist/upload-area/types.d.ts

@@ -0,0 +1,35 @@
+import type { ChangeEvent, CSSProperties, DragEvent, HTMLAttributes, InputHTMLAttributes } from 'react';
+import type { WithTestId } from '../types';
+export type UploadAreaSize = 's' | 'm';
+export interface UploadAreaProps extends WithTestId {
+    /** Размер. */
+    size?: UploadAreaSize | 'unset';
+    /** CSS-класс корневого элемента. */
+    className?: string;
+    /** Стили корневого элемента. */
+    style?: CSSProperties;
+    /** Заголовок. */
+    title?: string;
+    /** Описание. */
+    description?: string;
+    /** Состояние с ошибками валидации. */
+    failed?: boolean;
+    /** Отключенное состояния. */
+    disabled?: boolean;
+    /** Ограничение на количество файлов. */
+    multiple?: boolean;
+    /** Сработает при выборе или перетаскивании файлов, получив список файлов и событие. */
+    onSelect?: (list: File[], event: DragEvent<HTMLElement> | ChangeEvent<HTMLInputElement>) => void;
+    /** Свойства корневого элемента. */
+    rootProps?: HTMLAttributes<HTMLElement>;
+    /** Свойства элемента input. */
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
+}
+export interface DescriptionPayload {
+    /** Ограничение на количество файлов. */
+    countLimit?: number;
+    /** Ограничение на размер. */
+    sizeLimit?: string;
+    /** Форматы файлов, выводятся пользователю. */
+    formats?: string;
+}

package/dist/upload-area/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/upload-area/upload-area-util.scss

@@ -0,0 +1,19 @@
+@mixin size-s {
+  --padding-x: 16px;
+  --padding-y: 20px;
+  --justify-content: flex-start;
+  --icon-size: 0;
+  --icon-display: none;
+  --icon-gap: 0;
+  --min-height: calc(48px + (2 * var(--padding-y)));
+}
+
+@mixin size-m {
+  --padding-x: 60px;
+  --padding-y: 20px;
+  --justify-content: center;
+  --icon-size: 64px;
+  --icon-display: block;
+  --icon-gap: 24px;
+  --min-height: calc(var(--icon-size) + (2 * var(--padding-y)));
+}

package/dist/upload-area/upload-area.d.ts

@@ -0,0 +1,7 @@
+import { UploadAreaProps } from './types';
+/**
+ * Поля выбора файлов.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function UploadArea({ title, description, className, style, size, multiple, disabled, failed, onSelect, rootProps, inputProps, 'data-testid': testId, }: UploadAreaProps): import("react").JSX.Element;

package/dist/upload-area/upload-area.js

@@ -0,0 +1,90 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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.UploadArea = UploadArea;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const link_1 = require("../link");
+const utils_1 = require("./utils");
+const Upload_1 = __importDefault(require("@sima-land/ui-quarks/icons/64x64/Stroked/Upload"));
+const classnames_1 = __importDefault(require("classnames"));
+const styles = __importStar(require("./upload-area.module.scss"));
+/**
+ * Поля выбора файлов.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function UploadArea({ title, description, className, style, size = 'm', multiple, disabled, failed, onSelect, rootProps, inputProps, 'data-testid': testId = 'upload-area', }) {
+    const inputRef = (0, react_1.useRef)(null);
+    const filterFiles = (0, react_1.useCallback)((files) => {
+        const result = [...files];
+        multiple ? result : result.splice(1);
+        return result;
+    }, [multiple]);
+    const onInputChange = (0, react_1.useCallback)(event => {
+        onSelect?.(filterFiles(event.target.files || []), event);
+        // очищаем поле чтобы можно было выбрать тот же файл повторно
+        event.target.value = '';
+    }, [filterFiles, onSelect]);
+    const { active, bind } = (0, utils_1.useFilesDrop)(event => {
+        onSelect?.(filterFiles(event.dataTransfer.files), event);
+    });
+    const rootClassName = (0, classnames_1.default)(styles.root, size !== 'unset' && styles[`size-${size}`], active && styles.active, failed && styles.failed, disabled && styles.disabled, className);
+    return ((0, jsx_runtime_1.jsxs)("div", { ...rootProps, ...bind, "data-testid": testId, style: style, className: rootClassName, tabIndex: disabled ? -1 : 0, role: 'button', onFocus: event => {
+            if (!disabled) {
+                rootProps?.onFocus?.(event);
+            }
+        }, onClick: event => {
+            if (!disabled) {
+                inputRef.current?.click();
+                rootProps?.onClick?.(event);
+            }
+        }, onKeyDown: event => {
+            // имитируем поведение кнопки
+            if (!disabled && ['Enter', 'Space'].includes(event.code)) {
+                inputRef.current?.click();
+                rootProps?.onKeyDown?.(event);
+            }
+        }, onBlur: event => {
+            rootProps?.onBlur?.(event);
+        }, children: [(0, jsx_runtime_1.jsx)(Upload_1.default, { className: styles.icon }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles.info, !title && !description && styles.empty), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles.text, styles.primary), children: [(0, jsx_runtime_1.jsx)("input", { ...inputProps, ref: inputRef, type: 'file', multiple: multiple, className: (0, classnames_1.default)(styles.input, inputProps?.className), onChange: onInputChange, onClick: e => {
+                                    // ВАЖНО: для того чтобы при клике на корневом элементе не вызывался второй клик
+                                    e.stopPropagation();
+                                }, "data-testid": 'upload-area:input', disabled: disabled }), (0, jsx_runtime_1.jsx)(link_1.Link, { pseudo: true, "data-testid": 'upload-area:anchor', disabled: disabled, children: title })] }), description && (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles.text, styles.secondary), children: description })] })] }));
+}
+//# sourceMappingURL=upload-area.js.map

package/dist/upload-area/upload-area.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"upload-area.js","sourceRoot":"","sources":["../../src/upload-area/upload-area.tsx"],"names":[],"mappings":"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"}

package/dist/upload-area/upload-area.module.scss

@@ -0,0 +1,81 @@
+@use '../colors';
+@use './upload-area-util';
+
+.root {
+  --secondary-text-color: #{colors.$basic-gray38};
+  display: flex;
+  align-items: center;
+  justify-content: var(--justify-content);
+  padding: calc(var(--padding-y) - 1px) calc(var(--padding-x) - 1px);
+  min-height: var(--min-height);
+  border-radius: 8px;
+  border: 1px dashed colors.$basic-gray24;
+  max-width: 100%;
+  overflow: hidden;
+  outline: 0;
+  background: #fff;
+  &.size-s {
+    @include upload-area-util.size-s;
+  }
+  &.size-m {
+    @include upload-area-util.size-m;
+  }
+  &:not(.disabled):hover {
+    cursor: pointer;
+    border-color: colors.$basic-blue;
+  }
+  &:not(.disabled).active,
+  &:not(.disabled):focus-visible {
+    border-color: colors.$basic-blue;
+    border-style: solid;
+  }
+  &.disabled {
+    background: colors.$basic-gray4;
+    --secondary-text-color: #{colors.$basic-gray24};
+  }
+  &.failed {
+    --secondary-text-color: #{colors.$additional-deep-red};
+  }
+}
+
+.icon {
+  width: var(--icon-size);
+  height: var(--icon-size);
+  display: var(--icon-display);
+  flex-shrink: 0;
+  fill: colors.$basic-gray24;
+}
+
+.icon + .info:not(.empty) {
+  margin-left: var(--icon-gap);
+}
+
+.info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+  align-items: flex-start;
+  text-align: left;
+  .text {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    &.primary {
+      font-size: 16px;
+      line-height: 24px;
+    }
+    &.secondary {
+      margin-top: 4px;
+      font-size: 14px;
+      line-height: 20px;
+      color: var(--secondary-text-color);
+    }
+  }
+}
+
+.input {
+  display: none;
+}

package/dist/upload-area/utils.d.ts

@@ -0,0 +1,24 @@
+import { DragEventHandler } from 'react';
+import { DescriptionPayload } from './types';
+type UseFilesDropResult<T> = {
+    active: boolean;
+    bind: {
+        onDragEnter: DragEventHandler<T>;
+        onDragOver: DragEventHandler<T>;
+        onDragLeave: DragEventHandler<T>;
+        onDrop: DragEventHandler<T>;
+    };
+};
+/**
+ * Хук обработки перетаскивания файлов на элемент.
+ * @param callback Опции.
+ * @return Данные.
+ */
+export declare function useFilesDrop<T extends HTMLElement = HTMLElement>(callback: DragEventHandler<T>): UseFilesDropResult<T>;
+/**
+ * Возвращает строку с описанием файлов для отправки по дизайн-гайдам.
+ * @param payload Информация о файлах.
+ * @return Строка.
+ */
+export declare function getFilesDescription({ countLimit, sizeLimit, formats, }: DescriptionPayload): string;
+export {};

package/dist/upload-area/utils.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFilesDrop = useFilesDrop;
+exports.getFilesDescription = getFilesDescription;
+const react_1 = require("react");
+const use_identity_ref_1 = require("../hooks/use-identity-ref");
+const get_declination_1 = require("../helpers/get-declination");
+/**
+ * Хук обработки перетаскивания файлов на элемент.
+ * @param callback Опции.
+ * @return Данные.
+ */
+function useFilesDrop(callback) {
+    const [active, setActive] = (0, react_1.useState)(false);
+    const callbackRef = (0, use_identity_ref_1.useIdentityRef)(callback);
+    const onDragEnter = (0, react_1.useCallback)(event => {
+        event.preventDefault();
+        setActive(true);
+    }, []);
+    const onDragOver = (0, react_1.useCallback)(event => {
+        event.preventDefault();
+        setActive(true);
+    }, []);
+    const onDragLeave = (0, react_1.useCallback)(event => {
+        event.preventDefault();
+        const { currentTarget, relatedTarget } = event;
+        // игнорируем переход по дочерним элементам
+        if (!relatedTarget ||
+            (currentTarget instanceof Node &&
+                relatedTarget instanceof Node &&
+                !currentTarget.contains(relatedTarget))) {
+            setActive(false);
+        }
+    }, []);
+    const onDrop = (0, react_1.useCallback)(event => {
+        event.preventDefault();
+        setActive(false);
+        callbackRef.current(event);
+    }, []);
+    return {
+        active,
+        bind: {
+            onDragEnter,
+            onDragOver,
+            onDragLeave,
+            onDrop,
+        },
+    };
+}
+/**
+ * Возвращает строку с описанием файлов для отправки по дизайн-гайдам.
+ * @param payload Информация о файлах.
+ * @return Строка.
+ */
+function getFilesDescription({ countLimit, sizeLimit, formats, }) {
+    const description = [
+        typeof countLimit === 'number' && countLimit > 0
+            ? `${countLimit} ${(0, get_declination_1.getDeclination)(countLimit, ['файл', 'файла', 'файлов'])}`
+            : null,
+        formats ? `формат ${formats}` : null,
+        sizeLimit ? `до ${sizeLimit}` : null,
+    ]
+        .filter(Boolean)
+        .join(', ');
+    return description;
+}
+//# sourceMappingURL=utils.js.map

package/dist/upload-area/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/upload-area/utils.ts"],"names":[],"mappings":";;AAoBA,oCA+CC;AAOD,kDAkBC;AA5FD,iCAAgE;AAChE,gEAA2D;AAC3D,gEAA4D;AAa5D;;;;GAIG;AACH,SAAgB,YAAY,CAC1B,QAA6B;IAE7B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,WAAW,GAAG,IAAA,iCAAc,EAAC,QAAQ,CAAC,CAAC;IAE7C,MAAM,WAAW,GAAG,IAAA,mBAAW,EAAsB,KAAK,CAAC,EAAE;QAC3D,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,SAAS,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,IAAA,mBAAW,EAAsB,KAAK,CAAC,EAAE;QAC1D,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,SAAS,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,WAAW,GAAG,IAAA,mBAAW,EAAsB,KAAK,CAAC,EAAE;QAC3D,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC;QAE/C,2CAA2C;QAC3C,IACE,CAAC,aAAa;YACd,CAAC,aAAa,YAAY,IAAI;gBAC5B,aAAa,YAAY,IAAI;gBAC7B,CAAC,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,EACzC,CAAC;YACD,SAAS,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,MAAM,GAAG,IAAA,mBAAW,EAAsB,KAAK,CAAC,EAAE;QACtD,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,SAAS,CAAC,KAAK,CAAC,CAAC;QACjB,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,MAAM;QAEN,IAAI,EAAE;YACJ,WAAW;YACX,UAAU;YACV,WAAW;YACX,MAAM;SACP;KACF,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,SAAgB,mBAAmB,CAAC,EAClC,UAAU,EACV,SAAS,EACT,OAAO,GACY;IACnB,MAAM,WAAW,GAAW;QAC1B,OAAO,UAAU,KAAK,QAAQ,IAAI,UAAU,GAAG,CAAC;YAC9C,CAAC,CAAC,GAAG,UAAU,IAAI,IAAA,gCAAc,EAAC,UAAU,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,EAAE;YAC5E,CAAC,CAAC,IAAI;QAER,OAAO,CAAC,CAAC,CAAC,UAAU,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI;QAEpC,SAAS,CAAC,CAAC,CAAC,MAAM,SAAS,EAAE,CAAC,CAAC,CAAC,IAAI;KACrC;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,IAAI,CAAC,CAAC;IAEd,OAAO,WAAW,CAAC;AACrB,CAAC"}