@salutejs/plasma-new-hope 0.147.0-canary.1439.10901624274.0 → 0.147.0-canary.1440.10900331749.0

package/styled-components/cjs/components/DatePicker/RangeDate/RangeDate.js

@@ -122,7 +122,11 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
       _useState8 = _slicedToArray(_useState7, 2),
       calendarFirstValue = _useState8[0],
       setCalendarFirstValue = _useState8[1];
-    var _useState9 = (0, _react.useState)((0, _dateHelper.formatInputValue)(defaultFirstDate, format, lang)),
+    var _useState9 = (0, _react.useState)((0, _dateHelper.formatInputValue)({
+        value: defaultFirstDate,
+        format: format,
+        lang: lang
+      })),
       _useState10 = _slicedToArray(_useState9, 2),
       inputFirstValue = _useState10[0],
       setInputFirstValue = _useState10[1];
@@ -130,7 +134,11 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
       _useState12 = _slicedToArray(_useState11, 2),
       calendarSecondValue = _useState12[0],
       setCalendarSecondValue = _useState12[1];
-    var _useState13 = (0, _react.useState)((0, _dateHelper.formatInputValue)(defaultSecondDate, format, lang)),
+    var _useState13 = (0, _react.useState)((0, _dateHelper.formatInputValue)({
+        value: defaultSecondDate,
+        format: format,
+        lang: lang
+      })),
       _useState14 = _slicedToArray(_useState13, 2),
       inputSecondValue = _useState14[0],
       setInputSecondValue = _useState14[1];
