@cloud-ru/ds-fields 2.2.7-preview-d90ac2be.0 → 2.3.1-preview-0406cbd2.0

package/dist/cjs/components/FieldTime/FieldTime.js

@@ -155,7 +155,7 @@ exports.FieldTime = (0, react_1.forwardRef)(function FieldTime({ label = '', lab
                             readonly: readOnly,
                             hover,
                             focusVisible: focusVisible || open,
-                        }), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.acrylicBg, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.borderStateLayer, "data-state": 'borderOnBackground' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.focusLayer })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.fieldContainer, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentWrapper, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.inputLine, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.inputArea, children: [(0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, { ref: (0, merge_refs_1.default)(ref, localRef, timeSeg.nativeInputRef), className: styles_module_scss_1.default.fieldInput, value: inputValue, onChange: handleInputChange, disabled: disabled, readonly: readOnly, placeholder: placeholderMask, inputMode: input_private_1.INPUT_MODE.Numeric, tabIndex: inputTabIndex, onClick: timeSeg.handleClick, onPaste: timeSeg.handlePaste, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyDown: handleInputKeyDown, id: id, name: name, autoFocus: resolvedAutoFocus, "aria-haspopup": 'dialog', "aria-expanded": open, ...(0, utils_1.extractSupportProps)(rest), "data-test-id": constants_1.TEST_IDS.fieldTimeInput }), postfixButtons && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.postfixButtonsSlot, children: postfixButtons })] }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconSlot, "data-test-id": constants_1.TEST_IDS.fieldTimeIcon, "aria-hidden": true, children: (0, jsx_runtime_1.jsx)(system_1.WatchSVG, {}) })] }) })] }));
+                        }), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.acrylicBg, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.borderStateLayer, "data-state": 'borderOnBackground' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.focusLayer })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.fieldContainer, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentWrapper, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.inputLine, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.inputArea, children: (0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, { ref: (0, merge_refs_1.default)(ref, localRef, timeSeg.nativeInputRef), className: styles_module_scss_1.default.fieldInput, value: inputValue, onChange: handleInputChange, disabled: disabled, readonly: readOnly, placeholder: placeholderMask, inputMode: input_private_1.INPUT_MODE.Numeric, tabIndex: inputTabIndex, onClick: timeSeg.handleClick, onPaste: timeSeg.handlePaste, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyDown: handleInputKeyDown, id: id, name: name, autoFocus: resolvedAutoFocus, "aria-haspopup": 'dialog', "aria-expanded": open, ...(0, utils_1.extractSupportProps)(rest), "data-test-id": constants_1.TEST_IDS.fieldTimeInput }) }), postfixButtons && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.postfixButtonsSlot, children: postfixButtons })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconSlot, "data-test-id": constants_1.TEST_IDS.fieldTimeIcon, "aria-hidden": true, children: (0, jsx_runtime_1.jsx)(system_1.WatchSVG, {}) })] }) })] }));
     return ((0, jsx_runtime_1.jsx)(field_decorator_1.FieldDecorator, { className: className, label: label, labelTooltip: labelTooltip, caption: caption, hint: hint, error: error, validationState: validationState, showHintIcon: showHintIcon, length: length, required: required, labelFor: id, disabled: disabled, readonly: readOnly, size: size, children: (0, jsx_runtime_1.jsx)(calendar_1.TimePickerDropdown
         // Явный data-test-id на дропдауне → детерминированный id портального контента:
         // `getTestIdBuilder` строит `content-${id}`, так контент адресуем для open-picker-снимка

package/dist/cjs/components/shared/helperComponents/FieldElementButton/styles.module.css

@@ -28,7 +28,7 @@
   inset:0;
   display:none;
   border-radius:inherit;
-  outline:var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+  outline:var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
   outline-offset:calc(0px - var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)));
 }
 
@@ -45,10 +45,10 @@
   background:none;
 }
 .buttonContainer[data-size=s]{
-  min-width:var(--sn-field-anatomy-size-s-buttonField-container-minWidth, var(--sn-density-size-s, var(--sn-primitive-dimension-48, 48px)));
+  min-width:var(--sn-field-anatomy-size-s-buttonField-container-minWidth, var(--sn-density-size-s, var(--sn-density-scale-100-s, var(--sn-platform-comfort-scale-100-s, var(--sn-primitive-dimension-32, 32px)))));
   border-radius:var(--sn-field-anatomy-size-s-buttonField-container-borderRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px)));
