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

package/dist/emotion/cjs/plasmaCore/utils/utils/scopeTab.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "scopeTab", {
+    enumerable: true,
+    get: function() {
+        return scopeTab;
+    }
+});
+const _tabbable = require("./tabbable");
+const scopeTab = (node, event)=>{
+    const tabbable = (0, _tabbable.findTabbableDescendants)(node);
+    if (!tabbable.length) {
+        event.preventDefault();
+        return;
+    }
+    // смотрим, является ли элемент крайним - первый или последним
+    const finalTabbable = tabbable[event.shiftKey ? 0 : tabbable.length - 1];
+    const leavingFinalTabbable = finalTabbable === document.activeElement || node === document.activeElement;
+    // если не является, то передаем обработку таба самому браузеру
+    if (!leavingFinalTabbable) {
+        return;
+    }
+    // иначе зацкливаемся
+    event.preventDefault();
+    const target = tabbable[event.shiftKey ? tabbable.length - 1 : 0];
+    if (target) {
+        target.focus();
+    }
+};

package/dist/emotion/cjs/plasmaCore/utils/utils/setRef.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "setRef", {
+    enumerable: true,
+    get: function() {
+        return setRef;
+    }
+});
+const setRef = (ref, value)=>{
+    if (typeof ref === 'function') {
+        ref(value);
+    } else if (ref) {
+        ref.current = value;
+    }
+};

package/dist/emotion/cjs/plasmaCore/utils/utils/tabbable.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get findTabbableDescendants () {
+        return findTabbableDescendants;
+    },
+    get focusSelector () {
+        return focusSelector;
+    },
+    get isFocusable () {
+        return isFocusable;
+    },
+    get isTabble () {
+        return isTabble;
+    },
+    get isVisible () {
+        return isVisible;
+    }
+});
+const tabbableNode = /input|select|textarea|button|object/;
+const focusSelector = [
+    'input',
+    'select',
+    'textarea',
+    'a',
+    'button',
+    'object',
+    '[tabindex]',
+    'audio[controls]',
+    'video[controls]',
+    '[contenteditable]:not([contenteditable="false"])'
+].join(',');
+const isHidden = (el)=>{
+    return el.offsetWidth <= 0 && el.offsetHeight <= 0 || el.style.display === 'none' || el.style.visibility === 'hidden' || el.style.opacity === '0';
+};
+const isVisible = (element, parentContainer)=>{
+    let parentElement = element;
+    while(parentElement){
+        if (parentElement === parentContainer || parentElement === document.body) {
+            break;
+        }
+        if (isHidden(parentElement)) {
+            return false;
+        }
+        parentElement = parentElement.parentNode;
+    }
+    return true;
+};
+const getElementTabIndex = (element)=>{
+    const tabIndex = element.getAttribute('tabindex');
+    return tabIndex === null ? NaN : parseInt(tabIndex, 10);
+};
+const isFocusable = (element, parentContainer)=>{
+    const nodeName = element.nodeName.toLowerCase();
+    const isTabIndexNotNaN = !Number.isNaN(getElementTabIndex(element));
+    const res = tabbableNode.test(nodeName) && !element.disabled || (element instanceof HTMLAnchorElement ? element.href || isTabIndexNotNaN : isTabIndexNotNaN);
+    return Boolean(res) && isVisible(element, parentContainer);
+};
+const isTabble = (element, parentContainer)=>{
+    const tabIndex = getElementTabIndex(element);
+    const isTabIndexNaN = Number.isNaN(tabIndex);
+    return (isTabIndexNaN || tabIndex >= 0) && isFocusable(element, parentContainer);
+};
+const findTabbableDescendants = (element)=>{
+    return Array.from(element.querySelectorAll(focusSelector)).filter((el)=>isTabble(el, element));
+};

package/dist/emotion/cjs/plasmaCore/utils/utils/toCssSize.js