@@ -249,17 +257,33 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
     }, [opened]);
     (0, _react.useEffect)(function () {
       setCalendarFirstValue((0, _dateHelper.formatCalendarValue)(defaultFirstDate, format, lang));
-      setInputFirstValue((0, _dateHelper.formatInputValue)(defaultFirstDate, format, lang));
+      setInputFirstValue((0, _dateHelper.formatInputValue)({
+        value: defaultFirstDate,
+        format: format,
+        lang: lang
+      }));
     }, [defaultFirstDate]);
     (0, _react.useEffect)(function () {
       setCalendarSecondValue((0, _dateHelper.formatCalendarValue)(defaultSecondDate, format, lang));
-      setInputSecondValue((0, _dateHelper.formatInputValue)(defaultSecondDate, format, lang));
+      setInputSecondValue((0, _dateHelper.formatInputValue)({
+        value: defaultSecondDate,
+        format: format,
+        lang: lang
+      }));
     }, [defaultSecondDate]);
     (0, _react.useEffect)(function () {
       setCalendarFirstValue((0, _dateHelper.formatCalendarValue)(defaultFirstDate, format, lang));
-      setInputFirstValue((0, _dateHelper.formatInputValue)(defaultFirstDate, format, lang));
+      setInputFirstValue((0, _dateHelper.formatInputValue)({
+        value: defaultFirstDate,
+        format: format,
+        lang: lang
+      }));
       setCalendarSecondValue((0, _dateHelper.formatCalendarValue)(defaultSecondDate, format, lang));
-      setInputSecondValue((0, _dateHelper.formatInputValue)(defaultSecondDate, format, lang));
+      setInputSecondValue((0, _dateHelper.formatInputValue)({
+        value: defaultSecondDate,
+        format: format,
+        lang: lang
+      }));
     }, [format, lang]);
     return /*#__PURE__*/_react["default"].createElement(Root, _extends({
       ref: rootRef,

package/styled-components/cjs/components/DatePicker/SingleDate/SingleDate.js

@@ -92,7 +92,11 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
       _useState4 = _slicedToArray(_useState3, 2),
       calendarValue = _useState4[0],
       setCalendarValue = _useState4[1];
-    var _useState5 = (0, _react.useState)((0, _dateHelper.formatInputValue)(defaultDate, format, lang)),
+    var _useState5 = (0, _react.useState)((0, _dateHelper.formatInputValue)({
+        value: defaultDate,
+        format: format,
+        lang: lang
+      })),
       _useState6 = _slicedToArray(_useState5, 2),
       inputValue = _useState6[0],
       setInputValue = _useState6[1];
@@ -158,11 +162,19 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
     }, [opened]);
     (0, _react.useEffect)(function () {
       setCalendarValue((0, _dateHelper.formatCalendarValue)(defaultDate, format, lang));
-      setInputValue((0, _dateHelper.formatInputValue)(defaultDate, format, lang));
+      setInputValue((0, _dateHelper.formatInputValue)({
+        value: defaultDate,
+        format: format,
+        lang: lang
+      }));
     }, [defaultDate]);
     (0, _react.useEffect)(function () {
       setCalendarValue((0, _dateHelper.formatCalendarValue)(defaultDate, format, lang));
-      setInputValue((0, _dateHelper.formatInputValue)(defaultDate, format, lang));
+      setInputValue((0, _dateHelper.formatInputValue)({
+        value: defaultDate,
+        format: format,
+        lang: lang
+      }));
     }, [format, lang]);
     return /*#__PURE__*/_react["default"].createElement(Root, _extends({
       view: view,

package/styled-components/cjs/components/DatePicker/hooks/useDatePicker.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useDatePicker = void 0;
 var _DatePicker = /*#__PURE__*/require("../DatePicker.tokens");
 var _dateHelper = /*#__PURE__*/require("../utils/dateHelper");
+var _datejs = /*#__PURE__*/require("../../../utils/datejs");
 var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
   var currentValue = _ref.currentValue,
     setInputValue = _ref.setInputValue,
@@ -44,10 +45,43 @@ var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
     var newValue = maskWithFormat ? (0, _dateHelper.getMaskedDateOnInput)(value, format, dateFormatDelimiter(), currentValue) : value;
     if (!format) {
       setCalendarValue((0, _dateHelper.formatCalendarValue)(newValue));
-    } else if ((newValue === null || newValue === void 0 ? void 0 : newValue.length) === format.length) {
+      setInputValue((0, _dateHelper.formatInputValue)({
+        value: newValue,
+        format: format,
+        lang: lang
+      }));
+      onChangeValue === null || onChangeValue === void 0 || onChangeValue(event, newValue);
+      return;
+    }
+
+    /**
+     * NOTE: если в формате даты есть месяц в полном названии или сокращенном,
+     * нужно дополнительно проводить валидацию на полноту введенной даты.
+     * Иначе dayjs циклически будет пытаться отформатировать некорректную дату.
+     */
+    var hasMonthFullName = /M{3,4}/g.test(format);
+    var isValidMonth;
+    var isLengthEqual;
+    if (hasMonthFullName) {
+      _datejs.customDayjs.locale(lang);
+      var firstIndexOfMonth = format.indexOf('M');
+      var lastIndexOfMonth = newValue.indexOf(dateFormatDelimiter(), firstIndexOfMonth);
+      var fullMonthName = !lastIndexOfMonth ? newValue.slice(firstIndexOfMonth) : newValue.slice(firstIndexOfMonth, lastIndexOfMonth);
+      var monthFormatting = format.replace(/[^M]/g, '');
+      isValidMonth = (0, _datejs.customDayjs)("01 ".concat(fullMonthName, " 1970"), "DD ".concat(monthFormatting, " YYYY"), true).isValid();
+      isLengthEqual = format.length - 4 === newValue.length - fullMonthName.length;
+    }
+    if (!hasMonthFullName && (newValue === null || newValue === void 0 ? void 0 : newValue.length) === (format === null || format === void 0 ? void 0 : format.length) || isValidMonth && isLengthEqual) {
       setCalendarValue((0, _dateHelper.formatCalendarValue)(newValue, format, lang));
     }
-    setInputValue((0, _dateHelper.formatInputValue)(newValue, format, lang));
+    setInputValue((0, _dateHelper.formatInputValue)({
+      value: newValue,
+      format: format,
+      lang: lang,
+      hasMonthFullName: hasMonthFullName,
+      isValidMonth: isValidMonth,
+      isLengthEqual: isLengthEqual
+    }));
     onChangeValue === null || onChangeValue === void 0 || onChangeValue(event, newValue);
   };
   var handleCommitDate = function handleCommitDate(date, applyFormat, isCalendarValue, dateInfo) {
@@ -61,8 +95,13 @@ var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
     }
     if (isCalendarValue) {
       setCalendarValue((0, _dateHelper.formatCalendarValue)(date, format, lang));
-      setInputValue((0, _dateHelper.formatInputValue)(date, format, lang));
-      return onCommitDate === null || onCommitDate === void 0 ? void 0 : onCommitDate(date, false, true, dateInfo);
+      setInputValue((0, _dateHelper.formatInputValue)({
+        value: date,
+        format: format,
+        lang: lang
+      }));
+      onCommitDate === null || onCommitDate === void 0 || onCommitDate(date, false, true, dateInfo);
+      return;
     }
     var formatString = applyFormat ? format : undefined;
     var _getDateFromFormat = (0, _dateHelper.getDateFromFormat)(date, formatString, lang),
@@ -70,7 +109,11 @@ var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
       isError = _getDateFromFormat.isError,
       isSuccess = _getDateFromFormat.isSuccess;
     setCalendarValue((0, _dateHelper.formatCalendarValue)(newDate, format, lang));
-    setInputValue((0, _dateHelper.formatInputValue)(newDate, format, lang));
+    setInputValue((0, _dateHelper.formatInputValue)({
+      value: newDate,
+      format: format,
+      lang: lang
+    }));
     onCommitDate === null || onCommitDate === void 0 || onCommitDate(newDate, isError, isSuccess);
   };
   return {

package/styled-components/cjs/components/DatePicker/utils/dateHelper.js

@@ -5,10 +5,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getMaskedDateOnInput = exports.getDateFromFormat = exports.getDateFormatDelimiter = exports.formatInputValue = exports.formatCalendarValue = void 0;
 var _datejs = /*#__PURE__*/require("../../../utils/datejs");
-var formatInputValue = exports.formatInputValue = function formatInputValue(value, format, lang) {
+var formatInputValue = exports.formatInputValue = function formatInputValue(_ref) {
+  var value = _ref.value,
+    format = _ref.format,
+    lang = _ref.lang,
+    hasMonthFullName = _ref.hasMonthFullName,
+    isValidMonth = _ref.isValidMonth,
+    isLengthEqual = _ref.isLengthEqual;
   if (!value || !lang) {
     return '';
   }
+  if (hasMonthFullName && (!isValidMonth || !isLengthEqual)) {
+    return String(value);
+  }
   if (format && (0, _datejs.customDayjs)(value, format, true).isValid()) {
     return (0, _datejs.customDayjs)(value, format).locale(lang).format(format);
   }

package/styled-components/cjs/components/Select/Select.styles.js

@@ -21,7 +21,7 @@ var StyledPopover = exports.StyledPopover = /*#__PURE__*/(0, _styledComponents["
 }, /*#__PURE__*/String(_Popover.popoverClasses.target));
 var Ul = exports.Ul = /*#__PURE__*/_styledComponents["default"].ul.withConfig({
   componentId: "plasma-new-hope__sc-le54jv-1"
-})(["box-sizing:border-box;background:var(", ");box-shadow:", ";border-radius:var(", ");width:", ";height:", ";overflow:", ";border:var(", ") solid var(", ");margin:", ";padding:var(", ");"], _Select.constants.background, _Select.constants.boxShadow, _Select.tokens.borderRadius, function (_ref2) {
+})(["box-sizing:border-box;background:var(", ");box-shadow:", ";border-radius:var(", ");width:", ";height:", ";overflow:", ";margin:", ";padding:var(", ");"], _Select.constants.background, _Select.constants.boxShadow, _Select.tokens.borderRadius, function (_ref2) {
   var listWidth = _ref2.listWidth;
   return listWidth || '100%';
 }, function (_ref3) {
@@ -30,7 +30,7 @@ var Ul = exports.Ul = /*#__PURE__*/_styledComponents["default"].ul.withConfig({
 }, function (_ref4) {
   var listOverflow = _ref4.listOverflow;
   return listOverflow || 'initial';
-}, _Select.tokens.popoverBorderWidth, _Select.tokens.popoverBorderColor, function (_ref5) {
+}, function (_ref5) {
   var isInnerUl = _ref5.isInnerUl;
   return isInnerUl ? "calc(var(".concat(_Select.tokens.padding, ") * -1) 0 0 var(").concat(_Select.tokens.padding, ")") : 0;
 }, _Select.tokens.padding);

package/styled-components/cjs/components/Select/Select.tokens.js

@@ -58,9 +58,6 @@ var tokens = exports.tokens = {
   targetTextfieldBackgroundColor: '--plasma-select-target-textfield-background-color',
   targetTextfieldBackgroundColorOpened: '--plasma-select-target-textfield-background-color-opened',
   targetTextfieldBorderColor: '--plasma-select-target-textfield-border-color',
-  targetTextfieldBorderColorHover: '--plasma-select-target-textfield-border-color-hover',
-  targetTextfieldBorderOpenedColor: '--plasma-select-target-textfield-border-opened-color',
-  targetTextfieldBorderSize: '--plasma-select-target-textfield-border-size',
   targetButtonPadding: '--plasma-select-target-button-padding',
   targetTextfieldPadding: '--plasma-select-target-textfield-padding',
   targetTextfieldChipPadding: '--plasma-select-target-textfield-chip-padding',
@@ -77,8 +74,6 @@ var tokens = exports.tokens = {
   chipCloseIconSize: '--plasma-select-chip-close-icon-size',
   chipClearContentMarginLeft: '--plasma-select-chip-clear-content-margin-left',
   chipClearContentMarginRight: '--plasma-select-chip-clear-content-margin-right',
-  popoverBorderColor: '--plasma-select-popover-border-color',
-  popoverBorderWidth: '--plasma-select-popover-border-width',
   labelOffset: '--plasma-select-label-offset',
   innerLabelGap: '--plasma-select-inner-label-gap',
   helperTextColor: '--plasma-select-helper-text-color',
@@ -99,6 +94,7 @@ var constants = exports.constants = {
   textfieldOuterLabelColor: '--text-primary',
   textfieldInnerLabelColor: '--text-secondary',
   textfieldPlaceholderColor: '--text-secondary',
+  textfieldBorderSize: '0.0625rem',
   opacity: '0.4',
   fontFamily: '--plasma-typo-body-xs-font-family',
   fontSize: '--plasma-typo-body-xs-font-size',

package/styled-components/cjs/components/Select/ui/Target/ui/Textfield/Textfield.styles.js

@@ -16,28 +16,22 @@ var mergedButtonConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Button.buttonCo
 var Button = /*#__PURE__*/(0, _engines.component)(mergedButtonConfig);
 var TextfieldWrapper = exports.TextfieldWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-1akl2tk-0"
-})(["display:inline;.", "{transition:100ms;background:", ";padding:", ";border:", ";}.", ":hover{transition:100ms;border:", ";}.", "::before{box-shadow:none !important;}"], _Select.classes.textfieldTarget, function (_ref) {
+})(["display:inline;.", "{background:", ";padding:", ";}.", "::before{box-shadow:none !important;}"], _Select.classes.textfieldTarget, function (_ref) {
   var opened = _ref.opened;
   return opened ? "var(".concat(_Select.tokens.targetTextfieldBackgroundColorOpened, ")") : "var(".concat(_Select.tokens.targetTextfieldBackgroundColor, ")");
 }, function (_ref2) {
   var value = _ref2.value;
   return Array.isArray(value) && !(0, _utils.isEmpty)(value) ? "0 var(".concat(_Select.tokens.targetTextfieldChipPadding, ")") : "0 var(".concat(_Select.tokens.targetTextfieldPadding, ")");
-}, function (_ref3) {
-  var opened = _ref3.opened;
-  return opened ? "var(".concat(_Select.tokens.targetTextfieldBorderSize, ") solid var(").concat(_Select.tokens.targetTextfieldBorderOpenedColor, ")") : "var(".concat(_Select.tokens.targetTextfieldBorderSize, ") solid var(").concat(_Select.tokens.targetTextfieldBorderColor, ")");
-}, _Select.classes.textfieldTarget, function (_ref4) {
-  var opened = _ref4.opened;
-  return opened ? "var(".concat(_Select.tokens.targetTextfieldBorderSize, ") solid var(").concat(_Select.tokens.targetTextfieldBorderOpenedColor, ")") : "var(".concat(_Select.tokens.targetTextfieldBorderSize, ") solid var(").concat(_Select.tokens.targetTextfieldBorderColorHover, ")");
 }, _Select.classes.selectWithoutBoxShadow);
 var StyledButton = exports.StyledButton = /*#__PURE__*/(0, _styledComponents["default"])(Button).withConfig({
   componentId: "plasma-new-hope__sc-1akl2tk-1"
-})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":", ";", ":100%;", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":", ";", ":var(", ");box-shadow:inset 0 0 0 ", " var(", ");text-align:left;", ""], _Button.buttonTokens.buttonColor, _Select.constants.textfieldTargetColor, _Button.buttonTokens.buttonColorHover, _Select.constants.textfieldTargetColor, _Button.buttonTokens.buttonColorActive, _Select.constants.textfieldTargetColor, _Button.buttonTokens.buttonHeight, function (_ref5) {
-  var renderTarget = _ref5.renderTarget;
+})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":", ";", ":100%;", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":", ";", ":var(", ");box-shadow:inset 0 0 0 ", " var(", ");text-align:left;", ""], _Button.buttonTokens.buttonColor, _Select.constants.textfieldTargetColor, _Button.buttonTokens.buttonColorHover, _Select.constants.textfieldTargetColor, _Button.buttonTokens.buttonColorActive, _Select.constants.textfieldTargetColor, _Button.buttonTokens.buttonHeight, function (_ref3) {
+  var renderTarget = _ref3.renderTarget;
   return renderTarget ? 'auto' : "var(".concat(_Select.tokens.targetHeight, ")");
-}, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Select.tokens.targetTextfieldPadding, _Button.buttonTokens.buttonRadius, _Select.tokens.borderRadius, _Button.buttonTokens.buttonFontFamily, _Select.tokens.fontFamily, _Button.buttonTokens.buttonFontSize, _Select.tokens.fontSize, _Button.buttonTokens.buttonFontStyle, _Select.tokens.fontStyle, _Button.buttonTokens.buttonFontWeight, _Select.tokens.fontWeight, _Button.buttonTokens.buttonLetterSpacing, _Select.tokens.fontLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Select.tokens.fontLineHeight, _Button.buttonTokens.buttonDisabledOpacity, _Select.constants.opacity, _Button.buttonTokens.buttonFocusColor, _Select.constants.focusColor, _Select.tokens.targetTextfieldBorderSize, _Select.tokens.targetTextfieldBorderColor, /*#__PURE__*/(0, _mixins.addFocus)({
-  outlineOffset: _Select.tokens.targetTextfieldBorderSize,
+}, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Select.tokens.targetTextfieldPadding, _Button.buttonTokens.buttonRadius, _Select.tokens.borderRadius, _Button.buttonTokens.buttonFontFamily, _Select.tokens.fontFamily, _Button.buttonTokens.buttonFontSize, _Select.tokens.fontSize, _Button.buttonTokens.buttonFontStyle, _Select.tokens.fontStyle, _Button.buttonTokens.buttonFontWeight, _Select.tokens.fontWeight, _Button.buttonTokens.buttonLetterSpacing, _Select.tokens.fontLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Select.tokens.fontLineHeight, _Button.buttonTokens.buttonDisabledOpacity, _Select.constants.opacity, _Button.buttonTokens.buttonFocusColor, _Select.constants.focusColor, _Select.constants.textfieldBorderSize, _Select.tokens.targetTextfieldBorderColor, /*#__PURE__*/(0, _mixins.addFocus)({
+  outlineOffset: _Select.constants.textfieldBorderSize,
   outlineSize: _Select.constants.focusSize,
-  outlineRadius: /*#__PURE__*/"calc(var(".concat(_Select.tokens.borderRadius, ") - ").concat(_Select.tokens.targetTextfieldBorderSize, ")"),
+  outlineRadius: /*#__PURE__*/"calc(var(".concat(_Select.tokens.borderRadius, ") - ").concat(_Select.constants.textfieldBorderSize, ")"),
   outlineColor: /*#__PURE__*/"var(".concat(_Select.constants.focusColor, ")")
 }));
 var StyledArrow = exports.StyledArrow = /*#__PURE__*/(0, _styledComponents["default"])(_Icon.IconDisclosureDownCentered).withConfig({
@@ -51,9 +45,9 @@ var Wrapper = exports.Wrapper = /*#__PURE__*/_styledComponents["default"].div.wi
 })(["width:100%;height:100%;display:flex;align-items:center;justify-content:space-between;.", "{transform:rotate(-180deg);}"], _Select.classes.arrowInverse);
 var ChipWrapper = exports.ChipWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-1akl2tk-5"
-})(["width:100%;display:flex;min-width:0;padding:", ";gap:0.25rem;overflow-x:scroll;border-top-right-radius:var(", ");border-bottom-right-radius:var(", ");-ms-overflow-style:none;scrollbar-width:none;&::-webkit-scrollbar{display:none;}"], function (_ref6) {
-  var multiselect = _ref6.multiselect,
-    value = _ref6.value;
+})(["width:100%;display:flex;min-width:0;padding:", ";gap:0.25rem;overflow-x:scroll;border-top-right-radius:var(", ");border-bottom-right-radius:var(", ");-ms-overflow-style:none;scrollbar-width:none;&::-webkit-scrollbar{display:none;}"], function (_ref4) {
+  var multiselect = _ref4.multiselect,
+    value = _ref4.value;
   return "calc(".concat(_Select.constants.focusSize, " + ").concat(multiselect && value && value.length > 0 ? "var(".concat(_Select.tokens.focusOffset, ")") : 0, ")");
 }, _Select.tokens.chipBorderRadius, _Select.tokens.chipBorderRadius);
 var Label = exports.Label = /*#__PURE__*/_styledComponents["default"].label.withConfig({

package/styled-components/cjs/components/TextArea/variations/_view/base.js

@@ -10,4 +10,4 @@ var styledContainer = _TextArea.classes.styledContainer,
   styledTextAreaWrapper = _TextArea.classes.styledTextAreaWrapper,
   styledHelpers = _TextArea.classes.styledHelpers;
 var exclusionSelectors = 'not([disabled]):not([readonly]):not(:focus-within)';
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([".", "{transition:box-shadow 0.1s ease-in-out;border-radius:var(", ");border:var(", ") solid var(", ");}.", "{transition:background-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out;box-shadow:inset 0 0 0 var(", ",1px) var(", ");}&:focus-within:not([readonly]) .", "{background-color:var(", ");box-shadow:inset 0 0 0 var(", ",1px) var(", ");}&:focus-within:not([readonly]) .", "{border:var(", ") solid var(", ");}&:focus-within:not([readonly]) .", "{background-color:var(", ");}&:hover:", " .", "{border:var(", ") solid var(", ");}&:hover:", " .", "{box-shadow:inset 0 0 0 var(", ",1px) var(", ");background-color:var(", ");}&:hover:", " .", " + .", "{background-color:var(", ");}&:active:", " .", "{box-shadow:inset 0 0 0 var(", ",1px) var(", ");background-color:var(", ");}&:active:", " .", " + .", "{background-color:var(", ");}"], /*#__PURE__*/String(styledContainer), _TextArea.tokens.borderRadius, _TextArea.tokens.borderSize, _TextArea.tokens.borderColor, /*#__PURE__*/String(styledTextAreaWrapper), _TextArea.tokens.borderSize, _TextArea.tokens.inputBorderColor, /*#__PURE__*/String(styledTextAreaWrapper), _TextArea.tokens.inputBackgroundColorFocus, _TextArea.tokens.borderSize, _TextArea.tokens.inputBorderColorFocus, /*#__PURE__*/String(styledContainer), _TextArea.tokens.borderSize, _TextArea.tokens.borderColorFocus, /*#__PURE__*/String(styledHelpers), _TextArea.tokens.helpersBackgroundColorFocus, exclusionSelectors, /*#__PURE__*/String(styledContainer), _TextArea.tokens.borderSize, _TextArea.tokens.borderColorHover, exclusionSelectors, /*#__PURE__*/String(styledTextAreaWrapper), _TextArea.tokens.borderSize, _TextArea.tokens.inputBorderColorHover, _TextArea.tokens.inputBackgroundColorHover, exclusionSelectors, /*#__PURE__*/String(styledTextAreaWrapper), /*#__PURE__*/String(styledHelpers), _TextArea.tokens.helpersBackgroundColorHover, exclusionSelectors, /*#__PURE__*/String(styledTextAreaWrapper), _TextArea.tokens.borderSize, _TextArea.tokens.inputBorderColorActive, _TextArea.tokens.inputBackgroundColorActive, exclusionSelectors, /*#__PURE__*/String(styledTextAreaWrapper), /*#__PURE__*/String(styledHelpers), _TextArea.tokens.helpersBackgroundColorActive);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([".", "{transition:box-shadow 0.1s ease-in-out;border-radius:var(", ");box-shadow:inset 0 0 0 var(", ",1px) var(", ");}.", "{transition:background-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out;box-shadow:inset 0 0 0 var(", ",1px) var(", ");}&:focus-within:not([readonly]) .", "{background-color:var(", ");box-shadow:inset 0 0 0 var(", ",1px) var(", ");}&:focus-within:not([readonly]) .", "{box-shadow:inset 0 0 0 var(", ",1px) var(", ");}&:focus-within:not([readonly]) .", "{background-color:var(", ");}&:hover:", " .", "{box-shadow:inset 0 0 0 var(", ",1px) var(", ");}&:hover:", " .", "{box-shadow:inset 0 0 0 var(", ",1px) var(", ");background-color:var(", ");}&:hover:", " .", " + .", "{background-color:var(", ");}&:active:", " .", "{box-shadow:inset 0 0 0 var(", ",1px) var(", ");background-color:var(", ");}&:active:", " .", " + .", "{background-color:var(", ");}"], /*#__PURE__*/String(styledContainer), _TextArea.tokens.borderRadius, _TextArea.tokens.borderSize, _TextArea.tokens.borderColor, /*#__PURE__*/String(styledTextAreaWrapper), _TextArea.tokens.borderSize, _TextArea.tokens.inputBorderColor, /*#__PURE__*/String(styledTextAreaWrapper), _TextArea.tokens.inputBackgroundColorFocus, _TextArea.tokens.borderSize, _TextArea.tokens.inputBorderColorFocus, /*#__PURE__*/String(styledContainer), _TextArea.tokens.borderSize, _TextArea.tokens.borderColorFocus, /*#__PURE__*/String(styledHelpers), _TextArea.tokens.helpersBackgroundColorFocus, exclusionSelectors, /*#__PURE__*/String(styledContainer), _TextArea.tokens.borderSize, _TextArea.tokens.borderColorHover, exclusionSelectors, /*#__PURE__*/String(styledTextAreaWrapper), _TextArea.tokens.borderSize, _TextArea.tokens.inputBorderColorHover, _TextArea.tokens.inputBackgroundColorHover, exclusionSelectors, /*#__PURE__*/String(styledTextAreaWrapper), /*#__PURE__*/String(styledHelpers), _TextArea.tokens.helpersBackgroundColorHover, exclusionSelectors, /*#__PURE__*/String(styledTextAreaWrapper), _TextArea.tokens.borderSize, _TextArea.tokens.inputBorderColorActive, _TextArea.tokens.inputBackgroundColorActive, exclusionSelectors, /*#__PURE__*/String(styledTextAreaWrapper), /*#__PURE__*/String(styledHelpers), _TextArea.tokens.helpersBackgroundColorActive);

package/styled-components/es/components/Autocomplete/Autocomplete.styles.js

@@ -13,10 +13,10 @@ export var StyledPopover = /*#__PURE__*/styled(Popover).withConfig({
 });
 export var Ul = /*#__PURE__*/styled.ul.withConfig({
   componentId: "plasma-new-hope__sc-ff6pwi-1"
-})(["box-sizing:border-box;background:var(", ");box-shadow:var(", ");border-radius:var(", ");height:auto;max-height:", ";overflow-y:scroll;border:var(", ") solid var(", ");margin:0;padding:var(", ");"], tokens.background, tokens.boxShadow, tokens.borderRadius, function (_ref2) {
+})(["box-sizing:border-box;background:var(", ");box-shadow:var(", ");border-radius:var(", ");height:auto;max-height:", ";overflow-y:scroll;margin:0;padding:var(", ");"], tokens.background, tokens.boxShadow, tokens.borderRadius, function (_ref2) {
   var listMaxHeight = _ref2.listMaxHeight;
   return listMaxHeight || 'none';
-}, tokens.dropdownBorderWidth, tokens.dropdownBorderColor, tokens.padding);
+}, tokens.padding);
 export var LeftHelper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-ff6pwi-2"
 })(["color:", ";margin-top:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");opacity:var(", ");cursor:", ";"], function (_ref3) {

package/styled-components/es/components/Autocomplete/Autocomplete.tokens.js

@@ -65,8 +65,6 @@ export var tokens = {
   boxShadow: '--plasma-autocomplete-box-shadow',
   borderRadius: '--plasma-autocomplete-border-radius',
   padding: '--plasma-autocomplete-padding',
-  dropdownBorderColor: '--plasma-select-dropdown-border-color',
-  dropdownBorderWidth: '--plasma-select-dropdown-border-width',
   itemPadding: '--plasma-autocomplete-item-padding',
   itemBorderRadius: '--plasma-autocomplete-item-border-radius',
   itemFontFamily: '--plasma-autocomplete-item-font-family',

package/styled-components/es/components/Combobox/ComboboxNew/Combobox.styles.js

@@ -8,7 +8,7 @@ var mergedConfig = /*#__PURE__*/mergeConfig(emptyStateConfig);
 var EmptyState = /*#__PURE__*/component(mergedConfig);
 export var Ul = /*#__PURE__*/styled.ul.withConfig({
   componentId: "plasma-new-hope__sc-2kddkg-0"
-})(["box-sizing:border-box;background:var(", ");box-shadow:", ";border-radius:var(", ");width:", ";height:", ";overflow:", ";border:var(", ") solid var(", ");margin:", ";padding:var(", ") 0;.", "{box-shadow:none;}"], constants.background, constants.boxShadow, tokens.borderRadius, function (_ref) {
+})(["box-sizing:border-box;background:var(", ");box-shadow:", ";border-radius:var(", ");width:", ";height:", ";overflow:", ";margin:", ";padding:var(", ") 0;.", "{box-shadow:none;}"], constants.background, constants.boxShadow, tokens.borderRadius, function (_ref) {
   var listWidth = _ref.listWidth;
   return listWidth || '100%';
 }, function (_ref2) {
@@ -17,7 +17,7 @@ export var Ul = /*#__PURE__*/styled.ul.withConfig({
 }, function (_ref3) {
   var listOverflow = _ref3.listOverflow;
   return listOverflow || 'initial';
-}, tokens.dropdownBorderWidth, tokens.dropdownBorderColor, function (_ref4) {
+}, function (_ref4) {
   var isInnerUl = _ref4.isInnerUl;
   return isInnerUl ? "calc(var(".concat(tokens.padding, ") * -1) 0 0 0") : 0;
 }, tokens.padding, classes.emptyStateWrapper);

package/styled-components/es/components/Combobox/ComboboxNew/Combobox.tokens.js

@@ -21,8 +21,6 @@ export var tokens = {
   fontWeight: '--plasma-combobox-font-weight',
   fontLetterSpacing: '--plasma-combobox-font-letter-spacing',
   fontLineHeight: '--plasma-combobox-font-line-height',
-  dropdownBorderColor: '--plasma-select-dropdown-border-color',
-  dropdownBorderWidth: '--plasma-select-dropdown-border-width',
   itemHeight: '--plasma-combobox-item-height',
   itemBorderRadius: '--plasma-combobox-item-border-radius',
   itemPadding: '--plasma-combobox-item-padding',

package/styled-components/es/components/DatePicker/DatePicker.template-doc.mdx

@@ -37,15 +37,18 @@ export function App() {
 
 ### Формат даты
 Формат даты задается с помощью свойства `format`.
-| Обозначение | Отображение | Описание            |
-|-------------|-------------|---------------------|
-| DD          | 01-31       | Дни месяца, 2 цифры |
-| D           | 1-31        | Дни месяца          |
-| MM          | 01-12       | Месяц года, 2 цифры |
-| M           | 1-12        | Месяц года          |
-| YYYY        | 2024        | Год из 4 цифр       |
-| YY          | 24          | Год из 2 цифр       |
-| Q           | 1-4         | Квартал             |
+| Обозначение | Отображение                           | Описание                         |
+|-------------|---------------------------------------|----------------------------------|
+| DD          | 01-31                                 | Дни месяца, 2 цифры              |
+| D           | 1-31                                  | Дни месяца                       |
+| MMMM        | January...December / январь...декабрь | Месяц года, полное название      |
+| MMM         | Jan...Dec / янв...дек                 | Месяц года, сокращенное название |
+| MM          | 01-12                                 | Месяц года, 2 цифры              |
+| M           | 1-12                                  | Месяц года                       |
+| YYYY        | 2024                                  | Год из 4 цифр                    |
+| YY          | 24                                    | Год из 2 цифр                    |
+| Q           | 1-4                                   | Квартал                          |
+
 При выборе даты в календаре или вводе даты через поле ввода, дата будет приводиться к заданному формату.
 Свойство `maskWithFormat` позволяет маскировать ввод:
 

package/styled-components/es/components/DatePicker/RangeDate/RangeDate.js

@@ -113,7 +113,11 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       _useState8 = _slicedToArray(_useState7, 2),
       calendarFirstValue = _useState8[0],
       setCalendarFirstValue = _useState8[1];
-    var _useState9 = useState(formatInputValue(defaultFirstDate, format, lang)),
+    var _useState9 = useState(formatInputValue({
+        value: defaultFirstDate,
+        format: format,
+        lang: lang
+      })),
       _useState10 = _slicedToArray(_useState9, 2),
       inputFirstValue = _useState10[0],
       setInputFirstValue = _useState10[1];
@@ -121,7 +125,11 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       _useState12 = _slicedToArray(_useState11, 2),
       calendarSecondValue = _useState12[0],
       setCalendarSecondValue = _useState12[1];
-    var _useState13 = useState(formatInputValue(defaultSecondDate, format, lang)),
+    var _useState13 = useState(formatInputValue({
+        value: defaultSecondDate,
+        format: format,
+        lang: lang
+      })),
       _useState14 = _slicedToArray(_useState13, 2),
       inputSecondValue = _useState14[0],
       setInputSecondValue = _useState14[1];
@@ -240,17 +248,33 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
     }, [opened]);
     useEffect(function () {
       setCalendarFirstValue(formatCalendarValue(defaultFirstDate, format, lang));
-      setInputFirstValue(formatInputValue(defaultFirstDate, format, lang));
+      setInputFirstValue(formatInputValue({
+        value: defaultFirstDate,
+        format: format,
+        lang: lang
+      }));
     }, [defaultFirstDate]);
     useEffect(function () {
       setCalendarSecondValue(formatCalendarValue(defaultSecondDate, format, lang));
-      setInputSecondValue(formatInputValue(defaultSecondDate, format, lang));
+      setInputSecondValue(formatInputValue({
+        value: defaultSecondDate,
+        format: format,
+        lang: lang
+      }));
     }, [defaultSecondDate]);
     useEffect(function () {
       setCalendarFirstValue(formatCalendarValue(defaultFirstDate, format, lang));
-      setInputFirstValue(formatInputValue(defaultFirstDate, format, lang));
+      setInputFirstValue(formatInputValue({
+        value: defaultFirstDate,
+        format: format,
+        lang: lang
+      }));
       setCalendarSecondValue(formatCalendarValue(defaultSecondDate, format, lang));
-      setInputSecondValue(formatInputValue(defaultSecondDate, format, lang));
+      setInputSecondValue(formatInputValue({
+        value: defaultSecondDate,
+        format: format,
+        lang: lang
+      }));
     }, [format, lang]);
     return /*#__PURE__*/React.createElement(Root, _extends({
       ref: rootRef,

package/styled-components/es/components/DatePicker/SingleDate/SingleDate.js

@@ -83,7 +83,11 @@ export var datePickerRoot = function datePickerRoot(Root) {
       _useState4 = _slicedToArray(_useState3, 2),
       calendarValue = _useState4[0],
       setCalendarValue = _useState4[1];
-    var _useState5 = useState(formatInputValue(defaultDate, format, lang)),
+    var _useState5 = useState(formatInputValue({
+        value: defaultDate,
+        format: format,
+        lang: lang
+      })),
       _useState6 = _slicedToArray(_useState5, 2),
       inputValue = _useState6[0],
       setInputValue = _useState6[1];
@@ -149,11 +153,19 @@ export var datePickerRoot = function datePickerRoot(Root) {
     }, [opened]);
     useEffect(function () {
       setCalendarValue(formatCalendarValue(defaultDate, format, lang));
-      setInputValue(formatInputValue(defaultDate, format, lang));
+      setInputValue(formatInputValue({
+        value: defaultDate,
+        format: format,
+        lang: lang
+      }));
     }, [defaultDate]);
     useEffect(function () {
       setCalendarValue(formatCalendarValue(defaultDate, format, lang));
-      setInputValue(formatInputValue(defaultDate, format, lang));
+      setInputValue(formatInputValue({
+        value: defaultDate,
+        format: format,
+        lang: lang
+      }));
     }, [format, lang]);
     return /*#__PURE__*/React.createElement(Root, _extends({
       view: view,

package/styled-components/es/components/DatePicker/hooks/useDatePicker.js

@@ -1,5 +1,6 @@
 import { classes } from '../DatePicker.tokens';
 import { formatCalendarValue, formatInputValue, getDateFromFormat, getMaskedDateOnInput } from '../utils/dateHelper';
+import { customDayjs } from '../../../utils/datejs';
 export var useDatePicker = function useDatePicker(_ref) {
   var currentValue = _ref.currentValue,
     setInputValue = _ref.setInputValue,
@@ -38,10 +39,43 @@ export var useDatePicker = function useDatePicker(_ref) {
     var newValue = maskWithFormat ? getMaskedDateOnInput(value, format, dateFormatDelimiter(), currentValue) : value;
     if (!format) {
       setCalendarValue(formatCalendarValue(newValue));
-    } else if ((newValue === null || newValue === void 0 ? void 0 : newValue.length) === format.length) {
+      setInputValue(formatInputValue({
+        value: newValue,
+        format: format,
+        lang: lang
+      }));
+      onChangeValue === null || onChangeValue === void 0 || onChangeValue(event, newValue);
+      return;
+    }
+
+    /**
+     * NOTE: если в формате даты есть месяц в полном названии или сокращенном,
+     * нужно дополнительно проводить валидацию на полноту введенной даты.
+     * Иначе dayjs циклически будет пытаться отформатировать некорректную дату.
+     */
+    var hasMonthFullName = /M{3,4}/g.test(format);
+    var isValidMonth;
+    var isLengthEqual;
+    if (hasMonthFullName) {
+      customDayjs.locale(lang);
+      var firstIndexOfMonth = format.indexOf('M');
+      var lastIndexOfMonth = newValue.indexOf(dateFormatDelimiter(), firstIndexOfMonth);
+      var fullMonthName = !lastIndexOfMonth ? newValue.slice(firstIndexOfMonth) : newValue.slice(firstIndexOfMonth, lastIndexOfMonth);
+      var monthFormatting = format.replace(/[^M]/g, '');
+      isValidMonth = customDayjs("01 ".concat(fullMonthName, " 1970"), "DD ".concat(monthFormatting, " YYYY"), true).isValid();
+      isLengthEqual = format.length - 4 === newValue.length - fullMonthName.length;
+    }
+    if (!hasMonthFullName && (newValue === null || newValue === void 0 ? void 0 : newValue.length) === (format === null || format === void 0 ? void 0 : format.length) || isValidMonth && isLengthEqual) {
       setCalendarValue(formatCalendarValue(newValue, format, lang));
     }
-    setInputValue(formatInputValue(newValue, format, lang));
+    setInputValue(formatInputValue({
+      value: newValue,
+      format: format,
+      lang: lang,
+      hasMonthFullName: hasMonthFullName,
+      isValidMonth: isValidMonth,
+      isLengthEqual: isLengthEqual
+    }));
     onChangeValue === null || onChangeValue === void 0 || onChangeValue(event, newValue);
   };
   var handleCommitDate = function handleCommitDate(date, applyFormat, isCalendarValue, dateInfo) {
@@ -55,8 +89,13 @@ export var useDatePicker = function useDatePicker(_ref) {
     }
     if (isCalendarValue) {
       setCalendarValue(formatCalendarValue(date, format, lang));
-      setInputValue(formatInputValue(date, format, lang));
-      return onCommitDate === null || onCommitDate === void 0 ? void 0 : onCommitDate(date, false, true, dateInfo);
+      setInputValue(formatInputValue({
+        value: date,
+        format: format,
+        lang: lang
+      }));
+      onCommitDate === null || onCommitDate === void 0 || onCommitDate(date, false, true, dateInfo);
+      return;
     }
     var formatString = applyFormat ? format : undefined;
     var _getDateFromFormat = getDateFromFormat(date, formatString, lang),
@@ -64,7 +103,11 @@ export var useDatePicker = function useDatePicker(_ref) {
       isError = _getDateFromFormat.isError,
       isSuccess = _getDateFromFormat.isSuccess;
     setCalendarValue(formatCalendarValue(newDate, format, lang));
-    setInputValue(formatInputValue(newDate, format, lang));
+    setInputValue(formatInputValue({
+      value: newDate,
+      format: format,
+      lang: lang
+    }));
     onCommitDate === null || onCommitDate === void 0 || onCommitDate(newDate, isError, isSuccess);
   };
   return {

package/styled-components/es/components/DatePicker/utils/dateHelper.js

@@ -1,8 +1,17 @@
 import { customDayjs } from '../../../utils/datejs';
-export var formatInputValue = function formatInputValue(value, format, lang) {
+export var formatInputValue = function formatInputValue(_ref) {
+  var value = _ref.value,
+    format = _ref.format,
+    lang = _ref.lang,
+    hasMonthFullName = _ref.hasMonthFullName,
+    isValidMonth = _ref.isValidMonth,
+    isLengthEqual = _ref.isLengthEqual;
   if (!value || !lang) {
     return '';
   }
+  if (hasMonthFullName && (!isValidMonth || !isLengthEqual)) {
+    return String(value);
+  }
   if (format && customDayjs(value, format, true).isValid()) {
     return customDayjs(value, format).locale(lang).format(format);
   }

package/styled-components/es/components/Select/Select.styles.js

@@ -13,7 +13,7 @@ export var StyledPopover = /*#__PURE__*/styled(Popover).withConfig({
 }, /*#__PURE__*/String(popoverClasses.target));
 export var Ul = /*#__PURE__*/styled.ul.withConfig({
   componentId: "plasma-new-hope__sc-le54jv-1"
-})(["box-sizing:border-box;background:var(", ");box-shadow:", ";border-radius:var(", ");width:", ";height:", ";overflow:", ";border:var(", ") solid var(", ");margin:", ";padding:var(", ");"], constants.background, constants.boxShadow, tokens.borderRadius, function (_ref2) {
+})(["box-sizing:border-box;background:var(", ");box-shadow:", ";border-radius:var(", ");width:", ";height:", ";overflow:", ";margin:", ";padding:var(", ");"], constants.background, constants.boxShadow, tokens.borderRadius, function (_ref2) {
   var listWidth = _ref2.listWidth;
   return listWidth || '100%';
 }, function (_ref3) {
@@ -22,7 +22,7 @@ export var Ul = /*#__PURE__*/styled.ul.withConfig({
 }, function (_ref4) {
   var listOverflow = _ref4.listOverflow;
   return listOverflow || 'initial';
-}, tokens.popoverBorderWidth, tokens.popoverBorderColor, function (_ref5) {
+}, function (_ref5) {
   var isInnerUl = _ref5.isInnerUl;
   return isInnerUl ? "calc(var(".concat(tokens.padding, ") * -1) 0 0 var(").concat(tokens.padding, ")") : 0;
 }, tokens.padding);