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

package/dist/emotion/es/components/Carousel/CarouselNew/hooks/useCarousel.js

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } fr
 import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
 import { getGapWidth, getClosestIndex, getCalculatedPos } from "../utils";
 import { VIRTUAL_OVERSCAN, DEFAULT_ESTIMATED_SLIDE_WIDTH, ITEM_VIRTUAL_ATTRIBUTE } from "../Carousel";
+const AXIS_LOCK_THRESHOLD = 8;
 // Хук инкапсулирует scroll, swipe и виртуализацию трека карусели.
 export const useCarousel = ({ index, scrollAlign, onChangeIndex, swipeEnabled, slidesAmount, gap, virtual = false })=>{
     const scrollRef = useRef(null);
@@ -226,8 +227,10 @@ export const useCarousel = ({ index, scrollAlign, onChangeIndex, swipeEnabled, s
             return;
         }
         let startX = 0;
+        let startY = 0;
         let startScrollLeft = 0;
         let activePointerId = null;
+        let axisLocked = false;
         let initialScrollBehavior = '';
         let initialScrollSnapType = '';
         // Возвращает inline-настройки scroll после завершения drag-взаимодействия.
@@ -238,6 +241,7 @@ export const useCarousel = ({ index, scrollAlign, onChangeIndex, swipeEnabled, s
         // Сбрасывает служебное состояние drag/swipe.
         const resetInteraction = ()=>{
             activePointerId = null;
+            axisLocked = false;
             isInteracting.current = false;
             restoreScrollBehavior();
         };
@@ -265,9 +269,8 @@ export const useCarousel = ({ index, scrollAlign, onChangeIndex, swipeEnabled, s
             });
             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;
@@ -288,6 +291,24 @@ export const useCarousel = ({ index, scrollAlign, onChangeIndex, swipeEnabled, s
             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
             });
@@ -303,18 +324,26 @@ export const useCarousel = ({ index, scrollAlign, onChangeIndex, swipeEnabled, s
             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/emotion/es/components/Combobox/Combobox.js

@@ -265,11 +265,10 @@ import { Context } from "./Combobox.context";
             portal: portal,
             listWidth: listWidth,
             offset: _offset,
-            target: (referenceRef)=>/*#__PURE__*/ React.createElement("div", {
-                    onClick: handleTargetClick
-                }, /*#__PURE__*/ React.createElement(StyledTextField, {
+            target: (referenceRef)=>/*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement(StyledTextField, {
                     ref: name ? inputRef : inputForkRef,
                     inputWrapperRef: referenceRef,
+                    _onFieldClick: handleTargetClick,
                     opened: isListOpened,
                     value: textValue,
                     onChange: handleTextValueChange,

package/dist/emotion/es/components/Combobox/Combobox.styles.js

@@ -7,15 +7,15 @@ import { tokens, constants, classes } from "./Combobox.tokens";
 const mergedConfig = mergeConfig(emptyStateConfig);
 const EmptyState = component(mergedConfig);
 export const ListWrapper = /*#__PURE__*/ styled("div", {
-    target: "e74q0g00",
+    target: "eee0u2o0",
     label: "ListWrapper"
 })("width:", ({ listWidth })=>listWidth || '100%', ";padding:calc(var(", tokens.padding, ") + var(", tokens.dropdownBorderWidth, ",0rem));border-radius:var(", tokens.borderRadius, ");box-sizing:border-box;background:var(", tokens.dropdownBackgroundColor, ",var(", constants.background, "));box-shadow:", constants.boxShadow, ",inset 0 0 0 var(", tokens.dropdownBorderWidth, ",0rem) var(", tokens.dropdownBorderColor, ",transparent);");
 export const Ul = /*#__PURE__*/ styled("ul", {
-    target: "e74q0g01",
+    target: "eee0u2o1",
     label: "Ul"
 })("max-height:", ({ virtual, listMaxHeight })=>virtual ? 'auto' : listMaxHeight || 'auto', ";overflow-x:hidden;overflow-y:", ({ virtual })=>virtual ? 'visible' : 'auto', ";border-radius:calc(var(", tokens.borderRadius, ") - 0.125rem - var(", tokens.dropdownBorderWidth, ",0rem));margin:0;padding:0;.", classes.emptyStateWrapper, "{box-shadow:none;}");
 export const IconArrowWrapper = /*#__PURE__*/ styled("div", {
-    target: "e74q0g02",
+    target: "eee0u2o2",
     label: "IconArrowWrapper"
 })("line-height:0;color:var(", tokens.disclosureIconColor, ");cursor:", ({ disabled, readOnly })=>disabled || readOnly ? 'inherit' : 'pointer', ";.", classes.arrowInverse, "{transform:rotate(-180deg);}&:hover,&:active{color:", ({ disabled, readOnly })=>disabled || readOnly ? `var(${tokens.disclosureIconColor})` : `var(${tokens.disclosureIconColorHover})`, ";}");
 // TODO: Удалить после поддержки JS переменных в конфиге компонент
@@ -24,15 +24,17 @@ export const sizeMap = {
     s: '1.5rem'
 };
 export const StyledArrow = /*#__PURE__*/ styled(IconDisclosureDownCentered, {
-    target: "e74q0g03",
+    target: "eee0u2o3",
     label: "StyledArrow"
 })("width:", ({ size = 'xs' })=>`var(${tokens.disclosureIconSize}, ${sizeMap[size]})`, ";height:", ({ size = 'xs' })=>`var(${tokens.disclosureIconSize}, ${sizeMap[size]})`, ";");
-export const base = /*#__PURE__*/ css("base");
+// Чипы не сжимаются и раздувают min-content, из-за этого Combobox вылезает из grid/flex.
+// minmax(0, 1fr) и min-width: 0 позволяют сжаться и корню, и внешней ячейке, не обрезая список.
+export const base = /*#__PURE__*/ css("display:grid;grid-template-columns:minmax(0,1fr);min-width:0;", "base");
 export const StyledEmptyState = /*#__PURE__*/ styled(EmptyState, {
-    target: "e74q0g04",
+    target: "eee0u2o4",
     label: "StyledEmptyState"
 })(emptyStateTokens.borderRadius, ":var(", tokens.textFieldBorderRadius, ");", emptyStateTokens.padding, ":var(", tokens.emptyStatePadding, ");", emptyStateTokens.fontFamily, ":var(", tokens.textFieldFontFamily, ");", emptyStateTokens.fontSize, ":var(", tokens.textFieldFontSize, ");", emptyStateTokens.fontStyle, ":var(", tokens.textFieldFontStyle, ");", emptyStateTokens.fontWeight, ":var(", tokens.textFieldFontWeight, ");", emptyStateTokens.fontLetterSpacing, ":var(", tokens.textFieldLetterSpacing, ");", emptyStateTokens.fontLineHeight, ":var(", tokens.textFieldLineHeight, ");");
 export const StyledLeftHelper = /*#__PURE__*/ styled("span", {
-    target: "e74q0g05",
+    target: "eee0u2o5",
     label: "StyledLeftHelper"
 })("margin:0;padding:0;");

package/dist/emotion/es/components/DatePicker/DatePicker.tokens.js

@@ -102,6 +102,7 @@ export 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/emotion/es/components/DatePicker/FloatingPopover.js

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

package/dist/emotion/es/components/DatePicker/RangeDate/RangeDate.js

@@ -30,7 +30,7 @@ export const datePickerRangeRoot = (Root)=>/*#__PURE__*/ 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, 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__*/ createRef();
         const rootRef = useRef(null);
         const innerRefFirst = useRef(null);
@@ -324,7 +324,16 @@ export const datePickerRangeRoot = (Root)=>/*#__PURE__*/ forwardRef(({ className
         const renderRange = (inputWrapperRef)=>/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(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,
@@ -492,6 +501,7 @@ export const datePickerRangeRoot = (Root)=>/*#__PURE__*/ forwardRef(({ className
             calendarContainerWidth: calendarContainerWidth,
             calendarContainerHeight: calendarContainerHeight,
             type: type,
+            periodSelectorAlign: periodSelectorAlign,
             onChangeVisibleDate: onChangeVisibleDate,
             onToggle: handleToggle,
             lang: lang,

package/dist/emotion/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.js

@@ -6,7 +6,7 @@ import { FloatingPopover } from "../../FloatingPopover";
 import { StyledCalendarContent } from "../../DatePickerBase.styles";
 import { getCalendarContainerSize, hasCustomCalendarContainerSize } from "../../utils";
 import { StyledCalendar, StyledCalendarDouble } from "./RangeDatePopover.styles";
-export 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 = [
+export 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 })=>{
@@ -151,6 +151,7 @@ export const RangeDatePopover = ({ rootWrapper: Root, target, referenceRef, open
         type: type,
         locale: lang,
         includeEdgeDates: includeEdgeDates,
+        periodSelectorAlign: periodSelectorAlign,
         onChangeValue: onChangeValue,
         onChangeStartOfRange: onChangeStartOfRange,
         onChangeSingleValue: onChangeSingleValue,

package/dist/emotion/es/components/DatePicker/SingleDate/SingleDate.js

@@ -30,7 +30,7 @@ export const datePickerRoot = (Root)=>/*#__PURE__*/ forwardRef(({ className, nam
         '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 = useRef(null);
         const inputForkRef = useForkRef(inputRef, ref);
@@ -205,6 +205,7 @@ export const datePickerRoot = (Root)=>/*#__PURE__*/ forwardRef(({ className, nam
             target: (referenceRef)=>/*#__PURE__*/ React.createElement(StyledInput, {
                     ref: inputForkRef,
                     inputWrapperRef: referenceRef,
+                    _onFieldClick: (event)=>handleToggle(true, event),
                     className: cls(datePickerErrorClass, datePickerSuccessClass, datePickerEditedClass),
                     value: inputValue,
                     size: size,
@@ -291,6 +292,7 @@ export const datePickerRoot = (Root)=>/*#__PURE__*/ forwardRef(({ className, nam
             includeEdgeDates: includeEdgeDates,
             isRange: false,
             locale: lang,
+            periodSelectorAlign: periodSelectorAlign,
             onChangeValue: handleCalendarPick,
             onChangeVisibleDate: onChangeVisibleDate
         })))), leftHelper && /*#__PURE__*/ React.createElement(LeftHelper, {

package/dist/emotion/es/components/DatePicker/SingleDate/SingleDate.styles.js

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

package/dist/emotion/es/components/DateTimePicker/DateTimePicker.js

@@ -23,7 +23,7 @@ export const dateTimePickerRoot = (Root)=>/*#__PURE__*/ forwardRef(({ className,
         '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,
@@ -225,6 +225,7 @@ export const dateTimePickerRoot = (Root)=>/*#__PURE__*/ forwardRef(({ className,
             renderFromDate: renderFromDate,
             includeEdgeDates: includeEdgeDates,
             lang: lang,
+            periodSelectorAlign: periodSelectorAlign,
             handleCalendarPick: handleCalendarPick,
             onChangeVisibleDate: onChangeVisibleDate
         }), /*#__PURE__*/ React.createElement(StyledSeparator, null), /*#__PURE__*/ React.createElement(TimeGrid, {

package/dist/emotion/es/components/DateTimePicker/DateTimePicker.tokens.js

@@ -117,6 +117,7 @@ export 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/emotion/es/components/DateTimePicker/ui/CalendarGrid/CalendarGrid.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { StyledCalendar, StyledCalendarDouble } from "./CalendarGrid.styles";
-export const CalendarGrid = ({ isDouble, value, lang, calendarContainerWidth, calendarContainerHeight, handleCalendarPick, ...rest })=>{
+export const CalendarGrid = ({ isDouble, value, lang, periodSelectorAlign, calendarContainerWidth, calendarContainerHeight, handleCalendarPick, ...rest })=>{
     const commonProps = {
         value,
         locale: lang,
@@ -16,6 +16,7 @@ export const CalendarGrid = ({ isDouble, value, lang, calendarContainerWidth, ca
     }
     return /*#__PURE__*/ React.createElement(StyledCalendar, {
         ...commonProps,
-        ...rest
+        ...rest,
+        periodSelectorAlign: periodSelectorAlign
     });
 };

package/dist/emotion/es/components/DateTimePicker/ui/Input/Input.styles.js

@@ -6,6 +6,6 @@ const mergedTextFieldConfig = mergeConfig(textFieldConfig);
 const TextField = component(mergedTextFieldConfig);
 // NOTE: переопределение токенов TextField
 export const StyledInput = /*#__PURE__*/ styled(TextField, {
-    target: "elojb780",
+    target: "ez2ntoz0",
     label: "StyledInput"
-})("width:100%;", textFieldTokens.color, ":var(", tokens.textFieldColor, ");", textFieldTokens.placeholderColor, ":var(", tokens.textFieldPlaceholderColor, ");", textFieldTokens.placeholderColorFocus, ":var(", tokens.textFieldPlaceholderColorFocus, ");", textFieldTokens.caretColor, ":var(", tokens.textFieldCaretColor, ");", textFieldTokens.focusColor, ":var(", tokens.textFieldFocusColor, ");", textFieldTokens.backgroundColor, ":var(", tokens.textFieldBackgroundColor, ");", textFieldTokens.backgroundColorHover, ":var(", tokens.textFieldBackgroundColorHover, ");", textFieldTokens.backgroundColorFocus, ":var(", tokens.textFieldBackgroundColorFocus, ");", textFieldTokens.borderWidth, ":var(", tokens.textFieldBorderWidth, ");", textFieldTokens.borderRadius, ":var(", tokens.textFieldBorderRadius, ");", textFieldTokens.boxShadowSecondary, ":var(", tokens.textFieldBoxShadowSecondary, ");", textFieldTokens.borderColor, ":var(", tokens.textFieldBorderColor, ");", textFieldTokens.borderColorHover, ":var(", tokens.textFieldBorderColorHover, ");", textFieldTokens.borderColorFocus, ":var(", tokens.textFieldBorderColorFocus, ");", textFieldTokens.dividerColor, ":var(", tokens.textFieldDividerColor, ");", textFieldTokens.dividerColorHover, ":var(", tokens.textFieldDividerColorHover, ");", textFieldTokens.dividerColorFocus, ":var(", tokens.textFieldDividerColorFocus, ");", textFieldTokens.dividerColorReadOnly, ":var(", tokens.textFieldDividerColorReadOnly, ");", textFieldTokens.dividerWidth, ":var(", tokens.textFieldDividerWidth, ");", textFieldTokens.colorReadOnly, ":var(", tokens.textFieldColorReadOnly, ");", textFieldTokens.backgroundColorReadOnly, ":var(", tokens.textFieldBackgroundColorReadOnly, ");", textFieldTokens.readOnlyOpacity, ":var(", tokens.textFieldReadOnlyOpacity, ");", textFieldTokens.borderColorReadOnly, ":var(", tokens.textFieldBorderColorReadOnly, ");", textFieldTokens.placeholderColorReadOnly, ":var(", tokens.textFieldPlaceholderColorReadOnly, ");", textFieldTokens.height, ":var(", tokens.textFieldHeight, ");", textFieldTokens.padding, ":var(", tokens.textFieldPadding, ");", textFieldTokens.labelInnerPadding, ":var(", tokens.labelInnerPadding, ");", textFieldTokens.contentLabelInnerPadding, ":var(", tokens.contentLabelInnerPadding, ");", textFieldTokens.labelOffset, ":var(", tokens.labelOffset, ");", textFieldTokens.labelFontFamily, ":var(", tokens.labelFontFamily, ");", textFieldTokens.labelFontStyle, ":var(", tokens.labelFontStyle, ");", textFieldTokens.labelFontSize, ":var(", tokens.labelFontSize, ");", textFieldTokens.labelFontWeight, ":var(", tokens.labelFontWeight, ");", textFieldTokens.labelLetterSpacing, ":var(", tokens.labelLetterSpacing, ");", textFieldTokens.labelLineHeight, ":var(", tokens.labelLineHeight, ");", textFieldTokens.labelInnerFontFamily, ":var(", tokens.labelInnerFontFamily, ");", textFieldTokens.labelInnerFontSize, ":var(", tokens.labelInnerFontSize, ");", textFieldTokens.labelInnerFontStyle, ":var(", tokens.labelInnerFontStyle, ");", textFieldTokens.labelInnerFontWeight, ":var(", tokens.labelInnerFontWeight, ");", textFieldTokens.labelInnerLetterSpacing, ":var(", tokens.labelInnerLetterSpacing, ");", textFieldTokens.labelInnerLineHeight, ":var(", tokens.labelInnerLineHeight, ");", textFieldTokens.labelColor, ":var(", tokens.labelColor, ");", textFieldTokens.labelColorReadOnly, ":var(", tokens.labelColorReadOnly, ");", textFieldTokens.titleCaptionInnerLabelOffset, ":var(", tokens.titleCaptionOffset, ");", textFieldTokens.titleCaptionColor, ":var(", tokens.titleCaptionColor, ");", textFieldTokens.titleCaptionFontFamily, ":var(", tokens.titleCaptionFontFamily, ");", textFieldTokens.titleCaptionFontStyle, ":var(", tokens.titleCaptionFontStyle, ");", textFieldTokens.titleCaptionFontSize, ":var(", tokens.titleCaptionFontSize, ");", textFieldTokens.titleCaptionFontWeight, ":var(", tokens.titleCaptionFontWeight, ");", textFieldTokens.titleCaptionLetterSpacing, ":var(", tokens.titleCaptionLetterSpacing, ");", textFieldTokens.titleCaptionLineHeight, ":var(", tokens.titleCaptionLineHeight, ");", textFieldTokens.indicatorColor, ":var(", tokens.indicatorColor, ");", textFieldTokens.indicatorSizeInner, ":var(", tokens.indicatorSize, ");", textFieldTokens.indicatorSizeOuter, ":var(", tokens.indicatorSizeOuter, ");", textFieldTokens.indicatorLabelPlacementInner, ":var(", tokens.indicatorPlacement, ");", textFieldTokens.indicatorLabelPlacementOuter, ":var(", tokens.indicatorOuterPlacement, ");", textFieldTokens.indicatorLabelPlacementInnerRight, ":var(", tokens.indicatorPlacementRight, ");", textFieldTokens.indicatorLabelPlacementOuterRight, ":var(", tokens.indicatorOuterPlacementRight, ");", textFieldTokens.hintMargin, ":var(", tokens.hintMargin, ");", textFieldTokens.hintTargetSize, ":var(", tokens.hintTargetSize, ");", textFieldTokens.hintCustomIconTargetSize, ":var(", tokens.hintCustomIconTargetSize, ");", textFieldTokens.hintIconColor, ":var(", tokens.hintIconColor, ");", textFieldTokens.hintInnerLabelPlacementOffset, ":var(", tokens.hintInnerLabelPlacementOffset, ");", textFieldTokens.tooltipPaddingTop, ":var(", tokens.hintTooltipPaddingTop, ");", textFieldTokens.tooltipPaddingRight, ":var(", tokens.hintTooltipPaddingRight, ");", textFieldTokens.tooltipPaddingBottom, ":var(", tokens.hintTooltipPaddingBottom, ");", textFieldTokens.tooltipPaddingLeft, ":var(", tokens.hintTooltipPaddingLeft, ");", textFieldTokens.tooltipMinHeight, ":var(", tokens.hintTooltipMinHeight, ");", textFieldTokens.tooltipBackgroundColor, ":var(", tokens.hintTooltipBackgroundColor, ");", textFieldTokens.tooltipBoxShadow, ":var(", tokens.hintTooltipBoxShadow, ");", textFieldTokens.tooltipBorderRadius, ":var(", tokens.hintTooltipBorderRadius, ");", textFieldTokens.tooltipColor, ":var(", tokens.hintTooltipColor, ");", textFieldTokens.tooltipTextFontFamily, ":var(", tokens.hintTooltipTextFontFamily, ");", textFieldTokens.tooltipTextFontSize, ":var(", tokens.hintTooltipTextFontSize, ");", textFieldTokens.tooltipTextFontStyle, ":var(", tokens.hintTooltipTextFontStyle, ");", textFieldTokens.tooltipTextFontWeight, ":var(", tokens.hintTooltipTextFontWeight, ");", textFieldTokens.tooltipTextFontLetterSpacing, ":var(", tokens.hintTooltipTextFontLetterSpacing, ");", textFieldTokens.tooltipTextFontLineHeight, ":var(", tokens.hintTooltipTextFontLineHeight, ");", textFieldTokens.tooltipContentLeftMargin, ":var(", tokens.hintTooltipContentLeftMargin, ");", textFieldTokens.tooltipArrowMaskWidth, ":var(", tokens.hintTooltipArrowMaskWidth, ");", textFieldTokens.tooltipArrowMaskHeight, ":var(", tokens.hintTooltipArrowMaskHeight, ");", textFieldTokens.tooltipArrowMaskImage, ":var(", tokens.hintTooltipArrowMaskImage, ");", textFieldTokens.tooltipArrowBackground, ":var(", tokens.hintTooltipArrowBackground, ");", textFieldTokens.tooltipArrowHeight, ":var(", tokens.hintTooltipArrowHeight, ");", textFieldTokens.tooltipArrowEdgeMargin, ":var(", tokens.hintTooltipArrowEdgeMargin, ");", textFieldTokens.leftContentMargin, ":var(", tokens.textFieldLeftContentMargin, ");", textFieldTokens.rightContentMargin, ":var(", tokens.textFieldRightContentMargin, ");", textFieldTokens.rightContentWithHintMargin, ":var(", tokens.textFieldRightContentWithHintMargin, ");", textFieldTokens.contentRightWrapperGap, ":var(", tokens.textFieldContentRightWrapperGap, ");", textFieldTokens.contentRightWrapperMargin, ":var(", tokens.textFieldContentRightWrapperMargin, ");", textFieldTokens.fontFamily, ":var(", tokens.textFieldFontFamily, ");", textFieldTokens.fontSize, ":var(", tokens.textFieldFontSize, ");", textFieldTokens.fontStyle, ":var(", tokens.textFieldFontStyle, ");", textFieldTokens.fontWeight, ":var(", tokens.textFieldFontWeight, ");", textFieldTokens.letterSpacing, ":var(", tokens.textFieldLetterSpacing, ");", textFieldTokens.lineHeight, ":var(", tokens.textFieldLineHeight, ");", textFieldTokens.disabledOpacity, ":var(", tokens.disabledOpacity, ");", textFieldTokens.disabledBackgroundOpacity, ":var(", tokens.disabledBackgroundOpacity, ");", textFieldTokens.disabledInnerContentOpacity, ":var(", tokens.disabledInnerContentOpacity, ");", textFieldTokens.textBeforeColor, ":var(", tokens.textFieldTextBeforeColor, ");", textFieldTokens.textAfterColor, ":var(", tokens.textFieldTextAfterColor, ");", textFieldTokens.textBeforeMargin, ":var(", tokens.textFieldTextBeforeMargin, ");", textFieldTokens.textAfterMargin, ":var(", tokens.textFieldTextAfterMargin, ");", textFieldTokens.contentSlotColor, ":var(", tokens.textFieldContentSlotColor, ",var(", tokens.textFieldColor, "));", textFieldTokens.contentSlotColorHover, ":var(", tokens.textFieldContentSlotColorHover, ",var(", tokens.textFieldColor, "));", textFieldTokens.contentSlotColorActive, ":var(", tokens.textFieldContentSlotColorActive, ",var(", tokens.textFieldColor, "));", textFieldTokens.contentSlotRightColor, ":var(", tokens.textFieldContentRightSlotColor, ",var(", textFieldTokens.contentSlotColor, "));", textFieldTokens.contentSlotRightColorHover, ":var(", tokens.textFieldContentRightSlotColorHover, ",var(", textFieldTokens.contentSlotRightColor, "));", textFieldTokens.contentSlotRightOpacityReadOnly, ":var(", tokens.textFieldContentSlotRightOpacityReadOnly, ");&.", classes.error, "{", textFieldTokens.backgroundColor, ":var(", tokens.textFieldBackgroundErrorColor, ");", textFieldTokens.backgroundColorHover, ":var(", tokens.textFieldBackgroundErrorColorHover, ");", textFieldTokens.backgroundColorFocus, ":var(", tokens.textFieldBackgroundErrorColorFocus, ");", textFieldTokens.borderColor, ":var(", tokens.textFieldBorderColorError, ");", textFieldTokens.borderColorHover, ":var(", tokens.textFieldBorderColorErrorHover, ");", textFieldTokens.borderColorFocus, ":var(", tokens.textFieldBorderColorErrorFocus, ");", textFieldTokens.dividerColor, ":var(", tokens.textFieldDividerColorError, ");}&.", classes.success, "{", textFieldTokens.backgroundColor, ":var(", tokens.textFieldBackgroundSuccessColor, ");", textFieldTokens.backgroundColorHover, ":var(", tokens.textFieldBackgroundSuccessColorHover, ");", textFieldTokens.backgroundColorFocus, ":var(", tokens.textFieldBackgroundSuccessColorFocus, ");", textFieldTokens.borderColor, ":var(", tokens.textFieldBorderColorSuccess, ");", textFieldTokens.borderColorHover, ":var(", tokens.textFieldBorderColorSuccessHover, ");", textFieldTokens.borderColorFocus, ":var(", tokens.textFieldBorderColorSuccessFocus, ");", textFieldTokens.dividerColor, ":var(", tokens.textFieldDividerColorSuccess, ");}&.", classes.edited, "{", textFieldTokens.backgroundColor, ":var(", tokens.textFieldBackgroundEditedColor, ");", textFieldTokens.backgroundColorHover, ":var(", tokens.textFieldBackgroundEditedColorHover, ");", textFieldTokens.backgroundColorFocus, ":var(", tokens.textFieldBackgroundEditedColorFocus, ");", textFieldTokens.borderColor, ":var(", tokens.textFieldBorderColorEdited, ");", textFieldTokens.borderColorHover, ":var(", tokens.textFieldBorderColorEditedHover, ");", textFieldTokens.borderColorFocus, ":var(", tokens.textFieldBorderColorEditedFocus, ");", textFieldTokens.dividerColor, ":var(", tokens.textFieldDividerColorEdited, ");}");
+})("width:100%;", textFieldTokens.color, ":var(", tokens.textFieldColor, ");", textFieldTokens.placeholderColor, ":var(", tokens.textFieldPlaceholderColor, ");", textFieldTokens.placeholderColorFocus, ":var(", tokens.textFieldPlaceholderColorFocus, ");", textFieldTokens.caretColor, ":var(", tokens.textFieldCaretColor, ");", textFieldTokens.focusColor, ":var(", tokens.textFieldFocusColor, ");", textFieldTokens.backgroundColor, ":var(", tokens.textFieldBackgroundColor, ");", textFieldTokens.backgroundColorHover, ":var(", tokens.textFieldBackgroundColorHover, ");", textFieldTokens.backgroundColorFocus, ":var(", tokens.textFieldBackgroundColorFocus, ");", textFieldTokens.borderWidth, ":var(", tokens.textFieldBorderWidth, ");", textFieldTokens.borderRadius, ":var(", tokens.textFieldBorderRadius, ");", textFieldTokens.boxShadowSecondary, ":var(", tokens.textFieldBoxShadowSecondary, ");", textFieldTokens.borderColor, ":var(", tokens.textFieldBorderColor, ");", textFieldTokens.borderColorHover, ":var(", tokens.textFieldBorderColorHover, ");", textFieldTokens.borderColorFocus, ":var(", tokens.textFieldBorderColorFocus, ");", textFieldTokens.dividerColor, ":var(", tokens.textFieldDividerColor, ");", textFieldTokens.dividerColorHover, ":var(", tokens.textFieldDividerColorHover, ");", textFieldTokens.dividerColorFocus, ":var(", tokens.textFieldDividerColorFocus, ");", textFieldTokens.dividerColorReadOnly, ":var(", tokens.textFieldDividerColorReadOnly, ");", textFieldTokens.dividerWidth, ":var(", tokens.textFieldDividerWidth, ");", textFieldTokens.colorReadOnly, ":var(", tokens.textFieldColorReadOnly, ");", textFieldTokens.backgroundColorReadOnly, ":var(", tokens.textFieldBackgroundColorReadOnly, ");", textFieldTokens.readOnlyOpacity, ":var(", tokens.textFieldReadOnlyOpacity, ");", textFieldTokens.borderColorReadOnly, ":var(", tokens.textFieldBorderColorReadOnly, ");", textFieldTokens.placeholderColorReadOnly, ":var(", tokens.textFieldPlaceholderColorReadOnly, ");", textFieldTokens.height, ":var(", tokens.textFieldHeight, ");", textFieldTokens.padding, ":var(", tokens.textFieldPadding, ");", textFieldTokens.labelInnerPadding, ":var(", tokens.labelInnerPadding, ");", textFieldTokens.contentLabelInnerPadding, ":var(", tokens.contentLabelInnerPadding, ");", textFieldTokens.labelOffset, ":var(", tokens.labelOffset, ");", textFieldTokens.labelFontFamily, ":var(", tokens.labelFontFamily, ");", textFieldTokens.labelFontStyle, ":var(", tokens.labelFontStyle, ");", textFieldTokens.labelFontSize, ":var(", tokens.labelFontSize, ");", textFieldTokens.labelFontWeight, ":var(", tokens.labelFontWeight, ");", textFieldTokens.labelLetterSpacing, ":var(", tokens.labelLetterSpacing, ");", textFieldTokens.labelLineHeight, ":var(", tokens.labelLineHeight, ");", textFieldTokens.labelInnerFontFamily, ":var(", tokens.labelInnerFontFamily, ");", textFieldTokens.labelInnerFontSize, ":var(", tokens.labelInnerFontSize, ");", textFieldTokens.labelInnerFontStyle, ":var(", tokens.labelInnerFontStyle, ");", textFieldTokens.labelInnerFontWeight, ":var(", tokens.labelInnerFontWeight, ");", textFieldTokens.labelInnerLetterSpacing, ":var(", tokens.labelInnerLetterSpacing, ");", textFieldTokens.labelInnerLineHeight, ":var(", tokens.labelInnerLineHeight, ");", textFieldTokens.labelColor, ":var(", tokens.labelColor, ");", textFieldTokens.labelColorReadOnly, ":var(", tokens.labelColorReadOnly, ");", textFieldTokens.titleCaptionMargin, ":var(", tokens.titleCaptionMargin, ");", textFieldTokens.titleCaptionInnerLabelOffset, ":var(", tokens.titleCaptionOffset, ");", textFieldTokens.titleCaptionColor, ":var(", tokens.titleCaptionColor, ");", textFieldTokens.titleCaptionFontFamily, ":var(", tokens.titleCaptionFontFamily, ");", textFieldTokens.titleCaptionFontStyle, ":var(", tokens.titleCaptionFontStyle, ");", textFieldTokens.titleCaptionFontSize, ":var(", tokens.titleCaptionFontSize, ");", textFieldTokens.titleCaptionFontWeight, ":var(", tokens.titleCaptionFontWeight, ");", textFieldTokens.titleCaptionLetterSpacing, ":var(", tokens.titleCaptionLetterSpacing, ");", textFieldTokens.titleCaptionLineHeight, ":var(", tokens.titleCaptionLineHeight, ");", textFieldTokens.indicatorColor, ":var(", tokens.indicatorColor, ");", textFieldTokens.indicatorSizeInner, ":var(", tokens.indicatorSize, ");", textFieldTokens.indicatorSizeOuter, ":var(", tokens.indicatorSizeOuter, ");", textFieldTokens.indicatorLabelPlacementInner, ":var(", tokens.indicatorPlacement, ");", textFieldTokens.indicatorLabelPlacementOuter, ":var(", tokens.indicatorOuterPlacement, ");", textFieldTokens.indicatorLabelPlacementInnerRight, ":var(", tokens.indicatorPlacementRight, ");", textFieldTokens.indicatorLabelPlacementOuterRight, ":var(", tokens.indicatorOuterPlacementRight, ");", textFieldTokens.hintMargin, ":var(", tokens.hintMargin, ");", textFieldTokens.hintTargetSize, ":var(", tokens.hintTargetSize, ");", textFieldTokens.hintCustomIconTargetSize, ":var(", tokens.hintCustomIconTargetSize, ");", textFieldTokens.hintIconColor, ":var(", tokens.hintIconColor, ");", textFieldTokens.hintInnerLabelPlacementOffset, ":var(", tokens.hintInnerLabelPlacementOffset, ");", textFieldTokens.tooltipPaddingTop, ":var(", tokens.hintTooltipPaddingTop, ");", textFieldTokens.tooltipPaddingRight, ":var(", tokens.hintTooltipPaddingRight, ");", textFieldTokens.tooltipPaddingBottom, ":var(", tokens.hintTooltipPaddingBottom, ");", textFieldTokens.tooltipPaddingLeft, ":var(", tokens.hintTooltipPaddingLeft, ");", textFieldTokens.tooltipMinHeight, ":var(", tokens.hintTooltipMinHeight, ");", textFieldTokens.tooltipBackgroundColor, ":var(", tokens.hintTooltipBackgroundColor, ");", textFieldTokens.tooltipBoxShadow, ":var(", tokens.hintTooltipBoxShadow, ");", textFieldTokens.tooltipBorderRadius, ":var(", tokens.hintTooltipBorderRadius, ");", textFieldTokens.tooltipColor, ":var(", tokens.hintTooltipColor, ");", textFieldTokens.tooltipTextFontFamily, ":var(", tokens.hintTooltipTextFontFamily, ");", textFieldTokens.tooltipTextFontSize, ":var(", tokens.hintTooltipTextFontSize, ");", textFieldTokens.tooltipTextFontStyle, ":var(", tokens.hintTooltipTextFontStyle, ");", textFieldTokens.tooltipTextFontWeight, ":var(", tokens.hintTooltipTextFontWeight, ");", textFieldTokens.tooltipTextFontLetterSpacing, ":var(", tokens.hintTooltipTextFontLetterSpacing, ");", textFieldTokens.tooltipTextFontLineHeight, ":var(", tokens.hintTooltipTextFontLineHeight, ");", textFieldTokens.tooltipContentLeftMargin, ":var(", tokens.hintTooltipContentLeftMargin, ");", textFieldTokens.tooltipArrowMaskWidth, ":var(", tokens.hintTooltipArrowMaskWidth, ");", textFieldTokens.tooltipArrowMaskHeight, ":var(", tokens.hintTooltipArrowMaskHeight, ");", textFieldTokens.tooltipArrowMaskImage, ":var(", tokens.hintTooltipArrowMaskImage, ");", textFieldTokens.tooltipArrowBackground, ":var(", tokens.hintTooltipArrowBackground, ");", textFieldTokens.tooltipArrowHeight, ":var(", tokens.hintTooltipArrowHeight, ");", textFieldTokens.tooltipArrowEdgeMargin, ":var(", tokens.hintTooltipArrowEdgeMargin, ");", textFieldTokens.leftContentMargin, ":var(", tokens.textFieldLeftContentMargin, ");", textFieldTokens.rightContentMargin, ":var(", tokens.textFieldRightContentMargin, ");", textFieldTokens.rightContentWithHintMargin, ":var(", tokens.textFieldRightContentWithHintMargin, ");", textFieldTokens.contentRightWrapperGap, ":var(", tokens.textFieldContentRightWrapperGap, ");", textFieldTokens.contentRightWrapperMargin, ":var(", tokens.textFieldContentRightWrapperMargin, ");", textFieldTokens.fontFamily, ":var(", tokens.textFieldFontFamily, ");", textFieldTokens.fontSize, ":var(", tokens.textFieldFontSize, ");", textFieldTokens.fontStyle, ":var(", tokens.textFieldFontStyle, ");", textFieldTokens.fontWeight, ":var(", tokens.textFieldFontWeight, ");", textFieldTokens.letterSpacing, ":var(", tokens.textFieldLetterSpacing, ");", textFieldTokens.lineHeight, ":var(", tokens.textFieldLineHeight, ");", textFieldTokens.disabledOpacity, ":var(", tokens.disabledOpacity, ");", textFieldTokens.disabledBackgroundOpacity, ":var(", tokens.disabledBackgroundOpacity, ");", textFieldTokens.disabledInnerContentOpacity, ":var(", tokens.disabledInnerContentOpacity, ");", textFieldTokens.textBeforeColor, ":var(", tokens.textFieldTextBeforeColor, ");", textFieldTokens.textAfterColor, ":var(", tokens.textFieldTextAfterColor, ");", textFieldTokens.textBeforeMargin, ":var(", tokens.textFieldTextBeforeMargin, ");", textFieldTokens.textAfterMargin, ":var(", tokens.textFieldTextAfterMargin, ");", textFieldTokens.contentSlotColor, ":var(", tokens.textFieldContentSlotColor, ",var(", tokens.textFieldColor, "));", textFieldTokens.contentSlotColorHover, ":var(", tokens.textFieldContentSlotColorHover, ",var(", tokens.textFieldColor, "));", textFieldTokens.contentSlotColorActive, ":var(", tokens.textFieldContentSlotColorActive, ",var(", tokens.textFieldColor, "));", textFieldTokens.contentSlotRightColor, ":var(", tokens.textFieldContentRightSlotColor, ",var(", textFieldTokens.contentSlotColor, "));", textFieldTokens.contentSlotRightColorHover, ":var(", tokens.textFieldContentRightSlotColorHover, ",var(", textFieldTokens.contentSlotRightColor, "));", textFieldTokens.contentSlotRightOpacityReadOnly, ":var(", tokens.textFieldContentSlotRightOpacityReadOnly, ");&.", classes.error, "{", textFieldTokens.backgroundColor, ":var(", tokens.textFieldBackgroundErrorColor, ");", textFieldTokens.backgroundColorHover, ":var(", tokens.textFieldBackgroundErrorColorHover, ");", textFieldTokens.backgroundColorFocus, ":var(", tokens.textFieldBackgroundErrorColorFocus, ");", textFieldTokens.borderColor, ":var(", tokens.textFieldBorderColorError, ");", textFieldTokens.borderColorHover, ":var(", tokens.textFieldBorderColorErrorHover, ");", textFieldTokens.borderColorFocus, ":var(", tokens.textFieldBorderColorErrorFocus, ");", textFieldTokens.dividerColor, ":var(", tokens.textFieldDividerColorError, ");}&.", classes.success, "{", textFieldTokens.backgroundColor, ":var(", tokens.textFieldBackgroundSuccessColor, ");", textFieldTokens.backgroundColorHover, ":var(", tokens.textFieldBackgroundSuccessColorHover, ");", textFieldTokens.backgroundColorFocus, ":var(", tokens.textFieldBackgroundSuccessColorFocus, ");", textFieldTokens.borderColor, ":var(", tokens.textFieldBorderColorSuccess, ");", textFieldTokens.borderColorHover, ":var(", tokens.textFieldBorderColorSuccessHover, ");", textFieldTokens.borderColorFocus, ":var(", tokens.textFieldBorderColorSuccessFocus, ");", textFieldTokens.dividerColor, ":var(", tokens.textFieldDividerColorSuccess, ");}&.", classes.edited, "{", textFieldTokens.backgroundColor, ":var(", tokens.textFieldBackgroundEditedColor, ");", textFieldTokens.backgroundColorHover, ":var(", tokens.textFieldBackgroundEditedColorHover, ");", textFieldTokens.backgroundColorFocus, ":var(", tokens.textFieldBackgroundEditedColorFocus, ");", textFieldTokens.borderColor, ":var(", tokens.textFieldBorderColorEdited, ");", textFieldTokens.borderColorHover, ":var(", tokens.textFieldBorderColorEditedHover, ");", textFieldTokens.borderColorFocus, ":var(", tokens.textFieldBorderColorEditedFocus, ");", textFieldTokens.dividerColor, ":var(", tokens.textFieldDividerColorEdited, ");}");

package/dist/emotion/es/components/Drawer/Drawer.styles.js

@@ -90,10 +90,10 @@ const getAnimationStyles = ()=>{
     }, '');
 };
 export const StyledPanel = /*#__PURE__*/ styled(Panel, {
-    target: "encu7410",
+    target: "edfay9n0",
     label: "StyledPanel"
-})(panelTokens.closeColor, ":var(", tokens.closeIconColor, ");");
+})(panelTokens.closeColor, ":var(", tokens.closeIconColor, ");", panelTokens.scrollbarWidth, ":var(", tokens.scrollbarWidth, ");", panelTokens.scrollbarOffsetRight, ":var(", tokens.scrollbarOffsetRight, ");", panelTokens.scrollbarThumbBackgroundColor, ":var(", tokens.scrollbarThumbBackgroundColor, ");", panelTokens.scrollbarThumbBackgroundColorHover, ":var(", tokens.scrollbarThumbBackgroundColorHover, ");", panelTokens.scrollbarThumbBackgroundColorActive, ":var(", tokens.scrollbarThumbBackgroundColorActive, ");", panelTokens.scrollbarTrackBackgroundColor, ":var(", tokens.scrollbarTrackBackgroundColor, ");");
 export const StyledPopup = /*#__PURE__*/ styled(Popup, {
-    target: "encu7411",
+    target: "edfay9n1",
     label: "StyledPopup"
 })("&&.", classes.overlay, "{animation:fadeIn 0.2s forwards;scrollbar-gutter:stable;}&&.", popupClasses.endAnimation, " .", classes.overlay, "{animation:fadeOut 0.2s forwards;}@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}@keyframes fadeOut{from{opacity:1;}to{opacity:0;}}&& .", popupClasses.root, ",&& .", popupClasses.root, " > div{width:", ({ width })=>width || 'auto', ";height:", ({ height })=>height || 'auto', ";}", getAnimationStyles(), "    &.", classes.enterCustomAnimation, "{&& .", popupClasses.root, "{animation:", ({ drawerAnimationInfo })=>drawerAnimationInfo?.enter || `var(${privateTokens.enterAnimation})`, ";}}&.", classes.exitCustomAnimation, "{&&.", popupClasses.endAnimation, " .", popupClasses.root, "{animation:", ({ drawerAnimationInfo })=>drawerAnimationInfo?.exit || `var(${privateTokens.exitAnimation})`, ";}}");

package/dist/emotion/es/components/Drawer/Drawer.tokens.js

@@ -28,5 +28,11 @@ export const tokens = {
     contentBackgroundColor: '--plasma-drawer-content-background-color',
     padding: '--plasma-drawer-padding',
     borderRadius: '--plasma-drawer-border-radius',
-    closeIconColor: '--plasma-drawer-close-icon-color'
+    closeIconColor: '--plasma-drawer-close-icon-color',
+    scrollbarWidth: '--plasma-drawer-scrollbar-width',
+    scrollbarOffsetRight: '--plasma-drawer-scrollbar-offset-right',
+    scrollbarThumbBackgroundColor: '--plasma-drawer-scrollbar-thumb-background-color',
+    scrollbarThumbBackgroundColorHover: '--plasma-drawer-scrollbar-thumb-background-color-hover',
+    scrollbarThumbBackgroundColorActive: '--plasma-drawer-scrollbar-thumb-background-color-active',
+    scrollbarTrackBackgroundColor: '--plasma-drawer-scrollbar-track-background-color'
 };

package/dist/emotion/es/components/Dropdown/Dropdown.js

@@ -13,7 +13,7 @@ import { FloatingPopover } from "./FloatingPopover";
 import { Context } from "./Dropdown.context";
 /**
  * Выпадающий список с поддержкой вложенных пунктов.
- */ export const dropdownRoot = (Root)=>/*#__PURE__*/ forwardRef(({ items, trigger = 'click', placement = 'bottom', children, variant = 'normal', zIndex = 1000, listMaxHeight, listWidth, portal, renderItem, beforeList, afterList, onToggle, alwaysOpened = false, onHover, onItemSelect, openByRightClick = false, offset = [
+ */ export const dropdownRoot = (Root)=>/*#__PURE__*/ forwardRef(({ items, trigger = 'click', placement = 'bottom-start', children, variant = 'normal', zIndex = 1000, listMaxHeight, listWidth, portal, renderItem, beforeList, afterList, onToggle, alwaysOpened = false, onHover, onItemSelect, openByRightClick = false, offset = [
         0,
         8
     ], closeOnSelect = true, closeOnOverlayClick = true, itemRole = 'option', disabled, size, view, className, ...rest }, ref)=>{

package/dist/emotion/es/components/Dropdown/ui/Inner/Inner.js

@@ -26,7 +26,7 @@ const Inner = ({ item, currentLevel, path, dispatchPath, index, trigger, listWid
     const nextLevel = currentLevel + 1;
     if (item?.items?.length) {
         return /*#__PURE__*/ React.createElement(FloatingPopover, {
-            placement: getPlacement(item?.placement || 'right'),
+            placement: getPlacement(item?.placement || 'right-start'),
             opened: isCurrentListOpen,
             onToggle: handleToggle,
             trigger: item.trigger || trigger,

package/dist/emotion/es/components/Dropdown/utils/getPlacement.js

@@ -1,9 +1,19 @@
+const centerPlacements = {
+    'top-center': 'top',
+    'right-center': 'right',
+    'bottom-center': 'bottom',
+    'left-center': 'left'
+};
+const isCenterPlacement = (placement)=>placement in centerPlacements;
 export const getPlacement = (placement)=>{
     if (!placement) {
         return 'bottom-start';
     }
-    if (placement === 'auto') {
+    if (placement === 'auto' || placement.endsWith('-start') || placement.endsWith('-end')) {
         return placement;
     }
+    if (isCenterPlacement(placement)) {
+        return centerPlacements[placement];
+    }
     return `${placement}-start`;
 };