@moysklad/uikit 28.1.0 → 31.20.0

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

@@ -0,0 +1,6 @@
+import type { DateRangeProps } from './props';
+export type { DateRangeProps, DateRangeRenderInputOptions } from './props';
+export declare const DateRange: import("react").ForwardRefExoticComponent<DateRangeProps & import("react").RefAttributes<HTMLDivElement>>;
+export type { DateRangeAnyDateValue, DateRangeDayValue, DateRangeFeatureProps, DateRangeLocale, DateRangeMonthValue, DateRangeNoDateValue, DateRangeRangeValue, DateRangeValue, DateRangeWeekValue, DateSelectVariant, DatesPeriod, DayQuickFilter, } from './types';
+export { DEFAULT_QUICK_FILTER } from './types';
+export { getPeriodValue, getRangeDates, getRequiredDateRangeValue, isAnyDateValue, isDayValue, isMonthValue, isNoDateValue, isRangeValue, isValueNullable, isValuePeriod, isWeekValue, } from './utils';

package/dist/components/DateRange/DateRange.js

@@ -0,0 +1,51 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Dropdown } from "../Dropdown/Dropdown.js";
+import { DateRangeInput } from "./DateRangeInput/DateRangeInput.js";
+import { useDateRange } from "./hooks/useDateRange.js";
+import { DropdownContent } from "./DropdownContent/index.js";
+const DateRange = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const dateRange = useDateRange(props, ref);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            dateRange.renderInput ? dateRange.renderInput(dateRange.renderInputOptions) : /*#__PURE__*/ jsx(DateRangeInput, {
+                ...dateRange
+            }),
+            /*#__PURE__*/ jsx(Dropdown, {
+                ...dateRange.datepickerDropdown.dropdownAriaProps,
+                open: dateRange.datepickerDropdown.open,
+                triggerRef: dateRange.datepickerDropdown.triggerRef,
+                ref: dateRange.datepickerDropdown.dropdownRef,
+                onClose: dateRange.handleCloseDropdown,
+                isInnerScroll: true,
+                zIndex: props.dropdownZIndex,
+                children: /*#__PURE__*/ jsx(DropdownContent, {
+                    value: dateRange.value,
+                    withTime: dateRange.withTime,
+                    minDate: dateRange.calendar.minDate,
+                    maxDate: dateRange.calendar.maxDate,
+                    hintZIndex: dateRange.hintZIndex,
+                    withPeriod: dateRange.withPeriod,
+                    withAnyDate: dateRange.withAnyDate,
+                    withNoDate: dateRange.withNoDate,
+                    withTimeSelection: dateRange.withTimeSelection,
+                    withClearButton: dateRange.withClearButton,
+                    quickFilter: dateRange.quickFilter,
+                    requiredDate: dateRange.requiredDate,
+                    onChangeWithTime: dateRange.handleChangeWithTime,
+                    onChange: dateRange.onChange,
+                    onClearButtonClick: dateRange.handleClickOnClearButton,
+                    virtuosoRef: dateRange.monthList.virtuosoRef,
+                    variantsListRef: dateRange.variantsListRef,
+                    onPickDate: dateRange.calendar.handlePickDate,
+                    scrollToMonthHandler: dateRange.monthList.scrollToMonth,
+                    handleClose: dateRange.handleCloseDropdown
+                })
+            })
+        ]
+    });
+});
+DateRange.displayName = 'DateRange';
+export { DEFAULT_QUICK_FILTER } from "./types.js";
+export { getPeriodValue, getRangeDates, getRequiredDateRangeValue, isAnyDateValue, isDayValue, isMonthValue, isNoDateValue, isRangeValue, isValueNullable, isValuePeriod, isWeekValue } from "./utils.js";
+export { DateRange };

package/dist/components/DateRange/DateRangeDefaultTrigger/DateRangeDefaultTrigger.d.ts