-  padding-left:var(--sn-field-anatomy-size-s-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
-  padding-right:var(--sn-field-anatomy-size-s-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+  padding-left:var(--sn-field-anatomy-size-s-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-platform-comfort-spacing-control-container-horizontal-s, var(--sn-platform-comfort-scale-050-2xs, var(--sn-primitive-dimension-4, 4px)))));
+  padding-right:var(--sn-field-anatomy-size-s-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-platform-comfort-spacing-control-container-horizontal-s, var(--sn-platform-comfort-scale-050-2xs, var(--sn-primitive-dimension-4, 4px)))));
 }
 .buttonContainer[data-size=s][data-variant=before]{
   border-radius:var(--sn-field-anatomy-size-s-fieldContainer-borderTopLeftRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px))) 0 0 var(--sn-field-anatomy-size-s-fieldContainer-borderBottomLeftRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px)));
@@ -57,16 +57,16 @@
   border-radius:0 var(--sn-field-anatomy-size-s-fieldContainer-borderTopRightRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-s-fieldContainer-borderBottomRightRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px))) 0;
 }
 .buttonContainer[data-size=s] .elementWrapper{
-  gap:var(--sn-field-anatomy-size-s-buttonField-elementWrapper-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
+  gap:var(--sn-field-anatomy-size-s-buttonField-elementWrapper-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
 }
 .buttonContainer[data-size=s] .elementWrapper svg{
-  max-width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
-  max-height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+  max-width:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
+  max-height:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
 }
 .buttonContainer[data-size=m]{
-  min-width:var(--sn-field-anatomy-size-m-buttonField-container-minWidth, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
-  padding-left:var(--sn-field-anatomy-size-m-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
-  padding-right:var(--sn-field-anatomy-size-m-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+  min-width:var(--sn-field-anatomy-size-m-buttonField-container-minWidth, var(--sn-density-size-m, var(--sn-density-scale-100-m, var(--sn-platform-comfort-scale-100-m, var(--sn-primitive-dimension-40, 40px)))));
+  padding-left:var(--sn-field-anatomy-size-m-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-platform-comfort-spacing-control-container-horizontal-m, var(--sn-platform-comfort-scale-050-xs, var(--sn-primitive-dimension-8, 8px)))));
+  padding-right:var(--sn-field-anatomy-size-m-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-platform-comfort-spacing-control-container-horizontal-m, var(--sn-platform-comfort-scale-050-xs, var(--sn-primitive-dimension-8, 8px)))));
   border-radius:var(--sn-field-anatomy-size-m-buttonField-container-borderRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px)));
 }
 .buttonContainer[data-size=m][data-variant=before]{
@@ -76,16 +76,16 @@
   border-radius:0 var(--sn-field-anatomy-size-m-fieldContainer-borderTopRightRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-m-fieldContainer-borderBottomRightRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px))) 0;
 }
 .buttonContainer[data-size=m] .elementWrapper{
-  gap:var(--sn-field-anatomy-size-m-buttonField-elementWrapper-gap, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
+  gap:var(--sn-field-anatomy-size-m-buttonField-elementWrapper-gap, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
 }
 .buttonContainer[data-size=m] .elementWrapper svg{
-  max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
-  max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  max-width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  max-height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
 }
 .buttonContainer[data-size=l]{
-  min-width:var(--sn-field-anatomy-size-l-buttonField-container-minWidth, var(--sn-density-size-l, var(--sn-primitive-dimension-64, 64px)));
-  padding-left:var(--sn-field-anatomy-size-l-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
-  padding-right:var(--sn-field-anatomy-size-l-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
+  min-width:var(--sn-field-anatomy-size-l-buttonField-container-minWidth, var(--sn-density-size-l, var(--sn-density-scale-100-l, var(--sn-platform-comfort-scale-100-l, var(--sn-primitive-dimension-48, 48px)))));
+  padding-left:var(--sn-field-anatomy-size-l-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-platform-comfort-spacing-control-container-horizontal-l, var(--sn-platform-comfort-scale-050-s, var(--sn-primitive-dimension-12, 12px)))));
+  padding-right:var(--sn-field-anatomy-size-l-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-platform-comfort-spacing-control-container-horizontal-l, var(--sn-platform-comfort-scale-050-s, var(--sn-primitive-dimension-12, 12px)))));
   border-radius:var(--sn-field-anatomy-size-l-buttonField-container-borderRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px)));
 }
 .buttonContainer[data-size=l][data-variant=before]{
@@ -95,11 +95,11 @@
   border-radius:0 var(--sn-field-anatomy-size-l-fieldContainer-borderTopRightRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-l-fieldContainer-borderBottomRightRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px))) 0;
 }
 .buttonContainer[data-size=l] .elementWrapper{
-  gap:var(--sn-field-anatomy-size-l-buttonField-elementWrapper-gap, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
+  gap:var(--sn-field-anatomy-size-l-buttonField-elementWrapper-gap, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-l, var(--sn-platform-comfort-spacing-control-wrapper-vertical-l, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
 }
 .buttonContainer[data-size=l] .elementWrapper svg{
-  max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
-  max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  max-width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  max-height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
 }
 .buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer{
   position:absolute;
@@ -115,7 +115,7 @@
   background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
 }
 .buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer[data-state=activatedOnBackground]{
-  background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
+  background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
 }
 .buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer[data-state=versionOnColor]{
   background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -140,7 +140,7 @@
     background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
   }
   .buttonContainer:not([data-loading=true], [data-disabled=true]):hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground]{
-    background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+    background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
   }
   .buttonContainer:not([data-loading=true], [data-disabled=true]):hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
     background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -167,7 +167,7 @@
   background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
 }
 .buttonContainer:not([data-loading=true], [data-disabled=true])[data-loading] .backgroundStateLayer[data-state=activatedOnBackground], .buttonContainer:not([data-loading=true], [data-disabled=true]):active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground], .buttonContainer:not([data-loading=true], [data-disabled=true])[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground]{
-  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
+  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
 }
 .buttonContainer:not([data-loading=true], [data-disabled=true])[data-loading] .backgroundStateLayer[data-state=versionOnColor], .buttonContainer:not([data-loading=true], [data-disabled=true]):active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor], .buttonContainer:not([data-loading=true], [data-disabled=true])[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
   background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));

