@salutejs/plasma-new-hope 0.134.0-canary.1403.10590022490.0 → 0.134.0-canary.1404.10615452870.0

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

@@ -17,7 +17,7 @@ var _base2 = /*#__PURE__*/require("./variations/_view/base");
 var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
 var _base4 = /*#__PURE__*/require("./variations/_readonly/base");
 var _SingleDate = /*#__PURE__*/require("./SingleDate.styles");
-var _excluded = ["className", "opened", "label", "labelPlacement", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "defaultDate", "valueError", "valueSuccess", "format", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "placement", "closeOnOverlayClick", "offset", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur"];
+var _excluded = ["className", "opened", "label", "labelPlacement", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "defaultDate", "valueError", "valueSuccess", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "placement", "closeOnOverlayClick", "offset", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 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); }
@@ -55,6 +55,8 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
       valueSuccess = _ref.valueSuccess,
       _ref$format = _ref.format,
       format = _ref$format === void 0 ? 'DD.MM.YYYY' : _ref$format,
+      _ref$lang = _ref.lang,
+      lang = _ref$lang === void 0 ? 'ru' : _ref$lang,
       maskWithFormat = _ref.maskWithFormat,
       min = _ref.min,
       max = _ref.max,
@@ -86,11 +88,11 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
       _useState2 = _slicedToArray(_useState, 2),
       isInnerOpen = _useState2[0],
       setIsInnerOpen = _useState2[1];
-    var _useState3 = (0, _react.useState)((0, _dateHelper.formatCalendarValue)(defaultDate, format)),
+    var _useState3 = (0, _react.useState)((0, _dateHelper.formatCalendarValue)(defaultDate, format, lang)),
       _useState4 = _slicedToArray(_useState3, 2),
       calendarValue = _useState4[0],
       setCalendarValue = _useState4[1];
-    var _useState5 = (0, _react.useState)((0, _dateHelper.formatInputValue)(defaultDate, format)),
+    var _useState5 = (0, _react.useState)((0, _dateHelper.formatInputValue)(defaultDate, format, lang)),
       _useState6 = _slicedToArray(_useState5, 2),
       inputValue = _useState6[0],
       setInputValue = _useState6[1];
@@ -105,6 +107,7 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
         setIsInnerOpen: setIsInnerOpen,
         dateFormatDelimiter: dateFormatDelimiter,
         format: format,
+        lang: lang,
         disabled: disabled,
         readOnly: readOnly,
         maskWithFormat: maskWithFormat,
@@ -154,9 +157,13 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
       });
     }, [opened]);
     (0, _react.useEffect)(function () {
-      setCalendarValue((0, _dateHelper.formatCalendarValue)(defaultDate, format));
-      setInputValue((0, _dateHelper.formatInputValue)(defaultDate, format));
+      setCalendarValue((0, _dateHelper.formatCalendarValue)(defaultDate, format, lang));
+      setInputValue((0, _dateHelper.formatInputValue)(defaultDate, format, lang));
     }, [defaultDate]);
