@salutejs/plasma-new-hope 0.253.0-canary.1736.13068364841.0 → 0.254.0-canary.1720.13073153224.0

package/styled-components/es/components/Accordion/ui/AccordionItem/AccordionItem.styles.js

@@ -2,8 +2,11 @@ import styled from 'styled-components';
 import { IconChevronDownFill, IconMinus } from '../../../_Icon';
 import { classes, tokens } from '../../Accordion.tokens';
 import { addFocus } from '../../../../mixins';
-export var StyledAccordionHeader = /*#__PURE__*/styled.button.withConfig({
+export var StyledAccordionItem = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-20ij9z-0"
+})(["background:var(", ");border:var(", ");border-bottom:var(", ");&:last-child{border-bottom:var(", ");}&.", "{opacity:0.4;cursor:not-allowed;}"], tokens.accordionItemBackground, tokens.accordionItemBorder, tokens.accordionItemBorderBottom, tokens.accordionItemBorder, classes.accordionDisabled);
+export var StyledAccordionHeader = /*#__PURE__*/styled.button.withConfig({
+  componentId: "plasma-new-hope__sc-20ij9z-1"
 })(["width:100%;border:none;padding:var(", ");display:flex;gap:var(", ");justify-content:space-between;align-items:center;background:none;box-sizing:border-box;cursor:pointer;&:focus{outline:none;}", ""], tokens.accordionItemPadding, tokens.accordionItemGap, /*#__PURE__*/addFocus({
   outlineOffset: '0.125rem',
   outlineSize: '0.125rem',
@@ -11,32 +14,29 @@ export var StyledAccordionHeader = /*#__PURE__*/styled.button.withConfig({
   outlineColor: /*#__PURE__*/"var(".concat(tokens.accordionItemFocus, ")")
 }));
 export var StyledAccordionHeaderLeft = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-20ij9z-1"
+  componentId: "plasma-new-hope__sc-20ij9z-2"
 })(["display:flex;gap:var(", ");justify-content:space-between;align-items:center;"], tokens.accordionItemGap);
 export var StyledAccordionContentRight = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-20ij9z-2"
+  componentId: "plasma-new-hope__sc-20ij9z-3"
 })(["transition:0.2s;transform:rotate(90deg);&.", "{transition:0.2s;transform:rotate(0deg);}"], classes.accordionItemShowBody);
 export var StyledAccordionContentLeft = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-20ij9z-3"
+  componentId: "plasma-new-hope__sc-20ij9z-4"
 })(["transition:0.2s;display:flex;align-items:center;&.", "{transition:0.2s;transform:rotate(180deg);}"], classes.accordionItemShowBody);
 export var StyledAccordionTitle = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-20ij9z-4"
+  componentId: "plasma-new-hope__sc-20ij9z-5"
 })(["color:var(", ");font-family:var(", ");font-size:var(", ");font-weight:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");text-align:left;"], tokens.accordionItemTitleColor, tokens.accordionItemTitleFontFamily, tokens.accordionItemTitleFontSize, tokens.accordionItemTitleFontWeight, tokens.accordionItemTitleFontStyle, tokens.accordionItemTitleLetterSpacing, tokens.accordionItemTitleLineHeight);
 export var StyledAccordionBodyAnimate = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-20ij9z-5"
+  componentId: "plasma-new-hope__sc-20ij9z-6"
 })(["display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.2s ease-out;overflow:hidden;&.", "{grid-template-rows:1fr;padding-bottom:var(", ");&.", "{transition:0.2s;transform:rotate(0deg);}}"], classes.accordionItemShowBody, tokens.accordionItemPaddingVertical, classes.accordionPlusAnimationElement);
 export var StyledAccordionBody = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-20ij9z-6"
