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

package/dist/emotion/es/plasmaCore/utils/utils/extractTextFrom.js

@@ -0,0 +1,20 @@
+import { isValidElement, Children } from "react";
+export const extractTextFrom = (textSource)=>{
+    switch(typeof textSource){
+        case 'string':
+            return textSource;
+        case 'number':
+            return textSource.toString();
+        case 'object':
+            {
+                if (!isValidElement(textSource) || !textSource.props || !textSource.props.children) {
+                    return '';
+                }
+                return Children.map(textSource.props.children, (child)=>{
+                    return extractTextFrom(child);
+                }).join('');
+            }
+        default:
+            return '';
+    }
+};

package/dist/emotion/es/plasmaCore/utils/utils/focusManager.js

@@ -0,0 +1,57 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+import { findTabbableDescendants } from "./tabbable";
+/**
+ *  Менеджер фокуса при открытии и закрытии нод при использовании focus-trap.
+ *  Также необходим, чтобы фокус всегда должен находиться внутри необходимой ноды.
+ * */ export class FocusManager {
+    constructor(){
+        // массив с элементами, которые нужно зафокусить после анмаунта
+        _define_property(this, "focusAfterElements", []);
+        // массив с trap нодами
+        _define_property(this, "focusNodes", []);
+        _define_property(this, "handleFocus", ()=>{
+            // Фокус всегда должен находиться внутри необходимой ноды
+            const focusNode = this.focusNodes[this.focusNodes.length - 1];
+            if (!focusNode || focusNode.contains(document.activeElement)) {
+                return;
+            }
+            // Выделяем первый tabbable элемент
+            const el = findTabbableDescendants(focusNode)[0] || focusNode;
+            el.focus();
+        });
+        // добавление на фокус после анмаунта
+        _define_property(this, "markForFocusAfter", (focusAfterNode)=>{
+            const node = focusAfterNode && focusAfterNode.current ? focusAfterNode.current : document.activeElement;
+            this.focusAfterElements.push(node);
+        });
+        // фокус на необходимый элемент
+        _define_property(this, "returnFocus", ()=>{
+            const toFocus = this.focusAfterElements.pop() ?? null;
+            if (toFocus) {
+                toFocus.focus();
+            }
+        });
+        // при маунте ноды
+        _define_property(this, "setupScopedFocus", (element)=>{
+            this.focusNodes.push(element);
+            document.addEventListener('focusin', this.handleFocus, true);
+        });
+        // при анмаунте
+        _define_property(this, "teardownScopedFocus", ()=>{
+            this.focusNodes.pop();
+            document.removeEventListener('focusin', this.handleFocus);
+        });
+    }
+}

package/dist/emotion/es/plasmaCore/utils/utils/formatCurrency.js

@@ -0,0 +1,14 @@
+/**
+ * Форматирование числа в цену.
+ * @param {number} value
+ * @param {string} currency
+ * @param {number} minimumFractionDigits
+ * @return {string}
+ */ export const formatCurrency = (value, currency, minimumFractionDigits)=>{
+    const formatter = new Intl.NumberFormat('ru', {
+        style: 'currency',
+        currency,
+        minimumFractionDigits
+    });
+    return formatter.format(value);
+};

package/dist/emotion/es/plasmaCore/utils/utils/formatters.js

@@ -0,0 +1,18 @@
+export const last = (array)=>array[array.length - 1];
+export const padZeroNumber = (value)=>`${value}`.padStart(2, '0');
+/**
+ * Форматирование названия месяца.
+ * Если не передавать `day`, то название месяца будет, например, `июнь`.
+ * В данном случае вернется `июня`.
+ * Так же результат выполнения метода `formatToParts` является массивом,
+ * в котором находятся части даты, форматированной на основнии `options`.
+ * То есть в данном случае вернется массив [`day`, `separator`, `month`]
+ */ export const monthName = (val, monthFormat)=>{
+    const targetMonth = new Date(2000, val, 1);
+    return last(new Intl.DateTimeFormat('ru-RU', {
+        day: 'numeric',
+        month: monthFormat
+    }).formatToParts(targetMonth)).value;
+};
+export const monthLongName = (val)=>monthName(val, 'long');
+export const monthShortName = (val)=>monthName(val, 'short').replace('.', '');

package/dist/emotion/es/plasmaCore/utils/utils/index.js

@@ -0,0 +1,10 @@
+export { animatedScrollToX, animatedScrollToY } from "./animatedScrollTo";
+export { canUseDOM } from "./canUseDOM";
+export { convertRoundnessMatrix } from "./roundness";
+export { extractTextFrom } from "./extractTextFrom";
+export { padZeroNumber, monthLongName, monthShortName } from "./formatters";
+export { formatCurrency } from "./formatCurrency";
+export { setRef } from "./setRef";
+export { toCssSize } from "./toCssSize";
+export { transformStyles } from "./transformStyles";
+export { IS_REACT_18, safeFlushSync, safeUseId } from "./react";