+    (0, _react.useEffect)(function () {
+      setCalendarValue((0, _dateHelper.formatCalendarValue)(defaultDate, format, lang));
+      setInputValue((0, _dateHelper.formatInputValue)(defaultDate, format, lang));
+    }, [format, lang]);
     return /*#__PURE__*/_react["default"].createElement(Root, _extends({
       view: view,
       size: size,

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

@@ -13,6 +13,8 @@ var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
     setIsInnerOpen = _ref.setIsInnerOpen,
     dateFormatDelimiter = _ref.dateFormatDelimiter,
     format = _ref.format,
+    _ref$lang = _ref.lang,
+    lang = _ref$lang === void 0 ? 'ru' : _ref$lang,
     disabled = _ref.disabled,
     readOnly = _ref.readOnly,
     maskWithFormat = _ref.maskWithFormat,
@@ -43,9 +45,9 @@ var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
     if (!format) {
       setCalendarValue((0, _dateHelper.formatCalendarValue)(newValue));
     } else if ((newValue === null || newValue === void 0 ? void 0 : newValue.length) === format.length) {
-      setCalendarValue((0, _dateHelper.formatCalendarValue)(newValue, format));
+      setCalendarValue((0, _dateHelper.formatCalendarValue)(newValue, format, lang));
     }
-    setInputValue((0, _dateHelper.formatInputValue)(newValue, format));
+    setInputValue((0, _dateHelper.formatInputValue)(newValue, format, lang));
     onChangeValue === null || onChangeValue === void 0 || onChangeValue(event, newValue);
   };
   var handleCommitDate = function handleCommitDate(date, applyFormat, isCalendarValue, dateInfo) {
@@ -58,17 +60,17 @@ var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
       return onCommitDate === null || onCommitDate === void 0 ? void 0 : onCommitDate('', false, true);
     }
     if (isCalendarValue) {
-      setCalendarValue((0, _dateHelper.formatCalendarValue)(date, format));
-      setInputValue((0, _dateHelper.formatInputValue)(date, format));
+      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);
     }
     var formatString = applyFormat ? format : undefined;
-    var _getDateFromFormat = (0, _dateHelper.getDateFromFormat)(date, formatString),
+    var _getDateFromFormat = (0, _dateHelper.getDateFromFormat)(date, formatString, lang),
       newDate = _getDateFromFormat.value,
       isError = _getDateFromFormat.isError,
       isSuccess = _getDateFromFormat.isSuccess;
-    setCalendarValue((0, _dateHelper.formatCalendarValue)(newDate, format));
-    setInputValue((0, _dateHelper.formatInputValue)(newDate, format));
+    setCalendarValue((0, _dateHelper.formatCalendarValue)(newDate, format, lang));
+    setInputValue((0, _dateHelper.formatInputValue)(newDate, format, lang));
     onCommitDate === null || onCommitDate === void 0 || onCommitDate(newDate, isError, isSuccess);
   };
   return {

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

@@ -5,41 +5,43 @@ 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) {
-  if (!value) {
+require("dayjs/locale/ru");
+require("dayjs/locale/en");
+var formatInputValue = exports.formatInputValue = function formatInputValue(value, format, lang) {
+  if (!value || !lang) {
     return '';
   }
   if (format && (0, _datejs.customDayjs)(value, format, true).isValid()) {
-    return (0, _datejs.customDayjs)(value, format).format(format);
+    return (0, _datejs.customDayjs)(value, format).locale(lang).format(format);
   }
   if (format && String(value).length >= 10 && String(new Date(value)) !== 'Invalid Date') {
-    return (0, _datejs.customDayjs)(value).format(format);
+    return (0, _datejs.customDayjs)(value).locale(lang).format(format);
   }
   return String(value);
 };
-var formatCalendarValue = exports.formatCalendarValue = function formatCalendarValue(value, format) {
-  if (!value) {
+var formatCalendarValue = exports.formatCalendarValue = function formatCalendarValue(value, format, lang) {
+  if (!value || !lang) {
     return undefined;
   }
   if (format && (0, _datejs.customDayjs)(value, format, true).isValid()) {
-    return (0, _datejs.customDayjs)(value, format, true).toDate();
+    return (0, _datejs.customDayjs)(value, format, true).locale(lang).toDate();
   }
   if (String(new Date(value)) !== 'Invalid Date') {
-    return (0, _datejs.customDayjs)(value).toDate();
+    return (0, _datejs.customDayjs)(value).locale(lang).toDate();
   }
   return undefined;
 };
-var getDateFromFormat = exports.getDateFromFormat = function getDateFromFormat(value, format) {
-  if (format && (0, _datejs.customDayjs)(value, format, true).isValid()) {
+var getDateFromFormat = exports.getDateFromFormat = function getDateFromFormat(value, format, lang) {
+  if (format && (0, _datejs.customDayjs)(value, format, true).isValid() && lang) {
     return {
-      value: (0, _datejs.customDayjs)(value, format, true).toDate(),
+      value: (0, _datejs.customDayjs)(value, format, true).locale(lang).toDate(),
       isError: false,
       isSuccess: true
     };
   }
-  if (!format && String(new Date(value)) !== 'Invalid Date') {
+  if (!format && String(new Date(value)) !== 'Invalid Date' && lang) {
     return {
-      value: (0, _datejs.customDayjs)(value).toDate(),
+      value: (0, _datejs.customDayjs)(value).locale(lang).toDate(),
       isError: false,
       isSuccess: true
     };

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

@@ -20,7 +20,7 @@ var tokens = exports.tokens = {
   trackHeight: '--plasma-switch__track-height',
   trackBorderRadius: '--plasma-switch__track-border-radius',
   // NOTE: could be intersection with checked
-  trackBackgroundColorOn: '--plasma-switch__track_cheched_true-bg-color',
+  trackBackgroundColorOn: '--plasma-switch__track_checked_true-bg-color',
   trackBackgroundColorOnHover: '--plasma-switch__track_checked_true_hovered_true-bg-color',
   trackBackgroundColorOff: '--plasma-switch__track_checked_false-bg-color',
   trackBackgroundColorOffHover: '--plasma-switch__track_checked_false_hovered_true-bg-color',

package/styled-components/cjs/components/Switch/_size/base.js

@@ -7,4 +7,4 @@ exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _Switch = /*#__PURE__*/require("../Switch.tokens");
 var _Switch2 = /*#__PURE__*/require("../Switch.styles");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["font-family:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");font-size:var(", ");", "{flex:0 0 var(", ");width:var(", ");height:var(", ");border-radius:var(", ");&::after{width:var(", ");height:var(", ");border-radius:var(", ");margin:auto var(", ");}}", "{margin:var(--plasma_private-switch__label-offset,0);}:active ", "::after{width:calc(var(", ") * var(", ",1));}"], _Switch.tokens.fontFamily, _Switch.tokens.fontStyle, _Switch.tokens.fontWeight, _Switch.tokens.letterSpacing, _Switch.tokens.lineHeight, _Switch.tokens.fontSize, _Switch2.StyledTrigger, _Switch.tokens.trackWidth, _Switch.tokens.trackWidth, _Switch.tokens.trackHeight, _Switch.tokens.trackBorderRadius, _Switch.tokens.thumbSize, _Switch.tokens.thumbSize, _Switch.tokens.thumbBorderRadius, _Switch.tokens.thumbOffset, _Switch2.StyledLabel, _Switch2.StyledTrigger, _Switch.tokens.thumbSize, _Switch.tokens.thumbPressScale);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["font-family:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");font-size:var(", ");", "{flex:0 0 var(", ");width:var(", ");height:var(", ");border-radius:var(", ");&::after{width:var(", ");height:var(", ");border-radius:var(", ");margin:auto var(", ");}}", "{margin:var(--plasma_private-switch__label-offset,0);}:active:not([disabled]) ", "::after{width:calc(var(", ") * var(", ",1));}"], _Switch.tokens.fontFamily, _Switch.tokens.fontStyle, _Switch.tokens.fontWeight, _Switch.tokens.letterSpacing, _Switch.tokens.lineHeight, _Switch.tokens.fontSize, _Switch2.StyledTrigger, _Switch.tokens.trackWidth, _Switch.tokens.trackWidth, _Switch.tokens.trackHeight, _Switch.tokens.trackBorderRadius, _Switch.tokens.thumbSize, _Switch.tokens.thumbSize, _Switch.tokens.thumbBorderRadius, _Switch.tokens.thumbOffset, _Switch2.StyledLabel, _Switch2.StyledTrigger, _Switch.tokens.thumbSize, _Switch.tokens.thumbPressScale);

package/styled-components/cjs/components/Switch/_view/base.js

@@ -7,4 +7,4 @@ exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _Switch = /*#__PURE__*/require("../Switch.tokens");
 var _Switch2 = /*#__PURE__*/require("../Switch.styles");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", "{background-color:var(", ");}", ":hover{background-color:var(", ",var(", "));}", ":checked ~ ", "{background-color:var(", ");}", ":checked:hover ~ ", "{background-color:var(", ",var(", "));}", "::after{background-color:var(", ");box-shadow:var(", ");}", ":checked ~ ", "::after{box-shadow:var(", ",var(", "));}"], _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOff, _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOffHover, _Switch.tokens.trackBackgroundColorOff, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOn, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOnHover, _Switch.tokens.trackBackgroundColorOn, _Switch2.StyledTrigger, _Switch.tokens.thumbBackgroundColor, _Switch.tokens.thumbBoxShadow, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.thumbBoxShadowOn, _Switch.tokens.thumbBoxShadow);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", "{background-color:var(", ");}", ":not([disabled]) ~ ", ":hover{background-color:var(", ",var(", "));}", ":checked ~ ", "{background-color:var(", ");}", ":checked:not([disabled]) ~ ", ":hover{background-color:var(", ",var(", "));}", "::after{background-color:var(", ");box-shadow:var(", ");}", ":checked ~ ", "::after{box-shadow:var(", ",var(", "));}"], _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOff, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOffHover, _Switch.tokens.trackBackgroundColorOff, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOn, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOnHover, _Switch.tokens.trackBackgroundColorOn, _Switch2.StyledTrigger, _Switch.tokens.thumbBackgroundColor, _Switch.tokens.thumbBoxShadow, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.thumbBoxShadowOn, _Switch.tokens.thumbBoxShadow);

package/styled-components/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentProps, useEffect, useRef, useState } from 'react';
+import React, { ComponentProps, useEffect, useReducer, useRef, useState } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
@@ -47,6 +47,12 @@ const meta: Meta = {
                 type: 'date',
             },
         },
+        lang: {
+            options: ['ru', 'en'],
+            control: {
+                type: 'inline-radio',
+            },
+        },
     },
 };
 
@@ -63,6 +69,8 @@ const StoryDefault = ({
     valueError,
     valueSuccess,
     size,
+    lang,
+    format,
     ...rest
 }: StoryPropsDefault) => {
     const [isOpen, setIsOpen] = useState(false);
@@ -83,6 +91,8 @@ const StoryDefault = ({
             onChangeValue={(e, currentValue) => {
                 onChangeValue(e, currentValue);
             }}
+            lang={lang}
+            format={format}
             onCommitDate={() => setIsOpen(false)}
             {...rest}
         />
@@ -102,6 +112,12 @@ export const Default: StoryObj<StoryPropsDefault> = {
                 type: 'inline-radio',
             },
         },
+        format: {
+            options: ['DD.MM.YYYY', 'DD MMMM YYYY'],
+            control: {
+                type: 'select',
+            },
+        },
     },
     args: {
         label: 'Лейбл',
@@ -121,6 +137,8 @@ export const Default: StoryObj<StoryPropsDefault> = {
         enableContentRight: true,
         valueError: false,
         valueSuccess: false,
+        lang: 'ru',
+        format: 'DD.MM.YYYY',
     },
     render: (args) => <StoryDefault {...args} />,
 };
@@ -230,6 +248,12 @@ export const Range: StoryObj<StoryPropsRange> = {
                 type: 'inline-radio',
             },
         },
+        format: {
+            options: ['DD.MM.YYYY', 'DD MMMM YYYY'],
+            control: {
+                type: 'select',
+            },
+        },
     },
     args: {
         label: 'Лейбл',
@@ -256,6 +280,9 @@ export const Range: StoryObj<StoryPropsRange> = {
         enableSecondTextfieldContentLeft: false,
         enableSecondTextfieldContentRight: false,
 
+        lang: 'ru',
+        format: 'DD.MM.YYYY',
+
         firstValueError: false,
         firstValueSuccess: false,
         secondValueError: false,
@@ -321,6 +348,12 @@ export const Deferred: StoryObj<StoryPropsDefault> = {
                 type: 'inline-radio',
             },
         },
+        format: {
+            options: ['DD.MM.YYYY', 'DD MMMM YYYY'],
+            control: {
+                type: 'select',
+            },
+        },
     },
     args: {
         label: 'Лейбл',

package/styled-components/cjs/examples/plasma_b2c/components/Switch/Switch.config.js

@@ -20,7 +20,7 @@ var config = exports.config = {
       m: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body1-font-family);", ":var(--plasma-typo-body1-font-style);", ":var(--plasma-typo-body1-font-weight);", ":var(--plasma-typo-body1-font-weight);", ":var(--plasma-typo-body1-line-height);", ":var(--plasma-typo-body1-font-size);", ":var(--plasma-typo-body1-letter-spacing);", ":2.75rem;", ":1.75rem;", ":calc(var(", ") / 2);", ":1.5rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;", ":0.75rem;"], _Switch.switchTokens.fontFamily, _Switch.switchTokens.fontStyle, _Switch.switchTokens.fontWeight, _Switch.switchTokens.fontWeight, _Switch.switchTokens.lineHeight, _Switch.switchTokens.fontSize, _Switch.switchTokens.letterSpacing, _Switch.switchTokens.trackWidth, _Switch.switchTokens.trackHeight, _Switch.switchTokens.trackBorderRadius, _Switch.switchTokens.trackHeight, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbBorderRadius, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbOffset, _Switch.switchTokens.thumbPressScale, _Switch.switchTokens.labelOffset)
     },
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-accent);", ":var(--surface-transparent-tertiary-active);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], _Switch.switchTokens.trackBackgroundColorOn, _Switch.switchTokens.trackBackgroundColorOff, _Switch.switchTokens.thumbBackgroundColor, _Switch.switchTokens.thumbBoxShadow)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], _Switch.switchTokens.trackBackgroundColorOn, _Switch.switchTokens.trackBackgroundColorOnHover, _Switch.switchTokens.trackBackgroundColorOff, _Switch.switchTokens.trackBackgroundColorOffHover, _Switch.switchTokens.thumbBackgroundColor, _Switch.switchTokens.thumbBoxShadow)
     },
     labelPosition: {
       before: _before.labelPosition_Before,

package/styled-components/cjs/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentProps, useEffect, useRef, useState } from 'react';
+import React, { ComponentProps, useEffect, useReducer, useRef, useState } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
@@ -47,6 +47,12 @@ const meta: Meta = {
                 type: 'date',
             },
         },
