@salutejs/plasma-new-hope 0.93.0 → 0.93.1-canary.1273.9714986596.0

package/styled-components/es/components/Calendar/ui/CalendarHeader/CalendarHeader.styles.js

@@ -1,21 +1,39 @@
 import styled from 'styled-components';
-import { buttonFocus, flexCenter } from '../../mixins';
-import { tokens } from '../../Calendar.tokens';
+import { classes, tokens } from '../../Calendar.tokens';
+import { component, mergeConfig } from '../../../../engines';
+import { iconButtonConfig, iconButtonTokens } from '../../../IconButton';
+import { flexCenter } from '../../mixins';
+import { addFocus } from '../../../../mixins';
+var mergedIconButtonConfig = /*#__PURE__*/mergeConfig(iconButtonConfig);
+var IconButton = /*#__PURE__*/component(mergedIconButtonConfig);
 export var StyledCalendarHeader = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-186pzg3-0"
-})(["padding:1rem 1.5rem 0;font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");display:flex;justify-content:space-between;align-items:center;"], tokens.calendarHeaderFontFamily, tokens.calendarHeaderFontSize, tokens.calendarHeaderFontStyle, tokens.calendarHeaderFontWeightBold, tokens.calendarHeaderFontLetterSpacing, tokens.calendarHeaderFontLineHeight);
-export var StyledHeader = /*#__PURE__*/styled(buttonFocus).withConfig({
+})(["display:flex;justify-content:space-between;align-items:center;padding:var(", ");"], tokens.calendarHeaderWrapperPadding);
+export var StyledHeader = /*#__PURE__*/styled.button.withConfig({
   componentId: "plasma-new-hope__sc-186pzg3-1"
-})(["color:var(", ");cursor:pointer;padding:0.5rem 0;font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");display:flex;justify-content:space-between;align-items:center;"], tokens.calendarContentPrimaryColor, tokens.calendarHeaderFontFamily, tokens.calendarHeaderFontSize, tokens.calendarHeaderFontStyle, tokens.calendarHeaderFontWeightBold, tokens.calendarHeaderFontLetterSpacing, tokens.calendarHeaderFontLineHeight);
-export var StyledHeaderDouble = /*#__PURE__*/styled.h4.withConfig({
+})(["border:none;background-color:transparent;padding:0;outline:none;font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");padding:var(", ");color:var(", ");cursor:pointer;display:flex;gap:var(", ");justify-content:space-between;align-items:center;&:hover,&:active{color:var(", ");}", ";"], tokens.calendarHeaderFontFamily, tokens.calendarHeaderFontSize, tokens.calendarHeaderFontStyle, tokens.calendarHeaderFontWeightBold, tokens.calendarHeaderFontLetterSpacing, tokens.calendarHeaderFontLineHeight, tokens.calendarHeaderPadding, tokens.calendarContentPrimaryColor, tokens.calendarHeaderDateGap, tokens.calendarContentSecondaryColor, /*#__PURE__*/addFocus({
+  outlineSize: '0.063rem',
+  outlineOffset: '-0.125rem',
+  outlineColor: /*#__PURE__*/"var(".concat(tokens.calendarOutlineFocusColor, ")"),
+  outlineRadius: '0.563rem'
+}));
+export var StyledHeaderDate = /*#__PURE__*/styled.span.withConfig({
   componentId: "plasma-new-hope__sc-186pzg3-2"
-})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");margin-top:0;margin-bottom:0;padding:0.5rem 0;flex:1;", ";&:first-of-type{margin-right:3rem;}&:last-of-type{margin-left:3rem;}"], tokens.calendarHeaderFontFamily, tokens.calendarHeaderFontSize, tokens.calendarHeaderFontStyle, tokens.calendarHeaderFontWeightBold, tokens.calendarHeaderFontLetterSpacing, tokens.calendarHeaderFontLineHeight, /*#__PURE__*/String(flexCenter));
+})(["", ";pointer-events:none;"], flexCenter);
 export var StyledArrows = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-186pzg3-3"
-})(["padding:0.5rem 0;width:var(", ");display:flex;justify-content:space-between;align-items:center;"], tokens.calendarHeaderArrowContainerWidth);
-export var StyledArrow = /*#__PURE__*/styled(buttonFocus).withConfig({
+})(["display:flex;gap:var(", ");padding:var(", ");"], tokens.calendarHeaderArrowGap, tokens.calendarHeaderArrowPadding);
+
+// NOTE: переопределение токенов IconButton
+export var StyledArrow = /*#__PURE__*/styled(IconButton).withConfig({
   componentId: "plasma-new-hope__sc-186pzg3-4"
-})(["display:flex;cursor:pointer;"]);
+})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], iconButtonTokens.iconButtonColor, tokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, tokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, tokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, tokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, tokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive, tokens.iconButtonBackgroundColorActive, iconButtonTokens.iconButtonHeight, tokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, tokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, tokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, tokens.iconButtonRadius, iconButtonTokens.iconButtonFocusColor, tokens.iconButtonFocusColor);
 export var StyledNavigation = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-186pzg3-5"
-})(["width:100%;", ";"], /*#__PURE__*/String(flexCenter));
+})(["width:100%;", ";"], flexCenter);
+export var StyledDoubleHeaderWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-186pzg3-6"
+})(["width:100%;display:grid;grid-template-columns:var(", ") 1fr var(", ");grid-template-areas:'a b c';", "{grid-area:a;}&.", " ", "{grid-area:c;}"], tokens.iconButtonWidth, tokens.iconButtonWidth, StyledArrow, classes.doubleHeaderLastDateWrapper, StyledArrow);
+export var StyledHeaderDouble = /*#__PURE__*/styled.h4.withConfig({
+  componentId: "plasma-new-hope__sc-186pzg3-7"
+})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");grid-area:b;justify-self:center;cursor:pointer;display:flex;gap:var(", ");justify-content:space-between;align-items:center;margin:0;", ";"], tokens.calendarHeaderFontFamily, tokens.calendarHeaderFontSize, tokens.calendarHeaderFontStyle, tokens.calendarHeaderFontWeightBold, tokens.calendarHeaderFontLetterSpacing, tokens.calendarHeaderFontLineHeight, tokens.calendarHeaderDateGap, /*#__PURE__*/String(flexCenter));

package/styled-components/es/components/Calendar/ui/CalendarMonths/CalendarMonths.js