package/dist/cjs/components/shared/helperComponents/FieldShell/FieldShell.d.ts

@@ -25,6 +25,8 @@ export type FieldShellProps = WithSupportProps<{
     header?: ReactNode;
     /** Ряд элементов под контентом (действия, счётчик) */
     footer?: ReactNode;
+    /** Многострочное поле с ручным изменением высоты — поднимает минимальную высоту контейнера */
+    resizable?: boolean;
     /** CSS-класс оболочки (fieldWrapper) */
     className?: string;
     /** Inline-стиль оболочки (например, CSS-переменные высоты) */
@@ -40,4 +42,4 @@ export type FieldShellProps = WithSupportProps<{
  * потребителей с кастомным контентом (например, WYSIWYG-редактор), которым нужен
  * тот же внешний вид, но не подходит нативный `<textarea>`.
  */
-export declare function FieldShell({ children, size, validationState, disabled, readonly: readOnly, background, focusVisible, hover, header, footer, className, style, onMouseEnter, onMouseLeave, ...rest }: FieldShellProps): import("react/jsx-runtime").JSX.Element;
+export declare function FieldShell({ children, size, validationState, disabled, readonly: readOnly, background, focusVisible, hover, header, footer, resizable, className, style, onMouseEnter, onMouseLeave, ...rest }: FieldShellProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/shared/helperComponents/FieldShell/FieldShell.js

@@ -17,6 +17,6 @@ const styles_module_scss_2 = __importDefault(require('./styles.module.css'));
  * потребителей с кастомным контентом (например, WYSIWYG-редактор), которым нужен
  * тот же внешний вид, но не подходит нативный `<textarea>`.
  */
-function FieldShell({ children, size = field_decorator_1.SIZE.M, validationState = field_decorator_1.VALIDATION_STATE.Default, disabled, readonly: readOnly, background = true, focusVisible, hover, header, footer, className, style, onMouseEnter, onMouseLeave, ...rest }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { ...(0, utils_1.extractSupportProps)(rest), className: (0, classnames_1.default)(styles_module_scss_1.default.fieldWrapper, className), "data-size": size, "data-validation-state": validationState, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, "data-withbackground": background || undefined, "data-focusvisible": focusVisible || undefined, "data-hover": !readOnly && hover ? true : undefined, style: style, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.backgroundWrapper, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.materialLayer, ...(0, utils_2.getAcrylicProps)({ validationState, disabled, readonly: readOnly, hover, focusVisible }), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.acrylicBg, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.borderStateLayer, "data-state": 'borderOnBackground' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.focusLayer })] }), header && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.header, children: header }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.fieldContainer, children: children }), footer && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.footer, children: footer })] }));
+function FieldShell({ children, size = field_decorator_1.SIZE.M, validationState = field_decorator_1.VALIDATION_STATE.Default, disabled, readonly: readOnly, background = true, focusVisible, hover, header, footer, resizable, className, style, onMouseEnter, onMouseLeave, ...rest }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { ...(0, utils_1.extractSupportProps)(rest), className: (0, classnames_1.default)(styles_module_scss_1.default.fieldWrapper, className), "data-size": size, "data-validation-state": validationState, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, "data-withbackground": background || undefined, "data-focusvisible": focusVisible || undefined, "data-hover": !readOnly && hover ? true : undefined, "data-resizable": resizable || undefined, style: style, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.backgroundWrapper, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.materialLayer, ...(0, utils_2.getAcrylicProps)({ validationState, disabled, readonly: readOnly, hover, focusVisible }), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.acrylicBg, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.borderStateLayer, "data-state": 'borderOnBackground' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.focusLayer })] }), header && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.header, children: header }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.fieldContainer, children: children }), footer && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.footer, children: footer })] }));
 }