@salutejs/plasma-new-hope 0.94.0-canary.1224.9684925191.0 → 0.94.0-canary.1269.9679187594.0

package/styled-components/cjs/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx

@@ -1,257 +0,0 @@
-import React, { ComponentProps, useRef, useState } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
-
-import { WithTheme } from '../../../_helpers';
-import { IconButton } from '../IconButton/IconButton';
-import { RangeInputRefs } from '../../../../components/Range/Range.types';
-
-import { DatePicker, DatePickerRange } from './DatePicker';
-
-const onChangeValue = action('onChangeValue');
-const onBlur = action('onBlur');
-const onFocus = action('onFocus');
-
-const onChangeFirstValue = action('onChangeFirstValue');
-const onChangeSecondValue = action('onChangeSecondValue');
-
-const sizes = ['l', 'm', 's', 'xs'];
-const views = ['default'];
-const dividers = ['none', 'dash', 'icon'];
-
-const meta: Meta = {
-    title: 'plasma_web/DatePicker',
-    decorators: [WithTheme],
-    argTypes: {
-        view: {
-            options: views,
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        size: {
-            options: sizes,
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        min: {
-            control: {
-                type: 'date',
-            },
-        },
-        max: {
-            control: {
-                type: 'date',
-            },
-        },
-    },
-};
-
-export default meta;
-
-type StoryPropsDefault = ComponentProps<typeof DatePicker> & {
-    enableContentLeft: boolean;
-    enableContentRight: boolean;
-};
-
-const StoryDefault = ({
-    enableContentLeft,
-    enableContentRight,
-    valueError,
-    valueSuccess,
-    size,
-    ...rest
-}: StoryPropsDefault) => {
-    const [isOpen, setIsOpen] = useState(false);
-
-    const iconSize = size === 'xs' ? 'xs' : 's';
-
-    return (
-        <DatePicker
-            isOpen={isOpen}
-            size={size}
-            valueError={valueError}
-            valueSuccess={valueSuccess}
-            contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
-            contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
-            onBlur={onBlur}
-            onFocus={onFocus}
-            onToggle={(is) => setIsOpen(is)}
-            onChangeValue={(e, currentValue) => {
-                onChangeValue(e, currentValue);
-            }}
-            onCommitDate={() => setIsOpen(false)}
-            {...rest}
-        />
-    );
-};
-
-export const Default: StoryObj<StoryPropsDefault> = {
-    argTypes: {
-        defaultDate: {
-            control: {
-                type: 'date',
-            },
-        },
-    },
-    args: {
-        label: 'Лейбл',
-        leftHelper: 'Подсказка к полю',
-        placeholder: '30.05.2024',
-        size: 'l',
-        view: 'default',
-        defaultDate: new Date(2024, 5, 14),
-        min: new Date(2024, 1, 1),
-        max: new Date(2024, 12, 29),
-        maskWithFormat: false,
-        disabled: false,
-        readOnly: false,
-        textBefore: '',
-        enableContentLeft: true,
-        enableContentRight: true,
-        valueError: false,
-        valueSuccess: false,
-    },
-    render: (args) => <StoryDefault {...args} />,
-};
-
-type StoryPropsRange = ComponentProps<typeof DatePickerRange> & {
-    enableContentLeft: boolean;
-    enableContentRight: boolean;
-    enableFirstTextfieldContentLeft: boolean;
-    enableSecondTextfieldContentLeft: boolean;
-    enableFirstTextfieldContentRight: boolean;
-    enableSecondTextfieldContentRight: boolean;
-};
-
-const ActionButton = ({ size }) => {
-    const iconSize = size === 'xs' ? 'xs' : 's';
-    return (
-        <IconButton view="clear" size={size}>
-            <IconPlaceholder size={iconSize} />
-        </IconButton>
-    );
-};
-
-const StoryRange = ({
-    dividerVariant,
-    enableContentLeft,
-    enableContentRight,
-    firstTextfieldTextBefore,
-    secondTextfieldTextBefore,
-    enableFirstTextfieldContentLeft,
-    enableSecondTextfieldContentLeft,
-    enableFirstTextfieldContentRight,
-    enableSecondTextfieldContentRight,
-    firstValueError,
-    firstValueSuccess,
-    secondValueError,
-    secondValueSuccess,
-    size,
-    ...rest
-}: StoryPropsRange) => {
-    const rangeRef = useRef<RangeInputRefs>(null);
-
-    const [isOpen, setIsOpen] = useState(false);
-    const [firstDate, setFirstDate] = useState<string | Date>('');
-
-    const iconSize = size === 'xs' ? 'xs' : 's';
-    const showDividerIcon = dividerVariant === 'icon';
-    const showDefaultTextBefore = dividerVariant === 'none';
-
-    const dividerIconProps = {
-        dividerIcon: showDividerIcon ? <IconPlaceholder size={iconSize} /> : null,
-        dividerVariant,
-    };
-
-    return (
-        <DatePickerRange
-            size={size}
-            ref={rangeRef}
-            isOpen={isOpen}
-            firstValueError={firstValueError}
-            firstValueSuccess={firstValueSuccess}
-            secondValueError={secondValueError}
-            secondValueSuccess={secondValueSuccess}
-            contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
-            contentRight={enableContentRight ? <ActionButton size={size} /> : undefined}
-            firstTextfieldContentLeft={
-                enableFirstTextfieldContentLeft ? <IconPlaceholder size={iconSize} /> : undefined
-            }
-            firstTextfieldContentRight={
-                enableFirstTextfieldContentRight ? <IconPlaceholder size={iconSize} /> : undefined
-            }
-            secondTextfieldContentLeft={
-                enableSecondTextfieldContentLeft ? <IconPlaceholder size={iconSize} /> : undefined
-            }
-            secondTextfieldContentRight={
-                enableSecondTextfieldContentRight ? <IconPlaceholder size={iconSize} /> : undefined
-            }
-            firstTextfieldTextBefore={
-                showDefaultTextBefore ? firstTextfieldTextBefore || 'С' : firstTextfieldTextBefore
-            }
-            secondTextfieldTextBefore={
-                showDefaultTextBefore ? secondTextfieldTextBefore || 'ПО' : secondTextfieldTextBefore
-            }
-            onToggle={(is) => setIsOpen(is)}
-            onChangeFirstValue={(e, currentValue) => {
-                onChangeFirstValue(e, currentValue);
-            }}
-            onChangeSecondValue={(e, currentValue) => {
-                onChangeSecondValue(e, currentValue);
-            }}
-            onCommitFirstDate={(currentValue) => {
-                setFirstDate(currentValue);
-            }}
-            onCommitSecondDate={(currentValue) => {
-                firstDate && currentValue && setIsOpen(false);
-            }}
-            {...dividerIconProps}
-            {...rest}
-        />
-    );
-};
-
-export const Range: StoryObj<StoryPropsRange> = {
-    argTypes: {
-        dividerVariant: {
-            options: dividers,
-            control: {
-                type: 'inline-radio',
-            },
-        },
-    },
-    args: {
-        label: 'Лейбл',
-        leftHelper: 'Подсказка к полю',
-        firstPlaceholder: '30.05.2024',
-        secondPlaceholder: '04.06.2024',
-        firstTextfieldTextBefore: '',
-        secondTextfieldTextBefore: '',
-        firstTextfieldTextAfter: '',
-        secondTextfieldTextAfter: '',
-        size: 'l',
-        view: 'default',
-        isDoubleCalendar: false,
-        dividerVariant: 'dash',
-        min: new Date(2024, 1, 1),
-        max: new Date(2024, 12, 29),
-        maskWithFormat: false,
-        disabled: false,
-        readOnly: false,
-        enableContentLeft: true,
-        enableContentRight: true,
-        enableFirstTextfieldContentLeft: false,
-        enableFirstTextfieldContentRight: false,
-        enableSecondTextfieldContentLeft: false,
-        enableSecondTextfieldContentRight: false,
-
-        firstValueError: false,
-        firstValueSuccess: false,
-        secondValueError: false,
-        secondValueSuccess: false,
-    },
-    render: (args) => <StoryRange {...args} />,
-};

package/styled-components/cjs/utils/datejs.js

@@ -1,11 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.customDayjs = void 0;
-var _dayjs = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("dayjs"));
-var _customParseFormat = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("dayjs/plugin/customParseFormat"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-_dayjs["default"].extend(_customParseFormat["default"]);
-var customDayjs = exports.customDayjs = _dayjs["default"];

package/styled-components/cjs/utils/getPopoverPlacement.js

@@ -1,21 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getPlacements = exports.getPlacement = void 0;
-var getPlacement = exports.getPlacement = function getPlacement(placement) {
-  return "".concat(placement, "-start");
-};
-var getPlacements = exports.getPlacements = function getPlacements(placements) {
-  if (!placements) {
-    return;
-  }
-  var isArray = Array.isArray(placements);
-  if (!isArray) {
-    return getPlacement(placements);
-  }
-  return (placements || []).map(function (placement) {
-    return getPlacement(placement);
-  });
-};

package/styled-components/es/components/Calendar/mixins/active.js

@@ -1,6 +0,0 @@
-export var addActive = function addActive(args) {
-  var activeBackground = args.activeBackground,
-    activeColor = args.activeColor,
-    activeFontWeight = args.activeFontWeight;
-  return "\n        &:active {\n            background-color: ".concat(activeBackground, ";\n            color: ").concat(activeColor, ";\n            font-weight: ").concat(activeFontWeight, ";\n        }\n    ");
-};

package/styled-components/es/components/Calendar/mixins/flex.js

@@ -1,2 +0,0 @@
-export var flexCenter = "\n    display: flex;\n    justify-content: center;\n    align-items: center;\n";
-export var flexSpaceBetween = "\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n";

package/styled-components/es/components/Calendar/mixins/selected.js

@@ -1,18 +0,0 @@
-import { classes } from '../Calendar.tokens';
-import { addActive } from './active';
-export var addSelected = function addSelected(args) {
-  var minWidth = args.minWidth,
-    minHeight = args.minHeight,
-    selectedFontWeight = args.selectedFontWeight,
-    selectedBackground = args.selectedBackground,
-    selectedColor = args.selectedColor,
-    selectableBackgroundHover = args.selectableBackgroundHover,
-    currentBorderColor = args.currentBorderColor,
-    activeBackground = args.activeBackground,
-    activeColor = args.activeColor;
-  return "\n        outline: none;\n        cursor: pointer;\n\n        &:hover {\n            background-color: ".concat(selectableBackgroundHover, ";\n        };\n        \n\n        &.").concat(classes.hoveredItem, ", &.").concat(classes.hoveredItem, ":hover {\n            background-color: ").concat(selectedBackground, ";\n            color: ").concat(selectedColor, ";\n            cursor: pointer;\n            font-weight: ").concat(selectedFontWeight, ";\n        }\n\n        &.").concat(classes.selectedItem, ":not(.").concat(classes.currentItem, ") {\n            border: 0;\n            background-color: ").concat(selectedBackground, ";\n            color: ").concat(selectedColor, ";\n            cursor: default;\n            font-weight: ").concat(selectedFontWeight, ";\n        };\n        \n        ").concat(addActive({
-    activeBackground: activeBackground,
-    activeColor: activeColor,
-    activeFontWeight: selectedFontWeight
-  }), ";\n\n        &.").concat(classes.currentItem, " {\n            border: 0.063rem solid ").concat(currentBorderColor, ";\n\n            &.").concat(classes.selectedItem, " {\n                background-color: initial;\n                color: ").concat(selectedColor, ";\n                font-weight: ").concat(selectedFontWeight, ";\n\n                & > div:first-of-type {\n                    background-color: ").concat(selectedBackground, ";\n                    min-width: ").concat(minWidth, ";\n                    min-height: ").concat(minHeight, ";\n                }\n            }\n        };\n    ");
-};

package/styled-components/es/components/DatePicker/DatePicker.template-doc.mdx

@@ -1,150 +0,0 @@
----
-id: datepicker
-title: DatePicker
----
-
-import { PropsTable, Description } from '@site/src/components';
-
-# DatePicker
-<Description name="DatePicker" />
-<PropsTable name="DatePicker" exclude={['css']} />
-
-## Использование
-Компонент `DatePicker` представляет собой поле ввода даты с выпадающим календарем.
-
-Размер `DatePicker` задаётся с помощью свойства `size`. 
-Возможные значения свойтсва: `"l"`, `"m"`, `"s"`, `"xs"`.
-
-```tsx live
-import React, {useState} from 'react';
-import { DatePicker, IconButton } from '@salutejs/{{ package }}';
-import { IconDone } from '@salutejs/plasma-icons';
-
-export function App() {
-    return (
-        <div style={{ height: "450px" }}>
-            <DatePicker
-                label="Лейбл"
-                leftHelper="Подсказка к полю"
-                placeholder="Введите дату"
-                contentRight={<IconDone size="s" />}
-                size="l"
-            />
-        </div>
-    );
-}
-```
-
-### Формат даты
-Формат даты задается с помощью свойства `format`. 
-При выборе даты в календаре или вводе даты через поле ввода, дата будет приводиться к заданному формату. 
-Свойство `maskWithFormat` позволяет маскировать ввод:
-
-```tsx live
-import React, {useState} from 'react';
-import { DatePicker, IconButton } from '@salutejs/{{ package }}';
-import { IconDone } from '@salutejs/plasma-icons';
-
-export function App() {
-    return (
-        <div style={{ height: "450px" }}>
-            <DatePicker
-                label="Лейбл"
-                leftHelper="Подсказка к полю"
-                placeholder="Введите дату"
-                format="DD-MM-YYYY"
-                maskWithFormat
-                contentRight={<IconDone size="s" />}
-            />
-        </div>
-    );
-}
-```
-
-### Валидация и индикация успешного ввода даты.
-За индикацию ошибки или успешного ввода отвечают `valueError`, `valueSuccess`.
-В данном примере валидация происходит при нажатии клавиши `Enter` после ввода значений:
-
-```tsx live
-import React, {useState} from 'react';
-import { DatePicker, IconButton } from '@salutejs/{{ package }}';
-import { IconDone } from '@salutejs/plasma-icons';
-
-export function App() {
-    const [isOpen, setIsOpen] = useState(false);
-    const [error, setError] = useState(false);
-    const [success, setSuccess] = useState(false);
-
-    const handleCommitDate = (newDate: Date | string, dateError?: boolean, dateSuccess?: boolean) => {
-        if (dateError) {
-            setError(true);
-            return;
-        }
-
-        if (dateSuccess) {
-            setSuccess(true);
-        }
-
-        setIsOpen(false);
-    };
-
-    return (
-        <div style={{ height: "450px" }}>
-            <DatePicker
-                isOpen={isOpen}
-                label="Лейбл"
-                leftHelper="Подсказка к полю"
-                placeholder="Введите дату"
-                format="DD-MM-YYYY"
-                maskWithFormat
-                valueError={error}
-                valueSuccess={success}
-                contentRight={<IconDone size="s" />}
-                onChangeValue={() => {
-                    setError(false);
-                    setSuccess(false);
-                }}
-                onCommitDate={handleCommitDate}
-            />
-        </div>
-    );
-}
-```
-
-## DatePickerRange
-<Description name="DatePickerRange" />
-<PropsTable name="DatePickerRange" exclude={['css']} />
-
-## Использование
-Компонент `DatePickerRange` представляет собой `Range` с выпадающим календарем.
-Календарь может быть одиночным или двойным. За это отвечает свойство `isDoubleCalendar`.
-
-```tsx live
-import React, {useState} from 'react';
-import { DatePickerRange, IconButton } from '@salutejs/{{ package }}';
-import { IconDone } from '@salutejs/plasma-icons';
-
-export function App() {
-    const ActionButton = () => {
-        return (
-            <IconButton view="clear" size="l">
-                <IconDone size="s" />
-            </IconButton>
-        );
-    };
-
-    return (
-        <div style={{ height: "500px" }}>
-            <DatePickerRange
-                size="l"
-                label="Лейбл"
-                leftHelper="Подсказка к полю"
-                firstPlaceholder="Введите дату 1"
-                secondPlaceholder="Введите дату 2"
-                contentRight={<ActionButton />}
-                isDoubleCalendar
-            />
-        </div>
-    );
-}
-```

package/styled-components/es/components/DatePicker/DatePicker.tokens.js

@@ -1,181 +0,0 @@
-export var classes = {
-  datePickerError: 'date-picker-error',
-  datePickerSuccess: 'date-picker-success',
-  datePickerRoot: 'date-picker-root'
-};
-export var tokens = {
-  width: '--plasma-date-picker-width',
-  /** Токены полей ввода в рендже */
-  background: '--plasma-date-picker_range-background',
-  backgroundError: '--plasma-date-picker_range-background-error',
-  backgroundSuccess: '--plasma-date-picker_range-background-success',
-  backgroundReadOnly: '--plasma-date-picker_range-background-readonly',
-  borderRadius: '--plasma-date-picker_range-border-radius',
-  borderWidth: '--plasma-date-picker_range-border-width',
-  borderColor: '--plasma-date-picker_range-border-color',
-  borderColorHover: '--plasma-date-picker_range-border-color-hover',
-  borderColorFocus: '--plasma-date-picker_range-border-color-focus',
-  borderColorError: '--plasma-date-picker_range-border-color-error',
-  borderColorSuccess: '--plasma-date-picker_range-border-color-success',
-  borderColorReadOnly: '--plasma-date-picker_range-border-color-readonly',
-  /** Токены разделителя */
-  dividerColor: '--plasma-date-picker_range__divider-color',
-  dividerColorReadOnly: '--plasma-date-picker_range__divider-color-readonly',
-  dividerPadding: '--plasma-date-picker_range__divider-padding',
-  dividerFontFamily: '--plasma-date-picker_range__divider-font-family',
-  dividerFontStyle: '--plasma-date-picker_range__divider-font-style',
-  dividerFontSize: '--plasma-date-picker_range__divider-font-size',
-  dividerFontWeight: '--plasma-date-picker_range__divider-font-weight',
-  dividerLetterSpacing: '--plasma-date-picker_range__divider-letter-spacing',
-  dividerLineHeight: '--plasma-date-picker_range__divider-line-height',
-  /** Токены слотов для контента в рендже */
-  leftContentMargin: '--plasma-date-picker_range__left-content-margin',
-  rightContentMargin: '--plasma-date-picker_range__right-content-margin',
-  /** Токены лейбла */
-  labelColor: '--plasma-date-picker__label-color',
-  labelColorReadOnly: '--plasma-date-picker__label-color-readonly',
-  labelOffset: '--plasma-date-picker__label-offset',
-  labelFontFamily: '--plasma-date-picker__label-font-family',
-  labelFontStyle: '--plasma-date-picker__label-font-style',
-  labelFontSize: '--plasma-date-picker__label-font-size',
-  labelFontWeight: '--plasma-date-picker__label-font-weight',
-  labelLetterSpacing: '--plasma-date-picker__label-letter-spacing',
-  labelLineHeight: '--plasma-date-picker__label-line-height',
-  /** Токены вспомогательного текста */
-  leftHelperColor: '--plasma-date-picker__left-helper-color',
-  leftHelperColorReadOnly: '--plasma-date-picker__left-helper-color-readonly',
-  leftHelperOffset: '--plasma-date-picker__left-helper-offset',
-  leftHelperFontFamily: '--plasma-date-picker__left-helper-font-family',
-  leftHelperFontStyle: '--plasma-date-picker__left-helper-font-style',
-  leftHelperFontSize: '--plasma-date-picker__left-helper-font-size',
-  leftHelperFontWeight: '--plasma-date-picker__left-helper-font-weight',
-  leftHelperLetterSpacing: '--plasma-date-picker__left-helper-letter-spacing',
-  leftHelperLineHeight: '--plasma-date-picker__left-helper-line-height',
-  /** Прозрачность для всего компонента в состоянии disabled */
-  disabledOpacity: '--plasma-date-picker-disabled-opacity',
-  /** Цвет обводки поля ввода при фокусе */
-  focusColor: '--plasma-date-picker-focus-color',
-  /** Токены полей ввода */
-  textFieldColor: '--plasma-date-picker-textfield-color',
-  textFieldFocusColor: '--plasma-date-picker-textfield-focus-color',
-  textFieldPlaceholderColor: '--plasma-date-picker-textfield-placeholder-color',
-  textFieldCaretColor: '--plasma-date-picker-textfield-caret-color',
-  textFieldBackgroundColor: '--plasma-date-picker-textfield-background-color',
-  textFieldBackgroundColorHover: '--plasma-date-picker-textfield-background-color-hover',
-  textFieldBackgroundColorFocus: '--plasma-date-picker-textfield-background-color-focus',
-  textFieldBackgroundErrorColor: '--plasma-date-picker-textfield-background-color-error',
-  textFieldBackgroundErrorColorHover: '--plasma-date-picker-textfield-background-color-error-hover',
-  textFieldBackgroundErrorColorFocus: '--plasma-date-picker-textfield-background-color-error-focus',
-  textFieldBackgroundSuccessColor: '--plasma-date-picker-textfield-background-color-success',
-  textFieldBackgroundSuccessColorHover: '--plasma-date-picker-textfield-background-color-success-hover',
-  textFieldBackgroundSuccessColorFocus: '--plasma-date-picker-textfield-background-color-success-focus',
-  textFieldBorderColor: '--plasma-date-picker-textfield-border-color',
-  textFieldBorderColorHover: '--plasma-date-picker-textfield-border-color-hover',
-  textFieldBorderColorFocus: '--plasma-date-picker-textfield-border-color-focus',
-  textFieldBorderColorError: '--plasma-date-picker-textfield-border-color-error',
-  textFieldBorderColorErrorHover: '--plasma-date-picker-textfield-border-color-error-hover',
-  textFieldBorderColorErrorFocus: '--plasma-date-picker-textfield-border-color-error-focus',
-  textFieldBorderColorSuccess: '--plasma-date-picker-textfield-border-color-success',
-  textFieldBorderColorSuccessHover: '--plasma-date-picker-textfield-border-color-success-hover',
-  textFieldBorderColorSuccessFocus: '--plasma-date-picker-textfield-border-color-success-focus',
-  textFieldColorReadOnly: '--plasma-date-picker-textfield-color-readonly',
-  textFieldBackgroundColorReadOnly: '--plasma-date-picker-textfield-background-color-readonly',
-  textFieldBorderColorReadOnly: '--plasma-date-picker-textfield-border-color-readonly',
-  textFieldPlaceholderColorReadOnly: '--plasma-date-picker-textfield-placeholder-color-readonly',
-  textFieldHeight: '--plasma-date-picker-textfield-height',
-  textFieldBorderWidth: '--plasma-date-picker-textfield-border-width',
-  textFieldBorderRadius: '--plasma-date-picker-textfield-border-radius',
-  textFieldPadding: '--plasma-date-picker-textfield-padding',
-  textFieldLeftContentMargin: '--plasma-date-picker-textfield__left-content-margin',
-  textFieldRightContentMargin: '--plasma-date-picker-textfield__right-content-margin',
-  textFieldFontFamily: '--plasma-date-picker-textfield-font-family',
-  textFieldFontStyle: '--plasma-date-picker-textfield-font-style',
-  textFieldFontSize: '--plasma-date-picker-textfield-font-size',
-  textFieldFontWeight: '--plasma-date-picker-textfield-font-weight',
-  textFieldLetterSpacing: '--plasma-date-picker-textfield-letter-spacing',
-  textFieldLineHeight: '--plasma-date-picker-textfield-line-height',
-  textFieldTextBeforeColor: '--plasma-date-picker-textfield__before-text-color',
-  textFieldTextAfterColor: '--plasma-date-picker-textfield__after-text-color',
-  textFieldTextBeforeMargin: '--plasma-date-picker-textfield__before-text-margin',
-  textFieldTextAfterMargin: '--plasma-date-picker-textfield__after-text-margin',
-  /** Токены календаря */
-  calendarPaddingTop: '--plasma-date-picker-calendar-padding-top',
-  calendarShadow: '--plasma-date-picker-calendar-shadow',
-  calendarBorderRadius: '--plasma-date-picker-calendar-border-radius',
-  calendarWidth: '--plasma-date-picker-calendar-width',
-  calendarHeight: '--plasma-date-picker-calendar-height',
-  calendarYearsPadding: '--plasma-date-picker-calendar__years-padding',
-  calendarYearItemBorderRadius: '--plasma-date-picker-calendar__year-item-border-radius',
-  calendarYearItemWidth: '--plasma-date-picker-calendar__year-item-width',
-  calendarYearItemHeight: '--plasma-date-picker-calendar__year-item-height',
-  calendarYearFontFamily: '--plasma-date-picker-calendar__year-font-family',
-  calendarYearFontSize: '--plasma-date-picker-calendar__year-font-size',
-  calendarYearFontStyle: '--plasma-date-picker-calendar__year-font-style',
-  calendarYearFontLetterSpacing: '--plasma-date-picker-calendar__year-letter-spacing',
-  calendarYearFontLineHeight: '--plasma-date-picker-calendar__year-line-height',
-  calendarYearFontWeight: '--plasma-date-picker-calendar__year-font-weight',
-  calendarYearSelectedFontWeight: '--plasma-date-picker-calendar__year-selected-font-weight',
-  calendarMonthsPadding: '--plasma-date-picker-calendar__months-padding',
-  calendarMonthItemBorderRadius: '--plasma-date-picker-calendar__month-item-border-radius',
-  calendarMonthItemWidth: '--plasma-date-picker-calendar__month-item-width',
-  calendarMonthItemHeight: '--plasma-date-picker-calendar__month-item-height',
-  calendarMonthFontFamily: '--plasma-date-picker-calendar__month-font-family',
-  calendarMonthFontSize: '--plasma-date-picker-calendar__month-font-size',
-  calendarMonthFontStyle: '--plasma-date-picker-calendar__month-font-style',
-  calendarMonthFontLetterSpacing: '--plasma-date-picker-calendar__month-letter-spacing',
-  calendarMonthFontLineHeight: '--plasma-date-picker-calendar__month-line-height',
-  calendarMonthFontWeight: '--plasma-date-picker-calendar__month-font-weight',
-  calendarMonthSelectedFontWeight: '--plasma-date-picker-calendar__month-selected-font-weight',
-  calendarDaysPadding: '--plasma-date-picker-calendar__days-padding',
-  calendarDayItemBorderRadius: '--plasma-date-picker-calendar__day-item-border-radius',
-  calendarDayItemWidth: '--plasma-date-picker-calendar__day-item-width',
-  calendarDayItemHeight: '--plasma-date-picker-calendar__day-item-height',
-  calendarDayFontFamily: '--plasma-date-picker-calendar__day-font-family',
-  calendarDayFontSize: '--plasma-date-picker-calendar__day-font-size',
-  calendarDayFontStyle: '--plasma-date-picker-calendar__day-font-style',
-  calendarDayFontLetterSpacing: '--plasma-date-picker-calendar__day-letter-spacing',
-  calendarDayFontLineHeight: '--plasma-date-picker-calendar__day-line-height',
-  calendarDayFontWeight: '--plasma-date-picker-calendar__day-font-weight',
-  calendarDaySelectedFontWeight: '--plasma-date-picker-calendar__day-selected-font-weight',
-  calendarDayOfWeekColor: '--plasma-date-picker-calendar__day-of-week-color',
-  calendarHeaderWrapperPadding: '--plasma-date-picker-calendar__header-wrapper-padding',
-  calendarHeaderArrowGap: '--plasma-date-picker-calendar__header-arrow-gap',
-  calendarHeaderArrowPadding: '--plasma-date-picker-calendar__header-arrow-padding',
-  calendarHeaderPadding: '--plasma-date-picker-calendar__header-padding',
-  calendarHeaderDateGap: '--plasma-date-picker-calendar__header-date-gap',
-  calendarHeaderFontFamily: '--plasma-date-picker-calendar__header-font-family',
-  calendarHeaderFontSize: '--plasma-date-picker-calendar__header-font-size',
-  calendarHeaderFontStyle: '--plasma-date-picker-calendar__header-font-style',
-  calendarHeaderFontLetterSpacing: '--plasma-date-picker-calendar__header-letter-spacing',
-  calendarHeaderFontLineHeight: '--plasma-date-picker-calendar__header-line-height',
-  calendarHeaderFontWeight: '--plasma-date-picker-calendar__header-font-weight',
-  calendarHeaderFontWeightBold: '--plasma-date-picker-calendar__header-font-weight-bold',
-  iconButtonColor: '--plasma-date-picker-icon-button__color',
-  iconButtonBackgroundColor: '--plasma-date-picker-icon-button__background-color',
-  iconButtonColorHover: '--plasma-date-picker-icon-button__color-hover',
-  iconButtonBackgroundColorHover: '--plasma-date-picker-icon-button__background-color-hover',
-  iconButtonColorActive: '--plasma-date-picker-icon-button__color-active',
-  iconButtonBackgroundColorActive: '--plasma-date-picker-icon-button__background-color-active',
-  iconButtonHeight: '--plasma-date-picker-icon-button__height',
-  iconButtonWidth: '--plasma-date-picker-icon-button__width',
-  iconButtonPadding: '--plasma-date-picker-icon-button__padding',
-  iconButtonRadius: '--plasma-date-picker-icon-button__radius',
-  iconButtonFocusColor: '--plasma-date-picker-icon-button__focus-color',
-  calendarBackgroundColor: '--plasma-date-picker-calendar__background-color',
-  calendarSelectedItemBackground: '--plasma-date-picker-calendar__selected-item-background',
-  calendarSelectedItemColor: '--plasma-date-picker-calendar__selected-item-color',
-  calendarSelectableItemBackgroundHover: '--plasma-date-picker-calendar__selectable-item-background-hover',
-  calendarCurrentItemBorderColor: '--plasma-date-picker-calendar__current-item-border-color',
-  calendarCurrentItemBackgroundHover: '--plasma-date-picker-calendar__current-item-background-hover',
-  calendarCurrentItemColorHover: '--plasma-date-picker-calendar__current-item-color-hover',
-  calendarCurrentItemChildBackgroundHover: '--plasma-date-picker-calendar__current-item-child-background-hover',
-  calendarActiveItemBackground: '--plasma-date-picker-calendar__active-item-background',
-  calendarActiveItemColor: '--plasma-date-picker-calendar__active-item-color',
-  calendarHoveredItemBackground: '--plasma-date-picker-calendar__hovered-item-background',
-  calendarHoveredItemColor: '--plasma-date-picker-calendar__hovered-item-color',
-  calendarSeparatorBackground: '--plasma-date-picker-calendar__separator-background',
-  calendarRangeBackground: '--plasma-date-picker-calendar__range-background',
-  calendarOutlineFocusColor: '--plasma-date-picker-calendar__outline-focus-color',
-  calendarContentPrimaryColor: '--plasma-date-picker-calendar__content-primary-color',
-  calendarContentSecondaryColor: '--plasma-date-picker-calendar__content-secondary-color'
-};