@invoicebox/ui 0.1.0-alpha.311 → 0.1.0-alpha.313

package/dist/components/form/Autocomplete/components/Autocomplete/index.js

@@ -57,8 +57,7 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
     inputMaxLength = _ref.inputMaxLength,
     _ref$isInputOnlyNumbe = _ref.isInputOnlyNumbers,
     isInputOnlyNumbers = _ref$isInputOnlyNumbe === void 0 ? false : _ref$isInputOnlyNumbe,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'M' : _ref$size,
+    size = _ref.size,
     autoFocus = _ref.autoFocus,
     _ref$required = _ref.required,
     required = _ref$required === void 0 ? false : _ref$required,
@@ -103,7 +102,8 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
     inputLabel = _useInputStyles.inputLabel,
     paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
     isHideModernPlaceholder = _useInputStyles.isHideModernPlaceholder,
-    modernInputPlaceholder = _useInputStyles.modernInputPlaceholder;
+    modernInputPlaceholder = _useInputStyles.modernInputPlaceholder,
+    fieldSize = _useInputStyles.fieldSize;
   var handleOpen = (0, _react.useCallback)(function () {
     return setIsOpen(true);
   }, []);
@@ -188,13 +188,13 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
     disabled: disabled,
     required: required,
     useModernStyles: useModernStyles,