+        lang: {
+            options: ['ru', 'en'],
+            control: {
+                type: 'inline-radio',
+            },
+        },
     },
 };
 
@@ -63,6 +69,8 @@ const StoryDefault = ({
     valueError,
     valueSuccess,
     size,
+    lang,
+    format,
     ...rest
 }: StoryPropsDefault) => {
     const [isOpen, setIsOpen] = useState(false);
@@ -83,6 +91,8 @@ const StoryDefault = ({
             onChangeValue={(e, currentValue) => {
                 onChangeValue(e, currentValue);
             }}
+            lang={lang}
+            format={format}
             onCommitDate={() => setIsOpen(false)}
             {...rest}
         />
@@ -102,6 +112,12 @@ export const Default: StoryObj<StoryPropsDefault> = {
                 type: 'inline-radio',
             },
         },
+        format: {
+            options: ['DD.MM.YYYY', 'DD MMMM YYYY'],
+            control: {
+                type: 'select',
+            },
+        },
     },
     args: {
         label: 'Лейбл',
@@ -109,6 +125,7 @@ export const Default: StoryObj<StoryPropsDefault> = {
         placeholder: '30.05.2024',
         size: 'l',
         view: 'default',
+        labelPlacement: 'outer',
         defaultDate: new Date(2024, 5, 14),
         min: new Date(2024, 1, 1),
         max: new Date(2024, 12, 29),
@@ -120,6 +137,8 @@ export const Default: StoryObj<StoryPropsDefault> = {
         enableContentRight: true,
         valueError: false,
         valueSuccess: false,
+        lang: 'ru',
+        format: 'DD.MM.YYYY',
     },
     render: (args) => <StoryDefault {...args} />,
 };
@@ -229,6 +248,12 @@ export const Range: StoryObj<StoryPropsRange> = {
                 type: 'inline-radio',
             },
         },
+        format: {
+            options: ['DD.MM.YYYY', 'DD MMMM YYYY'],
+            control: {
+                type: 'select',
+            },
+        },
     },
     args: {
         label: 'Лейбл',
@@ -255,6 +280,9 @@ export const Range: StoryObj<StoryPropsRange> = {
         enableSecondTextfieldContentLeft: false,
         enableSecondTextfieldContentRight: false,
 
+        lang: 'ru',
+        format: 'DD.MM.YYYY',
+
         firstValueError: false,
         firstValueSuccess: false,
         secondValueError: false,
@@ -320,6 +348,12 @@ export const Deferred: StoryObj<StoryPropsDefault> = {
                 type: 'inline-radio',
             },
         },
+        format: {
+            options: ['DD.MM.YYYY', 'DD MMMM YYYY'],
+            control: {
+                type: 'select',
+            },
+        },
     },
     args: {
         label: 'Лейбл',

package/styled-components/cjs/examples/plasma_web/components/Switch/Switch.config.js

@@ -20,7 +20,7 @@ var config = exports.config = {
       m: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body1-font-family);", ":var(--plasma-typo-body1-font-style);", ":var(--plasma-typo-body1-font-weight);", ":var(--plasma-typo-body1-font-weight);", ":var(--plasma-typo-body1-line-height);", ":var(--plasma-typo-body1-font-size);", ":var(--plasma-typo-body1-letter-spacing);", ":2.75rem;", ":1.75rem;", ":calc(var(", ") / 2);", ":1.5rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;", ":0.75rem;"], _Switch.switchTokens.fontFamily, _Switch.switchTokens.fontStyle, _Switch.switchTokens.fontWeight, _Switch.switchTokens.fontWeight, _Switch.switchTokens.lineHeight, _Switch.switchTokens.fontSize, _Switch.switchTokens.letterSpacing, _Switch.switchTokens.trackWidth, _Switch.switchTokens.trackHeight, _Switch.switchTokens.trackBorderRadius, _Switch.switchTokens.trackHeight, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbBorderRadius, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbOffset, _Switch.switchTokens.thumbPressScale, _Switch.switchTokens.labelOffset)
     },
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-accent);", ":var(--surface-transparent-tertiary-active);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], _Switch.switchTokens.trackBackgroundColorOn, _Switch.switchTokens.trackBackgroundColorOff, _Switch.switchTokens.thumbBackgroundColor, _Switch.switchTokens.thumbBoxShadow)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], _Switch.switchTokens.trackBackgroundColorOn, _Switch.switchTokens.trackBackgroundColorOnHover, _Switch.switchTokens.trackBackgroundColorOff, _Switch.switchTokens.trackBackgroundColorOffHover, _Switch.switchTokens.thumbBackgroundColor, _Switch.switchTokens.thumbBoxShadow)
     },
     labelPosition: {
       before: _before.labelPosition_Before,

package/styled-components/cjs/examples/themes/index.js

@@ -6,12 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.themes = void 0;
 var _plasma_b2cModule = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("./plasma_b2c.module.css"));
 var _plasma_webModule = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("./plasma_web.module.css"));
