@salutejs/plasma-new-hope 0.384.0-dev.0 → 0.385.0-dev.0

package/dist/styled-components/cjs/components/Carousel/CarouselNew/Carousel.js

@@ -82,7 +82,7 @@ const AUTO_PLAY_INTERVAL_DEFAULT = 5000;
 const VIRTUAL_OVERSCAN = 3;
 const DEFAULT_ESTIMATED_SLIDE_WIDTH = 320;
 const ITEM_VIRTUAL_ATTRIBUTE = 'data-carousel-index';
-const carouselNewRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ view, size, scrollAlign = 'start', children, controlArrowsDisabled = false, paginationOptions, gap = '20px', className, style, defaultIndex = 0, loop = false, autoPlay = false, autoPlayInterval = AUTO_PLAY_INTERVAL_DEFAULT, swipeEnabled = false, virtual = false, index: outerIndex, onChangeIndex: outerOnChangeIndex, ...rest }, ref)=>{
+const carouselNewRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ view, size, scrollAlign = 'start', children, controlArrowsDisabled = false, paginationOptions, gap = '20px', className, style, defaultIndex = 0, loop = false, autoPlay = false, autoPlayInterval = AUTO_PLAY_INTERVAL_DEFAULT, swipeEnabled = false, virtual = false, fullWidth = false, index: outerIndex, onChangeIndex: outerOnChangeIndex, ...rest }, ref)=>{
         const childrenArray = (0, _react.useMemo)(()=>_react.Children.toArray(children), [
             children
         ]);
@@ -130,21 +130,28 @@ const carouselNewRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ view, si
             gap,
             virtual
         });