+  componentId: "plasma-new-hope__sc-20ij9z-7"
 })(["color:var(", ");font-family:var(", ");font-size:var(", ");font-weight:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");overflow:hidden;padding-right:var(", ");padding-left:var(", ");text-align:left;"], tokens.accordionItemTextColor, tokens.accordionItemTextFontFamily, tokens.accordionItemTextFontSize, tokens.accordionItemTextFontWeight, tokens.accordionItemTextFontStyle, tokens.accordionItemTextLetterSpacing, tokens.accordionItemTextLineHeight, tokens.accordionItemPaddingHorizontal, tokens.accordionItemPaddingHorizontalLeft);
 export var StyledArrow = /*#__PURE__*/styled(IconChevronDownFill).withConfig({
-  componentId: "plasma-new-hope__sc-20ij9z-7"
+  componentId: "plasma-new-hope__sc-20ij9z-8"
 })(["pointer-events:none;user-select:none;color:var(", ");"], tokens.accordionItemIconColor);
 export var StyledMinus = /*#__PURE__*/styled(IconMinus).withConfig({
-  componentId: "plasma-new-hope__sc-20ij9z-8"
-})(["pointer-events:none;user-select:none;color:var(", ");display:flex;align-items:center;position:absolute;top:0;left:0;&.", "{transition:0.2s;transform:rotate(90deg);}&.", "{transition:0.2s;transform:rotate(0deg);color:var(", ",var(", "));}"], tokens.accordionItemIconColor, classes.accordionPlusAnimationElement, classes.accordionItemShowBody, tokens.accordionItemOpenedTitleColor, tokens.accordionItemIconColor);
-export var StyledPlus = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-20ij9z-9"
-})(["position:relative;display:flex;align-items:center;justify-content:center;width:var(", ",1rem);height:var(", ",1rem);"], tokens.accordionItemIconSize, tokens.accordionItemIconSize);
-export var StyledAccordionItem = /*#__PURE__*/styled.div.withConfig({
+})(["pointer-events:none;user-select:none;color:var(", ");display:flex;align-items:center;position:absolute;top:0;left:0;&.", "{transition:0.2s;transform:rotate(90deg);}&.", "{transition:0.2s;transform:rotate(0deg);}"], tokens.accordionItemIconColor, classes.accordionPlusAnimationElement, classes.accordionItemShowBody);
+export var StyledPlus = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-20ij9z-10"
-})(["background:var(", ");border:var(", ");border-bottom:var(", ");&:last-child{border-bottom:var(", ");}&.", "{opacity:0.4;cursor:not-allowed;}&.", "{", "{color:var(", ",var(", "));}", "{color:var(", ",var(", "));}}"], tokens.accordionItemBackground, tokens.accordionItemBorder, tokens.accordionItemBorderBottom, tokens.accordionItemBorder, classes.accordionDisabled, classes.accordionItemOpened, StyledArrow, tokens.accordionItemOpenedTitleColor, tokens.accordionItemIconColor, StyledAccordionTitle, tokens.accordionItemOpenedTitleColor, tokens.accordionItemTitleColor);
+})(["position:relative;display:flex;align-items:center;justify-content:center;width:var(", ",1rem);height:var(", ",1rem);"], tokens.accordionItemIconSize, tokens.accordionItemIconSize);

package/styled-components/es/components/Calendar/CalendarBase/CalendarBase.js

@@ -136,6 +136,14 @@ export var calendarBaseRoot = function calendarBaseRoot(Root) {
         });
         setPrevValue(value);
       }