-var _sds_engineerModule = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("./sds_engineer.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 /* eslint-disable camelcase */
 
 var themes = exports.themes = {
   plasma_b2c: _plasma_b2cModule["default"],
-  plasma_web: _plasma_webModule["default"],
-  sds_engineer: _sds_engineerModule["default"]
+  plasma_web: _plasma_webModule["default"]
 };

package/styled-components/cjs/utils/datejs.js

@@ -8,6 +8,7 @@ var _dayjs = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("dayjs"))
 var _customParseFormat = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("dayjs/plugin/customParseFormat"));
 var _quarterOfYear = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("dayjs/plugin/quarterOfYear"));
 var _advancedFormat = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("dayjs/plugin/advancedFormat"));
+require("dayjs/locale/ru");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 _dayjs["default"].extend(_customParseFormat["default"]);
 _dayjs["default"].extend(_quarterOfYear["default"]);

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

@@ -1,4 +1,4 @@
-var _excluded = ["className", "isDoubleCalendar", "opened", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "format", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onToggle", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
+var _excluded = ["className", "isDoubleCalendar", "opened", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onToggle", "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."); }
@@ -61,6 +61,8 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       secondTextfieldTextAfter = _ref.secondTextfieldTextAfter,
       _ref$format = _ref.format,
       format = _ref$format === void 0 ? 'DD.MM.YYYY' : _ref$format,
+      _ref$lang = _ref.lang,
+      lang = _ref$lang === void 0 ? 'ru' : _ref$lang,
       maskWithFormat = _ref.maskWithFormat,
       min = _ref.min,
       max = _ref.max,
@@ -107,19 +109,19 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       _useState6 = _slicedToArray(_useState5, 2),
       isInnerOpen = _useState6[0],
       setIsInnerOpen = _useState6[1];
-    var _useState7 = useState(formatCalendarValue(defaultFirstDate, format)),
+    var _useState7 = useState(formatCalendarValue(defaultFirstDate, format, lang)),
       _useState8 = _slicedToArray(_useState7, 2),
       calendarFirstValue = _useState8[0],
       setCalendarFirstValue = _useState8[1];
-    var _useState9 = useState(formatInputValue(defaultFirstDate, format)),
+    var _useState9 = useState(formatInputValue(defaultFirstDate, format, lang)),
       _useState10 = _slicedToArray(_useState9, 2),
       inputFirstValue = _useState10[0],
       setInputFirstValue = _useState10[1];
-    var _useState11 = useState(formatCalendarValue(defaultSecondDate, format)),
+    var _useState11 = useState(formatCalendarValue(defaultSecondDate, format, lang)),
       _useState12 = _slicedToArray(_useState11, 2),
       calendarSecondValue = _useState12[0],
       setCalendarSecondValue = _useState12[1];
-    var _useState13 = useState(formatInputValue(defaultSecondDate, format)),
+    var _useState13 = useState(formatInputValue(defaultSecondDate, format, lang)),
       _useState14 = _slicedToArray(_useState13, 2),
       inputSecondValue = _useState14[0],
       setInputSecondValue = _useState14[1];
@@ -133,6 +135,7 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         setIsInnerOpen: setIsInnerOpen,
         dateFormatDelimiter: dateFormatDelimiter,
         format: format,
+        lang: lang,
         disabled: disabled,
         readOnly: readOnly,
         maskWithFormat: maskWithFormat,
@@ -151,6 +154,7 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         setIsInnerOpen: setIsInnerOpen,
         dateFormatDelimiter: dateFormatDelimiter,
         format: format,
+        lang: lang,
         disabled: disabled,
         readOnly: readOnly,
         maskWithFormat: maskWithFormat,
@@ -235,13 +239,19 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       });
     }, [opened]);
     useEffect(function () {
-      setCalendarFirstValue(formatCalendarValue(defaultFirstDate, format));
-      setInputFirstValue(formatInputValue(defaultFirstDate, format));
+      setCalendarFirstValue(formatCalendarValue(defaultFirstDate, format, lang));
+      setInputFirstValue(formatInputValue(defaultFirstDate, format, lang));
     }, [defaultFirstDate]);
     useEffect(function () {
-      setCalendarSecondValue(formatCalendarValue(defaultSecondDate, format));
-      setInputSecondValue(formatInputValue(defaultSecondDate, format));
+      setCalendarSecondValue(formatCalendarValue(defaultSecondDate, format, lang));
+      setInputSecondValue(formatInputValue(defaultSecondDate, format, lang));
     }, [defaultSecondDate]);
