@alfalab/core-components-calendar-range 7.1.5 → 7.2.0

package/src/views/static.tsx

@@ -0,0 +1,338 @@
+/* eslint-disable complexity */
+import React, { FC, MouseEvent, useCallback, useEffect, useState } from 'react';
+import cn from 'classnames';
+import addMonths from 'date-fns/addMonths';
+import endOfMonth from 'date-fns/endOfMonth';
+import isSameMonth from 'date-fns/isSameMonth';
+import max from 'date-fns/max';
+import startOfMonth from 'date-fns/startOfMonth';
+import subMonths from 'date-fns/subMonths';
+
+import { CalendarDesktop } from '@alfalab/core-components-calendar/desktop';
+import { usePeriodWithReset } from '@alfalab/core-components-calendar/shared';
+import {
+    formatDate,
+    isValidInputValue,
+    parseDateString,
+} from '@alfalab/core-components-calendar-input/shared';
+import {
+    DateInput,
+    DateInputProps,
+    isCompleteDateInput,
+} from '@alfalab/core-components-date-input';
+
+import { CalendarRangeProps } from '../Component';
+import { Divider } from '../components/divider';
+import { useSelectionProps, useStaticViewMonthes } from '../hooks';
+import { isDayButton } from '../utils';
+
+import styles from './index.module.css';
+
+export type CalendarRangeStaticProps = Omit<CalendarRangeProps, 'calendarPosition'> & {
+    /**
+     * Отображать начальный месяц слева или справа (влияет только на начальный рендер)
+     */
+    defaultMonthPosition?: 'left' | 'right';
+};
+
+export const CalendarRangeStatic: FC<CalendarRangeStaticProps> = ({
+    className,
+    defaultMonth = startOfMonth(new Date()).getTime(),
+    defaultMonthPosition = 'left',
+    minDate,
+    maxDate,
+    valueFrom = '',
+    valueTo = '',
+    onDateFromChange = () => null,
+    onDateToChange = () => null,
+    onChange = () => null,
+    onError,
+    inputFromProps = {},
+    inputToProps = {},
+    offDays,
+    events,
+    returnInvalidDates = false,
+    dataTestId,
+}) => {
+    const [inputFromValue, setInputFromValue] = useState<string>(valueFrom);
+    const [inputToValue, setInputToValue] = useState<string>(valueTo);
+
+    let dateFrom = isValidInputValue(inputFromValue, minDate, maxDate, offDays)
+        ? parseDateString(inputFromValue).getTime()
+        : null;
+
+    const dateTo = isValidInputValue(inputToValue, dateFrom || minDate, maxDate, offDays)
+        ? parseDateString(inputToValue).getTime()
+        : null;
+
+    if (isCompleteDateInput(inputToValue) && !dateTo && !returnInvalidDates) {
+        dateFrom = null;
+    }
+
+    const bothInvalid =
+        isCompleteDateInput(inputFromValue) &&
+        isCompleteDateInput(inputToValue) &&
+        parseDateString(inputFromValue).getTime() > parseDateString(inputToValue).getTime();
+
+    const [highlightedDate, setHighlightedDate] = useState<number | undefined>(undefined);
+
+    const period = usePeriodWithReset({
+        initialSelectedFrom: dateFrom ? parseDateString(inputFromValue).getTime() : undefined,
+        initialSelectedTo: dateTo ? parseDateString(inputToValue).getTime() : undefined,
+    });
+
+    const validateInputFromValue = useCallback(
+        (value: string) => isValidInputValue(value, minDate, dateFrom || maxDate, offDays),
+        [dateFrom, maxDate, minDate, offDays],
+    );
+
+    const validateInputToValue = useCallback(
+        (value: string) => isValidInputValue(value, dateFrom || minDate, maxDate, offDays),
+
+        [dateFrom, minDate, maxDate, offDays],
+    );
+
+    const [inputFromInvalid, setInputFromInvalid] = useState<boolean>(
+        isCompleteDateInput(inputFromValue) && dateFrom === null,
+    );
+
+    const [inputToInvalid, setInputToInvalid] = useState<boolean>(
+        isCompleteDateInput(inputToValue) && dateTo === null,
+    );
+
+    const hasValidateError = bothInvalid || inputFromInvalid || inputToInvalid;
+    const {
+        calendarProps: calendarFromProps,
+        onInputChange: onInputChangeFrom,
+        ...dateInputFromProps
+    } = inputFromProps;
+    const {
+        calendarProps: calendarToProps,
+        onInputChange: onInputChangeTo,
+        ...dateInputToProps
+    } = inputToProps;
+
+    const { monthFrom, monthTo, handleMonthFromChange, handleMonthToChange } = useStaticViewMonthes(
+        {
+            selectedFrom: period.selectedFrom,
+            selectedTo: period.selectedTo,
+            defaultMonth,
+            defaultMonthPosition,
+        },
+    );
+
+    const handleValidInputFrom = useCallback(() => {
+        setInputFromInvalid(inputFromValue !== '' && !validateInputFromValue(inputFromValue));
+    }, [inputFromValue, validateInputFromValue]);
+
+    const handleValidInputTo = useCallback(() => {
+        setInputToInvalid(inputToValue !== '' && !validateInputToValue(inputToValue));
+    }, [inputToValue, validateInputToValue]);
+
+    const handleInputFromChange: Required<DateInputProps>['onChange'] = (event, payload) => {
+        setInputFromValue(payload.value);
+        onInputChangeFrom?.(event, payload);
+    };
+
+    const handleInputToChange: Required<DateInputProps>['onChange'] = (event, payload) => {
+        setInputToValue(payload.value);
+        onInputChangeTo?.(event, payload);
+    };
+
+    const handleMouseOver = useCallback((event: MouseEvent<HTMLDivElement>) => {
+        const target = event.target as HTMLElement;
+
+        const mouseOverDayButton = isDayButton(target) || isDayButton(target.parentElement);
+
+        let date;
+
+        if (mouseOverDayButton) {
+            const button =
+                target.tagName === 'BUTTON' ? target : (target.parentElement as HTMLButtonElement);
+
+            if (button.dataset.date) {
+                date = +button.dataset.date;
+            }
+        }
+
+        setHighlightedDate(date);
+    }, []);
+
+    const handleClearFrom = useCallback(() => {
+        setInputFromValue('');
+    }, []);
+
+    const handleClearTo = useCallback(() => {
+        setInputToValue('');
+    }, []);
+
+    useEffect(() => {
+        setInputFromValue(period.selectedFrom ? formatDate(period.selectedFrom) : '');
+    }, [period.selectedFrom]);
+
+    useEffect(() => {
+        setInputToValue(period.selectedTo ? formatDate(period.selectedTo) : '');
+    }, [period.selectedTo]);
+
+    useEffect(() => {
+        setInputFromValue(valueFrom);
+    }, [valueFrom]);
+
+    useEffect(() => {
+        setInputToValue(valueTo);
+    }, [valueTo]);
+
+    useEffect(() => {
+        if (!inputFromValue || isCompleteDateInput(inputFromValue)) {
+            handleValidInputFrom();
+        }
+
+        period.setStart(dateFrom || undefined);
+        if (dateTo) {
+            period.setEnd(dateTo);
+        }
+
+        if (inputFromValue !== valueFrom) {
+            onDateFromChange({
+                value: inputFromValue,
+                date: dateFrom,
+            });
+
+            onChange({
+                valueFrom: inputFromValue,
+                valueTo: inputToValue,
+                dateFrom,
+                dateTo,
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [inputFromValue]);
+
+    useEffect(() => {
+        if (!inputToValue || isCompleteDateInput(inputToValue)) {
+            handleValidInputTo();
+        }
+
+        period.setEnd(dateTo || undefined);
+        if (dateFrom) {
+            period.setStart(dateFrom);
+        }
+
+        if (inputToValue !== valueTo) {
+            // eslint-disable-next-line no-nested-ternary
+            const inputDateTo = returnInvalidDates
+                ? isCompleteDateInput(inputToValue)
+                    ? parseDateString(inputToValue).getTime()
+                    : null
+                : dateTo;
+
+            onDateToChange({
+                value: inputToValue,
+                date: inputDateTo,
+            });
+
+            onChange({
+                valueFrom: inputFromValue,
+                valueTo: inputToValue,
+                dateFrom,
+                dateTo: inputDateTo,
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [inputToValue]);
+
+    useEffect(() => {
+        if (onError) {
+            onError(hasValidateError);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [hasValidateError]);
+
+    const rangeProps = useSelectionProps(period.selectedFrom, period.selectedTo, highlightedDate);
+
+    const CalendarFromComponent = dateInputFromProps.Calendar || CalendarDesktop;
+    const CalendarToComponent = dateInputToProps.Calendar || CalendarDesktop;
+
+    const minMaxInSameMonth = minDate && maxDate && isSameMonth(minDate, maxDate);
+
+    return (
+        // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+        <div
+            className={cn(styles.component, styles.static, className)}
+            onMouseOver={handleMouseOver}
+            data-test-id={dataTestId}
+        >
+            <div>
+                <DateInput
+                    {...dateInputFromProps}
+                    mobileMode={
+                        dateInputFromProps.mobileMode === 'popover'
+                            ? 'input'
+                            : dateInputFromProps.mobileMode
+                    }
+                    value={inputFromValue}
+                    onChange={handleInputFromChange}
+                    onClear={handleClearFrom}
+                    onBlur={handleValidInputFrom}
+                    error={bothInvalid || inputFromInvalid || dateInputFromProps.error}
+                    clear={true}
+                    block={true}
+                />
+                <CalendarFromComponent
+                    {...calendarFromProps}
+                    className={cn(styles.calendar, calendarFromProps?.className)}
+                    month={monthFrom}
+                    selectorView='month-only'
+                    offDays={offDays}
+                    events={events}
+                    onChange={period.updatePeriod}
+                    onMonthChange={handleMonthFromChange}
+                    minDate={minDate}
+                    maxDate={
+                        minMaxInSameMonth
+                            ? maxDate
+                            : maxDate && max([maxDate, endOfMonth(subMonths(maxDate, 1))]).getTime()
+                    }
+                    {...rangeProps}
+                />
+            </div>
+
+            <Divider inputFromProps={inputFromProps} inputToProps={inputToProps} />
+
+            <div>
+                <DateInput
+                    {...dateInputToProps}
+                    mobileMode={
+                        dateInputToProps.mobileMode === 'popover'
+                            ? 'input'
+                            : dateInputToProps.mobileMode
+                    }
+                    value={inputToValue}
+                    onChange={handleInputToChange}
+                    onClear={handleClearTo}
+                    onBlur={handleValidInputTo}
+                    error={bothInvalid || inputToInvalid}
+                    clear={true}
+                    block={true}
+                />
+                <CalendarToComponent
+                    {...calendarToProps}
+                    className={cn(styles.calendar, calendarToProps?.className)}
+                    month={monthTo}
+                    selectorView='month-only'
+                    offDays={offDays}
+                    events={events}
+                    onChange={period.updatePeriod}
+                    onMonthChange={handleMonthToChange}
+                    minDate={
+                        minMaxInSameMonth
+                            ? minDate
+                            : minDate && startOfMonth(addMonths(minDate, 1)).getTime()
+                    }
+                    maxDate={maxDate}
+                    {...rangeProps}
+                />
+            </div>
+        </div>
+    );
+};

package/typings-5684a67d.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+type SpecialDays = Record<number, boolean>;
+type DayAddons = {
+    date: Date | number;
+    addon: ReactNode;
+};
+type SpecialDaysAddon = Record<number, ReactNode>;
+type Day = {
+    date: Date;
+    disabled?: boolean;
+    event?: boolean;
+    selected?: boolean;
+    holiday?: boolean;
+    dayAddon?: ReactNode;
+};
+type Month = {
+    date: Date;
+    disabled?: boolean;
+};
+type DateShift = 'prev' | 'prevWeek' | 'prevMonth' | 'startOfWeek' | 'next' | 'nextWeek' | 'nextMonth' | 'endOfWeek';
+type View = 'years' | 'months' | 'days';
+type SelectorView = 'month-only' | 'full';
+export { SpecialDays, DayAddons, SpecialDaysAddon, Day, Month, DateShift, View, SelectorView };

package/typings-9211a437.d.ts

@@ -0,0 +1,95 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, ReactNode } from 'react';
+type StyleColors = {
+    default: {
+        [key: string]: string;
+    };
+    inverted: {
+        [key: string]: string;
+    };
+};
+type ComponentProps = {
+    /**
+     * Тип кнопки
+     * @default secondary
+     */
+    view?: 'accent' | 'primary' | 'secondary' | 'tertiary' | 'outlined' | 'filled' | 'transparent' | 'link' | 'ghost';
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Размер компонента
+     * @default m
+     */
+    size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
+    /**
+     * Растягивает компонент на ширину контейнера
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для спиннера
+     */
+    spinnerClassName?: string;
+    /**
+     * Выводит ссылку в виде кнопки
+     */
+    href?: string;
+    /**
+     * Позволяет использовать кастомный компонент для кнопки (например Link из роутера)
+     */
+    Component?: ElementType;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Показать лоадер
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Не переносить текст кнопки на новую строку
+     * @default false
+     */
+    nowrap?: boolean;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: 'default' | 'inverted';
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+    /**
+     * Основные стили компонента.
+     */
+    styles: {
+        [key: string]: string;
+    };
+    /**
+     * Стили компонента для default и inverted режима.
+     */
+    colorStylesMap: StyleColors;
+};
+type AnchorBaseButtonProps = ComponentProps & AnchorHTMLAttributes<HTMLAnchorElement>;
+type NativeBaseButtonProps = ComponentProps & ButtonHTMLAttributes<HTMLButtonElement>;
+type BaseButtonProps = Partial<AnchorBaseButtonProps | NativeBaseButtonProps>;
+type AnchorButtonProps = Omit<BaseButtonProps, 'styles' | 'colorStylesMap'> & AnchorHTMLAttributes<HTMLAnchorElement>;
+type NativeButtonProps = Omit<BaseButtonProps, 'styles' | 'colorStylesMap'> & ButtonHTMLAttributes<HTMLButtonElement>;
+type ButtonProps = Partial<AnchorButtonProps | NativeButtonProps> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+export { StyleColors, ComponentProps, AnchorBaseButtonProps, NativeBaseButtonProps, BaseButtonProps, AnchorButtonProps, NativeButtonProps, ButtonProps };

package/useCalendar-71d94e2b.d.ts

@@ -0,0 +1,97 @@
+/// <reference types="react" />
+import { KeyboardEvent, MouseEvent, Ref } from 'react';
+import { Day, DayAddons, Month, View } from "./typings-5684a67d";
+type UseCalendarProps = {
+    /**
+     * Активный вид (выбор дней, месяцев, лет)
+     */
+    view?: View;
+    /**
+     * Выбранный месяц (controlled)
+     */
+    month?: Date;
+    /**
+     * Начальный месяц
+     */
+    defaultMonth: Date;
+    /**
+     * Минимальная дата, доступная для выбора
+     */
+    minDate?: Date;
+    /**
+     * Максимальная дата, доступная для выбора
+     */
+    maxDate?: Date;
+    /**
+     * Выбранная дата
+     */
+    selected?: Date;
+    /**
+     * Список событий
+     */
+    events?: Array<Date | number>;
+    /**
+     * Список отключенных для выбора дней
+     */
+    offDays?: Array<Date | number>;
+    /**
+     * Список выходных дней
+     */
+    holidays?: Array<Date | number>;
+    /**
+     * Обработчик изменения месяца (или года)
+     */
+    onMonthChange?: (month: number) => void;
+    /**
+     * Обработчик выбора даты
+     */
+    onChange?: (date: number) => void;
+    /**
+     * Дополнительный контент под числом
+     */
+    dayAddons?: DayAddons[];
+};
+declare function useCalendar({ defaultMonth, month, minDate, view, maxDate, selected, events, offDays, holidays, dayAddons, onMonthChange, onChange, }: UseCalendarProps): {
+    activeMonth: Date;
+    weeks: Day[][];
+    months: Month[];
+    years: Date[];
+    canSetPrevMonth: boolean;
+    canSetNextMonth: boolean;
+    highlighted: number | Date | undefined;
+    setPrevMonth: () => void;
+    setNextMonth: () => void;
+    setMonthByDate: (newMonth: Date) => void;
+    getDayProps: (day: Day) => {
+        'data-date': number;
+        'aria-selected': boolean | undefined;
+        ref: (node: HTMLTableDataCellElement) => void;
+        tabIndex: number;
+        onMouseEnter: (event: MouseEvent<HTMLTableDataCellElement>) => void;
+        onMouseLeave: () => void;
+        onClick: (event: MouseEvent<HTMLTableDataCellElement>) => void;
+    };
+    getMonthProps: (currMonth: Month) => {
+        'data-date': number;
+        'aria-selected': boolean;
+        ref: (node: HTMLButtonElement) => void;
+        tabIndex: number;
+        disabled: boolean | undefined;
+        onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+    };
+    getYearProps: (year: Date) => {
+        'data-date': number;
+        'aria-selected': boolean;
+        ref: (node: HTMLButtonElement) => void;
+        tabIndex: number;
+        onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+    };
+    getRootProps: ({ ref }: {
+        ref?: Ref<HTMLDivElement> | undefined;
+    }) => {
+        onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
+        ref: (instance: HTMLDivElement | null) => void;
+        tabIndex: number;
+    };
+};
+export { UseCalendarProps, useCalendar };

package/utils-8c6198cc.d.ts

@@ -0,0 +1,88 @@
+import { ReactNode } from 'react';
+import { DateShift, Day, DayAddons, Month, SpecialDays, SpecialDaysAddon } from "./typings-5684a67d";
+declare const DAYS_IN_WEEK = 7;
+declare const MONTHS_IN_YEAR = 12;
+declare const SUNDAY_INDEX = 6;
+declare const DATE_FORMAT = "dd.MM.yyyy";
+declare const NATIVE_DATE_FORMAT = "yyyy-MM-dd";
+declare const WEEKDAYS: string[];
+declare const MONTHS: string[];
+/**
+ * Возвращает «правильный» индекс дня недели, 0 - пн, 1 - вт и так далее.
+ */
+declare function russianWeekDay(date: Date): number;
+/**
+ * Возвращает таблицу-календарь с заполненными датами для переданного месяца
+ */
+declare function generateWeeks(month: Date, options: {
+    minDate?: Date;
+    maxDate?: Date;
+    selected?: Date;
+    eventsMap?: SpecialDays;
+    offDaysMap?: SpecialDays;
+    holidaysMap?: SpecialDays;
+    dayAddonsMap?: SpecialDaysAddon;
+}): Day[][];
+/**
+ * Возвращает массив с месяцами для переданного года
+ */
+declare function generateMonths(year: Date, options: {
+    minMonth?: Date;
+    maxMonth?: Date;
+}): Month[];
+/**
+ * Возвращает массив лет от minYear до maxYear
+ */
+declare function generateYears(minYear: Date, maxYear: Date): Date[];
+/**
+ * Добавляет метаданные для переданного дня
+ */
+declare function buildDay(day: Date, options: {
+    minDate?: Date;
+    maxDate?: Date;
+    selected?: Date;
+    eventsMap?: SpecialDays;
+    offDaysMap?: SpecialDays;
+    holidaysMap?: SpecialDays;
+    dayAddonsMap?: SpecialDaysAddon;
+}): Day;
+/**
+ * Добавляет метаданные для переданного месяца
+ */
+declare function buildMonth(month: Date, options: {
+    minMonth?: Date;
+    maxMonth?: Date;
+}): Month;
+/**
+ * Ограничивает дату на отрезке [minDate, maxDate]
+ */
+declare function limitDate(date: Date | number, minDate?: Date | number, maxDate?: Date | number): Date;
+/**
+ * Проверяет, находится ли переданная дата в указанных границах
+ */
+declare function dateInLimits(date?: Date | number | null, minDate?: Date | number, maxDate?: Date | number): boolean | 0 | null | undefined;
+/**
+ * Возвращает русское название месяца с большой буквы
+ */
+declare function monthName(month: Date): string;
+/**
+ * Превращает массив в объект, у которого ключи составляются из элементов массива
+ */
+declare function dateArrayToHashTable(arr: Array<Date | number>): Record<number, boolean>;
+declare function addonArrayToHashTable(arr: DayAddons[]): Record<number, ReactNode>;
+/**
+ * Возвращает корректный отрезок дат для выделения
+ */
+declare function getSelectionRange(from?: Date | number, to?: Date | number, highlighted?: Date | number): {
+    start: Date;
+    end: Date;
+} | null;
+declare function modifyDateByShift(shift: DateShift, date: Date, minDate?: Date, maxDate?: Date, offDaysMap?: Record<number, boolean>): Date;
+/**
+ * Если дата была выбрана мышкой — фокусную обводку не видно
+ * TODO: добавить в useFocus возможность переключать метод ввода программно
+ */
+declare function simulateTab(node: HTMLElement): void;
+declare const formatDate: (date: Date | number, dateFormat?: string) => string;
+declare const parseDateString: (value: string, dateFormat?: string) => Date;
+export { DAYS_IN_WEEK, MONTHS_IN_YEAR, SUNDAY_INDEX, DATE_FORMAT, NATIVE_DATE_FORMAT, WEEKDAYS, MONTHS, russianWeekDay, generateWeeks, generateMonths, generateYears, buildDay, buildMonth, limitDate, dateInLimits, monthName, dateArrayToHashTable, addonArrayToHashTable, getSelectionRange, modifyDateByShift, simulateTab, formatDate, parseDateString };

package/utils-e0a54580.d.ts

@@ -0,0 +1,8 @@
+import { PeriodType } from "./index-f034f741";
+declare const formatPeriod: (valueFrom: Date, valueTo: Date, periodType: PeriodType, showCurrentYear?: boolean) => string;
+declare const getYearSelectorValue: (valueFrom: Date | undefined, showCurrentYear: boolean) => number | "";
+declare const shiftValues: (valueFrom: Date, valueTo: Date, periodType: PeriodType, direction: 'prev' | 'next') => {
+    valueFrom: Date;
+    valueTo: Date;
+};
+export { formatPeriod, getYearSelectorValue, shiftValues };

package/views/index.css

@@ -1,4 +1,4 @@
-/* hash: hthb6 */
+/* hash: 1gokg */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -38,16 +38,16 @@
     /* disabled */
 
     /* marker */
-} .calendar-range__component_11yhf {
+} .calendar-range__component_hnnqf {
     display: flex
-} .calendar-range__component_11yhf button[aria-selected='true'] {
+} .calendar-range__component_hnnqf button[aria-selected='true'] {
         cursor: pointer;
-    } .calendar-range__component_11yhf *[class*='errorIcon_'] {
+    } .calendar-range__component_hnnqf *[class*='errorIcon_'] {
         display: none;
-    } .calendar-range__component_11yhf *[class*='calendarIcon_'] {
+    } .calendar-range__component_hnnqf *[class*='calendarIcon_'] {
         margin-right: 0;
-    } .calendar-range__static_11yhf .calendar-range__calendar_11yhf {
+    } .calendar-range__static_hnnqf .calendar-range__calendar_hnnqf {
         width: var(--calendar-inner-width)
-    } .calendar-range__static_11yhf .calendar-range__calendar_11yhf > div:first-child {
+    } .calendar-range__static_hnnqf .calendar-range__calendar_hnnqf > div:first-child {
             padding: var(--gap-m) 0 var(--gap-s);
         }