@servicetitan/anvil2 1.38.0 → 1.40.0

package/dist/DateFieldRange--ZCTVrKX-DoogWMrm.js

@@ -0,0 +1,2759 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useCallback, useRef, useLayoutEffect, useEffect, useMemo, forwardRef, useImperativeHandle } from 'react';
+import { D as DateTime, f as Calendar } from './Calendar-DixTCgAW-CfphBge0.js';
+import { T as TextField } from './TextField-C5KbQxoU-CSkSyt7P.js';
+import { u as useMergeRefs$1 } from './floating-ui.react-BFNinq1w.js';
+import { I as Icon } from './Icon-B6HmlQiR-BxQkO3X5.js';
+import { S as SvgEvent } from './event-BEJFimi3.js';
+import { d as Popover } from './Popover-CVCAWhdO-CJw1mW49.js';
+import { u as useMergeRefs } from './useMergeRefs-Bde85AWI-Bde85AWI.js';
+import { u as useOptionallyControlledState } from './useOptionallyControlledState-DAv5LXXh-DAv5LXXh.js';
+import { s as supportsPopover, u as useKeyboardFocusables } from './ProgressBar-CZhkKwaS-dlDRDjxo.js';
+
+function getContentEditableSelection(element) {
+    const { anchorOffset = 0, focusOffset = 0 } = element.ownerDocument.getSelection() || {};
+    const from = Math.min(anchorOffset, focusOffset);
+    const to = Math.max(anchorOffset, focusOffset);
+    return [from, to];
+}
+
+function setContentEditableSelection(element, [from, to]) {
+    var _a, _b, _c, _d;
+    const document = element.ownerDocument;
+    const range = document.createRange();
+    range.setStart(element.firstChild || element, Math.min(from, (_b = (_a = element.textContent) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0));
+    range.setEnd(element.lastChild || element, Math.min(to, (_d = (_c = element.textContent) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0));
+    const selection = document.getSelection();
+    if (selection) {
+        selection.removeAllRanges();
+        selection.addRange(range);
+    }
+}
+
+class ContentEditableAdapter {
+    constructor(element) {
+        this.element = element;
+        this.maxLength = Infinity;
+    }
+    get value() {
+        return this.element.innerText.replace(/\n\n$/, '\n');
+    }
+    set value(value) {
+        // Setting into innerHTML of element with `white-space: pre;` style
+        this.element.innerHTML = value.replace(/\n$/, '\n\n');
+    }
+    get selectionStart() {
+        return getContentEditableSelection(this.element)[0];
+    }
+    get selectionEnd() {
+        return getContentEditableSelection(this.element)[1];
+    }
+    setSelectionRange(from, to) {
+        setContentEditableSelection(this.element, [from !== null && from !== void 0 ? from : 0, to !== null && to !== void 0 ? to : 0]);
+    }
+    select() {
+        this.setSelectionRange(0, this.value.length);
+    }
+}
+function maskitoAdaptContentEditable(element) {
+    const adapter = new ContentEditableAdapter(element);
+    return new Proxy(element, {
+        get(target, prop) {
+            if (prop in adapter) {
+                return adapter[prop];
+            }
+            const nativeProperty = target[prop];
+            return typeof nativeProperty === 'function'
+                ? nativeProperty.bind(target)
+                : nativeProperty;
+        },
+        // eslint-disable-next-line @typescript-eslint/max-params
+        set(target, prop, val, receiver) {
+            return Reflect.set(prop in adapter ? adapter : target, prop, val, receiver);
+        },
+    });
+}
+
+const MASKITO_DEFAULT_ELEMENT_PREDICATE = (e) => e.isContentEditable
+    ? maskitoAdaptContentEditable(e)
+    : e.querySelector('input,textarea') ||
+        e;
+
+const MASKITO_DEFAULT_OPTIONS = {
+    mask: /^.*$/,
+    preprocessors: [],
+    postprocessors: [],
+    plugins: [],
+    overwriteMode: 'shift',
+};
+
+class MaskHistory {
+    constructor() {
+        this.now = null;
+        this.past = [];
+        this.future = [];
+    }
+    undo() {
+        const state = this.past.pop();
+        if (state && this.now) {
+            this.future.push(this.now);
+            this.updateElement(state, 'historyUndo');
+        }
+    }
+    redo() {
+        const state = this.future.pop();
+        if (state && this.now) {
+            this.past.push(this.now);
+            this.updateElement(state, 'historyRedo');
+        }
+    }
+    updateHistory(state) {
+        if (!this.now) {
+            this.now = state;
+            return;
+        }
+        const isValueChanged = this.now.value !== state.value;
+        const isSelectionChanged = this.now.selection.some((item, index) => item !== state.selection[index]);
+        if (!isValueChanged && !isSelectionChanged) {
+            return;
+        }
+        if (isValueChanged) {
+            this.past.push(this.now);
+            this.future = [];
+        }
+        this.now = state;
+    }
+    updateElement(state, inputType) {
+        this.now = state;
+        this.updateElementState(state, { inputType, data: null });
+    }
+}
+
+function areElementValuesEqual(sampleState, ...states) {
+    return states.every(({ value }) => value === sampleState.value);
+}
+function areElementStatesEqual(sampleState, ...states) {
+    return states.every(({ value, selection }) => value === sampleState.value &&
+        selection[0] === sampleState.selection[0] &&
+        selection[1] === sampleState.selection[1]);
+}
+
+function applyOverwriteMode({ value, selection }, newCharacters, mode) {
+    const [from, to] = selection;
+    const computedMode = typeof mode === 'function' ? mode({ value, selection }) : mode;
+    return {
+        value,
+        selection: computedMode === 'replace'
+            ? [from, Math.max(from + newCharacters.length, to)]
+            : [from, to],
+    };
+}
+
+function isFixedCharacter(char) {
+    return typeof char === 'string';
+}
+
+// eslint-disable-next-line @typescript-eslint/max-params
+function getLeadingFixedCharacters(mask, validatedValuePart, newCharacter, initialElementState) {
+    let leadingFixedCharacters = '';
+    for (let i = validatedValuePart.length; i < mask.length; i++) {
+        const charConstraint = mask[i] || '';
+        const isInitiallyExisted = (initialElementState === null || initialElementState === void 0 ? void 0 : initialElementState.value[i]) === charConstraint;
+        if (!isFixedCharacter(charConstraint) ||
+            (charConstraint === newCharacter && !isInitiallyExisted)) {
+            return leadingFixedCharacters;
+        }
+        leadingFixedCharacters += charConstraint;
+    }
+    return leadingFixedCharacters;
+}
+
+function validateValueWithMask(value, maskExpression) {
+    if (Array.isArray(maskExpression)) {
+        return (value.length === maskExpression.length &&
+            Array.from(value).every((char, i) => {
+                const charConstraint = maskExpression[i] || '';
+                return isFixedCharacter(charConstraint)
+                    ? char === charConstraint
+                    : char.match(charConstraint);
+            }));
+    }
+    return maskExpression.test(value);
+}
+
+function guessValidValueByPattern(elementState, mask, initialElementState) {
+    let maskedFrom = null;
+    let maskedTo = null;
+    const maskedValue = Array.from(elementState.value).reduce((validatedCharacters, char, charIndex) => {
+        const leadingCharacters = getLeadingFixedCharacters(mask, validatedCharacters, char, initialElementState);
+        const newValidatedChars = validatedCharacters + leadingCharacters;
+        const charConstraint = mask[newValidatedChars.length] || '';
+        if (maskedFrom === null && charIndex >= elementState.selection[0]) {
+            maskedFrom = newValidatedChars.length;
+        }
+        if (maskedTo === null && charIndex >= elementState.selection[1]) {
+            maskedTo = newValidatedChars.length;
+        }
+        if (isFixedCharacter(charConstraint)) {
+            return newValidatedChars + charConstraint;
+        }
+        if (char.match(charConstraint)) {
+            return newValidatedChars + char;
+        }
+        return leadingCharacters.startsWith(char)
+            ? newValidatedChars
+            : validatedCharacters;
+    }, '');
+    const trailingFixedCharacters = getLeadingFixedCharacters(mask, maskedValue, '', initialElementState);
+    return {
+        value: validateValueWithMask(maskedValue + trailingFixedCharacters, mask)
+            ? maskedValue + trailingFixedCharacters
+            : maskedValue,
+        selection: [maskedFrom !== null && maskedFrom !== void 0 ? maskedFrom : maskedValue.length, maskedTo !== null && maskedTo !== void 0 ? maskedTo : maskedValue.length],
+    };
+}
+
+function guessValidValueByRegExp({ value, selection }, maskRegExp) {
+    const [from, to] = selection;
+    let newFrom = from;
+    let newTo = to;
+    const validatedValue = Array.from(value).reduce((validatedValuePart, char, i) => {
+        const newPossibleValue = validatedValuePart + char;
+        if (from === i) {
+            newFrom = validatedValuePart.length;
+        }
+        if (to === i) {
+            newTo = validatedValuePart.length;
+        }
+        return newPossibleValue.match(maskRegExp) ? newPossibleValue : validatedValuePart;
+    }, '');
+    return {
+        value: validatedValue,
+        selection: [
+            Math.min(newFrom, validatedValue.length),
+            Math.min(newTo, validatedValue.length),
+        ],
+    };
+}
+
+function calibrateValueByMask(elementState, mask, initialElementState = null) {
+    if (validateValueWithMask(elementState.value, mask)) {
+        return elementState;
+    }
+    const { value, selection } = Array.isArray(mask)
+        ? guessValidValueByPattern(elementState, mask, initialElementState)
+        : guessValidValueByRegExp(elementState, mask);
+    return {
+        selection,
+        value: Array.isArray(mask) ? value.slice(0, mask.length) : value,
+    };
+}
+
+function removeFixedMaskCharacters(initialElementState, mask) {
+    if (!Array.isArray(mask)) {
+        return initialElementState;
+    }
+    const [from, to] = initialElementState.selection;
+    const selection = [];
+    const unmaskedValue = Array.from(initialElementState.value).reduce((rawValue, char, i) => {
+        const charConstraint = mask[i] || '';
+        if (i === from) {
+            selection.push(rawValue.length);
+        }
+        if (i === to) {
+            selection.push(rawValue.length);
+        }
+        return isFixedCharacter(charConstraint) && charConstraint === char
+            ? rawValue
+            : rawValue + char;
+    }, '');
+    if (selection.length < 2) {
+        selection.push(...new Array(2 - selection.length).fill(unmaskedValue.length));
+    }
+    return {
+        value: unmaskedValue,
+        selection: [selection[0], selection[1]],
+    };
+}
+
+class MaskModel {
+    constructor(initialElementState, maskOptions) {
+        this.maskOptions = maskOptions;
+        this.unmaskInitialState = { value: '', selection: [0, 0] };
+        this.value = '';
+        this.selection = [0, 0];
+        const expression = this.getMaskExpression(initialElementState);
+        const { value, selection } = calibrateValueByMask(initialElementState, expression);
+        this.unmaskInitialState = removeFixedMaskCharacters({ value, selection }, expression);
+        this.value = value;
+        this.selection = selection;
+    }
+    addCharacters(newCharacters) {
+        const { value, selection, maskOptions } = this;
+        const initialElementState = { value, selection };
+        const { selection: [from, to], } = applyOverwriteMode(initialElementState, newCharacters, maskOptions.overwriteMode);
+        const maskExpression = this.getMaskExpression({
+            value: value.slice(0, from) + newCharacters + value.slice(to),
+            selection: [from + newCharacters.length, from + newCharacters.length],
+        });
+        const [unmaskedFrom, unmaskedTo] = applyOverwriteMode(this.unmaskInitialState, newCharacters, maskOptions.overwriteMode).selection;
+        const newUnmaskedLeadingValuePart = this.unmaskInitialState.value.slice(0, unmaskedFrom) + newCharacters;
+        const newCaretIndex = newUnmaskedLeadingValuePart.length;
+        const maskedElementState = calibrateValueByMask({
+            value: newUnmaskedLeadingValuePart +
+                this.unmaskInitialState.value.slice(unmaskedTo),
+            selection: [newCaretIndex, newCaretIndex],
+        }, maskExpression, initialElementState);
+        const prevLeadingPart = value.slice(0, from);
+        const newLeadingValuePart = calibrateValueByMask({
+            value: newUnmaskedLeadingValuePart,
+            selection: [newCaretIndex, newCaretIndex],
+        }, maskExpression, initialElementState).value;
+        const isInvalidCharsInsertion = prevLeadingPart === newLeadingValuePart ||
+            newLeadingValuePart.length < prevLeadingPart.length;
+        if (isInvalidCharsInsertion ||
+            areElementStatesEqual(this, maskedElementState) // If typing new characters does not change value
+        ) {
+            throw new Error('Invalid mask value');
+        }
+        this.value = maskedElementState.value;
+        this.selection = maskedElementState.selection;
+    }
+    deleteCharacters() {
+        const [from, to] = this.selection;
+        if (from === to || !to) {
+            return;
+        }
+        const { value } = this;
+        const maskExpression = this.getMaskExpression({
+            value: value.slice(0, from) + value.slice(to),
+            selection: [from, from],
+        });
+        const initialElementState = { value};
+        const [unmaskedFrom, unmaskedTo] = this.unmaskInitialState.selection;
+        const newUnmaskedValue = this.unmaskInitialState.value.slice(0, unmaskedFrom) +
+            this.unmaskInitialState.value.slice(unmaskedTo);
+        const maskedElementState = calibrateValueByMask({ value: newUnmaskedValue, selection: [unmaskedFrom, unmaskedFrom] }, maskExpression, initialElementState);
+        this.value = maskedElementState.value;
+        this.selection = maskedElementState.selection;
+    }
+    getMaskExpression(elementState) {
+        const { mask } = this.maskOptions;
+        return typeof mask === 'function' ? mask(elementState) : mask;
+    }
+}
+
+class EventListener {
+    constructor(element) {
+        this.element = element;
+        this.listeners = [];
+    }
+    listen(eventType, fn, options) {
+        const untypedFn = fn;
+        this.element.addEventListener(eventType, untypedFn, options);
+        this.listeners.push(() => this.element.removeEventListener(eventType, untypedFn, options));
+    }
+    destroy() {
+        this.listeners.forEach((stopListen) => stopListen());
+    }
+}
+
+const HotkeyModifier = {
+    CTRL: 1 << 0,
+    ALT: 1 << 1,
+    SHIFT: 1 << 2,
+    META: 1 << 3,
+};
+// TODO add variants that can be processed correctly
+const HotkeyCode = {
+    Y: 89,
+    Z: 90,
+};
+/**
+ * Checks if the passed keyboard event match the required hotkey.
+ *
+ * @example
+ * input.addEventListener('keydown', (event) => {
+ *     if (isHotkey(event, HotkeyModifier.CTRL | HotkeyModifier.SHIFT, HotkeyCode.Z)) {
+ *         // redo hotkey pressed
+ *     }
+ * })
+ *
+ * @return will return `true` only if the {@link HotkeyCode} matches and only the necessary
+ * {@link HotkeyModifier modifiers} have been pressed
+ */
+function isHotkey(event, modifiers, hotkeyCode) {
+    return (event.ctrlKey === !!(modifiers & HotkeyModifier.CTRL) &&
+        event.altKey === !!(modifiers & HotkeyModifier.ALT) &&
+        event.shiftKey === !!(modifiers & HotkeyModifier.SHIFT) &&
+        event.metaKey === !!(modifiers & HotkeyModifier.META) &&
+        /**
+         * We intentionally use legacy {@link KeyboardEvent#keyCode `keyCode`} property. It is more
+         * "keyboard-layout"-independent than {@link KeyboardEvent#key `key`} or {@link KeyboardEvent#code `code`} properties.
+         * @see {@link https://github.com/taiga-family/maskito/issues/315 `KeyboardEvent#code` issue}
+         */
+        event.keyCode === hotkeyCode);
+}
+
+function isRedo(event) {
+    return (isHotkey(event, HotkeyModifier.CTRL, HotkeyCode.Y) || // Windows
+        isHotkey(event, HotkeyModifier.CTRL | HotkeyModifier.SHIFT, HotkeyCode.Z) || // Windows & Android
+        isHotkey(event, HotkeyModifier.META | HotkeyModifier.SHIFT, HotkeyCode.Z) // macOS & iOS
+    );
+}
+function isUndo(event) {
+    return (isHotkey(event, HotkeyModifier.CTRL, HotkeyCode.Z) || // Windows & Android
+        isHotkey(event, HotkeyModifier.META, HotkeyCode.Z) // macOS & iOS
+    );
+}
+
+/**
+ * Sets value to element, and dispatches input event
+ * if you passed ELementState, it also sets selection range
+ *
+ * @example
+ * maskitoUpdateElement(input, newValue);
+ * maskitoUpdateElement(input, elementState);
+ *
+ * @see {@link https://github.com/taiga-family/maskito/issues/804 issue}
+ *
+ * @return void
+ */
+function maskitoUpdateElement(element, valueOrElementState) {
+    var _a;
+    const initialValue = element.value;
+    if (typeof valueOrElementState === 'string') {
+        element.value = valueOrElementState;
+    }
+    else {
+        const [from, to] = valueOrElementState.selection;
+        element.value = valueOrElementState.value;
+        if (element.matches(':focus')) {
+            (_a = element.setSelectionRange) === null || _a === void 0 ? void 0 : _a.call(element, from, to);
+        }
+    }
+    if (element.value !== initialValue) {
+        element.dispatchEvent(new Event('input', 
+        /**
+         * React handles this event only on bubbling phase
+         *
+         * here is the list of events that are processed in the capture stage, others are processed in the bubbling stage
+         * https://github.com/facebook/react/blob/cb2439624f43c510007f65aea5c50a8bb97917e4/packages/react-dom-bindings/src/events/DOMPluginEventSystem.js#L222
+         */
+        { bubbles: true }));
+    }
+}
+
+function getLineSelection({ value, selection }, isForward) {
+    const [from, to] = selection;
+    if (from !== to) {
+        return [from, to];
+    }
+    const nearestBreak = isForward
+        ? value.slice(from).indexOf('\n') + 1 || value.length
+        : value.slice(0, to).lastIndexOf('\n') + 1;
+    const selectFrom = isForward ? from : nearestBreak;
+    const selectTo = isForward ? nearestBreak : to;
+    return [selectFrom, selectTo];
+}
+
+function getNotEmptySelection({ value, selection }, isForward) {
+    const [from, to] = selection;
+    if (from !== to) {
+        return [from, to];
+    }
+    const notEmptySelection = isForward ? [from, to + 1] : [from - 1, to];
+    return notEmptySelection.map((x) => Math.min(Math.max(x, 0), value.length));
+}
+
+const TRAILING_SPACES_REG = /\s+$/g;
+const LEADING_SPACES_REG = /^\s+/g;
+const SPACE_REG = /\s/;
+function getWordSelection({ value, selection }, isForward) {
+    const [from, to] = selection;
+    if (from !== to) {
+        return [from, to];
+    }
+    if (isForward) {
+        const valueAfterSelectionStart = value.slice(from);
+        const [leadingSpaces] = valueAfterSelectionStart.match(LEADING_SPACES_REG) || [
+            '',
+        ];
+        const nearestWordEndIndex = valueAfterSelectionStart
+            .trimStart()
+            .search(SPACE_REG);
+        return [
+            from,
+            nearestWordEndIndex !== -1
+                ? from + leadingSpaces.length + nearestWordEndIndex
+                : value.length,
+        ];
+    }
+    const valueBeforeSelectionEnd = value.slice(0, to);
+    const [trailingSpaces] = valueBeforeSelectionEnd.match(TRAILING_SPACES_REG) || [''];
+    const selectedWordLength = valueBeforeSelectionEnd
+        .trimEnd()
+        .split('')
+        .reverse()
+        .findIndex((char) => SPACE_REG.exec(char));
+    return [
+        selectedWordLength !== -1 ? to - trailingSpaces.length - selectedWordLength : 0,
+        to,
+    ];
+}
+
+/* eslint-disable @typescript-eslint/no-restricted-types */
+/**
+ * @internal
+ */
+function maskitoPipe(processors = []) {
+    return (initialData, ...readonlyArgs) => processors.reduce((data, fn) => (Object.assign(Object.assign({}, data), fn(data, ...readonlyArgs))), initialData);
+}
+
+function maskitoTransform(valueOrState, maskitoOptions) {
+    const options = Object.assign(Object.assign({}, MASKITO_DEFAULT_OPTIONS), maskitoOptions);
+    const preprocessor = maskitoPipe(options.preprocessors);
+    const postprocessor = maskitoPipe(options.postprocessors);
+    const initialElementState = typeof valueOrState === 'string'
+        ? { value: valueOrState, selection: [0, 0] }
+        : valueOrState;
+    const { elementState } = preprocessor({ elementState: initialElementState, data: '' }, 'validation');
+    const maskModel = new MaskModel(elementState, options);
+    const { value, selection } = postprocessor(maskModel, initialElementState);
+    return typeof valueOrState === 'string' ? value : { value, selection };
+}
+
+/**
+ * All `input` events with `inputType=deleteContentBackward` always follows `beforeinput` event with the same `inputType`.
+ * If `beforeinput[inputType=deleteContentBackward]` is prevented, subsequent `input[inputType=deleteContentBackward]` is prevented too.
+ * There is an exception – Android devices with Microsoft SwiftKey Keyboard in Mobile Chrome.
+ * These devices ignores `preventDefault` for `beforeinput` event if Backspace is pressed.
+ * @see https://github.com/taiga-family/maskito/issues/2135#issuecomment-2980729647
+ * ___
+ * TODO: track Chromium bug report and delete this plugin after bug fix
+ * https://issues.chromium.org/issues/40885402
+ */
+function createBrokenDefaultPlugin() {
+    return (element) => {
+        const eventListener = new EventListener(element);
+        let isVirtualAndroidKeyboard = false;
+        let beforeinputEvent;
+        let value = element.value;
+        eventListener.listen('keydown', ({ key }) => {
+            isVirtualAndroidKeyboard = key === 'Unidentified';
+        });
+        eventListener.listen('beforeinput', (event) => {
+            beforeinputEvent = event;
+            value = element.value;
+        });
+        eventListener.listen('input', (event) => {
+            if (isVirtualAndroidKeyboard &&
+                beforeinputEvent.defaultPrevented &&
+                beforeinputEvent.inputType === 'deleteContentBackward' &&
+                event.inputType === 'deleteContentBackward') {
+                element.value = value;
+            }
+        }, { capture: true });
+        return () => eventListener.destroy();
+    };
+}
+
+const SPACE = ' ';
+/**
+ * 1. Android user (with G-board keyboard or similar) presses 1st space
+ * ```
+ * {type: "beforeinput", data: " ", inputType: "insertText"}
+ * ```
+ * 2. User presses 2nd space
+ * ```
+ * // Android tries to delete previously inserted space
+ * {type: "beforeinput", inputType: "deleteContentBackward"}
+ * {type: "beforeinput", data: ". ", inputType: "insertText"}
+ * ```
+ * ---------
+ * 1. MacOS user presses 1st space
+ * ```
+ * {type: "beforeinput", data: " ", inputType: "insertText"}
+ * ```
+ * 2. User presses 2nd space
+ * ```
+ * // MacOS automatically run `element.setSelectionRange(indexBeforeSpace, indexAfterSpace)` and then
+ * {type: "beforeinput", data: ". ", inputType: "insertText"}
+ * ```
+ * ---------
+ * @see https://github.com/taiga-family/maskito/issues/2023
+ */
+function createDoubleSpacePlugin() {
+    let prevValue = '';
+    let prevCaretIndex = 0;
+    let prevEvent = null;
+    let prevRejectedSpace = false;
+    return (element) => {
+        const eventListener = new EventListener(element);
+        eventListener.listen('beforeinput', (event) => {
+            var _a, _b;
+            const { value, selectionStart, selectionEnd } = element;
+            const rejectedSpace = (prevEvent === null || prevEvent === void 0 ? void 0 : prevEvent.inputType) === 'insertText' &&
+                (prevEvent === null || prevEvent === void 0 ? void 0 : prevEvent.data) === SPACE &&
+                !value.slice(0, Number(selectionEnd)).endsWith(SPACE);
+            if (event.inputType === 'insertText' && event.data === `.${SPACE}`) {
+                if ((prevEvent === null || prevEvent === void 0 ? void 0 : prevEvent.inputType) === 'deleteContentBackward' &&
+                    prevRejectedSpace) {
+                    // Android
+                    element.value = prevValue;
+                    (_a = element.setSelectionRange) === null || _a === void 0 ? void 0 : _a.call(element, prevCaretIndex, prevCaretIndex);
+                }
+                else if (rejectedSpace) {
+                    // Mac OS
+                    (_b = element.setSelectionRange) === null || _b === void 0 ? void 0 : _b.call(element, selectionStart, selectionStart);
+                }
+            }
+            prevRejectedSpace = rejectedSpace;
+            prevEvent = event;
+            prevValue = value;
+            prevCaretIndex = Number((rejectedSpace ? prevCaretIndex : selectionEnd) === value.length
+                ? selectionEnd
+                : selectionStart);
+        });
+        return () => eventListener.destroy();
+    };
+}
+
+const BUILT_IN_PLUGINS = [createDoubleSpacePlugin(), createBrokenDefaultPlugin()];
+class Maskito extends MaskHistory {
+    constructor(element, maskitoOptions) {
+        super();
+        this.element = element;
+        this.maskitoOptions = maskitoOptions;
+        this.isTextArea = this.element.nodeName === 'TEXTAREA';
+        this.eventListener = new EventListener(this.element);
+        this.options = Object.assign(Object.assign({}, MASKITO_DEFAULT_OPTIONS), this.maskitoOptions);
+        this.upcomingElementState = null;
+        this.preprocessor = maskitoPipe(this.options.preprocessors);
+        this.postprocessor = maskitoPipe(this.options.postprocessors);
+        this.teardowns = this.options.plugins
+            .concat(BUILT_IN_PLUGINS)
+            .map((plugin) => plugin(this.element, this.options));
+        this.updateHistory(this.elementState);
+        this.eventListener.listen('keydown', (event) => {
+            if (isRedo(event)) {
+                event.preventDefault();
+                return this.redo();
+            }
+            if (isUndo(event)) {
+                event.preventDefault();
+                return this.undo();
+            }
+        });
+        this.eventListener.listen('beforeinput', (event) => {
+            var _a, _b, _c;
+            const isForward = event.inputType.includes('Forward');
+            this.updateHistory(this.elementState);
+            switch (event.inputType) {
+                case 'deleteByCut':
+                case 'deleteContentBackward':
+                case 'deleteContentForward':
+                    return this.handleDelete({
+                        event,
+                        isForward,
+                        selection: getNotEmptySelection(this.elementState, isForward),
+                    });
+                case 'deleteHardLineBackward':
+                case 'deleteHardLineForward':
+                case 'deleteSoftLineBackward':
+                case 'deleteSoftLineForward':
+                    return this.handleDelete({
+                        event,
+                        isForward,
+                        selection: getLineSelection(this.elementState, isForward),
+                        force: true,
+                    });
+                case 'deleteWordBackward':
+                case 'deleteWordForward':
+                    return this.handleDelete({
+                        event,
+                        isForward,
+                        selection: getWordSelection(this.elementState, isForward),
+                    });
+                case 'historyRedo':
+                    event.preventDefault();
+                    return this.redo();
+                // historyUndo/historyRedo will not be triggered if value was modified programmatically
+                case 'historyUndo':
+                    event.preventDefault();
+                    return this.undo();
+                case 'insertCompositionText':
+                    return; // will be handled inside `compositionend` event
+                case 'insertLineBreak':
+                case 'insertParagraph':
+                    return this.handleEnter(event);
+                case 'insertReplacementText':
+                    /**
+                     * According {@link https://www.w3.org/TR/input-events-2 W3C specification}:
+                     * > `insertReplacementText` – insert or replace existing text by means of a spell checker,
+                     * > auto-correct, writing suggestions or similar.
+                     * ___
+                     * Firefox emits `insertReplacementText` event for its suggestion/autofill and for spell checker.
+                     * However, it is impossible to detect which part of the textfield value is going to be replaced
+                     * (`selectionStart` and `selectionEnd` just equal to the last caret position).
+                     * ___
+                     * Chrome does not fire `beforeinput` event for its suggestion/autofill.
+                     * It emits only `input` event with `inputType` and `data` set to `undefined`.
+                     * ___
+                     * All these browser limitations make us to validate the result value later in `input` event.
+                     */
+                    return;
+                case 'insertFromDrop':
+                case 'insertFromPaste':
+                case 'insertText':
+                default:
+                    return this.handleInsert(event, (_c = (_a = event.data) !== null && _a !== void 0 ? _a : 
+                    // `event.data` for `contentEditable` is always `null` for paste/drop events
+                    (_b = event.dataTransfer) === null || _b === void 0 ? void 0 : _b.getData('text/plain')) !== null && _c !== void 0 ? _c : '');
+            }
+        });
+        this.eventListener.listen('input', () => {
+            if (this.upcomingElementState &&
+                !areElementStatesEqual(this.upcomingElementState, this.elementState)) {
+                this.updateElementState(this.upcomingElementState);
+            }
+            this.upcomingElementState = null;
+        }, { capture: true });
+        this.eventListener.listen('input', ({ inputType }) => {
+            if (inputType === 'insertCompositionText') {
+                return; // will be handled inside `compositionend` event
+            }
+            this.ensureValueFitsMask();
+            this.updateHistory(this.elementState);
+        });
+        this.eventListener.listen('compositionend', () => {
+            this.ensureValueFitsMask();
+            this.updateHistory(this.elementState);
+        });
+    }
+    destroy() {
+        this.eventListener.destroy();
+        this.teardowns.forEach((teardown) => teardown === null || teardown === void 0 ? void 0 : teardown());
+    }
+    updateElementState({ value, selection }, eventInit) {
+        const initialValue = this.elementState.value;
+        this.updateValue(value);
+        this.updateSelectionRange(selection);
+        if (eventInit && initialValue !== value) {
+            this.dispatchInputEvent(eventInit);
+        }
+    }
+    get elementState() {
+        const { value, selectionStart, selectionEnd } = this.element;
+        return {
+            value,
+            selection: [selectionStart !== null && selectionStart !== void 0 ? selectionStart : 0, selectionEnd !== null && selectionEnd !== void 0 ? selectionEnd : 0],
+        };
+    }
+    get maxLength() {
+        const { maxLength } = this.element;
+        return maxLength === -1 ? Infinity : maxLength;
+    }
+    updateSelectionRange([from, to]) {
+        var _a;
+        const { element } = this;
+        if (element.matches(':focus') &&
+            (element.selectionStart !== from || element.selectionEnd !== to)) {
+            (_a = element.setSelectionRange) === null || _a === void 0 ? void 0 : _a.call(element, from, to);
+        }
+    }
+    updateValue(value) {
+        /**
+         * Don't "disturb" unnecessarily `value`-setter
+         * (i.e. it breaks React controlled input behavior)
+         */
+        if (this.element.value !== value || this.element.isContentEditable) {
+            this.element.value = value;
+        }
+    }
+    ensureValueFitsMask() {
+        this.updateElementState(maskitoTransform(this.elementState, this.options), {
+            inputType: 'insertText',
+            data: null,
+        });
+    }
+    dispatchInputEvent(eventInit = {
+        inputType: 'insertText',
+        data: null,
+    }) {
+        if (globalThis.InputEvent) {
+            this.element.dispatchEvent(new InputEvent('input', Object.assign(Object.assign({}, eventInit), { bubbles: true, cancelable: false })));
+        }
+    }
+    handleDelete({ event, selection, isForward, }) {
+        const initialState = {
+            value: this.elementState.value,
+            selection,
+        };
+        const { elementState } = this.preprocessor({
+            elementState: initialState,
+            data: '',
+        }, isForward ? 'deleteForward' : 'deleteBackward');
+        const maskModel = new MaskModel(elementState, this.options);
+        maskModel.deleteCharacters();
+        const newElementState = this.postprocessor(maskModel, initialState);
+        if (areElementValuesEqual(initialState, elementState, maskModel, newElementState)) {
+            const [from, to] = elementState.selection;
+            event.preventDefault();
+            // User presses Backspace/Delete for the fixed value
+            return this.updateSelectionRange(isForward ? [to, to] : [from, from]);
+        }
+        this.upcomingElementState = newElementState;
+    }
+    handleInsert(event, data) {
+        const { options, maxLength, elementState: initialElementState } = this;
+        const { elementState, data: insertedText = data } = this.preprocessor({
+            data,
+            elementState: initialElementState,
+        }, 'insert');
+        const maskModel = new MaskModel(elementState, options);
+        try {
+            maskModel.addCharacters(insertedText);
+        }
+        catch (_a) {
+            return event.preventDefault();
+        }
+        const [from, to] = initialElementState.selection;
+        const newPossibleState = {
+            value: initialElementState.value.slice(0, from) +
+                data +
+                initialElementState.value.slice(to),
+            selection: [from + data.length, from + data.length],
+        };
+        this.upcomingElementState = this.clampState(this.postprocessor(maskModel, initialElementState));
+        if (!areElementStatesEqual(this.clampState(newPossibleState), this.upcomingElementState) &&
+            options.overwriteMode === 'replace' &&
+            newPossibleState.value.length > maxLength) {
+            /**
+             * Browsers know nothing about Maskito and its `overwriteMode`.
+             * When textfield value length is already equal to attribute `maxlength`,
+             * pressing any key (even with valid value) does not emit `input` event.
+             */
+            this.dispatchInputEvent({ inputType: 'insertText', data });
+        }
+    }
+    handleEnter(event) {
+        if (this.isTextArea || this.element.isContentEditable) {
+            this.handleInsert(event, '\n');
+        }
+    }
+    clampState({ value, selection }) {
+        const [from, to] = selection;
+        const max = this.maxLength;
+        return {
+            value: value.slice(0, max),
+            selection: [Math.min(from, max), Math.min(to, max)],
+        };
+    }
+}
+
+/**
+ * Clamps a value between two inclusive limits
+ *
+ * @param value
+ * @param min lower limit
+ * @param max upper limit
+ */
+function clamp(value, min, max) {
+    const clampedValue = Math.min(Number(max), Math.max(Number(min), Number(value)));
+    return (value instanceof Date ? new Date(clampedValue) : clampedValue);
+}
+
+function countDigits(str) {
+    return str.replaceAll(/\W/g, '').length;
+}
+
+function appendDate(initialDate, { day, month, year } = {}) {
+    const date = new Date(initialDate);
+    if (day) {
+        date.setDate(date.getDate() + day);
+    }
+    if (month) {
+        date.setMonth(date.getMonth() + month);
+    }
+    if (year) {
+        date.setFullYear(date.getFullYear() + year);
+    }
+    return date;
+}
+
+const getDateSegmentValueLength = (dateString) => {
+    var _a, _b, _c, _d, _e, _f;
+    return ({
+        day: (_b = (_a = dateString.match(/d/g)) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0,
+        month: (_d = (_c = dateString.match(/m/g)) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0,
+        year: (_f = (_e = dateString.match(/y/g)) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : 0,
+    });
+};
+
+function dateToSegments(date) {
+    return {
+        day: String(date.getDate()).padStart(2, '0'),
+        month: String(date.getMonth() + 1).padStart(2, '0'),
+        year: String(date.getFullYear()).padStart(4, '0'),
+        hours: String(date.getHours()).padStart(2, '0'),
+        minutes: String(date.getMinutes()).padStart(2, '0'),
+        seconds: String(date.getSeconds()).padStart(2, '0'),
+        milliseconds: String(date.getMilliseconds()).padStart(3, '0'),
+    };
+}
+
+const ALL_POSSIBLE_SEGMENTS = [
+    'day',
+    'month',
+    'year',
+];
+function getDateSegmentsOrder(template) {
+    return [...ALL_POSSIBLE_SEGMENTS].sort((a, b) => template.indexOf(a[0]) > template.indexOf(b[0]) ? 1 : -1);
+}
+
+function getFirstCompleteDate(dateString, dateModeTemplate) {
+    const digitsInDate = countDigits(dateModeTemplate);
+    const [completeDate = ''] = new RegExp(`(\\D*\\d){${digitsInDate}}`).exec(dateString) || [];
+    return completeDate;
+}
+
+function isDateStringComplete(dateString, dateModeTemplate) {
+    if (dateString.length < dateModeTemplate.length) {
+        return false;
+    }
+    return dateString.split(/\D/).every((segment) => !/^0+$/.exec(segment));
+}
+
+function parseDateRangeString(dateRange, dateModeTemplate, rangeSeparator) {
+    const digitsInDate = countDigits(dateModeTemplate);
+    return (dateRange
+        .replace(rangeSeparator, '')
+        .match(new RegExp(`(\\D*\\d[^\\d\\s]*){1,${digitsInDate}}`, 'g')) || []);
+}
+
+function parseDateString(dateString, fullMode) {
+    const cleanMode = fullMode.replaceAll(/[^dmy]/g, '');
+    const onlyDigitsDate = dateString.replaceAll(/\D+/g, '');
+    const dateSegments = {
+        day: onlyDigitsDate.slice(cleanMode.indexOf('d'), cleanMode.lastIndexOf('d') + 1),
+        month: onlyDigitsDate.slice(cleanMode.indexOf('m'), cleanMode.lastIndexOf('m') + 1),
+        year: onlyDigitsDate.slice(cleanMode.indexOf('y'), cleanMode.lastIndexOf('y') + 1),
+    };
+    return Object.fromEntries(Object.entries(dateSegments)
+        .filter(([_, value]) => Boolean(value))
+        .sort(([a], [b]) => fullMode.toLowerCase().indexOf(a.slice(0, 1)) >
+        fullMode.toLowerCase().indexOf(b.slice(0, 1))
+        ? 1
+        : -1));
+}
+
+function segmentsToDate(parsedDate, parsedTime) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const year = ((_a = parsedDate.year) === null || _a === void 0 ? void 0 : _a.length) === 2 ? `20${parsedDate.year}` : parsedDate.year;
+    const date = new Date(Number(year !== null && year !== void 0 ? year : '0'), Number((_b = parsedDate.month) !== null && _b !== void 0 ? _b : '1') - 1, Number((_c = parsedDate.day) !== null && _c !== void 0 ? _c : '1'), Number((_d = void 0 ) !== null && _d !== void 0 ? _d : '0'), Number((_e = void 0 ) !== null && _e !== void 0 ? _e : '0'), Number((_f = void 0 ) !== null && _f !== void 0 ? _f : '0'), Number((_g = void 0 ) !== null && _g !== void 0 ? _g : '0'));
+    // needed for years less than 1900
+    date.setFullYear(Number(year !== null && year !== void 0 ? year : '0'));
+    return date;
+}
+
+const DATE_TIME_SEPARATOR = ', ';
+
+function toDateString({ day, month, year, hours, minutes, seconds, milliseconds, }, { dateMode, dateTimeSeparator = DATE_TIME_SEPARATOR, timeMode, }) {
+    var _a;
+    const safeYear = ((_a = dateMode.match(/y/g)) === null || _a === void 0 ? void 0 : _a.length) === 2 ? year === null || year === void 0 ? void 0 : year.slice(-2) : year;
+    const fullMode = dateMode + (timeMode ? dateTimeSeparator + timeMode : '');
+    return fullMode
+        .replaceAll(/d+/g, day !== null && day !== void 0 ? day : '')
+        .replaceAll(/m+/g, month !== null && month !== void 0 ? month : '')
+        .replaceAll(/y+/g, safeYear !== null && safeYear !== void 0 ? safeYear : '')
+        .replaceAll(/H+/g, hours !== null && hours !== void 0 ? hours : '')
+        .replaceAll('MSS', milliseconds !== null && milliseconds !== void 0 ? milliseconds : '')
+        .replaceAll(/M+/g, minutes !== null && minutes !== void 0 ? minutes : '')
+        .replaceAll(/S+/g, seconds !== null && seconds !== void 0 ? seconds : '')
+        .replaceAll(/^\D+/g, '')
+        .replaceAll(/\D+$/g, '');
+}
+
+const DATE_SEGMENTS_MAX_VALUES = {
+    day: 31,
+    month: 12,
+    year: 9999,
+};
+
+const DEFAULT_MIN_DATE = new Date('0001-01-01T00:00');
+const DEFAULT_MAX_DATE = new Date('9999-12-31T23:59:59.999');
+
+/**
+ * {@link https://unicode-table.com/en/00A0/ Non-breaking space}.
+ */
+const CHAR_NO_BREAK_SPACE = '\u00A0';
+/**
+ * {@link https://unicode-table.com/en/2013/ EN dash}
+ * is used to indicate a range of numbers or a span of time.
+ * @example 2006–2022
+ */
+const CHAR_EN_DASH = '\u2013';
+/**
+ * {@link https://unicode-table.com/en/2014/ EM dash}
+ * is used to mark a break in a sentence.
+ * @example Taiga UI — powerful set of open source components for Angular
+ * ___
+ * Don't confuse with {@link CHAR_EN_DASH} or {@link CHAR_HYPHEN}!
+ */
+const CHAR_EM_DASH = '\u2014';
+/**
+ * {@link https://unicode-table.com/en/002D/ Hyphen (minus sign)}
+ * is used to combine words.
+ * @example well-behaved
+ * ___
+ * Don't confuse with {@link CHAR_EN_DASH} or {@link CHAR_EM_DASH}!
+ */
+const CHAR_HYPHEN = '\u002D';
+/**
+ * {@link https://unicode-table.com/en/2212/ Minus}
+ * is used as math operator symbol or before negative digits.
+ * ---
+ * Can be used as `&minus;`. Don't confuse with {@link CHAR_HYPHEN}
+ */
+const CHAR_MINUS = '\u2212';
+/**
+ * {@link https://symbl.cc/en/30FC/ Katakana-Hiragana Prolonged Sound Mark}
+ * is used as prolonged sounds in Japanese.
+ */
+const CHAR_JP_HYPHEN = '\u30FC';
+
+const TIME_FIXED_CHARACTERS = [':', '.'];
+
+function validateDateString({ dateString, dateModeTemplate, dateSegmentsSeparator, offset, selection: [from, to], }) {
+    var _a, _b;
+    const parsedDate = parseDateString(dateString, dateModeTemplate);
+    const dateSegments = Object.entries(parsedDate);
+    const segmentsOrder = getDateSegmentsOrder(dateModeTemplate);
+    const validatedDateSegments = {};
+    for (let i = 0; i < dateSegments.length; i++) {
+        const [segmentName, segmentValue] = dateSegments[i];
+        const validatedDate = toDateString(validatedDateSegments, {
+            dateMode: dateModeTemplate,
+        });
+        const maxSegmentValue = DATE_SEGMENTS_MAX_VALUES[segmentName];
+        const fantomSeparator = validatedDate.length && dateSegmentsSeparator.length;
+        const lastSegmentDigitIndex = offset +
+            validatedDate.length +
+            fantomSeparator +
+            getDateSegmentValueLength(dateModeTemplate)[segmentName];
+        const isLastSegmentDigitAdded = lastSegmentDigitIndex >= from && lastSegmentDigitIndex === to;
+        if (isLastSegmentDigitAdded && Number(segmentValue) > Number(maxSegmentValue)) {
+            const nextSegment = segmentsOrder[segmentsOrder.indexOf(segmentName) + 1];
+            if (!nextSegment || nextSegment === 'year') {
+                // 31.1|0.2010 => Type 9 => 31.1|0.2010
+                return { validatedDateString: '', updatedSelection: [from, to] }; // prevent changes
+            }
+            validatedDateSegments[segmentName] = `0${segmentValue.slice(0, -1)}`;
+            dateSegments[i + 1] = [
+                nextSegment,
+                segmentValue.slice(-1) + ((_b = (_a = dateSegments[i + 1]) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : '').slice(1),
+            ];
+            continue;
+        }
+        if (isLastSegmentDigitAdded && Number(segmentValue) < 1) {
+            // 31.0|1.2010 => Type 0 => 31.0|1.2010
+            return { validatedDateString: '', updatedSelection: [from, to] }; // prevent changes
+        }
+        validatedDateSegments[segmentName] = segmentValue;
+    }
+    const validatedDateString = toDateString(validatedDateSegments, {
+        dateMode: dateModeTemplate,
+    });
+    const addedDateSegmentSeparators = validatedDateString.length - dateString.length;
+    return {
+        validatedDateString,
+        updatedSelection: [
+            from + addedDateSegmentSeparators,
+            to + addedDateSegmentSeparators,
+        ],
+    };
+}
+
+function identity(x) {
+    return x;
+}
+
+/**
+ * Copy-pasted solution from lodash
+ * @see https://lodash.com/docs/4.17.15#escapeRegExp
+ */
+const reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
+const reHasRegExpChar = new RegExp(reRegExpChar.source);
+function escapeRegExp(str) {
+    return str && reHasRegExpChar.test(str)
+        ? str.replaceAll(reRegExpChar, String.raw `\$&`)
+        : str;
+}
+
+function isEmpty(entity) {
+    return !entity || (typeof entity === 'object' && Object.keys(entity).length === 0);
+}
+
+const ALL_ZEROES_RE = /^0+$/;
+function padWithZeroesUntilValid(segmentValue, paddedMaxValue, prefixedZeroesCount = 0) {
+    const paddedSegmentValue = segmentValue.padEnd(paddedMaxValue.length, '0');
+    if (Number(paddedSegmentValue) <= Number(paddedMaxValue)) {
+        return { validatedSegmentValue: segmentValue, prefixedZeroesCount };
+    }
+    if (paddedSegmentValue.endsWith('0')) {
+        // 00:|00 => Type 9 => 00:09|
+        return padWithZeroesUntilValid(`0${segmentValue.slice(0, paddedMaxValue.length - 1)}`, paddedMaxValue, prefixedZeroesCount + 1);
+    }
+    const valueWithoutLastChar = segmentValue.slice(0, paddedMaxValue.length - 1);
+    if (ALL_ZEROES_RE.exec(valueWithoutLastChar)) {
+        return { validatedSegmentValue: '', prefixedZeroesCount };
+    }
+    // |19:00 => Type 2 => 2|0:00
+    return padWithZeroesUntilValid(`${valueWithoutLastChar}0`, paddedMaxValue, prefixedZeroesCount);
+}
+
+/**
+ * Replace fullwidth numbers with half width number
+ * @param fullWidthNumber full width number
+ * @returns processed half width number
+ */
+function toHalfWidthNumber(fullWidthNumber) {
+    return fullWidthNumber.replaceAll(/[０-９]/g, (s) => String.fromCharCode(s.charCodeAt(0) - 0xfee0));
+}
+
+function createDateSegmentsZeroPaddingPostprocessor({ dateModeTemplate, dateSegmentSeparator, splitFn, uniteFn, }) {
+    return ({ value, selection }) => {
+        var _a;
+        const [from, to] = selection;
+        const { dateStrings, restPart = '' } = splitFn(value);
+        const validatedDateStrings = [];
+        let caretShift = 0;
+        dateStrings.forEach((dateString) => {
+            const parsedDate = parseDateString(dateString, dateModeTemplate);
+            const dateSegments = Object.entries(parsedDate);
+            const validatedDateSegments = dateSegments.reduce((acc, [segmentName, segmentValue]) => {
+                const { validatedSegmentValue, prefixedZeroesCount } = padWithZeroesUntilValid(segmentValue, `${DATE_SEGMENTS_MAX_VALUES[segmentName]}`);
+                caretShift += prefixedZeroesCount;
+                return Object.assign(Object.assign({}, acc), { [segmentName]: validatedSegmentValue });
+            }, {});
+            validatedDateStrings.push(toDateString(validatedDateSegments, { dateMode: dateModeTemplate }));
+        });
+        const validatedValue = uniteFn(validatedDateStrings, value) +
+            (((_a = dateStrings[dateStrings.length - 1]) === null || _a === void 0 ? void 0 : _a.endsWith(dateSegmentSeparator))
+                ? dateSegmentSeparator
+                : '') +
+            restPart;
+        if (caretShift &&
+            validatedValue.slice(to + caretShift, to + caretShift + dateSegmentSeparator.length) === dateSegmentSeparator) {
+            /**
+             * If `caretShift` > 0, it means that time segment was padded with zero.
+             * It is only possible if any character insertion happens.
+             * If caret is before `dateSegmentSeparator` => it should be moved after `dateSegmentSeparator`.
+             */
+            caretShift += dateSegmentSeparator.length;
+        }
+        return {
+            selection: [from + caretShift, to + caretShift],
+            value: validatedValue,
+        };
+    };
+}
+
+/**
+ * It replaces pseudo range separators with valid one.
+ * @example '01.01.2000_11.11.2000' -> '01.01.2000 - 01.01.2000'
+ * @example '01.01.2000_23:59' -> '01.01.2000, 23:59'
+ */
+function createFirstDateEndSeparatorPreprocessor({ dateModeTemplate, firstDateEndSeparator, dateSegmentSeparator, pseudoFirstDateEndSeparators, }) {
+    return ({ elementState, data }) => {
+        const { value, selection } = elementState;
+        const [from, to] = selection;
+        const firstCompleteDate = getFirstCompleteDate(value, dateModeTemplate);
+        const pseudoSeparators = pseudoFirstDateEndSeparators.filter((x) => !firstDateEndSeparator.includes(x) && x !== dateSegmentSeparator);
+        const pseudoSeparatorsRE = new RegExp(`[${pseudoSeparators.join('')}]`, 'gi');
+        const newValue = firstCompleteDate && value.length > firstCompleteDate.length
+            ? firstCompleteDate +
+                value
+                    .slice(firstCompleteDate.length)
+                    .replace(/^[\D\s]*/, firstDateEndSeparator)
+            : value;
+        const caretShift = newValue.length - value.length;
+        return {
+            elementState: {
+                selection: [from + caretShift, to + caretShift],
+                value: newValue,
+            },
+            data: data.replace(pseudoSeparatorsRE, firstDateEndSeparator),
+        };
+    };
+}
+
+/**
+ * Convert full width numbers like １, ２ to half width numbers 1, 2
+ */
+function createFullWidthToHalfWidthPreprocessor() {
+    return ({ elementState, data }) => {
+        const { value, selection } = elementState;
+        return {
+            elementState: {
+                selection,
+                value: toHalfWidthNumber(value),
+            },
+            data: toHalfWidthNumber(data),
+        };
+    };
+}
+
+new RegExp(`[${TIME_FIXED_CHARACTERS.map(escapeRegExp).join('')}]$`);
+
+function raiseSegmentValueToMin(segments, fullMode) {
+    const segmentsLength = getDateSegmentValueLength(fullMode);
+    return Object.fromEntries(Object.entries(segments).map(([key, value]) => {
+        const segmentLength = segmentsLength[key];
+        return [
+            key,
+            value.length === segmentLength && /^0+$/.exec(value)
+                ? '1'.padStart(segmentLength, '0')
+                : value,
+        ];
+    }));
+}
+
+const LEAP_YEAR = '1972';
+function createMinMaxDatePostprocessor({ dateModeTemplate, min = DEFAULT_MIN_DATE, max = DEFAULT_MAX_DATE, rangeSeparator = '', dateSegmentSeparator = '.', }) {
+    return ({ value, selection }) => {
+        const endsWithRangeSeparator = rangeSeparator && value.endsWith(rangeSeparator);
+        const dateStrings = parseDateRangeString(value, dateModeTemplate, rangeSeparator);
+        let validatedValue = '';
+        for (const dateString of dateStrings) {
+            validatedValue += validatedValue ? rangeSeparator : '';
+            const parsedDate = parseDateString(dateString, dateModeTemplate);
+            if (!isDateStringComplete(dateString, dateModeTemplate)) {
+                const fixedDate = raiseSegmentValueToMin(parsedDate, dateModeTemplate);
+                const fixedValue = toDateString(fixedDate, { dateMode: dateModeTemplate });
+                const tail = dateString.endsWith(dateSegmentSeparator)
+                    ? dateSegmentSeparator
+                    : '';
+                validatedValue += fixedValue + tail;
+                continue;
+            }
+            const date = segmentsToDate(Object.assign({ year: LEAP_YEAR }, parsedDate));
+            const clampedDate = clamp(date, min, max);
+            validatedValue += toDateString(dateToSegments(clampedDate), {
+                dateMode: dateModeTemplate,
+            });
+        }
+        return {
+            selection,
+            value: validatedValue + (endsWithRangeSeparator ? rangeSeparator : ''),
+        };
+    };
+}
+
+function normalizeDatePreprocessor({ dateModeTemplate, dateSegmentsSeparator, rangeSeparator = '', dateTimeSeparator = DATE_TIME_SEPARATOR, }) {
+    return ({ elementState, data }) => {
+        const templateSegments = dateModeTemplate.split(dateSegmentsSeparator);
+        const includesTime = data.includes(dateTimeSeparator);
+        const dateSegments = data
+            .slice(0, includesTime ? data.indexOf(dateTimeSeparator) : Infinity)
+            .split(/\D/)
+            .filter(Boolean);
+        if (!dateSegments.length || dateSegments.length % templateSegments.length !== 0) {
+            return { elementState, data };
+        }
+        const dates = dateSegments.reduce((dates, segment, index) => {
+            var _a;
+            const template = (_a = templateSegments[index % templateSegments.length]) !== null && _a !== void 0 ? _a : '';
+            const dateIndex = Math.trunc(index / templateSegments.length);
+            const isLastDateSegment = index % templateSegments.length === templateSegments.length - 1;
+            if (!dates[dateIndex]) {
+                dates[dateIndex] = '';
+            }
+            dates[dateIndex] += isLastDateSegment
+                ? segment
+                : `${segment.padStart(template.length, '0')}${dateSegmentsSeparator}`;
+            return dates;
+        }, []);
+        return {
+            elementState,
+            data: includesTime
+                ? `${dates[0]}${data.slice(data.indexOf(dateTimeSeparator))}`
+                : dates.join(rangeSeparator),
+        };
+    };
+}
+
+function createValidDatePreprocessor({ dateModeTemplate, dateSegmentsSeparator, rangeSeparator = '', }) {
+    return ({ elementState, data }) => {
+        const { value, selection } = elementState;
+        if (data === dateSegmentsSeparator) {
+            return {
+                elementState,
+                data: selection[0] === value.length ? data : '',
+            };
+        }
+        if (!data.replaceAll(/\D/g, '')) {
+            return { elementState, data };
+        }
+        const newCharacters = data.replaceAll(new RegExp(`[^\\d${escapeRegExp(dateSegmentsSeparator)}${rangeSeparator}]`, 'g'), '');
+        const [from, rawTo] = selection;
+        let to = rawTo + data.length;
+        const newPossibleValue = value.slice(0, from) + newCharacters + value.slice(to);
+        const dateStrings = parseDateRangeString(newPossibleValue, dateModeTemplate, rangeSeparator);
+        let validatedValue = '';
+        const hasRangeSeparator = Boolean(rangeSeparator) && newPossibleValue.includes(rangeSeparator);
+        for (const dateString of dateStrings) {
+            const { validatedDateString, updatedSelection } = validateDateString({
+                dateString,
+                dateModeTemplate,
+                dateSegmentsSeparator,
+                offset: validatedValue.length,
+                selection: [from, to],
+            });
+            if (dateString && !validatedDateString) {
+                return { elementState, data: '' }; // prevent changes
+            }
+            to = updatedSelection[1];
+            validatedValue +=
+                hasRangeSeparator && !validatedValue
+                    ? validatedDateString + rangeSeparator
+                    : validatedDateString;
+        }
+        const newData = validatedValue.slice(from, to);
+        return {
+            elementState: {
+                selection,
+                value: validatedValue.slice(0, from) +
+                    newData
+                        .split(dateSegmentsSeparator)
+                        .map((segment) => '0'.repeat(segment.length))
+                        .join(dateSegmentsSeparator) +
+                    validatedValue.slice(to),
+            },
+            data: newData,
+        };
+    };
+}
+
+function maskitoEventHandler(name, handler, eventListenerOptions) {
+    return (element, maskitoOptions) => {
+        const listener = () => handler(element, maskitoOptions);
+        element.addEventListener(name, listener, eventListenerOptions);
+        return () => element.removeEventListener(name, listener, eventListenerOptions);
+    };
+}
+
+function maskitoSelectionChangeHandler(handler) {
+    return (element, options) => {
+        const document = element.ownerDocument;
+        let isPointerDown = 0;
+        const onPointerDown = () => isPointerDown++;
+        const onPointerUp = () => {
+            isPointerDown = Math.max(--isPointerDown, 0);
+        };
+        const listener = () => {
+            if (!element.matches(':focus')) {
+                return;
+            }
+            if (isPointerDown) {
+                return document.addEventListener('mouseup', listener, {
+                    once: true,
+                    passive: true,
+                });
+            }
+            handler(element, options);
+        };
+        document.addEventListener('selectionchange', listener, { passive: true });
+        // Safari does not fire `selectionchange` on focus after programmatic update of textfield value
+        element.addEventListener('focus', listener, { passive: true });
+        element.addEventListener('mousedown', onPointerDown, { passive: true });
+        document.addEventListener('mouseup', onPointerUp, { passive: true });
+        return () => {
+            document.removeEventListener('selectionchange', listener);
+            element.removeEventListener('focus', listener);
+            element.removeEventListener('mousedown', onPointerDown);
+            document.removeEventListener('mouseup', onPointerUp);
+        };
+    };
+}
+
+function maskitoCaretGuard(guard) {
+    return maskitoSelectionChangeHandler((element) => {
+        var _a, _b;
+        const start = (_a = element.selectionStart) !== null && _a !== void 0 ? _a : 0;
+        const end = (_b = element.selectionEnd) !== null && _b !== void 0 ? _b : 0;
+        const [fromLimit, toLimit] = guard(element.value, [start, end]);
+        if (fromLimit > start || toLimit < end) {
+            element.setSelectionRange(clamp(start, fromLimit, toLimit), clamp(end, fromLimit, toLimit));
+        }
+    });
+}
+
+function maskitoWithPlaceholder(placeholder, focusedOnly = false) {
+    let lastClearValue = '';
+    let action = 'validation';
+    const removePlaceholder = (value) => {
+        for (let i = value.length - 1; i >= lastClearValue.length; i--) {
+            if (value[i] !== placeholder[i]) {
+                return value.slice(0, i + 1);
+            }
+        }
+        return value.slice(0, lastClearValue.length);
+    };
+    const plugins = [maskitoCaretGuard((value) => [0, removePlaceholder(value).length])];
+    let focused = false;
+    if (focusedOnly) {
+        const focus = maskitoEventHandler('focus', (element) => {
+            focused = true;
+            maskitoUpdateElement(element, element.value + placeholder.slice(element.value.length));
+        }, { capture: true });
+        const blur = maskitoEventHandler('blur', (element) => {
+            focused = false;
+            maskitoUpdateElement(element, removePlaceholder(element.value));
+        }, { capture: true });
+        plugins.push(focus, blur);
+    }
+    return {
+        plugins,
+        removePlaceholder,
+        preprocessors: [
+            ({ elementState, data }, actionType) => {
+                action = actionType;
+                const { value, selection } = elementState;
+                return {
+                    elementState: {
+                        selection,
+                        value: removePlaceholder(value),
+                    },
+                    data,
+                };
+            },
+        ],
+        postprocessors: [
+            ({ value, selection }, initialElementState) => {
+                lastClearValue = value;
+                const justPlaceholderRemoval = value +
+                    placeholder.slice(value.length, initialElementState.value.length) ===
+                    initialElementState.value;
+                if (action === 'validation' && justPlaceholderRemoval) {
+                    /**
+                     * If `value` still equals to `initialElementState.value`,
+                     * then it means that value is patched programmatically (from Maskito's plugin or externally).
+                     * In this case, we don't want to mutate value and automatically add/remove placeholder.
+                     * ___
+                     * For example, developer wants to remove manually placeholder (+ do something else with value) on blur.
+                     * Without this condition, placeholder will be unexpectedly added again.
+                     */
+                    return { selection, value: initialElementState.value };
+                }
+                const newValue = focused || !focusedOnly
+                    ? value + placeholder.slice(value.length)
+                    : value;
+                if (newValue === initialElementState.value &&
+                    action === 'deleteBackward') {
+                    const [caretIndex] = initialElementState.selection;
+                    return {
+                        value: newValue,
+                        selection: [caretIndex, caretIndex],
+                    };
+                }
+                return { value: newValue, selection };
+            },
+        ],
+    };
+}
+
+function createZeroPlaceholdersPreprocessor(postfix = '') {
+    const isLastChar = (value, [_, to]) => to >= value.length - postfix.length;
+    return ({ elementState }, actionType) => {
+        const { value, selection } = elementState;
+        if (!value || isLastChar(value, selection)) {
+            return { elementState };
+        }
+        const [from, to] = selection;
+        const zeroes = value.slice(from, to).replaceAll(/\d/g, '0');
+        const newValue = value.slice(0, from) + zeroes + value.slice(to);
+        if (!zeroes.replaceAll(/\D/g, '')) {
+            return { elementState };
+        }
+        if (actionType === 'validation' || (actionType === 'insert' && from === to)) {
+            return {
+                elementState: { selection, value: newValue },
+            };
+        }
+        return {
+            elementState: {
+                selection: actionType === 'deleteBackward' || actionType === 'insert'
+                    ? [from, from]
+                    : [to, to],
+                value: newValue,
+            },
+        };
+    };
+}
+
+function maskitoDateOptionsGenerator({ mode, separator = '.', max, min, }) {
+    const dateModeTemplate = mode.split('/').join(separator);
+    return Object.assign(Object.assign({}, MASKITO_DEFAULT_OPTIONS), { mask: Array.from(dateModeTemplate).map((char) => separator.includes(char) ? char : /\d/), overwriteMode: 'replace', preprocessors: [
+            createFullWidthToHalfWidthPreprocessor(),
+            createZeroPlaceholdersPreprocessor(),
+            normalizeDatePreprocessor({
+                dateModeTemplate,
+                dateSegmentsSeparator: separator,
+            }),
+            createValidDatePreprocessor({
+                dateModeTemplate,
+                dateSegmentsSeparator: separator,
+            }),
+        ], postprocessors: [
+            createDateSegmentsZeroPaddingPostprocessor({
+                dateModeTemplate,
+                dateSegmentSeparator: separator,
+                splitFn: (value) => ({ dateStrings: [value] }),
+                uniteFn: ([dateString = '']) => dateString,
+            }),
+            createMinMaxDatePostprocessor({
+                min,
+                max,
+                dateModeTemplate,
+                dateSegmentSeparator: separator,
+            }),
+        ] });
+}
+
+function maskitoParseDate(value, { mode, min = DEFAULT_MIN_DATE, max = DEFAULT_MAX_DATE }) {
+    if (value.length < mode.length) {
+        return null;
+    }
+    const dateSegments = parseDateString(value, mode);
+    const parsedDate = segmentsToDate(dateSegments);
+    return clamp(parsedDate, min, max);
+}
+
+const POSSIBLE_DATE_RANGE_SEPARATOR = [
+    CHAR_HYPHEN,
+    CHAR_EN_DASH,
+    CHAR_EM_DASH,
+    CHAR_MINUS,
+    CHAR_JP_HYPHEN,
+];
+
+function createMinMaxRangeLengthPostprocessor({ dateModeTemplate, rangeSeparator, minLength, maxLength, max = DEFAULT_MAX_DATE, }) {
+    if (isEmpty(minLength) && isEmpty(maxLength)) {
+        return identity;
+    }
+    return ({ value, selection }) => {
+        const dateStrings = parseDateRangeString(value, dateModeTemplate, rangeSeparator);
+        if (dateStrings.length !== 2 ||
+            dateStrings.some((date) => !isDateStringComplete(date, dateModeTemplate))) {
+            return { value, selection };
+        }
+        const [fromDate, toDate] = dateStrings.map((dateString) => segmentsToDate(parseDateString(dateString, dateModeTemplate)));
+        if (!fromDate || !toDate) {
+            return { value, selection };
+        }
+        const minDistantToDate = appendDate(fromDate, Object.assign(Object.assign({}, minLength), { 
+            // 06.02.2023 - 07.02.2023 => {minLength: {day: 3}} => 06.02.2023 - 08.02.2023
+            // "from"-day is included in the range
+            day: (minLength === null || minLength === void 0 ? void 0 : minLength.day) && minLength.day - 1 }));
+        const maxDistantToDate = !isEmpty(maxLength)
+            ? appendDate(fromDate, Object.assign(Object.assign({}, maxLength), { day: (maxLength === null || maxLength === void 0 ? void 0 : maxLength.day) && maxLength.day - 1 }))
+            : max;
+        const minLengthClampedToDate = clamp(toDate, minDistantToDate, max);
+        const minMaxLengthClampedToDate = minLengthClampedToDate > maxDistantToDate
+            ? maxDistantToDate
+            : minLengthClampedToDate;
+        return {
+            selection,
+            value: dateStrings[0] +
+                rangeSeparator +
+                toDateString(dateToSegments(minMaxLengthClampedToDate), {
+                    dateMode: dateModeTemplate,
+                }),
+        };
+    };
+}
+
+function createSwapDatesPostprocessor({ dateModeTemplate, rangeSeparator, }) {
+    return ({ value, selection }) => {
+        const dateStrings = parseDateRangeString(value, dateModeTemplate, rangeSeparator);
+        const isDateRangeComplete = dateStrings.length === 2 &&
+            dateStrings.every((date) => isDateStringComplete(date, dateModeTemplate));
+        const [from, to] = selection;
+        const caretAtTheEnd = from >= value.length;
+        const allValueSelected = from === 0 && to >= value.length; // dropping text inside with a pointer
+        if (!(caretAtTheEnd || allValueSelected) || !isDateRangeComplete) {
+            return { value, selection };
+        }
+        const [fromDate, toDate] = dateStrings.map((dateString) => segmentsToDate(parseDateString(dateString, dateModeTemplate)));
+        return {
+            selection,
+            value: fromDate && toDate && fromDate > toDate
+                ? dateStrings.reverse().join(rangeSeparator)
+                : value,
+        };
+    };
+}
+
+function maskitoDateRangeOptionsGenerator({ mode, min, max, minLength, maxLength, dateSeparator = '.', rangeSeparator = `${CHAR_NO_BREAK_SPACE}${CHAR_EN_DASH}${CHAR_NO_BREAK_SPACE}`, }) {
+    const dateModeTemplate = mode.split('/').join(dateSeparator);
+    const dateMask = Array.from(dateModeTemplate).map((char) => dateSeparator.includes(char) ? char : /\d/);
+    return Object.assign(Object.assign({}, MASKITO_DEFAULT_OPTIONS), { mask: [...dateMask, ...Array.from(rangeSeparator), ...dateMask], overwriteMode: 'replace', preprocessors: [
+            createFullWidthToHalfWidthPreprocessor(),
+            createFirstDateEndSeparatorPreprocessor({
+                dateModeTemplate,
+                dateSegmentSeparator: dateSeparator,
+                firstDateEndSeparator: rangeSeparator,
+                pseudoFirstDateEndSeparators: POSSIBLE_DATE_RANGE_SEPARATOR,
+            }),
+            createZeroPlaceholdersPreprocessor(),
+            normalizeDatePreprocessor({
+                dateModeTemplate,
+                rangeSeparator,
+                dateSegmentsSeparator: dateSeparator,
+            }),
+            createValidDatePreprocessor({
+                dateModeTemplate,
+                rangeSeparator,
+                dateSegmentsSeparator: dateSeparator,
+            }),
+        ], postprocessors: [
+            createDateSegmentsZeroPaddingPostprocessor({
+                dateModeTemplate,
+                dateSegmentSeparator: dateSeparator,
+                splitFn: (value) => ({
+                    dateStrings: parseDateRangeString(value, dateModeTemplate, rangeSeparator),
+                }),
+                uniteFn: (validatedDateStrings, initialValue) => validatedDateStrings.reduce((acc, dateString, dateIndex) => acc +
+                    dateString +
+                    (!dateIndex && initialValue.includes(rangeSeparator)
+                        ? rangeSeparator
+                        : ''), ''),
+            }),
+            createMinMaxDatePostprocessor({
+                min,
+                max,
+                dateModeTemplate,
+                rangeSeparator,
+                dateSegmentSeparator: dateSeparator,
+            }),
+            createMinMaxRangeLengthPostprocessor({
+                dateModeTemplate,
+                minLength,
+                maxLength,
+                max,
+                rangeSeparator,
+            }),
+            createSwapDatesPostprocessor({
+                dateModeTemplate,
+                rangeSeparator,
+            }),
+        ] });
+}
+
+/**
+ * React adds `_valueTracker` property to every textfield elements for its internal logic with controlled inputs.
+ * Also, React monkey-patches `value`-setter of the native textfield elements to update state inside its `_valueTracker`.
+ * @see https://github.com/facebook/react/blob/ee76351917106c6146745432a52e9a54a41ee181/packages/react-dom-bindings/src/client/inputValueTracking.js#L12-L19
+ *
+ * React depends on `_valueTracker` to know if the value was changed to decide:
+ * - should it revert state for controlled input (if its state handler does not update value)
+ * - should it dispatch its synthetic (not native!) `change` event
+ *
+ * When Maskito patches textfield with a valid value (using setter of `value` property),
+ * it also updates `_valueTracker` state and React mistakenly decides that nothing has happened.
+ * React should update `_valueTracker` state by itself!
+ * ___
+ * @see https://github.com/facebook/react/blob/ee76351917106c6146745432a52e9a54a41ee181/packages/react-dom-bindings/src/client/inputValueTracking.js#L173-L177
+ */
+function adaptReactControlledElement(element) {
+  var _a;
+  const valueSetter = (_a = Object.getOwnPropertyDescriptor(getPrototype(element), 'value')) === null || _a === void 0 ? void 0 : _a.set;
+  if (!valueSetter) {
+    return element;
+  }
+  const adapter = {
+    set value(value) {
+      /**
+       * Mimics exactly what happens when a browser silently changes the value property.
+       * Bypass the React monkey-patching.
+       */
+      valueSetter.call(element, value);
+    }
+  };
+  return new Proxy(element, {
+    get(target, prop) {
+      const nativeProperty = target[prop];
+      return typeof nativeProperty === 'function' ? nativeProperty.bind(target) : nativeProperty;
+    },
+    // eslint-disable-next-line @typescript-eslint/max-params
+    set(target, prop, val, receiver) {
+      return Reflect.set(prop in adapter ? adapter : target, prop, val, receiver);
+    }
+  });
+}
+function getPrototype(element) {
+  var _a, _b;
+  switch (element.nodeName) {
+    case 'INPUT':
+      return (_a = globalThis.HTMLInputElement) === null || _a === void 0 ? void 0 : _a.prototype;
+    case 'TEXTAREA':
+      return (_b = globalThis.HTMLTextAreaElement) === null || _b === void 0 ? void 0 : _b.prototype;
+    default:
+      return null;
+  }
+}
+
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+function isThenable(x) {
+  return x && typeof x === 'object' && 'then' in x;
+}
+/**
+ * Hook for convenient use of Maskito in React
+ * @description For controlled inputs use `onInput` event
+ * @param options options used for creating Maskito
+ * @param elementPredicate function that can help find nested Input or TextArea
+ * @returns ref callback to pass it in React Element
+ * @example
+ * // To avoid unnecessary hook runs with Maskito recreation pass named variables
+ * // good example ✅
+ * useMaskito({ options: maskitoOptions, elementPredicate: maskitoPredicate })
+ *
+ * // bad example ❌
+ * useMaskito({ options: { mask: /^.*$/ }, elementPredicate: () => e.querySelector('input') })
+ */
+const useMaskito = ({
+  options = null,
+  elementPredicate = MASKITO_DEFAULT_ELEMENT_PREDICATE
+} = {}) => {
+  const [hostElement, setHostElement] = useState(null);
+  const [element, setElement] = useState(null);
+  const onRefChange = useCallback(node => {
+    setHostElement(node);
+  }, []);
+  const latestPredicateRef = useRef(elementPredicate);
+  const latestOptionsRef = useRef(options);
+  latestPredicateRef.current = elementPredicate;
+  latestOptionsRef.current = options;
+  useIsomorphicLayoutEffect(() => {
+    if (!hostElement) {
+      return;
+    }
+    const elementOrPromise = elementPredicate(hostElement);
+    if (isThenable(elementOrPromise)) {
+      void elementOrPromise.then(el => {
+        if (latestPredicateRef.current === elementPredicate && latestOptionsRef.current === options) {
+          setElement(el);
+        }
+      });
+    } else {
+      setElement(elementOrPromise);
+    }
+  }, [hostElement, elementPredicate, latestPredicateRef, options, latestOptionsRef]);
+  useIsomorphicLayoutEffect(() => {
+    if (!element || !options) {
+      return;
+    }
+    const maskedElement = new Maskito(adaptReactControlledElement(element), options);
+    return () => {
+      maskedElement.destroy();
+      setElement(null);
+    };
+  }, [options, element]);
+  return onRefChange;
+};
+
+function usePrevious(value) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+
+function usePopoverSupport() {
+  const [popoverSupported, setPopoverSupported] = useState(
+    void 0
+  );
+  useEffect(() => {
+    setPopoverSupported(supportsPopover());
+  }, []);
+  return popoverSupported;
+}
+
+const makeZeroShortcutPreprocessor = (templateString, separator) => {
+  const zeroShortcutPreprocessor = ({ elementState, data }, actionType) => {
+    if (actionType === "insert" && // the user is inserting a character
+    data === separator && // the user typed the separator character
+    elementState.selection[0] === elementState.selection[1]) {
+      const selectionIndex = elementState.selection[0];
+      const separatorPositions = templateString.split("").map((char, index) => char === separator ? index : null).filter((position) => position !== null).filter((position) => position > selectionIndex);
+      const noRemainingSegments = !separatorPositions.length;
+      const nothingEnteredYet = !elementState.value.length;
+      const previousCharacterIsNotADigit = !/^\d$/.test(
+        elementState.value.slice(-1)
+      );
+      const currentCharacterIsSeparator = templateString[selectionIndex] === separator;
+      if (noRemainingSegments || nothingEnteredYet || previousCharacterIsNotADigit || currentCharacterIsSeparator) {
+        return { elementState, data };
+      }
+      const firstIndexOfSegment = Math.max(
+        elementState.value.lastIndexOf(separator) + 1,
+        elementState.value.lastIndexOf(" ") + 1,
+        0
+      );
+      const lastIndexOfSegment = separatorPositions[0];
+      const digitsCurrentlyInSegment = elementState.value.slice(firstIndexOfSegment);
+      const targetNumberOfDigitsInSegment = templateString.slice(
+        firstIndexOfSegment,
+        lastIndexOfSegment
+      ).length;
+      const newSegment = digitsCurrentlyInSegment.padStart(
+        targetNumberOfDigitsInSegment,
+        "0"
+      );
+      const newValue = `${elementState.value.slice(0, firstIndexOfSegment)}${newSegment}`;
+      return {
+        elementState: {
+          value: newValue + data,
+          selection: [newValue.length, newValue.length]
+        },
+        data
+      };
+    }
+    return { elementState, data };
+  };
+  return zeroShortcutPreprocessor;
+};
+
+const datePlaceholderMask$1 = ({
+  mode,
+  separator = "/",
+  placeholder
+}) => {
+  const dateOptions = maskitoDateOptionsGenerator({
+    mode,
+    separator
+  });
+  const { plugins, removePlaceholder, ...placeholderOptions } = maskitoWithPlaceholder(placeholder);
+  const datePlaceholderMask2 = {
+    ...dateOptions,
+    plugins: plugins.concat(dateOptions.plugins || []),
+    preprocessors: [
+      ...placeholderOptions.preprocessors,
+      ...dateOptions.preprocessors,
+      makeZeroShortcutPreprocessor(mode, separator)
+    ],
+    postprocessors: [
+      ...dateOptions.postprocessors,
+      ...placeholderOptions.postprocessors
+    ]
+  };
+  return { options: datePlaceholderMask2, removePlaceholder };
+};
+
+const DateModeToFormatMap = {
+  "mm/dd/yyyy": "MM/dd/yyyy",
+  "dd/mm/yyyy": "dd/MM/yyyy",
+  "yyyy/mm/dd": "yyyy/MM/dd"
+};
+const DateModeToPlaceholderMap = {
+  "dd/mm/yyyy": "__/__/____",
+  "mm/dd/yyyy": "__/__/____",
+  "yyyy/mm/dd": "____/__/__"
+};
+
+const MaskedDateInput = forwardRef(
+  ({
+    onChange,
+    mode = "mm/dd/yyyy",
+    lastValidDate,
+    disableHint = false,
+    ...props
+  }, ref) => {
+    const placeholder = DateModeToPlaceholderMap[mode];
+    const [inputValue, setInputValue] = useState(placeholder);
+    const { options, removePlaceholder } = datePlaceholderMask$1({
+      mode,
+      placeholder
+    });
+    const maskedInputRef = useMaskito({ options });
+    const inputRef = useRef(null);
+    const combinedRef = useMergeRefs$1([maskedInputRef, inputRef, ref]);
+    const previousDateRef = useRef(null);
+    const previousMode = usePrevious(mode);
+    useEffect(() => {
+      if (mode !== previousMode) {
+        setInputValue(
+          (oldInputValue) => swapMode$1(oldInputValue, previousMode ?? mode, mode)
+        );
+      }
+    }, [mode, previousMode]);
+    useEffect(() => {
+      if (lastValidDate === void 0) return;
+      if (lastValidDate === previousDateRef.current) return;
+      if (!lastValidDate?.equals(previousDateRef.current ?? DateTime.now())) {
+        setInputValue(
+          lastValidDate?.toFormat(DateModeToFormatMap[mode]) ?? placeholder
+        );
+        previousDateRef.current = lastValidDate;
+      }
+    }, [lastValidDate, mode, placeholder]);
+    const currentParsedData = useMemo(() => {
+      return parseInputValue(inputValue, mode, removePlaceholder);
+    }, [inputValue, mode, removePlaceholder]);
+    const handleChange = (event) => {
+      setInputValue(event.target.value);
+      const { date, isInputValid, isInputEmpty } = parseInputValue(
+        event.target.value,
+        mode,
+        removePlaceholder
+      );
+      onChange?.({
+        event,
+        date: date ?? lastValidDate ?? null,
+        isInputValid,
+        isInputEmpty
+      });
+    };
+    useImperativeHandle(ref, () => {
+      const input = inputRef.current;
+      if (!input) return null;
+      return Object.assign(input, {
+        setDate: (date) => {
+          setInputValue(
+            date?.toFormat(DateModeToFormatMap[mode]) ?? placeholder
+          );
+        }
+      });
+    }, [mode, placeholder]);
+    return /* @__PURE__ */ jsx(
+      TextField,
+      {
+        ref: combinedRef,
+        "data-date": lastValidDate?.toISODate() ?? "",
+        "data-input-valid": currentParsedData.isInputValid,
+        "data-input-empty": currentParsedData.isInputEmpty,
+        ...props,
+        showCounter: false,
+        value: inputValue,
+        onChange: handleChange,
+        prefix: /* @__PURE__ */ jsx(Icon, { svg: SvgEvent }),
+        hint: disableHint ? void 0 : `format: ${mode}`
+      }
+    );
+  }
+);
+MaskedDateInput.displayName = "MaskedDateInput";
+function parseInputValue(value, mode, removePlaceholder) {
+  const valueMinusPlaceholder = removePlaceholder(value);
+  const jsDate = maskitoParseDate(valueMinusPlaceholder, { mode });
+  const luxonDate = jsDate ? DateTime.fromJSDate(jsDate, { zone: "utc" }) : null;
+  return {
+    date: luxonDate,
+    isInputValid: !!luxonDate,
+    isInputEmpty: valueMinusPlaceholder === ""
+  };
+}
+function swapMode$1(inputString, previousMode, mode) {
+  const { day, month, year } = divideSegments(inputString, previousMode);
+  return orderSegmentsByMode(day, month, year, mode);
+}
+function divideSegments(value, mode) {
+  const [segment1, segment2, segment3] = value.split("/");
+  if (mode === "dd/mm/yyyy") {
+    return { day: segment1, month: segment2, year: segment3 };
+  } else if (mode === "mm/dd/yyyy") {
+    return { day: segment2, month: segment1, year: segment3 };
+  } else if (mode === "yyyy/mm/dd") {
+    return { day: segment3, month: segment2, year: segment1 };
+  }
+  return { day: "__", month: "__", year: "____" };
+}
+function orderSegmentsByMode(day, month, year, mode) {
+  if (mode === "dd/mm/yyyy") {
+    return `${day}/${month}/${year}`;
+  } else if (mode === "mm/dd/yyyy") {
+    return `${month}/${day}/${year}`;
+  } else if (mode === "yyyy/mm/dd") {
+    return `${year}/${month}/${day}`;
+  } else {
+    return "";
+  }
+}
+
+const useDateFieldOrchestration = ({
+  inputRef,
+  calendarDefaultOpen,
+  popoverContentRef,
+  disableCalendar = false
+}) => {
+  const documentRef = useRef(document.body);
+  const [calendarOpen, setCalendarOpen] = useState(calendarDefaultOpen);
+  const { focusables } = useKeyboardFocusables(documentRef, {
+    observeChange: true
+  });
+  const { focusables: popoverFocusables } = useKeyboardFocusables(
+    popoverContentRef,
+    {
+      observeChange: true
+    }
+  );
+  const pageFocusables = focusables?.filter(
+    (item) => !popoverFocusables?.includes(item)
+  );
+  const handleCalendarKeyDown = (event) => {
+    if (event.key === "Escape") {
+      inputRef.current?.focus();
+    }
+  };
+  const focusToCalendar = () => {
+    if (popoverContentRef.current) {
+      const currentFocusable = popoverContentRef.current.querySelectorAll('[tabindex = "0"]')[0];
+      if (currentFocusable) {
+        currentFocusable.focus();
+      }
+    }
+  };
+  const handleInputKeyDown = (ev) => {
+    if (disableCalendar) {
+      return;
+    }
+    let currentFocusIndex = 0;
+    switch (ev.key) {
+      case "Escape":
+        setCalendarOpen(false);
+        break;
+      case "Tab":
+        if (!calendarOpen || !pageFocusables?.length) {
+          break;
+        }
+        ev.preventDefault();
+        currentFocusIndex = pageFocusables.indexOf(inputRef.current) || 0;
+        setCalendarOpen(false);
+        if (ev.shiftKey) {
+          if (currentFocusIndex === 0) {
+            requestAnimationFrame(
+              () => pageFocusables[pageFocusables.length - 1].focus()
+            );
+          } else {
+            requestAnimationFrame(
+              () => pageFocusables[currentFocusIndex - 1].focus()
+            );
+          }
+          break;
+        }
+        if (pageFocusables.length > currentFocusIndex + 1) {
+          requestAnimationFrame(
+            () => pageFocusables[currentFocusIndex + 1].focus()
+          );
+        } else {
+          requestAnimationFrame(() => pageFocusables[0].focus());
+        }
+        break;
+      case "ArrowDown":
+        if (!calendarOpen) {
+          setCalendarOpen(true);
+          setTimeout(focusToCalendar, 200);
+        } else {
+          focusToCalendar();
+        }
+    }
+  };
+  return {
+    calendarOpen,
+    setCalendarOpen,
+    handleCalendarKeyDown,
+    handleInputKeyDown
+  };
+};
+
+function convertStringToDate(v) {
+  if (v === void 0 || v === null) {
+    return v;
+  }
+  const date = DateTime.fromISO(v, { setZone: true, zone: "utc" }).startOf(
+    "day"
+  );
+  if (date.isValid) {
+    return date;
+  }
+  return null;
+}
+function validateDate({
+  date,
+  constraints
+}) {
+  const { required, unavailable, minDate, maxDate } = constraints;
+  if (!date) {
+    return required ? false : true;
+  }
+  if (unavailable?.dates?.some((d) => d.equals(date))) {
+    return false;
+  }
+  if (unavailable?.daysOfWeek?.includes(date.weekday)) {
+    return false;
+  }
+  if (minDate && date < minDate) {
+    return false;
+  }
+  if (maxDate && date > maxDate) {
+    return false;
+  }
+  return true;
+}
+
+const NormalizedDateFieldSingle = forwardRef(
+  ({
+    value: valueProp,
+    mode = "mm/dd/yyyy",
+    defaultValue: defaultValueProp,
+    onChange,
+    disableCalendar = false,
+    unavailable,
+    minDate,
+    maxDate,
+    required = false,
+    ...rest
+  }, ref) => {
+    const inputRef = useRef(null);
+    const [popoverTriggerRef, setPopoverTriggerRef] = useState();
+    const popoverContentRef = useRef(null);
+    const combinedRef = useMergeRefs([popoverTriggerRef, inputRef, ref]);
+    const {
+      calendarOpen,
+      setCalendarOpen,
+      handleCalendarKeyDown,
+      handleInputKeyDown
+    } = useDateFieldOrchestration({
+      inputRef,
+      calendarDefaultOpen: false,
+      popoverContentRef,
+      disableCalendar
+    });
+    const [lastValidDate, setLastValidDate] = useOptionallyControlledState({
+      controlledValue: valueProp,
+      defaultValue: defaultValueProp
+    });
+    const popoverSupported = usePopoverSupport();
+    const currentValidity = useMemo(
+      () => validateDate({
+        date: lastValidDate,
+        constraints: {
+          required,
+          unavailable,
+          minDate: minDate ?? void 0,
+          maxDate: maxDate ?? void 0
+        }
+      }),
+      [lastValidDate, required, unavailable, minDate, maxDate]
+    );
+    const handleInputChange = (change) => {
+      const date = change.isInputEmpty ? null : change.date?.startOf("day") ?? null;
+      onChange?.({
+        date: date?.toISODate() ?? null,
+        isInputValid: change.isInputValid,
+        isInputEmpty: change.isInputEmpty,
+        isDateValid: validateDate({
+          date,
+          constraints: {
+            required,
+            unavailable,
+            minDate: minDate ?? void 0,
+            maxDate: maxDate ?? void 0
+          }
+        })
+      });
+      if (change.isInputValid) {
+        setLastValidDate(change.isInputEmpty ? null : change.date);
+      }
+      if (change.isInputEmpty) {
+        setLastValidDate(null);
+        return;
+      }
+      if (change.date) {
+        setLastValidDate(change.date);
+      }
+    };
+    const handleCalendarSelection = (data) => {
+      if (data.value) {
+        const date = DateTime.fromISO(data.value, { zone: "utc" });
+        setLastValidDate(date);
+        inputRef.current?.setDate(date);
+        onChange?.({
+          date: date.toISODate(),
+          isInputValid: true,
+          isInputEmpty: false,
+          isDateValid: validateDate({
+            date,
+            constraints: {
+              required,
+              unavailable,
+              minDate: minDate ?? void 0,
+              maxDate: maxDate ?? void 0
+            }
+          })
+        });
+      }
+    };
+    const justTheField = /* @__PURE__ */ jsx(
+      MaskedDateInput,
+      {
+        mode,
+        ref: combinedRef,
+        ...rest,
+        onChange: handleInputChange,
+        onKeyDown: handleInputKeyDown,
+        onClick: () => setCalendarOpen(true),
+        lastValidDate,
+        required,
+        autoComplete: "off",
+        "data-date-valid": currentValidity
+      }
+    );
+    if (disableCalendar) {
+      return justTheField;
+    }
+    if (!popoverSupported) {
+      return justTheField;
+    }
+    return /* @__PURE__ */ jsxs(
+      Popover,
+      {
+        open: calendarOpen,
+        modal: true,
+        placement: "bottom-start",
+        disableTriggerFocus: true,
+        onClose: () => setCalendarOpen(false),
+        disableAutoUpdate: true,
+        onOutsidePress: () => setCalendarOpen(false),
+        children: [
+          /* @__PURE__ */ jsx(Popover.Trigger, { children: ({ ref: iRef }) => {
+            setPopoverTriggerRef(iRef);
+            return justTheField;
+          } }),
+          /* @__PURE__ */ jsx(Popover.Content, { ref: popoverContentRef, "data-calendar-popover": true, children: /* @__PURE__ */ jsx(
+            Calendar,
+            {
+              range: false,
+              onKeyDown: handleCalendarKeyDown,
+              defaultFocusedDate: lastValidDate?.toISODate() || DateTime.now().toISODate(),
+              value: lastValidDate?.toISODate() || void 0,
+              onSelection: handleCalendarSelection,
+              defaultTimeZone: "UTC",
+              minDate: minDate?.toISODate() ?? void 0,
+              maxDate: maxDate?.toISODate() ?? void 0,
+              unavailable: unavailable ? {
+                dates: unavailable.dates?.map((d) => d.toISODate() ?? ""),
+                daysOfWeek: unavailable.daysOfWeek
+              } : void 0,
+              _disableAutofocus: true
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+NormalizedDateFieldSingle.displayName = "NormalizedDateFieldSingle";
+
+const DateFieldSingle = ({
+  value,
+  defaultValue,
+  minDate,
+  maxDate,
+  unavailable,
+  ...rest
+}) => {
+  const normalizedValue = useMemo(() => convertStringToDate(value), [value]);
+  const normalizedDefaultValue = useMemo(
+    () => convertStringToDate(defaultValue),
+    [defaultValue]
+  );
+  const normalizedMinDate = useMemo(
+    () => convertStringToDate(minDate),
+    [minDate]
+  );
+  const normalizedMaxDate = useMemo(
+    () => convertStringToDate(maxDate),
+    [maxDate]
+  );
+  const normalizedUnavailableDates = useMemo(
+    () => unavailable?.dates?.map((d) => convertStringToDate(d)).filter((d) => d !== null && d !== void 0),
+    [unavailable?.dates]
+  );
+  return /* @__PURE__ */ jsx(
+    NormalizedDateFieldSingle,
+    {
+      ...rest,
+      value: normalizedValue,
+      defaultValue: normalizedDefaultValue,
+      minDate: normalizedMinDate,
+      maxDate: normalizedMaxDate,
+      unavailable: unavailable ? {
+        dates: normalizedUnavailableDates,
+        daysOfWeek: unavailable?.daysOfWeek
+      } : void 0
+    }
+  );
+};
+DateFieldSingle.displayName = "DateFieldSingle";
+
+const datePlaceholderMask = ({
+  mode,
+  dateSeparator = "/",
+  rangeSeparator = " - ",
+  placeholder
+}) => {
+  const dateRangeOptions = maskitoDateRangeOptionsGenerator({
+    mode,
+    dateSeparator,
+    rangeSeparator
+  });
+  const { plugins, removePlaceholder, ...placeholderOptions } = maskitoWithPlaceholder(placeholder);
+  const datePlaceholderMask2 = {
+    ...dateRangeOptions,
+    plugins: plugins.concat(dateRangeOptions.plugins || []),
+    preprocessors: [
+      ...placeholderOptions.preprocessors,
+      ...dateRangeOptions.preprocessors,
+      makeZeroShortcutPreprocessor(placeholder, dateSeparator)
+    ],
+    postprocessors: [
+      // NOTE this is super fragile. If Maskito maintainers change the order of the post-processors, this will break.
+      // The last postprocessor is the date swap postprocessor, which we don't want to run.
+      // A unit test is added to ensure this doesn't break on a dependency update.
+      ...dateRangeOptions.postprocessors.slice(0, -1),
+      ...placeholderOptions.postprocessors
+    ]
+  };
+  return { options: datePlaceholderMask2, removePlaceholder };
+};
+
+const RANGE_SEPARATOR = " - ";
+const MaskedDateRangeInput = forwardRef(
+  ({
+    onChange,
+    mode = "mm/dd/yyyy",
+    startDate,
+    endDate,
+    disableHint = false,
+    ...props
+  }, ref) => {
+    const halfPlaceholder = DateModeToPlaceholderMap[mode];
+    const fullPlaceholder = `${halfPlaceholder}${RANGE_SEPARATOR}${halfPlaceholder}`;
+    const [inputValue, setInputValue] = useState(fullPlaceholder);
+    const { options, removePlaceholder } = datePlaceholderMask({
+      mode,
+      placeholder: fullPlaceholder,
+      dateSeparator: "/",
+      rangeSeparator: RANGE_SEPARATOR
+    });
+    const maskedInputRef = useMaskito({ options });
+    const inputRef = useRef(null);
+    const combinedRef = useMergeRefs$1([maskedInputRef, inputRef, ref]);
+    const previousStartDate = usePrevious(startDate);
+    const previousEndDate = usePrevious(endDate);
+    const previousMode = usePrevious(mode);
+    useEffect(() => {
+      if (mode !== previousMode) {
+        setInputValue(
+          (previousInputValue) => swapMode(previousInputValue, previousMode ?? mode, mode)
+        );
+      }
+    }, [mode, fullPlaceholder, previousMode]);
+    useEffect(() => {
+      if (startDate === void 0 || endDate === void 0) return;
+      if (startDate === previousStartDate && endDate === previousEndDate)
+        return;
+      if (
+        // plus one just represents a date that is guaranteed to be different.
+        startDate?.equals(previousStartDate ?? startDate?.plus({ days: 1 })) && (endDate?.equals(previousEndDate ?? endDate?.plus({ days: 1 })) || endDate === previousEndDate)
+      )
+        return;
+      const startDateString = startDate?.toFormat(DateModeToFormatMap[mode]) ?? halfPlaceholder;
+      const endDateString = endDate?.toFormat(DateModeToFormatMap[mode]) ?? halfPlaceholder;
+      const newInputValue = `${startDateString}${RANGE_SEPARATOR}${endDateString}`;
+      setInputValue(newInputValue);
+    }, [
+      startDate,
+      endDate,
+      mode,
+      halfPlaceholder,
+      previousStartDate,
+      previousEndDate
+    ]);
+    const handleChange = (event) => {
+      setInputValue(event.target.value);
+      const {
+        startDate: parsedStartDate,
+        endDate: parsedEndDate,
+        isInputValid,
+        isInputEmpty,
+        isHalfEmpty
+      } = parseRangeInputValue(event.target.value, mode, removePlaceholder);
+      onChange?.({
+        event,
+        startDate: isInputEmpty ? null : parsedStartDate ?? startDate ?? null,
+        endDate: isInputEmpty || isHalfEmpty ? null : parsedEndDate ?? endDate ?? null,
+        isInputValid,
+        isInputEmpty
+      });
+    };
+    const currentParsedData = useMemo(() => {
+      return parseRangeInputValue(inputValue, mode, removePlaceholder);
+    }, [inputValue, mode, removePlaceholder]);
+    useImperativeHandle(ref, () => {
+      const input = inputRef.current;
+      if (!input) return null;
+      return Object.assign(input, {
+        setDateRange: (startDate2, endDate2) => {
+          const startDateString = startDate2?.toFormat(
+            DateModeToFormatMap[mode]
+          );
+          const endDateString = endDate2?.toFormat(DateModeToFormatMap[mode]);
+          const newInputValue = `${startDateString ?? halfPlaceholder}${RANGE_SEPARATOR}${endDateString ?? halfPlaceholder}`;
+          setInputValue(newInputValue);
+        }
+      });
+    }, [mode, halfPlaceholder]);
+    return /* @__PURE__ */ jsx(
+      TextField,
+      {
+        ref: combinedRef,
+        "data-start-date": startDate?.toISODate() ?? "",
+        "data-end-date": endDate?.toISODate() ?? "",
+        "data-input-valid": currentParsedData.isInputValid,
+        "data-input-empty": currentParsedData.isInputEmpty,
+        ...props,
+        showCounter: false,
+        value: inputValue,
+        onChange: handleChange,
+        prefix: /* @__PURE__ */ jsx(Icon, { svg: SvgEvent }),
+        hint: disableHint ? void 0 : `format: ${mode}`
+      }
+    );
+  }
+);
+MaskedDateRangeInput.displayName = "MaskedDateRangeInput";
+function parseRangeInputValue(value, mode, removePlaceholder) {
+  const valueMinusPlaceholder = removePlaceholder(value);
+  const [startDate, endDate] = valueMinusPlaceholder.split(RANGE_SEPARATOR);
+  const startJsDate = maskitoParseDate(startDate, { mode });
+  const endJsDate = endDate ? maskitoParseDate(endDate, { mode }) : null;
+  const startLuxonDate = startJsDate ? DateTime.fromJSDate(startJsDate, { zone: "utc" }) : null;
+  const endLuxonDate = endJsDate ? DateTime.fromJSDate(endJsDate, { zone: "utc" }) : null;
+  return {
+    startDate: startLuxonDate,
+    endDate: endLuxonDate,
+    isInputValid: !!(startLuxonDate && endLuxonDate),
+    // input valid if both dates are filled
+    isInputEmpty: valueMinusPlaceholder === "",
+    // input empty if nothing is typed
+    isHalfEmpty: endDate === void 0
+  };
+}
+function swapMode(inputString, previousMode, mode) {
+  const halves = inputString.split(RANGE_SEPARATOR);
+  const segments = halves.map((half) => half.split("/"));
+  let startDay, startMonth, startYear, endDay, endMonth, endYear;
+  if (previousMode === "mm/dd/yyyy") {
+    startDay = segments[0][1];
+    startMonth = segments[0][0];
+    startYear = segments[0][2];
+    endDay = segments[1][1];
+    endMonth = segments[1][0];
+    endYear = segments[1][2];
+  }
+  if (previousMode === "dd/mm/yyyy") {
+    startDay = segments[0][0];
+    startMonth = segments[0][1];
+    startYear = segments[0][2];
+    endDay = segments[1][0];
+    endMonth = segments[1][1];
+    endYear = segments[1][2];
+  }
+  if (previousMode === "yyyy/mm/dd") {
+    startDay = segments[0][2];
+    startMonth = segments[0][1];
+    startYear = segments[0][0];
+    endDay = segments[1][2];
+    endMonth = segments[1][1];
+    endYear = segments[1][0];
+  }
+  if (mode === "mm/dd/yyyy") {
+    return `${startMonth}/${startDay}/${startYear}${RANGE_SEPARATOR}${endMonth}/${endDay}/${endYear}`;
+  }
+  if (mode === "dd/mm/yyyy") {
+    return `${startDay}/${startMonth}/${startYear}${RANGE_SEPARATOR}${endDay}/${endMonth}/${endYear}`;
+  }
+  if (mode === "yyyy/mm/dd") {
+    return `${startYear}/${startMonth}/${startDay}${RANGE_SEPARATOR}${endYear}/${endMonth}/${endDay}`;
+  }
+  return inputString;
+}
+
+const NormalizedDateFieldRange = forwardRef(
+  ({
+    value: valueProp,
+    mode = "mm/dd/yyyy",
+    defaultValue: defaultValueProp,
+    onChange,
+    disableCalendar = false,
+    unavailable,
+    minDate,
+    maxDate,
+    required = false,
+    ...rest
+  }, ref) => {
+    const inputRef = useRef(null);
+    const [popoverTriggerRef, setPopoverTriggerRef] = useState();
+    const popoverContentRef = useRef(null);
+    const combinedRef = useMergeRefs([popoverTriggerRef, inputRef, ref]);
+    const [startDate, setStartDate] = useOptionallyControlledState({
+      controlledValue: valueProp !== void 0 ? valueProp?.startDate : void 0,
+      defaultValue: defaultValueProp !== void 0 ? defaultValueProp?.startDate : void 0
+    });
+    const [endDate, setEndDate] = useOptionallyControlledState(
+      {
+        controlledValue: valueProp !== void 0 ? valueProp?.endDate : void 0,
+        defaultValue: defaultValueProp !== void 0 ? defaultValueProp?.endDate : void 0
+      }
+    );
+    const previousStartDate = usePrevious(startDate);
+    const previousEndDate = usePrevious(endDate);
+    const popoverSupported = usePopoverSupport();
+    const {
+      calendarOpen,
+      setCalendarOpen,
+      handleCalendarKeyDown,
+      handleInputKeyDown
+    } = useDateFieldOrchestration({
+      inputRef: { current: null },
+      calendarDefaultOpen: false,
+      popoverContentRef,
+      disableCalendar
+    });
+    const isDateRangeValid = useMemo(() => {
+      return validateDate({
+        date: startDate ?? null,
+        constraints: {
+          required,
+          unavailable,
+          minDate: minDate ?? void 0,
+          maxDate: maxDate ?? void 0
+        }
+      }) && validateDate({
+        date: endDate ?? null,
+        constraints: {
+          required,
+          unavailable,
+          minDate: minDate ?? void 0,
+          maxDate: maxDate ?? void 0
+        }
+      }) && (!startDate || !endDate || startDate <= endDate);
+    }, [required, unavailable, minDate, maxDate, startDate, endDate]);
+    const defaultFocusedDate = useMemo(() => {
+      if (!startDate && !endDate) return DateTime.now().toISODate();
+      if (!startDate) return endDate?.toISODate();
+      if (!endDate) return startDate?.toISODate();
+      if (endDate && !previousEndDate?.equals(endDate)) {
+        return endDate.toISODate();
+      } else if (startDate && !previousStartDate?.equals(startDate)) {
+        return startDate.toISODate();
+      }
+      if (endDate) return endDate.toISODate();
+      if (startDate) return startDate.toISODate();
+      return DateTime.now().toISODate();
+    }, [previousStartDate, previousEndDate, startDate, endDate]);
+    const handleInputChange = (change) => {
+      const sharedConstraints = {
+        unavailable,
+        minDate: minDate ?? void 0,
+        maxDate: maxDate ?? void 0
+      };
+      const range = change.isInputEmpty ? null : {
+        startDate: change.startDate?.startOf("day") ?? null,
+        endDate: change.endDate?.startOf("day") ?? null
+      };
+      setStartDate(range?.startDate ?? null);
+      setEndDate(range?.endDate ?? null);
+      onChange?.({
+        startDate: range?.startDate?.toISODate() ?? null,
+        endDate: range?.endDate?.toISODate() ?? null,
+        isInputValid: change.isInputValid,
+        isInputEmpty: change.isInputEmpty,
+        isDateRangeValid: validateDateRange({
+          required,
+          startDate: range?.startDate ?? null,
+          endDate: range?.endDate ?? null,
+          startDateConstraints: sharedConstraints,
+          endDateConstraints: sharedConstraints
+        })
+      });
+    };
+    const handleCalendarSelection = (data) => {
+      if (data.value) {
+        const calStartDate = data.value.start ? DateTime.fromISO(data.value.start, { zone: "utc" }) : null;
+        const calEndDate = data.value.end ? DateTime.fromISO(data.value.end, { zone: "utc" }) : null;
+        setStartDate(calStartDate);
+        setEndDate(calEndDate);
+        inputRef.current?.setDateRange(calStartDate, calEndDate);
+        const sharedConstraints = {
+          unavailable,
+          minDate: minDate ?? void 0,
+          maxDate: maxDate ?? void 0
+        };
+        onChange?.({
+          startDate: calStartDate?.toISODate() ?? null,
+          endDate: calEndDate?.toISODate() ?? null,
+          isInputValid: !!calStartDate && !!calEndDate,
+          isInputEmpty: !calStartDate && !calEndDate,
+          isDateRangeValid: validateDateRange({
+            required,
+            startDate: calStartDate,
+            endDate: calEndDate,
+            startDateConstraints: sharedConstraints,
+            endDateConstraints: sharedConstraints
+          })
+        });
+      }
+    };
+    const justTheField = /* @__PURE__ */ jsx(
+      MaskedDateRangeInput,
+      {
+        mode,
+        ref: combinedRef,
+        ...rest,
+        onChange: handleInputChange,
+        disableHint: rest.disableHint,
+        onKeyDown: handleInputKeyDown,
+        onClick: () => setCalendarOpen(true),
+        required,
+        autoComplete: "off",
+        "data-date-range-valid": isDateRangeValid,
+        startDate: startDate ?? null,
+        endDate: endDate ?? null
+      }
+    );
+    if (disableCalendar) {
+      return justTheField;
+    }
+    if (!popoverSupported) {
+      return justTheField;
+    }
+    return /* @__PURE__ */ jsxs(
+      Popover,
+      {
+        open: calendarOpen,
+        modal: true,
+        placement: "bottom-start",
+        disableTriggerFocus: true,
+        onClose: () => setCalendarOpen(false),
+        disableAutoUpdate: true,
+        onOutsidePress: () => setCalendarOpen(false),
+        children: [
+          /* @__PURE__ */ jsx(Popover.Trigger, { children: ({ ref: iRef }) => {
+            setPopoverTriggerRef(iRef);
+            return justTheField;
+          } }),
+          /* @__PURE__ */ jsx(Popover.Content, { ref: popoverContentRef, "data-calendar-popover": true, children: /* @__PURE__ */ jsx(
+            Calendar,
+            {
+              range: true,
+              onKeyDown: handleCalendarKeyDown,
+              defaultFocusedDate,
+              value: {
+                start: startDate?.toISODate() || void 0,
+                end: endDate?.toISODate() || void 0
+              },
+              onSelection: handleCalendarSelection,
+              defaultTimeZone: "UTC",
+              minDate: minDate?.toISODate() ?? void 0,
+              maxDate: maxDate?.toISODate() ?? void 0,
+              unavailable: unavailable ? {
+                dates: unavailable.dates?.map((d) => d.toISODate() ?? ""),
+                daysOfWeek: unavailable.daysOfWeek
+              } : void 0,
+              _disableAutofocus: true
+            },
+            `${startDate?.toISODate()}-${endDate?.toISODate()}`
+          ) })
+        ]
+      }
+    );
+  }
+);
+NormalizedDateFieldRange.displayName = "NormalizedDateFieldRange";
+function validateDateRange({
+  required,
+  startDate,
+  endDate,
+  startDateConstraints,
+  endDateConstraints
+}) {
+  if (!required && !startDate && !endDate) return true;
+  return validateDate({
+    date: startDate,
+    constraints: { ...startDateConstraints, required: true }
+  }) && validateDate({
+    date: endDate,
+    constraints: { ...endDateConstraints, required: true }
+  }) && (!startDate || !endDate || startDate <= endDate);
+}
+
+const DateFieldRange = ({
+  value,
+  defaultValue,
+  minDate,
+  maxDate,
+  unavailable,
+  ...rest
+}) => {
+  const normalizedValue = useMemo(
+    () => value !== void 0 ? {
+      startDate: convertStringToDate(value?.startDate ?? null) ?? null,
+      endDate: convertStringToDate(value?.endDate ?? null) ?? null
+    } : void 0,
+    [value]
+  );
+  const normalizedDefaultValue = useMemo(
+    () => defaultValue !== void 0 ? {
+      startDate: convertStringToDate(defaultValue?.startDate ?? null) ?? null,
+      endDate: convertStringToDate(defaultValue?.endDate ?? null) ?? null
+    } : void 0,
+    [defaultValue]
+  );
+  const normalizedMinDate = useMemo(
+    () => convertStringToDate(minDate),
+    [minDate]
+  );
+  const normalizedMaxDate = useMemo(
+    () => convertStringToDate(maxDate),
+    [maxDate]
+  );
+  const normalizedUnavailableDates = useMemo(
+    () => unavailable?.dates?.map((d) => convertStringToDate(d)).filter((d) => d !== null && d !== void 0),
+    [unavailable?.dates]
+  );
+  return /* @__PURE__ */ jsx(
+    NormalizedDateFieldRange,
+    {
+      ...rest,
+      value: normalizedValue,
+      defaultValue: normalizedDefaultValue,
+      minDate: normalizedMinDate,
+      maxDate: normalizedMaxDate,
+      unavailable: unavailable ? {
+        dates: normalizedUnavailableDates,
+        daysOfWeek: unavailable?.daysOfWeek
+      } : void 0
+    }
+  );
+};
+DateFieldRange.displayName = "DateFieldRange";
+
+export { DateFieldRange as D, DateFieldSingle as a };
+//# sourceMappingURL=DateFieldRange--ZCTVrKX-DoogWMrm.js.map