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

package/dist/styled-components/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/styled-components/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/styled-components/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/styled-components/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/styled-components/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/styled-components/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/styled-components/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/styled-components/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/styled-components/es/components/Autocomplete/ui/TextField/TextField.styles.js

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

package/dist/styled-components/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/styled-components/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/styled-components/es/components/Calendar/ui/CalendarHeader/CalendarHeader.styles.js

@@ -9,14 +9,14 @@ const mergedIconButtonConfig = mergeConfig(iconButtonConfig);
 const IconButton = component(mergedIconButtonConfig);
 export const StyledCalendarHeader = styled.div.withConfig({
     displayName: "CalendarHeader.styles__StyledCalendarHeader",
-    componentId: "sc-e20b4c86-0"
+    componentId: "sc-dfdd262f-0"
 })([
     `display:flex;justify-content:space-between;align-items:center;padding:var(`,
     `);`
 ], tokens.calendarHeaderWrapperPadding);
 export const StyledHeader = styled.button.withConfig({
     displayName: "CalendarHeader.styles__StyledHeader",
-    componentId: "sc-e20b4c86-1"
+    componentId: "sc-dfdd262f-1"
 })([
     `border:none;background-color:transparent;padding:0;outline:none;font-family:var(`,
     `);font-size:var(`,
@@ -27,10 +27,15 @@ export const StyledHeader = styled.button.withConfig({
     `);padding:var(`,
     `);color:var(`,
     `);cursor:pointer;display:flex;gap:var(`,
-    `);justify-content:space-between;align-items:center;&:hover,&:active{color:var(`,
+    `);justify-content:space-between;align-items:center;`,
+    ` &:hover,&:active{color:var(`,
     `);}`,
     `;`
-], tokens.calendarHeaderFontFamily, tokens.calendarHeaderFontSize, tokens.calendarHeaderFontStyle, tokens.calendarHeaderFontWeightBold, tokens.calendarHeaderFontLetterSpacing, tokens.calendarHeaderFontLineHeight, tokens.calendarHeaderPadding, tokens.calendarContentPrimaryColor, tokens.calendarHeaderDateGap, tokens.calendarContentSecondaryColor, addFocus({
+], tokens.calendarHeaderFontFamily, tokens.calendarHeaderFontSize, tokens.calendarHeaderFontStyle, tokens.calendarHeaderFontWeightBold, tokens.calendarHeaderFontLetterSpacing, tokens.calendarHeaderFontLineHeight, tokens.calendarHeaderPadding, tokens.calendarContentPrimaryColor, tokens.calendarHeaderDateGap, ({ periodSelectorAlign })=>periodSelectorAlign === 'center' && `
+            flex: 1;
+            min-width: 0;
+            justify-content: center;
+        `, tokens.calendarContentSecondaryColor, addFocus({
     outlineSize: '0.063rem',
     outlineOffset: '0.125rem',
     outlineColor: `var(${tokens.calendarOutlineFocusColor})`,
@@ -38,14 +43,14 @@ export const StyledHeader = styled.button.withConfig({
 }));
 export const StyledHeaderDate = styled.span.withConfig({
     displayName: "CalendarHeader.styles__StyledHeaderDate",
-    componentId: "sc-e20b4c86-2"
+    componentId: "sc-dfdd262f-2"
 })([
     ``,
     `;pointer-events:none;`
 ], flexCenter);
 export const StyledArrows = styled.div.withConfig({
     displayName: "CalendarHeader.styles__StyledArrows",
-    componentId: "sc-e20b4c86-3"
+    componentId: "sc-dfdd262f-3"
 })([
     `display:flex;gap:var(`,
     `);padding:var(`,
@@ -54,7 +59,7 @@ export const StyledArrows = styled.div.withConfig({
 // NOTE: переопределение токенов IconButton
 export const StyledArrow = styled(IconButton).withConfig({
     displayName: "CalendarHeader.styles__StyledArrow",
-    componentId: "sc-e20b4c86-4"
+    componentId: "sc-dfdd262f-4"
 })([
     ``,
     `:var(`,
@@ -84,14 +89,14 @@ export const StyledArrow = styled(IconButton).withConfig({
 ], iconButtonTokens.iconButtonColor, tokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, tokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, tokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, tokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, tokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive, tokens.iconButtonBackgroundColorActive, iconButtonTokens.iconButtonHeight, tokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, tokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, tokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, tokens.iconButtonRadius, iconButtonTokens.iconButtonFocusColor, tokens.iconButtonFocusColor, classes.disabledPrevButton, tokens.iconButtonColor);
 export const StyledNavigation = styled.div.withConfig({
     displayName: "CalendarHeader.styles__StyledNavigation",
-    componentId: "sc-e20b4c86-5"
+    componentId: "sc-dfdd262f-5"
 })([
     `width:100%;`,
     `;`
 ], flexCenter);
 export const StyledDoubleHeaderWrapper = styled.div.withConfig({
     displayName: "CalendarHeader.styles__StyledDoubleHeaderWrapper",
-    componentId: "sc-e20b4c86-6"
+    componentId: "sc-dfdd262f-6"
 })([
     `width:100%;display:grid;align-items:center;grid-template-columns:var(`,
     `) 1fr var(`,
@@ -102,7 +107,7 @@ export const StyledDoubleHeaderWrapper = styled.div.withConfig({
 ], tokens.iconButtonWidth, tokens.iconButtonWidth, StyledArrow, classes.doubleHeaderLastDateWrapper, StyledArrow);
 export const StyledHeaderDouble = styled.button.withConfig({
     displayName: "CalendarHeader.styles__StyledHeaderDouble",
-    componentId: "sc-e20b4c86-7"
+    componentId: "sc-dfdd262f-7"
 })([
     `border:none;background-color:transparent;padding:0;outline:none;font-family:var(`,
     `);font-size:var(`,
@@ -123,7 +128,7 @@ export const StyledHeaderDouble = styled.button.withConfig({
 }));
 export const StyledHeaderArrow = styled(IconDisclosureDownFill).withConfig({
     displayName: "CalendarHeader.styles__StyledHeaderArrow",
-    componentId: "sc-e20b4c86-8"
+    componentId: "sc-dfdd262f-8"
 })([
     `color:var(`,
     `);`

package/dist/styled-components/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/styled-components/es/components/Carousel/CarouselNew/Carousel.styles.js

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