@cloud-ru/ds-uikit-product-fields-predefined 2.0.16-preview-d50a3da1.0 → 2.0.16-preview-d90ac2be.0

package/dist/cjs/components/FieldChat/FieldChat.js

@@ -46,5 +46,5 @@ function FieldChat({ handleSubmit: handleSubmitProp, value, attachment, autoFocu
             handleSubmit();
         }
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.fieldChat, children: [isMobile && (0, jsx_runtime_1.jsx)(Attachments_1.Attachments, { files: files, isMobile: isMobile }), (0, jsx_runtime_1.jsx)(fields_1.FieldTextArea, { ...props, autoFocus: autoFocus, value: value, size: 'm', minRows: 1, maxRows: 4, showCopyButton: false, placeholder: t('FieldChat.placeholder'), onKeyDown: handleKeyDown, footer: (0, jsx_runtime_1.jsx)(TextAreaActionsFooter_1.TextAreaActionsFooter, { right: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [attachment && ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { tip: t('FieldChat.attachFileTooltip'), hoverDelayOpen: 600, open: isInactive ? false : undefined, triggerClassName: styles_module_scss_1.default.uploadTooltip, children: (0, jsx_runtime_1.jsx)(dropzone_1.FileUpload, { mode: dropzone_1.UPLOAD_MODE.Multiple, onFilesUpload: attachment.onFilesUpload, accept: attachment.accept, children: (0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Function, appearance: button_1.APPEARANCE.Neutral, size: 's', icon: (0, jsx_runtime_1.jsx)(product_1.AttachmentSVG, {}), disabled: isInactive, "data-test-id": constants_1.TEST_IDS.fieldChatUpload }) }) })), (0, jsx_runtime_1.jsx)(FieldSubmitButton_1.FieldSubmitButton, { active: isValueValid && !isInactive, handleClick: handleSubmit, "data-test-id": constants_1.TEST_IDS.fieldChatSubmit })] }) }) }), !isMobile && (0, jsx_runtime_1.jsx)(Attachments_1.Attachments, { files: files })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.fieldChat, "data-layout-type": layoutType, children: [isMobile && (0, jsx_runtime_1.jsx)(Attachments_1.Attachments, { files: files, isMobile: isMobile }), (0, jsx_runtime_1.jsx)(fields_1.FieldTextArea, { ...props, autoFocus: autoFocus, value: value, size: 'm', minRows: 1, maxRows: 4, showCopyButton: false, placeholder: t('FieldChat.placeholder'), onKeyDown: handleKeyDown, footer: (0, jsx_runtime_1.jsx)(TextAreaActionsFooter_1.TextAreaActionsFooter, { right: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [attachment && ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { tip: t('FieldChat.attachFileTooltip'), hoverDelayOpen: 600, open: isInactive ? false : undefined, triggerClassName: styles_module_scss_1.default.uploadTooltip, children: (0, jsx_runtime_1.jsx)(dropzone_1.FileUpload, { mode: dropzone_1.UPLOAD_MODE.Multiple, onFilesUpload: attachment.onFilesUpload, accept: attachment.accept, children: (0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Function, appearance: button_1.APPEARANCE.Neutral, size: 's', icon: (0, jsx_runtime_1.jsx)(product_1.AttachmentSVG, {}), disabled: isInactive, "data-test-id": constants_1.TEST_IDS.fieldChatUpload }) }) })), (0, jsx_runtime_1.jsx)(FieldSubmitButton_1.FieldSubmitButton, { active: isValueValid && !isInactive, handleClick: handleSubmit, "data-test-id": constants_1.TEST_IDS.fieldChatSubmit })] }) }) }), !isMobile && (0, jsx_runtime_1.jsx)(Attachments_1.Attachments, { files: files })] }));
 }

package/dist/cjs/components/FieldChat/components/Attachments/styles.module.css

@@ -5,7 +5,7 @@
 .attachments{
   display:flex;
   gap:var(--sn-primitive-dimension-8, 8px);
-  box-sizing:border-box;
+  padding:var(--sn-primitive-dimension-1, 1px) 0;
 }
 .attachments > *{
   flex-shrink:0;

package/dist/cjs/components/FieldChat/components/TextAreaActionsFooter/styles.module.css

@@ -3,9 +3,8 @@
   flex-direction:row;
   align-items:center;
   justify-content:space-between;
-  box-sizing:border-box;
   width:100%;
-  padding:var(--sn-primitive-dimension-8, 8px);
+  padding-bottom:var(--sn-primitive-dimension-8, 8px);
 }
 
 .actionsLeft{
@@ -13,7 +12,6 @@
   flex-direction:row;
   gap:var(--sn-primitive-dimension-8, 8px);
   align-items:center;
-  box-sizing:border-box;
 }
 
 .actionsRight{
@@ -22,6 +20,6 @@
   gap:var(--sn-primitive-dimension-8, 8px);
   align-items:center;
   justify-content:flex-end;
-  box-sizing:border-box;
   width:100%;
+  padding-right:var(--sn-primitive-dimension-8, 8px);
 }