+      if (!value) {
+        dispatch({
+          type: ActionType.UPDATE_DATE,
+          payload: {
+            value: min || new Date()
+          }
+        });
+      }
     }, [value, prevValue]);
     return /*#__PURE__*/React.createElement(Root, _extends({
       ref: outerRootRef,

package/styled-components/es/components/Calendar/CalendarDouble/CalendarDouble.js

@@ -190,6 +190,14 @@ export var calendarDoubleRoot = function calendarDoubleRoot(Root) {
         }
         setPrevValue(value);
       }
+      if (!value) {
+        dispatch({
+          type: ActionType.UPDATE_DATE,
+          payload: {
+            value: min || new Date()
+          }
+        });
+      }
     }, [value, prevValue]);
     useEffect(function () {
       setFirstDate(date);

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

@@ -1,4 +1,4 @@
-var _excluded = ["className", "autoComplete", "isDoubleCalendar", "opened", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "name", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "required", "requiredPlacement", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "closeAfterDateSelect", "offset", "onToggle", "onChange", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
+var _excluded = ["className", "autoComplete", "isDoubleCalendar", "opened", "value", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "name", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "required", "requiredPlacement", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "closeAfterDateSelect", "offset", "onToggle", "onChange", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -8,7 +8,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { createRef, forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import React, { createRef, forwardRef, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { cx, noop } from '../../../utils';
 import { formatCalendarValue, formatInputValue, getDateFormatDelimiter, getDateFromFormat } from '../utils/dateHelper';
 import { useDatePicker } from '../hooks/useDatePicker';
@@ -31,6 +31,7 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       isDoubleCalendar = _ref$isDoubleCalendar === void 0 ? false : _ref$isDoubleCalendar,
       _ref$opened = _ref.opened,
       opened = _ref$opened === void 0 ? false : _ref$opened,
+      externalValue = _ref.value,
       label = _ref.label,
       leftHelper = _ref.leftHelper,
       contentLeft = _ref.contentLeft,
@@ -113,6 +114,10 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
     var rootRef = useRef(null);
     var innerRefFirst = useRef(null);
     var innerRefSecond = useRef(null);
+    var _ref2 = externalValue || [],
+      _ref3 = _slicedToArray(_ref2, 2),
+      startExternalValue = _ref3[0],
+      endExternalValue = _ref3[1];
     var _useState = useState(rangeRef === null || rangeRef === void 0 || (_rangeRef$current = rangeRef.current) === null || _rangeRef$current === void 0 ? void 0 : _rangeRef$current.firstTextField()),
       _useState2 = _slicedToArray(_useState, 2),
       firstInputRef = _useState2[0],
@@ -125,24 +130,24 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       _useState6 = _slicedToArray(_useState5, 2),
       isInnerOpen = _useState6[0],
       setIsInnerOpen = _useState6[1];
-    var _useState7 = useState(formatCalendarValue(defaultFirstDate, format, lang)),
+    var _useState7 = useState(formatCalendarValue(startExternalValue || defaultFirstDate, format, lang)),
       _useState8 = _slicedToArray(_useState7, 2),
       calendarFirstValue = _useState8[0],
       setCalendarFirstValue = _useState8[1];
     var _useState9 = useState(formatInputValue({
-        value: defaultFirstDate,
+        value: startExternalValue || defaultFirstDate,
         format: format,
         lang: lang
       })),
       _useState10 = _slicedToArray(_useState9, 2),
       inputFirstValue = _useState10[0],
       setInputFirstValue = _useState10[1];
-    var _useState11 = useState(formatCalendarValue(defaultSecondDate, format, lang)),
+    var _useState11 = useState(formatCalendarValue(endExternalValue || defaultSecondDate, format, lang)),
       _useState12 = _slicedToArray(_useState11, 2),
       calendarSecondValue = _useState12[0],
       setCalendarSecondValue = _useState12[1];
     var _useState13 = useState(formatInputValue({
-        value: defaultSecondDate,
+        value: endExternalValue || defaultSecondDate,
         format: format,
         lang: lang
       })),
@@ -199,7 +204,8 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         onCommitDate: onCommitFirstDate
       }),
       handleChangeFirstValue = _useDatePicker.handleChangeValue,
-      handleCommitFirstDate = _useDatePicker.handleCommitDate;
+      handleCommitFirstDate = _useDatePicker.handleCommitDate,
+      updateExternalFirstDate = _useDatePicker.updateExternalDate;
     var _useDatePicker2 = useDatePicker({
         currentValue: inputSecondValue,
         setInputValue: setSecondInputValue,
@@ -216,7 +222,8 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         onCommitDate: onCommitSecondDate
       }),
       handleChangeSecondValue = _useDatePicker2.handleChangeValue,
-      handleCommitSecondDate = _useDatePicker2.handleCommitDate;
+      handleCommitSecondDate = _useDatePicker2.handleCommitDate,
+      updateExternalSecondDate = _useDatePicker2.updateExternalDate;
     var handleToggle = function handleToggle(currentOpened, event) {
       var _firstInputRef$curren, _secondInputRef$curre;
       if (disabled || readOnly) {
@@ -305,10 +312,10 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         handleToggle(false);
       }
     };
-    var handleChangeCalendarValue = function handleChangeCalendarValue(_ref2, dateInfo) {
-      var _ref3 = _slicedToArray(_ref2, 2),
-        firstDate = _ref3[0],
-        secondDate = _ref3[1];
+    var handleChangeCalendarValue = function handleChangeCalendarValue(_ref4, dateInfo) {
+      var _ref5 = _slicedToArray(_ref4, 2),
+        firstDate = _ref5[0],
+        secondDate = _ref5[1];
       if (firstDate) {
         handleCommitFirstDate(firstDate, false, true, dateInfo);
       }
@@ -384,43 +391,21 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         return prevOpen !== opened && opened;
       });
     }, [opened]);
-    useEffect(function () {
-      setCalendarFirstValue(formatCalendarValue(defaultFirstDate, format, lang));
-      setInputFirstValue(formatInputValue({
-        value: defaultFirstDate,
-        format: format,
-        lang: lang
-      }));
-    }, [defaultFirstDate]);
-    useEffect(function () {
-      setCalendarSecondValue(formatCalendarValue(defaultSecondDate, format, lang));
-      setInputSecondValue(formatInputValue({
-        value: defaultSecondDate,
-        format: format,
-        lang: lang
-      }));
-    }, [defaultSecondDate]);
-    useEffect(function () {
-      setCalendarFirstValue(formatCalendarValue(defaultFirstDate, format, lang));
-      setInputFirstValue(formatInputValue({
-        value: defaultFirstDate,
-        format: format,
-        lang: lang
-      }));
-      setCalendarSecondValue(formatCalendarValue(defaultSecondDate, format, lang));
-      setInputSecondValue(formatInputValue({
-        value: defaultSecondDate,
-        format: format,
-        lang: lang
-      }));
-    }, [format, lang]);
     useEffect(function () {
       if (calendarFirstValue && calendarSecondValue) {
         setFullDateEntered(true);
       }
     }, [calendarFirstValue, calendarSecondValue]);
-    var RootWrapper = useCallback(function (_ref4) {
-      var children = _ref4.children;
+    useLayoutEffect(function () {
+      var externalDate = startExternalValue || defaultFirstDate;
+      updateExternalFirstDate(externalDate, setFirstInputValue, setCalendarFirstValue);
+    }, [startExternalValue, defaultFirstDate, format, lang]);
+    useLayoutEffect(function () {
+      var externalDate = endExternalValue || defaultSecondDate;
+      updateExternalSecondDate(externalDate, setSecondInputValue, setCalendarSecondValue);
+    }, [endExternalValue, defaultSecondDate, format, lang]);
+    var RootWrapper = useCallback(function (_ref6) {
+      var children = _ref6.children;
       return /*#__PURE__*/React.createElement(Root, {
         view: view,
         size: size,

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

@@ -1,4 +1,4 @@
-var _excluded = ["className", "opened", "label", "labelPlacement", "keepPlaceholder", "required", "requiredPlacement", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "name", "defaultDate", "valueError", "valueSuccess", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur", "onChange"];
+var _excluded = ["className", "opened", "value", "label", "labelPlacement", "keepPlaceholder", "required", "requiredPlacement", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "name", "defaultDate", "valueError", "valueSuccess", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur", "onChange"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -8,7 +8,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { cx, getPlacements, noop } from '../../../utils';
 import { formatCalendarValue, formatInputValue, getDateFormatDelimiter } from '../utils/dateHelper';
 import { useDatePicker } from '../hooks/useDatePicker';
@@ -25,6 +25,7 @@ export var datePickerRoot = function datePickerRoot(Root) {
     var className = _ref.className,
       _ref$opened = _ref.opened,
       opened = _ref$opened === void 0 ? false : _ref$opened,
+      value = _ref.value,
       label = _ref.label,
       _ref$labelPlacement = _ref.labelPlacement,
       labelPlacement = _ref$labelPlacement === void 0 ? 'outer' : _ref$labelPlacement,
@@ -93,12 +94,12 @@ export var datePickerRoot = function datePickerRoot(Root) {
       _useState2 = _slicedToArray(_useState, 2),
       isInnerOpen = _useState2[0],
       setIsInnerOpen = _useState2[1];
-    var _useState3 = useState(formatCalendarValue(defaultDate, format, lang)),
+    var _useState3 = useState(formatCalendarValue(value || defaultDate, format, lang)),
       _useState4 = _slicedToArray(_useState3, 2),
       calendarValue = _useState4[0],
       setCalendarValue = _useState4[1];
     var _useState5 = useState(formatInputValue({
-        value: defaultDate,
+        value: value || defaultDate,
         format: format,
         lang: lang
       })),
@@ -128,7 +129,8 @@ export var datePickerRoot = function datePickerRoot(Root) {
       datePickerErrorClass = _useDatePicker.datePickerErrorClass,
       datePickerSuccessClass = _useDatePicker.datePickerSuccessClass,
       handleChangeValue = _useDatePicker.handleChangeValue,
-      handleCommitDate = _useDatePicker.handleCommitDate;
+      handleCommitDate = _useDatePicker.handleCommitDate,
+      updateExternalDate = _useDatePicker.updateExternalDate;
     var handleToggle = function handleToggle(opened, event) {
       if (disabled || readOnly) {
         return;
@@ -180,22 +182,10 @@ export var datePickerRoot = function datePickerRoot(Root) {
         return prevOpen !== opened && opened;
       });
     }, [opened]);
-    useEffect(function () {
-      setCalendarValue(formatCalendarValue(defaultDate, format, lang));
-      setInputValue(formatInputValue({
-        value: defaultDate,
-        format: format,
-        lang: lang
-      }));
-    }, [defaultDate]);
-    useEffect(function () {
-      setCalendarValue(formatCalendarValue(defaultDate, format, lang));
-      setInputValue(formatInputValue({
-        value: defaultDate,
-        format: format,
-        lang: lang
-      }));
-    }, [format, lang]);
+    useLayoutEffect(function () {
+      var externalDate = value || defaultDate;
+      updateExternalDate(externalDate, setInputValue, setCalendarValue);
+    }, [value, defaultDate, format, lang]);
     return /*#__PURE__*/React.createElement(Root, _extends({
       view: view,
       size: size,

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

@@ -116,10 +116,32 @@ export var useDatePicker = function useDatePicker(_ref) {
       }
     });
   };
+  var updateExternalDate = function updateExternalDate(externalDate, inputSetter, calendarSetter) {
+    inputSetter(formatInputValue({
+      value: externalDate,
+      format: format,
+      lang: lang
+    }));
+    if (!format) {
+      calendarSetter(formatCalendarValue(externalDate, undefined, lang));
+      return;
+    }
+    if (!externalDate) {
+      calendarSetter(undefined);
+      return;
+    }
+    var _getDateFromFormat2 = getDateFromFormat(externalDate, undefined, lang),
+      newDate = _getDateFromFormat2.value,
+      isError = _getDateFromFormat2.isError;
+    if (!isError) {
+      calendarSetter(formatCalendarValue(newDate, format, lang));
+    }
+  };
   return {
     datePickerErrorClass: datePickerErrorClass,
     datePickerSuccessClass: datePickerSuccessClass,
     handleChangeValue: handleChangeValue,
-    handleCommitDate: handleCommitDate
+    handleCommitDate: handleCommitDate,
+    updateExternalDate: updateExternalDate
   };
 };

package/styled-components/es/components/Toast/Toast.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["role", "width", "text", "hasClose", "contentLeft", "view", "size", "pilled", "className", "style", "closeIconType", "onCloseButtonClick"];
+var _excluded = ["role", "width", "text", "hasClose", "contentLeft", "view", "size", "pilled", "className", "style", "closeIconType", "onCloseButtonClick", "textColor"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -35,6 +35,7 @@ export var toastRoot = function toastRoot(Root) {
       style = props.style,
       closeIconType = props.closeIconType,
       onCloseButtonClick = props.onCloseButtonClick,
+      textColor = props.textColor,
       rest = _objectWithoutProperties(props, _excluded);
     var pilledClass = pilled ? classes.toastPilled : undefined;
     var fixedWidth = !Number.isNaN(Number(width)) ? "".concat(width, "%") : width;
@@ -58,7 +59,9 @@ export var toastRoot = function toastRoot(Root) {
       role: role,
       "aria-live": ariaLive,
       "aria-atomic": ariaAtomic
-    }, rest), contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/React.createElement(StyledContent, null, text), hasClose && /*#__PURE__*/React.createElement(CloseIconWrapper, {
+    }, rest), contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/React.createElement(StyledContent, {
+      textColor: textColor
+    }, text), hasClose && /*#__PURE__*/React.createElement(CloseIconWrapper, {
       view: "clear",
       size: "s",
       onClick: onCloseButtonClick,

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

@@ -34,7 +34,10 @@ export var StyledOverlay = /*#__PURE__*/styled(Overlay).withConfig({
 })(["&&.", "{animation:0.3s showFadeAnimation ease-out forwards;}&&.", "{animation:0.3s hideFadeAnimation ease-out forwards;}@keyframes showFadeAnimation{0%{opacity:0;}100%{opacity:1;}}@keyframes hideFadeAnimation{0%{opacity:1;}100%{opacity:0;}}"], /*#__PURE__*/String(classes.toastFadeShowed), /*#__PURE__*/String(classes.toastFadeHidden));
 export var StyledContentLeft = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-19l9ekl-3"
-})(["display:flex;--plasma_private-left-content-margin:var(", ");margin:var(--plasma_private-left-content-margin);"], tokens.leftContentMargin);
+})(["display:flex;--plasma_private-content-left-margin:var(", ");margin:var(--plasma_private-content-left-margin);color:var(", ");"], tokens.contentLeftMargin, tokens.contentLeftColor);
 export var StyledContent = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-19l9ekl-4"
-})([""]);
+})(["color:", ";"], function (_ref5) {
+  var textColor = _ref5.textColor;
+  return textColor || 'currentColor';
+});

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

@@ -104,6 +104,10 @@ export interface ShowToastArgs {
      * Время отображения подсказки. Если не передать значение, подсказка будет отображаться пока ее не закроют.
      */
     timeout?: number;
+    /**
+     * Цвет текста (по умолчанию берётся цвет из view)
+     */
+    textColor?: string;
     /**
      * callback срабатывающий в момент события hideToast
      */
@@ -117,9 +121,11 @@ export interface ShowToastArgs {
 
 ## Пример использования
 
+Для изменения цветовой темы компонента `Toast` используйте свойство `view` компонента `ViewContainer`.
+
 ```jsx live
 import React from 'react'
-import { useToast, ToastProvider, Button } from '@salutejs/{{ package }}'
+import { useToast, ToastProvider, Button, ViewContainer } from '@salutejs/{{ package }}'
 
 export function App() {
 
@@ -130,12 +136,13 @@ export function App() {
         const onHide = () => {}
         const toastData = {
             text: 'Подсказка вызванная showToast',
+            textColor: 'cyan',
             position: 'bottom',
             role: 'status',
             hasClose: true,
             fade: false,
             size: 'm',
-            view: 'dark',
+            view: 'default',
             timeout: 3000,
             onShow,
             onHide
@@ -145,9 +152,19 @@ export function App() {
     }
 
     return (
-        <ToastProvider>
-            <ToastExample />
-        </ToastProvider>
+        <div style=\{{ display: 'flex', gap: '1rem' }}>
+            <ViewContainer view="onLight">
+                <ToastProvider>
+                    <ToastExample />
+                </ToastProvider>
+            </ViewContainer>
+
+            <ViewContainer view="onDark">
+                <ToastProvider>
+                    <ToastExample />
+                </ToastProvider>
+            </ViewContainer>
+        </div>
     )
 }
 ```

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

@@ -19,7 +19,8 @@ export var tokens = {
   letterSpacing: '--plasma-toast-letter-spacing',
   lineHeight: '--plasma-toast-lineheight',
   pilledBorderRadius: '--plasma-toast-pilled-border-radius',
-  leftContentMargin: '--plasma-toast-left-content-margin',
+  contentLeftMargin: '--plasma-toast-content-left-margin',
+  contentLeftColor: '--plasma-toast-content-left-color',
   closeIconMargin: '--plasma-toast-close-icon-margin',
   closeIconColor: '--plasma-toast-close-icon-color',
   closeIconColorOnHover: '--plasma-toast-close-icon-color-on-hover',

package/styled-components/es/components/Toast/ToastProvider/ToastProvider.js

@@ -6,7 +6,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
-import { DEFAULT_FADE, DEFAULT_POSITION, TIMER_DELAY } from '../utils';
+import { DEFAULT_CLOSE_ICON_TYPE, DEFAULT_FADE, DEFAULT_POSITION, TIMER_DELAY } from '../utils';
 export var ToastContext = /*#__PURE__*/createContext(null);
 export var useToastInner = function useToastInner() {
   var context = useContext(ToastContext);
@@ -118,6 +118,9 @@ export var ToastProviderHoc = function ToastProviderHoc(ToastComponent) {
         size = _getShowToastCallSign.size,
         view = _getShowToastCallSign.view,
         width = _getShowToastCallSign.width,
+        _getShowToastCallSign4 = _getShowToastCallSign.closeIconType,
+        closeIconType = _getShowToastCallSign4 === void 0 ? DEFAULT_CLOSE_ICON_TYPE : _getShowToastCallSign4,
+        textColor = _getShowToastCallSign.textColor,
         onHide = _getShowToastCallSign.onHide,
         onShow = _getShowToastCallSign.onShow;
       setToastProps({
@@ -131,7 +134,9 @@ export var ToastProviderHoc = function ToastProviderHoc(ToastComponent) {
         pilled: pilled,
         hasClose: hasClose,
         size: size,
-        view: view
+        view: view,
+        closeIconType: closeIconType,
+        textColor: textColor
       });
       setToastInfo({
         timeout: timeout,

package/styled-components/es/components/Toast/utils.js

@@ -2,6 +2,7 @@ import { buttonConfig } from '../Button';
 import { component, mergeConfig } from '../../engines';
 export var DEFAULT_FADE = true;
 export var DEFAULT_POSITION = 'bottom';
+export var DEFAULT_CLOSE_ICON_TYPE = 'default';
 export var TIMER_DELAY = 300;
 export var FADE_Z_INDEX = '9900';
 export var TOAST_Z_INDEX = '9901';

package/styled-components/es/components/Toast/variations/_pilled/base.js

@@ -1,3 +1,3 @@
 import { css } from 'styled-components';
 import { classes, tokens } from '../../Toast.tokens';
-export var base = /*#__PURE__*/css(["&.", "{--plasma_private-left-content-margin:var(", ");--plasma_private-close-icon-margin:var(", ");border-radius:var(", ");}"], /*#__PURE__*/String(classes.toastPilled), tokens.leftContentMargin, tokens.closeIconMargin, tokens.pilledBorderRadius);
+export var base = /*#__PURE__*/css(["&.", "{--plasma_private-content-left-margin:var(", ");--plasma_private-close-icon-margin:var(", ");border-radius:var(", ");}"], /*#__PURE__*/String(classes.toastPilled), tokens.contentLeftMargin, tokens.closeIconMargin, tokens.pilledBorderRadius);

package/styled-components/es/examples/plasma_b2c/components/Toast/Toast.config.js

@@ -9,14 +9,24 @@ export var config = {
   variations: {
     view: {
       "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-secondary);", ":var(--text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
+      positive: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.contentLeftColor, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
+      negative: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.contentLeftColor, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
+      /**
+       * @deprecated
+       * светлый и темный фон регулировать через `view` компонента `ViewContainer`
+       */
       dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-solid-primary-brightness);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
+      /**
+       * @deprecated
+       * светлый и темный фон регулировать через `view` компонента `ViewContainer`
+       */
       light: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-light-surface-solid-primary-brightness);", ":var(--on-light-text-secondary);", ":var(--on-light-text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover)
     },
     size: {
-      m: /*#__PURE__*/css(["", ":0.75rem;", ":calc(100vw - 5rem);", ":0.5625rem 0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.375rem -0.0625rem -0.125rem;", ":-0.0625rem -0.25rem -0.0625rem 0.5rem;"], toastTokens.borderRadius, toastTokens.maxWidth, toastTokens.padding, toastTokens.fontFamily, toastTokens.fontSize, toastTokens.fontStyle, toastTokens.fontWeight, toastTokens.letterSpacing, toastTokens.lineHeight, toastTokens.leftContentMargin, toastTokens.closeIconMargin)
+      m: /*#__PURE__*/css(["", ":0.75rem;", ":calc(100vw - 5rem);", ":0.5625rem 0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.375rem -0.0625rem -0.125rem;", ":-0.0625rem -0.25rem -0.0625rem 0.5rem;"], toastTokens.borderRadius, toastTokens.maxWidth, toastTokens.padding, toastTokens.fontFamily, toastTokens.fontSize, toastTokens.fontStyle, toastTokens.fontWeight, toastTokens.letterSpacing, toastTokens.lineHeight, toastTokens.contentLeftMargin, toastTokens.closeIconMargin)
     },
     pilled: {
-      "true": /*#__PURE__*/css(["", ":1.5rem;", ":-0.0625rem 0.375rem -0.0625rem -0.25rem;", ":-0.0625rem -0.25rem -0.0625rem 0.375rem;"], toastTokens.pilledBorderRadius, toastTokens.leftContentMargin, toastTokens.closeIconMargin)
+      "true": /*#__PURE__*/css(["", ":1.5rem;", ":-0.0625rem 0.375rem -0.0625rem -0.25rem;", ":-0.0625rem -0.25rem -0.0625rem 0.375rem;"], toastTokens.pilledBorderRadius, toastTokens.contentLeftMargin, toastTokens.closeIconMargin)
     },
     closeIconType: {
       "default": /*#__PURE__*/css(["", ":1rem;", ":1.5rem;"], toastTokens.closeIconButtonSize, toastTokens.closeIconSize),