package/dist/emotion/es/plasmaCore/utils/utils/react.js

@@ -0,0 +1,17 @@
+import React from "react";
+import ReactDOM from "react-dom";
+// NOTE: для next.js важно, чтобы путь до хука был полный, т.к. есть проблемы с ре-экспортом
+import { useUniqId } from "../hooks/useUniqId";
+// TODO: https://github.com/salute-developers/plasma/issues/233
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const { flushSync } = ReactDOM;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const { useId } = React;
+export const IS_REACT_18 = ReactDOM.version.split('.')[0] === '18';
+export function safeFlushSync(fn) {
+    if (!IS_REACT_18) {
+        return fn();
+    }
+    return flushSync(fn);
+}
+export const safeUseId = !IS_REACT_18 ? useUniqId : useId;

package/dist/emotion/es/plasmaCore/utils/utils/roundness.js

@@ -0,0 +1,35 @@
+/** Матрица радиусов. r - радиус стандартный, h - радиус округлый (вычисляемый из высоты)
+ * tl ---- tr
+ * |        |
+ * |        |
+ * bl ---- br
+ */ export const pins = {
+    'square-square': 'r',
+    'square-clear': 'r 0 0 r',
+    'clear-square': '0 r r 0',
+    'clear-clear': '0',
+    'clear-circle': '0 h h 0',
+    'circle-clear': 'h 0 0 h',
+    'circle-circle': 'h'
+};
+/**
+ * Преобразовывает матрицу радиусов с указанными размерами.
+ * @param {string} matrixKey Ключ матрицы радиусов
+ * @param {string} r r-радиус
+ * @param {string} h h-радиус
+ * @example
+ * // Выведет значение для border-radius, равное '1em 0 0 1em'
+ * convertPinsMatrix('r 0 0 r', '1em');
+ * @example
+ * // Выведет значение для border-radius, равное '1em 2em 2em 1em'
+ * convertPinsMatrix('r h h r', '1em', '2em');
+ */ export const convertRoundnessMatrix = (matrixKey, r, h)=>matrixKey && pins[matrixKey].split(' ').map((char)=>{
+        switch(char){
+            case 'r':
+                return r;
+            case 'h':
+                return h;
+            default:
+                return char;
+        }
+    }).join(' ');

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

@@ -0,0 +1,25 @@
+import { findTabbableDescendants } from "./tabbable";
+/**
+ * Управлление фокусом лишь внутри ноды через tab
+ * @param node
+ * @param event
+ */ export const scopeTab = (node, event)=>{
+    const 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/es/plasmaCore/utils/utils/setRef.js

@@ -0,0 +1,7 @@
+export const setRef = (ref, value)=>{
+    if (typeof ref === 'function') {
+        ref(value);
+    } else if (ref) {
+        ref.current = value;
+    }
+};

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

@@ -0,0 +1,48 @@
+const tabbableNode = /input|select|textarea|button|object/;
+export 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';
+};
+export 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);
+};
+export 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);
+};
+export const isTabble = (element, parentContainer)=>{
+    const tabIndex = getElementTabIndex(element);
+    const isTabIndexNaN = Number.isNaN(tabIndex);
+    return (isTabIndexNaN || tabIndex >= 0) && isFocusable(element, parentContainer);
+};
+// Все элементы внутри данной ноды, до которых можно добраться табом
+export const findTabbableDescendants = (element)=>{
+    return Array.from(element.querySelectorAll(focusSelector)).filter((el)=>isTabble(el, element));
+};

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

@@ -0,0 +1,3 @@
+/**
+ * Добавит ед./изм. value + px, если передан number
+ */ export const toCssSize = (value)=>typeof value === 'number' ? `${value}px` : value;

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

@@ -0,0 +1,10 @@
+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;
+/**
+ * Транформирует объект стилей,
+ * оставляя значения как есть (например, не добавляя "px" к числам),
+ * а ключи переводя в kebab-case.
+ * Подходит для подготовки типографической темы.
+ */ export const transformStyles = (styles)=>Object.entries(styles).map(([key, value])=>`${hyphenate(key)}: ${value}`).join(';');

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

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

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