@@ -60,7 +60,7 @@ export var CalendarMonths = function CalendarMonths(_ref) {
         isCurrent = _ref2.isCurrent,
         monthFullName = _ref2.monthFullName;
       var selectedClass = isSelected ? classes.selectedItem : undefined;
-      var currentClass = !isSelected && isCurrent ? classes.currentItem : undefined;
+      var currentClass = isCurrent ? classes.currentItem : undefined;
       return /*#__PURE__*/React.createElement(StyledMonthRoot, {
         id: "month-test-".concat(i, "-").concat(j),
         className: cx(selectedClass, currentClass, classes.selectableItem),

package/styled-components/es/components/Calendar/ui/CalendarMonths/CalendarMonths.styles.js

@@ -1,22 +1,36 @@
 import styled from 'styled-components';
-import { flexCenter, selectedMixin } from '../../mixins';
-import { tokens } from '../../Calendar.tokens';
+import { classes, tokens } from '../../Calendar.tokens';
 import { addFocus } from '../../../../mixins';
+import { addSelected, flexCenter } from '../../mixins';
 export var StyledCalendarMonths = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-mx5ps9-0"
-})(["padding:0.5rem 1.5rem 1.5rem;box-sizing:border-box;"]);
+})(["padding:var(", ");box-sizing:border-box;"], tokens.calendarMonthsPadding);
 export var StyledFlex = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-mx5ps9-1"
 })(["", ";"], /*#__PURE__*/String(flexCenter));
 export var StyledMonth = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-mx5ps9-2"
-})(["border-radius:0.438rem;", ";"], /*#__PURE__*/String(flexCenter));
-var selectable = /*#__PURE__*/"\n    ".concat(addFocus({
-  outlineSize: '0.063rem',
-  outlineOffset: '-0.063rem',
-  outlineColor: "var(".concat(tokens.calendarOutlineFocusColor, ")"),
-  outlineRadius: '0.563rem'
-}), ";\n\n    --calendar_private-selected-min-width: 5.25rem;\n    --calendar_private-selected-min-height: 3.25rem;\n    --calendar_private-selected-background: var(").concat(tokens.calendarSelectedItemBackground, ");\n    --calendar_private-selected-color: var(").concat(tokens.calendarSelectedItemColor, ");\n    --calendar_private-selectable-background-hover: var(").concat(tokens.calendarSelectableItemBackgroundHover, ");\n    --calendar_private-current-border-color: var(").concat(tokens.calendarCurrentItemBorderColor, ");\n    --calendar_private-current-background-hover: var(").concat(tokens.calendarCurrentItemBackgroundHover, ");\n    --calendar_private-current-color-hover: var(").concat(tokens.calendarCurrentItemColorHover, ");\n    --calendar_private-current-child-background-hover: var(").concat(tokens.calendarCurrentItemChildBackgroundHover, ");\n    --calendar_private-active-background: var(").concat(tokens.calendarActiveItemBackground, ");\n    --calendar_private-active-color-hover: var(").concat(tokens.calendarActiveItemColor, ");\n    --calendar_private-hovered-background: var(").concat(tokens.calendarHoveredItemBackground, ");\n    --calendar_private-hovered-color: var(").concat(tokens.calendarHoveredItemColor, ");\n\n    ").concat( /*#__PURE__*/String(selectedMixin), ";\n");
+})(["border-radius:calc(var(", ") - 0.125rem);", ";"], tokens.calendarMonthItemBorderRadius, /*#__PURE__*/String(flexCenter));
 export var StyledMonthRoot = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-mx5ps9-3"
-})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");position:relative;box-sizing:border-box;min-height:3.5rem;border-radius:var(", ");flex:1;", ";", ";"], tokens.calendarMonthFontFamily, tokens.calendarMonthFontSize, tokens.calendarMonthFontStyle, tokens.calendarMonthFontWeight, tokens.calendarMonthFontLetterSpacing, tokens.calendarMonthFontLineHeight, tokens.calendarItemBorderRadius, /*#__PURE__*/String(flexCenter), /*#__PURE__*/String(selectable));
+})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");position:relative;box-sizing:border-box;min-height:var(", ");min-width:var(", ");border-radius:var(", ");", ";", ";", ";&.", "{", ";}"], tokens.calendarMonthFontFamily, tokens.calendarMonthFontSize, tokens.calendarMonthFontStyle, tokens.calendarMonthFontWeight, tokens.calendarMonthFontLetterSpacing, tokens.calendarMonthFontLineHeight, tokens.calendarMonthItemHeight, tokens.calendarMonthItemWidth, tokens.calendarMonthItemBorderRadius, /*#__PURE__*/String(flexCenter), /*#__PURE__*/addSelected({
+  minWidth: /*#__PURE__*/"calc(var(".concat(tokens.calendarMonthItemWidth, ") - 0.25rem)"),
+  minHeight: /*#__PURE__*/"calc(var(".concat(tokens.calendarMonthItemHeight, ") - 0.25rem)"),
+  selectedFontWeight: /*#__PURE__*/"var(".concat(tokens.calendarMonthSelectedFontWeight, ")"),
+  selectedBackground: /*#__PURE__*/"var(".concat(tokens.calendarSelectedItemBackground, ")"),
+  selectedColor: /*#__PURE__*/"var(".concat(tokens.calendarSelectedItemColor, ")"),
+  selectableBackgroundHover: /*#__PURE__*/"var(".concat(tokens.calendarSelectableItemBackgroundHover, ")"),
+  currentBorderColor: /*#__PURE__*/"var(".concat(tokens.calendarCurrentItemBorderColor, ")"),
+  activeBackground: /*#__PURE__*/"var(".concat(tokens.calendarActiveItemBackground, ")"),
+  activeColor: /*#__PURE__*/"var(".concat(tokens.calendarActiveItemColor, ")")
+}), /*#__PURE__*/addFocus({
+  outlineSize: '0.063rem',
+  outlineOffset: '-0.125rem',
+  outlineColor: /*#__PURE__*/"var(".concat(tokens.calendarOutlineFocusColor, ")"),
+  outlineRadius: /*#__PURE__*/"calc(var(".concat(tokens.calendarMonthItemBorderRadius, ") + 0.125rem)")
+}), classes.currentItem, /*#__PURE__*/addFocus({
+  outlineSize: '0.063rem',
+  outlineOffset: '-0.1875rem',
+  outlineColor: /*#__PURE__*/"var(".concat(tokens.calendarOutlineFocusColor, ")"),
+  outlineRadius: /*#__PURE__*/"calc(var(".concat(tokens.calendarMonthItemBorderRadius, ") + 0.125rem)")
+}));

