@moysklad/uikit 30.4.0 → 31.20.0

package/dist/components/DateRange/DropdownContent/DropdownContent_module.css

@@ -0,0 +1,34 @@
+.dropdownContainer-jyFL59 {
+  outline-offset: -1px;
+  border-radius: inherit;
+  flex-direction: column;
+  display: flex;
+}
+
+.mainContent-geLVXa {
+  display: flex;
+}
+
+.dropdownFooter-mwLKEe {
+  border-top: 1px solid var(--border-normal, #d1d6df);
+  border-bottom: 1px solid #0000;
+  justify-content: space-between;
+  align-items: center;
+  height: 42px;
+  padding: 0 16px;
+  display: flex;
+}
+
+.calendarWrapper-GxG8uE {
+  border-left: 1px solid var(--border-normal, #d1d6df);
+}
+
+.toggleWrapper-gS1WLz {
+  align-items: center;
+  display: flex;
+}
+
+.toggleTooltipOverlay-iWgQ7L {
+  max-width: 244px;
+}
+

package/dist/components/DateRange/DropdownContent/index.d.ts

@@ -0,0 +1,24 @@
+import { type Ref, type RefObject } from 'react';
+import type { VirtuosoHandle } from 'react-virtuoso';
+import type { PeriodVariantListRef } from '../PeriodVariantList';
+import type { DateRangeFeatureProps, DateRangeValue } from '../types';
+interface DropdownContentProps extends DateRangeFeatureProps {
+    value: DateRangeValue;
+    withTime: boolean;
+    hintZIndex?: number;
+    minDate: Date;
+    maxDate: Date;
+    requiredDate?: boolean;
+    virtuosoRef?: RefObject<VirtuosoHandle>;
+    variantsListRef?: Ref<PeriodVariantListRef>;
+    onChangeWithTime?: (withTime: boolean, options?: {
+        notChangeInputMask?: boolean;
+    }) => void;
+    onChange?: (value: DateRangeValue) => void;
+    onClearButtonClick?: () => void;
+    onPickDate?: (selectedDate: Date) => void;
+    scrollToMonthHandler?: (monthDate: Date) => void;
+    handleClose?: () => void;
+}
+export declare const DropdownContent: (props: DropdownContentProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DateRange/DropdownContent/index.js

@@ -0,0 +1,132 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { Button } from "../../Button/Button.js";
+import { Hint } from "../../Hint/Hint.js";
+import { Text, TextColor } from "../../Text/Text.js";
+import { Toggle } from "../../Toggle/Toggle.js";
+import { FilterUpdate20Icon } from "../../../icon/index.js";
+import { Calendar } from "../Calendar/index.js";
+import { CalendarVariant, DEFAULT_HINT_Z_INDEX, NON_CALENDAR_VARIANTS } from "../consts.js";
+import { useSideMenu } from "../hooks/useSideMenu.js";
+import { useLocale } from "../locale/index.js";
+import { SideMenu } from "../SideMenu/index.js";
+import { getPeriodValue, isDayValue, isValuePeriod } from "../utils.js";
+import DropdownContent_module from "./DropdownContent.module.js";
+const DropdownContent = (props)=>{
+    const locale = useLocale('DateRange');
+    const handleCloseRef = useRef(props.handleClose);
+    handleCloseRef.current = props.handleClose;
+    const isTimeToggleVisible = false !== props.withTimeSelection && !NON_CALENDAR_VARIANTS.includes(props.value.type);
+    const isTimeToggleDisabled = props.value.type !== CalendarVariant.period;
+    const handleChangeMode = (value)=>{
+        props.onChange?.(value);
+        props.onChangeWithTime?.(false, {
+            notChangeInputMask: true
+        });
+    };
+    const sideMenu = useSideMenu({
+        value: props.value,
+        requiredDate: props.requiredDate,
+        onChangeValue: handleChangeMode,
+        handleScrollToMoth: props.scrollToMonthHandler
+    });
+    const showCalendar = !NON_CALENDAR_VARIANTS.includes(props.value.type);
+    const isClearValueVisible = (()=>{
+        if (false === props.withClearButton) return false;
+        if (isValuePeriod(props.value.value)) {
+            const { startDate, endDate } = getPeriodValue(props.value.value);
+            return !!startDate && !!endDate;
+        }
+        if (isDayValue(props.value)) return !!props.value.value;
+        return true;
+    })();
+    const handleSelectDate = (date)=>{
+        props.onPickDate?.(date);
+    };
+    const handleChangeTimeSelection = (event)=>{
+        props.onChangeWithTime?.(event.target.checked);
+    };
+    useEffect(()=>{
+        const clolseOnEscHandler = (event)=>{
+            if ('Escape' === event.key) handleCloseRef.current?.();
+        };
+        window.addEventListener('keydown', clolseOnEscHandler);
+        return ()=>{
+            window.removeEventListener('keydown', clolseOnEscHandler);
+        };
+    }, []);
+    return /*#__PURE__*/ jsxs("div", {
+        className: DropdownContent_module.dropdownContainer,
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: DropdownContent_module.mainContent,
+                children: [
+                    /*#__PURE__*/ jsx(SideMenu, {
+                        value: props.value,
+                        variantsListRef: props.variantsListRef,
+                        withPeriod: props.withPeriod,
+                        withAnyDate: props.withAnyDate,
+                        withNoDate: props.withNoDate,
+                        quickFilter: props.quickFilter,
+                        onChangeVariant: sideMenu.changeVariantHandler,
+                        onClickYestardayButton: sideMenu.yesterdayButtonClickHandler,
+                        onClickTodayButton: sideMenu.todayButtonClickHandler,
+                        onClickTomorrowButton: sideMenu.tomorrowButtonClickHandler
+                    }),
+                    showCalendar && /*#__PURE__*/ jsx("div", {
+                        className: DropdownContent_module.calendarWrapper,
+                        children: /*#__PURE__*/ jsx(Calendar, {
+                            virtuosoRef: props.virtuosoRef,
+                            minDate: props.minDate,
+                            maxDate: props.maxDate,
+                            value: props.value,
+                            onSelectDate: handleSelectDate
+                        })
+                    })
+                ]
+            }),
+            (isTimeToggleVisible || isClearValueVisible) && /*#__PURE__*/ jsxs("div", {
+                className: DropdownContent_module.dropdownFooter,
+                children: [
+                    isTimeToggleVisible && /*#__PURE__*/ jsx(Hint, {
+                        overlay: /*#__PURE__*/ jsx(Text.Body, {
+                            colorToken: TextColor.invert,
+                            children: locale.translate.footer.timeSelectionToggleHint
+                        }),
+                        trigger: isTimeToggleDisabled ? 'hover' : [],
+                        overlayClassName: DropdownContent_module.toggleTooltipOverlay,
+                        zIndex: props.hintZIndex ?? DEFAULT_HINT_Z_INDEX,
+                        placement: "topLeft",
+                        offset: [
+                            -6,
+                            4
+                        ],
+                        children: /*#__PURE__*/ jsx("div", {
+                            className: DropdownContent_module.toggleWrapper,
+                            children: /*#__PURE__*/ jsx(Toggle, {
+                                checked: props.withTime,
+                                disabled: isTimeToggleDisabled,
+                                onChange: handleChangeTimeSelection,
+                                label: locale.translate.footer.timeSelectionToggle
+                            })
+                        })
+                    }),
+                    isClearValueVisible && /*#__PURE__*/ jsxs(Button, {
+                        size: "l",
+                        variant: "frameless",
+                        onClick: props.onClearButtonClick,
+                        children: [
+                            /*#__PURE__*/ jsx(FilterUpdate20Icon, {}),
+                            locale.translate.footer.clearFilterButton
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                tabIndex: 0,
+                onFocus: props.handleClose
+            })
+        ]
+    });
+};
+export { DropdownContent };

package/dist/components/DateRange/InputContent/InputContent.module.js

@@ -0,0 +1,9 @@
+import "./InputContent_module.css";
+const InputContent_module = {
+    container: "container-HBRmHC",
+    withButtons: "withButtons-MWFNlE",
+    buttonsContainer: "buttonsContainer-mrVtTU",
+    dayContainer: "dayContainer-GUtXzi",
+    periodValue: "periodValue-njplnG"
+};
+export default InputContent_module;

package/dist/components/DateRange/InputContent/InputContent_module.css

@@ -0,0 +1,31 @@
+.container-HBRmHC {
+  align-items: center;
+  gap: 4px;
+  display: flex;
+}
+
+.container-HBRmHC.withButtons-MWFNlE {
+  margin-left: -6px;
+}
+
+.buttonsContainer-mrVtTU {
+  align-items: center;
+  display: flex;
+}
+
+.dayContainer-GUtXzi {
+  flex: 1;
+  align-items: center;
+  gap: 4px;
+  width: 50%;
+  display: flex;
+  overflow: hidden;
+}
+
+.dayContainer-GUtXzi .periodValue-njplnG {
+  color: var(--text-secondary, #5f6d79);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+

package/dist/components/DateRange/InputContent/index.d.ts

@@ -0,0 +1,12 @@
+import type { KeyboardEvent } from 'react';
+import type { DateRangeValue } from '../types';
+interface InputContentProps {
+    value: DateRangeValue;
+    onClickPrev?: () => void;
+    onClickNext?: () => void;
+    tooltipZIndex?: number;
+    disabled?: boolean;
+    onPressTabNextButton?: (event: KeyboardEvent<HTMLButtonElement>) => void;
+}
+export declare const InputContent: (props: InputContentProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DateRange/InputContent/index.js

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../../common/css/index.js";
+import { Text, TextTag } from "../../Text/Text.js";
+import { useLocaleContext } from "../../../context/contexts/index.js";
+import { Left12Icon, Right12Icon } from "../../../icon/index.js";
+import { ArrowButton } from "../ArrowButton/index.js";
+import { NAVIGATION_VARIANTS } from "../consts.js";
+import { getDateRangePeriodName, getDateRangeSliderText } from "../formatDateRangeValue.js";
+import { LocaleKey, useLocale } from "../locale/index.js";
+import { TooltipedText } from "../TooltipedText/index.js";
+import InputContent_module from "./InputContent.module.js";
+const InputContent = (props)=>{
+    const showArrowButtons = NAVIGATION_VARIANTS.includes(props.value.type);
+    const { lang } = useLocaleContext();
+    const locale = useLocale('DateRange');
+    const formatLocale = useLocale('DateRange', LocaleKey.Locale);
+    const periodText = getDateRangeSliderText(props.value, {
+        translates: locale,
+        lang,
+        formatTranslates: formatLocale
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn(InputContent_module.container, showArrowButtons && InputContent_module.withButtons),
+        children: [
+            showArrowButtons && /*#__PURE__*/ jsxs("div", {
+                className: InputContent_module.buttonsContainer,
+                children: [
+                    /*#__PURE__*/ jsx(ArrowButton, {
+                        disabled: props.disabled,
+                        onClick: props.onClickPrev,
+                        children: /*#__PURE__*/ jsx(Left12Icon, {})
+                    }),
+                    /*#__PURE__*/ jsx(ArrowButton, {
+                        disabled: props.disabled,
+                        onClick: props.onClickNext,
+                        onPressTab: props.onPressTabNextButton,
+                        children: /*#__PURE__*/ jsx(Right12Icon, {})
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: InputContent_module.dayContainer,
+                children: [
+                    /*#__PURE__*/ jsx(Text.Body, {
+                        as: TextTag.span,
+                        children: getDateRangePeriodName(props.value, locale)
+                    }),
+                    /*#__PURE__*/ jsx(TooltipedText, {
+                        className: InputContent_module.periodValue,
+                        tooltipZIndex: props.tooltipZIndex,
+                        tooltipText: periodText?.tooltipText,
+                        children: periodText?.text ?? null
+                    })
+                ]
+            })
+        ]
+    });
+};
+export { InputContent };

package/dist/components/DateRange/Month/Month.module.js

@@ -0,0 +1,7 @@
+import "./Month_module.css";
+const Month_module = {
+    monthContainer: "monthContainer-_Ug8XG",
+    week: "week-Ifyx5R",
+    hovered: "hovered-yyNVTZ"
+};
+export default Month_module;

package/dist/components/DateRange/Month/Month_module.css

@@ -0,0 +1,17 @@
+.monthContainer-_Ug8XG {
+  flex-direction: column;
+  gap: 4px;
+  padding-left: 16px;
+  padding-right: 4px;
+  display: flex;
+}
+
+.monthContainer-_Ug8XG .week-Ifyx5R {
+  display: flex;
+}
+
+.monthContainer-_Ug8XG .week-Ifyx5R.hovered-yyNVTZ {
+  outline: 1px solid var(--elements-accent, #036ce5);
+  border-radius: 8px;
+}
+

package/dist/components/DateRange/Month/index.d.ts

@@ -0,0 +1,15 @@
+import type { DateRangeValue } from '../types';
+export interface MonthProps {
+    value: DateRangeValue;
+    year: number;
+    month: number;
+    hoverWeekFirstDay?: Date;
+    selectedInterval: {
+        startDateOfInterval: Date | undefined;
+        endDateOfInterval: Date | undefined;
+    } | null;
+    onChangeHoverDate?: (date: Date | undefined) => void;
+    onChangeHoverWeekFirstDay?: (date: Date | undefined) => void;
+    onSelectDate?: (date: Date) => void;
+}
+export declare const Month: import("react").MemoExoticComponent<(props: MonthProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/components/DateRange/Month/index.js

@@ -0,0 +1,158 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, useRef } from "react";
+import { endOfDay, endOfMonth, getWeek, getWeeksInMonth, isAfter, isBefore, isSameDay, isSameWeek, isWithinInterval, setDay, setWeek, startOfDay } from "date-fns";
+import { cn } from "../../../common/css/index.js";
+import { mapWeekDays, mapWeekRows } from "./utils.js";
+import { CalendarVariant } from "../consts.js";
+import { Day } from "../Day/index.js";
+import { getFirstDayOfMonth, getPeriodValue, isDayValue, isRangeValue, isWeekValue } from "../utils.js";
+import Month_module from "./Month.module.js";
+const Month = /*#__PURE__*/ memo((props)=>{
+    const startDate = getFirstDayOfMonth(props.year, props.month);
+    const endDate = startOfDay(endOfMonth(startDate));
+    const weeksCount = getWeeksInMonth(startDate, {
+        weekStartsOn: 1
+    });
+    const week = getWeek(startDate, {
+        weekStartsOn: 1
+    });
+    const onSelectDateRef = useRef(props.onSelectDate);
+    onSelectDateRef.current = props.onSelectDate;
+    const getCellDate = (weekIndex, cellIndex)=>{
+        const startDay = new Date(startDate);
+        const dayWithWeek = setWeek(startDay, week + weekIndex, {
+            weekStartsOn: 1
+        });
+        const correctlyIndex = 7 === cellIndex ? 0 : cellIndex;
+        return setDay(dayWithWeek, correctlyIndex, {
+            weekStartsOn: 1
+        });
+    };
+    const getCellDateStatus = (date)=>{
+        if (isBefore(date, startDate)) return {
+            valid: false,
+            startOfMonth: true
+        };
+        if (isAfter(date, endDate)) return {
+            valid: false,
+            endOfMonth: true
+        };
+        return {
+            valid: true
+        };
+    };
+    const isEmptySelected = (cellStatus)=>{
+        if (cellStatus.valid || !props.selectedInterval?.startDateOfInterval || !props.selectedInterval.endDateOfInterval) return false;
+        const { startDateOfInterval, endDateOfInterval } = props.selectedInterval;
+        if (cellStatus.startOfMonth) return isWithinInterval(startDate, {
+            start: startOfDay(startDateOfInterval),
+            end: endOfDay(endDateOfInterval)
+        }) && !isSameDay(startDate, startDateOfInterval);
+        return isWithinInterval(endDate, {
+            start: startOfDay(startDateOfInterval),
+            end: endOfDay(endDateOfInterval)
+        }) && !isSameDay(endDate, endDateOfInterval);
+    };
+    const isSelected = (date)=>{
+        if (!props.selectedInterval?.startDateOfInterval || !props.selectedInterval.endDateOfInterval) return false;
+        const { startDateOfInterval, endDateOfInterval } = props.selectedInterval;
+        return isWithinInterval(date, {
+            start: startOfDay(startDateOfInterval),
+            end: endOfDay(endDateOfInterval)
+        });
+    };
+    const getRangeTreshholdStatus = (date)=>{
+        if (!props.selectedInterval) return {
+            left: false,
+            right: false
+        };
+        const { startDateOfInterval, endDateOfInterval } = props.selectedInterval;
+        return {
+            left: !!startDateOfInterval && isSameDay(date, startDateOfInterval),
+            right: !!endDateOfInterval && isSameDay(date, endDateOfInterval)
+        };
+    };
+    const getDayTreshholdStatus = (date)=>{
+        const options = props.value;
+        if (!options.value) return {
+            left: false,
+            right: false
+        };
+        const isSelected = isSameDay(date, options.value);
+        return {
+            left: isSelected,
+            right: isSelected
+        };
+    };
+    const getTreshholdStatus = (date)=>{
+        if (isRangeValue(props.value) || isWeekValue(props.value)) return getRangeTreshholdStatus(date);
+        if (isDayValue(props.value)) return getDayTreshholdStatus(date);
+        return {
+            left: false,
+            right: false
+        };
+    };
+    const handleUnhoverDay = ()=>{
+        props.onChangeHoverDate?.(void 0);
+        props.onChangeHoverWeekFirstDay?.(void 0);
+    };
+    const isWeekSelectionMode = props.value.type === CalendarVariant.week;
+    const hoverDayStylesEnabled = !isWeekSelectionMode;
+    const isWeekHovered = (weekFirstDate)=>{
+        if (!isWeekSelectionMode) return false;
+        return props.hoverWeekFirstDay && isSameWeek(weekFirstDate, props.hoverWeekFirstDay);
+    };
+    const isNeedHoverListener = ()=>{
+        if (!isRangeValue(props.value)) return false;
+        const { startDate, endDate } = getPeriodValue(props.value.value);
+        return startDate && !endDate || !startDate && endDate;
+    };
+    const needHoverListener = isNeedHoverListener();
+    const needHoverListenerRef = useRef(needHoverListener);
+    needHoverListenerRef.current = needHoverListener;
+    const renderDayCell = (weekIndex, cellIndex)=>{
+        const cellDate = getCellDate(weekIndex, cellIndex + 1);
+        const cellDateStatus = getCellDateStatus(cellDate);
+        const date = cellDateStatus.valid ? cellDate : null;
+        const emptySelected = isEmptySelected(cellDateStatus);
+        const selected = date ? isSelected(date) : false;
+        const treshholdStatus = date && getTreshholdStatus(date);
+        return /*#__PURE__*/ jsx(Day, {
+            dayIndex: cellIndex,
+            date: date,
+            selected: selected || emptySelected,
+            leftTreshhold: treshholdStatus?.left,
+            rightTreshhold: treshholdStatus?.right,
+            noHoverStyle: !hoverDayStylesEnabled,
+            onClick: ()=>{
+                if (!isWeekSelectionMode && date) onSelectDateRef.current?.(date);
+            },
+            onHover: ()=>{
+                if (date && needHoverListenerRef.current) props.onChangeHoverDate?.(date);
+            }
+        }, cellIndex);
+    };
+    const renderWeekRow = (weekIndex)=>{
+        const firstWeekDate = getCellDate(weekIndex, 1);
+        const isHovered = isWeekHovered(firstWeekDate);
+        const handleWeekNouseEnter = ()=>{
+            props.onChangeHoverWeekFirstDay?.(firstWeekDate);
+        };
+        const handleWeekClick = ()=>{
+            props.onSelectDate?.(firstWeekDate);
+        };
+        return /*#__PURE__*/ jsx("div", {
+            className: cn(Month_module.week, isHovered && Month_module.hovered),
+            onMouseEnter: isWeekSelectionMode ? handleWeekNouseEnter : void 0,
+            onClick: isWeekSelectionMode && isHovered ? handleWeekClick : void 0,
+            children: mapWeekDays((cellIndex)=>renderDayCell(weekIndex, cellIndex))
+        }, weekIndex);
+    };
+    return /*#__PURE__*/ jsx("div", {
+        className: Month_module.monthContainer,
+        onMouseLeave: handleUnhoverDay,
+        children: mapWeekRows(weeksCount, renderWeekRow)
+    });
+});
+Month.displayName = 'DateRangeMonth';
+export { Month };

package/dist/components/DateRange/Month/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const mapWeekRows: <T>(weeksCount: number, renderWeek: (weekIndex: number) => T) => T[];
+export declare const mapWeekDays: <T>(renderDay: (dayIndex: number) => T) => T[];

package/dist/components/DateRange/Month/utils.js

@@ -0,0 +1,8 @@
+const DAYS_IN_WEEK = 7;
+const mapWeekRows = (weeksCount, renderWeek)=>Array.from({
+        length: weeksCount
+    }, (_, weekIndex)=>renderWeek(weekIndex));
+const mapWeekDays = (renderDay)=>Array.from({
+        length: DAYS_IN_WEEK
+    }, (_, dayIndex)=>renderDay(dayIndex));
+export { mapWeekDays, mapWeekRows };

package/dist/components/DateRange/MonthHeader/MonthHeader.module.js

@@ -0,0 +1,5 @@
+import "./MonthHeader_module.css";
+const MonthHeader_module = {
+    container: "container-w93lmx"
+};
+export default MonthHeader_module;

package/dist/components/DateRange/MonthHeader/MonthHeader_module.css

@@ -0,0 +1,10 @@
+.container-w93lmx {
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  height: 32px;
+  padding-left: 16px;
+  padding-right: 4px;
+  display: flex;
+}
+

package/dist/components/DateRange/MonthHeader/index.d.ts

@@ -0,0 +1,5 @@
+interface MonthHeaderProps {
+    date: Date;
+}
+export declare const MonthHeader: (props: MonthHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DateRange/MonthHeader/index.js

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { format } from "date-fns";
+import { Text, TextTag } from "../../Text/Text.js";
+import { useLocaleContext } from "../../../context/contexts/index.js";
+import { capitalizeFirstLetter, getFormatOptions } from "../utils.js";
+import MonthHeader_module from "./MonthHeader.module.js";
+const MonthHeader = (props)=>{
+    const { lang } = useLocaleContext();
+    const month = format(props.date, 'LLLL', getFormatOptions(lang));
+    const capitalizedMonth = capitalizeFirstLetter(month);
+    const year = format(props.date, 'yyyy');
+    return /*#__PURE__*/ jsxs("div", {
+        className: MonthHeader_module.container,
+        children: [
+            /*#__PURE__*/ jsx(Text.Body, {
+                as: TextTag.span,
+                children: capitalizedMonth
+            }),
+            /*#__PURE__*/ jsx(Text.Body, {
+                as: TextTag.span,
+                children: year
+            })
+        ]
+    });
+};
+export { MonthHeader };

package/dist/components/DateRange/MonthList/MonthList.module.js

@@ -0,0 +1,7 @@
+import "./MonthList_module.css";
+const MonthList_module = {
+    scrollContainer: "scrollContainer-wTlgeS",
+    month: "month-PnLRnS",
+    first: "first-SZmA6H"
+};
+export default MonthList_module;

package/dist/components/DateRange/MonthList/MonthList_module.css

@@ -0,0 +1,25 @@
+.scrollContainer-wTlgeS {
+  width: 252px;
+  margin-right: 4px;
+}
+
+.scrollContainer-wTlgeS::-webkit-scrollbar {
+  width: 8px;
+}
+
+.scrollContainer-wTlgeS::-webkit-scrollbar-thumb {
+  background-color: var(--border-normal, #d1d6df);
+  border-radius: 8px;
+}
+
+.month-PnLRnS {
+  flex-direction: column;
+  gap: 4px;
+  padding-bottom: 8px;
+  display: flex;
+}
+
+.month-PnLRnS.first-SZmA6H {
+  padding-top: 8px;
+}
+

package/dist/components/DateRange/MonthList/index.d.ts

@@ -0,0 +1,11 @@
+import { type RefObject } from 'react';
+import { type VirtuosoHandle } from 'react-virtuoso';
+import { type MonthProps } from '../Month';
+type PickedMonthProps = Pick<MonthProps, 'onSelectDate' | 'value'>;
+interface MonthListProps extends PickedMonthProps {
+    minDate: Date;
+    maxDate: Date;
+    virtuosoRef?: RefObject<VirtuosoHandle>;
+}
+export declare const MonthList: (props: MonthListProps) => import("react/jsx-runtime").JSX.Element;
+export {};