@@ -65,7 +65,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const autocompleteRoot = (Root)=>/*#__PURE__*/ (0, _react.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
+const autocompleteRoot = (Root)=>/*#__PURE__*/ (0, _react.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] = (0, _react.useReducer)(_focusedReducer.focusedReducer, null);
         const [innerValue, setInnerValue] = (0, _react.useState)(defaultValue || '');
@@ -175,9 +175,12 @@ const autocompleteRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ value:
                     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/cjs/components/Autocomplete/Autocomplete.tokens.js

@@ -23,6 +23,7 @@ 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',
@@ -32,6 +33,7 @@ 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',
@@ -39,6 +41,7 @@ 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',
@@ -61,6 +64,7 @@ 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',
@@ -76,6 +80,15 @@ 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/cjs/components/Autocomplete/ui/TextField/TextField.styles.js

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

package/dist/styled-components/cjs/components/Calendar/CalendarBase/CalendarBase.js

@@ -75,7 +75,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const calendarBaseRoot = (Root)=>/*#__PURE__*/ (0, _react.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)=>{
+const calendarBaseRoot = (Root)=>/*#__PURE__*/ (0, _react.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] = (0, _react.useMemo)(()=>Array.isArray(externalValue) ? externalValue : [
                 externalValue
             ], [
@@ -241,7 +241,8 @@ const calendarBaseRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ classNa
             onPrev: handlePrev,
             onNext: handleNext,
             onUpdateCalendarState: handleUpdateCalendarState,
-            locale: locale
+            locale: locale,
+            periodSelectorAlign: periodSelectorAlign
         }), calendarState === _types.CalendarState.Days && /*#__PURE__*/ _react.default.createElement(_ui.CalendarDays, {
             value: internalValue,
             date: date,

package/dist/styled-components/cjs/components/Calendar/ui/CalendarHeader/CalendarHeader.js

@@ -21,7 +21,7 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const CalendarHeader = ({ type = 'Days', startYear = 0, size, firstDate, secondDate, isDouble, onPrev, onNext, onUpdateCalendarState, locale })=>{
+const CalendarHeader = ({ type = 'Days', startYear = 0, size, firstDate, secondDate, isDouble, onPrev, onNext, onUpdateCalendarState, locale, periodSelectorAlign = 'start' })=>{
     const handleCalendarState = ()=>{
         const newSize = isDouble ? _reducer.sizeMap.Months.double : _reducer.sizeMap.Months.single;
         if (type === _types.CalendarState.Days) {
@@ -91,11 +91,12 @@ const CalendarHeader = ({ type = 'Days', startYear = 0, size, firstDate, secondD
     }, /*#__PURE__*/ _react.default.createElement(_CalendarHeaderstyles.StyledHeaderDouble, {
         onClick: handleCalendarState,
         "aria-live": "polite"
-    }, getHeaderContent(secondDate, true)), /*#__PURE__*/ _react.default.createElement(NextButton, null))) : /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement(_CalendarHeaderstyles.StyledHeader, {
+    }, getHeaderContent(secondDate, true)), /*#__PURE__*/ _react.default.createElement(NextButton, null))) : /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, periodSelectorAlign === 'center' && /*#__PURE__*/ _react.default.createElement(_CalendarHeaderstyles.StyledArrows, null, /*#__PURE__*/ _react.default.createElement(PreviousButton, null)), /*#__PURE__*/ _react.default.createElement(_CalendarHeaderstyles.StyledHeader, {
+        periodSelectorAlign: periodSelectorAlign,
         type: "button",
         "aria-live": "polite",
         id: "id-grid-label",
         onClick: handleCalendarState,
         tabIndex: 0
-    }, getHeaderContent(firstDate)), /*#__PURE__*/ _react.default.createElement(_CalendarHeaderstyles.StyledArrows, null, /*#__PURE__*/ _react.default.createElement(PreviousButton, null), /*#__PURE__*/ _react.default.createElement(NextButton, null))));
+    }, getHeaderContent(firstDate)), /*#__PURE__*/ _react.default.createElement(_CalendarHeaderstyles.StyledArrows, null, periodSelectorAlign === 'start' && /*#__PURE__*/ _react.default.createElement(PreviousButton, null), /*#__PURE__*/ _react.default.createElement(NextButton, null))));
 };

package/dist/styled-components/cjs/components/Calendar/ui/CalendarHeader/CalendarHeader.styles.js