package/dist/cjs/components/FieldChat/styles.module.css

@@ -1,11 +1,13 @@
 .fieldChat{
   display:flex;
   flex-direction:column;
-  gap:var(--sn-primitive-dimension-8, 8px);
-  box-sizing:border-box;
+  gap:var(--sn-primitive-dimension-12, 12px);
   width:100%;
   min-width:0;
 }
+.fieldChat[data-layout-type=mobile]{
+  gap:var(--sn-primitive-dimension-8, 8px);
+}
 
 .uploadTooltip{
   display:flex;

package/dist/cjs/components/FieldCode/FieldCode.js

@@ -34,7 +34,7 @@ exports.FieldCode = (0, react_1.forwardRef)(function FieldCode(props, ref) {
         resetCode,
     }), [moveFocus, blurFields, resetCode]);
     const resolvedError = error ?? invalidCode;
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, classnames_1.default)(styles_module_scss_1.default.fieldCode, hasOverflow && styles_module_scss_1.default.fieldCodeScrollable, className), "data-size": size, "data-disabled": disabled || undefined, "data-stretch-cells": stretchCells || undefined, ...(dataTestId ? { 'data-test-id': dataTestId } : undefined), children: [(0, jsx_runtime_1.jsx)(field_decorator_1.FieldDecorator, { className: (0, classnames_1.default)(!hasOverflow && styles_module_scss_1.default.fieldDecorator), label: label, disabled: disabled, size: size, error: resolvedError, children: (0, jsx_runtime_1.jsx)("div", { ref: codeContainerRef, className: styles_module_scss_1.default.codeContainer, "data-stretch-cells": stretchCells || undefined, children: code.map((char, index) => ((0, jsx_runtime_1.jsx)(components_1.Cell, { ref: inputRef => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, classnames_1.default)(styles_module_scss_1.default.fieldCode, hasOverflow && styles_module_scss_1.default.fieldCodeScrollable, className), "data-size": size, "data-disabled": disabled || undefined, "data-stretch-cells": stretchCells || undefined, ...(dataTestId ? { 'data-test-id': dataTestId } : undefined), children: [(0, jsx_runtime_1.jsx)(field_decorator_1.FieldDecorator, { className: (0, classnames_1.default)(!hasOverflow && styles_module_scss_1.default.fieldDecorator), label: label, disabled: disabled, size: size, error: resolvedError, children: (0, jsx_runtime_1.jsx)("div", { ref: codeContainerRef, className: styles_module_scss_1.default.codeContainer, "data-size": size, "data-stretch-cells": stretchCells || undefined, children: code.map((char, index) => ((0, jsx_runtime_1.jsx)(components_1.Cell, { ref: inputRef => {
                             if (inputRef) {
                                 inputsRef.current[index] = inputRef;
                             }

package/dist/cjs/components/FieldCode/styles.module.css

@@ -3,7 +3,6 @@
   flex-direction:column;
   gap:var(--sn-primitive-dimension-8, 8px);
   align-items:center;
-  box-sizing:border-box;
 }
 .fieldCode[data-stretch-cells]{
   align-items:stretch;
@@ -20,13 +19,27 @@
 
 .codeContainer{
   display:flex;
-  gap:var(--sn-primitive-dimension-8, 8px);
   justify-content:safe center;
 }
 .codeContainer[data-stretch-cells]{
   width:100%;
 }
+.codeContainer[data-size=s]{
+  gap:var(--sn-primitive-dimension-8, 8px);
+}
+.codeContainer[data-size=m]{
+  gap:var(--sn-primitive-dimension-8, 8px);
+}
+.codeContainer[data-size=l]{
+  gap:var(--sn-primitive-dimension-12, 12px);
+}
 
-.cellSpacing{
-  margin-right:var(--sn-primitive-dimension-4, 4px);
+.cellSpacing[data-size=s]{
+  margin-right:var(--sn-primitive-dimension-8, 8px);
+}
+.cellSpacing[data-size=m]{
+  margin-right:var(--sn-primitive-dimension-8, 8px);
+}
+.cellSpacing[data-size=l]{
+  margin-right:var(--sn-primitive-dimension-12, 12px);
 }

package/dist/cjs/components/FieldPhone/FieldPhone.js

@@ -144,13 +144,10 @@ exports.FieldPhone = (0, react_1.forwardRef)(function FieldPhone({ value: valueP
         }
     };
     const showClear = showClearButton && Boolean(unmaskedValue);
-    const selectorFlag = (0, react_1.isValidElement)(country?.beforeContent)
-        ? (0, react_1.cloneElement)(country.beforeContent, { style: constants_2.SELECTOR_FLAG_STYLE })
-        : country?.beforeContent;
     return ((0, jsx_runtime_1.jsx)(fields_1.FieldCombo, { ...rest, inputMode: 'tel', type: 'tel', ref: (0, merge_refs_1.default)(ref, localRef, iMaskRef), className: (0, classnames_1.default)(className, styles_module_scss_1.default.fieldPhone), "data-empty": !unmaskedValue || undefined, autoFocus: autoFocus, value: iMaskValue, onChange: handleChange, onPaste: handlePaste, showClearButton: showClear, prefix: country?.content.caption, elementBefore: isOnlyOneCountryAvailable
             ? undefined
             : {
-                action: selectorFlag,
+                action: country?.beforeContent,
                 'data-test-id': constants_1.TEST_IDS.fieldPhoneCountrySelect,
                 droplist: {
                     items,

package/dist/cjs/components/FieldPhone/constants.d.ts

@@ -1,14 +1,8 @@
-import { CSSProperties } from 'react';
 export declare const PLACEHOLDER_CHAR = "_";
 /**
  * Размер иконки флага страны в селекторе и выпадающем списке. У флагов из `@cloud-ru/ds-icons/flags`
  * `size` — высота, ширина следует нативному аспекту 24×18: `18` даёт бокс 24×18.
  */
-export declare const FLAG_ICON_SIZE = 18;
-/**
- * Флаг в кнопке страны — 24×18 на всех размерах (Product-макет fieldPhone). Кнопка-слот FieldCombo
- * клампит иконки до 16 на size s, инлайн-стиль снимает кламп.
- */
-export declare const SELECTOR_FLAG_STYLE: CSSProperties;
+export declare const FLAG_ICON_SIZE = 24;
 /** Задержка перед возвратом фокуса в поле после выбора страны — ждём закрытия дроплиста (desktop). */
 export declare const REFOCUS_AFTER_COUNTRY_DELAY_MS = 500;

package/dist/cjs/components/FieldPhone/constants.js

@@ -1,16 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.REFOCUS_AFTER_COUNTRY_DELAY_MS = exports.SELECTOR_FLAG_STYLE = exports.FLAG_ICON_SIZE = exports.PLACEHOLDER_CHAR = void 0;
+exports.REFOCUS_AFTER_COUNTRY_DELAY_MS = exports.FLAG_ICON_SIZE = exports.PLACEHOLDER_CHAR = void 0;
 exports.PLACEHOLDER_CHAR = '_';
 /**
  * Размер иконки флага страны в селекторе и выпадающем списке. У флагов из `@cloud-ru/ds-icons/flags`
  * `size` — высота, ширина следует нативному аспекту 24×18: `18` даёт бокс 24×18.
  */
-exports.FLAG_ICON_SIZE = 18;
-/**
- * Флаг в кнопке страны — 24×18 на всех размерах (Product-макет fieldPhone). Кнопка-слот FieldCombo
- * клампит иконки до 16 на size s, инлайн-стиль снимает кламп.
- */
-exports.SELECTOR_FLAG_STYLE = { maxWidth: 'none', maxHeight: 'none' };
+exports.FLAG_ICON_SIZE = 24;
 /** Задержка перед возвратом фокуса в поле после выбора страны — ждём закрытия дроплиста (desktop). */
 exports.REFOCUS_AFTER_COUNTRY_DELAY_MS = 500;

package/dist/cjs/components/FieldSelectCreate/FieldSelectCreate.js

@@ -60,7 +60,7 @@ exports.FieldSelectCreate = (0, react_1.forwardRef)(function FieldSelectCreate({
     };
     const formLayout = createLayoutType === constants_2.CREATE_LAYOUT_TYPE.Modal ? ((0, jsx_runtime_1.jsx)(modal_1.Modal, { ...layoutProps })) : ((0, jsx_runtime_1.jsx)(drawer_1.Drawer, { ...layoutProps, position: createLayoutProps.position ?? drawer_1.POSITION.Right }));
     const withTip = (node, show) => show ? (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { tip: noPermissionTip, children: node }) : node;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.fieldSelectCreate, className), ...(0, utils_1.extractSupportProps)(rest), "data-test-id": constants_1.TEST_IDS.fieldSelectCreate, children: [withTip((0, jsx_runtime_1.jsx)(fields_1.FieldSelect, { ...selectProps, ref: ref, size: size, disabled: isNone || selectProps.disabled, placeholder: selectProps.placeholder ?? t('FieldSelectCreate.placeholder'), ...selectDataStates, footerDivider: true, footer: 
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.fieldSelectCreate, className), ...(0, utils_1.extractSupportProps)(rest), "data-test-id": constants_1.TEST_IDS.fieldSelectCreate, children: [withTip((0, jsx_runtime_1.jsx)(fields_1.FieldSelect, { ...selectProps, ref: ref, size: size, disabled: isNone || selectProps.disabled, placeholder: selectProps.placeholder ?? t('FieldSelectCreate.placeholder'), ...selectDataStates, footer: 
                 // В состоянии ошибки показываем только «Обновить» из errorDataState — без футера «Создать» (по макету).
-                selectProps.dataError ? undefined : ((0, jsx_runtime_1.jsx)(SelectFooter_1.SelectFooter, { onClick: onOpen, createButtonLabel: createButtonLabel, canCreate: canCreate, size: size })) }), isNone), withTip((0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Function, appearance: button_1.APPEARANCE.Neutral, label: createButtonLabel, icon: (0, jsx_runtime_1.jsx)(system_1.PlusSVG, {}), iconPosition: button_1.ICON_POSITION.Before, onClick: onOpen, size: size, disabled: !canCreate, className: styles_module_scss_1.default.createButton, "data-test-id": constants_1.TEST_IDS.fieldSelectCreateButton }), !canCreate), formLayout] }));
+                selectProps.dataError ? undefined : ((0, jsx_runtime_1.jsx)(SelectFooter_1.SelectFooter, { onClick: onOpen, createButtonLabel: createButtonLabel, canCreate: canCreate })) }), isNone), withTip((0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Function, appearance: button_1.APPEARANCE.Neutral, label: createButtonLabel, icon: (0, jsx_runtime_1.jsx)(system_1.PlusSVG, {}), iconPosition: button_1.ICON_POSITION.Before, onClick: onOpen, size: size, disabled: !canCreate, className: styles_module_scss_1.default.createButton, "data-test-id": constants_1.TEST_IDS.fieldSelectCreateButton }), !canCreate), formLayout] }));
 });

package/dist/cjs/components/FieldSelectCreate/helperComponents/SelectFooter/SelectFooter.d.ts

@@ -1,10 +1,8 @@
-import { Size } from '@cloud-ru/ds-button';
 type SelectFooterProps = {
     onClick(): void;
     createButtonLabel: string;
     canCreate: boolean;
-    size: Size;
 };
 /** Персистентный футер дроплиста с кнопкой «Создать» (недоступна и с tooltip при нехватке прав). */
-export declare function SelectFooter({ onClick, createButtonLabel, canCreate, size }: SelectFooterProps): import("react/jsx-runtime").JSX.Element;
+export declare function SelectFooter({ onClick, createButtonLabel, canCreate }: SelectFooterProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/components/FieldSelectCreate/helperComponents/SelectFooter/SelectFooter.js

@@ -12,8 +12,8 @@ const constants_1 = require("../../../../constants");
 const locale_1 = require("../../../../locale");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 /** Персистентный футер дроплиста с кнопкой «Создать» (недоступна и с tooltip при нехватке прав). */
-function SelectFooter({ onClick, createButtonLabel, canCreate, size }) {
+function SelectFooter({ onClick, createButtonLabel, canCreate }) {
     const { t } = locale_1.fieldsPredefinedLocale.useTranslations();
-    const button = ((0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Function, appearance: button_1.APPEARANCE.Neutral, label: createButtonLabel, icon: (0, jsx_runtime_1.jsx)(system_1.PlusSVG, {}), iconPosition: button_1.ICON_POSITION.Before, onClick: onClick, size: size, disabled: !canCreate, "data-test-id": constants_1.TEST_IDS.fieldSelectCreateFooterButton }));
+    const button = ((0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Function, appearance: button_1.APPEARANCE.Neutral, label: createButtonLabel, icon: (0, jsx_runtime_1.jsx)(system_1.PlusSVG, {}), iconPosition: button_1.ICON_POSITION.Before, onClick: onClick, disabled: !canCreate, "data-test-id": constants_1.TEST_IDS.fieldSelectCreateFooterButton }));
     return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.footerWrapper, children: canCreate ? button : (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { tip: t('FieldSelectCreate.noPermission'), children: button }) }));
 }

package/dist/cjs/components/FieldSelectCreate/helperComponents/SelectFooter/styles.module.css

@@ -1,5 +1,6 @@
 .footerWrapper{
   display:flex;
   align-items:center;
-  box-sizing:border-box;
+  padding-top:var(--sn-primitive-dimension-4, 4px);
+  border-top:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
 }

package/dist/cjs/components/FieldSelectCreate/styles.module.css

@@ -1,8 +1,7 @@
 .fieldSelectCreate{
   display:flex;
   flex-direction:column;
-  gap:var(--sn-primitive-dimension-4, 4px);
-  box-sizing:border-box;
+  gap:var(--sn-primitive-dimension-8, 8px);
 }
 
 .createButton{

package/dist/cjs/style.css

@@ -5,7 +5,7 @@
 .attachments{
   display:flex;
   gap:var(--sn-primitive-dimension-8, 8px);
-  box-sizing:border-box;
+  padding:var(--sn-primitive-dimension-1, 1px) 0;
 }
 .attachments > *{
   flex-shrink:0;
@@ -18,9 +18,8 @@
   flex-direction:row;
   align-items:center;
   justify-content:space-between;
-  box-sizing:border-box;
   width:100%;
-  padding:var(--sn-primitive-dimension-8, 8px);
+  padding-bottom:var(--sn-primitive-dimension-8, 8px);
 }
 
 .actionsLeft{
@@ -28,7 +27,6 @@
   flex-direction:row;
   gap:var(--sn-primitive-dimension-8, 8px);
   align-items:center;
-  box-sizing:border-box;
 }
 
 .actionsRight{
@@ -37,17 +35,19 @@
   gap:var(--sn-primitive-dimension-8, 8px);
   align-items:center;
   justify-content:flex-end;
-  box-sizing:border-box;
   width:100%;
+  padding-right:var(--sn-primitive-dimension-8, 8px);
 }
 .fieldChat{
   display:flex;
   flex-direction:column;
-  gap:var(--sn-primitive-dimension-8, 8px);
-  box-sizing:border-box;
+  gap:var(--sn-primitive-dimension-12, 12px);
   width:100%;
   min-width:0;
 }
+.fieldChat[data-layout-type=mobile]{
+  gap:var(--sn-primitive-dimension-8, 8px);
+}
 
 .uploadTooltip{
   display:flex;
@@ -76,7 +76,6 @@
   flex-direction:column;
   gap:var(--sn-primitive-dimension-8, 8px);
   align-items:center;
-  box-sizing:border-box;
 }
 .fieldCode[data-stretch-cells]{
   align-items:stretch;
@@ -93,15 +92,29 @@
 
 .codeContainer{
   display:flex;
-  gap:var(--sn-primitive-dimension-8, 8px);
   justify-content:safe center;
 }
 .codeContainer[data-stretch-cells]{
   width:100%;
 }
+.codeContainer[data-size=s]{
+  gap:var(--sn-primitive-dimension-8, 8px);
+}
+.codeContainer[data-size=m]{
+  gap:var(--sn-primitive-dimension-8, 8px);
+}
+.codeContainer[data-size=l]{
+  gap:var(--sn-primitive-dimension-12, 12px);
+}
 
-.cellSpacing{
-  margin-right:var(--sn-primitive-dimension-4, 4px);
+.cellSpacing[data-size=s]{
+  margin-right:var(--sn-primitive-dimension-8, 8px);
+}
+.cellSpacing[data-size=m]{
+  margin-right:var(--sn-primitive-dimension-8, 8px);
+}
+.cellSpacing[data-size=l]{
+  margin-right:var(--sn-primitive-dimension-12, 12px);
 }
 .fieldPhone input[data-empty]{
   color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
@@ -109,13 +122,13 @@
 .footerWrapper{
   display:flex;
   align-items:center;
-  box-sizing:border-box;
+  padding-top:var(--sn-primitive-dimension-4, 4px);
+  border-top:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
 }
 .fieldSelectCreate{
   display:flex;
   flex-direction:column;
-  gap:var(--sn-primitive-dimension-4, 4px);
-  box-sizing:border-box;
+  gap:var(--sn-primitive-dimension-8, 8px);
 }
 
 .createButton{

package/dist/esm/components/FieldChat/FieldChat.js

@@ -40,5 +40,5 @@ export function FieldChat({ handleSubmit: handleSubmitProp, value, attachment, a
             handleSubmit();
         }
     };
-    return (_jsxs("div", { className: styles.fieldChat, children: [isMobile && _jsx(Attachments, { files: files, isMobile: isMobile }), _jsx(FieldTextArea, { ...props, autoFocus: autoFocus, value: value, size: 'm', minRows: 1, maxRows: 4, showCopyButton: false, placeholder: t('FieldChat.placeholder'), onKeyDown: handleKeyDown, footer: _jsx(TextAreaActionsFooter, { right: _jsxs(_Fragment, { children: [attachment && (_jsx(Tooltip, { tip: t('FieldChat.attachFileTooltip'), hoverDelayOpen: 600, open: isInactive ? false : undefined, triggerClassName: styles.uploadTooltip, children: _jsx(FileUpload, { mode: UPLOAD_MODE.Multiple, onFilesUpload: attachment.onFilesUpload, accept: attachment.accept, children: _jsx(Button, { view: VIEW.Function, appearance: APPEARANCE.Neutral, size: 's', icon: _jsx(AttachmentSVG, {}), disabled: isInactive, "data-test-id": TEST_IDS.fieldChatUpload }) }) })), _jsx(FieldSubmitButton, { active: isValueValid && !isInactive, handleClick: handleSubmit, "data-test-id": TEST_IDS.fieldChatSubmit })] }) }) }), !isMobile && _jsx(Attachments, { files: files })] }));
+    return (_jsxs("div", { className: styles.fieldChat, "data-layout-type": layoutType, children: [isMobile && _jsx(Attachments, { files: files, isMobile: isMobile }), _jsx(FieldTextArea, { ...props, autoFocus: autoFocus, value: value, size: 'm', minRows: 1, maxRows: 4, showCopyButton: false, placeholder: t('FieldChat.placeholder'), onKeyDown: handleKeyDown, footer: _jsx(TextAreaActionsFooter, { right: _jsxs(_Fragment, { children: [attachment && (_jsx(Tooltip, { tip: t('FieldChat.attachFileTooltip'), hoverDelayOpen: 600, open: isInactive ? false : undefined, triggerClassName: styles.uploadTooltip, children: _jsx(FileUpload, { mode: UPLOAD_MODE.Multiple, onFilesUpload: attachment.onFilesUpload, accept: attachment.accept, children: _jsx(Button, { view: VIEW.Function, appearance: APPEARANCE.Neutral, size: 's', icon: _jsx(AttachmentSVG, {}), disabled: isInactive, "data-test-id": TEST_IDS.fieldChatUpload }) }) })), _jsx(FieldSubmitButton, { active: isValueValid && !isInactive, handleClick: handleSubmit, "data-test-id": TEST_IDS.fieldChatSubmit })] }) }) }), !isMobile && _jsx(Attachments, { files: files })] }));
 }

package/dist/esm/components/FieldChat/components/Attachments/styles.module.css

@@ -5,7 +5,7 @@
 .attachments{
   display:flex;
   gap:var(--sn-primitive-dimension-8, 8px);
-  box-sizing:border-box;
+  padding:var(--sn-primitive-dimension-1, 1px) 0;
 }
 .attachments > *{
   flex-shrink:0;

package/dist/esm/components/FieldChat/components/TextAreaActionsFooter/styles.module.css

@@ -3,9 +3,8 @@
   flex-direction:row;
   align-items:center;
   justify-content:space-between;
-  box-sizing:border-box;
   width:100%;
-  padding:var(--sn-primitive-dimension-8, 8px);
+  padding-bottom:var(--sn-primitive-dimension-8, 8px);
 }
 
 .actionsLeft{
@@ -13,7 +12,6 @@
   flex-direction:row;
   gap:var(--sn-primitive-dimension-8, 8px);
   align-items:center;
-  box-sizing:border-box;
 }
 
 .actionsRight{
@@ -22,6 +20,6 @@
   gap:var(--sn-primitive-dimension-8, 8px);
   align-items:center;
   justify-content:flex-end;
-  box-sizing:border-box;
   width:100%;
+  padding-right:var(--sn-primitive-dimension-8, 8px);
 }

package/dist/esm/components/FieldChat/styles.module.css

@@ -1,11 +1,13 @@
 .fieldChat{
   display:flex;
   flex-direction:column;
-  gap:var(--sn-primitive-dimension-8, 8px);
-  box-sizing:border-box;
+  gap:var(--sn-primitive-dimension-12, 12px);
   width:100%;
   min-width:0;
 }
+.fieldChat[data-layout-type=mobile]{
+  gap:var(--sn-primitive-dimension-8, 8px);
+}
 
 .uploadTooltip{
   display:flex;

package/dist/esm/components/FieldCode/FieldCode.js

@@ -28,7 +28,7 @@ export const FieldCode = forwardRef(function FieldCode(props, ref) {
         resetCode,
     }), [moveFocus, blurFields, resetCode]);
     const resolvedError = error ?? invalidCode;
-    return (_jsxs("div", { ref: rootRef, className: cn(styles.fieldCode, hasOverflow && styles.fieldCodeScrollable, className), "data-size": size, "data-disabled": disabled || undefined, "data-stretch-cells": stretchCells || undefined, ...(dataTestId ? { 'data-test-id': dataTestId } : undefined), children: [_jsx(FieldDecorator, { className: cn(!hasOverflow && styles.fieldDecorator), label: label, disabled: disabled, size: size, error: resolvedError, children: _jsx("div", { ref: codeContainerRef, className: styles.codeContainer, "data-stretch-cells": stretchCells || undefined, children: code.map((char, index) => (_jsx(Cell, { ref: inputRef => {
+    return (_jsxs("div", { ref: rootRef, className: cn(styles.fieldCode, hasOverflow && styles.fieldCodeScrollable, className), "data-size": size, "data-disabled": disabled || undefined, "data-stretch-cells": stretchCells || undefined, ...(dataTestId ? { 'data-test-id': dataTestId } : undefined), children: [_jsx(FieldDecorator, { className: cn(!hasOverflow && styles.fieldDecorator), label: label, disabled: disabled, size: size, error: resolvedError, children: _jsx("div", { ref: codeContainerRef, className: styles.codeContainer, "data-size": size, "data-stretch-cells": stretchCells || undefined, children: code.map((char, index) => (_jsx(Cell, { ref: inputRef => {
                             if (inputRef) {
                                 inputsRef.current[index] = inputRef;
                             }

package/dist/esm/components/FieldCode/styles.module.css

@@ -3,7 +3,6 @@
   flex-direction:column;
   gap:var(--sn-primitive-dimension-8, 8px);
   align-items:center;
-  box-sizing:border-box;
 }
 .fieldCode[data-stretch-cells]{
   align-items:stretch;
@@ -20,13 +19,27 @@
 
 .codeContainer{
   display:flex;
-  gap:var(--sn-primitive-dimension-8, 8px);
   justify-content:safe center;
 }
 .codeContainer[data-stretch-cells]{
   width:100%;
 }
+.codeContainer[data-size=s]{
+  gap:var(--sn-primitive-dimension-8, 8px);
+}
+.codeContainer[data-size=m]{
+  gap:var(--sn-primitive-dimension-8, 8px);
+}
+.codeContainer[data-size=l]{
+  gap:var(--sn-primitive-dimension-12, 12px);
+}
 
-.cellSpacing{
-  margin-right:var(--sn-primitive-dimension-4, 4px);
+.cellSpacing[data-size=s]{
+  margin-right:var(--sn-primitive-dimension-8, 8px);
+}
+.cellSpacing[data-size=m]{
+  margin-right:var(--sn-primitive-dimension-8, 8px);
+}
+.cellSpacing[data-size=l]{
+  margin-right:var(--sn-primitive-dimension-12, 12px);
 }

package/dist/esm/components/FieldPhone/FieldPhone.js

@@ -4,10 +4,10 @@ import { FieldCombo } from '@cloud-ru/ds-fields';
 import { useValueControl } from '@cloud-ru/ds-utils';
 import cn from 'classnames';
 import mergeRefs from 'merge-refs';
-import { cloneElement, forwardRef, isValidElement, useEffect, useMemo, useRef, useState, } from 'react';
+import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
 import { useIMask } from 'react-imask';
 import { TEST_IDS } from '../../constants.js';
-import { PLACEHOLDER_CHAR, REFOCUS_AFTER_COUNTRY_DELAY_MS, SELECTOR_FLAG_STYLE } from './constants.js';
+import { PLACEHOLDER_CHAR, REFOCUS_AFTER_COUNTRY_DELAY_MS } from './constants.js';
 import { useCountries } from './hooks/index.js';
 import styles from './styles.module.css';
 import { detectCountryByPhone, handleAutoInsert } from './utils.js';
@@ -138,13 +138,10 @@ export const FieldPhone = forwardRef(function FieldPhone({ value: valueProp, onC
         }
     };
     const showClear = showClearButton && Boolean(unmaskedValue);
-    const selectorFlag = isValidElement(country?.beforeContent)
-        ? cloneElement(country.beforeContent, { style: SELECTOR_FLAG_STYLE })
-        : country?.beforeContent;
     return (_jsx(FieldCombo, { ...rest, inputMode: 'tel', type: 'tel', ref: mergeRefs(ref, localRef, iMaskRef), className: cn(className, styles.fieldPhone), "data-empty": !unmaskedValue || undefined, autoFocus: autoFocus, value: iMaskValue, onChange: handleChange, onPaste: handlePaste, showClearButton: showClear, prefix: country?.content.caption, elementBefore: isOnlyOneCountryAvailable
             ? undefined
             : {
-                action: selectorFlag,
+                action: country?.beforeContent,
                 'data-test-id': TEST_IDS.fieldPhoneCountrySelect,
                 droplist: {
                     items,

package/dist/esm/components/FieldPhone/constants.d.ts

@@ -1,14 +1,8 @@
-import { CSSProperties } from 'react';
 export declare const PLACEHOLDER_CHAR = "_";
 /**
  * Размер иконки флага страны в селекторе и выпадающем списке. У флагов из `@cloud-ru/ds-icons/flags`
  * `size` — высота, ширина следует нативному аспекту 24×18: `18` даёт бокс 24×18.
  */
-export declare const FLAG_ICON_SIZE = 18;
-/**
- * Флаг в кнопке страны — 24×18 на всех размерах (Product-макет fieldPhone). Кнопка-слот FieldCombo
- * клампит иконки до 16 на size s, инлайн-стиль снимает кламп.
- */
-export declare const SELECTOR_FLAG_STYLE: CSSProperties;
+export declare const FLAG_ICON_SIZE = 24;
 /** Задержка перед возвратом фокуса в поле после выбора страны — ждём закрытия дроплиста (desktop). */
 export declare const REFOCUS_AFTER_COUNTRY_DELAY_MS = 500;

package/dist/esm/components/FieldPhone/constants.js

@@ -3,11 +3,6 @@ export const PLACEHOLDER_CHAR = '_';
  * Размер иконки флага страны в селекторе и выпадающем списке. У флагов из `@cloud-ru/ds-icons/flags`
  * `size` — высота, ширина следует нативному аспекту 24×18: `18` даёт бокс 24×18.
  */
-export const FLAG_ICON_SIZE = 18;
-/**
- * Флаг в кнопке страны — 24×18 на всех размерах (Product-макет fieldPhone). Кнопка-слот FieldCombo
- * клампит иконки до 16 на size s, инлайн-стиль снимает кламп.
- */
-export const SELECTOR_FLAG_STYLE = { maxWidth: 'none', maxHeight: 'none' };
+export const FLAG_ICON_SIZE = 24;
 /** Задержка перед возвратом фокуса в поле после выбора страны — ждём закрытия дроплиста (desktop). */
 export const REFOCUS_AFTER_COUNTRY_DELAY_MS = 500;

package/dist/esm/components/FieldSelectCreate/FieldSelectCreate.js

@@ -54,7 +54,7 @@ export const FieldSelectCreate = forwardRef(function FieldSelectCreate({ selectP
     };
     const formLayout = createLayoutType === CREATE_LAYOUT_TYPE.Modal ? (_jsx(Modal, { ...layoutProps })) : (_jsx(Drawer, { ...layoutProps, position: createLayoutProps.position ?? POSITION.Right }));
     const withTip = (node, show) => show ? _jsx(Tooltip, { tip: noPermissionTip, children: node }) : node;
-    return (_jsxs("div", { className: cn(styles.fieldSelectCreate, className), ...extractSupportProps(rest), "data-test-id": TEST_IDS.fieldSelectCreate, children: [withTip(_jsx(FieldSelect, { ...selectProps, ref: ref, size: size, disabled: isNone || selectProps.disabled, placeholder: selectProps.placeholder ?? t('FieldSelectCreate.placeholder'), ...selectDataStates, footerDivider: true, footer: 
+    return (_jsxs("div", { className: cn(styles.fieldSelectCreate, className), ...extractSupportProps(rest), "data-test-id": TEST_IDS.fieldSelectCreate, children: [withTip(_jsx(FieldSelect, { ...selectProps, ref: ref, size: size, disabled: isNone || selectProps.disabled, placeholder: selectProps.placeholder ?? t('FieldSelectCreate.placeholder'), ...selectDataStates, footer: 
                 // В состоянии ошибки показываем только «Обновить» из errorDataState — без футера «Создать» (по макету).
-                selectProps.dataError ? undefined : (_jsx(SelectFooter, { onClick: onOpen, createButtonLabel: createButtonLabel, canCreate: canCreate, size: size })) }), isNone), withTip(_jsx(Button, { view: VIEW.Function, appearance: APPEARANCE.Neutral, label: createButtonLabel, icon: _jsx(PlusSVG, {}), iconPosition: ICON_POSITION.Before, onClick: onOpen, size: size, disabled: !canCreate, className: styles.createButton, "data-test-id": TEST_IDS.fieldSelectCreateButton }), !canCreate), formLayout] }));
+                selectProps.dataError ? undefined : (_jsx(SelectFooter, { onClick: onOpen, createButtonLabel: createButtonLabel, canCreate: canCreate })) }), isNone), withTip(_jsx(Button, { view: VIEW.Function, appearance: APPEARANCE.Neutral, label: createButtonLabel, icon: _jsx(PlusSVG, {}), iconPosition: ICON_POSITION.Before, onClick: onOpen, size: size, disabled: !canCreate, className: styles.createButton, "data-test-id": TEST_IDS.fieldSelectCreateButton }), !canCreate), formLayout] }));
 });

package/dist/esm/components/FieldSelectCreate/helperComponents/SelectFooter/SelectFooter.d.ts

@@ -1,10 +1,8 @@
-import { Size } from '@cloud-ru/ds-button';
 type SelectFooterProps = {
     onClick(): void;
     createButtonLabel: string;
     canCreate: boolean;
-    size: Size;
 };
 /** Персистентный футер дроплиста с кнопкой «Создать» (недоступна и с tooltip при нехватке прав). */
-export declare function SelectFooter({ onClick, createButtonLabel, canCreate, size }: SelectFooterProps): import("react/jsx-runtime").JSX.Element;
+export declare function SelectFooter({ onClick, createButtonLabel, canCreate }: SelectFooterProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/components/FieldSelectCreate/helperComponents/SelectFooter/SelectFooter.js

@@ -6,8 +6,8 @@ import { TEST_IDS } from '../../../../constants.js';
 import { fieldsPredefinedLocale } from '../../../../locale/index.js';
 import styles from './styles.module.css';
 /** Персистентный футер дроплиста с кнопкой «Создать» (недоступна и с tooltip при нехватке прав). */
-export function SelectFooter({ onClick, createButtonLabel, canCreate, size }) {
+export function SelectFooter({ onClick, createButtonLabel, canCreate }) {
     const { t } = fieldsPredefinedLocale.useTranslations();
-    const button = (_jsx(Button, { view: VIEW.Function, appearance: APPEARANCE.Neutral, label: createButtonLabel, icon: _jsx(PlusSVG, {}), iconPosition: ICON_POSITION.Before, onClick: onClick, size: size, disabled: !canCreate, "data-test-id": TEST_IDS.fieldSelectCreateFooterButton }));
+    const button = (_jsx(Button, { view: VIEW.Function, appearance: APPEARANCE.Neutral, label: createButtonLabel, icon: _jsx(PlusSVG, {}), iconPosition: ICON_POSITION.Before, onClick: onClick, disabled: !canCreate, "data-test-id": TEST_IDS.fieldSelectCreateFooterButton }));
     return (_jsx("div", { className: styles.footerWrapper, children: canCreate ? button : _jsx(Tooltip, { tip: t('FieldSelectCreate.noPermission'), children: button }) }));
 }

package/dist/esm/components/FieldSelectCreate/helperComponents/SelectFooter/styles.module.css

@@ -1,5 +1,6 @@
 .footerWrapper{
   display:flex;
   align-items:center;
-  box-sizing:border-box;
+  padding-top:var(--sn-primitive-dimension-4, 4px);
+  border-top:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
 }

package/dist/esm/components/FieldSelectCreate/styles.module.css

@@ -1,8 +1,7 @@
 .fieldSelectCreate{
   display:flex;
   flex-direction:column;
-  gap:var(--sn-primitive-dimension-4, 4px);
-  box-sizing:border-box;
+  gap:var(--sn-primitive-dimension-8, 8px);
 }
 
 .createButton{