package/styled-components/es/components/Calendar/ui/CalendarYears/CalendarYears.js

@@ -59,7 +59,7 @@ export var CalendarYears = function CalendarYears(_ref) {
         isSelected = _ref2.isSelected,
         isCurrent = _ref2.isCurrent;
       var selectedClass = isSelected ? classes.selectedItem : undefined;
-      var currentClass = !isSelected && isCurrent ? classes.currentItem : undefined;
+      var currentClass = isCurrent ? classes.currentItem : undefined;
       return /*#__PURE__*/React.createElement(StyledYearRoot, {
         className: cx(selectedClass, currentClass, classes.selectableItem),
         ref: function ref(element) {

package/styled-components/es/components/Calendar/ui/CalendarYears/CalendarYears.styles.js

@@ -1,24 +1,36 @@
 import styled from 'styled-components';
-import { flexCenter, selectedMixin } from '../../mixins';
-import { tokens } from '../../Calendar.tokens';
+import { classes, tokens } from '../../Calendar.tokens';
 import { addFocus } from '../../../../mixins';
+import { addSelected, flexCenter } from '../../mixins';
 export var StyledCalendarYears = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-153qwc7-0"
-})(["padding:0.5rem 1.5rem 1.5rem;box-sizing:border-box;"]);
+})(["padding:var(", ");box-sizing:border-box;"], tokens.calendarYearsPadding);
 export var StyledFlex = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-153qwc7-1"
 })(["", ";"], /*#__PURE__*/String(flexCenter));
 export var StyledYear = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-153qwc7-2"
-})(["border-radius:0.438rem;", ";"], /*#__PURE__*/String(flexCenter));
-var selectable = function selectable() {
-  return "\n    ".concat(addFocus({
-    outlineSize: '0.063rem',
-    outlineOffset: '-0.063rem',
-    outlineColor: "var(".concat(tokens.calendarOutlineFocusColor, ")"),
-    outlineRadius: '0.563rem'
-  }), ";\n\n    --calendar_private-selected-min-width: 5.25rem;\n    --calendar_private-selected-min-height: 3.25rem;\n    --calendar_private-selected-background: var(").concat(tokens.calendarSelectedItemBackground, ");\n    --calendar_private-selected-color: var(").concat(tokens.calendarSelectedItemColor, ");\n    --calendar_private-selectable-background-hover: var(").concat(tokens.calendarSelectableItemBackgroundHover, ");\n    --calendar_private-current-border-color: var(").concat(tokens.calendarCurrentItemBorderColor, ");\n    --calendar_private-current-background-hover: var(").concat(tokens.calendarCurrentItemBackgroundHover, ");\n    --calendar_private-current-color-hover: var(").concat(tokens.calendarCurrentItemColorHover, ");\n    --calendar_private-current-child-background-hover: var(").concat(tokens.calendarCurrentItemChildBackgroundHover, ");\n    --calendar_private-active-background: var(").concat(tokens.calendarActiveItemBackground, ");\n    --calendar_private-active-color: var(").concat(tokens.calendarActiveItemColor, ");\n    --calendar_private-hovered-background: var(").concat(tokens.calendarHoveredItemBackground, ");\n    --calendar_private-hovered-color: var(").concat(tokens.calendarHoveredItemColor, ");\n    \n    ").concat(String(selectedMixin), ";\n");
-};
+})(["border-radius:calc(var(", ") - 0.125rem);", ";"], tokens.calendarYearItemBorderRadius, /*#__PURE__*/String(flexCenter));
 export var StyledYearRoot = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-153qwc7-3"
-})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");position:relative;box-sizing:border-box;min-height:3.5rem;border-radius:var(", ");flex:1;", ";", ";"], tokens.calendarYearFontFamily, tokens.calendarYearFontSize, tokens.calendarYearFontStyle, tokens.calendarYearFontWeight, tokens.calendarYearFontLetterSpacing, tokens.calendarYearFontLineHeight, tokens.calendarItemBorderRadius, /*#__PURE__*/String(flexCenter), /*#__PURE__*/selectable());
+})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");position:relative;box-sizing:border-box;min-height:var(", ");min-width:var(", ");border-radius:var(", ");", ";", ";", ";&.", "{", ";}"], tokens.calendarYearFontFamily, tokens.calendarYearFontSize, tokens.calendarYearFontStyle, tokens.calendarYearFontWeight, tokens.calendarYearFontLetterSpacing, tokens.calendarYearFontLineHeight, tokens.calendarYearItemHeight, tokens.calendarYearItemWidth, tokens.calendarYearItemBorderRadius, /*#__PURE__*/String(flexCenter), /*#__PURE__*/addSelected({
+  minWidth: /*#__PURE__*/"calc(var(".concat(tokens.calendarYearItemWidth, ") - 0.25rem)"),
+  minHeight: /*#__PURE__*/"calc(var(".concat(tokens.calendarYearItemHeight, ") - 0.25rem)"),
+  selectedFontWeight: /*#__PURE__*/"var(".concat(tokens.calendarYearSelectedFontWeight, ")"),
+  selectedBackground: /*#__PURE__*/"var(".concat(tokens.calendarSelectedItemBackground, ")"),
+  selectedColor: /*#__PURE__*/"var(".concat(tokens.calendarSelectedItemColor, ")"),
+  selectableBackgroundHover: /*#__PURE__*/"var(".concat(tokens.calendarSelectableItemBackgroundHover, ")"),
+  currentBorderColor: /*#__PURE__*/"var(".concat(tokens.calendarCurrentItemBorderColor, ")"),
+  activeBackground: /*#__PURE__*/"var(".concat(tokens.calendarActiveItemBackground, ")"),
+  activeColor: /*#__PURE__*/"var(".concat(tokens.calendarActiveItemColor, ")")
+}), /*#__PURE__*/addFocus({
+  outlineSize: '0.063rem',
+  outlineOffset: '-0.125rem',
+  outlineColor: /*#__PURE__*/"var(".concat(tokens.calendarOutlineFocusColor, ")"),
+  outlineRadius: /*#__PURE__*/"calc(var(".concat(tokens.calendarYearItemBorderRadius, ") + 0.125rem)")
+}), classes.currentItem, /*#__PURE__*/addFocus({
+  outlineSize: '0.063rem',
+  outlineOffset: '-0.1875rem',
+  outlineColor: /*#__PURE__*/"var(".concat(tokens.calendarOutlineFocusColor, ")"),
+  outlineRadius: /*#__PURE__*/"calc(var(".concat(tokens.calendarYearItemBorderRadius, ") + 0.125rem)")
+}));

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