-    size: size,
+    size: fieldSize,
     left: useModernStyles && typeof inputPaddingLeft === 'number' ? inputPaddingLeft - _constants2.LABEL_PADDING : undefined
   }, /*#__PURE__*/_react["default"].createElement(S.InputLabelContent, null, children ? /*#__PURE__*/_react["default"].createElement(S.ChildrenWrapper, null, children) : null, useModernStyles && modernInputPlaceholder && /*#__PURE__*/_react["default"].createElement(_ModernPlaceholder.ModernPlaceholder, {
     visible: !isHideModernPlaceholder,
     paddingLeft: typeof inputPaddingLeft === 'number' ? inputPaddingLeft : 20,
-    paddingTop: _constants.MODERN_STYLE_SIZE_PARAMS_MAP[size].$placeholderPaddingTop,
-    size: size,
+    paddingTop: _constants.MODERN_STYLE_SIZE_PARAMS_MAP[fieldSize].$placeholderPaddingTop,
+    size: fieldSize,
     required: required
   }, modernInputPlaceholder), /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
     ref: ref,

package/dist/components/form/CurrencyInput/CoreCurrencyInput/index.js

@@ -13,8 +13,7 @@ var _useInputStyles2 = require("../../_hooks/useInputStyles");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var CoreCurrencyInput = exports.CoreCurrencyInput = function CoreCurrencyInput(_ref) {
   var label = _ref.label,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'M' : _ref$size,
+    size = _ref.size,
     _ref$hasError = _ref.hasError,
     hasError = _ref$hasError === void 0 ? false : _ref$hasError,
     value = _ref.value,
@@ -48,14 +47,15 @@ var CoreCurrencyInput = exports.CoreCurrencyInput = function CoreCurrencyInput(_
     }),
     modernPlaceholder = _useInputStyles.modernPlaceholder,
     paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
-    inputLabel = _useInputStyles.inputLabel;
+    inputLabel = _useInputStyles.inputLabel,
+    fieldSize = _useInputStyles.fieldSize;
   return /*#__PURE__*/_react["default"].createElement(_InputLabel.InputLabel, {
     inFocus: inFocus,
     label: inputLabel,
     disabled: disabled,
     required: required,
     useModernStyles: useModernStyles,
-    size: size
+    size: fieldSize
   }, /*#__PURE__*/_react["default"].createElement(_styles.InputWrapper, null, modernPlaceholder, /*#__PURE__*/_react["default"].createElement(_styles.StyledCurrencyInputFromLibrary, {
     $palette: palette,
     $hasBorder: !useModernStyles,

package/dist/components/form/DateInput/index.js

@@ -39,8 +39,7 @@ var DateInput = exports.DateInput = function DateInput(_ref) {
     label = _ref.label,
     minDate = _ref.minDate,
     maxDate = _ref.maxDate,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'M' : _ref$size,
+    size = _ref.size,
     dropdownProps = _ref.dropdownProps,
     placeholder = _ref.placeholder,
     _ref$useModernStyles = _ref.useModernStyles,
@@ -92,7 +91,8 @@ var DateInput = exports.DateInput = function DateInput(_ref) {
     }),
     inputLabel = _useInputStyles.inputLabel,
     paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
-    modernPlaceholder = _useInputStyles.modernPlaceholder;
+    modernPlaceholder = _useInputStyles.modernPlaceholder,
+    fieldSize = _useInputStyles.fieldSize;
   (0, _react.useEffect)(function () {
     if (stringValue && value === resetValue) {
       setStringValue('');
@@ -123,7 +123,7 @@ var DateInput = exports.DateInput = function DateInput(_ref) {
     inFocus: inFocus,
     label: inputLabel,
     useModernStyles: useModernStyles,
-    size: size,
+    size: fieldSize,
     required: required
   }, /*#__PURE__*/_react["default"].createElement(S.InputWrapper, null, modernPlaceholder, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
     onClick: handleTrigger,

package/dist/components/form/DateTimeInput/index.js

@@ -41,8 +41,7 @@ var DateTimeInput = exports.DateTimeInput = function DateTimeInput(_ref) {
     label = _ref.label,
     minDate = _ref.minDate,
     maxDate = _ref.maxDate,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'M' : _ref$size,
+    size = _ref.size,
     dropdownProps = _ref.dropdownProps,
     placeholder = _ref.placeholder,
     saveLabel = _ref.saveLabel,
@@ -103,7 +102,8 @@ var DateTimeInput = exports.DateTimeInput = function DateTimeInput(_ref) {
     }),
     inputLabel = _useInputStyles.inputLabel,
     paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
-    modernPlaceholder = _useInputStyles.modernPlaceholder;
+    modernPlaceholder = _useInputStyles.modernPlaceholder,
+    fieldSize = _useInputStyles.fieldSize;
   var handleStringValueChange = (0, _react.useCallback)(function (event) {
     setStringValue(event.target.value);
   }, [setStringValue]);
@@ -151,7 +151,7 @@ var DateTimeInput = exports.DateTimeInput = function DateTimeInput(_ref) {
     label: inputLabel,
     required: required,
     useModernStyles: useModernStyles,
-    size: size
+    size: fieldSize
   }, /*#__PURE__*/_react["default"].createElement(S.InputWrapper, null, modernPlaceholder, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
     onClick: handleTrigger,
     ref: inputRef,

package/dist/components/form/PhoneInput/index.js

@@ -43,8 +43,7 @@ var PhoneInput = exports.PhoneInput = function PhoneInput(_ref) {
     countries = _ref.countries,
     onCountryChange = _ref.onCountryChange,
     pureInputProps = _ref.pureInputProps,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'M' : _ref$size,
+    size = _ref.size,
     autoFocus = _ref.autoFocus,
     _ref$isSupportCityRus = _ref.isSupportCityRusPhoneNumber,
     isSupportCityRusPhoneNumber = _ref$isSupportCityRus === void 0 ? false : _ref$isSupportCityRus,
@@ -102,7 +101,8 @@ var PhoneInput = exports.PhoneInput = function PhoneInput(_ref) {
     }),
     inputLabel = _useInputStyles.inputLabel,
     paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
-    isHideModernPlaceholder = _useInputStyles.isHideModernPlaceholder;
+    isHideModernPlaceholder = _useInputStyles.isHideModernPlaceholder,
+    fieldSize = _useInputStyles.fieldSize;
   var handleChangeCountry = (0, _react.useCallback)(function (countryCode) {
     setCountry(countryCode);
     if (onCountryChange) {
@@ -191,13 +191,13 @@ var PhoneInput = exports.PhoneInput = function PhoneInput(_ref) {
     disabled: disabled,
     required: required,
     useModernStyles: useModernStyles,
-    size: size,
-    left: useModernStyles ? 65 : undefined
+    size: fieldSize,
+    left: isHaveSelectCountries && useModernStyles ? 65 : undefined
   }, /*#__PURE__*/_react["default"].createElement(S.InputLabelContent, null, useModernStyles && /*#__PURE__*/_react["default"].createElement(_ModernPlaceholder.ModernPlaceholder, {
     visible: !isHideModernPlaceholder,
     paddingLeft: isHaveSelectCountries ? 75 : 18,
-    paddingTop: _constants.MODERN_STYLE_SIZE_PARAMS_MAP[size].$placeholderPaddingTop,
-    size: size,
+    paddingTop: _constants.MODERN_STYLE_SIZE_PARAMS_MAP[fieldSize].$placeholderPaddingTop,
+    size: fieldSize,
     required: required
   }, modernPlaceholderText), !!(countrySelectOptions !== null && countrySelectOptions !== void 0 && countrySelectOptions.length) && /*#__PURE__*/_react["default"].createElement(S.InputLabelFloatWrapper, null, /*#__PURE__*/_react["default"].createElement(S.CountrySelectWrapper, null, /*#__PURE__*/_react["default"].createElement(_CountrySelect.CountrySelect, {
     minWidth: isMobile ? '100%' : '350px',

package/dist/components/form/PhoneInput/index.stories.js

@@ -56,7 +56,8 @@ var commonProps = {
   disabled: false,
   label: 'Телефон',
   size: 'L',
-  isSupportCityRusPhoneNumber: false
+  isSupportCityRusPhoneNumber: false,
+  useModernStyles: true
 };
 var MultiCountry = exports.MultiCountry = {
   args: _objectSpread(_objectSpread({}, commonProps), {}, {

package/dist/components/form/PositiveIntegerInput/index.js

@@ -32,8 +32,7 @@ var PositiveIntegerInput = exports.PositiveIntegerInput = function PositiveInteg
     onFocus = _ref.onFocus,
     onBlur = _ref.onBlur,
     name = _ref.name,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'M' : _ref$size,
+    size = _ref.size,
     _ref$useModernStyles = _ref.useModernStyles,
     useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles;
   var _useInputFocus = (0, _useInputFocus2.useInputFocus)({
@@ -53,7 +52,8 @@ var PositiveIntegerInput = exports.PositiveIntegerInput = function PositiveInteg
     }),
     inputLabel = _useInputStyles.inputLabel,
     paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
-    modernPlaceholder = _useInputStyles.modernPlaceholder;
+    modernPlaceholder = _useInputStyles.modernPlaceholder,
+    fieldSize = _useInputStyles.fieldSize;
   var filters = (0, _useFilters.useFilters)({
     max: max
   });
@@ -86,7 +86,7 @@ var PositiveIntegerInput = exports.PositiveIntegerInput = function PositiveInteg
     inFocus: inFocus,
     label: inputLabel,
     useModernStyles: useModernStyles,
-    size: size
+    size: fieldSize
   }, /*#__PURE__*/_react["default"].createElement(S.ControlWrapper, null, modernPlaceholder, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
     name: name,
     hasError: hasError,

package/dist/components/form/SearchInput/index.js

@@ -28,8 +28,7 @@ var SearchInput = exports.SearchInput = /*#__PURE__*/(0, _react.forwardRef)(func
     autoFocus = _ref.autoFocus,
     isOnlyNumbers = _ref.isOnlyNumbers,
     maxLength = _ref.maxLength,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'M' : _ref$size,
+    size = _ref.size,
     _ref$useModernStyles = _ref.useModernStyles,
     useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles;
   var _useInputFocus = (0, _useInputFocus2.useInputFocus)({
@@ -51,7 +50,8 @@ var SearchInput = exports.SearchInput = /*#__PURE__*/(0, _react.forwardRef)(func
     }),
     inputLabel = _useInputStyles.inputLabel,
     paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
-    modernPlaceholder = _useInputStyles.modernPlaceholder;
+    modernPlaceholder = _useInputStyles.modernPlaceholder,
+    fieldSize = _useInputStyles.fieldSize;
   var handleInputReset = (0, _react.useCallback)(function () {
     onChange('');
   }, [onChange]);
@@ -60,7 +60,7 @@ var SearchInput = exports.SearchInput = /*#__PURE__*/(0, _react.forwardRef)(func
   }, [onChange]);
   return /*#__PURE__*/_react["default"].createElement(_InputLabel.InputLabel, {
     useModernStyles: useModernStyles,
-    size: size,
+    size: fieldSize,
     label: useModernStyles ? inputLabel : undefined
   }, modernPlaceholder, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
     ref: ref,

package/dist/components/form/Select/components/Input/index.js

@@ -28,8 +28,7 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
     label = _ref.label,
     isOpen = _ref.isOpen,
     onReset = _ref.onReset,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'M' : _ref$size,
+    size = _ref.size,
     onClick = _ref.onClick,
     required = _ref.required,
     _ref$useModernStyles = _ref.useModernStyles,
@@ -46,14 +45,15 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
     }),
     inputLabel = _useInputStyles.inputLabel,
     paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
-    modernPlaceholder = _useInputStyles.modernPlaceholder;
+    modernPlaceholder = _useInputStyles.modernPlaceholder,
+    fieldSize = _useInputStyles.fieldSize;
   var isShowResetIcon = !!value && !!onReset;
   return /*#__PURE__*/_react["default"].createElement(_InputLabel.InputLabel, {
     inFocus: inFocus,
     label: inputLabel,
     required: required,
     useModernStyles: useModernStyles,
-    size: size
+    size: fieldSize
   }, /*#__PURE__*/_react["default"].createElement(S.ControlWrapper, null, modernPlaceholder, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
     ref: ref,
     hasError: hasError,

package/dist/components/form/Select/index.js

@@ -69,6 +69,7 @@ var Select = exports.Select = function Select(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
+  var fieldSize = useModernStyles && !size ? 'L' : size || 'M';
 
   /*  
       существует интеграционная проблема селекта с final-form 
@@ -225,7 +226,7 @@ var Select = exports.Select = function Select(_ref) {
     name: name,
     isOpen: isOpen,
     onReset: isResetButtonEnabled ? handleReset : undefined,
-    size: size,
+    size: fieldSize,
     onClick: isDrawerOptions || !!renderedValue ? handleInputClick : undefined,
     required: required,
     useModernStyles: useModernStyles

package/dist/components/form/TextInput/index.js

@@ -32,8 +32,7 @@ var TextInput = exports.TextInput = /*#__PURE__*/_react["default"].forwardRef(fu
     paddingRight = _ref.paddingRight,
     type = _ref.type,
     children = _ref.children,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'M' : _ref$size,
+    size = _ref.size,
     isOnlyNumbers = _ref.isOnlyNumbers,
     autoFocus = _ref.autoFocus,
     _ref$element = _ref.element,
@@ -70,7 +69,8 @@ var TextInput = exports.TextInput = /*#__PURE__*/_react["default"].forwardRef(fu
     }),
     inputLabel = _useInputStyles.inputLabel,
     paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
-    modernPlaceholder = _useInputStyles.modernPlaceholder;
+    modernPlaceholder = _useInputStyles.modernPlaceholder,
+    fieldSize = _useInputStyles.fieldSize;
   var handleChange = (0, _react.useCallback)(function (event) {
     onChange(event.target.value.slice(0, maxLength !== null && maxLength !== void 0 ? maxLength : Infinity));
   }, [onChange, maxLength]);
@@ -79,7 +79,7 @@ var TextInput = exports.TextInput = /*#__PURE__*/_react["default"].forwardRef(fu
     label: inputLabel,
     disabled: disabled,
     required: required,
-    size: size,
+    size: fieldSize,
     useModernStyles: useModernStyles
   }, /*#__PURE__*/_react["default"].createElement(S.InputLabelContent, null, modernPlaceholder, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
     id: id,

package/dist/components/form/_hooks/useInputStyles.d.ts

@@ -1,7 +1,7 @@
 import { TSizes } from '../constants';
 type TParams = {
     inFocus: boolean;
-    size: TSizes;
+    size?: TSizes;
     isHaveValue: boolean;
     useModernStyles?: boolean;
     label?: string;
@@ -20,5 +20,6 @@ export declare const useInputStyles: ({ inFocus, useModernStyles, label, size, p
     modernInputPlaceholder: string | undefined;
     isHideModernPlaceholder: boolean;
     modernPlaceholder: false | "" | import("react/jsx-runtime").JSX.Element | undefined;
+    fieldSize: TSizes;
 };
 export {};

package/dist/components/form/_hooks/useInputStyles.js

@@ -27,6 +27,7 @@ var useInputStyles = exports.useInputStyles = function useInputStyles(_ref) {
     conditionHideModernPlaceholder = _ref$conditionHideMod === void 0 ? false : _ref$conditionHideMod,
     paddingRight = _ref.paddingRight;
   var isHideModernPlaceholder = isHaveValue || inFocus || conditionHideModernPlaceholder;
+  var fieldSize = useModernStyles && !size ? 'L' : size || 'M';
   var inputLabel = (0, _react.useMemo)(function () {
     if (useModernStyles) {
       return isHideModernPlaceholder ? label : undefined;
@@ -37,25 +38,25 @@ var useInputStyles = exports.useInputStyles = function useInputStyles(_ref) {
   var paddingAndVariantOptions = (0, _react.useMemo)(function () {
     if (useModernStyles) {
       if (isHideModernPlaceholder) {
-        return _constants.MODERN_STYLE_SIZE_PARAMS_MAP[size];
+        return _constants.MODERN_STYLE_SIZE_PARAMS_MAP[fieldSize];
       } else {
-        return _objectSpread(_objectSpread({}, _constants.MODERN_STYLE_SIZE_PARAMS_MAP[size]), {}, {
-          paddingTop: _constants.MODERN_STYLE_SIZE_PARAMS_MAP[size].$placeholderPaddingTop,
-          paddingBottom: _constants.MODERN_STYLE_SIZE_PARAMS_MAP[size].$placeholderPaddingTop
+        return _objectSpread(_objectSpread({}, _constants.MODERN_STYLE_SIZE_PARAMS_MAP[fieldSize]), {}, {
+          paddingTop: _constants.MODERN_STYLE_SIZE_PARAMS_MAP[fieldSize].$placeholderPaddingTop,
+          paddingBottom: _constants.MODERN_STYLE_SIZE_PARAMS_MAP[fieldSize].$placeholderPaddingTop
         });
       }
     } else {
-      return _constants.SIZE_PARAMS_MAP[size];
+      return _constants.SIZE_PARAMS_MAP[fieldSize];
     }
-  }, [useModernStyles, isHideModernPlaceholder, size]);
+  }, [useModernStyles, isHideModernPlaceholder, fieldSize]);
   var modernInputPlaceholder = (0, _react.useMemo)(function () {
     return placeholder || label;
   }, [label, placeholder]);
   var modernPlaceholder = useModernStyles && modernInputPlaceholder && /*#__PURE__*/_react["default"].createElement(_ModernPlaceholder.ModernPlaceholder, {
     visible: !isHideModernPlaceholder,
-    paddingTop: _constants.MODERN_STYLE_SIZE_PARAMS_MAP[size].$placeholderPaddingTop,
+    paddingTop: _constants.MODERN_STYLE_SIZE_PARAMS_MAP[fieldSize].$placeholderPaddingTop,
     paddingRight: paddingRight,
-    size: size,
+    size: fieldSize,
     required: required
   }, modernInputPlaceholder);
   return {
@@ -63,6 +64,7 @@ var useInputStyles = exports.useInputStyles = function useInputStyles(_ref) {
     paddingAndVariantOptions: paddingAndVariantOptions,
     modernInputPlaceholder: modernInputPlaceholder,
     isHideModernPlaceholder: isHideModernPlaceholder,
-    modernPlaceholder: modernPlaceholder
+    modernPlaceholder: modernPlaceholder,
+    fieldSize: fieldSize
   };
 };

package/dist/esm/components/form/Autocomplete/components/Autocomplete/index.js

@@ -48,8 +48,7 @@ export var Autocomplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
     inputMaxLength = _ref.inputMaxLength,
     _ref$isInputOnlyNumbe = _ref.isInputOnlyNumbers,
     isInputOnlyNumbers = _ref$isInputOnlyNumbe === void 0 ? false : _ref$isInputOnlyNumbe,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'M' : _ref$size,
+    size = _ref.size,
     autoFocus = _ref.autoFocus,
     _ref$required = _ref.required,
     required = _ref$required === void 0 ? false : _ref$required,
@@ -94,7 +93,8 @@ export var Autocomplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
     inputLabel = _useInputStyles.inputLabel,
     paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
     isHideModernPlaceholder = _useInputStyles.isHideModernPlaceholder,
-    modernInputPlaceholder = _useInputStyles.modernInputPlaceholder;
+    modernInputPlaceholder = _useInputStyles.modernInputPlaceholder,
+    fieldSize = _useInputStyles.fieldSize;
   var handleOpen = useCallback(function () {
     return setIsOpen(true);
   }, []);
@@ -179,13 +179,13 @@ export var Autocomplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
     disabled: disabled,
     required: required,
     useModernStyles: useModernStyles,
-    size: size,
+    size: fieldSize,
     left: useModernStyles && typeof inputPaddingLeft === 'number' ? inputPaddingLeft - LABEL_PADDING : undefined
   }, /*#__PURE__*/React.createElement(S.InputLabelContent, null, children ? /*#__PURE__*/React.createElement(S.ChildrenWrapper, null, children) : null, useModernStyles && modernInputPlaceholder && /*#__PURE__*/React.createElement(ModernPlaceholder, {
     visible: !isHideModernPlaceholder,
     paddingLeft: typeof inputPaddingLeft === 'number' ? inputPaddingLeft : 20,
-    paddingTop: MODERN_STYLE_SIZE_PARAMS_MAP[size].$placeholderPaddingTop,
-    size: size,
+    paddingTop: MODERN_STYLE_SIZE_PARAMS_MAP[fieldSize].$placeholderPaddingTop,
+    size: fieldSize,
     required: required
   }, modernInputPlaceholder), /*#__PURE__*/React.createElement(PureInput, _extends({
     ref: ref,

package/dist/esm/components/form/CurrencyInput/CoreCurrencyInput/index.js

@@ -6,8 +6,7 @@ import { useComponentPalette } from '../../../../palette';
 import { useInputStyles } from '../../_hooks/useInputStyles';
 export var CoreCurrencyInput = function CoreCurrencyInput(_ref) {
   var label = _ref.label,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'M' : _ref$size,
+    size = _ref.size,
     _ref$hasError = _ref.hasError,
     hasError = _ref$hasError === void 0 ? false : _ref$hasError,
     value = _ref.value,
@@ -41,14 +40,15 @@ export var CoreCurrencyInput = function CoreCurrencyInput(_ref) {
     }),
     modernPlaceholder = _useInputStyles.modernPlaceholder,
     paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
-    inputLabel = _useInputStyles.inputLabel;
+    inputLabel = _useInputStyles.inputLabel,
+    fieldSize = _useInputStyles.fieldSize;
   return /*#__PURE__*/React.createElement(InputLabel, {
     inFocus: inFocus,
     label: inputLabel,
     disabled: disabled,
     required: required,
     useModernStyles: useModernStyles,
-    size: size
+    size: fieldSize
   }, /*#__PURE__*/React.createElement(InputWrapper, null, modernPlaceholder, /*#__PURE__*/React.createElement(StyledCurrencyInputFromLibrary, {
     $palette: palette,
     $hasBorder: !useModernStyles,

package/dist/esm/components/form/DateInput/index.js

@@ -30,8 +30,7 @@ export var DateInput = function DateInput(_ref) {
     label = _ref.label,
     minDate = _ref.minDate,
     maxDate = _ref.maxDate,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'M' : _ref$size,
+    size = _ref.size,
     dropdownProps = _ref.dropdownProps,
     placeholder = _ref.placeholder,
     _ref$useModernStyles = _ref.useModernStyles,
@@ -83,7 +82,8 @@ export var DateInput = function DateInput(_ref) {
     }),
     inputLabel = _useInputStyles.inputLabel,
     paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
-    modernPlaceholder = _useInputStyles.modernPlaceholder;
+    modernPlaceholder = _useInputStyles.modernPlaceholder,
+    fieldSize = _useInputStyles.fieldSize;
   useEffect(function () {
     if (stringValue && value === resetValue) {
       setStringValue('');
@@ -114,7 +114,7 @@ export var DateInput = function DateInput(_ref) {
     inFocus: inFocus,
     label: inputLabel,
     useModernStyles: useModernStyles,
-    size: size,
+    size: fieldSize,
     required: required
   }, /*#__PURE__*/React.createElement(S.InputWrapper, null, modernPlaceholder, /*#__PURE__*/React.createElement(PureInput, _extends({
     onClick: handleTrigger,

package/dist/esm/components/form/DateTimeInput/index.js

@@ -32,8 +32,7 @@ export var DateTimeInput = function DateTimeInput(_ref) {
     label = _ref.label,
     minDate = _ref.minDate,
     maxDate = _ref.maxDate,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'M' : _ref$size,
+    size = _ref.size,
     dropdownProps = _ref.dropdownProps,
     placeholder = _ref.placeholder,
     saveLabel = _ref.saveLabel,
@@ -94,7 +93,8 @@ export var DateTimeInput = function DateTimeInput(_ref) {
     }),
     inputLabel = _useInputStyles.inputLabel,
     paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
-    modernPlaceholder = _useInputStyles.modernPlaceholder;
+    modernPlaceholder = _useInputStyles.modernPlaceholder,
+    fieldSize = _useInputStyles.fieldSize;
   var handleStringValueChange = useCallback(function (event) {
     setStringValue(event.target.value);
   }, [setStringValue]);
@@ -142,7 +142,7 @@ export var DateTimeInput = function DateTimeInput(_ref) {
     label: inputLabel,
     required: required,
     useModernStyles: useModernStyles,
-    size: size
+    size: fieldSize
   }, /*#__PURE__*/React.createElement(S.InputWrapper, null, modernPlaceholder, /*#__PURE__*/React.createElement(PureInput, _extends({
     onClick: handleTrigger,
     ref: inputRef,

package/dist/esm/components/form/PhoneInput/index.js

@@ -33,8 +33,7 @@ export var PhoneInput = function PhoneInput(_ref) {
     countries = _ref.countries,
     onCountryChange = _ref.onCountryChange,
     pureInputProps = _ref.pureInputProps,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'M' : _ref$size,
+    size = _ref.size,
     autoFocus = _ref.autoFocus,
     _ref$isSupportCityRus = _ref.isSupportCityRusPhoneNumber,
     isSupportCityRusPhoneNumber = _ref$isSupportCityRus === void 0 ? false : _ref$isSupportCityRus,
@@ -92,7 +91,8 @@ export var PhoneInput = function PhoneInput(_ref) {
     }),
     inputLabel = _useInputStyles.inputLabel,
     paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
-    isHideModernPlaceholder = _useInputStyles.isHideModernPlaceholder;
+    isHideModernPlaceholder = _useInputStyles.isHideModernPlaceholder,
+    fieldSize = _useInputStyles.fieldSize;
   var handleChangeCountry = useCallback(function (countryCode) {
     setCountry(countryCode);
     if (onCountryChange) {
@@ -181,13 +181,13 @@ export var PhoneInput = function PhoneInput(_ref) {
     disabled: disabled,
     required: required,
     useModernStyles: useModernStyles,
-    size: size,
-    left: useModernStyles ? 65 : undefined
+    size: fieldSize,
+    left: isHaveSelectCountries && useModernStyles ? 65 : undefined
   }, /*#__PURE__*/React.createElement(S.InputLabelContent, null, useModernStyles && /*#__PURE__*/React.createElement(ModernPlaceholder, {
     visible: !isHideModernPlaceholder,
     paddingLeft: isHaveSelectCountries ? 75 : 18,
-    paddingTop: MODERN_STYLE_SIZE_PARAMS_MAP[size].$placeholderPaddingTop,
-    size: size,
+    paddingTop: MODERN_STYLE_SIZE_PARAMS_MAP[fieldSize].$placeholderPaddingTop,
+    size: fieldSize,
     required: required
   }, modernPlaceholderText), !!(countrySelectOptions !== null && countrySelectOptions !== void 0 && countrySelectOptions.length) && /*#__PURE__*/React.createElement(S.InputLabelFloatWrapper, null, /*#__PURE__*/React.createElement(S.CountrySelectWrapper, null, /*#__PURE__*/React.createElement(CountrySelect, {
     minWidth: isMobile ? '100%' : '350px',

package/dist/esm/components/form/PhoneInput/index.stories.js

@@ -48,7 +48,8 @@ var commonProps = {
   disabled: false,
   label: 'Телефон',
   size: 'L',
-  isSupportCityRusPhoneNumber: false
+  isSupportCityRusPhoneNumber: false,
+  useModernStyles: true
 };
 export var MultiCountry = {
   args: _objectSpread(_objectSpread({}, commonProps), {}, {

package/dist/esm/components/form/PositiveIntegerInput/index.js

@@ -23,8 +23,7 @@ export var PositiveIntegerInput = function PositiveIntegerInput(_ref) {
     onFocus = _ref.onFocus,
     onBlur = _ref.onBlur,
     name = _ref.name,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'M' : _ref$size,
+    size = _ref.size,
     _ref$useModernStyles = _ref.useModernStyles,
     useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles;
   var _useInputFocus = useInputFocus({
@@ -44,7 +43,8 @@ export var PositiveIntegerInput = function PositiveIntegerInput(_ref) {
     }),
     inputLabel = _useInputStyles.inputLabel,
     paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
-    modernPlaceholder = _useInputStyles.modernPlaceholder;
+    modernPlaceholder = _useInputStyles.modernPlaceholder,
+    fieldSize = _useInputStyles.fieldSize;
   var filters = useFilters({
     max: max
   });
@@ -77,7 +77,7 @@ export var PositiveIntegerInput = function PositiveIntegerInput(_ref) {
     inFocus: inFocus,
     label: inputLabel,
     useModernStyles: useModernStyles,
-    size: size
+    size: fieldSize
   }, /*#__PURE__*/React.createElement(S.ControlWrapper, null, modernPlaceholder, /*#__PURE__*/React.createElement(PureInput, _extends({
     name: name,
     hasError: hasError,

package/dist/esm/components/form/SearchInput/index.js

@@ -19,8 +19,7 @@ export var SearchInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
     autoFocus = _ref.autoFocus,
     isOnlyNumbers = _ref.isOnlyNumbers,
     maxLength = _ref.maxLength,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'M' : _ref$size,
+    size = _ref.size,
     _ref$useModernStyles = _ref.useModernStyles,
     useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles;
   var _useInputFocus = useInputFocus({
@@ -42,7 +41,8 @@ export var SearchInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }),
     inputLabel = _useInputStyles.inputLabel,
     paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
-    modernPlaceholder = _useInputStyles.modernPlaceholder;
+    modernPlaceholder = _useInputStyles.modernPlaceholder,
+    fieldSize = _useInputStyles.fieldSize;
   var handleInputReset = useCallback(function () {
     onChange('');
   }, [onChange]);
@@ -51,7 +51,7 @@ export var SearchInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, [onChange]);
   return /*#__PURE__*/React.createElement(InputLabel, {
     useModernStyles: useModernStyles,
-    size: size,
+    size: fieldSize,
     label: useModernStyles ? inputLabel : undefined
   }, modernPlaceholder, /*#__PURE__*/React.createElement(PureInput, _extends({
     ref: ref,

package/dist/esm/components/form/Select/components/Input/index.js

@@ -19,8 +19,7 @@ export var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
     label = _ref.label,
     isOpen = _ref.isOpen,
     onReset = _ref.onReset,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'M' : _ref$size,
+    size = _ref.size,
     onClick = _ref.onClick,
     required = _ref.required,
     _ref$useModernStyles = _ref.useModernStyles,
@@ -37,14 +36,15 @@ export var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }),
     inputLabel = _useInputStyles.inputLabel,
     paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
-    modernPlaceholder = _useInputStyles.modernPlaceholder;
+    modernPlaceholder = _useInputStyles.modernPlaceholder,
+    fieldSize = _useInputStyles.fieldSize;
   var isShowResetIcon = !!value && !!onReset;
   return /*#__PURE__*/React.createElement(InputLabel, {
     inFocus: inFocus,
     label: inputLabel,
     required: required,
     useModernStyles: useModernStyles,
-    size: size
+    size: fieldSize
   }, /*#__PURE__*/React.createElement(S.ControlWrapper, null, modernPlaceholder, /*#__PURE__*/React.createElement(PureInput, _extends({
     ref: ref,
     hasError: hasError,

package/dist/esm/components/form/Select/index.js

@@ -59,6 +59,7 @@ export var Select = function Select(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
+  var fieldSize = useModernStyles && !size ? 'L' : size || 'M';
 
   /*  
       существует интеграционная проблема селекта с final-form 
@@ -215,7 +216,7 @@ export var Select = function Select(_ref) {
     name: name,
     isOpen: isOpen,
     onReset: isResetButtonEnabled ? handleReset : undefined,
-    size: size,
+    size: fieldSize,
     onClick: isDrawerOptions || !!renderedValue ? handleInputClick : undefined,
     required: required,
     useModernStyles: useModernStyles

package/dist/esm/components/form/TextInput/index.js

@@ -23,8 +23,7 @@ export var TextInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     paddingRight = _ref.paddingRight,
     type = _ref.type,
     children = _ref.children,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'M' : _ref$size,
+    size = _ref.size,
     isOnlyNumbers = _ref.isOnlyNumbers,
     autoFocus = _ref.autoFocus,
     _ref$element = _ref.element,
@@ -61,7 +60,8 @@ export var TextInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }),
     inputLabel = _useInputStyles.inputLabel,
     paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
-    modernPlaceholder = _useInputStyles.modernPlaceholder;
+    modernPlaceholder = _useInputStyles.modernPlaceholder,
+    fieldSize = _useInputStyles.fieldSize;
   var handleChange = useCallback(function (event) {
     onChange(event.target.value.slice(0, maxLength !== null && maxLength !== void 0 ? maxLength : Infinity));
   }, [onChange, maxLength]);
@@ -70,7 +70,7 @@ export var TextInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     label: inputLabel,
     disabled: disabled,
     required: required,
-    size: size,
+    size: fieldSize,
     useModernStyles: useModernStyles
   }, /*#__PURE__*/React.createElement(S.InputLabelContent, null, modernPlaceholder, /*#__PURE__*/React.createElement(PureInput, _extends({
     id: id,

package/dist/esm/components/form/_hooks/useInputStyles.js

@@ -19,6 +19,7 @@ export var useInputStyles = function useInputStyles(_ref) {
     conditionHideModernPlaceholder = _ref$conditionHideMod === void 0 ? false : _ref$conditionHideMod,
     paddingRight = _ref.paddingRight;
   var isHideModernPlaceholder = isHaveValue || inFocus || conditionHideModernPlaceholder;
+  var fieldSize = useModernStyles && !size ? 'L' : size || 'M';
   var inputLabel = useMemo(function () {
     if (useModernStyles) {
       return isHideModernPlaceholder ? label : undefined;
@@ -29,25 +30,25 @@ export var useInputStyles = function useInputStyles(_ref) {
   var paddingAndVariantOptions = useMemo(function () {
     if (useModernStyles) {
       if (isHideModernPlaceholder) {
-        return MODERN_STYLE_SIZE_PARAMS_MAP[size];
+        return MODERN_STYLE_SIZE_PARAMS_MAP[fieldSize];
       } else {
-        return _objectSpread(_objectSpread({}, MODERN_STYLE_SIZE_PARAMS_MAP[size]), {}, {
-          paddingTop: MODERN_STYLE_SIZE_PARAMS_MAP[size].$placeholderPaddingTop,
-          paddingBottom: MODERN_STYLE_SIZE_PARAMS_MAP[size].$placeholderPaddingTop
+        return _objectSpread(_objectSpread({}, MODERN_STYLE_SIZE_PARAMS_MAP[fieldSize]), {}, {
+          paddingTop: MODERN_STYLE_SIZE_PARAMS_MAP[fieldSize].$placeholderPaddingTop,
+          paddingBottom: MODERN_STYLE_SIZE_PARAMS_MAP[fieldSize].$placeholderPaddingTop
         });
       }
     } else {
-      return SIZE_PARAMS_MAP[size];
+      return SIZE_PARAMS_MAP[fieldSize];
     }
-  }, [useModernStyles, isHideModernPlaceholder, size]);
+  }, [useModernStyles, isHideModernPlaceholder, fieldSize]);
   var modernInputPlaceholder = useMemo(function () {
     return placeholder || label;
   }, [label, placeholder]);
   var modernPlaceholder = useModernStyles && modernInputPlaceholder && /*#__PURE__*/React.createElement(ModernPlaceholder, {
     visible: !isHideModernPlaceholder,
-    paddingTop: MODERN_STYLE_SIZE_PARAMS_MAP[size].$placeholderPaddingTop,
+    paddingTop: MODERN_STYLE_SIZE_PARAMS_MAP[fieldSize].$placeholderPaddingTop,
     paddingRight: paddingRight,
-    size: size,
+    size: fieldSize,
     required: required
   }, modernInputPlaceholder);
   return {
@@ -55,6 +56,7 @@ export var useInputStyles = function useInputStyles(_ref) {
     paddingAndVariantOptions: paddingAndVariantOptions,
     modernInputPlaceholder: modernInputPlaceholder,
     isHideModernPlaceholder: isHideModernPlaceholder,
-    modernPlaceholder: modernPlaceholder
+    modernPlaceholder: modernPlaceholder,
+    fieldSize: fieldSize
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@invoicebox/ui",
-    "version": "0.1.0-alpha.311",
+    "version": "0.1.0-alpha.313",
     "description": "Invoicebox UI",
     "license": "Apache License 2.0",
     "scripts": {