@@ -0,0 +1,13 @@
+/**
+ * Добавит ед./изм. value + px, если передан number
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "toCssSize", {
+    enumerable: true,
+    get: function() {
+        return toCssSize;
+    }
+});
+const toCssSize = (value)=>typeof value === 'number' ? `${value}px` : value;

package/dist/emotion/cjs/plasmaCore/utils/utils/transformStyles.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "transformStyles", {
+    enumerable: true,
+    get: function() {
+        return transformStyles;
+    }
+});
+const uppercaseCheck = /([A-Z])/;
+const uppercasePattern = /([A-Z])/g;
+const prefixAndLowerCase = (char)=>`-${char.toLowerCase()}`;
+const hyphenate = (str)=>uppercaseCheck.test(str) ? str.replace(uppercasePattern, prefixAndLowerCase) : str;
+const transformStyles = (styles)=>Object.entries(styles).map(([key, value])=>`${hyphenate(key)}: ${value}`).join(';');

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

@@ -252,7 +252,7 @@ export const attachRoot = (Root)=>/*#__PURE__*/ forwardRef((props, outerRef)=>{
             customIcon: customIcon,
             handleClear: handleClear,
             ...dropdownOptions,
-            placement: dropdownOptions?.placement ?? 'bottom'
+            placement: dropdownOptions?.placement ?? 'bottom-start'
         }), multiple && flow === 'horizontal' && /*#__PURE__*/ React.createElement(HiddenWidthHelper, {
             ref: fileWrapperWidthRef,
             hasHiddenFiles: hasHiddenFiles,

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

@@ -8,7 +8,7 @@ import { Ul, InfiniteLoaderWrapper, base, StyledLeftHelper, ListWrapper } from "
 import { useKeyNavigation } from "./hooks/useKeyboardNavigation";
 /**
  * Компонент Autocomplete. Поле ввода с подсказками в выпадающем списке.
- */ export const autocompleteRoot = (Root)=>/*#__PURE__*/ forwardRef(({ value: outerValue, defaultValue, onChange, suggestions, view, size, labelPlacement, keepPlaceholder, disabled, readOnly, label, leftHelper, contentLeft, contentRight, textBefore, textAfter, onScroll, onBlur, onFocus, listMaxHeight = '25rem', listWidth, portal, zIndex, filter, onSuggestionSelect, threshold = 2, renderList, renderListEnd, renderItem, onSearch, hintText, hintView = 'default', hintSize = 'm', beforeList, afterList, virtual = false, flip = false, rootClassName, rootStyle, // @ts-ignore
+ */ export const autocompleteRoot = (Root)=>/*#__PURE__*/ forwardRef(({ value: outerValue, defaultValue, onChange, suggestions, appearance, hasDivider, view, size, labelPlacement, keepPlaceholder, disabled, readOnly, label, titleCaption, leftHelper, contentLeft, contentRight, textBefore, textAfter, onScroll, onBlur, onFocus, listMaxHeight = '25rem', listWidth, portal, zIndex, filter, onSuggestionSelect, threshold = 2, renderList, renderListEnd, renderItem, onSearch, hintText, hintView = 'default', hintSize = 'm', beforeList, afterList, virtual = false, flip = false, rootClassName, rootStyle, // @ts-ignore
     _offset, ...rest }, ref)=>{
         const [focused, dispatchFocused] = useReducer(focusedReducer, null);
         const [innerValue, setInnerValue] = useState(defaultValue || '');
@@ -118,9 +118,12 @@ import { useKeyNavigation } from "./hooks/useKeyboardNavigation";
                     onSearch: focused === null ? onSearch : undefined,
                     size: size,
                     view: view,
+                    appearance: appearance,
+                    hasDivider: hasDivider,
                     disabled: disabled,
                     readOnly: readOnly,
                     label: label,
+                    titleCaption: titleCaption,
                     contentLeft: contentLeft,
                     contentRight: contentRight,
                     textBefore: textBefore,

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

@@ -5,6 +5,7 @@ export const tokens = {
     // Токены для TextField
     textFieldColor: '--plasma-autocomplete-textfield-color',
     textFieldClearColor: '--plasma-autocomplete-textfield-clear-color',
+    textFieldColorFocus: '--plasma-autocomplete-textfield-color-focus',
     textFieldBackgroundColor: '--plasma-autocomplete-textfield-background-color',
     textFieldBackgroundColorHover: '--plasma-autocomplete-textfield-background-color-hover',
     textFieldBackgroundColorFocus: '--plasma-autocomplete-textfield-background-color-focus',
@@ -14,6 +15,7 @@ export const tokens = {
     textFieldDividerColor: '--plasma-autocomplete-textfield-divider-color',
     textFieldDividerColorHover: '--plasma-autocomplete-textfield-divider-color-hover',
     textFieldDividerColorFocus: '--plasma-autocomplete-textfield-divider-color-focus',
+    textFieldDividerWidth: '--plasma-autocomplete-textfield-divider-width',
     textFieldColorReadOnly: '--plasma-autocomplete-textfield-color-readonly',
     textFieldBackgroundColorReadOnly: '--plasma-autocomplete-textfield-bg-color-readonly',
     textFieldBorderColorReadOnly: '--plasma-autocomplete-textfield-border-color-readonly',
@@ -21,6 +23,7 @@ export const tokens = {
     textFieldDividerColorReadOnly: '--plasma-autocomplete-textfield-divider-color-readonly',
     textFieldCaretColor: '--plasma-autocomplete-textfield-caret-color',
     textFieldPlaceholderColor: '--plasma-autocomplete-textfield-placeholder-color',
+    textFieldPlaceholderColorHover: '--plasma-autocomplete-textfield-placeholder-color-hover',
     textFieldPlaceholderColorFocus: '--plasma-autocomplete-textfield-placeholder-color-focus',
     textFieldClearPlaceholderColor: '--plasma-autocomplete-textfield-clear-placeholder-color',
     textFieldClearPlaceholderColorFocus: '--plasma-autocomplete-textfield-clear-placeholder-color-focus',
@@ -43,6 +46,7 @@ export const tokens = {
     textFieldContentSlotColor: '--plasma-autocomplete-textfield-content-slot-color',
     textFieldContentSlotColorHover: '--plasma-autocomplete-textfield-content-slot-color-hover',
     textFieldContentSlotColorActive: '--plasma-autocomplete-textfield-content-slot-color-active',
+    textFieldContentSlotColorFocus: '--plasma-autocomplete-textfield-content-slot-color-focus',
     textFieldContentSlotRightColor: '--plasma-autocomplete-textfield-content-right-slot-color',
     textFieldContentSlotRightColorHover: '--plasma-autocomplete-textfield-content-right-slot-color-hover',
     textFieldContentSlotRightColorActive: '--plasma-autocomplete-textfield-content-right-slot-color-active',
@@ -58,6 +62,15 @@ export const tokens = {
     textFieldLabelFontWeight: '--plasma-autocomplete-textfield-label-font-weight',
     textFieldLabelLetterSpacing: '--plasma-autocomplete-textfield-label-letter-spacing',
     textFieldLabelLineHeight: '--plasma-autocomplete-textfield-label-line-height',
+    textFieldTitleCaptionMargin: '--plasma-autocomplete-textfield-title-caption-margin',
+    textFieldTitleCaptionColor: '--plasma-autocomplete-textfield-title-caption-color',
+    textFieldTitleCaptionColorReadOnly: '--plasma-autocomplete-textfield-title-caption-color-readonly',
+    textFieldTitleCaptionFontFamily: '--plasma-autocomplete-textfield-title-caption-font-family',
+    textFieldTitleCaptionFontStyle: '--plasma-autocomplete-textfield-title-caption-font-style',
+    textFieldTitleCaptionFontSize: '--plasma-autocomplete-textfield-title-caption-font-size',
+    textFieldTitleCaptionFontWeight: '--plasma-autocomplete-textfield-title-caption-font-weight',
+    textFieldTitleCaptionLetterSpacing: '--plasma-autocomplete-textfield-title-caption-letter-spacing',
+    textFieldTitleCaptionLineHeight: '--plasma-autocomplete-textfield-title-caption-line-height',
     textFieldLabelInnerFontFamily: '--plasma-autocomplete-textfield-placement-inner-label-font-family',
     textFieldLabelInnerFontStyle: '--plasma-autocomplete-textfield-placement-inner-label-font-style',
     textFieldLabelInnerFontSize: '--plasma-autocomplete-textfield-placement-inner-label-font-size',

package/dist/emotion/es/components/Autocomplete/ui/TextField/TextField.styles.js

@@ -5,6 +5,6 @@ import { tokens as autocompleteTokens } from "../../Autocomplete.tokens";
 const mergedConfig = mergeConfig(textFieldConfig);
 const TextField = component(mergedConfig);
 export const StyledTextField = /*#__PURE__*/ styled(TextField, {
-    target: "eass0vc0",
+    target: "e1kyzdlg0",
     label: "StyledTextField"
-})(textFieldTokens.color, ":var(", autocompleteTokens.textFieldColor, ");", textFieldTokens.clearColor, ":var(", autocompleteTokens.textFieldClearColor, ");", textFieldTokens.placeholderColor, ":var(", autocompleteTokens.textFieldPlaceholderColor, ");", textFieldTokens.placeholderColorFocus, ":var(", autocompleteTokens.textFieldPlaceholderColorFocus, ");", textFieldTokens.clearPlaceholderColor, ":var(", autocompleteTokens.textFieldClearPlaceholderColor, ");", textFieldTokens.clearPlaceholderColorFocus, ":var(", autocompleteTokens.textFieldClearPlaceholderColorFocus, ");", textFieldTokens.optionalColor, ":var(", autocompleteTokens.textFieldOptionalColor, ");", textFieldTokens.backgroundColor, ":var(", autocompleteTokens.textFieldBackgroundColor, ");", textFieldTokens.backgroundColorHover, ":var(", autocompleteTokens.textFieldBackgroundColorHover, ");", textFieldTokens.backgroundColorFocus, ":var(", autocompleteTokens.textFieldBackgroundColorFocus, ");", textFieldTokens.borderColor, ":var(", autocompleteTokens.textFieldBorderColor, ");", textFieldTokens.borderColorHover, ":var(", autocompleteTokens.textFieldBorderColorHover, ");", textFieldTokens.borderColorFocus, ":var(", autocompleteTokens.textFieldBorderColorFocus, ");", textFieldTokens.dividerColor, ":var(", autocompleteTokens.textFieldDividerColor, ");", textFieldTokens.dividerColorHover, ":var(", autocompleteTokens.textFieldDividerColorHover, ");", textFieldTokens.dividerColorFocus, ":var(", autocompleteTokens.textFieldDividerColorFocus, ");", textFieldTokens.colorReadOnly, ":var(", autocompleteTokens.textFieldColorReadOnly, ");", textFieldTokens.backgroundColorReadOnly, ":var(", autocompleteTokens.textFieldBackgroundColorReadOnly, ");", textFieldTokens.borderColorReadOnly, ":var(", autocompleteTokens.textFieldBorderColorReadOnly, ");", textFieldTokens.placeholderColorReadOnly, ":var(", autocompleteTokens.textFieldPlaceholderColorReadOnly, ");", textFieldTokens.dividerColorReadOnly, ":var(", autocompleteTokens.textFieldDividerColorReadOnly, ");", textFieldTokens.readOnlyOpacity, ":var(", autocompleteTokens.textFieldReadOnlyOpacity, ");", textFieldTokens.caretColor, ":var(", autocompleteTokens.textFieldCaretColor, ");", textFieldTokens.height, ":var(", autocompleteTokens.textFieldHeight, ");", textFieldTokens.borderWidth, ":var(", autocompleteTokens.textFieldBorderWidth, ");", textFieldTokens.borderRadius, ":var(", autocompleteTokens.textFieldBorderRadius, ");", textFieldTokens.padding, ":var(", autocompleteTokens.textFieldPadding, ");", textFieldTokens.leftContentMargin, ":var(", autocompleteTokens.textFieldLeftContentMargin, ");", textFieldTokens.rightContentMargin, ":var(", autocompleteTokens.textFieldRightContentMargin, ");", textFieldTokens.fontFamily, ":var(", autocompleteTokens.textFieldFontFamily, ");", textFieldTokens.fontStyle, ":var(", autocompleteTokens.textFieldFontStyle, ");", textFieldTokens.fontSize, ":var(", autocompleteTokens.textFieldFontSize, ");", textFieldTokens.fontWeight, ":var(", autocompleteTokens.textFieldFontWeight, ");", textFieldTokens.letterSpacing, ":var(", autocompleteTokens.textFieldLetterSpacing, ");", textFieldTokens.lineHeight, ":var(", autocompleteTokens.textFieldLineHeight, ");", textFieldTokens.labelColor, ":var(", autocompleteTokens.textFieldLabelColor, ");", textFieldTokens.labelColorReadOnly, ":var(", autocompleteTokens.textFieldLabelColorReadOnly, ");", textFieldTokens.labelOffset, ":var(", autocompleteTokens.textFieldLabelOffset, ");", textFieldTokens.clearLabelOffset, ":var(", autocompleteTokens.textFieldClearLabelOffset, ");", textFieldTokens.labelFontFamily, ":var(", autocompleteTokens.textFieldLabelFontFamily, ");", textFieldTokens.labelFontStyle, ":var(", autocompleteTokens.textFieldLabelFontStyle, ");", textFieldTokens.labelFontSize, ":var(", autocompleteTokens.textFieldLabelFontSize, ");", textFieldTokens.labelFontWeight, ":var(", autocompleteTokens.textFieldLabelFontWeight, ");", textFieldTokens.labelLetterSpacing, ":var(", autocompleteTokens.textFieldLabelLetterSpacing, ");", textFieldTokens.labelLineHeight, ":var(", autocompleteTokens.textFieldLabelLineHeight, ");", textFieldTokens.labelInnerFontFamily, ":var(", autocompleteTokens.textFieldLabelInnerFontFamily, ");", textFieldTokens.labelInnerFontStyle, ":var(", autocompleteTokens.textFieldLabelInnerFontStyle, ");", textFieldTokens.labelInnerFontSize, ":var(", autocompleteTokens.textFieldLabelInnerFontSize, ");", textFieldTokens.labelInnerFontWeight, ":var(", autocompleteTokens.textFieldLabelInnerFontWeight, ");", textFieldTokens.labelInnerLetterSpacing, ":var(", autocompleteTokens.textFieldLabelInnerLetterSpacing, ");", textFieldTokens.labelInnerLineHeight, ":var(", autocompleteTokens.textFieldLabelInnerLineHeight, ");", textFieldTokens.labelInnerPadding, ":var(", autocompleteTokens.textFieldLabelInnerPadding, ");", textFieldTokens.contentLabelInnerPadding, ":var(", autocompleteTokens.textFieldContentLabelInnerPadding, ");", textFieldTokens.leftHelperColor, ":var(", autocompleteTokens.textFieldLeftHelperColor, ");", textFieldTokens.leftHelperColorFocus, ":var(", autocompleteTokens.textFieldLeftHelperColorFocus, ");", textFieldTokens.leftHelperColorReadOnly, ":var(", autocompleteTokens.textFieldLeftHelperColorReadOnly, ");", textFieldTokens.leftHelperOffset, ":var(", autocompleteTokens.textFieldLeftHelperOffset, ");", textFieldTokens.leftHelperFontFamily, ":var(", autocompleteTokens.textFieldLeftHelperFontFamily, ");", textFieldTokens.leftHelperFontStyle, ":var(", autocompleteTokens.textFieldLeftHelperFontStyle, ");", textFieldTokens.leftHelperFontSize, ":var(", autocompleteTokens.textFieldLeftHelperFontSize, ");", textFieldTokens.leftHelperFontWeight, ":var(", autocompleteTokens.textFieldLeftHelperFontWeight, ");", textFieldTokens.leftHelperLetterSpacing, ":var(", autocompleteTokens.textFieldLeftHelperLetterSpacing, ");", textFieldTokens.leftHelperLineHeight, ":var(", autocompleteTokens.textFieldLeftHelperLineHeight, ");", textFieldTokens.textBeforeColor, ":var(", autocompleteTokens.textFieldTextBeforeColor, ");", textFieldTokens.textAfterColor, ":var(", autocompleteTokens.textFieldTextAfterColor, ");", textFieldTokens.textBeforeMargin, ":var(", autocompleteTokens.textFieldTextBeforeMargin, ");", textFieldTokens.textAfterMargin, ":var(", autocompleteTokens.textFieldTextAfterMargin, ");", textFieldTokens.disabledOpacity, ":var(", autocompleteTokens.textFieldDisabledOpacity, ");", textFieldTokens.disabledBackgroundOpacity, ":var(", autocompleteTokens.textFieldDisabledBackgroundOpacity, ");", textFieldTokens.disabledInnerContentOpacity, ":var(", autocompleteTokens.textFieldDisabledInnerContentOpacity, ");", textFieldTokens.focusColor, ":var(", autocompleteTokens.textFieldFocusColor, ");", textFieldTokens.contentSlotColor, ":var(", autocompleteTokens.textFieldContentSlotColor, ");", textFieldTokens.contentSlotColorHover, ":var(", autocompleteTokens.textFieldContentSlotColorHover, ");", textFieldTokens.contentSlotColorActive, ":var(", autocompleteTokens.textFieldContentSlotColorActive, ");", textFieldTokens.contentSlotRightColor, ":var(", autocompleteTokens.textFieldContentSlotRightColor, ");", textFieldTokens.contentSlotRightColorHover, ":var(", autocompleteTokens.textFieldContentSlotRightColorHover, ");", textFieldTokens.contentSlotRightColorActive, ":var(", autocompleteTokens.textFieldContentSlotRightColorActive, ");", textFieldTokens.contentSlotRightOpacityReadOnly, ":var(", autocompleteTokens.textFieldContentSlotRightOpacityReadOnly, ");", textFieldTokens.indicatorColor, ":var(", autocompleteTokens.textFieldIndicatorColor, ");", textFieldTokens.indicatorSizeInner, ":var(", autocompleteTokens.textFieldIndicatorSizeInner, ");", textFieldTokens.indicatorSizeOuter, ":var(", autocompleteTokens.textFieldIndicatorSizeOuter, ");", textFieldTokens.indicatorLabelPlacementInner, ":var(", autocompleteTokens.textFieldIndicatorLabelPlacementInner, ");", textFieldTokens.indicatorLabelPlacementOuter, ":var(", autocompleteTokens.textFieldIndicatorLabelPlacementOuter, ");", textFieldTokens.indicatorLabelPlacementInnerRight, ":var(", autocompleteTokens.textFieldIndicatorLabelPlacementInnerRight, ");", textFieldTokens.indicatorLabelPlacementOuterRight, ":var(", autocompleteTokens.textFieldIndicatorLabelPlacementOuterRight, ");", textFieldTokens.clearIndicatorLabelPlacementInner, ":var(", autocompleteTokens.textFieldClearIndicatorLabelPlacementInner, ");", textFieldTokens.clearIndicatorLabelPlacementInnerRight, ":var(", autocompleteTokens.textFieldClearIndicatorLabelPlacementInnerRight, ");", textFieldTokens.clearIndicatorHintInnerRight, ":var(", autocompleteTokens.textFieldClearIndicatorHintInnerRight, ");", textFieldTokens.boxShadow, ":var(", autocompleteTokens.textFieldBoxShadow, ");", textFieldTokens.boxShadowSecondary, ":var(", autocompleteTokens.textFieldBoxShadowSecondary, ");", textFieldTokens.rightContentWithHintMargin, ":var(", autocompleteTokens.textFieldRightContentWithHintMargin, ");", textFieldTokens.contentRightWrapperGap, ":var(", autocompleteTokens.textFieldContentRightWrapperGap, ");", textFieldTokens.contentRightWrapperMargin, ":var(", autocompleteTokens.textFieldContentRightWrapperMargin, ");", textFieldTokens.hintCustomIconTargetSize, ":var(", autocompleteTokens.textFieldHintCustomIconTargetSize, ");", textFieldTokens.hintMargin, ":var(", autocompleteTokens.textFieldHintMargin, ");", textFieldTokens.hintTargetSize, ":var(", autocompleteTokens.textFieldHintTargetSize, ");", textFieldTokens.hintIconColor, ":var(", autocompleteTokens.textFieldHintIconColor, ");", textFieldTokens.hintInnerLabelPlacementOffset, ":var(", autocompleteTokens.textFieldHintInnerLabelPlacementOffset, ");", textFieldTokens.clearHintInnerLabelPlacementOffset, ":var(", autocompleteTokens.textFieldClearHintInnerLabelPlacementOffset, ");", textFieldTokens.tooltipBackgroundColor, ":var(", autocompleteTokens.textFieldTooltipBackgroundColor, ");", textFieldTokens.tooltipBoxShadow, ":var(", autocompleteTokens.textFieldTooltipBoxShadow, ");", textFieldTokens.tooltipColor, ":var(", autocompleteTokens.textFieldTooltipColor, ");", textFieldTokens.tooltipPaddingTop, ":var(", autocompleteTokens.textFieldTooltipPaddingTop, ");", textFieldTokens.tooltipPaddingRight, ":var(", autocompleteTokens.textFieldTooltipPaddingRight, ");", textFieldTokens.tooltipPaddingBottom, ":var(", autocompleteTokens.textFieldTooltipPaddingBottom, ");", textFieldTokens.tooltipPaddingLeft, ":var(", autocompleteTokens.textFieldTooltipPaddingLeft, ");", textFieldTokens.tooltipMinHeight, ":var(", autocompleteTokens.textFieldTooltipMinHeight, ");", textFieldTokens.tooltipBorderRadius, ":var(", autocompleteTokens.textFieldTooltipBorderRadius, ");", textFieldTokens.tooltipTextFontFamily, ":var(", autocompleteTokens.textFieldTooltipTextFontFamily, ");", textFieldTokens.tooltipTextFontSize, ":var(", autocompleteTokens.textFieldTooltipTextFontSize, ");", textFieldTokens.tooltipTextFontStyle, ":var(", autocompleteTokens.textFieldTooltipTextFontStyle, ");", textFieldTokens.tooltipTextFontWeight, ":var(", autocompleteTokens.textFieldTooltipTextFontWeight, ");", textFieldTokens.tooltipTextFontLetterSpacing, ":var(", autocompleteTokens.textFieldTooltipTextFontLetterSpacing, ");", textFieldTokens.tooltipTextFontLineHeight, ":var(", autocompleteTokens.textFieldTooltipTextFontLineHeight, ");", textFieldTokens.tooltipContentLeftMargin, ":var(", autocompleteTokens.textFieldTooltipContentLeftMargin, ");", textFieldTokens.tooltipArrowMaskWidth, ":var(", autocompleteTokens.textFieldTooltipArrowMaskWidth, ");", textFieldTokens.tooltipArrowMaskHeight, ":var(", autocompleteTokens.textFieldTooltipArrowMaskHeight, ");", textFieldTokens.tooltipArrowMaskImage, ":var(", autocompleteTokens.textFieldTooltipArrowMaskImage, ");", textFieldTokens.tooltipArrowHeight, ":var(", autocompleteTokens.textFieldTooltipArrowHeight, ");", textFieldTokens.tooltipArrowEdgeMargin, ":var(", autocompleteTokens.textFieldTooltipArrowEdgeMargin, ");", textFieldTokens.tooltipArrowBackground, ":var(", autocompleteTokens.textFieldTooltipArrowBackground, ");");
+})(textFieldTokens.color, ":var(", autocompleteTokens.textFieldColor, ");", textFieldTokens.clearColor, ":var(", autocompleteTokens.textFieldClearColor, ");", textFieldTokens.colorFocus, ":var(", autocompleteTokens.textFieldColorFocus, ");", textFieldTokens.placeholderColor, ":var(", autocompleteTokens.textFieldPlaceholderColor, ");", textFieldTokens.placeholderColorHover, ":var(", autocompleteTokens.textFieldPlaceholderColorHover, ");", textFieldTokens.placeholderColorFocus, ":var(", autocompleteTokens.textFieldPlaceholderColorFocus, ");", textFieldTokens.clearPlaceholderColor, ":var(", autocompleteTokens.textFieldClearPlaceholderColor, ");", textFieldTokens.clearPlaceholderColorFocus, ":var(", autocompleteTokens.textFieldClearPlaceholderColorFocus, ");", textFieldTokens.optionalColor, ":var(", autocompleteTokens.textFieldOptionalColor, ");", textFieldTokens.backgroundColor, ":var(", autocompleteTokens.textFieldBackgroundColor, ");", textFieldTokens.backgroundColorHover, ":var(", autocompleteTokens.textFieldBackgroundColorHover, ");", textFieldTokens.backgroundColorFocus, ":var(", autocompleteTokens.textFieldBackgroundColorFocus, ");", textFieldTokens.borderColor, ":var(", autocompleteTokens.textFieldBorderColor, ");", textFieldTokens.borderColorHover, ":var(", autocompleteTokens.textFieldBorderColorHover, ");", textFieldTokens.borderColorFocus, ":var(", autocompleteTokens.textFieldBorderColorFocus, ");", textFieldTokens.dividerColor, ":var(", autocompleteTokens.textFieldDividerColor, ");", textFieldTokens.dividerColorHover, ":var(", autocompleteTokens.textFieldDividerColorHover, ");", textFieldTokens.dividerColorFocus, ":var(", autocompleteTokens.textFieldDividerColorFocus, ");", textFieldTokens.dividerWidth, ":var(", autocompleteTokens.textFieldDividerWidth, ");", textFieldTokens.colorReadOnly, ":var(", autocompleteTokens.textFieldColorReadOnly, ");", textFieldTokens.backgroundColorReadOnly, ":var(", autocompleteTokens.textFieldBackgroundColorReadOnly, ");", textFieldTokens.borderColorReadOnly, ":var(", autocompleteTokens.textFieldBorderColorReadOnly, ");", textFieldTokens.placeholderColorReadOnly, ":var(", autocompleteTokens.textFieldPlaceholderColorReadOnly, ");", textFieldTokens.dividerColorReadOnly, ":var(", autocompleteTokens.textFieldDividerColorReadOnly, ");", textFieldTokens.readOnlyOpacity, ":var(", autocompleteTokens.textFieldReadOnlyOpacity, ");", textFieldTokens.caretColor, ":var(", autocompleteTokens.textFieldCaretColor, ");", textFieldTokens.height, ":var(", autocompleteTokens.textFieldHeight, ");", textFieldTokens.borderWidth, ":var(", autocompleteTokens.textFieldBorderWidth, ");", textFieldTokens.borderRadius, ":var(", autocompleteTokens.textFieldBorderRadius, ");", textFieldTokens.padding, ":var(", autocompleteTokens.textFieldPadding, ");", textFieldTokens.leftContentMargin, ":var(", autocompleteTokens.textFieldLeftContentMargin, ");", textFieldTokens.rightContentMargin, ":var(", autocompleteTokens.textFieldRightContentMargin, ");", textFieldTokens.fontFamily, ":var(", autocompleteTokens.textFieldFontFamily, ");", textFieldTokens.fontStyle, ":var(", autocompleteTokens.textFieldFontStyle, ");", textFieldTokens.fontSize, ":var(", autocompleteTokens.textFieldFontSize, ");", textFieldTokens.fontWeight, ":var(", autocompleteTokens.textFieldFontWeight, ");", textFieldTokens.letterSpacing, ":var(", autocompleteTokens.textFieldLetterSpacing, ");", textFieldTokens.lineHeight, ":var(", autocompleteTokens.textFieldLineHeight, ");", textFieldTokens.labelColor, ":var(", autocompleteTokens.textFieldLabelColor, ");", textFieldTokens.labelColorReadOnly, ":var(", autocompleteTokens.textFieldLabelColorReadOnly, ");", textFieldTokens.labelOffset, ":var(", autocompleteTokens.textFieldLabelOffset, ");", textFieldTokens.clearLabelOffset, ":var(", autocompleteTokens.textFieldClearLabelOffset, ");", textFieldTokens.labelFontFamily, ":var(", autocompleteTokens.textFieldLabelFontFamily, ");", textFieldTokens.labelFontStyle, ":var(", autocompleteTokens.textFieldLabelFontStyle, ");", textFieldTokens.labelFontSize, ":var(", autocompleteTokens.textFieldLabelFontSize, ");", textFieldTokens.labelFontWeight, ":var(", autocompleteTokens.textFieldLabelFontWeight, ");", textFieldTokens.labelLetterSpacing, ":var(", autocompleteTokens.textFieldLabelLetterSpacing, ");", textFieldTokens.labelLineHeight, ":var(", autocompleteTokens.textFieldLabelLineHeight, ");", textFieldTokens.titleCaptionMargin, ":var(", autocompleteTokens.textFieldTitleCaptionMargin, ");", textFieldTokens.titleCaptionColor, ":var(", autocompleteTokens.textFieldTitleCaptionColor, ");", textFieldTokens.titleCaptionColorReadOnly, ":var(", autocompleteTokens.textFieldTitleCaptionColorReadOnly, ");", textFieldTokens.titleCaptionFontFamily, ":var(", autocompleteTokens.textFieldTitleCaptionFontFamily, ");", textFieldTokens.titleCaptionFontStyle, ":var(", autocompleteTokens.textFieldTitleCaptionFontStyle, ");", textFieldTokens.titleCaptionFontSize, ":var(", autocompleteTokens.textFieldTitleCaptionFontSize, ");", textFieldTokens.titleCaptionFontWeight, ":var(", autocompleteTokens.textFieldTitleCaptionFontWeight, ");", textFieldTokens.titleCaptionLetterSpacing, ":var(", autocompleteTokens.textFieldTitleCaptionLetterSpacing, ");", textFieldTokens.titleCaptionLineHeight, ":var(", autocompleteTokens.textFieldTitleCaptionLineHeight, ");", textFieldTokens.labelInnerFontFamily, ":var(", autocompleteTokens.textFieldLabelInnerFontFamily, ");", textFieldTokens.labelInnerFontStyle, ":var(", autocompleteTokens.textFieldLabelInnerFontStyle, ");", textFieldTokens.labelInnerFontSize, ":var(", autocompleteTokens.textFieldLabelInnerFontSize, ");", textFieldTokens.labelInnerFontWeight, ":var(", autocompleteTokens.textFieldLabelInnerFontWeight, ");", textFieldTokens.labelInnerLetterSpacing, ":var(", autocompleteTokens.textFieldLabelInnerLetterSpacing, ");", textFieldTokens.labelInnerLineHeight, ":var(", autocompleteTokens.textFieldLabelInnerLineHeight, ");", textFieldTokens.labelInnerPadding, ":var(", autocompleteTokens.textFieldLabelInnerPadding, ");", textFieldTokens.contentLabelInnerPadding, ":var(", autocompleteTokens.textFieldContentLabelInnerPadding, ");", textFieldTokens.leftHelperColor, ":var(", autocompleteTokens.textFieldLeftHelperColor, ");", textFieldTokens.leftHelperColorFocus, ":var(", autocompleteTokens.textFieldLeftHelperColorFocus, ");", textFieldTokens.leftHelperColorReadOnly, ":var(", autocompleteTokens.textFieldLeftHelperColorReadOnly, ");", textFieldTokens.leftHelperOffset, ":var(", autocompleteTokens.textFieldLeftHelperOffset, ");", textFieldTokens.leftHelperFontFamily, ":var(", autocompleteTokens.textFieldLeftHelperFontFamily, ");", textFieldTokens.leftHelperFontStyle, ":var(", autocompleteTokens.textFieldLeftHelperFontStyle, ");", textFieldTokens.leftHelperFontSize, ":var(", autocompleteTokens.textFieldLeftHelperFontSize, ");", textFieldTokens.leftHelperFontWeight, ":var(", autocompleteTokens.textFieldLeftHelperFontWeight, ");", textFieldTokens.leftHelperLetterSpacing, ":var(", autocompleteTokens.textFieldLeftHelperLetterSpacing, ");", textFieldTokens.leftHelperLineHeight, ":var(", autocompleteTokens.textFieldLeftHelperLineHeight, ");", textFieldTokens.textBeforeColor, ":var(", autocompleteTokens.textFieldTextBeforeColor, ");", textFieldTokens.textAfterColor, ":var(", autocompleteTokens.textFieldTextAfterColor, ");", textFieldTokens.textBeforeMargin, ":var(", autocompleteTokens.textFieldTextBeforeMargin, ");", textFieldTokens.textAfterMargin, ":var(", autocompleteTokens.textFieldTextAfterMargin, ");", textFieldTokens.disabledOpacity, ":var(", autocompleteTokens.textFieldDisabledOpacity, ");", textFieldTokens.disabledBackgroundOpacity, ":var(", autocompleteTokens.textFieldDisabledBackgroundOpacity, ");", textFieldTokens.disabledInnerContentOpacity, ":var(", autocompleteTokens.textFieldDisabledInnerContentOpacity, ");", textFieldTokens.focusColor, ":var(", autocompleteTokens.textFieldFocusColor, ");", textFieldTokens.contentSlotColor, ":var(", autocompleteTokens.textFieldContentSlotColor, ");", textFieldTokens.contentSlotColorHover, ":var(", autocompleteTokens.textFieldContentSlotColorHover, ");", textFieldTokens.contentSlotColorActive, ":var(", autocompleteTokens.textFieldContentSlotColorActive, ");", textFieldTokens.contentSlotColorFocus, ":var(", autocompleteTokens.textFieldContentSlotColorFocus, ");", textFieldTokens.contentSlotRightColor, ":var(", autocompleteTokens.textFieldContentSlotRightColor, ");", textFieldTokens.contentSlotRightColorHover, ":var(", autocompleteTokens.textFieldContentSlotRightColorHover, ");", textFieldTokens.contentSlotRightColorActive, ":var(", autocompleteTokens.textFieldContentSlotRightColorActive, ");", textFieldTokens.contentSlotRightOpacityReadOnly, ":var(", autocompleteTokens.textFieldContentSlotRightOpacityReadOnly, ");", textFieldTokens.indicatorColor, ":var(", autocompleteTokens.textFieldIndicatorColor, ");", textFieldTokens.indicatorSizeInner, ":var(", autocompleteTokens.textFieldIndicatorSizeInner, ");", textFieldTokens.indicatorSizeOuter, ":var(", autocompleteTokens.textFieldIndicatorSizeOuter, ");", textFieldTokens.indicatorLabelPlacementInner, ":var(", autocompleteTokens.textFieldIndicatorLabelPlacementInner, ");", textFieldTokens.indicatorLabelPlacementOuter, ":var(", autocompleteTokens.textFieldIndicatorLabelPlacementOuter, ");", textFieldTokens.indicatorLabelPlacementInnerRight, ":var(", autocompleteTokens.textFieldIndicatorLabelPlacementInnerRight, ");", textFieldTokens.indicatorLabelPlacementOuterRight, ":var(", autocompleteTokens.textFieldIndicatorLabelPlacementOuterRight, ");", textFieldTokens.clearIndicatorLabelPlacementInner, ":var(", autocompleteTokens.textFieldClearIndicatorLabelPlacementInner, ");", textFieldTokens.clearIndicatorLabelPlacementInnerRight, ":var(", autocompleteTokens.textFieldClearIndicatorLabelPlacementInnerRight, ");", textFieldTokens.clearIndicatorHintInnerRight, ":var(", autocompleteTokens.textFieldClearIndicatorHintInnerRight, ");", textFieldTokens.boxShadow, ":var(", autocompleteTokens.textFieldBoxShadow, ");", textFieldTokens.boxShadowSecondary, ":var(", autocompleteTokens.textFieldBoxShadowSecondary, ");", textFieldTokens.rightContentWithHintMargin, ":var(", autocompleteTokens.textFieldRightContentWithHintMargin, ");", textFieldTokens.contentRightWrapperGap, ":var(", autocompleteTokens.textFieldContentRightWrapperGap, ");", textFieldTokens.contentRightWrapperMargin, ":var(", autocompleteTokens.textFieldContentRightWrapperMargin, ");", textFieldTokens.hintCustomIconTargetSize, ":var(", autocompleteTokens.textFieldHintCustomIconTargetSize, ");", textFieldTokens.hintMargin, ":var(", autocompleteTokens.textFieldHintMargin, ");", textFieldTokens.hintTargetSize, ":var(", autocompleteTokens.textFieldHintTargetSize, ");", textFieldTokens.hintIconColor, ":var(", autocompleteTokens.textFieldHintIconColor, ");", textFieldTokens.hintInnerLabelPlacementOffset, ":var(", autocompleteTokens.textFieldHintInnerLabelPlacementOffset, ");", textFieldTokens.clearHintInnerLabelPlacementOffset, ":var(", autocompleteTokens.textFieldClearHintInnerLabelPlacementOffset, ");", textFieldTokens.tooltipBackgroundColor, ":var(", autocompleteTokens.textFieldTooltipBackgroundColor, ");", textFieldTokens.tooltipBoxShadow, ":var(", autocompleteTokens.textFieldTooltipBoxShadow, ");", textFieldTokens.tooltipColor, ":var(", autocompleteTokens.textFieldTooltipColor, ");", textFieldTokens.tooltipPaddingTop, ":var(", autocompleteTokens.textFieldTooltipPaddingTop, ");", textFieldTokens.tooltipPaddingRight, ":var(", autocompleteTokens.textFieldTooltipPaddingRight, ");", textFieldTokens.tooltipPaddingBottom, ":var(", autocompleteTokens.textFieldTooltipPaddingBottom, ");", textFieldTokens.tooltipPaddingLeft, ":var(", autocompleteTokens.textFieldTooltipPaddingLeft, ");", textFieldTokens.tooltipMinHeight, ":var(", autocompleteTokens.textFieldTooltipMinHeight, ");", textFieldTokens.tooltipBorderRadius, ":var(", autocompleteTokens.textFieldTooltipBorderRadius, ");", textFieldTokens.tooltipTextFontFamily, ":var(", autocompleteTokens.textFieldTooltipTextFontFamily, ");", textFieldTokens.tooltipTextFontSize, ":var(", autocompleteTokens.textFieldTooltipTextFontSize, ");", textFieldTokens.tooltipTextFontStyle, ":var(", autocompleteTokens.textFieldTooltipTextFontStyle, ");", textFieldTokens.tooltipTextFontWeight, ":var(", autocompleteTokens.textFieldTooltipTextFontWeight, ");", textFieldTokens.tooltipTextFontLetterSpacing, ":var(", autocompleteTokens.textFieldTooltipTextFontLetterSpacing, ");", textFieldTokens.tooltipTextFontLineHeight, ":var(", autocompleteTokens.textFieldTooltipTextFontLineHeight, ");", textFieldTokens.tooltipContentLeftMargin, ":var(", autocompleteTokens.textFieldTooltipContentLeftMargin, ");", textFieldTokens.tooltipArrowMaskWidth, ":var(", autocompleteTokens.textFieldTooltipArrowMaskWidth, ");", textFieldTokens.tooltipArrowMaskHeight, ":var(", autocompleteTokens.textFieldTooltipArrowMaskHeight, ");", textFieldTokens.tooltipArrowMaskImage, ":var(", autocompleteTokens.textFieldTooltipArrowMaskImage, ");", textFieldTokens.tooltipArrowHeight, ":var(", autocompleteTokens.textFieldTooltipArrowHeight, ");", textFieldTokens.tooltipArrowEdgeMargin, ":var(", autocompleteTokens.textFieldTooltipArrowEdgeMargin, ");", textFieldTokens.tooltipArrowBackground, ":var(", autocompleteTokens.textFieldTooltipArrowBackground, ");");

package/dist/emotion/es/components/Calendar/CalendarBase/CalendarBase.js

@@ -13,7 +13,7 @@ import { base as eventTooltipSizeCSS } from "./variations/_tooltip-size/base";
 import { IsOutOfRange, StyledCalendar } from "./CalendarBase.styles";
 /**
  * Компонент календаря.
- */ export const calendarBaseRoot = (Root)=>/*#__PURE__*/ forwardRef(({ className, value: externalValue, focusedDate, min: minDate, max: maxDate, renderFromDate, includeEdgeDates, type = 'Days', eventTooltipOptions, eventList, disabledList, eventMonthList, disabledMonthList, eventQuarterList, disabledQuarterList, quarterNames, eventYearList, disabledYearList, locale = 'ru', stretched, onChangeValue, onChangeVisibleDate, ...rest }, outerRootRef)=>{
+ */ export const calendarBaseRoot = (Root)=>/*#__PURE__*/ forwardRef(({ className, value: externalValue, focusedDate, min: minDate, max: maxDate, renderFromDate, includeEdgeDates, type = 'Days', eventTooltipOptions, eventList, disabledList, eventMonthList, disabledMonthList, eventQuarterList, disabledQuarterList, quarterNames, eventYearList, disabledYearList, locale = 'ru', periodSelectorAlign = 'start', stretched, onChangeValue, onChangeVisibleDate, ...rest }, outerRootRef)=>{
         const [firstValue, secondValue] = useMemo(()=>Array.isArray(externalValue) ? externalValue : [
                 externalValue
             ], [
@@ -179,7 +179,8 @@ import { IsOutOfRange, StyledCalendar } from "./CalendarBase.styles";
             onPrev: handlePrev,
             onNext: handleNext,
             onUpdateCalendarState: handleUpdateCalendarState,
-            locale: locale
+            locale: locale,
+            periodSelectorAlign: periodSelectorAlign
         }), calendarState === CalendarState.Days && /*#__PURE__*/ React.createElement(CalendarDays, {
             value: internalValue,
             date: date,

package/dist/emotion/es/components/Calendar/ui/CalendarHeader/CalendarHeader.js

@@ -8,7 +8,7 @@ import { cx } from "../../../../utils";
 import { StyledArrow, StyledArrows, StyledCalendarHeader, StyledDoubleHeaderWrapper, StyledHeader, StyledHeaderDate, StyledHeaderDouble, StyledNavigation, StyledHeaderArrow } from "./CalendarHeader.styles";
 /**
  * Компонент шапки календаря.
- */ export const CalendarHeader = ({ type = 'Days', startYear = 0, size, firstDate, secondDate, isDouble, onPrev, onNext, onUpdateCalendarState, locale })=>{
+ */ export const CalendarHeader = ({ type = 'Days', startYear = 0, size, firstDate, secondDate, isDouble, onPrev, onNext, onUpdateCalendarState, locale, periodSelectorAlign = 'start' })=>{
     const handleCalendarState = ()=>{
         const newSize = isDouble ? sizeMap.Months.double : sizeMap.Months.single;
         if (type === CalendarState.Days) {
@@ -78,11 +78,12 @@ import { StyledArrow, StyledArrows, StyledCalendarHeader, StyledDoubleHeaderWrap
     }, /*#__PURE__*/ React.createElement(StyledHeaderDouble, {
         onClick: handleCalendarState,
         "aria-live": "polite"
-    }, getHeaderContent(secondDate, true)), /*#__PURE__*/ React.createElement(NextButton, null))) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(StyledHeader, {
+    }, getHeaderContent(secondDate, true)), /*#__PURE__*/ React.createElement(NextButton, null))) : /*#__PURE__*/ React.createElement(React.Fragment, null, periodSelectorAlign === 'center' && /*#__PURE__*/ React.createElement(StyledArrows, null, /*#__PURE__*/ React.createElement(PreviousButton, null)), /*#__PURE__*/ React.createElement(StyledHeader, {
+        periodSelectorAlign: periodSelectorAlign,
         type: "button",
         "aria-live": "polite",
         id: "id-grid-label",
         onClick: handleCalendarState,
         tabIndex: 0
-    }, getHeaderContent(firstDate)), /*#__PURE__*/ React.createElement(StyledArrows, null, /*#__PURE__*/ React.createElement(PreviousButton, null), /*#__PURE__*/ React.createElement(NextButton, null))));
+    }, getHeaderContent(firstDate)), /*#__PURE__*/ React.createElement(StyledArrows, null, periodSelectorAlign === 'start' && /*#__PURE__*/ React.createElement(PreviousButton, null), /*#__PURE__*/ React.createElement(NextButton, null))));
 };

package/dist/emotion/es/components/Calendar/ui/CalendarHeader/CalendarHeader.styles.js

@@ -8,41 +8,45 @@ import { IconDisclosureDownFill } from "../../../_Icon";
 const mergedIconButtonConfig = mergeConfig(iconButtonConfig);
 const IconButton = component(mergedIconButtonConfig);
 export const StyledCalendarHeader = /*#__PURE__*/ styled("div", {
-    target: "efld0qd0",
+    target: "eugq6k0",
     label: "StyledCalendarHeader"
 })("display:flex;justify-content:space-between;align-items:center;padding:var(", tokens.calendarHeaderWrapperPadding, ");");
 export const StyledHeader = /*#__PURE__*/ styled("button", {
-    target: "efld0qd1",
+    target: "eugq6k1",
     label: "StyledHeader"
-})("border:none;background-color:transparent;padding:0;outline:none;font-family:var(", tokens.calendarHeaderFontFamily, ");font-size:var(", tokens.calendarHeaderFontSize, ");font-style:var(", tokens.calendarHeaderFontStyle, ");font-weight:var(", tokens.calendarHeaderFontWeightBold, ");letter-spacing:var(", tokens.calendarHeaderFontLetterSpacing, ");line-height:var(", tokens.calendarHeaderFontLineHeight, ");padding:var(", tokens.calendarHeaderPadding, ");color:var(", tokens.calendarContentPrimaryColor, ");cursor:pointer;display:flex;gap:var(", tokens.calendarHeaderDateGap, ");justify-content:space-between;align-items:center;&:hover,&:active{color:var(", tokens.calendarContentSecondaryColor, ");}", addFocus({
+})("border:none;background-color:transparent;padding:0;outline:none;font-family:var(", tokens.calendarHeaderFontFamily, ");font-size:var(", tokens.calendarHeaderFontSize, ");font-style:var(", tokens.calendarHeaderFontStyle, ");font-weight:var(", tokens.calendarHeaderFontWeightBold, ");letter-spacing:var(", tokens.calendarHeaderFontLetterSpacing, ");line-height:var(", tokens.calendarHeaderFontLineHeight, ");padding:var(", tokens.calendarHeaderPadding, ");color:var(", tokens.calendarContentPrimaryColor, ");cursor:pointer;display:flex;gap:var(", tokens.calendarHeaderDateGap, ");justify-content:space-between;align-items:center;", ({ periodSelectorAlign })=>periodSelectorAlign === 'center' && `
+            flex: 1;
+            min-width: 0;
+            justify-content: center;
+        `, "    &:hover,&:active{color:var(", tokens.calendarContentSecondaryColor, ");}", addFocus({
     outlineSize: '0.063rem',
     outlineOffset: '0.125rem',
     outlineColor: `var(${tokens.calendarOutlineFocusColor})`,
     outlineRadius: '0.563rem'
 }), ";");
 export const StyledHeaderDate = /*#__PURE__*/ styled("span", {
-    target: "efld0qd2",
+    target: "eugq6k2",
     label: "StyledHeaderDate"
 })(flexCenter, ";pointer-events:none;");
 export const StyledArrows = /*#__PURE__*/ styled("div", {
-    target: "efld0qd3",
+    target: "eugq6k3",
     label: "StyledArrows"
 })("display:flex;gap:var(", tokens.calendarHeaderArrowGap, ");padding:var(", tokens.calendarHeaderArrowPadding, ");");
 // NOTE: переопределение токенов IconButton
 export const StyledArrow = /*#__PURE__*/ styled(IconButton, {
-    target: "efld0qd4",
+    target: "eugq6k4",
     label: "StyledArrow"
 })(iconButtonTokens.iconButtonColor, ":var(", tokens.iconButtonColor, ");", iconButtonTokens.iconButtonBackgroundColor, ":var(", tokens.iconButtonBackgroundColor, ");", iconButtonTokens.iconButtonColorHover, ":var(", tokens.iconButtonColorHover, ");", iconButtonTokens.iconButtonBackgroundColorHover, ":var(", tokens.iconButtonBackgroundColorHover, ");", iconButtonTokens.iconButtonColorActive, ":var(", tokens.iconButtonColorActive, ");", iconButtonTokens.iconButtonBackgroundColorActive, ":var(", tokens.iconButtonBackgroundColorActive, ");", iconButtonTokens.iconButtonHeight, ":var(", tokens.iconButtonHeight, ");", iconButtonTokens.iconButtonWidth, ":var(", tokens.iconButtonWidth, ");", iconButtonTokens.iconButtonPadding, ":var(", tokens.iconButtonPadding, ");", iconButtonTokens.iconButtonRadius, ":var(", tokens.iconButtonRadius, ");", iconButtonTokens.iconButtonFocusColor, ":var(", tokens.iconButtonFocusColor, ");&.", classes.disabledPrevButton, "{cursor:not-allowed;opacity:0.4;&:hover,&:active{color:var(", tokens.iconButtonColor, ");}}");
 export const StyledNavigation = /*#__PURE__*/ styled("div", {
-    target: "efld0qd5",
+    target: "eugq6k5",
     label: "StyledNavigation"
 })("width:100%;", flexCenter, ";");
 export const StyledDoubleHeaderWrapper = /*#__PURE__*/ styled("div", {
-    target: "efld0qd6",
+    target: "eugq6k6",
     label: "StyledDoubleHeaderWrapper"
 })("width:100%;display:grid;align-items:center;grid-template-columns:var(", tokens.iconButtonWidth, ") 1fr var(", tokens.iconButtonWidth, ");grid-template-areas:'a b c';", StyledArrow, "{grid-area:a;}&.", classes.doubleHeaderLastDateWrapper, " ", StyledArrow, "{grid-area:c;}");
 export const StyledHeaderDouble = /*#__PURE__*/ styled("button", {
-    target: "efld0qd7",
+    target: "eugq6k7",
     label: "StyledHeaderDouble"
 })("border:none;background-color:transparent;padding:0;outline:none;font-family:var(", tokens.calendarHeaderFontFamily, ");font-size:var(", tokens.calendarHeaderFontSize, ");font-style:var(", tokens.calendarHeaderFontStyle, ");font-weight:var(", tokens.calendarHeaderFontWeightBold, ");letter-spacing:var(", tokens.calendarHeaderFontLetterSpacing, ");line-height:var(", tokens.calendarHeaderFontLineHeight, ");color:var(", tokens.calendarContentPrimaryColor, ");grid-area:b;justify-self:center;cursor:pointer;display:flex;gap:var(", tokens.calendarHeaderDateGap, ");justify-content:space-between;align-items:center;margin:0;height:fit-content;", String(flexCenter), ";", addFocus({
     outlineSize: '0.063rem',
@@ -51,6 +55,6 @@ export const StyledHeaderDouble = /*#__PURE__*/ styled("button", {
     outlineRadius: '0.563rem'
 }), ";");
 export const StyledHeaderArrow = /*#__PURE__*/ styled(IconDisclosureDownFill, {
-    target: "efld0qd8",
+    target: "eugq6k8",
     label: "StyledHeaderArrow"
 })("color:var(", tokens.calendarHeaderArrowColor, ");");

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

@@ -4,7 +4,7 @@ import { useDisableScroll } from "../../../hooks";
 import { classes } from "./Carousel.tokens";
 import { base as sizeCSS } from "./variations/_size/base";
 import { base as viewCSS } from "./variations/_view/base";
-import { base, CarouselWrapper, CarouselTrack, CarouselVirtualItem, ControlsWrapper, IconButton } from "./Carousel.styles";
+import { base, CarouselWrapper, CarouselTrack, CarouselFullWidthTrack, CarouselSlide, CarouselVirtualItem, CarouselFullWidthVirtualItem, ControlsWrapper, IconButton } from "./Carousel.styles";
 import { useCarousel } from "./hooks/useCarousel";
 import { Dots } from "./ui";
 import { getNormalizedIndex } from "./utils";
@@ -16,7 +16,7 @@ export const DEFAULT_ESTIMATED_SLIDE_WIDTH = 320;
 export const ITEM_VIRTUAL_ATTRIBUTE = 'data-carousel-index';
 /**
  * Компонент для создания списков с прокруткой.
- */ export const carouselNewRoot = (Root)=>/*#__PURE__*/ 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)=>{
+ */ export const carouselNewRoot = (Root)=>/*#__PURE__*/ 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 = useMemo(()=>Children.toArray(children), [
             children
         ]);
@@ -64,21 +64,28 @@ export const ITEM_VIRTUAL_ATTRIBUTE = 'data-carousel-index';
             gap,
             virtual
         });
+        const Track = fullWidth ? CarouselFullWidthTrack : CarouselTrack;
+        const VirtualItem = fullWidth ? CarouselFullWidthVirtualItem : CarouselVirtualItem;
         const slides = useMemo(()=>{
             if (!virtual) {
-                return children;
+                if (!fullWidth) {
+                    return children;
+                }
+                return Children.map(childrenArray, (child)=>/*#__PURE__*/ React.createElement(CarouselSlide, null, child));
             }
             return virtualItems.map((virtualItem)=>{
                 const child = childrenArray[virtualItem.index];
-                return /*#__PURE__*/ React.createElement(CarouselVirtualItem, {
+                return /*#__PURE__*/ React.createElement(VirtualItem, {
                     key: virtualItem.key,
                     ref: measureVirtualItem(virtualItem.index),
                     [ITEM_VIRTUAL_ATTRIBUTE]: virtualItem.index
                 }, child);
             });
         }, [
+            VirtualItem,
             children,
             childrenArray,
+            fullWidth,
             measureVirtualItem,
             virtual,
             virtualItems
@@ -100,7 +107,7 @@ export const ITEM_VIRTUAL_ATTRIBUTE = 'data-carousel-index';
         })), /*#__PURE__*/ React.createElement(CarouselWrapper, {
             ref: scrollRef,
             isSwipeEnabled: swipeEnabled
-        }, /*#__PURE__*/ React.createElement(CarouselTrack, {
+        }, /*#__PURE__*/ React.createElement(Track, {
             ref: trackRef,
             gap: gap
         }, virtual && beforeSpacerWidth > 0 && /*#__PURE__*/ React.createElement("div", {

package/dist/emotion/es/components/Carousel/CarouselNew/Carousel.styles.js

@@ -7,22 +7,49 @@ const mergedConfig = mergeConfig(iconButtonConfig);
 export const IconButtonComponent = component(mergedConfig);
 export const base = /*#__PURE__*/ css("position:relative;", "base");
 export const CarouselWrapper = /*#__PURE__*/ styled("div", {
-    target: "eyydgzr0",
+    target: "ezyjlsc0",
     label: "CarouselWrapper"
 })("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:", ({ isSwipeEnabled })=>isSwipeEnabled ? 'grab' : 'default', ";&:active{cursor:", ({ 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;
+    }
+`;
+export const CarouselSlide = /*#__PURE__*/ styled("div", {
+    target: "ezyjlsc1",
+    label: "CarouselSlide"
+})(fullWidthSlideCss);
 export const CarouselTrack = /*#__PURE__*/ styled("div", {
-    target: "eyydgzr1",
+    target: "ezyjlsc2",
     label: "CarouselTrack"
 })("display:inline-flex;flex-direction:row;gap:", ({ gap })=>gap, ";vertical-align:top;& > div{scroll-snap-align:none;}");
+export const CarouselFullWidthTrack = /*#__PURE__*/ styled(CarouselTrack, {
+    target: "ezyjlsc3",
+    label: "CarouselFullWidthTrack"
+})("display:flex;width:100%;");
 export const CarouselVirtualItem = /*#__PURE__*/ styled("div", {
-    target: "eyydgzr2",
+    target: "ezyjlsc4",
     label: "CarouselVirtualItem"
 })("display:flex;flex:0 0 auto;");
+export const CarouselFullWidthVirtualItem = /*#__PURE__*/ styled(CarouselVirtualItem, {
+    target: "ezyjlsc5",
+    label: "CarouselFullWidthVirtualItem"
+})(fullWidthSlideCss);
 export const IconButton = /*#__PURE__*/ styled(IconButtonComponent, {
-    target: "eyydgzr3",
+    target: "ezyjlsc6",
     label: "IconButton"
 })("position:absolute;top:50%;transform:translateY(-50%);left:0.75rem;z-index:10;", iconButtonTokens.iconButtonColor, ":var(", tokens.controlIconButtonColor, ");", iconButtonTokens.iconButtonBackgroundColor, ":var(", tokens.controlIconButtonBackgroundColor, ");", iconButtonTokens.iconButtonColorHover, ":var(", tokens.controlIconButtonColorHover, ");", iconButtonTokens.iconButtonBackgroundColorHover, ":var(", tokens.controlIconButtonBackgroundColorHover, ");", iconButtonTokens.iconButtonColorActive, ":var(", tokens.controlIconButtonColorActive, ");", iconButtonTokens.iconButtonBackgroundColorActive, ":var(", tokens.controlIconButtonBackgroundColorActive, ");", iconButtonTokens.iconButtonHeight, ":2.5rem;", iconButtonTokens.iconButtonWidth, ":2.5rem;", iconButtonTokens.iconButtonPadding, ":1rem;", iconButtonTokens.iconButtonRadius, ":var(", tokens.controlIconButtonRadius, ");&.", classes.rightControlButton, "{left:auto;right:0.75rem;}");
 export const ControlsWrapper = /*#__PURE__*/ styled("div", {
-    target: "eyydgzr4",
+    target: "ezyjlsc7",
     label: "ControlsWrapper"
 })("position:relative;");