+    useEffect(function () {
+      setCalendarFirstValue(formatCalendarValue(defaultFirstDate, format, lang));
+      setInputFirstValue(formatInputValue(defaultFirstDate, format, lang));
+      setCalendarSecondValue(formatCalendarValue(defaultSecondDate, format, lang));
+      setInputSecondValue(formatInputValue(defaultSecondDate, format, lang));
+    }, [format, lang]);
     return /*#__PURE__*/React.createElement(Root, _extends({
       ref: rootRef,
       view: view,

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

@@ -1,4 +1,4 @@
-var _excluded = ["className", "opened", "label", "labelPlacement", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "defaultDate", "valueError", "valueSuccess", "format", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "placement", "closeOnOverlayClick", "offset", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur"];
+var _excluded = ["className", "opened", "label", "labelPlacement", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "defaultDate", "valueError", "valueSuccess", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "placement", "closeOnOverlayClick", "offset", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur"];
 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."); }
@@ -46,6 +46,8 @@ export var datePickerRoot = function datePickerRoot(Root) {
       valueSuccess = _ref.valueSuccess,
       _ref$format = _ref.format,
       format = _ref$format === void 0 ? 'DD.MM.YYYY' : _ref$format,
+      _ref$lang = _ref.lang,
+      lang = _ref$lang === void 0 ? 'ru' : _ref$lang,
       maskWithFormat = _ref.maskWithFormat,
       min = _ref.min,
       max = _ref.max,
@@ -77,11 +79,11 @@ export var datePickerRoot = function datePickerRoot(Root) {
       _useState2 = _slicedToArray(_useState, 2),
       isInnerOpen = _useState2[0],
       setIsInnerOpen = _useState2[1];
-    var _useState3 = useState(formatCalendarValue(defaultDate, format)),
+    var _useState3 = useState(formatCalendarValue(defaultDate, format, lang)),
       _useState4 = _slicedToArray(_useState3, 2),
       calendarValue = _useState4[0],
       setCalendarValue = _useState4[1];
-    var _useState5 = useState(formatInputValue(defaultDate, format)),
+    var _useState5 = useState(formatInputValue(defaultDate, format, lang)),
       _useState6 = _slicedToArray(_useState5, 2),
       inputValue = _useState6[0],
       setInputValue = _useState6[1];
@@ -96,6 +98,7 @@ export var datePickerRoot = function datePickerRoot(Root) {
         setIsInnerOpen: setIsInnerOpen,
         dateFormatDelimiter: dateFormatDelimiter,
         format: format,
+        lang: lang,
         disabled: disabled,
         readOnly: readOnly,
         maskWithFormat: maskWithFormat,
@@ -145,9 +148,13 @@ export var datePickerRoot = function datePickerRoot(Root) {
       });
     }, [opened]);
     useEffect(function () {
-      setCalendarValue(formatCalendarValue(defaultDate, format));
-      setInputValue(formatInputValue(defaultDate, format));
+      setCalendarValue(formatCalendarValue(defaultDate, format, lang));
+      setInputValue(formatInputValue(defaultDate, format, lang));
     }, [defaultDate]);
+    useEffect(function () {
+      setCalendarValue(formatCalendarValue(defaultDate, format, lang));
+      setInputValue(formatInputValue(defaultDate, format, lang));
+    }, [format, lang]);
     return /*#__PURE__*/React.createElement(Root, _extends({
       view: view,
       size: size,

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

@@ -7,6 +7,8 @@ export var useDatePicker = function useDatePicker(_ref) {
     setIsInnerOpen = _ref.setIsInnerOpen,
     dateFormatDelimiter = _ref.dateFormatDelimiter,
     format = _ref.format,
+    _ref$lang = _ref.lang,
+    lang = _ref$lang === void 0 ? 'ru' : _ref$lang,
     disabled = _ref.disabled,
     readOnly = _ref.readOnly,
     maskWithFormat = _ref.maskWithFormat,
@@ -37,9 +39,9 @@ export var useDatePicker = function useDatePicker(_ref) {
     if (!format) {
       setCalendarValue(formatCalendarValue(newValue));
     } else if ((newValue === null || newValue === void 0 ? void 0 : newValue.length) === format.length) {
-      setCalendarValue(formatCalendarValue(newValue, format));
+      setCalendarValue(formatCalendarValue(newValue, format, lang));
     }
-    setInputValue(formatInputValue(newValue, format));
+    setInputValue(formatInputValue(newValue, format, lang));
     onChangeValue === null || onChangeValue === void 0 || onChangeValue(event, newValue);
   };
   var handleCommitDate = function handleCommitDate(date, applyFormat, isCalendarValue, dateInfo) {
@@ -52,17 +54,17 @@ export var useDatePicker = function useDatePicker(_ref) {
       return onCommitDate === null || onCommitDate === void 0 ? void 0 : onCommitDate('', false, true);
     }
     if (isCalendarValue) {
-      setCalendarValue(formatCalendarValue(date, format));
-      setInputValue(formatInputValue(date, format));
+      setCalendarValue(formatCalendarValue(date, format, lang));
+      setInputValue(formatInputValue(date, format, lang));
       return onCommitDate === null || onCommitDate === void 0 ? void 0 : onCommitDate(date, false, true, dateInfo);
     }
     var formatString = applyFormat ? format : undefined;
-    var _getDateFromFormat = getDateFromFormat(date, formatString),
+    var _getDateFromFormat = getDateFromFormat(date, formatString, lang),
       newDate = _getDateFromFormat.value,
       isError = _getDateFromFormat.isError,
       isSuccess = _getDateFromFormat.isSuccess;
-    setCalendarValue(formatCalendarValue(newDate, format));
-    setInputValue(formatInputValue(newDate, format));
+    setCalendarValue(formatCalendarValue(newDate, format, lang));
+    setInputValue(formatInputValue(newDate, format, lang));
     onCommitDate === null || onCommitDate === void 0 || onCommitDate(newDate, isError, isSuccess);
   };
   return {