@@ -10,8 +10,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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, { Children, forwardRef, useEffect, useRef, useState } from 'react';
 import { safeUseId, useForkRef } from '@salutejs/plasma-core';
-import { cx } from '../../utils';
-import { getPlacements } from '../Dropdown/utils';
+import { cx, getPlacements } from '../../utils';
 import { getChildren, getNewSelected, getValues } from '../Select/utils';
 import { useKeyNavigation } from '../Select/hooks';
 import { useDidMountEffect, useForceUpdate } from '../../hooks';

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

@@ -0,0 +1,150 @@
+---
+id: datepicker
+title: DatePicker
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# DatePicker
+<Description name="DatePicker" />
+<PropsTable name="DatePicker" exclude={['css']} />
+
+## Использование
+Компонент `DatePicker` представляет собой поле ввода даты с выпадающим календарем.
+
+Размер `DatePicker` задаётся с помощью свойства `size`. 
+Возможные значения свойтсва: `"l"`, `"m"`, `"s"`, `"xs"`.
+
+```tsx live
+import React, {useState} from 'react';
+import { DatePicker, IconButton } from '@salutejs/{{ package }}';
+import { IconDone } from '@salutejs/plasma-icons';
+
+export function App() {
+    return (
+        <div style={{ height: "450px" }}>
+            <DatePicker
+                label="Лейбл"
+                leftHelper="Подсказка к полю"
+                placeholder="Введите дату"
+                contentRight={<IconDone size="s" />}
+                size="l"
+            />
+        </div>
+    );
+}
+```
+
+### Формат даты
+Формат даты задается с помощью свойства `format`. 
+При выборе даты в календаре или вводе даты через поле ввода, дата будет приводиться к заданному формату. 
+Свойство `maskWithFormat` позволяет маскировать ввод:
+
+```tsx live
+import React, {useState} from 'react';
+import { DatePicker, IconButton } from '@salutejs/{{ package }}';
+import { IconDone } from '@salutejs/plasma-icons';
+
+export function App() {
+    return (
+        <div style={{ height: "450px" }}>
+            <DatePicker
+                label="Лейбл"
+                leftHelper="Подсказка к полю"
+                placeholder="Введите дату"
+                format="DD-MM-YYYY"
+                maskWithFormat
+                contentRight={<IconDone size="s" />}
+            />
+        </div>
+    );
+}
+```
+
+### Валидация и индикация успешного ввода даты.
+За индикацию ошибки или успешного ввода отвечают `valueError`, `valueSuccess`.
+В данном примере валидация происходит при нажатии клавиши `Enter` после ввода значений:
+
+```tsx live
+import React, {useState} from 'react';
+import { DatePicker, IconButton } from '@salutejs/{{ package }}';
+import { IconDone } from '@salutejs/plasma-icons';
+
+export function App() {
+    const [isOpen, setIsOpen] = useState(false);
+    const [error, setError] = useState(false);
+    const [success, setSuccess] = useState(false);
+
+    const handleCommitDate = (newDate: Date | string, dateError?: boolean, dateSuccess?: boolean) => {
+        if (dateError) {
+            setError(true);
+            return;
+        }
+
+        if (dateSuccess) {
+            setSuccess(true);
+        }
+
+        setIsOpen(false);
+    };
+
+    return (
+        <div style={{ height: "450px" }}>
+            <DatePicker
+                isOpen={isOpen}
+                label="Лейбл"
+                leftHelper="Подсказка к полю"
+                placeholder="Введите дату"
+                format="DD-MM-YYYY"
+                maskWithFormat
+                valueError={error}
+                valueSuccess={success}
+                contentRight={<IconDone size="s" />}
+                onChangeValue={() => {
+                    setError(false);
+                    setSuccess(false);
+                }}
+                onCommitDate={handleCommitDate}
+            />
+        </div>
+    );
+}
+```
+
+## DatePickerRange
+<Description name="DatePickerRange" />
+<PropsTable name="DatePickerRange" exclude={['css']} />
+
+## Использование
+Компонент `DatePickerRange` представляет собой `Range` с выпадающим календарем.
+Календарь может быть одиночным или двойным. За это отвечает свойство `isDoubleCalendar`.
+
+```tsx live
+import React, {useState} from 'react';
+import { DatePickerRange, IconButton } from '@salutejs/{{ package }}';
+import { IconDone } from '@salutejs/plasma-icons';
+
+export function App() {
+    const ActionButton = () => {
+        return (
+            <IconButton view="clear" size="l">
+                <IconDone size="s" />
+            </IconButton>
+        );
+    };
+
+    return (
+        <div style={{ height: "500px" }}>
+            <DatePickerRange
+                size="l"
+                label="Лейбл"
+                leftHelper="Подсказка к полю"
+                firstPlaceholder="Введите дату 1"
+                secondPlaceholder="Введите дату 2"
+                contentRight={<ActionButton />}
+                isDoubleCalendar
+            />
+        </div>
+    );
+}
+```

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