@@ -53,14 +53,14 @@ const mergedIconButtonConfig = (0, _engines.mergeConfig)(_IconButton.iconButtonC
 const IconButton = (0, _engines.component)(mergedIconButtonConfig);
 const StyledCalendarHeader = _styledcomponents.default.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(`,
     `);`
 ], _Calendartokens.tokens.calendarHeaderWrapperPadding);
 const StyledHeader = _styledcomponents.default.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(`,
@@ -71,10 +71,15 @@ const StyledHeader = _styledcomponents.default.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(`,
     `);}`,
     `;`
-], _Calendartokens.tokens.calendarHeaderFontFamily, _Calendartokens.tokens.calendarHeaderFontSize, _Calendartokens.tokens.calendarHeaderFontStyle, _Calendartokens.tokens.calendarHeaderFontWeightBold, _Calendartokens.tokens.calendarHeaderFontLetterSpacing, _Calendartokens.tokens.calendarHeaderFontLineHeight, _Calendartokens.tokens.calendarHeaderPadding, _Calendartokens.tokens.calendarContentPrimaryColor, _Calendartokens.tokens.calendarHeaderDateGap, _Calendartokens.tokens.calendarContentSecondaryColor, (0, _mixins.addFocus)({
+], _Calendartokens.tokens.calendarHeaderFontFamily, _Calendartokens.tokens.calendarHeaderFontSize, _Calendartokens.tokens.calendarHeaderFontStyle, _Calendartokens.tokens.calendarHeaderFontWeightBold, _Calendartokens.tokens.calendarHeaderFontLetterSpacing, _Calendartokens.tokens.calendarHeaderFontLineHeight, _Calendartokens.tokens.calendarHeaderPadding, _Calendartokens.tokens.calendarContentPrimaryColor, _Calendartokens.tokens.calendarHeaderDateGap, ({ periodSelectorAlign })=>periodSelectorAlign === 'center' && `
+            flex: 1;
+            min-width: 0;
+            justify-content: center;
+        `, _Calendartokens.tokens.calendarContentSecondaryColor, (0, _mixins.addFocus)({
     outlineSize: '0.063rem',
     outlineOffset: '0.125rem',
     outlineColor: `var(${_Calendartokens.tokens.calendarOutlineFocusColor})`,
@@ -82,14 +87,14 @@ const StyledHeader = _styledcomponents.default.button.withConfig({
 }));
 const StyledHeaderDate = _styledcomponents.default.span.withConfig({
     displayName: "CalendarHeader.styles__StyledHeaderDate",
-    componentId: "sc-e20b4c86-2"
+    componentId: "sc-dfdd262f-2"
 })([
     ``,
     `;pointer-events:none;`
 ], _mixins1.flexCenter);
 const StyledArrows = _styledcomponents.default.div.withConfig({
     displayName: "CalendarHeader.styles__StyledArrows",
-    componentId: "sc-e20b4c86-3"
+    componentId: "sc-dfdd262f-3"
 })([
     `display:flex;gap:var(`,
     `);padding:var(`,
@@ -97,7 +102,7 @@ const StyledArrows = _styledcomponents.default.div.withConfig({
 ], _Calendartokens.tokens.calendarHeaderArrowGap, _Calendartokens.tokens.calendarHeaderArrowPadding);
 const StyledArrow = (0, _styledcomponents.default)(IconButton).withConfig({
     displayName: "CalendarHeader.styles__StyledArrow",
-    componentId: "sc-e20b4c86-4"
+    componentId: "sc-dfdd262f-4"
 })([
     ``,
     `:var(`,
@@ -127,14 +132,14 @@ const StyledArrow = (0, _styledcomponents.default)(IconButton).withConfig({
 ], _IconButton.iconButtonTokens.iconButtonColor, _Calendartokens.tokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _Calendartokens.tokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _Calendartokens.tokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _Calendartokens.tokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _Calendartokens.tokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive, _Calendartokens.tokens.iconButtonBackgroundColorActive, _IconButton.iconButtonTokens.iconButtonHeight, _Calendartokens.tokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _Calendartokens.tokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonPadding, _Calendartokens.tokens.iconButtonPadding, _IconButton.iconButtonTokens.iconButtonRadius, _Calendartokens.tokens.iconButtonRadius, _IconButton.iconButtonTokens.iconButtonFocusColor, _Calendartokens.tokens.iconButtonFocusColor, _Calendartokens.classes.disabledPrevButton, _Calendartokens.tokens.iconButtonColor);
 const StyledNavigation = _styledcomponents.default.div.withConfig({
     displayName: "CalendarHeader.styles__StyledNavigation",
-    componentId: "sc-e20b4c86-5"
+    componentId: "sc-dfdd262f-5"
 })([
     `width:100%;`,
     `;`
 ], _mixins1.flexCenter);
 const StyledDoubleHeaderWrapper = _styledcomponents.default.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(`,
@@ -145,7 +150,7 @@ const StyledDoubleHeaderWrapper = _styledcomponents.default.div.withConfig({
 ], _Calendartokens.tokens.iconButtonWidth, _Calendartokens.tokens.iconButtonWidth, StyledArrow, _Calendartokens.classes.doubleHeaderLastDateWrapper, StyledArrow);
 const StyledHeaderDouble = _styledcomponents.default.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(`,
@@ -166,7 +171,7 @@ const StyledHeaderDouble = _styledcomponents.default.button.withConfig({
 }));
 const StyledHeaderArrow = (0, _styledcomponents.default)(_Icon.IconDisclosureDownFill).withConfig({
     displayName: "CalendarHeader.styles__StyledHeaderArrow",
-    componentId: "sc-e20b4c86-8"
+    componentId: "sc-dfdd262f-8"
 })([
     `color:var(`,
     `);`