+        const Track = fullWidth ? _Carouselstyles.CarouselFullWidthTrack : _Carouselstyles.CarouselTrack;
+        const VirtualItem = fullWidth ? _Carouselstyles.CarouselFullWidthVirtualItem : _Carouselstyles.CarouselVirtualItem;
         const slides = (0, _react.useMemo)(()=>{
             if (!virtual) {
-                return children;
+                if (!fullWidth) {
+                    return children;
+                }
+                return _react.Children.map(childrenArray, (child)=>/*#__PURE__*/ _react.default.createElement(_Carouselstyles.CarouselSlide, null, child));
             }
             return virtualItems.map((virtualItem)=>{
                 const child = childrenArray[virtualItem.index];
-                return /*#__PURE__*/ _react.default.createElement(_Carouselstyles.CarouselVirtualItem, {
+                return /*#__PURE__*/ _react.default.createElement(VirtualItem, {
                     key: virtualItem.key,
                     ref: measureVirtualItem(virtualItem.index),
                     [ITEM_VIRTUAL_ATTRIBUTE]: virtualItem.index
                 }, child);
             });
         }, [
+            VirtualItem,
             children,
             childrenArray,
+            fullWidth,
             measureVirtualItem,
             virtual,
             virtualItems
@@ -166,7 +173,7 @@ const carouselNewRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ view, si
         })), /*#__PURE__*/ _react.default.createElement(_Carouselstyles.CarouselWrapper, {
             ref: scrollRef,
             isSwipeEnabled: swipeEnabled
-        }, /*#__PURE__*/ _react.default.createElement(_Carouselstyles.CarouselTrack, {
+        }, /*#__PURE__*/ _react.default.createElement(Track, {
             ref: trackRef,
             gap: gap
         }, virtual && beforeSpacerWidth > 0 && /*#__PURE__*/ _react.default.createElement("div", {

package/dist/styled-components/cjs/components/Carousel/CarouselNew/Carousel.styles.js

@@ -9,6 +9,15 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    get CarouselFullWidthTrack () {
+        return CarouselFullWidthTrack;
+    },
+    get CarouselFullWidthVirtualItem () {
+        return CarouselFullWidthVirtualItem;
+    },
+    get CarouselSlide () {
+        return CarouselSlide;
+    },
     get CarouselTrack () {
         return CarouselTrack;
     },
@@ -83,28 +92,63 @@ const base = (0, _styledcomponents.css)([
 ]);
 const CarouselWrapper = _styledcomponents.default.div.withConfig({
     displayName: "Carousel.styles__CarouselWrapper",
-    componentId: "sc-942ee38a-0"
+    componentId: "sc-17801db2-0"
 })([
     `position:relative;padding:0;list-style:none;-ms-overflow-style:none;scrollbar-width:none;::-webkit-scrollbar{display:none;}overflow-x:hidden;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:pan-y;cursor:`,
     `;&:active{cursor:`,
     `;}`
 ], ({ isSwipeEnabled })=>isSwipeEnabled ? 'grab' : 'default', ({ isSwipeEnabled })=>isSwipeEnabled ? 'grabbing' : 'default');
+// Трек в fullWidth имеет определённую ширину, поэтому 100% — это ширина вьюпорта, а не сумма слайдов.
+// Обычная строка, а не css``: Linaria в build:css подставляет результат css`` как имя класса.
+const fullWidthSlideCss = `
+    flex: 0 0 100%;
+    width: 100%;
+    max-width: 100%;
+    min-width: 100%;
+    box-sizing: border-box;
+
+    & > * {
+        width: 100% !important;
+        max-width: 100% !important;
+        box-sizing: border-box;
+    }
+`;
+const CarouselSlide = _styledcomponents.default.div.withConfig({
+    displayName: "Carousel.styles__CarouselSlide",
+    componentId: "sc-17801db2-1"
+})([
+    ``,
+    ``
+], fullWidthSlideCss);
 const CarouselTrack = _styledcomponents.default.div.withConfig({
     displayName: "Carousel.styles__CarouselTrack",
-    componentId: "sc-942ee38a-1"
+    componentId: "sc-17801db2-2"
 })([
     `display:inline-flex;flex-direction:row;gap:`,
     `;vertical-align:top;& > div{scroll-snap-align:none;}`
 ], ({ gap })=>gap);
+const CarouselFullWidthTrack = (0, _styledcomponents.default)(CarouselTrack).withConfig({
+    displayName: "Carousel.styles__CarouselFullWidthTrack",
+    componentId: "sc-17801db2-3"
+})([
+    `display:flex;width:100%;`
+]);
 const CarouselVirtualItem = _styledcomponents.default.div.withConfig({
     displayName: "Carousel.styles__CarouselVirtualItem",
-    componentId: "sc-942ee38a-2"
+    componentId: "sc-17801db2-4"
 })([
     `display:flex;flex:0 0 auto;`
 ]);
+const CarouselFullWidthVirtualItem = (0, _styledcomponents.default)(CarouselVirtualItem).withConfig({
+    displayName: "Carousel.styles__CarouselFullWidthVirtualItem",
+    componentId: "sc-17801db2-5"
+})([
+    ``,
+    ``
+], fullWidthSlideCss);
 const IconButton = (0, _styledcomponents.default)(IconButtonComponent).withConfig({
     displayName: "Carousel.styles__IconButton",
-    componentId: "sc-942ee38a-3"
+    componentId: "sc-17801db2-6"
 })([
     `position:absolute;top:50%;transform:translateY(-50%);left:0.75rem;z-index:10;`,
     `:var(`,
@@ -128,7 +172,7 @@ const IconButton = (0, _styledcomponents.default)(IconButtonComponent).withConfi
 ], _IconButton.iconButtonTokens.iconButtonColor, _Carouseltokens.tokens.controlIconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _Carouseltokens.tokens.controlIconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _Carouseltokens.tokens.controlIconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _Carouseltokens.tokens.controlIconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _Carouseltokens.tokens.controlIconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive, _Carouseltokens.tokens.controlIconButtonBackgroundColorActive, _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonPadding, _IconButton.iconButtonTokens.iconButtonRadius, _Carouseltokens.tokens.controlIconButtonRadius, _Carouseltokens.classes.rightControlButton);
 const ControlsWrapper = _styledcomponents.default.div.withConfig({
     displayName: "Carousel.styles__ControlsWrapper",
-    componentId: "sc-942ee38a-4"
+    componentId: "sc-17801db2-7"
 })([
     `position:relative;`
 ]);

package/dist/styled-components/cjs/components/Carousel/CarouselNew/hooks/useCarousel.js

@@ -12,6 +12,7 @@ const _react = require("react");
 const _reactvirtual = require("@tanstack/react-virtual");
 const _utils = require("../utils");
 const _Carousel = require("../Carousel");
+const AXIS_LOCK_THRESHOLD = 8;
 const useCarousel = ({ index, scrollAlign, onChangeIndex, swipeEnabled, slidesAmount, gap, virtual = false })=>{
     const scrollRef = (0, _react.useRef)(null);
     const trackRef = (0, _react.useRef)(null);
@@ -235,8 +236,10 @@ const useCarousel = ({ index, scrollAlign, onChangeIndex, swipeEnabled, slidesAm
             return;
         }
         let startX = 0;
+        let startY = 0;
         let startScrollLeft = 0;
         let activePointerId = null;
+        let axisLocked = false;
         let initialScrollBehavior = '';
         let initialScrollSnapType = '';
         // Возвращает inline-настройки scroll после завершения drag-взаимодействия.
@@ -247,6 +250,7 @@ const useCarousel = ({ index, scrollAlign, onChangeIndex, swipeEnabled, slidesAm
         // Сбрасывает служебное состояние drag/swipe.
         const resetInteraction = ()=>{
             activePointerId = null;
+            axisLocked = false;
             isInteracting.current = false;
             restoreScrollBehavior();
         };
@@ -274,9 +278,8 @@ const useCarousel = ({ index, scrollAlign, onChangeIndex, swipeEnabled, slidesAm
             });
             onChangeIndex(nextIndex);
         };
-        // Запоминает стартовую точку drag и временно отключает smooth/snap на время жеста.
-        const startInteraction = ({ clientX })=>{
-            startX = clientX;
+        // Временно отключает smooth/snap после того, как жест признан горизонтальным.
+        const startInteraction = ()=>{
             startScrollLeft = scrollElement.scrollLeft;
             initialScrollBehavior = scrollElement.style.scrollBehavior;
             initialScrollSnapType = scrollElement.style.scrollSnapType;
@@ -297,6 +300,24 @@ const useCarousel = ({ index, scrollAlign, onChangeIndex, swipeEnabled, slidesAm
             if (event.pointerId !== activePointerId) {
                 return;
             }
+            if (!axisLocked) {
+                const diffX = event.clientX - startX;
+                const diffY = event.clientY - startY;
+                if (Math.hypot(diffX, diffY) < AXIS_LOCK_THRESHOLD) {
+                    return;
+                }
+                // Вертикальный жест отдаём странице: без preventDefault скролл не блокируется.
+                if (Math.abs(diffY) > Math.abs(diffX)) {
+                    if (scrollElement.hasPointerCapture(event.pointerId)) {
+                        scrollElement.releasePointerCapture(event.pointerId);
+                    }
+                    activePointerId = null;
+                    return;
+                }
+                axisLocked = true;
+                startInteraction();
+                scrollElement.setPointerCapture(event.pointerId);
+            }
             moveInteraction({
                 clientX: event.clientX
             });
@@ -312,18 +333,26 @@ const useCarousel = ({ index, scrollAlign, onChangeIndex, swipeEnabled, slidesAm
             if (scrollElement.hasPointerCapture(event.pointerId)) {
                 scrollElement.releasePointerCapture(event.pointerId);
             }
+            if (!axisLocked) {
+                activePointerId = null;
+                return;
+            }
             finishInteraction();
         };
-        // Стартует drag только для допустимых primary-pointer событий.
+        // Запоминает старт жеста. Drag включается только после горизонтального порога.
         const onPointerDown = (event)=>{
             if (!swipeEnabled || !event.isPrimary || event.pointerType === 'mouse' && event.button !== 0) {
                 return;
             }
             activePointerId = event.pointerId;
-            startInteraction({
-                clientX: event.clientX
-            });
-            scrollElement.setPointerCapture(event.pointerId);
+            startX = event.clientX;
+            startY = event.clientY;
+            axisLocked = false;
+            // Мышь захватываем сразу, чтобы pointerup за пределами карусели сбросил жест.
+            // Тач не захватываем: иначе вертикальный скролл страницы блокируется.
+            if (event.pointerType === 'mouse') {
+                scrollElement.setPointerCapture(event.pointerId);
+            }
         };
         if (swipeEnabled) {
             scrollElement.addEventListener('pointerdown', onPointerDown);

package/dist/styled-components/cjs/components/Combobox/Combobox.js

@@ -322,11 +322,10 @@ const comboboxRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>
             portal: portal,
             listWidth: listWidth,
             offset: _offset,
-            target: (referenceRef)=>/*#__PURE__*/ _react.default.createElement("div", {
-                    onClick: handleTargetClick
-                }, /*#__PURE__*/ _react.default.createElement(_ui.StyledTextField, {
+            target: (referenceRef)=>/*#__PURE__*/ _react.default.createElement("div", null, /*#__PURE__*/ _react.default.createElement(_ui.StyledTextField, {
                     ref: name ? inputRef : inputForkRef,
                     inputWrapperRef: referenceRef,
+                    _onFieldClick: handleTargetClick,
                     opened: isListOpened,
                     value: textValue,
                     onChange: handleTextValueChange,

package/dist/styled-components/cjs/components/Combobox/Combobox.styles.js

@@ -84,7 +84,7 @@ const mergedConfig = (0, _engines.mergeConfig)(_EmptyState.emptyStateConfig);
 const EmptyState = (0, _engines.component)(mergedConfig);
 const ListWrapper = _styledcomponents.default.div.withConfig({
     displayName: "Combobox.styles__ListWrapper",
-    componentId: "sc-3999c414-0"
+    componentId: "sc-4d9b2736-0"
 })([
     `width:`,
     `;padding:calc(var(`,
@@ -99,7 +99,7 @@ const ListWrapper = _styledcomponents.default.div.withConfig({
 ], ({ listWidth })=>listWidth || '100%', _Comboboxtokens.tokens.padding, _Comboboxtokens.tokens.dropdownBorderWidth, _Comboboxtokens.tokens.borderRadius, _Comboboxtokens.tokens.dropdownBackgroundColor, _Comboboxtokens.constants.background, _Comboboxtokens.constants.boxShadow, _Comboboxtokens.tokens.dropdownBorderWidth, _Comboboxtokens.tokens.dropdownBorderColor);
 const Ul = _styledcomponents.default.ul.withConfig({
     displayName: "Combobox.styles__Ul",
-    componentId: "sc-3999c414-1"
+    componentId: "sc-4d9b2736-1"
 })([
     `max-height:`,
     `;overflow-x:hidden;overflow-y:`,
@@ -110,7 +110,7 @@ const Ul = _styledcomponents.default.ul.withConfig({
 ], ({ virtual, listMaxHeight })=>virtual ? 'auto' : listMaxHeight || 'auto', ({ virtual })=>virtual ? 'visible' : 'auto', _Comboboxtokens.tokens.borderRadius, _Comboboxtokens.tokens.dropdownBorderWidth, _Comboboxtokens.classes.emptyStateWrapper);
 const IconArrowWrapper = _styledcomponents.default.div.withConfig({
     displayName: "Combobox.styles__IconArrowWrapper",
-    componentId: "sc-3999c414-2"
+    componentId: "sc-4d9b2736-2"
 })([
     `line-height:0;color:var(`,
     `);cursor:`,
@@ -124,18 +124,18 @@ const sizeMap = {
 };
 const StyledArrow = (0, _styledcomponents.default)(_Icon.IconDisclosureDownCentered).withConfig({
     displayName: "Combobox.styles__StyledArrow",
-    componentId: "sc-3999c414-3"
+    componentId: "sc-4d9b2736-3"
 })([
     `width:`,
     `;height:`,
     `;`
 ], ({ size = 'xs' })=>`var(${_Comboboxtokens.tokens.disclosureIconSize}, ${sizeMap[size]})`, ({ size = 'xs' })=>`var(${_Comboboxtokens.tokens.disclosureIconSize}, ${sizeMap[size]})`);
 const base = (0, _styledcomponents.css)([
-    ``
+    `display:grid;grid-template-columns:minmax(0,1fr);min-width:0;`
 ]);
 const StyledEmptyState = (0, _styledcomponents.default)(EmptyState).withConfig({
     displayName: "Combobox.styles__StyledEmptyState",
-    componentId: "sc-3999c414-4"
+    componentId: "sc-4d9b2736-4"
 })([
     ``,
     `:var(`,
@@ -157,7 +157,7 @@ const StyledEmptyState = (0, _styledcomponents.default)(EmptyState).withConfig({
 ], _EmptyState.emptyStateTokens.borderRadius, _Comboboxtokens.tokens.textFieldBorderRadius, _EmptyState.emptyStateTokens.padding, _Comboboxtokens.tokens.emptyStatePadding, _EmptyState.emptyStateTokens.fontFamily, _Comboboxtokens.tokens.textFieldFontFamily, _EmptyState.emptyStateTokens.fontSize, _Comboboxtokens.tokens.textFieldFontSize, _EmptyState.emptyStateTokens.fontStyle, _Comboboxtokens.tokens.textFieldFontStyle, _EmptyState.emptyStateTokens.fontWeight, _Comboboxtokens.tokens.textFieldFontWeight, _EmptyState.emptyStateTokens.fontLetterSpacing, _Comboboxtokens.tokens.textFieldLetterSpacing, _EmptyState.emptyStateTokens.fontLineHeight, _Comboboxtokens.tokens.textFieldLineHeight);
 const StyledLeftHelper = _styledcomponents.default.span.withConfig({
     displayName: "Combobox.styles__StyledLeftHelper",
-    componentId: "sc-3999c414-5"
+    componentId: "sc-4d9b2736-5"
 })([
     `margin:0;padding:0;`
 ]);

package/dist/styled-components/cjs/components/DatePicker/DatePicker.tokens.js

@@ -123,6 +123,7 @@ const tokens = {
     leftHelperLetterSpacing: '--plasma-date-picker__left-helper-letter-spacing',
     leftHelperLineHeight: '--plasma-date-picker__left-helper-line-height',
     titleCaptionOffset: '--plasma-date-picker-title-caption-offset',
+    titleCaptionMargin: '--plasma-date-picker-title-caption-margin',
     titleCaptionColor: '--plasma-date-picker-title-caption-color',
     titleCaptionFontFamily: '--plasma-date-picker-title-caption-font-family',
     titleCaptionFontStyle: '--plasma-date-picker-title-caption-font-style',

package/dist/styled-components/cjs/components/DatePicker/FloatingPopover.js

@@ -85,9 +85,6 @@ const getFloatingPortalProps = (portal, wrappedId)=>{
 };
 const FloatingPopover = /*#__PURE__*/ (0, _react1.forwardRef)(({ target, referenceRef, children, opened, onToggle, placement, portal, offset, zIndex, disableFlip, closeOnOverlayClick, closeOnEsc, innerWidth, innerHeight, stretchHeight }, ref)=>{
     const { refs, floatingStyles, context } = (0, _react.useFloating)({
-        elements: referenceRef?.current ? {
-            reference: referenceRef.current
-        } : undefined,
         whileElementsMounted (referenceEl, floatingEl, update) {
             return (0, _react.autoUpdate)(referenceEl, floatingEl, update, {
                 ancestorScroll: false,
@@ -127,17 +124,13 @@ const FloatingPopover = /*#__PURE__*/ (0, _react1.forwardRef)(({ target, referen
         dismiss
     ]);
     (0, _react1.useLayoutEffect)(()=>{
-        if (referenceRef?.current) {
-            refs.setReference(referenceRef.current);
-        }
+        // Активный инпут задаёт положение календаря; весь target остаётся областью взаимодействия.
+        refs.setPositionReference(referenceRef?.current ?? refs.domReference.current);
     }, [
         referenceRef,
         refs
     ]);
     const wrappedId = (0, _utils.safeUseId)();
-    const handleClick = (event)=>{
-        onToggle(!opened, event);
-    };
     // Проверка на target. Это может быть как ReactNode, так и функция, в которую пробрасывается ref.
     // Это нужно для более тонкой настройки reference-элемента, вокруг которого и будет позиционироваться выпадашка.
     // Пример: когда в Textfield под инпутом находится helperText (или еще что-либо),
@@ -148,9 +141,7 @@ const FloatingPopover = /*#__PURE__*/ (0, _react1.forwardRef)(({ target, referen
         id: wrappedId
     }, /*#__PURE__*/ _react1.default.createElement(_DatePickerBasestyles.FloatingTarget, {
         ref: isTargetAsFunction ? undefined : refs.setReference,
-        ...getReferenceProps({
-            onClick: handleClick
-        })
+        ...getReferenceProps()
     }, typeof target === 'function' ? target(refs.setReference) : target), opened && /*#__PURE__*/ _react1.default.createElement(_react.FloatingPortal, getFloatingPortalProps(portal, wrappedId), /*#__PURE__*/ _react1.default.createElement(_DatePickerBasestyles.FloatingContent, {
         ref: refs.setFloating,
         style: {

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

@@ -94,7 +94,7 @@ const datePickerRangeRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ clas
         'top',
         'bottom'
     ], closeOnOverlayClick = true, closeOnEsc = true, closeAfterDateSelect = true, offset, disableFlip, // calendar
-    format = 'DD.MM.YYYY', lang = 'ru', maskWithFormat, min, max, renderFromDate, includeEdgeDates = false, eventTooltipOptions, eventList, disabledList, eventMonthList, disabledMonthList, eventQuarterList, disabledQuarterList, quarterNames, eventYearList, disabledYearList, type = 'Days', calendarContainerWidth, calendarContainerHeight, dateShortcuts, dateShortcutsPlacement = 'left', dateShortcutsWidth, onToggle, onChange, onChangeFirstValue, onChangeSecondValue, onChangeVisibleDate, onCommitFirstDate, onCommitSecondDate, onFocusFirstTextfield, onFocusSecondTextfield, onBlurFirstTextfield, onBlurSecondTextfield, ...rest }, ref)=>{
+    format = 'DD.MM.YYYY', lang = 'ru', maskWithFormat, min, max, renderFromDate, includeEdgeDates = false, eventTooltipOptions, eventList, disabledList, eventMonthList, disabledMonthList, eventQuarterList, disabledQuarterList, quarterNames, eventYearList, disabledYearList, type = 'Days', periodSelectorAlign, calendarContainerWidth, calendarContainerHeight, dateShortcuts, dateShortcutsPlacement = 'left', dateShortcutsWidth, onToggle, onChange, onChangeFirstValue, onChangeSecondValue, onChangeVisibleDate, onCommitFirstDate, onCommitSecondDate, onFocusFirstTextfield, onFocusSecondTextfield, onBlurFirstTextfield, onBlurSecondTextfield, ...rest }, ref)=>{
         const rangeRef = ref && 'current' in ref ? ref : /*#__PURE__*/ (0, _react.createRef)();
         const rootRef = (0, _react.useRef)(null);
         const innerRefFirst = (0, _react.useRef)(null);
@@ -388,7 +388,16 @@ const datePickerRangeRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ clas
         const renderRange = (inputWrapperRef)=>/*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement(_RangeDatestyles.StyledRange, {
                 size: size,
                 ref: rangeRef,
-                inputWrapperRef: shouldPositionCalendarByInput ? undefined : inputWrapperRef,
+                _onFieldClick: (event)=>handleToggle(true, event),
+                _onContentClick: (event)=>{
+                    if (disabled || readOnly) {
+                        return;
+                    }
+                    firstInputRef?.current?.focus();
+                    setSecondTextFieldClicked(false);
+                    handleToggle(true, event);
+                },
+                inputWrapperRef: inputWrapperRef,
                 firstTextfieldInputWrapperRef: shouldPositionCalendarByInput ? firstTextfieldInputWrapperRef : undefined,
                 secondTextfieldInputWrapperRef: shouldPositionCalendarByInput ? secondTextfieldInputWrapperRef : undefined,
                 autoComplete: autoComplete,
@@ -556,6 +565,7 @@ const datePickerRangeRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ clas
             calendarContainerWidth: calendarContainerWidth,
             calendarContainerHeight: calendarContainerHeight,
             type: type,
+            periodSelectorAlign: periodSelectorAlign,
             onChangeVisibleDate: onChangeVisibleDate,
             onToggle: handleToggle,
             lang: lang,

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

@@ -62,7 +62,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const RangeDatePopover = ({ rootWrapper: Root, target, referenceRef, opened, isDoubleCalendar, calendarValue, calendarFocusedDate, min, max, renderFromDate, includeEdgeDates, eventTooltipOptions, eventList, disabledList, eventMonthList, disabledMonthList, eventQuarterList, disabledQuarterList, quarterNames, eventYearList, disabledYearList, frame = 'document', usePortal = false, zIndex, placement = [
+const RangeDatePopover = ({ rootWrapper: Root, target, referenceRef, opened, isDoubleCalendar, calendarValue, calendarFocusedDate, min, max, renderFromDate, includeEdgeDates, eventTooltipOptions, eventList, disabledList, eventMonthList, disabledMonthList, eventQuarterList, disabledQuarterList, quarterNames, eventYearList, disabledYearList, periodSelectorAlign, frame = 'document', usePortal = false, zIndex, placement = [
     'top',
     'bottom'
 ], closeOnOverlayClick = true, closeOnEsc = true, offset, disableFlip, calendarContainerWidth, calendarContainerHeight, stretched, type = 'Days', size, lang = 'ru', disabled, readOnly, dateShortcuts, dateShortcutsPlacement = 'left', dateShortcutsWidth, onShortcutDateSelect, setIsInnerOpen, onChangeValue, onChangeStartOfRange, onChangeSingleValue, onChangeVisibleDate, onToggle })=>{
@@ -207,6 +207,7 @@ const RangeDatePopover = ({ rootWrapper: Root, target, referenceRef, opened, isD
         type: type,
         locale: lang,
         includeEdgeDates: includeEdgeDates,
+        periodSelectorAlign: periodSelectorAlign,
         onChangeValue: onChangeValue,
         onChangeStartOfRange: onChangeStartOfRange,
         onChangeSingleValue: onChangeSingleValue,

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

@@ -94,7 +94,7 @@ const datePickerRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ className
         'top',
         'bottom'
     ], closeOnOverlayClick = true, closeOnEsc = true, closeAfterDateSelect = true, offset, disableFlip, // calendar
-    format = 'DD.MM.YYYY', lang = 'ru', maskWithFormat, min, max, renderFromDate, includeEdgeDates = false, eventTooltipOptions, eventList, disabledList, eventMonthList, disabledMonthList, eventQuarterList, disabledQuarterList, quarterNames, eventYearList, disabledYearList, type = 'Days', calendarContainerWidth, calendarContainerHeight, dateShortcuts, dateShortcutsPlacement = 'left', dateShortcutsWidth, // callbacks
+    format = 'DD.MM.YYYY', lang = 'ru', periodSelectorAlign, maskWithFormat, min, max, renderFromDate, includeEdgeDates = false, eventTooltipOptions, eventList, disabledList, eventMonthList, disabledMonthList, eventQuarterList, disabledQuarterList, quarterNames, eventYearList, disabledYearList, type = 'Days', calendarContainerWidth, calendarContainerHeight, dateShortcuts, dateShortcutsPlacement = 'left', dateShortcutsWidth, // callbacks
     onChangeVisibleDate, onChangeValue, onCommitDate, onToggle, onFocus, onBlur, onChange, ...rest }, ref)=>{
         const inputRef = (0, _react.useRef)(null);
         const inputForkRef = (0, _hooks.useForkRef)(inputRef, ref);
@@ -269,6 +269,7 @@ const datePickerRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ className
             target: (referenceRef)=>/*#__PURE__*/ _react.default.createElement(_SingleDatestyles.StyledInput, {
                     ref: inputForkRef,
                     inputWrapperRef: referenceRef,
+                    _onFieldClick: (event)=>handleToggle(true, event),
                     className: (0, _classnames.default)(datePickerErrorClass, datePickerSuccessClass, datePickerEditedClass),
                     value: inputValue,
                     size: size,
@@ -355,6 +356,7 @@ const datePickerRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ className
             includeEdgeDates: includeEdgeDates,
             isRange: false,
             locale: lang,
+            periodSelectorAlign: periodSelectorAlign,
             onChangeValue: handleCalendarPick,
             onChangeVisibleDate: onChangeVisibleDate
         })))), leftHelper && /*#__PURE__*/ _react.default.createElement(_SingleDatestyles.LeftHelper, {

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

@@ -68,7 +68,7 @@ const mergedTextFieldConfig = (0, _engines.mergeConfig)(_TextField.textFieldConf
 const TextField = (0, _engines.component)(mergedTextFieldConfig);
 const StyledInput = (0, _styledcomponents.default)(TextField).withConfig({
     displayName: "SingleDate.styles__StyledInput",
-    componentId: "sc-8ec0099a-0"
+    componentId: "sc-9ba64415-0"
 })([
     `width:100%;`,
     `:var(`,
@@ -230,6 +230,8 @@ const StyledInput = (0, _styledcomponents.default)(TextField).withConfig({
     `:var(`,
     `);`,
     `:var(`,
+    `);`,
+    `:var(`,
     `,var(`,
     `));`,
     `:var(`,
@@ -365,7 +367,7 @@ const StyledInput = (0, _styledcomponents.default)(TextField).withConfig({
     `);`,
     `:var(`,
     `);}`
-], _TextField.textFieldTokens.color, _DatePickertokens.tokens.textFieldColor, _TextField.textFieldTokens.placeholderColor, _DatePickertokens.tokens.textFieldPlaceholderColor, _TextField.textFieldTokens.placeholderColorFocus, _DatePickertokens.tokens.textFieldPlaceholderColorFocus, _TextField.textFieldTokens.clearPlaceholderColorFocus, _DatePickertokens.tokens.textFieldClearPlaceholderColorFocus, _TextField.textFieldTokens.caretColor, _DatePickertokens.tokens.textFieldCaretColor, _TextField.textFieldTokens.focusColor, _DatePickertokens.tokens.textFieldFocusColor, _TextField.textFieldTokens.backgroundColor, _DatePickertokens.tokens.textFieldBackgroundColor, _TextField.textFieldTokens.backgroundColorHover, _DatePickertokens.tokens.textFieldBackgroundColorHover, _TextField.textFieldTokens.backgroundColorFocus, _DatePickertokens.tokens.textFieldBackgroundColorFocus, _TextField.textFieldTokens.boxShadowSecondary, _DatePickertokens.tokens.textFieldBoxShadowSecondary, _TextField.textFieldTokens.borderColor, _DatePickertokens.tokens.borderColor, _TextField.textFieldTokens.borderColorHover, _DatePickertokens.tokens.borderColorHover, _TextField.textFieldTokens.borderColorFocus, _DatePickertokens.tokens.borderColorFocus, _TextField.textFieldTokens.colorReadOnly, _DatePickertokens.tokens.textFieldColorReadOnly, _TextField.textFieldTokens.backgroundColorReadOnly, _DatePickertokens.tokens.textFieldBackgroundColorReadOnly, _TextField.textFieldTokens.readOnlyOpacity, _DatePickertokens.tokens.textFieldReadOnlyOpacity, _TextField.textFieldTokens.borderColorReadOnly, _DatePickertokens.tokens.textFieldBorderColorReadOnly, _TextField.textFieldTokens.placeholderColorReadOnly, _DatePickertokens.tokens.textFieldPlaceholderColorReadOnly, _TextField.textFieldTokens.dividerColor, _DatePickertokens.tokens.clearDividerColor, _TextField.textFieldTokens.dividerColorFocus, _DatePickertokens.tokens.textFieldDividerColorFocus, _TextField.textFieldTokens.dividerColorHover, _DatePickertokens.tokens.textFieldDividerColorHover, _TextField.textFieldTokens.labelColor, _DatePickertokens.tokens.labelColor, _TextField.textFieldTokens.labelColorReadOnly, _DatePickertokens.tokens.labelColorReadOnly, _TextField.textFieldTokens.height, _DatePickertokens.tokens.textFieldHeight, _TextField.textFieldTokens.borderWidth, _DatePickertokens.tokens.textFieldBorderWidth, _TextField.textFieldTokens.borderRadius, _DatePickertokens.tokens.textFieldBorderRadius, _TextField.textFieldTokens.padding, _DatePickertokens.tokens.textFieldPadding, _TextField.textFieldTokens.labelInnerPadding, _DatePickertokens.tokens.labelInnerPadding, _TextField.textFieldTokens.contentLabelInnerPadding, _DatePickertokens.tokens.contentLabelInnerPadding, _TextField.textFieldTokens.labelOffset, _DatePickertokens.tokens.labelOffset, _TextField.textFieldTokens.labelFontFamily, _DatePickertokens.tokens.labelFontFamily, _TextField.textFieldTokens.labelFontStyle, _DatePickertokens.tokens.labelFontStyle, _TextField.textFieldTokens.labelFontSize, _DatePickertokens.tokens.labelFontSize, _TextField.textFieldTokens.labelFontWeight, _DatePickertokens.tokens.labelFontWeight, _TextField.textFieldTokens.labelLetterSpacing, _DatePickertokens.tokens.labelLetterSpacing, _TextField.textFieldTokens.labelLineHeight, _DatePickertokens.tokens.labelLineHeight, _TextField.textFieldTokens.labelInnerFontFamily, _DatePickertokens.tokens.labelInnerFontFamily, _TextField.textFieldTokens.labelInnerFontSize, _DatePickertokens.tokens.labelInnerFontSize, _TextField.textFieldTokens.labelInnerFontStyle, _DatePickertokens.tokens.labelInnerFontStyle, _TextField.textFieldTokens.labelInnerFontWeight, _DatePickertokens.tokens.labelInnerFontWeight, _TextField.textFieldTokens.labelInnerLetterSpacing, _DatePickertokens.tokens.labelInnerLetterSpacing, _TextField.textFieldTokens.labelInnerLineHeight, _DatePickertokens.tokens.labelInnerLineHeight, _TextField.textFieldTokens.titleCaptionInnerLabelOffset, _DatePickertokens.tokens.titleCaptionOffset, _TextField.textFieldTokens.titleCaptionColor, _DatePickertokens.tokens.titleCaptionColor, _TextField.textFieldTokens.titleCaptionFontFamily, _DatePickertokens.tokens.titleCaptionFontFamily, _TextField.textFieldTokens.titleCaptionFontStyle, _DatePickertokens.tokens.titleCaptionFontStyle, _TextField.textFieldTokens.titleCaptionFontSize, _DatePickertokens.tokens.titleCaptionFontSize, _TextField.textFieldTokens.titleCaptionFontWeight, _DatePickertokens.tokens.titleCaptionFontWeight, _TextField.textFieldTokens.titleCaptionLetterSpacing, _DatePickertokens.tokens.titleCaptionLetterSpacing, _TextField.textFieldTokens.titleCaptionLineHeight, _DatePickertokens.tokens.titleCaptionLineHeight, _TextField.textFieldTokens.indicatorColor, _DatePickertokens.tokens.indicatorColor, _TextField.textFieldTokens.indicatorSizeInner, _DatePickertokens.tokens.indicatorSizeInner, _TextField.textFieldTokens.indicatorSizeOuter, _DatePickertokens.tokens.indicatorSizeOuter, _TextField.textFieldTokens.indicatorLabelPlacementInner, _DatePickertokens.tokens.indicatorPlacement, _TextField.textFieldTokens.indicatorLabelPlacementOuter, _DatePickertokens.tokens.indicatorOuterPlacement, _TextField.textFieldTokens.indicatorLabelPlacementInnerRight, _DatePickertokens.tokens.indicatorPlacementRight, _TextField.textFieldTokens.indicatorLabelPlacementOuterRight, _DatePickertokens.tokens.indicatorOuterPlacementRight, _TextField.textFieldTokens.clearIndicatorHintInnerRight, _DatePickertokens.tokens.clearIndicatorHintInnerRight, _TextField.textFieldTokens.hintMargin, _DatePickertokens.tokens.hintMargin, _TextField.textFieldTokens.hintTargetSize, _DatePickertokens.tokens.hintTargetSize, _TextField.textFieldTokens.hintCustomIconTargetSize, _DatePickertokens.tokens.hintCustomIconTargetSize, _TextField.textFieldTokens.hintIconColor, _DatePickertokens.tokens.hintIconColor, _TextField.textFieldTokens.hintInnerLabelPlacementOffset, _DatePickertokens.tokens.hintInnerLabelPlacementOffset, _TextField.textFieldTokens.clearHintInnerLabelPlacementOffset, _DatePickertokens.tokens.clearHintInnerLabelPlacementOffset, _TextField.textFieldTokens.leftContentMargin, _DatePickertokens.tokens.textFieldLeftContentMargin, _TextField.textFieldTokens.rightContentMargin, _DatePickertokens.tokens.textFieldRightContentMargin, _TextField.textFieldTokens.fontFamily, _DatePickertokens.tokens.textFieldFontFamily, _TextField.textFieldTokens.fontSize, _DatePickertokens.tokens.textFieldFontSize, _TextField.textFieldTokens.fontStyle, _DatePickertokens.tokens.textFieldFontStyle, _TextField.textFieldTokens.fontWeight, _DatePickertokens.tokens.textFieldFontWeight, _TextField.textFieldTokens.letterSpacing, _DatePickertokens.tokens.textFieldLetterSpacing, _TextField.textFieldTokens.lineHeight, _DatePickertokens.tokens.textFieldLineHeight, _TextField.textFieldTokens.disabledOpacity, _DatePickertokens.tokens.disabledOpacity, _TextField.textFieldTokens.disabledBackgroundOpacity, _DatePickertokens.tokens.disabledBackgroundOpacity, _TextField.textFieldTokens.disabledInnerContentOpacity, _DatePickertokens.tokens.disabledInnerContentOpacity, _TextField.textFieldTokens.textBeforeColor, _DatePickertokens.tokens.textFieldTextBeforeColor, _TextField.textFieldTokens.textAfterColor, _DatePickertokens.tokens.textFieldTextAfterColor, _TextField.textFieldTokens.textBeforeMargin, _DatePickertokens.tokens.textFieldTextBeforeMargin, _TextField.textFieldTokens.textAfterMargin, _DatePickertokens.tokens.textFieldTextAfterMargin, _TextField.textFieldTokens.contentSlotColor, _DatePickertokens.tokens.textFieldContentSlotColor, _DatePickertokens.tokens.textFieldColor, _TextField.textFieldTokens.contentSlotColorHover, _DatePickertokens.tokens.textFieldContentSlotColorHover, _DatePickertokens.tokens.textFieldColor, _TextField.textFieldTokens.contentSlotColorActive, _DatePickertokens.tokens.textFieldContentSlotColorActive, _DatePickertokens.tokens.textFieldColor, _TextField.textFieldTokens.contentSlotRightColor, _DatePickertokens.tokens.textFieldContentRightSlotColor, _TextField.textFieldTokens.contentSlotColor, _TextField.textFieldTokens.contentSlotRightColorHover, _DatePickertokens.tokens.textFieldContentRightSlotColorHover, _TextField.textFieldTokens.contentSlotRightColor, _TextField.textFieldTokens.contentSlotRightColorActive, _DatePickertokens.tokens.textFieldContentRightSlotColorActive, _TextField.textFieldTokens.contentSlotRightColor, _TextField.textFieldTokens.contentSlotRightOpacityReadOnly, _DatePickertokens.tokens.textFieldContentSlotRightOpacityReadOnly, _TextField.textFieldTokens.tooltipPaddingTop, _DatePickertokens.tokens.hintTooltipPaddingTop, _TextField.textFieldTokens.tooltipPaddingRight, _DatePickertokens.tokens.hintTooltipPaddingRight, _TextField.textFieldTokens.tooltipPaddingBottom, _DatePickertokens.tokens.hintTooltipPaddingBottom, _TextField.textFieldTokens.tooltipPaddingLeft, _DatePickertokens.tokens.hintTooltipPaddingLeft, _TextField.textFieldTokens.tooltipMinHeight, _DatePickertokens.tokens.hintTooltipMinHeight, _TextField.textFieldTokens.tooltipBackgroundColor, _DatePickertokens.tokens.hintTooltipBackgroundColor, _TextField.textFieldTokens.tooltipBoxShadow, _DatePickertokens.tokens.hintTooltipBoxShadow, _TextField.textFieldTokens.tooltipBorderRadius, _DatePickertokens.tokens.hintTooltipBorderRadius, _TextField.textFieldTokens.tooltipColor, _DatePickertokens.tokens.hintTooltipColor, _TextField.textFieldTokens.tooltipTextFontFamily, _DatePickertokens.tokens.hintTooltipTextFontFamily, _TextField.textFieldTokens.tooltipTextFontSize, _DatePickertokens.tokens.hintTooltipTextFontSize, _TextField.textFieldTokens.tooltipTextFontStyle, _DatePickertokens.tokens.hintTooltipTextFontStyle, _TextField.textFieldTokens.tooltipTextFontWeight, _DatePickertokens.tokens.hintTooltipTextFontWeight, _TextField.textFieldTokens.tooltipTextFontLetterSpacing, _DatePickertokens.tokens.hintTooltipTextFontLetterSpacing, _TextField.textFieldTokens.tooltipTextFontLineHeight, _DatePickertokens.tokens.hintTooltipTextFontLineHeight, _TextField.textFieldTokens.tooltipContentLeftMargin, _DatePickertokens.tokens.hintTooltipContentLeftMargin, _TextField.textFieldTokens.tooltipArrowMaskWidth, _DatePickertokens.tokens.hintTooltipArrowMaskWidth, _TextField.textFieldTokens.tooltipArrowMaskHeight, _DatePickertokens.tokens.hintTooltipArrowMaskHeight, _TextField.textFieldTokens.tooltipArrowMaskImage, _DatePickertokens.tokens.hintTooltipArrowMaskImage, _TextField.textFieldTokens.tooltipArrowBackground, _DatePickertokens.tokens.hintTooltipArrowBackground, _TextField.textFieldTokens.tooltipArrowHeight, _DatePickertokens.tokens.hintTooltipArrowHeight, _TextField.textFieldTokens.tooltipArrowEdgeMargin, _DatePickertokens.tokens.hintTooltipArrowEdgeMargin, _DatePickertokens.classes.datePickerSuccess, _TextField.textFieldTokens.color, _DatePickertokens.tokens.textFieldColorSuccess, _DatePickertokens.tokens.textFieldColor, _TextField.textFieldTokens.backgroundColor, _DatePickertokens.tokens.textFieldBackgroundSuccessColor, _TextField.textFieldTokens.backgroundColorHover, _DatePickertokens.tokens.textFieldBackgroundSuccessColorHover, _TextField.textFieldTokens.backgroundColorFocus, _DatePickertokens.tokens.textFieldBackgroundSuccessColorFocus, _TextField.textFieldTokens.borderColor, _DatePickertokens.tokens.textFieldBorderColorSuccess, _TextField.textFieldTokens.borderColorHover, _DatePickertokens.tokens.textFieldBorderColorSuccessHover, _TextField.textFieldTokens.borderColorFocus, _DatePickertokens.tokens.textFieldBorderColorSuccessFocus, _TextField.textFieldTokens.dividerColor, _DatePickertokens.tokens.textFieldDividerColorSuccess, _TextField.textFieldTokens.contentSlotColor, _DatePickertokens.tokens.textFieldContentSlotColorSuccess, _DatePickertokens.tokens.textFieldContentSlotColor, _TextField.textFieldTokens.contentSlotColorHover, _DatePickertokens.tokens.textFieldContentSlotColorSuccessHover, _DatePickertokens.tokens.textFieldContentSlotColorHover, _TextField.textFieldTokens.contentSlotColorActive, _DatePickertokens.tokens.textFieldContentSlotColorSuccessActive, _DatePickertokens.tokens.textFieldContentSlotColorActive, _DatePickertokens.classes.datePickerError, _TextField.textFieldTokens.color, _DatePickertokens.tokens.textFieldColorError, _DatePickertokens.tokens.textFieldColor, _TextField.textFieldTokens.backgroundColor, _DatePickertokens.tokens.textFieldBackgroundErrorColor, _TextField.textFieldTokens.backgroundColorHover, _DatePickertokens.tokens.textFieldBackgroundErrorColorHover, _TextField.textFieldTokens.backgroundColorFocus, _DatePickertokens.tokens.textFieldBackgroundErrorColorFocus, _TextField.textFieldTokens.borderColor, _DatePickertokens.tokens.textFieldBorderColorError, _TextField.textFieldTokens.borderColorHover, _DatePickertokens.tokens.textFieldBorderColorErrorHover, _TextField.textFieldTokens.borderColorFocus, _DatePickertokens.tokens.textFieldBorderColorErrorFocus, _TextField.textFieldTokens.dividerColor, _DatePickertokens.tokens.textFieldDividerColorError, _TextField.textFieldTokens.contentSlotColor, _DatePickertokens.tokens.textFieldContentSlotColorError, _DatePickertokens.tokens.textFieldContentSlotColor, _TextField.textFieldTokens.contentSlotColorHover, _DatePickertokens.tokens.textFieldContentSlotColorErrorHover, _DatePickertokens.tokens.textFieldContentSlotColorHover, _TextField.textFieldTokens.contentSlotColorActive, _DatePickertokens.tokens.textFieldContentSlotColorErrorActive, _DatePickertokens.tokens.textFieldContentSlotColorActive, _DatePickertokens.classes.datePickerEdited, _TextField.textFieldTokens.color, _DatePickertokens.tokens.textFieldColorEdited, _DatePickertokens.tokens.textFieldColor, _TextField.textFieldTokens.backgroundColor, _DatePickertokens.tokens.textFieldBackgroundEditedColor, _TextField.textFieldTokens.backgroundColorHover, _DatePickertokens.tokens.textFieldBackgroundEditedColorHover, _TextField.textFieldTokens.backgroundColorFocus, _DatePickertokens.tokens.textFieldBackgroundEditedColorFocus, _TextField.textFieldTokens.borderColor, _DatePickertokens.tokens.textFieldBorderColorEdited, _TextField.textFieldTokens.borderColorHover, _DatePickertokens.tokens.textFieldBorderColorEditedHover, _TextField.textFieldTokens.borderColorFocus, _DatePickertokens.tokens.textFieldBorderColorEditedFocus, _TextField.textFieldTokens.dividerColor, _DatePickertokens.tokens.textFieldDividerColorEdited);
+], _TextField.textFieldTokens.color, _DatePickertokens.tokens.textFieldColor, _TextField.textFieldTokens.placeholderColor, _DatePickertokens.tokens.textFieldPlaceholderColor, _TextField.textFieldTokens.placeholderColorFocus, _DatePickertokens.tokens.textFieldPlaceholderColorFocus, _TextField.textFieldTokens.clearPlaceholderColorFocus, _DatePickertokens.tokens.textFieldClearPlaceholderColorFocus, _TextField.textFieldTokens.caretColor, _DatePickertokens.tokens.textFieldCaretColor, _TextField.textFieldTokens.focusColor, _DatePickertokens.tokens.textFieldFocusColor, _TextField.textFieldTokens.backgroundColor, _DatePickertokens.tokens.textFieldBackgroundColor, _TextField.textFieldTokens.backgroundColorHover, _DatePickertokens.tokens.textFieldBackgroundColorHover, _TextField.textFieldTokens.backgroundColorFocus, _DatePickertokens.tokens.textFieldBackgroundColorFocus, _TextField.textFieldTokens.boxShadowSecondary, _DatePickertokens.tokens.textFieldBoxShadowSecondary, _TextField.textFieldTokens.borderColor, _DatePickertokens.tokens.borderColor, _TextField.textFieldTokens.borderColorHover, _DatePickertokens.tokens.borderColorHover, _TextField.textFieldTokens.borderColorFocus, _DatePickertokens.tokens.borderColorFocus, _TextField.textFieldTokens.colorReadOnly, _DatePickertokens.tokens.textFieldColorReadOnly, _TextField.textFieldTokens.backgroundColorReadOnly, _DatePickertokens.tokens.textFieldBackgroundColorReadOnly, _TextField.textFieldTokens.readOnlyOpacity, _DatePickertokens.tokens.textFieldReadOnlyOpacity, _TextField.textFieldTokens.borderColorReadOnly, _DatePickertokens.tokens.textFieldBorderColorReadOnly, _TextField.textFieldTokens.placeholderColorReadOnly, _DatePickertokens.tokens.textFieldPlaceholderColorReadOnly, _TextField.textFieldTokens.dividerColor, _DatePickertokens.tokens.clearDividerColor, _TextField.textFieldTokens.dividerColorFocus, _DatePickertokens.tokens.textFieldDividerColorFocus, _TextField.textFieldTokens.dividerColorHover, _DatePickertokens.tokens.textFieldDividerColorHover, _TextField.textFieldTokens.labelColor, _DatePickertokens.tokens.labelColor, _TextField.textFieldTokens.labelColorReadOnly, _DatePickertokens.tokens.labelColorReadOnly, _TextField.textFieldTokens.height, _DatePickertokens.tokens.textFieldHeight, _TextField.textFieldTokens.borderWidth, _DatePickertokens.tokens.textFieldBorderWidth, _TextField.textFieldTokens.borderRadius, _DatePickertokens.tokens.textFieldBorderRadius, _TextField.textFieldTokens.padding, _DatePickertokens.tokens.textFieldPadding, _TextField.textFieldTokens.labelInnerPadding, _DatePickertokens.tokens.labelInnerPadding, _TextField.textFieldTokens.contentLabelInnerPadding, _DatePickertokens.tokens.contentLabelInnerPadding, _TextField.textFieldTokens.labelOffset, _DatePickertokens.tokens.labelOffset, _TextField.textFieldTokens.labelFontFamily, _DatePickertokens.tokens.labelFontFamily, _TextField.textFieldTokens.labelFontStyle, _DatePickertokens.tokens.labelFontStyle, _TextField.textFieldTokens.labelFontSize, _DatePickertokens.tokens.labelFontSize, _TextField.textFieldTokens.labelFontWeight, _DatePickertokens.tokens.labelFontWeight, _TextField.textFieldTokens.labelLetterSpacing, _DatePickertokens.tokens.labelLetterSpacing, _TextField.textFieldTokens.labelLineHeight, _DatePickertokens.tokens.labelLineHeight, _TextField.textFieldTokens.labelInnerFontFamily, _DatePickertokens.tokens.labelInnerFontFamily, _TextField.textFieldTokens.labelInnerFontSize, _DatePickertokens.tokens.labelInnerFontSize, _TextField.textFieldTokens.labelInnerFontStyle, _DatePickertokens.tokens.labelInnerFontStyle, _TextField.textFieldTokens.labelInnerFontWeight, _DatePickertokens.tokens.labelInnerFontWeight, _TextField.textFieldTokens.labelInnerLetterSpacing, _DatePickertokens.tokens.labelInnerLetterSpacing, _TextField.textFieldTokens.labelInnerLineHeight, _DatePickertokens.tokens.labelInnerLineHeight, _TextField.textFieldTokens.titleCaptionMargin, _DatePickertokens.tokens.titleCaptionMargin, _TextField.textFieldTokens.titleCaptionInnerLabelOffset, _DatePickertokens.tokens.titleCaptionOffset, _TextField.textFieldTokens.titleCaptionColor, _DatePickertokens.tokens.titleCaptionColor, _TextField.textFieldTokens.titleCaptionFontFamily, _DatePickertokens.tokens.titleCaptionFontFamily, _TextField.textFieldTokens.titleCaptionFontStyle, _DatePickertokens.tokens.titleCaptionFontStyle, _TextField.textFieldTokens.titleCaptionFontSize, _DatePickertokens.tokens.titleCaptionFontSize, _TextField.textFieldTokens.titleCaptionFontWeight, _DatePickertokens.tokens.titleCaptionFontWeight, _TextField.textFieldTokens.titleCaptionLetterSpacing, _DatePickertokens.tokens.titleCaptionLetterSpacing, _TextField.textFieldTokens.titleCaptionLineHeight, _DatePickertokens.tokens.titleCaptionLineHeight, _TextField.textFieldTokens.indicatorColor, _DatePickertokens.tokens.indicatorColor, _TextField.textFieldTokens.indicatorSizeInner, _DatePickertokens.tokens.indicatorSizeInner, _TextField.textFieldTokens.indicatorSizeOuter, _DatePickertokens.tokens.indicatorSizeOuter, _TextField.textFieldTokens.indicatorLabelPlacementInner, _DatePickertokens.tokens.indicatorPlacement, _TextField.textFieldTokens.indicatorLabelPlacementOuter, _DatePickertokens.tokens.indicatorOuterPlacement, _TextField.textFieldTokens.indicatorLabelPlacementInnerRight, _DatePickertokens.tokens.indicatorPlacementRight, _TextField.textFieldTokens.indicatorLabelPlacementOuterRight, _DatePickertokens.tokens.indicatorOuterPlacementRight, _TextField.textFieldTokens.clearIndicatorHintInnerRight, _DatePickertokens.tokens.clearIndicatorHintInnerRight, _TextField.textFieldTokens.hintMargin, _DatePickertokens.tokens.hintMargin, _TextField.textFieldTokens.hintTargetSize, _DatePickertokens.tokens.hintTargetSize, _TextField.textFieldTokens.hintCustomIconTargetSize, _DatePickertokens.tokens.hintCustomIconTargetSize, _TextField.textFieldTokens.hintIconColor, _DatePickertokens.tokens.hintIconColor, _TextField.textFieldTokens.hintInnerLabelPlacementOffset, _DatePickertokens.tokens.hintInnerLabelPlacementOffset, _TextField.textFieldTokens.clearHintInnerLabelPlacementOffset, _DatePickertokens.tokens.clearHintInnerLabelPlacementOffset, _TextField.textFieldTokens.leftContentMargin, _DatePickertokens.tokens.textFieldLeftContentMargin, _TextField.textFieldTokens.rightContentMargin, _DatePickertokens.tokens.textFieldRightContentMargin, _TextField.textFieldTokens.fontFamily, _DatePickertokens.tokens.textFieldFontFamily, _TextField.textFieldTokens.fontSize, _DatePickertokens.tokens.textFieldFontSize, _TextField.textFieldTokens.fontStyle, _DatePickertokens.tokens.textFieldFontStyle, _TextField.textFieldTokens.fontWeight, _DatePickertokens.tokens.textFieldFontWeight, _TextField.textFieldTokens.letterSpacing, _DatePickertokens.tokens.textFieldLetterSpacing, _TextField.textFieldTokens.lineHeight, _DatePickertokens.tokens.textFieldLineHeight, _TextField.textFieldTokens.disabledOpacity, _DatePickertokens.tokens.disabledOpacity, _TextField.textFieldTokens.disabledBackgroundOpacity, _DatePickertokens.tokens.disabledBackgroundOpacity, _TextField.textFieldTokens.disabledInnerContentOpacity, _DatePickertokens.tokens.disabledInnerContentOpacity, _TextField.textFieldTokens.textBeforeColor, _DatePickertokens.tokens.textFieldTextBeforeColor, _TextField.textFieldTokens.textAfterColor, _DatePickertokens.tokens.textFieldTextAfterColor, _TextField.textFieldTokens.textBeforeMargin, _DatePickertokens.tokens.textFieldTextBeforeMargin, _TextField.textFieldTokens.textAfterMargin, _DatePickertokens.tokens.textFieldTextAfterMargin, _TextField.textFieldTokens.contentSlotColor, _DatePickertokens.tokens.textFieldContentSlotColor, _DatePickertokens.tokens.textFieldColor, _TextField.textFieldTokens.contentSlotColorHover, _DatePickertokens.tokens.textFieldContentSlotColorHover, _DatePickertokens.tokens.textFieldColor, _TextField.textFieldTokens.contentSlotColorActive, _DatePickertokens.tokens.textFieldContentSlotColorActive, _DatePickertokens.tokens.textFieldColor, _TextField.textFieldTokens.contentSlotRightColor, _DatePickertokens.tokens.textFieldContentRightSlotColor, _TextField.textFieldTokens.contentSlotColor, _TextField.textFieldTokens.contentSlotRightColorHover, _DatePickertokens.tokens.textFieldContentRightSlotColorHover, _TextField.textFieldTokens.contentSlotRightColor, _TextField.textFieldTokens.contentSlotRightColorActive, _DatePickertokens.tokens.textFieldContentRightSlotColorActive, _TextField.textFieldTokens.contentSlotRightColor, _TextField.textFieldTokens.contentSlotRightOpacityReadOnly, _DatePickertokens.tokens.textFieldContentSlotRightOpacityReadOnly, _TextField.textFieldTokens.tooltipPaddingTop, _DatePickertokens.tokens.hintTooltipPaddingTop, _TextField.textFieldTokens.tooltipPaddingRight, _DatePickertokens.tokens.hintTooltipPaddingRight, _TextField.textFieldTokens.tooltipPaddingBottom, _DatePickertokens.tokens.hintTooltipPaddingBottom, _TextField.textFieldTokens.tooltipPaddingLeft, _DatePickertokens.tokens.hintTooltipPaddingLeft, _TextField.textFieldTokens.tooltipMinHeight, _DatePickertokens.tokens.hintTooltipMinHeight, _TextField.textFieldTokens.tooltipBackgroundColor, _DatePickertokens.tokens.hintTooltipBackgroundColor, _TextField.textFieldTokens.tooltipBoxShadow, _DatePickertokens.tokens.hintTooltipBoxShadow, _TextField.textFieldTokens.tooltipBorderRadius, _DatePickertokens.tokens.hintTooltipBorderRadius, _TextField.textFieldTokens.tooltipColor, _DatePickertokens.tokens.hintTooltipColor, _TextField.textFieldTokens.tooltipTextFontFamily, _DatePickertokens.tokens.hintTooltipTextFontFamily, _TextField.textFieldTokens.tooltipTextFontSize, _DatePickertokens.tokens.hintTooltipTextFontSize, _TextField.textFieldTokens.tooltipTextFontStyle, _DatePickertokens.tokens.hintTooltipTextFontStyle, _TextField.textFieldTokens.tooltipTextFontWeight, _DatePickertokens.tokens.hintTooltipTextFontWeight, _TextField.textFieldTokens.tooltipTextFontLetterSpacing, _DatePickertokens.tokens.hintTooltipTextFontLetterSpacing, _TextField.textFieldTokens.tooltipTextFontLineHeight, _DatePickertokens.tokens.hintTooltipTextFontLineHeight, _TextField.textFieldTokens.tooltipContentLeftMargin, _DatePickertokens.tokens.hintTooltipContentLeftMargin, _TextField.textFieldTokens.tooltipArrowMaskWidth, _DatePickertokens.tokens.hintTooltipArrowMaskWidth, _TextField.textFieldTokens.tooltipArrowMaskHeight, _DatePickertokens.tokens.hintTooltipArrowMaskHeight, _TextField.textFieldTokens.tooltipArrowMaskImage, _DatePickertokens.tokens.hintTooltipArrowMaskImage, _TextField.textFieldTokens.tooltipArrowBackground, _DatePickertokens.tokens.hintTooltipArrowBackground, _TextField.textFieldTokens.tooltipArrowHeight, _DatePickertokens.tokens.hintTooltipArrowHeight, _TextField.textFieldTokens.tooltipArrowEdgeMargin, _DatePickertokens.tokens.hintTooltipArrowEdgeMargin, _DatePickertokens.classes.datePickerSuccess, _TextField.textFieldTokens.color, _DatePickertokens.tokens.textFieldColorSuccess, _DatePickertokens.tokens.textFieldColor, _TextField.textFieldTokens.backgroundColor, _DatePickertokens.tokens.textFieldBackgroundSuccessColor, _TextField.textFieldTokens.backgroundColorHover, _DatePickertokens.tokens.textFieldBackgroundSuccessColorHover, _TextField.textFieldTokens.backgroundColorFocus, _DatePickertokens.tokens.textFieldBackgroundSuccessColorFocus, _TextField.textFieldTokens.borderColor, _DatePickertokens.tokens.textFieldBorderColorSuccess, _TextField.textFieldTokens.borderColorHover, _DatePickertokens.tokens.textFieldBorderColorSuccessHover, _TextField.textFieldTokens.borderColorFocus, _DatePickertokens.tokens.textFieldBorderColorSuccessFocus, _TextField.textFieldTokens.dividerColor, _DatePickertokens.tokens.textFieldDividerColorSuccess, _TextField.textFieldTokens.contentSlotColor, _DatePickertokens.tokens.textFieldContentSlotColorSuccess, _DatePickertokens.tokens.textFieldContentSlotColor, _TextField.textFieldTokens.contentSlotColorHover, _DatePickertokens.tokens.textFieldContentSlotColorSuccessHover, _DatePickertokens.tokens.textFieldContentSlotColorHover, _TextField.textFieldTokens.contentSlotColorActive, _DatePickertokens.tokens.textFieldContentSlotColorSuccessActive, _DatePickertokens.tokens.textFieldContentSlotColorActive, _DatePickertokens.classes.datePickerError, _TextField.textFieldTokens.color, _DatePickertokens.tokens.textFieldColorError, _DatePickertokens.tokens.textFieldColor, _TextField.textFieldTokens.backgroundColor, _DatePickertokens.tokens.textFieldBackgroundErrorColor, _TextField.textFieldTokens.backgroundColorHover, _DatePickertokens.tokens.textFieldBackgroundErrorColorHover, _TextField.textFieldTokens.backgroundColorFocus, _DatePickertokens.tokens.textFieldBackgroundErrorColorFocus, _TextField.textFieldTokens.borderColor, _DatePickertokens.tokens.textFieldBorderColorError, _TextField.textFieldTokens.borderColorHover, _DatePickertokens.tokens.textFieldBorderColorErrorHover, _TextField.textFieldTokens.borderColorFocus, _DatePickertokens.tokens.textFieldBorderColorErrorFocus, _TextField.textFieldTokens.dividerColor, _DatePickertokens.tokens.textFieldDividerColorError, _TextField.textFieldTokens.contentSlotColor, _DatePickertokens.tokens.textFieldContentSlotColorError, _DatePickertokens.tokens.textFieldContentSlotColor, _TextField.textFieldTokens.contentSlotColorHover, _DatePickertokens.tokens.textFieldContentSlotColorErrorHover, _DatePickertokens.tokens.textFieldContentSlotColorHover, _TextField.textFieldTokens.contentSlotColorActive, _DatePickertokens.tokens.textFieldContentSlotColorErrorActive, _DatePickertokens.tokens.textFieldContentSlotColorActive, _DatePickertokens.classes.datePickerEdited, _TextField.textFieldTokens.color, _DatePickertokens.tokens.textFieldColorEdited, _DatePickertokens.tokens.textFieldColor, _TextField.textFieldTokens.backgroundColor, _DatePickertokens.tokens.textFieldBackgroundEditedColor, _TextField.textFieldTokens.backgroundColorHover, _DatePickertokens.tokens.textFieldBackgroundEditedColorHover, _TextField.textFieldTokens.backgroundColorFocus, _DatePickertokens.tokens.textFieldBackgroundEditedColorFocus, _TextField.textFieldTokens.borderColor, _DatePickertokens.tokens.textFieldBorderColorEdited, _TextField.textFieldTokens.borderColorHover, _DatePickertokens.tokens.textFieldBorderColorEditedHover, _TextField.textFieldTokens.borderColorFocus, _DatePickertokens.tokens.textFieldBorderColorEditedFocus, _TextField.textFieldTokens.dividerColor, _DatePickertokens.tokens.textFieldDividerColorEdited);
 const base = (0, _styledcomponents.css)([
     `display:inline-block;&.`,
     `{width:100%;& > div{width:100%;}}&.`,
@@ -373,7 +375,7 @@ const base = (0, _styledcomponents.css)([
 ], _DatePickertokens.classes.datePickerstretched, _DatePickertokens.classes.datePickerCalendarstretched);
 const LeftHelper = _styledcomponents.default.div.withConfig({
     displayName: "SingleDate.styles__LeftHelper",
-    componentId: "sc-8ec0099a-1"
+    componentId: "sc-9ba64415-1"
 })([
     `color:var(`,
     `);&.`,

package/dist/styled-components/cjs/components/DateTimePicker/DateTimePicker.js

@@ -86,7 +86,7 @@ const dateTimePickerRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ class
         'top',
         'bottom'
     ], offset, frame = 'document', zIndex, closeOnOverlayClick = true, closeOnEsc = true, usePortal = false, // calendar props
-    type = 'Days', lang = 'ru', dateFormat = 'DD.MM.YYYY', timeFormat = 'HH:mm:ss', dateTimeSeparator = ' ', maskWithFormat, hasTimeFormat = false, min, max, renderFromDate, includeEdgeDates, isDouble, dateOnTimeSelectOnly, dateShortcuts, dateShortcutsPlacement = 'left', dateShortcutsWidth, eventTooltipOptions, eventList, disabledList, eventMonthList, disabledMonthList, eventQuarterList, disabledQuarterList, quarterNames, eventYearList, disabledYearList, calendarContainerWidth, calendarContainerHeight, stretched, // input props
+    type = 'Days', lang = 'ru', periodSelectorAlign, dateFormat = 'DD.MM.YYYY', timeFormat = 'HH:mm:ss', dateTimeSeparator = ' ', maskWithFormat, hasTimeFormat = false, min, max, renderFromDate, includeEdgeDates, isDouble, dateOnTimeSelectOnly, dateShortcuts, dateShortcutsPlacement = 'left', dateShortcutsWidth, eventTooltipOptions, eventList, disabledList, eventMonthList, disabledMonthList, eventQuarterList, disabledQuarterList, quarterNames, eventYearList, disabledYearList, calendarContainerWidth, calendarContainerHeight, stretched, // input props
     label, labelPlacement = 'outer', titleCaption, keepPlaceholder, requiredPlacement = 'right', required = false, hasRequiredIndicator = false, preserveInvalidOnBlur, placeholder, valueError, valueSuccess, valueEdited, leftHelper, contentLeft, contentRight, textBefore, textAfter, autoComplete, // hint
     hintTrigger = 'hover', hintText, hintView = 'default', hintSize = 'm', hintTargetIcon, hintTargetPlacement = 'outer', hintPlacement = 'auto', hintHasArrow, hintOffset = [
         0,
@@ -288,6 +288,7 @@ const dateTimePickerRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ class
             renderFromDate: renderFromDate,
             includeEdgeDates: includeEdgeDates,
             lang: lang,
+            periodSelectorAlign: periodSelectorAlign,
             handleCalendarPick: handleCalendarPick,
             onChangeVisibleDate: onChangeVisibleDate
         }), /*#__PURE__*/ _react.default.createElement(_ui.StyledSeparator, null), /*#__PURE__*/ _react.default.createElement(_ui.TimeGrid, {

package/dist/styled-components/cjs/components/DateTimePicker/DateTimePicker.tokens.js

@@ -138,6 +138,7 @@ const tokens = {
     leftHelperLetterSpacing: '--plasma-date-time-picker__left-helper-letter-spacing',
     leftHelperLineHeight: '--plasma-date-time-picker__left-helper-line-height',
     titleCaptionOffset: '--plasma-date-time-picker-title-caption-offset',
+    titleCaptionMargin: '--plasma-date-time-picker-title-caption-margin',
     titleCaptionColor: '--plasma-date-time-picker-title-caption-color',
     titleCaptionFontFamily: '--plasma-date-time-picker-title-caption-font-family',
     titleCaptionFontStyle: '--plasma-date-time-picker-title-caption-font-style',

package/dist/styled-components/cjs/components/DateTimePicker/ui/CalendarGrid/CalendarGrid.js

@@ -15,7 +15,7 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const CalendarGrid = ({ isDouble, value, lang, calendarContainerWidth, calendarContainerHeight, handleCalendarPick, ...rest })=>{
+const CalendarGrid = ({ isDouble, value, lang, periodSelectorAlign, calendarContainerWidth, calendarContainerHeight, handleCalendarPick, ...rest })=>{
     const commonProps = {
         value,
         locale: lang,
@@ -31,6 +31,7 @@ const CalendarGrid = ({ isDouble, value, lang, calendarContainerWidth, calendarC
     }
     return /*#__PURE__*/ _react.default.createElement(_CalendarGridstyles.StyledCalendar, {
         ...commonProps,
-        ...rest
+        ...rest,
+        periodSelectorAlign: periodSelectorAlign
     });
 };