@@ -0,0 +1,181 @@
+export var classes = {
+  datePickerError: 'date-picker-error',
+  datePickerSuccess: 'date-picker-success',
+  datePickerRoot: 'date-picker-root'
+};
+export var tokens = {
+  width: '--plasma-date-picker-width',
+  /** Токены полей ввода в рендже */
+  background: '--plasma-date-picker_range-background',
+  backgroundError: '--plasma-date-picker_range-background-error',
+  backgroundSuccess: '--plasma-date-picker_range-background-success',
+  backgroundReadOnly: '--plasma-date-picker_range-background-readonly',
+  borderRadius: '--plasma-date-picker_range-border-radius',
+  borderWidth: '--plasma-date-picker_range-border-width',
+  borderColor: '--plasma-date-picker_range-border-color',
+  borderColorHover: '--plasma-date-picker_range-border-color-hover',
+  borderColorFocus: '--plasma-date-picker_range-border-color-focus',
+  borderColorError: '--plasma-date-picker_range-border-color-error',
+  borderColorSuccess: '--plasma-date-picker_range-border-color-success',
+  borderColorReadOnly: '--plasma-date-picker_range-border-color-readonly',
+  /** Токены разделителя */
+  dividerColor: '--plasma-date-picker_range__divider-color',
+  dividerColorReadOnly: '--plasma-date-picker_range__divider-color-readonly',
+  dividerPadding: '--plasma-date-picker_range__divider-padding',
+  dividerFontFamily: '--plasma-date-picker_range__divider-font-family',
+  dividerFontStyle: '--plasma-date-picker_range__divider-font-style',
+  dividerFontSize: '--plasma-date-picker_range__divider-font-size',
+  dividerFontWeight: '--plasma-date-picker_range__divider-font-weight',
+  dividerLetterSpacing: '--plasma-date-picker_range__divider-letter-spacing',
+  dividerLineHeight: '--plasma-date-picker_range__divider-line-height',
+  /** Токены слотов для контента в рендже */
+  leftContentMargin: '--plasma-date-picker_range__left-content-margin',
+  rightContentMargin: '--plasma-date-picker_range__right-content-margin',
+  /** Токены лейбла */
+  labelColor: '--plasma-date-picker__label-color',
+  labelColorReadOnly: '--plasma-date-picker__label-color-readonly',
+  labelOffset: '--plasma-date-picker__label-offset',
+  labelFontFamily: '--plasma-date-picker__label-font-family',
+  labelFontStyle: '--plasma-date-picker__label-font-style',
+  labelFontSize: '--plasma-date-picker__label-font-size',
+  labelFontWeight: '--plasma-date-picker__label-font-weight',
+  labelLetterSpacing: '--plasma-date-picker__label-letter-spacing',
+  labelLineHeight: '--plasma-date-picker__label-line-height',
+  /** Токены вспомогательного текста */
+  leftHelperColor: '--plasma-date-picker__left-helper-color',
+  leftHelperColorReadOnly: '--plasma-date-picker__left-helper-color-readonly',
+  leftHelperOffset: '--plasma-date-picker__left-helper-offset',
+  leftHelperFontFamily: '--plasma-date-picker__left-helper-font-family',
+  leftHelperFontStyle: '--plasma-date-picker__left-helper-font-style',
+  leftHelperFontSize: '--plasma-date-picker__left-helper-font-size',
+  leftHelperFontWeight: '--plasma-date-picker__left-helper-font-weight',
+  leftHelperLetterSpacing: '--plasma-date-picker__left-helper-letter-spacing',
+  leftHelperLineHeight: '--plasma-date-picker__left-helper-line-height',
+  /** Прозрачность для всего компонента в состоянии disabled */
+  disabledOpacity: '--plasma-date-picker-disabled-opacity',
+  /** Цвет обводки поля ввода при фокусе */
+  focusColor: '--plasma-date-picker-focus-color',
+  /** Токены полей ввода */
+  textFieldColor: '--plasma-date-picker-textfield-color',
+  textFieldFocusColor: '--plasma-date-picker-textfield-focus-color',
+  textFieldPlaceholderColor: '--plasma-date-picker-textfield-placeholder-color',
+  textFieldCaretColor: '--plasma-date-picker-textfield-caret-color',
+  textFieldBackgroundColor: '--plasma-date-picker-textfield-background-color',
+  textFieldBackgroundColorHover: '--plasma-date-picker-textfield-background-color-hover',
+  textFieldBackgroundColorFocus: '--plasma-date-picker-textfield-background-color-focus',
+  textFieldBackgroundErrorColor: '--plasma-date-picker-textfield-background-color-error',
+  textFieldBackgroundErrorColorHover: '--plasma-date-picker-textfield-background-color-error-hover',
+  textFieldBackgroundErrorColorFocus: '--plasma-date-picker-textfield-background-color-error-focus',
+  textFieldBackgroundSuccessColor: '--plasma-date-picker-textfield-background-color-success',
+  textFieldBackgroundSuccessColorHover: '--plasma-date-picker-textfield-background-color-success-hover',
+  textFieldBackgroundSuccessColorFocus: '--plasma-date-picker-textfield-background-color-success-focus',
+  textFieldBorderColor: '--plasma-date-picker-textfield-border-color',
+  textFieldBorderColorHover: '--plasma-date-picker-textfield-border-color-hover',
+  textFieldBorderColorFocus: '--plasma-date-picker-textfield-border-color-focus',
+  textFieldBorderColorError: '--plasma-date-picker-textfield-border-color-error',
+  textFieldBorderColorErrorHover: '--plasma-date-picker-textfield-border-color-error-hover',
+  textFieldBorderColorErrorFocus: '--plasma-date-picker-textfield-border-color-error-focus',
+  textFieldBorderColorSuccess: '--plasma-date-picker-textfield-border-color-success',
+  textFieldBorderColorSuccessHover: '--plasma-date-picker-textfield-border-color-success-hover',
+  textFieldBorderColorSuccessFocus: '--plasma-date-picker-textfield-border-color-success-focus',
+  textFieldColorReadOnly: '--plasma-date-picker-textfield-color-readonly',
+  textFieldBackgroundColorReadOnly: '--plasma-date-picker-textfield-background-color-readonly',
+  textFieldBorderColorReadOnly: '--plasma-date-picker-textfield-border-color-readonly',
+  textFieldPlaceholderColorReadOnly: '--plasma-date-picker-textfield-placeholder-color-readonly',
+  textFieldHeight: '--plasma-date-picker-textfield-height',
+  textFieldBorderWidth: '--plasma-date-picker-textfield-border-width',
+  textFieldBorderRadius: '--plasma-date-picker-textfield-border-radius',
+  textFieldPadding: '--plasma-date-picker-textfield-padding',
+  textFieldLeftContentMargin: '--plasma-date-picker-textfield__left-content-margin',
+  textFieldRightContentMargin: '--plasma-date-picker-textfield__right-content-margin',
+  textFieldFontFamily: '--plasma-date-picker-textfield-font-family',
+  textFieldFontStyle: '--plasma-date-picker-textfield-font-style',
+  textFieldFontSize: '--plasma-date-picker-textfield-font-size',
+  textFieldFontWeight: '--plasma-date-picker-textfield-font-weight',
+  textFieldLetterSpacing: '--plasma-date-picker-textfield-letter-spacing',
+  textFieldLineHeight: '--plasma-date-picker-textfield-line-height',
+  textFieldTextBeforeColor: '--plasma-date-picker-textfield__before-text-color',
+  textFieldTextAfterColor: '--plasma-date-picker-textfield__after-text-color',
+  textFieldTextBeforeMargin: '--plasma-date-picker-textfield__before-text-margin',
+  textFieldTextAfterMargin: '--plasma-date-picker-textfield__after-text-margin',
+  /** Токены календаря */
+  calendarPaddingTop: '--plasma-date-picker-calendar-padding-top',
+  calendarShadow: '--plasma-date-picker-calendar-shadow',
+  calendarBorderRadius: '--plasma-date-picker-calendar-border-radius',
+  calendarWidth: '--plasma-date-picker-calendar-width',
+  calendarHeight: '--plasma-date-picker-calendar-height',
+  calendarYearsPadding: '--plasma-date-picker-calendar__years-padding',
+  calendarYearItemBorderRadius: '--plasma-date-picker-calendar__year-item-border-radius',
+  calendarYearItemWidth: '--plasma-date-picker-calendar__year-item-width',
+  calendarYearItemHeight: '--plasma-date-picker-calendar__year-item-height',
+  calendarYearFontFamily: '--plasma-date-picker-calendar__year-font-family',
+  calendarYearFontSize: '--plasma-date-picker-calendar__year-font-size',
+  calendarYearFontStyle: '--plasma-date-picker-calendar__year-font-style',
+  calendarYearFontLetterSpacing: '--plasma-date-picker-calendar__year-letter-spacing',
+  calendarYearFontLineHeight: '--plasma-date-picker-calendar__year-line-height',
+  calendarYearFontWeight: '--plasma-date-picker-calendar__year-font-weight',
+  calendarYearSelectedFontWeight: '--plasma-date-picker-calendar__year-selected-font-weight',
+  calendarMonthsPadding: '--plasma-date-picker-calendar__months-padding',
+  calendarMonthItemBorderRadius: '--plasma-date-picker-calendar__month-item-border-radius',
+  calendarMonthItemWidth: '--plasma-date-picker-calendar__month-item-width',
+  calendarMonthItemHeight: '--plasma-date-picker-calendar__month-item-height',
+  calendarMonthFontFamily: '--plasma-date-picker-calendar__month-font-family',
+  calendarMonthFontSize: '--plasma-date-picker-calendar__month-font-size',
+  calendarMonthFontStyle: '--plasma-date-picker-calendar__month-font-style',
+  calendarMonthFontLetterSpacing: '--plasma-date-picker-calendar__month-letter-spacing',
+  calendarMonthFontLineHeight: '--plasma-date-picker-calendar__month-line-height',
+  calendarMonthFontWeight: '--plasma-date-picker-calendar__month-font-weight',
+  calendarMonthSelectedFontWeight: '--plasma-date-picker-calendar__month-selected-font-weight',
+  calendarDaysPadding: '--plasma-date-picker-calendar__days-padding',
+  calendarDayItemBorderRadius: '--plasma-date-picker-calendar__day-item-border-radius',
+  calendarDayItemWidth: '--plasma-date-picker-calendar__day-item-width',
+  calendarDayItemHeight: '--plasma-date-picker-calendar__day-item-height',
+  calendarDayFontFamily: '--plasma-date-picker-calendar__day-font-family',
+  calendarDayFontSize: '--plasma-date-picker-calendar__day-font-size',
+  calendarDayFontStyle: '--plasma-date-picker-calendar__day-font-style',
+  calendarDayFontLetterSpacing: '--plasma-date-picker-calendar__day-letter-spacing',
+  calendarDayFontLineHeight: '--plasma-date-picker-calendar__day-line-height',
+  calendarDayFontWeight: '--plasma-date-picker-calendar__day-font-weight',
+  calendarDaySelectedFontWeight: '--plasma-date-picker-calendar__day-selected-font-weight',
+  calendarDayOfWeekColor: '--plasma-date-picker-calendar__day-of-week-color',
+  calendarHeaderWrapperPadding: '--plasma-date-picker-calendar__header-wrapper-padding',
+  calendarHeaderArrowGap: '--plasma-date-picker-calendar__header-arrow-gap',
+  calendarHeaderArrowPadding: '--plasma-date-picker-calendar__header-arrow-padding',
+  calendarHeaderPadding: '--plasma-date-picker-calendar__header-padding',
+  calendarHeaderDateGap: '--plasma-date-picker-calendar__header-date-gap',
+  calendarHeaderFontFamily: '--plasma-date-picker-calendar__header-font-family',
+  calendarHeaderFontSize: '--plasma-date-picker-calendar__header-font-size',
+  calendarHeaderFontStyle: '--plasma-date-picker-calendar__header-font-style',
+  calendarHeaderFontLetterSpacing: '--plasma-date-picker-calendar__header-letter-spacing',
+  calendarHeaderFontLineHeight: '--plasma-date-picker-calendar__header-line-height',
+  calendarHeaderFontWeight: '--plasma-date-picker-calendar__header-font-weight',
+  calendarHeaderFontWeightBold: '--plasma-date-picker-calendar__header-font-weight-bold',
+  iconButtonColor: '--plasma-date-picker-icon-button__color',
+  iconButtonBackgroundColor: '--plasma-date-picker-icon-button__background-color',
+  iconButtonColorHover: '--plasma-date-picker-icon-button__color-hover',
+  iconButtonBackgroundColorHover: '--plasma-date-picker-icon-button__background-color-hover',
+  iconButtonColorActive: '--plasma-date-picker-icon-button__color-active',
+  iconButtonBackgroundColorActive: '--plasma-date-picker-icon-button__background-color-active',
+  iconButtonHeight: '--plasma-date-picker-icon-button__height',
+  iconButtonWidth: '--plasma-date-picker-icon-button__width',
+  iconButtonPadding: '--plasma-date-picker-icon-button__padding',
+  iconButtonRadius: '--plasma-date-picker-icon-button__radius',
+  iconButtonFocusColor: '--plasma-date-picker-icon-button__focus-color',
+  calendarBackgroundColor: '--plasma-date-picker-calendar__background-color',
+  calendarSelectedItemBackground: '--plasma-date-picker-calendar__selected-item-background',
+  calendarSelectedItemColor: '--plasma-date-picker-calendar__selected-item-color',
+  calendarSelectableItemBackgroundHover: '--plasma-date-picker-calendar__selectable-item-background-hover',
+  calendarCurrentItemBorderColor: '--plasma-date-picker-calendar__current-item-border-color',
+  calendarCurrentItemBackgroundHover: '--plasma-date-picker-calendar__current-item-background-hover',
+  calendarCurrentItemColorHover: '--plasma-date-picker-calendar__current-item-color-hover',
+  calendarCurrentItemChildBackgroundHover: '--plasma-date-picker-calendar__current-item-child-background-hover',
+  calendarActiveItemBackground: '--plasma-date-picker-calendar__active-item-background',
+  calendarActiveItemColor: '--plasma-date-picker-calendar__active-item-color',
+  calendarHoveredItemBackground: '--plasma-date-picker-calendar__hovered-item-background',
+  calendarHoveredItemColor: '--plasma-date-picker-calendar__hovered-item-color',
+  calendarSeparatorBackground: '--plasma-date-picker-calendar__separator-background',
+  calendarRangeBackground: '--plasma-date-picker-calendar__range-background',
+  calendarOutlineFocusColor: '--plasma-date-picker-calendar__outline-focus-color',
+  calendarContentPrimaryColor: '--plasma-date-picker-calendar__content-primary-color',
+  calendarContentSecondaryColor: '--plasma-date-picker-calendar__content-secondary-color'
+};

