@alfalab/core-components 45.8.0-beta.5 → 45.9.0-beta.0

package/attach/cssm/Component.js

@@ -1,27 +1,17 @@
-Object.defineProperty(exports, '__esModule', { value: true });
+import React, { useState, useRef, useEffect } from 'react';
+import mergeRefs from 'react-merge-refs';
+import cn from 'classnames';
+import { Button } from '../../button/cssm';
+import { KeyboardFocusable } from '../../keyboard-focusable/cssm';
+import { ProgressBar } from '../../progress-bar/cssm';
+import { PaperclipMIcon } from '@alfalab/icons-glyph/PaperclipMIcon';
+import { PaperclipSIcon } from '@alfalab/icons-glyph/PaperclipSIcon';
+import { pluralize } from '@alfalab/utils';
+import { truncateFilename } from './utils/index.js';
+import styles from './index.module.css';
 
-var tslib = require('tslib');
-var React = require('react');
-var mergeRefs = require('react-merge-refs');
-var cn = require('classnames');
-var coreComponentsButton = require('../../button/cssm');
-var coreComponentsKeyboardFocusable = require('../../keyboard-focusable/cssm');
-var coreComponentsProgressBar = require('../../progress-bar/cssm');
-var PaperclipMIcon = require('@alfalab/icons-glyph/PaperclipMIcon');
-var PaperclipSIcon = require('@alfalab/icons-glyph/PaperclipSIcon');
-var utils = require('@alfalab/utils');
-var utils_index = require('./utils/index.js');
-var styles = require('./index.module.css');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
-var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
-var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
-
-var MULTIPLE_TEXTS = ['файл', 'файла', 'файлов'];
-var SIZE_TO_CLASSNAME_MAP = {
+const MULTIPLE_TEXTS = ['файл', 'файла', 'файлов'];
+const SIZE_TO_CLASSNAME_MAP = {
     xxs: 'size-32',
     xs: 'size-40',
     s: 'size-48',
@@ -33,26 +23,24 @@ var SIZE_TO_CLASSNAME_MAP = {
     56: 'size-56',
     64: 'size-64',
 };
-var Attach = React__default.default.forwardRef(function (_a, ref) {
-    var _b;
-    var _c = _a.size, size = _c === void 0 ? 48 : _c, accept = _a.accept, _d = _a.buttonContent, buttonContent = _d === void 0 ? 'Выберите файл' : _d, _e = _a.buttonProps, buttonProps = _e === void 0 ? {} : _e, className = _a.className, fileClassName = _a.fileClassName, noFileClassName = _a.noFileClassName, disabled = _a.disabled, dataTestId = _a.dataTestId, id = _a.id, maxFilenameLength = _a.maxFilenameLength, multiple = _a.multiple, _f = _a.noFileText, noFileText = _f === void 0 ? 'Нет файла' : _f, progressBarPercent = _a.progressBarPercent, defaultValue = _a.defaultValue, value = _a.value, onChange = _a.onChange, onClear = _a.onClear, restProps = tslib.__rest(_a, ["size", "accept", "buttonContent", "buttonProps", "className", "fileClassName", "noFileClassName", "disabled", "dataTestId", "id", "maxFilenameLength", "multiple", "noFileText", "progressBarPercent", "defaultValue", "value", "onChange", "onClear"]);
-    var uncontrolled = value === undefined;
-    var _g = React.useState(defaultValue || []), files = _g[0], setFiles = _g[1];
-    var inputRef = React.useRef(null);
-    var labelRef = React.useRef(null);
-    var buttonRef = React.useRef(null);
-    var getDefaultLeftAddon = function () {
-        var IconComponent;
+const Attach = React.forwardRef(({ size = 48, accept, buttonContent = 'Выберите файл', buttonProps = {}, className, fileClassName, noFileClassName, disabled, dataTestId, id, maxFilenameLength, multiple, noFileText = 'Нет файла', progressBarPercent, defaultValue, value, onChange, onClear, ...restProps }, ref) => {
+    const uncontrolled = value === undefined;
+    const [files, setFiles] = useState(defaultValue || []);
+    const inputRef = useRef(null);
+    const labelRef = useRef(null);
+    const buttonRef = useRef(null);
+    const getDefaultLeftAddon = () => {
+        let IconComponent;
         if (['size-40', 'size-32'].includes(SIZE_TO_CLASSNAME_MAP[size])) {
-            IconComponent = PaperclipSIcon.PaperclipSIcon;
+            IconComponent = PaperclipSIcon;
         }
         else {
-            IconComponent = PaperclipMIcon.PaperclipMIcon;
+            IconComponent = PaperclipMIcon;
         }
-        return React__default.default.createElement(IconComponent, { className: styles__default.default.icon });
+        return React.createElement(IconComponent, { className: styles.icon });
     };
-    var handleInputChange = function (event) {
-        var filesArray = event.target.files ? Array.from(event.target.files) : [];
+    const handleInputChange = (event) => {
+        const filesArray = event.target.files ? Array.from(event.target.files) : [];
         if (onChange) {
             onChange(event, { files: filesArray });
         }
@@ -63,7 +51,7 @@ var Attach = React__default.default.forwardRef(function (_a, ref) {
             inputRef.current.value = '';
         }
     };
-    var handleButtonClick = function (event) {
+    const handleButtonClick = (event) => {
         if (labelRef.current) {
             labelRef.current.click();
         }
@@ -74,7 +62,7 @@ var Attach = React__default.default.forwardRef(function (_a, ref) {
             buttonProps.onClick(event);
         }
     };
-    var handleClearClick = function (ev) {
+    const handleClearClick = (ev) => {
         if (uncontrolled) {
             setFiles([]);
         }
@@ -82,31 +70,28 @@ var Attach = React__default.default.forwardRef(function (_a, ref) {
             onClear(ev);
         }
     };
-    var statusTextContent = files.length === 1 ? (utils_index.truncateFilename(files[0].name, maxFilenameLength)) : (React__default.default.createElement("abbr", { className: styles__default.default.abbreviation, title: files.map(function (file) { return file.name; }).join() },
+    const statusTextContent = files.length === 1 ? (truncateFilename(files[0].name, maxFilenameLength)) : (React.createElement("abbr", { className: styles.abbreviation, title: files.map((file) => file.name).join() },
         files.length,
         " ",
-        utils.pluralize.apply(void 0, tslib.__spreadArray([files.length], MULTIPLE_TEXTS, false))));
-    React.useEffect(function () {
+        pluralize(files.length, ...MULTIPLE_TEXTS)));
+    useEffect(() => {
         if (!uncontrolled) {
             setFiles(value || []);
         }
     }, [uncontrolled, value]);
-    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, styles__default.default[SIZE_TO_CLASSNAME_MAP[size]], (_b = {},
-            _b[styles__default.default.disabled] = disabled,
-            _b), className) },
-        React__default.default.createElement(coreComponentsButton.Button, tslib.__assign({}, buttonProps, { size: size, disabled: disabled, view: (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.view) || 'secondary', leftAddons: (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.leftAddons) || getDefaultLeftAddon(), onClick: handleButtonClick, ref: buttonRef }),
-            React__default.default.createElement("span", null, buttonContent)),
-        React__default.default.createElement("label", { className: styles__default.default.label, htmlFor: id, ref: labelRef },
-            React__default.default.createElement("input", tslib.__assign({}, restProps, { className: styles__default.default.control, accept: accept, disabled: disabled, id: id, multiple: multiple, tabIndex: -1, type: 'file', onChange: handleInputChange, ref: mergeRefs__default.default([ref, inputRef]), "data-test-id": dataTestId }))),
-        files && files.length > 0 ? (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.file, fileClassName) },
-            React__default.default.createElement("span", null, statusTextContent),
-            React__default.default.createElement(coreComponentsKeyboardFocusable.KeyboardFocusable, null, function (targetRef, focused) {
-                var _a;
-                return (React__default.default.createElement("button", { "aria-label": '\u043E\u0447\u0438\u0441\u0442\u0438\u0442\u044C', type: 'button', className: cn__default.default(styles__default.default.clear, (_a = {},
-                        _a[styles__default.default.focused] = focused,
-                        _a)), onClick: handleClearClick, ref: targetRef }));
-            }),
-            progressBarPercent && (React__default.default.createElement(coreComponentsProgressBar.ProgressBar, { className: styles__default.default.progressBar, value: progressBarPercent, view: 'positive' })))) : (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.noFile, noFileClassName) }, noFileText))));
+    return (React.createElement("div", { className: cn(styles.component, styles[SIZE_TO_CLASSNAME_MAP[size]], {
+            [styles.disabled]: disabled,
+        }, className) },
+        React.createElement(Button, { ...buttonProps, size: size, disabled: disabled, view: buttonProps?.view || 'secondary', leftAddons: buttonProps?.leftAddons || getDefaultLeftAddon(), onClick: handleButtonClick, ref: buttonRef },
+            React.createElement("span", null, buttonContent)),
+        React.createElement("label", { className: styles.label, htmlFor: id, ref: labelRef },
+            React.createElement("input", { ...restProps, className: styles.control, accept: accept, disabled: disabled, id: id, multiple: multiple, tabIndex: -1, type: 'file', onChange: handleInputChange, ref: mergeRefs([ref, inputRef]), "data-test-id": dataTestId })),
+        files && files.length > 0 ? (React.createElement("div", { className: cn(styles.file, fileClassName) },
+            React.createElement("span", null, statusTextContent),
+            React.createElement(KeyboardFocusable, null, (targetRef, focused) => (React.createElement("button", { "aria-label": '\u043E\u0447\u0438\u0441\u0442\u0438\u0442\u044C', type: 'button', className: cn(styles.clear, {
+                    [styles.focused]: focused,
+                }), onClick: handleClearClick, ref: targetRef }))),
+            progressBarPercent && (React.createElement(ProgressBar, { className: styles.progressBar, value: progressBarPercent, view: 'positive' })))) : (React.createElement("div", { className: cn(styles.noFile, noFileClassName) }, noFileText))));
 });
 
-exports.Attach = Attach;
+export { Attach };

package/attach/cssm/index.js

@@ -1,7 +1,12 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var Component = require('./Component.js');
-
-
-
-exports.Attach = Component.Attach;
+export { Attach } from './Component.js';
+import 'react';
+import 'react-merge-refs';
+import 'classnames';
+import '../../button/cssm';
+import '../../keyboard-focusable/cssm';
+import '../../progress-bar/cssm';
+import '@alfalab/icons-glyph/PaperclipMIcon';
+import '@alfalab/icons-glyph/PaperclipSIcon';
+import '@alfalab/utils';
+import './utils/index.js';
+import './index.module.css';

package/attach/cssm/utils/index.js

@@ -1,11 +1,9 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
 function truncateFilename(filename, maxFilenameLength) {
     if (maxFilenameLength && filename.length > maxFilenameLength) {
-        var lengthOfPart = Math.round(maxFilenameLength / 2) - 1;
-        return "".concat(filename.substr(0, lengthOfPart), "\u2026").concat(filename.substr(filename.length - lengthOfPart));
+        const lengthOfPart = Math.round(maxFilenameLength / 2) - 1;
+        return `${filename.substr(0, lengthOfPart)}…${filename.substr(filename.length - lengthOfPart)}`;
     }
     return filename;
 }
 
-exports.truncateFilename = truncateFilename;
+export { truncateFilename };

package/attach/esm/Component.js

@@ -10,7 +10,7 @@ import { PaperclipSIcon } from '@alfalab/icons-glyph/PaperclipSIcon';
 import { pluralize } from '@alfalab/utils';
 import { truncateFilename } from './utils/index.js';
 
-var styles = {"component":"attach__component_zxhq4","label":"attach__label_zxhq4","control":"attach__control_zxhq4","size-32":"attach__size-32_zxhq4","file":"attach__file_zxhq4","noFile":"attach__noFile_zxhq4","size-40":"attach__size-40_zxhq4","size-48":"attach__size-48_zxhq4","size-56":"attach__size-56_zxhq4","size-64":"attach__size-64_zxhq4","abbreviation":"attach__abbreviation_zxhq4","clear":"attach__clear_zxhq4","progressBar":"attach__progressBar_zxhq4","disabled":"attach__disabled_zxhq4","icon":"attach__icon_zxhq4","focused":"attach__focused_zxhq4"};
+var styles = {"component":"attach__component_v2dow","label":"attach__label_v2dow","control":"attach__control_v2dow","size-32":"attach__size-32_v2dow","file":"attach__file_v2dow","noFile":"attach__noFile_v2dow","size-40":"attach__size-40_v2dow","size-48":"attach__size-48_v2dow","size-56":"attach__size-56_v2dow","size-64":"attach__size-64_v2dow","abbreviation":"attach__abbreviation_v2dow","clear":"attach__clear_v2dow","progressBar":"attach__progressBar_v2dow","disabled":"attach__disabled_v2dow","icon":"attach__icon_v2dow","focused":"attach__focused_v2dow"};
 require('./index.css');
 
 var MULTIPLE_TEXTS = ['файл', 'файла', 'файлов'];

package/attach/esm/index.css

@@ -19,7 +19,7 @@
 } :root {
 } :root {
     --focus-color: var(--color-light-border-link);
-} .attach__component_zxhq4 {
+} .attach__component_v2dow {
     display: inline-flex;
     align-items: center;
     position: relative;
@@ -28,7 +28,7 @@
     * {
         box-sizing: border-box;
     }
-} .attach__label_zxhq4 {
+} .attach__label_v2dow {
     position: absolute;
     top: 0;
     left: 0;
@@ -37,43 +37,43 @@
     cursor: inherit;
     width: 0;
     height: 0;
-} .attach__control_zxhq4 {
+} .attach__control_v2dow {
     opacity: 0;
     cursor: inherit
-} .attach__control_zxhq4::-webkit-file-upload-button {
+} .attach__control_v2dow::-webkit-file-upload-button {
         cursor: inherit;
-    } /* TODO обновить типографику на новую, когда ее зарелизят */ .attach__size-32_zxhq4 .attach__file_zxhq4,
-.attach__size-32_zxhq4 .attach__noFile_zxhq4,
-.attach__size-40_zxhq4 .attach__file_zxhq4,
-.attach__size-40_zxhq4 .attach__noFile_zxhq4 {
+    } /* TODO обновить типографику на новую, когда ее зарелизят */ .attach__size-32_v2dow .attach__file_v2dow,
+.attach__size-32_v2dow .attach__noFile_v2dow,
+.attach__size-40_v2dow .attach__file_v2dow,
+.attach__size-40_v2dow .attach__noFile_v2dow {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
-} .attach__size-48_zxhq4 .attach__file_zxhq4,
-.attach__size-48_zxhq4 .attach__noFile_zxhq4 {
+} .attach__size-48_v2dow .attach__file_v2dow,
+.attach__size-48_v2dow .attach__noFile_v2dow {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
-} .attach__size-56_zxhq4 .attach__file_zxhq4,
-.attach__size-56_zxhq4 .attach__noFile_zxhq4 {
+} .attach__size-56_v2dow .attach__file_v2dow,
+.attach__size-56_v2dow .attach__noFile_v2dow {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
-} .attach__size-64_zxhq4 .attach__file_zxhq4,
-.attach__size-64_zxhq4 .attach__noFile_zxhq4 {
+} .attach__size-64_v2dow .attach__file_v2dow,
+.attach__size-64_v2dow .attach__noFile_v2dow {
     font-size: 18px;
     line-height: 22px;
     font-weight: 400;
     margin-left: var(--gap-s);
-} .attach__file_zxhq4,
-.attach__noFile_zxhq4 {
+} .attach__file_v2dow,
+.attach__noFile_v2dow {
     display: inline-block;
     margin-left: 0.5em;
     text-align: center;
     color: var(--color-light-text-secondary);
-} .attach__abbreviation_zxhq4 {
+} .attach__abbreviation_v2dow {
     text-decoration: none;
-} .attach__clear_zxhq4 {
+} .attach__clear_v2dow {
     margin: 0 0 0 5px;
     padding: 0;
     cursor: pointer;
@@ -84,17 +84,17 @@
     font: inherit;
     background: none;
     border: none
-} .attach__clear_zxhq4:before {
+} .attach__clear_v2dow:before {
         content: '\D7';
-    } .attach__progressBar_zxhq4 {
+    } .attach__progressBar_v2dow {
     margin-top: var(--gap-2xs);
-} .attach__disabled_zxhq4 .attach__noFile_zxhq4,
-.attach__disabled_zxhq4 .attach__file_zxhq4,
-.attach__disabled_zxhq4 .attach__icon_zxhq4 {
+} .attach__disabled_v2dow .attach__noFile_v2dow,
+.attach__disabled_v2dow .attach__file_v2dow,
+.attach__disabled_v2dow .attach__icon_v2dow {
     opacity: 0.3;
-} .attach__disabled_zxhq4 .attach__clear_zxhq4 {
+} .attach__disabled_v2dow .attach__clear_v2dow {
     display: none;
-} .attach__focused_zxhq4 {
+} .attach__focused_v2dow {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/attach/index.css

@@ -19,7 +19,7 @@
 } :root {
 } :root {
     --focus-color: var(--color-light-border-link);
-} .attach__component_zxhq4 {
+} .attach__component_v2dow {
     display: inline-flex;
     align-items: center;
     position: relative;
@@ -28,7 +28,7 @@
     * {
         box-sizing: border-box;
     }
-} .attach__label_zxhq4 {
+} .attach__label_v2dow {
     position: absolute;
     top: 0;
     left: 0;
@@ -37,43 +37,43 @@
     cursor: inherit;
     width: 0;
     height: 0;
-} .attach__control_zxhq4 {
+} .attach__control_v2dow {
     opacity: 0;
     cursor: inherit
-} .attach__control_zxhq4::-webkit-file-upload-button {
+} .attach__control_v2dow::-webkit-file-upload-button {
         cursor: inherit;
-    } /* TODO обновить типографику на новую, когда ее зарелизят */ .attach__size-32_zxhq4 .attach__file_zxhq4,
-.attach__size-32_zxhq4 .attach__noFile_zxhq4,
-.attach__size-40_zxhq4 .attach__file_zxhq4,
-.attach__size-40_zxhq4 .attach__noFile_zxhq4 {
+    } /* TODO обновить типографику на новую, когда ее зарелизят */ .attach__size-32_v2dow .attach__file_v2dow,
+.attach__size-32_v2dow .attach__noFile_v2dow,
+.attach__size-40_v2dow .attach__file_v2dow,
+.attach__size-40_v2dow .attach__noFile_v2dow {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
-} .attach__size-48_zxhq4 .attach__file_zxhq4,
-.attach__size-48_zxhq4 .attach__noFile_zxhq4 {
+} .attach__size-48_v2dow .attach__file_v2dow,
+.attach__size-48_v2dow .attach__noFile_v2dow {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
-} .attach__size-56_zxhq4 .attach__file_zxhq4,
-.attach__size-56_zxhq4 .attach__noFile_zxhq4 {
+} .attach__size-56_v2dow .attach__file_v2dow,
+.attach__size-56_v2dow .attach__noFile_v2dow {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
-} .attach__size-64_zxhq4 .attach__file_zxhq4,
-.attach__size-64_zxhq4 .attach__noFile_zxhq4 {
+} .attach__size-64_v2dow .attach__file_v2dow,
+.attach__size-64_v2dow .attach__noFile_v2dow {
     font-size: 18px;
     line-height: 22px;
     font-weight: 400;
     margin-left: var(--gap-s);
-} .attach__file_zxhq4,
-.attach__noFile_zxhq4 {
+} .attach__file_v2dow,
+.attach__noFile_v2dow {
     display: inline-block;
     margin-left: 0.5em;
     text-align: center;
     color: var(--color-light-text-secondary);
-} .attach__abbreviation_zxhq4 {
+} .attach__abbreviation_v2dow {
     text-decoration: none;
-} .attach__clear_zxhq4 {
+} .attach__clear_v2dow {
     margin: 0 0 0 5px;
     padding: 0;
     cursor: pointer;
@@ -84,17 +84,17 @@
     font: inherit;
     background: none;
     border: none
-} .attach__clear_zxhq4:before {
+} .attach__clear_v2dow:before {
         content: '\D7';
-    } .attach__progressBar_zxhq4 {
+    } .attach__progressBar_v2dow {
     margin-top: var(--gap-2xs);
-} .attach__disabled_zxhq4 .attach__noFile_zxhq4,
-.attach__disabled_zxhq4 .attach__file_zxhq4,
-.attach__disabled_zxhq4 .attach__icon_zxhq4 {
+} .attach__disabled_v2dow .attach__noFile_v2dow,
+.attach__disabled_v2dow .attach__file_v2dow,
+.attach__disabled_v2dow .attach__icon_v2dow {
     opacity: 0.3;
-} .attach__disabled_zxhq4 .attach__clear_zxhq4 {
+} .attach__disabled_v2dow .attach__clear_v2dow {
     display: none;
-} .attach__focused_zxhq4 {
+} .attach__focused_v2dow {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/attach/modern/Component.js

@@ -9,7 +9,7 @@ import { PaperclipSIcon } from '@alfalab/icons-glyph/PaperclipSIcon';
 import { pluralize } from '@alfalab/utils';
 import { truncateFilename } from './utils/index.js';
 
-const styles = {"component":"attach__component_zxhq4","label":"attach__label_zxhq4","control":"attach__control_zxhq4","size-32":"attach__size-32_zxhq4","file":"attach__file_zxhq4","noFile":"attach__noFile_zxhq4","size-40":"attach__size-40_zxhq4","size-48":"attach__size-48_zxhq4","size-56":"attach__size-56_zxhq4","size-64":"attach__size-64_zxhq4","abbreviation":"attach__abbreviation_zxhq4","clear":"attach__clear_zxhq4","progressBar":"attach__progressBar_zxhq4","disabled":"attach__disabled_zxhq4","icon":"attach__icon_zxhq4","focused":"attach__focused_zxhq4"};
+const styles = {"component":"attach__component_v2dow","label":"attach__label_v2dow","control":"attach__control_v2dow","size-32":"attach__size-32_v2dow","file":"attach__file_v2dow","noFile":"attach__noFile_v2dow","size-40":"attach__size-40_v2dow","size-48":"attach__size-48_v2dow","size-56":"attach__size-56_v2dow","size-64":"attach__size-64_v2dow","abbreviation":"attach__abbreviation_v2dow","clear":"attach__clear_v2dow","progressBar":"attach__progressBar_v2dow","disabled":"attach__disabled_v2dow","icon":"attach__icon_v2dow","focused":"attach__focused_v2dow"};
 require('./index.css');
 
 const MULTIPLE_TEXTS = ['файл', 'файла', 'файлов'];

package/attach/modern/index.css

@@ -19,7 +19,7 @@
 } :root {
 } :root {
     --focus-color: var(--color-light-border-link);
-} .attach__component_zxhq4 {
+} .attach__component_v2dow {
     display: inline-flex;
     align-items: center;
     position: relative;
@@ -28,7 +28,7 @@
     * {
         box-sizing: border-box;
     }
-} .attach__label_zxhq4 {
+} .attach__label_v2dow {
     position: absolute;
     top: 0;
     left: 0;
@@ -37,43 +37,43 @@
     cursor: inherit;
     width: 0;
     height: 0;
-} .attach__control_zxhq4 {
+} .attach__control_v2dow {
     opacity: 0;
     cursor: inherit
-} .attach__control_zxhq4::-webkit-file-upload-button {
+} .attach__control_v2dow::-webkit-file-upload-button {
         cursor: inherit;
-    } /* TODO обновить типографику на новую, когда ее зарелизят */ .attach__size-32_zxhq4 .attach__file_zxhq4,
-.attach__size-32_zxhq4 .attach__noFile_zxhq4,
-.attach__size-40_zxhq4 .attach__file_zxhq4,
-.attach__size-40_zxhq4 .attach__noFile_zxhq4 {
+    } /* TODO обновить типографику на новую, когда ее зарелизят */ .attach__size-32_v2dow .attach__file_v2dow,
+.attach__size-32_v2dow .attach__noFile_v2dow,
+.attach__size-40_v2dow .attach__file_v2dow,
+.attach__size-40_v2dow .attach__noFile_v2dow {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
-} .attach__size-48_zxhq4 .attach__file_zxhq4,
-.attach__size-48_zxhq4 .attach__noFile_zxhq4 {
+} .attach__size-48_v2dow .attach__file_v2dow,
+.attach__size-48_v2dow .attach__noFile_v2dow {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
-} .attach__size-56_zxhq4 .attach__file_zxhq4,
-.attach__size-56_zxhq4 .attach__noFile_zxhq4 {
+} .attach__size-56_v2dow .attach__file_v2dow,
+.attach__size-56_v2dow .attach__noFile_v2dow {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
-} .attach__size-64_zxhq4 .attach__file_zxhq4,
-.attach__size-64_zxhq4 .attach__noFile_zxhq4 {
+} .attach__size-64_v2dow .attach__file_v2dow,
+.attach__size-64_v2dow .attach__noFile_v2dow {
     font-size: 18px;
     line-height: 22px;
     font-weight: 400;
     margin-left: var(--gap-s);
-} .attach__file_zxhq4,
-.attach__noFile_zxhq4 {
+} .attach__file_v2dow,
+.attach__noFile_v2dow {
     display: inline-block;
     margin-left: 0.5em;
     text-align: center;
     color: var(--color-light-text-secondary);
-} .attach__abbreviation_zxhq4 {
+} .attach__abbreviation_v2dow {
     text-decoration: none;
-} .attach__clear_zxhq4 {
+} .attach__clear_v2dow {
     margin: 0 0 0 5px;
     padding: 0;
     cursor: pointer;
@@ -84,17 +84,17 @@
     font: inherit;
     background: none;
     border: none
-} .attach__clear_zxhq4:before {
+} .attach__clear_v2dow:before {
         content: '\D7';
-    } .attach__progressBar_zxhq4 {
+    } .attach__progressBar_v2dow {
     margin-top: var(--gap-2xs);
-} .attach__disabled_zxhq4 .attach__noFile_zxhq4,
-.attach__disabled_zxhq4 .attach__file_zxhq4,
-.attach__disabled_zxhq4 .attach__icon_zxhq4 {
+} .attach__disabled_v2dow .attach__noFile_v2dow,
+.attach__disabled_v2dow .attach__file_v2dow,
+.attach__disabled_v2dow .attach__icon_v2dow {
     opacity: 0.3;
-} .attach__disabled_zxhq4 .attach__clear_zxhq4 {
+} .attach__disabled_v2dow .attach__clear_v2dow {
     display: none;
-} .attach__focused_zxhq4 {
+} .attach__focused_v2dow {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/backdrop/Component.js

@@ -10,7 +10,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"backdrop":"backdrop__backdrop_1d6xc","appear":"backdrop__appear_1d6xc","enter":"backdrop__enter_1d6xc","appearActive":"backdrop__appearActive_1d6xc","enterActive":"backdrop__enterActive_1d6xc","appearDone":"backdrop__appearDone_1d6xc","enterDone":"backdrop__enterDone_1d6xc","exit":"backdrop__exit_1d6xc","exitActive":"backdrop__exitActive_1d6xc","exitDone":"backdrop__exitDone_1d6xc"};
+var styles = {"backdrop":"backdrop__backdrop_1bojg","appear":"backdrop__appear_1bojg","enter":"backdrop__enter_1bojg","appearActive":"backdrop__appearActive_1bojg","enterActive":"backdrop__enterActive_1bojg","appearDone":"backdrop__appearDone_1bojg","enterDone":"backdrop__enterDone_1bojg","exit":"backdrop__exit_1bojg","exitActive":"backdrop__exitActive_1bojg","exitDone":"backdrop__exitDone_1bojg"};
 require('./index.css');
 
 var Backdrop = function (_a) {

package/backdrop/cssm/Component.js

@@ -1,22 +1,12 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib = require('tslib');
-var React = require('react');
-var reactTransitionGroup = require('react-transition-group');
-var cn = require('classnames');
-var styles = require('./index.module.css');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
-var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
-
-var Backdrop = function (_a) {
-    var className = _a.className, _b = _a.open, open = _b === void 0 ? false : _b, _c = _a.invisible, invisible = _c === void 0 ? false : _c, _d = _a.timeout, timeout = _d === void 0 ? 200 : _d, children = _a.children, onClose = _a.onClose, dataTestId = _a.dataTestId, _e = _a.transitionClassNames, transitionClassNames = _e === void 0 ? styles__default.default : _e, restProps = tslib.__rest(_a, ["className", "open", "invisible", "timeout", "children", "onClose", "dataTestId", "transitionClassNames"]);
-    var nodeRef = React.useRef(null);
-    return (React__default.default.createElement(reactTransitionGroup.CSSTransition, tslib.__assign({ timeout: timeout, unmountOnExit: true, classNames: transitionClassNames, in: !invisible && open, appear: true }, restProps, { nodeRef: nodeRef }),
-        React__default.default.createElement("div", { ref: nodeRef, "aria-hidden": true, onClick: onClose, "data-test-id": dataTestId, className: cn__default.default(styles__default.default.backdrop, className) }, children)));
+import React, { useRef } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import cn from 'classnames';
+import styles from './index.module.css';
+
+const Backdrop = ({ className, open = false, invisible = false, timeout = 200, children, onClose, dataTestId, transitionClassNames = styles, ...restProps }) => {
+    const nodeRef = useRef(null);
+    return (React.createElement(CSSTransition, { timeout: timeout, unmountOnExit: true, classNames: transitionClassNames, in: !invisible && open, appear: true, ...restProps, nodeRef: nodeRef },
+        React.createElement("div", { ref: nodeRef, "aria-hidden": true, onClick: onClose, "data-test-id": dataTestId, className: cn(styles.backdrop, className) }, children)));
 };
 
-exports.Backdrop = Backdrop;
+export { Backdrop };

package/backdrop/cssm/index.js

@@ -1,7 +1,5 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var Component = require('./Component.js');
-
-
-
-exports.Backdrop = Component.Backdrop;
+export { Backdrop } from './Component.js';
+import 'react';
+import 'react-transition-group';
+import 'classnames';
+import './index.module.css';

package/backdrop/esm/Component.js

@@ -3,7 +3,7 @@ import React, { useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import cn from 'classnames';
 
-var styles = {"backdrop":"backdrop__backdrop_1d6xc","appear":"backdrop__appear_1d6xc","enter":"backdrop__enter_1d6xc","appearActive":"backdrop__appearActive_1d6xc","enterActive":"backdrop__enterActive_1d6xc","appearDone":"backdrop__appearDone_1d6xc","enterDone":"backdrop__enterDone_1d6xc","exit":"backdrop__exit_1d6xc","exitActive":"backdrop__exitActive_1d6xc","exitDone":"backdrop__exitDone_1d6xc"};
+var styles = {"backdrop":"backdrop__backdrop_1bojg","appear":"backdrop__appear_1bojg","enter":"backdrop__enter_1bojg","appearActive":"backdrop__appearActive_1bojg","enterActive":"backdrop__enterActive_1bojg","appearDone":"backdrop__appearDone_1bojg","enterDone":"backdrop__enterDone_1bojg","exit":"backdrop__exit_1bojg","exitActive":"backdrop__exitActive_1bojg","exitDone":"backdrop__exitDone_1bojg"};
 require('./index.css');
 
 var Backdrop = function (_a) {

package/backdrop/esm/index.css

@@ -18,7 +18,7 @@
 } :root {
     --backdrop-visible-background: var(--color-light-overlay-default);
     --backdrop-hidden-background: transparent;
-} .backdrop__backdrop_1d6xc {
+} .backdrop__backdrop_1bojg {
     z-index: -1;
     position: fixed;
     right: 0;
@@ -26,19 +26,19 @@
     top: 0;
     left: 0;
     -webkit-tap-highlight-color: transparent; /* убирает хайлайт */
-} .backdrop__appear_1d6xc,
-.backdrop__enter_1d6xc {
+} .backdrop__appear_1bojg,
+.backdrop__enter_1bojg {
     background-color: var(--backdrop-hidden-background);
-} .backdrop__appearActive_1d6xc,
-.backdrop__enterActive_1d6xc,
-.backdrop__appearDone_1d6xc,
-.backdrop__enterDone_1d6xc {
+} .backdrop__appearActive_1bojg,
+.backdrop__enterActive_1bojg,
+.backdrop__appearDone_1bojg,
+.backdrop__enterDone_1bojg {
     background-color: var(--backdrop-visible-background);
     transition: background-color 200ms ease-in;
-} .backdrop__exit_1d6xc {
+} .backdrop__exit_1bojg {
     background-color: var(--backdrop-visible-background);
-} .backdrop__exitActive_1d6xc,
-.backdrop__exitDone_1d6xc {
+} .backdrop__exitActive_1bojg,
+.backdrop__exitDone_1bojg {
     background-color: var(--backdrop-hidden-background);
     transition: background-color 200ms ease-out;
 }