@@ -0,0 +1,44 @@
+import { type ChangeEventHandler, type FocusEvent, type HTMLAttributes, type InputHTMLAttributes, type JSX, type KeyboardEvent, type MutableRefObject, type ReactNode } from 'react';
+import type { IHasTabIndex, IHasTestId } from '../../../common/types';
+export declare const DEFAULT_FOCUSED_WIDTH = 256;
+type RenderInputParams = {
+    inputId: string;
+    className: string;
+    value: DateRangeDefaultTriggerProps['value'];
+    onChange: DateRangeDefaultTriggerProps['onChange'];
+    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+    onKeyUp?: (event: KeyboardEvent<HTMLInputElement>) => void;
+    ref: (element: HTMLInputElement) => void;
+};
+export type DateRangeDefaultTriggerProps = Omit<InputHTMLAttributes<HTMLDivElement>, 'onClick' | 'placeholder' | 'onChange'> & Pick<HTMLAttributes<HTMLDivElement>, 'onClick'> & IHasTestId & IHasTabIndex & {
+    label: string;
+    name?: string;
+    error?: boolean;
+    disabled?: boolean;
+    focusedWidth?: number;
+    actions?: ReactNode;
+    inputRef?: MutableRefObject<HTMLInputElement | null> | ((element: HTMLInputElement) => void);
+    inputContent?: ReactNode;
+    focusedState?: boolean;
+    hintZIndex?: number;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    renderCustomInput?: (params: RenderInputParams) => JSX.Element;
+    staticActions?: ReactNode;
+};
+export declare const DateRangeDefaultTrigger: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLDivElement>, "onChange" | "onClick" | "placeholder"> & Pick<HTMLAttributes<HTMLDivElement>, "onClick"> & IHasTestId & IHasTabIndex & {
+    label: string;
+    name?: string;
+    error?: boolean;
+    disabled?: boolean;
+    focusedWidth?: number;
+    actions?: ReactNode;
+    inputRef?: MutableRefObject<HTMLInputElement | null> | ((element: HTMLInputElement) => void);
+    inputContent?: ReactNode;
+    focusedState?: boolean;
+    hintZIndex?: number;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    renderCustomInput?: (params: RenderInputParams) => JSX.Element;
+    staticActions?: ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/DateRange/DateRangeDefaultTrigger/DateRangeDefaultTrigger.js

@@ -0,0 +1,128 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef } from "react";
+import { cn } from "../../../common/css/cn.js";
+import { Text, TextTag } from "../../Text/Text.js";
+import { useId } from "../../../hooks/useId/index.js";
+import DateRangeDefaultTrigger_module from "./DateRangeDefaultTrigger.module.js";
+const DEFAULT_FOCUSED_WIDTH = 256;
+const DateRangeDefaultTrigger = /*#__PURE__*/ forwardRef(({ id, className, value, label, name, testId, error, disabled, actions, focusedWidth, style, tabIndex, inputRef: inputRefProp, inputContent, focusedState, onClick, renderCustomInput, staticActions, ...props }, ref)=>{
+    const containerRef = useRef(null);
+    const inputRef = useRef(null);
+    const inputId = useId(id);
+    const isEmpty = !value;
+    const wrapperStyle = {
+        '--input-width': `${focusedWidth ?? DEFAULT_FOCUSED_WIDTH}px`,
+        ...style ?? {}
+    };
+    const assignWrapperRef = (element)=>{
+        containerRef.current = element;
+        if (!ref) return;
+        if ('function' == typeof ref) return void ref(element);
+        ref.current = element;
+    };
+    const assignInputRef = (element)=>{
+        inputRef.current = element;
+        if (!inputRefProp) return;
+        if ('function' == typeof inputRefProp) return void inputRefProp(element);
+        inputRefProp.current = element;
+    };
+    const renderInput = (params)=>{
+        if (renderCustomInput) return renderCustomInput(params);
+        return /*#__PURE__*/ jsx("input", {
+            tabIndex: tabIndex,
+            id: params.inputId,
+            name: name,
+            ref: assignInputRef,
+            "data-test-id": testId ? `${testId}-input` : void 0,
+            type: "text",
+            value: value,
+            className: params.className,
+            disabled: disabled || !!inputContent,
+            onClick: (event)=>{
+                event.stopPropagation();
+                onClick?.(event);
+            },
+            onFocus: params.onFocus,
+            onBlur: params.onBlur,
+            onKeyUp: params.onKeyUp,
+            onChange: params.onChange
+        });
+    };
+    const handleWrapperClick = (event)=>{
+        if (disabled) return;
+        onClick?.(event);
+        inputRef.current?.focus();
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        ...props,
+        tabIndex: inputContent && !disabled ? 0 : void 0,
+        "data-test-id": testId,
+        className: cn(DateRangeDefaultTrigger_module.wrapper, className, isEmpty && DateRangeDefaultTrigger_module.empty, error && DateRangeDefaultTrigger_module.error, disabled && DateRangeDefaultTrigger_module.disabled, actions && DateRangeDefaultTrigger_module.withActions, focusedState && DateRangeDefaultTrigger_module.focused),
+        onClick: handleWrapperClick,
+        style: wrapperStyle,
+        ref: assignWrapperRef,
+        "data-error": error,
+        "data-disabled": disabled,
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: DateRangeDefaultTrigger_module.sizerOuter,
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: DateRangeDefaultTrigger_module.sizerInner,
+                        children: [
+                            !!inputContent && /*#__PURE__*/ jsx("div", {
+                                className: DateRangeDefaultTrigger_module.inputContentContainer,
+                                children: inputContent
+                            }),
+                            renderInput({
+                                className: cn(DateRangeDefaultTrigger_module.input, !!inputContent && DateRangeDefaultTrigger_module.noPointerEvents),
+                                inputId,
+                                onBlur: props.onBlur,
+                                onFocus: props.onFocus,
+                                onKeyUp: props.onKeyUp,
+                                ref: assignInputRef,
+                                value,
+                                onChange: props.onChange
+                            }),
+                            actions && /*#__PURE__*/ jsx("div", {
+                                className: DateRangeDefaultTrigger_module.actionsContainer,
+                                children: actions
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(Text.Body, {
+                        className: DateRangeDefaultTrigger_module.sizerText,
+                        as: TextTag.span,
+                        children: label
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: DateRangeDefaultTrigger_module.sizerText,
+                        children: [
+                            /*#__PURE__*/ jsx(Text.Body, {
+                                as: TextTag.span,
+                                children: value
+                            }),
+                            actions
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(Text.Body, {
+                        testId: testId ? `${testId}-label` : void 0,
+                        className: DateRangeDefaultTrigger_module.label,
+                        as: "label",
+                        htmlFor: inputId,
+                        children: label
+                    })
+                ]
+            }),
+            staticActions && /*#__PURE__*/ jsx("div", {
+                className: DateRangeDefaultTrigger_module.actionsContainer,
+                onMouseDown: (event)=>{
+                    event.preventDefault();
+                },
+                children: staticActions
+            })
+        ]
+    });
+});
+DateRangeDefaultTrigger.displayName = 'DateRangeDefaultTrigger';
+export { DEFAULT_FOCUSED_WIDTH, DateRangeDefaultTrigger };

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

@@ -0,0 +1,19 @@
+import "./DateRangeDefaultTrigger_module.css";
+const DateRangeDefaultTrigger_module = {
+    wrapper: "wrapper-uTvv8S",
+    input: "input-RZEJYu",
+    noPointerEvents: "noPointerEvents-zhzWq6",
+    inputContentContainer: "inputContentContainer-gvBnmZ",
+    label: "label-Abet7f",
+    disabled: "disabled-pFIwM6",
+    error: "error-MRitKF",
+    focused: "focused-WLcs7A",
+    empty: "empty-Nh6EKc",
+    actionsContainer: "actionsContainer-v2jQ9o",
+    sizerOuter: "sizerOuter-UiUY6R",
+    sizerInner: "sizerInner-YVmkb_",
+    sizerText: "sizerText-WJ5sCs",
+    hintOverlay: "hintOverlay-yyKcHw",
+    hintText: "hintText-P2rm8R"
+};
+export default DateRangeDefaultTrigger_module;

package/dist/components/DateRange/DateRangeDefaultTrigger/DateRangeDefaultTrigger_module.css

@@ -0,0 +1,170 @@
+.wrapper-uTvv8S {
+  --outline-input-wrapper-padding: 12px;
+  --input-filter-border: var(--border-normal, #d1d6df);
+  --input-filter-label: var(--text-secondary, #5f6d79);
+  --input-filter-text: var(--text-primary, #091739);
+  --input-filter-background: var(--input-default-background, #fff);
+  --input-filter-label-left-padding: 5px;
+  --input-filter-label-right-padding: 0px;
+  box-sizing: border-box;
+  border: 1px solid var(--input-filter-border);
+  background: var(--input-filter-background);
+  padding: 0 var(--outline-input-wrapper-padding);
+  width: fit-content;
+  max-width: var(--input-width);
+  border-radius: 8px;
+  align-items: center;
+  height: 36px;
+  transition: border-color 50ms linear;
+  display: flex;
+}
+
+.wrapper-uTvv8S .input-RZEJYu {
+  box-sizing: border-box;
+  background: var(--input-filter-background);
+  color: var(--input-filter-text);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border: none;
+  outline: none;
+  padding: 0;
+  font-family: ALS Hauss, sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  overflow: hidden;
+}
+
+.wrapper-uTvv8S .input-RZEJYu:autofill {
+  box-shadow: inset 20px 20px 0 20px var(--input-filter-background);
+}
+
+.wrapper-uTvv8S .input-RZEJYu.noPointerEvents-zhzWq6 {
+  pointer-events: none;
+}
+
+.wrapper-uTvv8S .inputContentContainer-gvBnmZ {
+  z-index: 2;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.wrapper-uTvv8S .label-Abet7f {
+  transform-origin: 0 0;
+  cursor: text;
+  background: var(--input-filter-background);
+  padding: 0 var(--input-filter-label-right-padding) 0 var(--input-filter-label-left-padding);
+  max-width: calc(100% - var(--input-filter-label-right-padding));
+  pointer-events: none;
+  color: var(--input-filter-label);
+  -webkit-user-select: none;
+  user-select: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transition: transform .2s cubic-bezier(0, 0, .2, 1);
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  transform: matrix(1, 0, 0, 1, -5, 0);
+}
+
+.wrapper-uTvv8S:hover:not(.disabled-pFIwM6, .error-MRitKF, :focus-within, .focused-WLcs7A) {
+  --input-filter-border: var(--border-hover, #5f6d79);
+}
+
+.wrapper-uTvv8S:focus-within, .wrapper-uTvv8S.focused-WLcs7A {
+  --input-filter-label-right-padding: 5px;
+}
+
+.wrapper-uTvv8S:focus-within .label-Abet7f, .wrapper-uTvv8S.focused-WLcs7A .label-Abet7f {
+  max-width: calc(var(--input-width) - var(--outline-input-wrapper-padding)*2 - var(--input-filter-label-right-padding));
+  font-size: 12px;
+  line-height: 16px;
+  transform: matrix(1, 0, 0, 1, -4, -16);
+}
+
+.wrapper-uTvv8S:focus-within, .wrapper-uTvv8S.focused-WLcs7A {
+  --input-filter-border: var(--elements-hover, #091739);
+  --input-filter-label: var(--text-primary, #9fa7af);
+  outline: none;
+}
+
+.wrapper-uTvv8S:not(.empty-Nh6EKc) {
+  --input-filter-label-right-padding: 5px;
+}
+
+.wrapper-uTvv8S:not(.empty-Nh6EKc) .label-Abet7f {
+  max-width: calc(var(--input-width) - var(--outline-input-wrapper-padding)*2 - var(--input-filter-label-right-padding));
+  font-size: 12px;
+  line-height: 16px;
+  transform: matrix(1, 0, 0, 1, -4, -16);
+}
+
+.wrapper-uTvv8S.error-MRitKF {
+  --input-filter-border: var(--border-critical, #e50347);
+}
+
+.wrapper-uTvv8S.error-MRitKF:focus-within, .wrapper-uTvv8S.error-MRitKF.focused-WLcs7A, .wrapper-uTvv8S.error-MRitKF:not(.empty-Nh6EKc) {
+  --input-filter-label: var(--text-critical, #e50347);
+}
+
+.wrapper-uTvv8S.disabled-pFIwM6 {
+  --input-filter-background: var(--bgd-secondary, #f1f4f9);
+  --input-filter-label: var(--text-tertiary, #9fa7af);
+  --input-filter-text: var(--text-secondary, #5f6d79);
+}
+
+.wrapper-uTvv8S.disabled-pFIwM6:not(.empty-Nh6EKc) .label-Abet7f {
+  display: none;
+}
+
+.wrapper-uTvv8S .actionsContainer-v2jQ9o {
+  align-items: center;
+  gap: 12px;
+  padding-left: 8px;
+  display: inline-flex;
+  position: relative;
+}
+
+.sizerOuter-UiUY6R {
+  border-radius: inherit;
+  flex-direction: column;
+  min-width: 0;
+  display: inline-flex;
+  position: relative;
+}
+
+.sizerOuter-UiUY6R > .sizerInner-YVmkb_ {
+  border-radius: inherit;
+  display: inline-flex;
+  position: relative;
+}
+
+.sizerOuter-UiUY6R > .sizerInner-YVmkb_ > .input-RZEJYu {
+  flex: 1;
+  width: 1px;
+  height: 20px;
+}
+
+.sizerText-WJ5sCs {
+  visibility: hidden;
+  white-space: nowrap;
+  gap: 12px;
+  width: max-content;
+  height: 0;
+  padding: 0;
+  display: flex;
+}
+
+.hintOverlay-yyKcHw {
+  --hint-width: 265px;
+  box-sizing: border-box;
+  max-width: var(--hint-width);
+}
+
+.hintText-P2rm8R {
+  overflow-wrap: break-word;
+}
+

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

@@ -0,0 +1,12 @@
+import "./DateRangeDefaultTrigger_module.css";
+const DateRangeDefaultTrigger_module = {
+    icon: "icon-OajR9y",
+    outlineInput: "outlineInput-ZaqcZN",
+    clearIconButton: "clearIconButton-IOJ6cu",
+    filled: "filled-Snnimx",
+    actions: "actions-sQbVlC",
+    disabled: "disabled-TuIqlU",
+    calendarIcon: "calendarIcon-HZ0W7o",
+    inputMask: "inputMask-T9WXyG"
+};
+export default DateRangeDefaultTrigger_module;

package/dist/components/DateRange/DateRangeDefaultTrigger_module.css

@@ -0,0 +1,43 @@
+.icon-OajR9y path {
+  stroke: var(--elements-normal, #5f6d79);
+}
+
+.outlineInput-ZaqcZN .clearIconButton-IOJ6cu {
+  cursor: pointer;
+  display: none;
+}
+
+.outlineInput-ZaqcZN.filled-Snnimx:hover .actions-sQbVlC:not(.disabled-TuIqlU) .calendarIcon-HZ0W7o {
+  display: none;
+}
+
+.outlineInput-ZaqcZN.filled-Snnimx:hover .actions-sQbVlC:not(.disabled-TuIqlU) .clearIconButton-IOJ6cu {
+  display: flex;
+}
+
+.clearIconButton-IOJ6cu {
+  background-color: #0000;
+  border: none;
+  outline: none;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  display: flex;
+}
+
+.actions-sQbVlC {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  overflow: visible;
+}
+
+.actions-sQbVlC svg, .actions-sQbVlC path {
+  overflow: visible;
+}
+
+.inputMask-T9WXyG {
+  font-feature-settings: "tnum" on,"lnum" on;
+  -webkit-font-smoothing: antialiased;
+}
+

package/dist/components/DateRange/DateRangeInput/DateRangeInput.d.ts

@@ -0,0 +1,4 @@
+import type { useDateRange } from '../hooks/useDateRange';
+type DateRangeInputProps = Pick<ReturnType<typeof useDateRange>, 'props' | 'value' | 'needMaskInput' | 'needInputContent' | 'hintZIndex' | 'datepickerDropdown' | 'inputMaskValue' | 'assignTriggerRef' | 'handleClickOnClearButton' | 'handleClickPrevButton' | 'handleClickNextButton' | 'handleKeyDown' | 'handlePressTabOnInputContent' | 'getFocusedWidth' | 'isInputContentButtonsDisabled' | 'isFilled'>;
+export declare const DateRangeInput: (dateRange: DateRangeInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DateRange/DateRangeInput/DateRangeInput.js

@@ -0,0 +1,69 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import react_input_mask from "react-input-mask";
+import { cn } from "../../../common/css/index.js";
+import { Date12Icon, RemoveClose12Icon } from "../../../icon/index.js";
+import { DEFAULT_HINT_Z_INDEX } from "../consts.js";
+import { DateRangeDefaultTrigger } from "../DateRangeDefaultTrigger/DateRangeDefaultTrigger.js";
+import { InputContent } from "../InputContent/index.js";
+import DateRangeDefaultTrigger_module from "../DateRangeDefaultTrigger.module.js";
+const DateRangeInput = (dateRange)=>{
+    const { props, value, needMaskInput, needInputContent, hintZIndex, datepickerDropdown, inputMaskValue, assignTriggerRef, handleClickOnClearButton, handleClickPrevButton, handleClickNextButton, handleKeyDown, handlePressTabOnInputContent, getFocusedWidth, isInputContentButtonsDisabled, isFilled } = dateRange;
+    return /*#__PURE__*/ jsx(DateRangeDefaultTrigger, {
+        ref: assignTriggerRef,
+        ...props,
+        label: props.label ?? '',
+        ...datepickerDropdown.triggerAriaProps,
+        onClick: props.disabled ? void 0 : datepickerDropdown.handleOpen,
+        value: needMaskInput ? inputMaskValue.value : ' ',
+        focusedWidth: getFocusedWidth(),
+        focusedState: datepickerDropdown.open,
+        onChange: (event)=>{
+            if (!needMaskInput) return;
+            const { value: inputValue } = event.target;
+            if (inputValue && inputValue !== inputMaskValue.emptyRangeMaskInputValue) datepickerDropdown.handleOpen();
+            inputMaskValue.changeValue(inputValue);
+        },
+        staticActions: /*#__PURE__*/ jsxs("div", {
+            className: cn(DateRangeDefaultTrigger_module.actions, props.disabled && DateRangeDefaultTrigger_module.disabled),
+            children: [
+                /*#__PURE__*/ jsx(Date12Icon, {
+                    className: cn(DateRangeDefaultTrigger_module.icon, DateRangeDefaultTrigger_module.calendarIcon)
+                }),
+                /*#__PURE__*/ jsx("button", {
+                    className: DateRangeDefaultTrigger_module.clearIconButton,
+                    onClick: handleClickOnClearButton,
+                    type: "button",
+                    children: /*#__PURE__*/ jsx(RemoveClose12Icon, {
+                        className: DateRangeDefaultTrigger_module.icon
+                    })
+                })
+            ]
+        }),
+        className: cn(DateRangeDefaultTrigger_module.outlineInput, props.className, isFilled() && DateRangeDefaultTrigger_module.filled),
+        inputContent: needInputContent && /*#__PURE__*/ jsx(InputContent, {
+            value: value,
+            disabled: isInputContentButtonsDisabled(),
+            tooltipZIndex: hintZIndex,
+            onClickPrev: handleClickPrevButton,
+            onClickNext: handleClickNextButton,
+            onPressTabNextButton: handlePressTabOnInputContent
+        }),
+        renderCustomInput: needMaskInput ? (params)=>/*#__PURE__*/ jsx(react_input_mask, {
+                "data-test-id": props.testId ? `${props.testId}-input` : void 0,
+                className: cn(DateRangeDefaultTrigger_module.inputMask, params.className),
+                onFocus: params.onFocus,
+                onBlur: params.onBlur,
+                onKeyUp: params.onKeyUp,
+                onChange: params.onChange,
+                value: params.value,
+                inputRef: params.ref,
+                id: params.inputId,
+                disabled: props.disabled,
+                mask: inputMaskValue.inputMask,
+                alwaysShowMask: true
+            }) : void 0,
+        onKeyDown: handleKeyDown,
+        hintZIndex: hintZIndex ?? DEFAULT_HINT_Z_INDEX
+    });
+};
+export { DateRangeInput };

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

@@ -0,0 +1,16 @@
+import "./Day_module.css";
+const Day_module = {
+    day: "day-_STBpq",
+    today: "today-LIoCHS",
+    roundingContainer: "roundingContainer-DrFCbW",
+    holiday: "holiday-qW5YE0",
+    clickable: "clickable-Q_VdIY",
+    noHoverable: "noHoverable-I1XlXw",
+    selected: "selected-He2ffi",
+    sunday: "sunday-u1nJuw",
+    monday: "monday-vAXCT_",
+    leftTreshhold: "leftTreshhold-G8cbjr",
+    rightTreshhold: "rightTreshhold-Ub7ruB",
+    text: "text-oOEy0b"
+};
+export default Day_module;

package/dist/components/DateRange/Day/Day_module.css

@@ -0,0 +1,80 @@
+.day-_STBpq {
+  --cell-size: 32px;
+  --cell-border-radius: 8px;
+  width: var(--cell-size);
+  height: var(--cell-size);
+}
+
+.day-_STBpq.today-LIoCHS .roundingContainer-DrFCbW:after {
+  background-color: var(--elements-accent, #036ce5);
+  content: "";
+  border-radius: 4px;
+  width: 4px;
+  height: 4px;
+  position: absolute;
+  bottom: 4px;
+  left: 14px;
+}
+
+.day-_STBpq.holiday-qW5YE0 {
+  color: var(--text-critical);
+}
+
+.day-_STBpq.clickable-Q_VdIY {
+  cursor: pointer;
+}
+
+.day-_STBpq.clickable-Q_VdIY:hover:not(.noHoverable-I1XlXw) .roundingContainer-DrFCbW {
+  outline: 1px solid var(--border-accent);
+  border-radius: var(--cell-border-radius);
+}
+
+.day-_STBpq.selected-He2ffi {
+  background: var(--elements-chips-normal-current, #bfddf7bf);
+}
+
+.day-_STBpq.selected-He2ffi:not(.clickable-Q_VdIY).sunday-u1nJuw {
+  background: linear-gradient(90deg, var(--light-blue-100, #bfddf7bf) 0%, var(--light-white, #fff) 100%);
+}
+
+.day-_STBpq.selected-He2ffi:not(.clickable-Q_VdIY).monday-vAXCT_ {
+  background: linear-gradient(90deg, var(--light-white, #fff) 0%, var(--light-blue-100, #bfddf7bf) 100%);
+}
+
+.day-_STBpq.today-LIoCHS.leftTreshhold-G8cbjr :after, .day-_STBpq.today-LIoCHS.rightTreshhold-Ub7ruB :after {
+  background: var(--invert-text, #fff);
+}
+
+.day-_STBpq.leftTreshhold-G8cbjr, .day-_STBpq.monday-vAXCT_ {
+  border-top-left-radius: var(--cell-border-radius);
+  border-bottom-left-radius: var(--cell-border-radius);
+}
+
+.day-_STBpq.rightTreshhold-Ub7ruB, .day-_STBpq.sunday-u1nJuw {
+  border-top-right-radius: var(--cell-border-radius);
+  border-bottom-right-radius: var(--cell-border-radius);
+}
+
+.day-_STBpq.leftTreshhold-G8cbjr .roundingContainer-DrFCbW, .day-_STBpq.rightTreshhold-Ub7ruB .roundingContainer-DrFCbW {
+  border-radius: var(--cell-border-radius);
+  background-color: var(--button-primary-normal, #036ce5);
+}
+
+.day-_STBpq.leftTreshhold-G8cbjr .roundingContainer-DrFCbW .text-oOEy0b, .day-_STBpq.rightTreshhold-Ub7ruB .roundingContainer-DrFCbW .text-oOEy0b {
+  color: var(--invert-text, #fff);
+}
+
+.day-_STBpq .roundingContainer-DrFCbW {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  position: relative;
+}
+
+.day-_STBpq .roundingContainer-DrFCbW .text-oOEy0b {
+  color: inherit;
+}
+

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

@@ -0,0 +1,12 @@
+interface DayProps {
+    date: Date | null;
+    selected?: boolean;
+    leftTreshhold?: boolean;
+    rightTreshhold?: boolean;
+    dayIndex: number;
+    noHoverStyle?: boolean;
+    onClick?: () => void;
+    onHover?: () => void;
+}
+export declare const Day: import("react").MemoExoticComponent<(props: DayProps) => import("react/jsx-runtime").JSX.Element>;
+export {};