package/styled-components/es/components/DatePicker/DatePickerBase.styles.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import { calendarBaseConfig, calendarBaseTokens } from '../Calendar';
+import { component, mergeConfig } from '../../engines';
+import { tokens } from './DatePicker.tokens';
+var mergedCalendarConfig = /*#__PURE__*/mergeConfig(calendarBaseConfig);
+var Calendar = /*#__PURE__*/component(mergedCalendarConfig);
+export var baseCalendarTokens = /*#__PURE__*/"\n    padding-top: var(".concat(tokens.calendarPaddingTop, ");\n    box-shadow: var(").concat(tokens.calendarShadow, ");\n    border-radius: var(").concat(tokens.calendarBorderRadius, ");\n\n    ").concat(calendarBaseTokens.calendarBackgroundColor, ": var(").concat(tokens.calendarBackgroundColor, ");\n    ").concat(calendarBaseTokens.calendarSelectedItemBackground, ": var(").concat(tokens.calendarSelectedItemBackground, ");\n    ").concat(calendarBaseTokens.calendarSelectedItemColor, ": var(").concat(tokens.calendarSelectedItemColor, ");\n    ").concat(calendarBaseTokens.calendarSelectableItemBackgroundHover, ": var(").concat(tokens.calendarSelectableItemBackgroundHover, ");\n    ").concat(calendarBaseTokens.calendarCurrentItemBorderColor, ": var(").concat(tokens.calendarCurrentItemBorderColor, ");\n    ").concat(calendarBaseTokens.calendarCurrentItemBackgroundHover, ": var(").concat(tokens.calendarCurrentItemBackgroundHover, ");\n    ").concat(calendarBaseTokens.calendarCurrentItemColorHover, ": var(").concat(tokens.calendarCurrentItemColorHover, ");\n    ").concat(calendarBaseTokens.calendarCurrentItemChildBackgroundHover, ": var(").concat(tokens.calendarCurrentItemChildBackgroundHover, ");\n    ").concat(calendarBaseTokens.calendarActiveItemBackground, ": var(").concat(tokens.calendarActiveItemBackground, ");\n    ").concat(calendarBaseTokens.calendarActiveItemColor, ": var(").concat(tokens.calendarActiveItemColor, ");\n    ").concat(calendarBaseTokens.calendarHoveredItemBackground, ": var(").concat(tokens.calendarHoveredItemBackground, ");\n    ").concat(calendarBaseTokens.calendarHoveredItemColor, ": var(").concat(tokens.calendarHoveredItemColor, ");\n    ").concat(calendarBaseTokens.calendarRangeBackground, ": var(").concat(tokens.calendarRangeBackground, ");\n    ").concat(calendarBaseTokens.calendarOutlineFocusColor, ": var(").concat(tokens.calendarOutlineFocusColor, ");\n    ").concat(calendarBaseTokens.calendarContentPrimaryColor, ": var(").concat(tokens.calendarContentPrimaryColor, ");\n    ").concat(calendarBaseTokens.calendarContentSecondaryColor, ": var(").concat(tokens.calendarContentSecondaryColor, ");\n\n    ").concat(calendarBaseTokens.iconButtonColor, ": var(").concat(tokens.iconButtonColor, ");\n    ").concat(calendarBaseTokens.iconButtonBackgroundColor, ": var(").concat(tokens.iconButtonBackgroundColor, ");\n    ").concat(calendarBaseTokens.iconButtonColorHover, ": var(").concat(tokens.iconButtonColorHover, ");\n    ").concat(calendarBaseTokens.iconButtonBackgroundColorHover, ": var(").concat(tokens.iconButtonBackgroundColorHover, ");\n    ").concat(calendarBaseTokens.iconButtonColorActive, ": var(").concat(tokens.iconButtonColorActive, ");\n    ").concat(calendarBaseTokens.iconButtonBackgroundColorActive, ": var(").concat(tokens.iconButtonBackgroundColorActive, ");\n\n    ").concat(calendarBaseTokens.calendarWidth, ": var(").concat(tokens.calendarWidth, ");\n    ").concat(calendarBaseTokens.calendarHeight, ": var(").concat(tokens.calendarHeight, ");\n    ").concat(calendarBaseTokens.calendarYearsPadding, ": var(").concat(tokens.calendarYearsPadding, ");\n    ").concat(calendarBaseTokens.calendarYearItemBorderRadius, ": var(").concat(tokens.calendarYearItemBorderRadius, ");\n    ").concat(calendarBaseTokens.calendarYearItemWidth, ": var(").concat(tokens.calendarYearItemWidth, ");\n    ").concat(calendarBaseTokens.calendarYearItemHeight, ": var(").concat(tokens.calendarYearItemHeight, ");\n    ").concat(calendarBaseTokens.calendarYearFontFamily, ": var(").concat(tokens.calendarYearFontFamily, ");\n    ").concat(calendarBaseTokens.calendarYearFontSize, ": var(").concat(tokens.calendarYearFontSize, ");\n    ").concat(calendarBaseTokens.calendarYearFontStyle, ": var(").concat(tokens.calendarYearFontStyle, ");\n    ").concat(calendarBaseTokens.calendarYearFontLetterSpacing, ": var(").concat(tokens.calendarYearFontLetterSpacing, ");\n    ").concat(calendarBaseTokens.calendarYearFontLineHeight, ": var(").concat(tokens.calendarYearFontLineHeight, ");\n    ").concat(calendarBaseTokens.calendarYearFontWeight, ": var(").concat(tokens.calendarYearFontWeight, ");\n    ").concat(calendarBaseTokens.calendarYearSelectedFontWeight, ": var(").concat(tokens.calendarYearSelectedFontWeight, ");\n    ").concat(calendarBaseTokens.calendarMonthsPadding, ": var(").concat(tokens.calendarMonthsPadding, ");\n    ").concat(calendarBaseTokens.calendarMonthItemBorderRadius, ": var(").concat(tokens.calendarMonthItemBorderRadius, ");\n    ").concat(calendarBaseTokens.calendarMonthItemWidth, ": var(").concat(tokens.calendarMonthItemWidth, ");\n    ").concat(calendarBaseTokens.calendarMonthItemHeight, ": var(").concat(tokens.calendarMonthItemHeight, ");\n    ").concat(calendarBaseTokens.calendarMonthFontFamily, ": var(").concat(tokens.calendarMonthFontFamily, ");\n    ").concat(calendarBaseTokens.calendarMonthFontSize, ": var(").concat(tokens.calendarMonthFontSize, ");\n    ").concat(calendarBaseTokens.calendarMonthFontStyle, ": var(").concat(tokens.calendarMonthFontStyle, ");\n    ").concat(calendarBaseTokens.calendarMonthFontLetterSpacing, ": var(").concat(tokens.calendarMonthFontLetterSpacing, ");\n    ").concat(calendarBaseTokens.calendarMonthFontLineHeight, ": var(").concat(tokens.calendarMonthFontLineHeight, ");\n    ").concat(calendarBaseTokens.calendarMonthFontWeight, ": var(").concat(tokens.calendarMonthFontWeight, ");\n    ").concat(calendarBaseTokens.calendarMonthSelectedFontWeight, ": var(").concat(tokens.calendarMonthSelectedFontWeight, ");\n    ").concat(calendarBaseTokens.calendarDaysPadding, ": var(").concat(tokens.calendarDaysPadding, ");\n    ").concat(calendarBaseTokens.calendarDayItemBorderRadius, ": var(").concat(tokens.calendarDayItemBorderRadius, ");\n    ").concat(calendarBaseTokens.calendarDayItemWidth, ": var(").concat(tokens.calendarDayItemWidth, ");\n    ").concat(calendarBaseTokens.calendarDayItemHeight, ": var(").concat(tokens.calendarDayItemHeight, ");\n    ").concat(calendarBaseTokens.calendarDayFontFamily, ": var(").concat(tokens.calendarDayFontFamily, ");\n    ").concat(calendarBaseTokens.calendarDayFontSize, ": var(").concat(tokens.calendarDayFontSize, ");\n    ").concat(calendarBaseTokens.calendarDayFontStyle, ": var(").concat(tokens.calendarDayFontStyle, ");\n    ").concat(calendarBaseTokens.calendarDayFontLetterSpacing, ": var(").concat(tokens.calendarDayFontLetterSpacing, ");\n    ").concat(calendarBaseTokens.calendarDayFontLineHeight, ": var(").concat(tokens.calendarDayFontLineHeight, ");\n    ").concat(calendarBaseTokens.calendarDayFontWeight, ": var(").concat(tokens.calendarDayFontWeight, ");\n    ").concat(calendarBaseTokens.calendarDaySelectedFontWeight, ": var(").concat(tokens.calendarDaySelectedFontWeight, ");\n    ").concat(calendarBaseTokens.calendarHeaderWrapperPadding, ": var(").concat(tokens.calendarHeaderWrapperPadding, ");\n    ").concat(calendarBaseTokens.calendarHeaderArrowGap, ": var(").concat(tokens.calendarHeaderArrowGap, ");\n    ").concat(calendarBaseTokens.calendarHeaderArrowPadding, ": var(").concat(tokens.calendarHeaderArrowPadding, ");\n    ").concat(calendarBaseTokens.calendarHeaderPadding, ": var(").concat(tokens.calendarHeaderPadding, ");\n    ").concat(calendarBaseTokens.calendarHeaderDateGap, ": var(").concat(tokens.calendarHeaderDateGap, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontFamily, ": var(").concat(tokens.calendarHeaderFontFamily, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontSize, ": var(").concat(tokens.calendarHeaderFontSize, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontStyle, ": var(").concat(tokens.calendarHeaderFontStyle, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontLetterSpacing, ": var(").concat(tokens.calendarHeaderFontLetterSpacing, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontLineHeight, ": var(").concat(tokens.calendarHeaderFontLineHeight, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontWeight, ": var(").concat(tokens.calendarHeaderFontWeight, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontWeightBold, ": var(").concat(tokens.calendarHeaderFontWeightBold, ");\n    ").concat(calendarBaseTokens.iconButtonHeight, ": var(").concat(tokens.iconButtonHeight, ");\n    ").concat(calendarBaseTokens.iconButtonWidth, ": var(").concat(tokens.iconButtonWidth, ");\n    ").concat(calendarBaseTokens.iconButtonPadding, ": var(").concat(tokens.iconButtonPadding, ");\n    ").concat(calendarBaseTokens.iconButtonRadius, ": var(").concat(tokens.iconButtonRadius, ");\n    ").concat(calendarBaseTokens.iconButtonFocusColor, ": var(").concat(tokens.iconButtonFocusColor, ");\n");
+
+// NOTE: переопределение токенов Calendar
+export var StyledCalendar = /*#__PURE__*/styled(Calendar).withConfig({
+  componentId: "plasma-new-hope__sc-1i6o09y-0"
+})(["", ""], baseCalendarTokens);

package/styled-components/es/components/DatePicker/DatePickerBase.types.js

@@ -0,0 +1 @@
+export {};