@alfalab/core-components 27.7.1-beta.0 → 27.9.0-beta.0

package/amount-input/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 1g4n3 */
+/* hash: 1rejl */
 :root {
 
     /* Hard */
@@ -19,18 +19,18 @@
 * Делаем скрытый текст где держим то же значение, добавляем символ валюты
 * Важно расположить этот текст ровно на месте инпута и чтобы он имел те же параметры что и текст в инпуте
 */
-.amount-input__container_aqkwn {
+.amount-input__container_122f1 {
     position: relative;
 }
-.amount-input__bold_aqkwn .amount-input__input_aqkwn,
-.amount-input__bold_aqkwn .amount-input__suffixContainer_aqkwn {
+.amount-input__bold_122f1 .amount-input__input_122f1,
+.amount-input__bold_122f1 .amount-input__suffixContainer_122f1 {
     font-weight: bold;
 }
 /* суффикс = текст в поле. Скрываем спейсер, чтобы суффикс выглядел как введенное в поле значение */
-.amount-input__suffixContainer_aqkwn > *:first-child {
+.amount-input__suffixContainer_122f1 > *:first-child {
     display: none;
 }
-.amount-input__filled_aqkwn .amount-input__input_aqkwn,
-.amount-input__input_aqkwn:focus {
+.amount-input__filled_122f1 .amount-input__input_122f1,
+.amount-input__input_122f1:focus {
     -webkit-text-fill-color: transparent;
 }

package/amount-input/esm/inverted.css

@@ -1,4 +1,4 @@
-/* hash: 1rc6d */
+/* hash: mrm5z */
 :root {
 
     /* Hard */
@@ -12,6 +12,6 @@
         --color-light-text-secondary-inverted
     );
 }
-.amount-input__minorPartAndCurrency_os35a {
+.amount-input__minorPartAndCurrency_k13vp {
     color: var(--amount-input-inverted-minor-part-and-currency-color);
 }

package/amount-input/esm/utils/index.js

@@ -11,14 +11,24 @@ import { formatAmount } from '@alfalab/utils';
  * @param minority количество минорных единиц
  */
 function getFormattedValue(enteredValue, currency, minority) {
+    if (!enteredValue || enteredValue === '-') {
+        return enteredValue;
+    }
+    // eslint-disable-next-line prefer-const
     var _a = enteredValue.split(','), head = _a[0], tail = _a[1];
+    // При вводе "-," указываем, что имеется в виду "-0,"
+    if (head === '-') {
+        head = '-0';
+    }
     var majorPart = formatAmount({
         value: Number(head) * minority,
         currency: currency,
         minority: minority,
+        negativeSymbol: 'hyphen-minus',
     }).majorPart;
-    if (!enteredValue) {
-        return enteredValue;
+    // Так как -0 === 0, formatAmount возвращает положительное значение. Исправляем это здесь
+    if (/^-(,|0),?/.test(enteredValue) && majorPart === '0') {
+        majorPart = "-" + majorPart;
     }
     if (!tail && enteredValue.includes(',')) {
         return majorPart.concat(',');
@@ -29,9 +39,10 @@ function getFormattedValue(enteredValue, currency, minority) {
     return majorPart;
 }
 function getAmountValueFromStr(str, minority) {
-    return str === ''
-        ? null
-        : Math.round(Number(str.replace(',', '.').replace(/[^0-9.]/g, '')) * minority);
+    if (str === '' || str === '-') {
+        return null;
+    }
+    return Math.round(Number(str.replace(',', '.').replace(/[^0-9.-]/g, '')) * minority);
 }
 
 export { getAmountValueFromStr, getFormattedValue };

package/amount-input/index.css

@@ -1,4 +1,4 @@
-/* hash: 1g4n3 */
+/* hash: 1rejl */
 :root {
 
     /* Hard */
@@ -19,18 +19,18 @@
 * Делаем скрытый текст где держим то же значение, добавляем символ валюты
 * Важно расположить этот текст ровно на месте инпута и чтобы он имел те же параметры что и текст в инпуте
 */
-.amount-input__container_aqkwn {
+.amount-input__container_122f1 {
     position: relative;
 }
-.amount-input__bold_aqkwn .amount-input__input_aqkwn,
-.amount-input__bold_aqkwn .amount-input__suffixContainer_aqkwn {
+.amount-input__bold_122f1 .amount-input__input_122f1,
+.amount-input__bold_122f1 .amount-input__suffixContainer_122f1 {
     font-weight: bold;
 }
 /* суффикс = текст в поле. Скрываем спейсер, чтобы суффикс выглядел как введенное в поле значение */
-.amount-input__suffixContainer_aqkwn > *:first-child {
+.amount-input__suffixContainer_122f1 > *:first-child {
     display: none;
 }
-.amount-input__filled_aqkwn .amount-input__input_aqkwn,
-.amount-input__input_aqkwn:focus {
+.amount-input__filled_122f1 .amount-input__input_122f1,
+.amount-input__input_122f1:focus {
     -webkit-text-fill-color: transparent;
 }

package/amount-input/inverted.css

@@ -1,4 +1,4 @@
-/* hash: 1rc6d */
+/* hash: mrm5z */
 :root {
 
     /* Hard */
@@ -12,6 +12,6 @@
         --color-light-text-secondary-inverted
     );
 }
-.amount-input__minorPartAndCurrency_os35a {
+.amount-input__minorPartAndCurrency_k13vp {
     color: var(--amount-input-inverted-minor-part-and-currency-color);
 }

package/amount-input/modern/Component.d.ts

@@ -28,6 +28,11 @@ type AmountInputProps = Omit<InputProps, 'value' | 'onChange' | 'type'> & {
      * Позволяет вводить только целые значения
      */
     integersOnly?: boolean;
+    /**
+     * @default - true. Нельзя вводить отрицательные значения.
+     * Возможность вводить только положительные значения
+     */
+    positiveOnly?: boolean;
     /**
      * Жир
      */
@@ -76,6 +81,11 @@ declare const AmountInput: React.ForwardRefExoticComponent<Pick<InputProps, "cla
      * Позволяет вводить только целые значения
      */
     integersOnly?: boolean | undefined;
+    /**
+     * @default - true. Нельзя вводить отрицательные значения.
+     * Возможность вводить только положительные значения
+     */
+    positiveOnly?: boolean | undefined;
     /**
      * Жир
      */

package/amount-input/modern/Component.js

@@ -5,13 +5,13 @@ import { Input } from '../../input/modern';
 import { withSuffix } from '../../with-suffix/modern';
 import { getAmountValueFromStr, getFormattedValue } from './utils/index.js';
 
-var styles = {"container":"amount-input__container_aqkwn","bold":"amount-input__bold_aqkwn","input":"amount-input__input_aqkwn","suffixContainer":"amount-input__suffixContainer_aqkwn","filled":"amount-input__filled_aqkwn"};
+var styles = {"container":"amount-input__container_122f1","bold":"amount-input__bold_122f1","input":"amount-input__input_122f1","suffixContainer":"amount-input__suffixContainer_122f1","filled":"amount-input__filled_122f1"};
 require('./index.css');
 
-var defaultColors = {"minorPartAndCurrency":"amount-input__minorPartAndCurrency_1m2pt"};
+var defaultColors = {"minorPartAndCurrency":"amount-input__minorPartAndCurrency_1hbqk"};
 require('./default.css');
 
-var invertedColors = {"minorPartAndCurrency":"amount-input__minorPartAndCurrency_os35a"};
+var invertedColors = {"minorPartAndCurrency":"amount-input__minorPartAndCurrency_k13vp"};
 require('./inverted.css');
 
 const colorStyles = {
@@ -25,15 +25,16 @@ const SuffixInput = withSuffix(Input);
 /**
  * Компонент для ввода денежных значений
  */
-const AmountInput = forwardRef(({ value = null, integerLength = 9, minority = 100, currency = 'RUR', suffix = currency, placeholder = `0\u2009${suffix === currency ? getCurrencySymbol(currency) || '' : suffix}`, integersOnly = false, bold = true, colors = 'default', className, focusedClassName, dataTestId, clear = false, onChange, onClear, ...restProps }, ref) => {
+const AmountInput = forwardRef(({ value = null, integerLength = 9, minority = 100, currency = 'RUR', suffix = currency, placeholder = `0\u2009${suffix === currency ? getCurrencySymbol(currency) || '' : suffix}`, integersOnly = false, positiveOnly = true, bold = true, colors = 'default', className, focusedClassName, dataTestId, clear = false, onChange, onClear, ...restProps }, ref) => {
     const getFormattedAmount = useCallback(() => {
-        if (value === '' || value === null)
+        if (value === '' || value === null || value === '-')
             return '';
         return formatAmount({
             value: +value,
             currency,
             minority,
             view: 'default',
+            negativeSymbol: 'hyphen-minus',
         }).formatted;
     }, [currency, minority, value]);
     const [inputValue, setInputValue] = useState(getFormattedAmount());
@@ -52,7 +53,8 @@ const AmountInput = forwardRef(({ value = null, integerLength = 9, minority = 10
         if (integersOnly) {
             [enteredValue] = enteredValue.split(',');
         }
-        const isCorrectEnteredValue = RegExp(`(^[0-9]{1,${integerLength}}(,([0-9]+)?)?$|^\\s*$)`).test(enteredValue);
+        // Сокращение минимальной длины мажорной части числа до 0 позволяет ввести "," => "0,"
+        const isCorrectEnteredValue = RegExp(`(^${positiveOnly ? '' : '-?'}[0-9]{0,${integerLength}}(,([0-9]+)?)?$|^\\s*$)`).test(enteredValue);
         if (isCorrectEnteredValue) {
             const newFormattedValue = getFormattedValue(enteredValue, currency, minority);
             if (newFormattedValue === inputValue) {

package/amount-input/modern/default.css

@@ -1,4 +1,4 @@
-/* hash: brt26 */
+/* hash: 168cw */
 :root {
     --color-light-text-secondary: #546272;
 }
@@ -13,6 +13,6 @@
 :root {
     --amount-input-minor-part-and-currency-color: var(--color-light-text-secondary);
 }
-.amount-input__minorPartAndCurrency_1m2pt {
+.amount-input__minorPartAndCurrency_1hbqk {
     color: var(--amount-input-minor-part-and-currency-color);
 }

package/amount-input/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1g4n3 */
+/* hash: 1rejl */
 :root {
 
     /* Hard */
@@ -19,18 +19,18 @@
 * Делаем скрытый текст где держим то же значение, добавляем символ валюты
 * Важно расположить этот текст ровно на месте инпута и чтобы он имел те же параметры что и текст в инпуте
 */
-.amount-input__container_aqkwn {
+.amount-input__container_122f1 {
     position: relative;
 }
-.amount-input__bold_aqkwn .amount-input__input_aqkwn,
-.amount-input__bold_aqkwn .amount-input__suffixContainer_aqkwn {
+.amount-input__bold_122f1 .amount-input__input_122f1,
+.amount-input__bold_122f1 .amount-input__suffixContainer_122f1 {
     font-weight: bold;
 }
 /* суффикс = текст в поле. Скрываем спейсер, чтобы суффикс выглядел как введенное в поле значение */
-.amount-input__suffixContainer_aqkwn > *:first-child {
+.amount-input__suffixContainer_122f1 > *:first-child {
     display: none;
 }
-.amount-input__filled_aqkwn .amount-input__input_aqkwn,
-.amount-input__input_aqkwn:focus {
+.amount-input__filled_122f1 .amount-input__input_122f1,
+.amount-input__input_122f1:focus {
     -webkit-text-fill-color: transparent;
 }

package/amount-input/modern/inverted.css

@@ -1,4 +1,4 @@
-/* hash: 1rc6d */
+/* hash: mrm5z */
 :root {
 
     /* Hard */
@@ -12,6 +12,6 @@
         --color-light-text-secondary-inverted
     );
 }
-.amount-input__minorPartAndCurrency_os35a {
+.amount-input__minorPartAndCurrency_k13vp {
     color: var(--amount-input-inverted-minor-part-and-currency-color);
 }

package/amount-input/modern/utils/index.js

@@ -11,14 +11,24 @@ import { formatAmount } from '@alfalab/utils';
  * @param minority количество минорных единиц
  */
 function getFormattedValue(enteredValue, currency, minority) {
-    const [head, tail] = enteredValue.split(',');
-    const { majorPart } = formatAmount({
+    if (!enteredValue || enteredValue === '-') {
+        return enteredValue;
+    }
+    // eslint-disable-next-line prefer-const
+    let [head, tail] = enteredValue.split(',');
+    // При вводе "-," указываем, что имеется в виду "-0,"
+    if (head === '-') {
+        head = '-0';
+    }
+    let { majorPart } = formatAmount({
         value: Number(head) * minority,
         currency,
         minority,
+        negativeSymbol: 'hyphen-minus',
     });
-    if (!enteredValue) {
-        return enteredValue;
+    // Так как -0 === 0, formatAmount возвращает положительное значение. Исправляем это здесь
+    if (/^-(,|0),?/.test(enteredValue) && majorPart === '0') {
+        majorPart = `-${majorPart}`;
     }
     if (!tail && enteredValue.includes(',')) {
         return majorPart.concat(',');
@@ -29,9 +39,10 @@ function getFormattedValue(enteredValue, currency, minority) {
     return majorPart;
 }
 function getAmountValueFromStr(str, minority) {
-    return str === ''
-        ? null
-        : Math.round(Number(str.replace(',', '.').replace(/[^0-9.]/g, '')) * minority);
+    if (str === '' || str === '-') {
+        return null;
+    }
+    return Math.round(Number(str.replace(',', '.').replace(/[^0-9.-]/g, '')) * minority);
 }
 
 export { getAmountValueFromStr, getFormattedValue };

package/amount-input/utils/index.js

@@ -13,14 +13,24 @@ var utils = require('@alfalab/utils');
  * @param minority количество минорных единиц
  */
 function getFormattedValue(enteredValue, currency, minority) {
+    if (!enteredValue || enteredValue === '-') {
+        return enteredValue;
+    }
+    // eslint-disable-next-line prefer-const
     var _a = enteredValue.split(','), head = _a[0], tail = _a[1];
+    // При вводе "-," указываем, что имеется в виду "-0,"
+    if (head === '-') {
+        head = '-0';
+    }
     var majorPart = utils.formatAmount({
         value: Number(head) * minority,
         currency: currency,
         minority: minority,
+        negativeSymbol: 'hyphen-minus',
     }).majorPart;
-    if (!enteredValue) {
-        return enteredValue;
+    // Так как -0 === 0, formatAmount возвращает положительное значение. Исправляем это здесь
+    if (/^-(,|0),?/.test(enteredValue) && majorPart === '0') {
+        majorPart = "-" + majorPart;
     }
     if (!tail && enteredValue.includes(',')) {
         return majorPart.concat(',');
@@ -31,9 +41,10 @@ function getFormattedValue(enteredValue, currency, minority) {
     return majorPart;
 }
 function getAmountValueFromStr(str, minority) {
-    return str === ''
-        ? null
-        : Math.round(Number(str.replace(',', '.').replace(/[^0-9.]/g, '')) * minority);
+    if (str === '' || str === '-') {
+        return null;
+    }
+    return Math.round(Number(str.replace(',', '.').replace(/[^0-9.-]/g, '')) * minority);
 }
 
 exports.getAmountValueFromStr = getAmountValueFromStr;

package/attach/Component.js

@@ -63,7 +63,7 @@ function __spreadArrays() {
     return r;
 }
 
-var styles = {"component":"attach__component_5018s","label":"attach__label_5018s","control":"attach__control_5018s","icon_size_xs":"attach__icon_size_xs_5018s","icon_size_xxs":"attach__icon_size_xxs_5018s","xxs":"attach__xxs_5018s","file":"attach__file_5018s","noFile":"attach__noFile_5018s","xs":"attach__xs_5018s","s":"attach__s_5018s","m":"attach__m_5018s","l":"attach__l_5018s","clear":"attach__clear_5018s","progressBar":"attach__progressBar_5018s","disabled":"attach__disabled_5018s","icon":"attach__icon_5018s","focused":"attach__focused_5018s"};
+var styles = {"component":"attach__component_cds6g","label":"attach__label_cds6g","control":"attach__control_cds6g","icon_size_xs":"attach__icon_size_xs_cds6g","icon_size_xxs":"attach__icon_size_xxs_cds6g","xxs":"attach__xxs_cds6g","file":"attach__file_cds6g","noFile":"attach__noFile_cds6g","xs":"attach__xs_cds6g","s":"attach__s_cds6g","m":"attach__m_cds6g","l":"attach__l_cds6g","clear":"attach__clear_cds6g","progressBar":"attach__progressBar_cds6g","disabled":"attach__disabled_cds6g","icon":"attach__icon_cds6g","focused":"attach__focused_cds6g"};
 require('./index.css');
 
 var MULTIPLE_TEXTS = ['файл', 'файла', 'файлов'];

package/attach/esm/Component.js

@@ -55,7 +55,7 @@ function __spreadArrays() {
     return r;
 }
 
-var styles = {"component":"attach__component_5018s","label":"attach__label_5018s","control":"attach__control_5018s","icon_size_xs":"attach__icon_size_xs_5018s","icon_size_xxs":"attach__icon_size_xxs_5018s","xxs":"attach__xxs_5018s","file":"attach__file_5018s","noFile":"attach__noFile_5018s","xs":"attach__xs_5018s","s":"attach__s_5018s","m":"attach__m_5018s","l":"attach__l_5018s","clear":"attach__clear_5018s","progressBar":"attach__progressBar_5018s","disabled":"attach__disabled_5018s","icon":"attach__icon_5018s","focused":"attach__focused_5018s"};
+var styles = {"component":"attach__component_cds6g","label":"attach__label_cds6g","control":"attach__control_cds6g","icon_size_xs":"attach__icon_size_xs_cds6g","icon_size_xxs":"attach__icon_size_xxs_cds6g","xxs":"attach__xxs_cds6g","file":"attach__file_cds6g","noFile":"attach__noFile_cds6g","xs":"attach__xs_cds6g","s":"attach__s_cds6g","m":"attach__m_cds6g","l":"attach__l_cds6g","clear":"attach__clear_cds6g","progressBar":"attach__progressBar_cds6g","disabled":"attach__disabled_cds6g","icon":"attach__icon_cds6g","focused":"attach__focused_cds6g"};
 require('./index.css');
 
 var MULTIPLE_TEXTS = ['файл', 'файла', 'файлов'];

package/attach/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 1n4xq */
+/* hash: tdgyb */
 :root {
     --color-light-border-link: #007aff;
 }
@@ -16,7 +16,7 @@
 :root {
     --focus-color: var(--color-light-border-link);
 }
-.attach__component_5018s {
+.attach__component_cds6g {
     display: inline-flex;
     align-items: center;
     position: relative;
@@ -26,7 +26,7 @@
         box-sizing: border-box;
     }
 }
-.attach__label_5018s {
+.attach__label_cds6g {
     position: absolute;
     top: 0;
     left: 0;
@@ -36,52 +36,52 @@
     width: 0;
     height: 0;
 }
-.attach__control_5018s {
+.attach__control_cds6g {
     opacity: 0;
     cursor: inherit
 }
-.attach__control_5018s::-webkit-file-upload-button {
+.attach__control_cds6g::-webkit-file-upload-button {
         cursor: inherit;
     }
-.attach__icon_size_xs_5018s,
-.attach__icon_size_xxs_5018s {
+.attach__icon_size_xs_cds6g,
+.attach__icon_size_xxs_cds6g {
     width: 18px;
     height: 18px;
 }
 /* TODO обновить типографику на новую, когда ее зарелизят */
-.attach__xxs_5018s .attach__file_5018s,
-.attach__xxs_5018s .attach__noFile_5018s,
-.attach__xs_5018s .attach__file_5018s,
-.attach__xs_5018s .attach__noFile_5018s {
+.attach__xxs_cds6g .attach__file_cds6g,
+.attach__xxs_cds6g .attach__noFile_cds6g,
+.attach__xs_cds6g .attach__file_cds6g,
+.attach__xs_cds6g .attach__noFile_cds6g {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
 }
-.attach__s_5018s .attach__file_5018s,
-.attach__s_5018s .attach__noFile_5018s {
+.attach__s_cds6g .attach__file_cds6g,
+.attach__s_cds6g .attach__noFile_cds6g {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
 }
-.attach__m_5018s .attach__file_5018s,
-.attach__m_5018s .attach__noFile_5018s {
+.attach__m_cds6g .attach__file_cds6g,
+.attach__m_cds6g .attach__noFile_cds6g {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
 }
-.attach__l_5018s .attach__file_5018s,
-.attach__l_5018s .attach__noFile_5018s {
+.attach__l_cds6g .attach__file_cds6g,
+.attach__l_cds6g .attach__noFile_cds6g {
     font-size: 18px;
     line-height: 22px;
     font-weight: 400;
 }
-.attach__file_5018s,
-.attach__noFile_5018s {
+.attach__file_cds6g,
+.attach__noFile_cds6g {
     display: inline-block;
     margin-left: 0.5em;
     text-align: center;
 }
-.attach__clear_5018s {
+.attach__clear_cds6g {
     margin: 0 0 0 5px;
     padding: 0;
     cursor: pointer;
@@ -93,21 +93,21 @@
     background: none;
     border: none
 }
-.attach__clear_5018s:before {
+.attach__clear_cds6g:before {
         content: '\D7';
     }
-.attach__progressBar_5018s {
+.attach__progressBar_cds6g {
     margin-top: var(--gap-2xs);
 }
-.attach__disabled_5018s .attach__noFile_5018s,
-.attach__disabled_5018s .attach__file_5018s,
-.attach__disabled_5018s .attach__icon_5018s {
+.attach__disabled_cds6g .attach__noFile_cds6g,
+.attach__disabled_cds6g .attach__file_cds6g,
+.attach__disabled_cds6g .attach__icon_cds6g {
     opacity: 0.3;
 }
-.attach__disabled_5018s .attach__clear_5018s {
+.attach__disabled_cds6g .attach__clear_cds6g {
     display: none;
 }
-.attach__focused_5018s {
+.attach__focused_cds6g {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/attach/index.css

@@ -1,4 +1,4 @@
-/* hash: 1n4xq */
+/* hash: tdgyb */
 :root {
     --color-light-border-link: #007aff;
 }
@@ -16,7 +16,7 @@
 :root {
     --focus-color: var(--color-light-border-link);
 }
-.attach__component_5018s {
+.attach__component_cds6g {
     display: inline-flex;
     align-items: center;
     position: relative;
@@ -26,7 +26,7 @@
         box-sizing: border-box;
     }
 }
-.attach__label_5018s {
+.attach__label_cds6g {
     position: absolute;
     top: 0;
     left: 0;
@@ -36,52 +36,52 @@
     width: 0;
     height: 0;
 }
-.attach__control_5018s {
+.attach__control_cds6g {
     opacity: 0;
     cursor: inherit
 }
-.attach__control_5018s::-webkit-file-upload-button {
+.attach__control_cds6g::-webkit-file-upload-button {
         cursor: inherit;
     }
-.attach__icon_size_xs_5018s,
-.attach__icon_size_xxs_5018s {
+.attach__icon_size_xs_cds6g,
+.attach__icon_size_xxs_cds6g {
     width: 18px;
     height: 18px;
 }
 /* TODO обновить типографику на новую, когда ее зарелизят */
-.attach__xxs_5018s .attach__file_5018s,
-.attach__xxs_5018s .attach__noFile_5018s,
-.attach__xs_5018s .attach__file_5018s,
-.attach__xs_5018s .attach__noFile_5018s {
+.attach__xxs_cds6g .attach__file_cds6g,
+.attach__xxs_cds6g .attach__noFile_cds6g,
+.attach__xs_cds6g .attach__file_cds6g,
+.attach__xs_cds6g .attach__noFile_cds6g {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
 }
-.attach__s_5018s .attach__file_5018s,
-.attach__s_5018s .attach__noFile_5018s {
+.attach__s_cds6g .attach__file_cds6g,
+.attach__s_cds6g .attach__noFile_cds6g {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
 }
-.attach__m_5018s .attach__file_5018s,
-.attach__m_5018s .attach__noFile_5018s {
+.attach__m_cds6g .attach__file_cds6g,
+.attach__m_cds6g .attach__noFile_cds6g {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
 }
-.attach__l_5018s .attach__file_5018s,
-.attach__l_5018s .attach__noFile_5018s {
+.attach__l_cds6g .attach__file_cds6g,
+.attach__l_cds6g .attach__noFile_cds6g {
     font-size: 18px;
     line-height: 22px;
     font-weight: 400;
 }
-.attach__file_5018s,
-.attach__noFile_5018s {
+.attach__file_cds6g,
+.attach__noFile_cds6g {
     display: inline-block;
     margin-left: 0.5em;
     text-align: center;
 }
-.attach__clear_5018s {
+.attach__clear_cds6g {
     margin: 0 0 0 5px;
     padding: 0;
     cursor: pointer;
@@ -93,21 +93,21 @@
     background: none;
     border: none
 }
-.attach__clear_5018s:before {
+.attach__clear_cds6g:before {
         content: '\D7';
     }
-.attach__progressBar_5018s {
+.attach__progressBar_cds6g {
     margin-top: var(--gap-2xs);
 }
-.attach__disabled_5018s .attach__noFile_5018s,
-.attach__disabled_5018s .attach__file_5018s,
-.attach__disabled_5018s .attach__icon_5018s {
+.attach__disabled_cds6g .attach__noFile_cds6g,
+.attach__disabled_cds6g .attach__file_cds6g,
+.attach__disabled_cds6g .attach__icon_cds6g {
     opacity: 0.3;
 }
-.attach__disabled_5018s .attach__clear_5018s {
+.attach__disabled_cds6g .attach__clear_cds6g {
     display: none;
 }
-.attach__focused_5018s {
+.attach__focused_cds6g {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/attach/modern/Component.js

@@ -8,7 +8,7 @@ import { ProgressBar } from '../../progress-bar/modern';
 import { KeyboardFocusable } from '../../keyboard-focusable/modern';
 import { truncateFilename } from './utils/index.js';
 
-var styles = {"component":"attach__component_5018s","label":"attach__label_5018s","control":"attach__control_5018s","icon_size_xs":"attach__icon_size_xs_5018s","icon_size_xxs":"attach__icon_size_xxs_5018s","xxs":"attach__xxs_5018s","file":"attach__file_5018s","noFile":"attach__noFile_5018s","xs":"attach__xs_5018s","s":"attach__s_5018s","m":"attach__m_5018s","l":"attach__l_5018s","clear":"attach__clear_5018s","progressBar":"attach__progressBar_5018s","disabled":"attach__disabled_5018s","icon":"attach__icon_5018s","focused":"attach__focused_5018s"};
+var styles = {"component":"attach__component_cds6g","label":"attach__label_cds6g","control":"attach__control_cds6g","icon_size_xs":"attach__icon_size_xs_cds6g","icon_size_xxs":"attach__icon_size_xxs_cds6g","xxs":"attach__xxs_cds6g","file":"attach__file_cds6g","noFile":"attach__noFile_cds6g","xs":"attach__xs_cds6g","s":"attach__s_cds6g","m":"attach__m_cds6g","l":"attach__l_cds6g","clear":"attach__clear_cds6g","progressBar":"attach__progressBar_cds6g","disabled":"attach__disabled_cds6g","icon":"attach__icon_cds6g","focused":"attach__focused_cds6g"};
 require('./index.css');
 
 const MULTIPLE_TEXTS = ['файл', 'файла', 'файлов'];