@caratlogic/design-system 0.1.8 → 0.1.10

package/dist/index.cjs.js

@@ -5772,21 +5772,33 @@ const TextHyperlink = ({ to, href, children, showIcon = true, className, 'aria-l
     return (jsxRuntime.jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", "aria-label": ariaLabel, className: cn(LINK_CLASS, className), children: content }));
 };
 
+/**
+ * Track, thumb and travel, sized so the thumb keeps an even 2px inset on all
+ * four sides. Travel is stated in px rather than `calc(100% - Npx)`: that form
+ * resolves against the thumb's own width, so the gap silently changed whenever a
+ * thumb size did — `md` ended up with a 0.2px vertical inset and no gap at
+ * either end, which read as a thumb bulging out of its track.
+ *
+ *   inner = track - 2px border | thumb = innerHeight - 4 | on = innerWidth - thumb - 2
+ */
 const switchSizes = {
+    // track 28x16 → inner 26x14, thumb 10, on 14
     sm: {
         switch: 'h-4 w-7',
-        thumb: 'size-3',
-        translate: 'data-[state=checked]:translate-x-[calc(100%-1px)]',
+        thumb: 'size-2.5',
+        translate: 'data-[state=unchecked]:translate-x-[2px] data-[state=checked]:translate-x-[14px]',
     },
+    // track 32x20 → inner 30x18, thumb 14, on 14
     md: {
-        switch: 'h-[1.15rem] w-8',
-        thumb: 'size-4',
-        translate: 'data-[state=checked]:translate-x-[calc(100%-2px)]',
+        switch: 'h-5 w-8',
+        thumb: 'size-3.5',
+        translate: 'data-[state=unchecked]:translate-x-[2px] data-[state=checked]:translate-x-[14px]',
     },
+    // track 44x24 → inner 42x22, thumb 18, on 22
     lg: {
         switch: 'h-6 w-11',
-        thumb: 'size-5',
-        translate: 'data-[state=checked]:translate-x-[calc(100%-3px)]',
+        thumb: 'size-[1.125rem]',
+        translate: 'data-[state=unchecked]:translate-x-[2px] data-[state=checked]:translate-x-[22px]',
     },
 };
 
@@ -5797,7 +5809,7 @@ function ToggleSwitch({ checked = false, onCheckedChange, disabled = false, id,
         }
     };
     const currentSize = switchSizes[size];
-    const switchButton = (jsxRuntime.jsx("button", { type: "button", role: "switch", "aria-checked": checked, "data-state": checked ? 'checked' : 'unchecked', value: checked ? 'on' : 'off', "data-slot": "switch", disabled: disabled, onClick: handleClick, id: id, name: name, className: cn('peer inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-all outline-none', 'focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:ring-[3px]', 'disabled:cursor-not-allowed disabled:opacity-50', 'data-[state=unchecked]:bg-muted', 'data-[state=checked]:bg-primary', currentSize.switch, className), ...props, children: jsxRuntime.jsx("span", { "data-state": checked ? 'checked' : 'unchecked', "data-slot": "switch-thumb", className: cn('pointer-events-none block rounded-full ring-0 transition-transform', 'bg-card data-[state=checked]:bg-primary-foreground', 'data-[state=unchecked]:translate-x-0', currentSize.thumb, currentSize.translate) }) }));
+    const switchButton = (jsxRuntime.jsx("button", { type: "button", role: "switch", "aria-checked": checked, "data-state": checked ? 'checked' : 'unchecked', value: checked ? 'on' : 'off', "data-slot": "switch", disabled: disabled, onClick: handleClick, id: id, name: name, className: cn('peer inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-all outline-none', 'focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:ring-[3px]', 'disabled:cursor-not-allowed disabled:opacity-50', 'data-[state=unchecked]:bg-muted', 'data-[state=checked]:bg-primary', currentSize.switch, className), ...props, children: jsxRuntime.jsx("span", { "data-state": checked ? 'checked' : 'unchecked', "data-slot": "switch-thumb", className: cn('pointer-events-none block rounded-full ring-0 transition-transform', 'bg-card data-[state=checked]:bg-primary-foreground', currentSize.thumb, currentSize.translate) }) }));
     if (!label) {
         return switchButton;
     }
@@ -12119,18 +12131,18 @@ function requireMoment () {
 var momentExports = requireMoment();
 var moment = /*@__PURE__*/getDefaultExportFromCjs(momentExports);
 
-const DATE_FORMAT = 'DD-MM-YYYY';
+const DATE_FORMAT$1 = 'DD-MM-YYYY';
 /**
  * Canonical default thumbnail used wherever a gem/diamond/inventory item has
  * no image of its own — single source of truth (mirrors the gem inventory grid).
  */
 const DEFAULT_INVENTORY_THUMBNAIL = '/default%20thumbnail.png';
 
-const formatDate$1 = (iso) => {
+const formatDate$2 = (iso) => {
     if (!iso)
         return '-';
     try {
-        return moment(iso).format(DATE_FORMAT);
+        return moment(iso).format(DATE_FORMAT$1);
     }
     catch {
         return iso;
@@ -12143,7 +12155,7 @@ const InfoCard = ({ info, title, refundToWallet, onRefundChange, }) => {
     if (React.isValidElement(info))
         return jsxRuntime.jsx("div", { className: "mt-3", children: info });
     const i = info;
-    return (jsxRuntime.jsx("div", { className: "mt-1 rounded-lg border bg-muted p-3 shadow-sm", children: jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [jsxRuntime.jsx("div", { className: "w-36 text-sm text-muted-foreground", children: "Date" }), jsxRuntime.jsx("div", { children: formatDate$1(i.invoiceDate) })] }), jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [jsxRuntime.jsx("div", { className: "w-36 text-sm text-muted-foreground", children: "Total" }), jsxRuntime.jsx("div", { className: "font-medium text-foreground", children: formatCurrencyWithTenantSymbol(i.totalAmount) })] }), i.paidAmount !== undefined && (jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [jsxRuntime.jsx("div", { className: "w-36 text-sm text-muted-foreground", children: "Paid" }), jsxRuntime.jsx("div", { className: "font-medium text-primary", children: formatCurrencyWithTenantSymbol(i.paidAmount) })] })), i.outstandingAmount !== undefined && (jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [jsxRuntime.jsx("div", { className: "w-36 text-sm text-muted-foreground", children: "Outstanding" }), jsxRuntime.jsx("div", { className: "font-medium text-muted-foreground", children: formatCurrencyWithTenantSymbol(i.outstandingAmount) })] })), title === 'Cancel Invoice' &&
+    return (jsxRuntime.jsx("div", { className: "mt-1 rounded-lg border bg-muted p-3 shadow-sm", children: jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [jsxRuntime.jsx("div", { className: "w-36 text-sm text-muted-foreground", children: "Date" }), jsxRuntime.jsx("div", { children: formatDate$2(i.invoiceDate) })] }), jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [jsxRuntime.jsx("div", { className: "w-36 text-sm text-muted-foreground", children: "Total" }), jsxRuntime.jsx("div", { className: "font-medium text-foreground", children: formatCurrencyWithTenantSymbol(i.totalAmount) })] }), i.paidAmount !== undefined && (jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [jsxRuntime.jsx("div", { className: "w-36 text-sm text-muted-foreground", children: "Paid" }), jsxRuntime.jsx("div", { className: "font-medium text-primary", children: formatCurrencyWithTenantSymbol(i.paidAmount) })] })), i.outstandingAmount !== undefined && (jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [jsxRuntime.jsx("div", { className: "w-36 text-sm text-muted-foreground", children: "Outstanding" }), jsxRuntime.jsx("div", { className: "font-medium text-muted-foreground", children: formatCurrencyWithTenantSymbol(i.outstandingAmount) })] })), title === 'Cancel Invoice' &&
                     !React.isValidElement(info) &&
                     (i?.paidAmount ?? 0) > 0 && (jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [jsxRuntime.jsx("div", { className: "w-36 whitespace-nowrap text-sm text-muted-foreground", children: "Refund to Wallet" }), jsxRuntime.jsx(Checkbox, { checked: !!refundToWallet, onCheckedChange: (v) => onRefundChange?.(Boolean(v)), className: "bg-card" })] })), (i.customerName || i.email) && (jsxRuntime.jsxs("div", { className: "mt-1 rounded bg-card p-2", children: [i.customerName && (jsxRuntime.jsx("div", { className: "text-sm font-medium", children: i.customerName })), i.email && (jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: i.email }))] }))] }) }));
 };
@@ -22605,7 +22617,7 @@ function parseDate(value, dateFormat, locale, strictParsing, refDate) {
         var parsedDate = parse(value, format_1, refDate, {
             locale: localeObject});
         if (isValid(parsedDate) &&
-            (!strictParsing || value === formatDate(parsedDate, format_1, locale))) {
+            (!strictParsing || value === formatDate$1(parsedDate, format_1, locale))) {
             return parsedDate;
         }
     }
@@ -22633,7 +22645,7 @@ function isValid(date, minDate) {
  * @param locale - The locale.
  * @returns - The formatted date.
  */
-function formatDate(date, formatStr, locale) {
+function formatDate$1(date, formatStr, locale) {
     if (locale === "en") {
         return format(date, formatStr, {
             useAdditionalWeekYearTokens: true,
@@ -22663,7 +22675,7 @@ function safeDateFormat(date, _a) {
     var formatStr = (Array.isArray(dateFormat) && dateFormat.length > 0
         ? dateFormat[0]
         : dateFormat); // Cast to string because it's impossible to get `string | string[] | undefined` here and typescript doesn't know that
-    return (date && formatDate(date, formatStr, locale)) || "";
+    return (date && formatDate$1(date, formatStr, locale)) || "";
 }
 /**
  * Used as a delimiter to separate two dates when formatting a date range
@@ -22737,7 +22749,7 @@ function getWeek(date) {
  * @returns - The day of the week code.
  */
 function getDayOfWeekCode(day, locale) {
-    return formatDate(day, "ddd", locale);
+    return formatDate$1(day, "ddd", locale);
 }
 // *** Start of ***
 /**
@@ -22960,7 +22972,7 @@ function getLocaleObject(localeSpec) {
  * @returns - The formatted weekday.
  */
 function getFormattedWeekdayInLocale(date, formatFunc, locale) {
-    return formatFunc(formatDate(date, "EEEE", locale));
+    return formatFunc(formatDate$1(date, "EEEE", locale));
 }
 /**
  * Gets the minimum weekday in a given locale.
@@ -22970,7 +22982,7 @@ function getFormattedWeekdayInLocale(date, formatFunc, locale) {
  * @returns - The minimum weekday.
  */
 function getWeekdayMinInLocale(date, locale) {
-    return formatDate(date, "EEEEEE", locale);
+    return formatDate$1(date, "EEEEEE", locale);
 }
 /**
  * Gets the short weekday in a given locale.
@@ -22980,7 +22992,7 @@ function getWeekdayMinInLocale(date, locale) {
  * @returns - The short weekday.
  */
 function getWeekdayShortInLocale(date, locale) {
-    return formatDate(date, "EEE", locale);
+    return formatDate$1(date, "EEE", locale);
 }
 /**
  * Gets the month in a given locale.
@@ -22990,7 +23002,7 @@ function getWeekdayShortInLocale(date, locale) {
  * @returns - The month.
  */
 function getMonthInLocale(month, locale) {
-    return formatDate(setMonth(newDate(), month), "LLLL", locale);
+    return formatDate$1(setMonth(newDate(), month), "LLLL", locale);
 }
 /**
  * Gets the short month in a given locale.
@@ -23000,7 +23012,7 @@ function getMonthInLocale(month, locale) {
  * @returns - The short month.
  */
 function getMonthShortInLocale(month, locale) {
-    return formatDate(setMonth(newDate(), month), "LLL", locale);
+    return formatDate$1(setMonth(newDate(), month), "LLL", locale);
 }
 /**
  * Gets the short quarter in a given locale.
@@ -23010,7 +23022,7 @@ function getMonthShortInLocale(month, locale) {
  * @returns - The short quarter.
  */
 function getQuarterShortInLocale(quarter, locale) {
-    return formatDate(setQuarter(newDate(), quarter), "QQQ", locale);
+    return formatDate$1(setQuarter(newDate(), quarter), "QQQ", locale);
 }
 /**
  * Checks if a day is disabled.
@@ -23340,7 +23352,7 @@ function getHighLightDaysMap(highlightDates, defaultClassName) {
     for (var i = 0, len = highlightDates.length; i < len; i++) {
         var obj = highlightDates[i];
         if (isDate(obj)) {
-            var key = formatDate(obj, "MM.dd.yyyy");
+            var key = formatDate$1(obj, "MM.dd.yyyy");
             var classNamesArr = dateClasses.get(key) || [];
             if (!classNamesArr.includes(defaultClassName)) {
                 classNamesArr.push(defaultClassName);
@@ -23355,7 +23367,7 @@ function getHighLightDaysMap(highlightDates, defaultClassName) {
                 for (var k = 0, len_1 = arrOfDates.length; k < len_1; k++) {
                     var dateK = arrOfDates[k];
                     if (dateK) {
-                        var key = formatDate(dateK, "MM.dd.yyyy");
+                        var key = formatDate$1(dateK, "MM.dd.yyyy");
                         var classNamesArr = dateClasses.get(key) || [];
                         if (!classNamesArr.includes(className)) {
                             classNamesArr.push(className);
@@ -23395,7 +23407,7 @@ function getHolidaysMap(holidayDates, defaultClassName) {
         if (!isDate(dateObj)) {
             return;
         }
-        var key = formatDate(dateObj, "MM.dd.yyyy");
+        var key = formatDate$1(dateObj, "MM.dd.yyyy");
         var classNamesObj = dateClasses.get(key) || {
             className: "",
             holidayNames: [],
@@ -23769,7 +23781,7 @@ var Day = /** @class */ (function (_super) {
                 return false;
             }
             // Looking for className in the Map of {'day string, 'className'}
-            var dayStr = formatDate(day, "MM.dd.yyyy");
+            var dayStr = formatDate$1(day, "MM.dd.yyyy");
             return highlightDates.get(dayStr);
         };
         // Function to return the array containing className associated to the date
@@ -23780,7 +23792,7 @@ var Day = /** @class */ (function (_super) {
                 // For type consistency no other reasons
                 return [undefined];
             }
-            var dayStr = formatDate(day, "MM.dd.yyyy");
+            var dayStr = formatDate$1(day, "MM.dd.yyyy");
             // Looking for className in the Map of {day string: {className, holidayName}}
             if (holidays.has(dayStr)) {
                 return [(_a = holidays.get(dayStr)) === null || _a === void 0 ? void 0 : _a.className];
@@ -23921,12 +23933,12 @@ var Day = /** @class */ (function (_super) {
             var prefix = _this.isDisabled() || _this.isExcluded()
                 ? ariaLabelPrefixWhenDisabled
                 : ariaLabelPrefixWhenEnabled;
-            return "".concat(prefix, " ").concat(formatDate(day, "PPPP", _this.props.locale));
+            return "".concat(prefix, " ").concat(formatDate$1(day, "PPPP", _this.props.locale));
         };
         // A function to return the holiday's name as title's content
         _this.getTitle = function () {
             var _a = _this.props, day = _a.day, _b = _a.holidays, holidays = _b === void 0 ? new Map() : _b, excludeDates = _a.excludeDates;
-            var compareDt = formatDate(day, "MM.dd.yyyy");
+            var compareDt = formatDate$1(day, "MM.dd.yyyy");
             var titles = [];
             if (holidays.has(compareDt)) {
                 titles.push.apply(titles, holidays.get(compareDt).holidayNames);
@@ -24852,7 +24864,7 @@ var Month = /** @class */ (function (_super) {
             var prefix = _this.isDisabled(labelDate) || _this.isExcluded(labelDate)
                 ? disabledDayAriaLabelPrefix
                 : chooseDayAriaLabelPrefix;
-            return "".concat(prefix, " ").concat(formatDate(labelDate, "MMMM yyyy", locale));
+            return "".concat(prefix, " ").concat(formatDate$1(labelDate, "MMMM yyyy", locale));
         };
         _this.getQuarterClassNames = function (q) {
             var _a = _this.props, day = _a.day, startDate = _a.startDate, endDate = _a.endDate, minDate = _a.minDate, maxDate = _a.maxDate, excludeDates = _a.excludeDates, includeDates = _a.includeDates, filterDate = _a.filterDate, preSelection = _a.preSelection, disabledKeyboardNavigation = _a.disabledKeyboardNavigation, disabled = _a.disabled;
@@ -24954,7 +24966,7 @@ var Month = /** @class */ (function (_super) {
             : "";
         // Format aria-label, return empty string if date is invalid
         var formattedAriaLabel = isValid(day)
-            ? "".concat(formattedAriaLabelPrefix).concat(formatDate(day, "MMMM, yyyy", this.props.locale))
+            ? "".concat(formattedAriaLabelPrefix).concat(formatDate$1(day, "MMMM, yyyy", this.props.locale))
             : "";
         var shouldUseListboxRole = showMonthYearPicker || showQuarterYearPicker;
         if (shouldUseListboxRole) {
@@ -25097,7 +25109,7 @@ var MonthYearDropdownOptions = /** @class */ (function (_super) {
                         ? "react-datepicker__month-year-option--selected_month-year"
                         : "react-datepicker__month-year-option", key: monthYearPoint, onClick: _this.onChange.bind(_this, monthYearPoint), "aria-selected": isSameMonthYear ? "true" : undefined },
                     isSameMonthYear ? (React.createElement("span", { className: "react-datepicker__month-year-option--selected" }, "\u2713")) : (""),
-                    formatDate(monthYear, _this.props.dateFormat, _this.props.locale)));
+                    formatDate$1(monthYear, _this.props.dateFormat, _this.props.locale)));
             });
         };
         _this.onChange = function (monthYear) { return _this.props.onChange(monthYear); };
@@ -25132,7 +25144,7 @@ var MonthYearDropdown = /** @class */ (function (_super) {
             var options = [];
             while (!isAfter$1(currDate, lastDate)) {
                 var timePoint = getTime(currDate);
-                options.push(React.createElement("option", { key: timePoint, value: timePoint }, formatDate(currDate, _this.props.dateFormat, _this.props.locale)));
+                options.push(React.createElement("option", { key: timePoint, value: timePoint }, formatDate$1(currDate, _this.props.dateFormat, _this.props.locale)));
                 currDate = addMonths(currDate, 1);
             }
             return options;
@@ -25142,7 +25154,7 @@ var MonthYearDropdown = /** @class */ (function (_super) {
         };
         _this.renderSelectMode = function () { return (React.createElement("select", { value: getTime(getStartOfMonth(_this.props.date)), className: "react-datepicker__month-year-select", onChange: _this.onSelectChange }, _this.renderSelectOptions())); };
         _this.renderReadView = function (visible) {
-            var yearMonth = formatDate(_this.props.date, _this.props.dateFormat, _this.props.locale);
+            var yearMonth = formatDate$1(_this.props.date, _this.props.dateFormat, _this.props.locale);
             return (React.createElement("div", { key: "read", style: { visibility: visible ? "visible" : "hidden" }, className: "react-datepicker__month-year-read-view", onClick: _this.toggleDropdown },
                 React.createElement("span", { className: "react-datepicker__month-year-read-view--down-arrow" }),
                 React.createElement("span", { className: "react-datepicker__month-year-read-view--selected-month-year" }, yearMonth)));
@@ -25311,7 +25323,7 @@ var Time = /** @class */ (function (_super) {
                         }
                     }, onKeyDown: function (event) {
                         _this.handleOnKeyDown(event, time);
-                    }, tabIndex: time === timeToFocus ? 0 : -1, role: "option", "aria-selected": _this.isSelectedTime(time) ? "true" : undefined, "aria-disabled": _this.isDisabledTime(time) ? "true" : undefined }, formatDate(time, format, _this.props.locale)));
+                    }, tabIndex: time === timeToFocus ? 0 : -1, role: "option", "aria-selected": _this.isSelectedTime(time) ? "true" : undefined, "aria-disabled": _this.isDisabledTime(time) ? "true" : undefined }, formatDate$1(time, format, _this.props.locale)));
             });
         };
         _this.renderTimeCaption = function () {
@@ -26082,7 +26094,7 @@ var Calendar = /** @class */ (function (_super) {
                     ? _this.props.weekDayClassName(day)
                     : undefined;
                 return (React.createElement("div", { key: offset, role: "columnheader", className: clsx("react-datepicker__day-name", weekDayClassName, disabled ? "react-datepicker__day-name--disabled" : "") },
-                    React.createElement("span", { className: "react-datepicker__sr-only" }, formatDate(day, "EEEE", _this.props.locale)),
+                    React.createElement("span", { className: "react-datepicker__sr-only" }, formatDate$1(day, "EEEE", _this.props.locale)),
                     React.createElement("span", { "aria-hidden": "true" }, weekDayName)));
             }));
         };
@@ -26262,7 +26274,7 @@ var Calendar = /** @class */ (function (_super) {
                 classes.push("react-datepicker__current-month--hasMonthYearDropdown");
             }
             return (React.createElement("h2", { className: classes.join(" ") }, isValid(date)
-                ? formatDate(date, _this.props.dateFormat, _this.props.locale)
+                ? formatDate$1(date, _this.props.dateFormat, _this.props.locale)
                 : ""));
         };
         _this.renderYearDropdown = function (overrideHide) {
@@ -27246,7 +27258,7 @@ var DatePicker = /** @class */ (function (_super) {
                 var newMinutes = Math.min(maxMinutes, currentMinutes + timeIntervals);
                 newTime = addMinutes(baseDate, newMinutes);
             }
-            var formattedTime = formatDate(newTime, formatStr || DatePicker.defaultProps.dateFormat, _this.props.locale);
+            var formattedTime = formatDate$1(newTime, formatStr || DatePicker.defaultProps.dateFormat, _this.props.locale);
             _this.setState({
                 preSelection: newTime,
                 inputValue: formattedTime,
@@ -27838,24 +27850,77 @@ var PRESELECT_CHANGE_VIA_INPUT = "input";
 var PRESELECT_CHANGE_VIA_NAVIGATE = "navigate";
 
 const MONTHS = moment.months();
+/** The one format the field displays and accepts when typed. */
+const DATE_FORMAT = 'DD/MM/YYYY';
+const BOUND_FORMAT = 'YYYY-MM-DD';
+const MAX_DIGITS = 8;
 function computeDateBounds(min, max) {
     const minDate = min
         ? min instanceof Date
-            ? moment(min).format('YYYY-MM-DD')
+            ? moment(min).format(BOUND_FORMAT)
             : min
         : undefined;
     const maxDate = max
         ? max instanceof Date
-            ? moment(max).format('YYYY-MM-DD')
+            ? moment(max).format(BOUND_FORMAT)
             : max
         : undefined;
     return {
         minDate,
         maxDate,
-        minYear: minDate ? moment(minDate, 'YYYY-MM-DD').year() : undefined,
-        maxYear: maxDate ? moment(maxDate, 'YYYY-MM-DD').year() : undefined,
+        minYear: minDate ? moment(minDate, BOUND_FORMAT).year() : undefined,
+        maxYear: maxDate ? moment(maxDate, BOUND_FORMAT).year() : undefined,
     };
 }
+function formatDate(value) {
+    return value ? moment(value).format(DATE_FORMAT) : '';
+}
+function toBoundDate(bound) {
+    return bound ? moment(bound, BOUND_FORMAT).toDate() : undefined;
+}
+/**
+ * Keep only the digits a date can hold and re-insert the separators, so typing
+ * `25082026` reads back as `25/08/2026` and pasted junk cannot survive.
+ */
+function maskDateText(text) {
+    const digits = text.replace(/\D/g, '').slice(0, MAX_DIGITS);
+    if (digits.length <= 2)
+        return digits;
+    if (digits.length <= 4)
+        return `${digits.slice(0, 2)}/${digits.slice(2)}`;
+    return `${digits.slice(0, 2)}/${digits.slice(2, 4)}/${digits.slice(4)}`;
+}
+function countDigits(text) {
+    return text.replace(/\D/g, '').length;
+}
+/** Offset in `text` that sits just after its nth digit. */
+function caretAfterDigits(text, digits) {
+    if (digits <= 0)
+        return 0;
+    let seen = 0;
+    for (let index = 0; index < text.length; index += 1) {
+        if (text[index] >= '0' && text[index] <= '9') {
+            seen += 1;
+            if (seen === digits)
+                return index + 1;
+        }
+    }
+    return text.length;
+}
+function parseDateText(text) {
+    const parsed = moment(text, DATE_FORMAT, true);
+    return parsed.isValid() ? parsed.toDate() : undefined;
+}
+function isWithinBounds(date, { minDate, maxDate }) {
+    const day = moment(date).startOf('day');
+    if (minDate && day.isBefore(moment(minDate, BOUND_FORMAT).startOf('day'))) {
+        return false;
+    }
+    if (maxDate && day.isAfter(moment(maxDate, BOUND_FORMAT).startOf('day'))) {
+        return false;
+    }
+    return true;
+}
 
 function DatePickerHeader({ monthDate, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, minYear, maxYear, hidePrev, hideNext, }) {
     const current = moment(monthDate);
@@ -27870,25 +27935,39 @@ function DatePickerHeader({ monthDate, changeYear, changeMonth, decreaseMonth, i
     return (jsxRuntime.jsxs("div", { className: "date-range-picker-header", children: [hidePrev ? (jsxRuntime.jsx("span", { className: "date-range-picker-nav-spacer", "aria-hidden": true })) : (jsxRuntime.jsx("button", { type: "button", onClick: decreaseMonth, disabled: prevMonthButtonDisabled, "aria-label": "Previous month", className: "date-range-picker-nav", children: jsxRuntime.jsx(ChevronLeft, { className: "h-4 w-4", strokeWidth: 2 }) })), jsxRuntime.jsxs("div", { className: "date-range-picker-selects", children: [jsxRuntime.jsx("div", { className: "date-range-picker-select-wrap", children: jsxRuntime.jsx("select", { "aria-label": "Select month", className: "date-range-picker-select", value: shownMonth, onChange: (event) => changeMonth(Number(event.target.value)), children: MONTHS.map((label, index) => (jsxRuntime.jsx("option", { value: index, children: label }, label))) }) }), jsxRuntime.jsx("div", { className: "date-range-picker-select-wrap", children: jsxRuntime.jsx("select", { "aria-label": "Select year", className: "date-range-picker-select", value: shownYear, onChange: (event) => changeYear(Number(event.target.value)), children: years.map((year) => (jsxRuntime.jsx("option", { value: year, children: year }, year))) }) })] }), hideNext ? (jsxRuntime.jsx("span", { className: "date-range-picker-nav-spacer", "aria-hidden": true })) : (jsxRuntime.jsx("button", { type: "button", onClick: increaseMonth, disabled: nextMonthButtonDisabled, "aria-label": "Next month", className: "date-range-picker-nav", children: jsxRuntime.jsx(ChevronRight, { className: "h-4 w-4", strokeWidth: 2 }) }))] }));
 }
 
-var css_248z$2 = "@charset \"UTF-8\";.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow,.react-datepicker__navigation-icon:before,.react-datepicker__year-read-view--down-arrow{border-color:#ccc;border-style:solid;border-width:3px 3px 0 0;content:\"\";display:block;height:9px;position:absolute;top:6px;width:9px}.react-datepicker__sr-only{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.react-datepicker-wrapper{border:0;display:inline-block;padding:0}.react-datepicker{background-color:#fff;border:1px solid #aeaeae;border-radius:.3rem;color:#000;display:inline-block;font-family:Helvetica Neue,helvetica,arial,sans-serif;font-size:.8rem;line-height:normal;position:relative}.react-datepicker--time-only .react-datepicker__time-container{border-left:0}.react-datepicker--time-only .react-datepicker__time,.react-datepicker--time-only .react-datepicker__time-box{border-bottom-left-radius:.3rem;border-bottom-right-radius:.3rem}.react-datepicker-popper{line-height:0;z-index:1}.react-datepicker-popper .react-datepicker__triangle{stroke:#aeaeae}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle{fill:#f0f0f0;color:#f0f0f0}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle{fill:#fff;color:#fff}.react-datepicker__header{background-color:#f0f0f0;border-bottom:1px solid #aeaeae;border-top-left-radius:.3rem;padding:8px 0;position:relative;text-align:center}.react-datepicker__header--time{padding-bottom:8px;padding-left:5px;padding-right:5px}.react-datepicker__header--time:not(.react-datepicker__header--time--only){border-top-left-radius:0}.react-datepicker__header:not(.react-datepicker__header--has-time-select){border-top-right-radius:.3rem}.react-datepicker__month-dropdown-container--scroll,.react-datepicker__month-dropdown-container--select,.react-datepicker__month-year-dropdown-container--scroll,.react-datepicker__month-year-dropdown-container--select,.react-datepicker__year-dropdown-container--scroll,.react-datepicker__year-dropdown-container--select{display:inline-block;margin:0 15px}.react-datepicker-time__header,.react-datepicker-year-header,.react-datepicker__current-month{color:#000;font-size:.944rem;font-weight:700;margin-top:0}h2.react-datepicker__current-month{margin:0;padding:0}.react-datepicker-time__header{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.react-datepicker__navigation{align-items:center;background:none;border:none;cursor:pointer;display:flex;height:32px;justify-content:center;overflow:hidden;padding:0;position:absolute;text-align:center;text-indent:-999em;top:2px;width:32px;z-index:1}.react-datepicker__navigation--previous{left:2px}.react-datepicker__navigation--next{right:2px}.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button){right:85px}.react-datepicker__navigation--years{display:block;margin-left:auto;margin-right:auto;position:relative;top:0}.react-datepicker__navigation--years-previous{top:4px}.react-datepicker__navigation--years-upcoming{top:-4px}.react-datepicker__navigation:hover :before{border-color:#a6a6a6}.react-datepicker__navigation-icon{font-size:20px;position:relative;top:-1px;width:0}.react-datepicker__navigation-icon--next{left:-2px}.react-datepicker__navigation-icon--next:before{left:-7px;transform:rotate(45deg)}.react-datepicker__navigation-icon--previous{right:-2px}.react-datepicker__navigation-icon--previous:before{right:-7px;transform:rotate(225deg)}.react-datepicker__month-container{float:left}.react-datepicker__year{margin:.4rem;text-align:center}.react-datepicker__year-wrapper{display:flex;flex-wrap:wrap;max-width:180px}.react-datepicker__year .react-datepicker__year-text{display:inline-block;margin:2px;width:4rem}.react-datepicker__month{margin:.4rem;text-align:center}.react-datepicker__month .react-datepicker__month-text,.react-datepicker__month .react-datepicker__quarter-text{display:inline-block;margin:2px;width:4rem}.react-datepicker__input-time-container{clear:both;float:left;margin:5px 0 10px 15px;text-align:left;width:100%}.react-datepicker__input-time-container .react-datepicker-time__caption,.react-datepicker__input-time-container .react-datepicker-time__input-container{display:inline-block}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input{display:inline-block;margin-left:10px}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input{width:auto}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]{-moz-appearance:textfield}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter{display:inline-block;margin-left:5px}.react-datepicker__time-container{border-left:1px solid #aeaeae;float:right;width:85px}.react-datepicker__time-container--with-today-button{border:1px solid #aeaeae;border-radius:.3rem;display:inline;position:absolute;right:-87px;top:0}.react-datepicker__time-container .react-datepicker__time{background:#fff;border-bottom-right-radius:.3rem;position:relative}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box{border-bottom-right-radius:.3rem;margin:0 auto;overflow-x:hidden;text-align:center;width:85px}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list{box-sizing:content-box;height:calc(195px + .85rem);list-style:none;margin:0;overflow-y:scroll;padding-left:0;padding-right:0;width:100%}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item{height:30px;padding:5px 10px;white-space:nowrap}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover{background-color:#f0f0f0;cursor:pointer}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected{background-color:#216ba5;color:#fff;font-weight:700}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover{background-color:#216ba5}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled{color:#ccc}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover{background-color:transparent;cursor:default}.react-datepicker__week-number{color:#ccc;display:inline-block;line-height:1.7rem;margin:.166rem;text-align:center;width:1.7rem}.react-datepicker__week-number.react-datepicker__week-number--clickable{cursor:pointer}.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected):hover{background-color:#f0f0f0;border-radius:.3rem}.react-datepicker__week-number--selected{background-color:#216ba5;border-radius:.3rem;color:#fff}.react-datepicker__week-number--selected:hover{background-color:#1d5d90}.react-datepicker__day-names{margin-bottom:-8px;text-align:center;white-space:nowrap}.react-datepicker__week{white-space:nowrap}.react-datepicker__day,.react-datepicker__day-name,.react-datepicker__time-name{color:#000;display:inline-block;line-height:1.7rem;margin:.166rem;text-align:center;width:1.7rem}.react-datepicker__day--disabled,.react-datepicker__day-name--disabled,.react-datepicker__time-name--disabled{color:#ccc;cursor:default}.react-datepicker__day,.react-datepicker__month-text,.react-datepicker__quarter-text,.react-datepicker__year-text{cursor:pointer}.react-datepicker__day:not([aria-disabled=true]):hover,.react-datepicker__month-text:not([aria-disabled=true]):hover,.react-datepicker__quarter-text:not([aria-disabled=true]):hover,.react-datepicker__year-text:not([aria-disabled=true]):hover{background-color:#f0f0f0;border-radius:.3rem}.react-datepicker__day--today,.react-datepicker__month-text--today,.react-datepicker__quarter-text--today,.react-datepicker__year-text--today{font-weight:700}.react-datepicker__day--highlighted,.react-datepicker__month-text--highlighted,.react-datepicker__quarter-text--highlighted,.react-datepicker__year-text--highlighted{background-color:#3dcc4a;border-radius:.3rem;color:#fff}.react-datepicker__day--highlighted:not([aria-disabled=true]):hover,.react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,.react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover{background-color:#32be3f}.react-datepicker__day--highlighted-custom-1,.react-datepicker__month-text--highlighted-custom-1,.react-datepicker__quarter-text--highlighted-custom-1,.react-datepicker__year-text--highlighted-custom-1{color:#f0f}.react-datepicker__day--highlighted-custom-2,.react-datepicker__month-text--highlighted-custom-2,.react-datepicker__quarter-text--highlighted-custom-2,.react-datepicker__year-text--highlighted-custom-2{color:green}.react-datepicker__day--holidays,.react-datepicker__month-text--holidays,.react-datepicker__quarter-text--holidays,.react-datepicker__year-text--holidays{background-color:#ff6803;border-radius:.3rem;color:#fff;position:relative}.react-datepicker__day--holidays .overlay,.react-datepicker__month-text--holidays .overlay,.react-datepicker__quarter-text--holidays .overlay,.react-datepicker__year-text--holidays .overlay{background-color:#333;border-radius:4px;bottom:100%;color:#fff;left:50%;opacity:0;padding:4px;position:absolute;transform:translateX(-50%);transition:visibility 0s,opacity .3s ease-in-out;visibility:hidden;white-space:nowrap}.react-datepicker__day--holidays:not([aria-disabled=true]):hover,.react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,.react-datepicker__year-text--holidays:not([aria-disabled=true]):hover{background-color:#cf5300}.react-datepicker__day--holidays:hover .overlay,.react-datepicker__month-text--holidays:hover .overlay,.react-datepicker__quarter-text--holidays:hover .overlay,.react-datepicker__year-text--holidays:hover .overlay{opacity:1;visibility:visible}.react-datepicker__day--in-range,.react-datepicker__day--in-selecting-range,.react-datepicker__day--selected,.react-datepicker__month-text--in-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__month-text--selected,.react-datepicker__quarter-text--in-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__quarter-text--selected,.react-datepicker__year-text--in-range,.react-datepicker__year-text--in-selecting-range,.react-datepicker__year-text--selected{background-color:#216ba5;border-radius:.3rem;color:#fff}.react-datepicker__day--in-range:not([aria-disabled=true]):hover,.react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover,.react-datepicker__day--selected:not([aria-disabled=true]):hover,.react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,.react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,.react-datepicker__month-text--selected:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,.react-datepicker__year-text--in-range:not([aria-disabled=true]):hover,.react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,.react-datepicker__year-text--selected:not([aria-disabled=true]):hover{background-color:#1d5d90}.react-datepicker__day--keyboard-selected,.react-datepicker__month-text--keyboard-selected,.react-datepicker__quarter-text--keyboard-selected,.react-datepicker__year-text--keyboard-selected{background-color:#bad9f1;border-radius:.3rem;color:#000}.react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,.react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,.react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover{background-color:#1d5d90;color:#fff}.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range){background-color:rgba(33,107,165,.5)}.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range){background-color:#f0f0f0;color:#000}.react-datepicker__day--disabled,.react-datepicker__month-text--disabled,.react-datepicker__quarter-text--disabled,.react-datepicker__year-text--disabled{color:#ccc;cursor:default}.react-datepicker__day--disabled .overlay,.react-datepicker__month-text--disabled .overlay,.react-datepicker__quarter-text--disabled .overlay,.react-datepicker__year-text--disabled .overlay{background-color:#333;border-radius:4px;bottom:70%;color:#fff;left:50%;opacity:0;padding:4px;position:absolute;transform:translateX(-50%);transition:visibility 0s,opacity .3s ease-in-out;visibility:hidden;white-space:nowrap}.react-datepicker__input-container{display:inline-block;position:relative;width:100%}.react-datepicker__input-container .react-datepicker__calendar-icon{box-sizing:content-box;padding:.5rem;position:absolute}.react-datepicker__view-calendar-icon input{padding:6px 10px 5px 25px}.react-datepicker__month-read-view,.react-datepicker__month-year-read-view,.react-datepicker__year-read-view{border:1px solid transparent;border-radius:.3rem;position:relative}.react-datepicker__month-read-view:hover,.react-datepicker__month-year-read-view:hover,.react-datepicker__year-read-view:hover{cursor:pointer}.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow{border-top-color:#b3b3b3}.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow{right:-16px;top:0;transform:rotate(135deg)}.react-datepicker__month-dropdown,.react-datepicker__month-year-dropdown,.react-datepicker__year-dropdown{background-color:#f0f0f0;border:1px solid #aeaeae;border-radius:.3rem;left:25%;position:absolute;text-align:center;top:30px;width:50%;z-index:1}.react-datepicker__month-dropdown:hover,.react-datepicker__month-year-dropdown:hover,.react-datepicker__year-dropdown:hover{cursor:pointer}.react-datepicker__month-dropdown--scrollable,.react-datepicker__month-year-dropdown--scrollable,.react-datepicker__year-dropdown--scrollable{height:150px;overflow-y:scroll}.react-datepicker__month-option,.react-datepicker__month-year-option,.react-datepicker__year-option{display:block;line-height:20px;margin-left:auto;margin-right:auto;width:100%}.react-datepicker__month-option:first-of-type,.react-datepicker__month-year-option:first-of-type,.react-datepicker__year-option:first-of-type{border-top-left-radius:.3rem;border-top-right-radius:.3rem}.react-datepicker__month-option:last-of-type,.react-datepicker__month-year-option:last-of-type,.react-datepicker__year-option:last-of-type{border-bottom-left-radius:.3rem;border-bottom-right-radius:.3rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.react-datepicker__month-option:hover,.react-datepicker__month-year-option:hover,.react-datepicker__year-option:hover{background-color:#ccc}.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming{border-bottom-color:#b3b3b3}.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous{border-top-color:#b3b3b3}.react-datepicker__month-option--selected,.react-datepicker__month-year-option--selected,.react-datepicker__year-option--selected{left:15px;position:absolute}.react-datepicker__close-icon{background-color:transparent;border:0;cursor:pointer;display:table-cell;height:100%;outline:0;padding:0 6px 0 0;position:absolute;right:0;top:0;vertical-align:middle}.react-datepicker__close-icon:after{background-color:#216ba5;border-radius:50%;color:#fff;content:\"×\";cursor:pointer;display:table-cell;font-size:12px;height:16px;line-height:1;padding:2px;text-align:center;vertical-align:middle;width:16px}.react-datepicker__close-icon--disabled{cursor:default}.react-datepicker__close-icon--disabled:after{background-color:#ccc;cursor:default}.react-datepicker__today-button{background:#f0f0f0;border-top:1px solid #aeaeae;clear:left;cursor:pointer;font-weight:700;padding:5px 0;text-align:center}.react-datepicker__portal{align-items:center;background-color:rgba(0,0,0,.8);display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100vw;z-index:2147483647}.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__time-name{line-height:3rem;width:3rem}@media (max-height:550px),(max-width:400px){.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__time-name{line-height:2rem;width:2rem}}.react-datepicker__portal .react-datepicker-time__header,.react-datepicker__portal .react-datepicker__current-month{font-size:1.44rem}.react-datepicker__children-container{height:auto;margin:.4rem;padding-left:.2rem;padding-right:.2rem;width:13.8rem}.react-datepicker__aria-live{border:0;clip-path:circle(0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.react-datepicker__calendar-icon{height:1em;vertical-align:-.125em;width:1em}";
-styleInject(css_248z$2);
-
-var css_248z$1 = ".date-range-picker-popover[data-slot=popover-content]{max-width:calc(100vw - 2rem);width:fit-content}.date-range-picker-calendar.react-datepicker{background:transparent;border:0;display:flex;flex-direction:column;font-family:inherit;font-size:.875rem}.date-range-picker-calendar .react-datepicker__month-container{float:none;width:auto}.date-range-picker-calendar .react-datepicker__header{background:transparent;border-bottom:0;padding:0}.date-range-picker-calendar .react-datepicker__current-month{display:none}.date-range-picker-header{align-items:center;display:flex;gap:.5rem;justify-content:space-between;padding:0 .25rem .25rem}.date-range-picker-selects{align-items:center;display:flex;gap:.375rem}.date-range-picker-select-wrap{align-items:center;display:inline-flex;position:relative}.date-range-picker-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:var(--background);background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E\");background-position:right .375rem center;background-repeat:no-repeat;background-size:.875rem;border:1px solid var(--input-border,var(--border));border-radius:.5rem;color:var(--foreground);cursor:pointer;font-size:.8125rem;font-weight:500;height:1.875rem;line-height:1.875rem;outline:none;padding:0 1.5rem 0 .625rem;transition:border-color .15s,box-shadow .15s}.date-range-picker-select:hover{background-color:var(--muted)}.date-range-picker-select:focus-visible{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 30%,transparent)}.date-range-picker-select option{background-color:var(--popover,var(--background));color:var(--foreground)}.date-range-picker-nav-spacer{display:inline-block;height:1.75rem;width:1.75rem}.date-range-picker-nav{align-items:center;background-color:var(--muted);border:0;border-radius:.5rem;color:var(--muted-foreground);cursor:pointer;display:inline-flex;height:1.75rem;justify-content:center;padding:0;transition:background-color .15s,color .15s;width:1.75rem}.date-range-picker-nav:hover{background-color:var(--accent);color:var(--foreground)}.date-range-picker-nav:disabled{cursor:not-allowed;opacity:.4}.date-range-picker-calendar .react-datepicker__day-names{display:flex;justify-content:space-between;margin:.5rem 0 .25rem}.date-range-picker-calendar .react-datepicker__day-name{color:var(--muted-foreground);font-size:.75rem;font-weight:400;line-height:1.75rem;margin:0;width:2.25rem}.date-range-picker-calendar .react-datepicker__month{margin:0}.date-range-picker-calendar .react-datepicker__week{display:flex;justify-content:space-between}.date-range-picker-calendar .react-datepicker__day{align-items:center;border-radius:.5rem;color:var(--foreground);display:inline-flex;font-size:.875rem;height:2.25rem;justify-content:center;line-height:2.25rem;margin:.125rem 0;width:2.25rem}.date-range-picker-calendar .react-datepicker__day--outside-month{color:var(--muted-foreground);opacity:.55}.date-range-picker-calendar .react-datepicker__day:hover{background-color:var(--muted);border-radius:.5rem}.date-range-picker-calendar .react-datepicker__day--today{background-color:var(--muted);color:var(--foreground);font-weight:600}.date-range-picker-calendar .react-datepicker__day--keyboard-selected,.date-range-picker-calendar .react-datepicker__day--selected{background-color:var(--primary);color:var(--primary-foreground);font-weight:500}.date-range-picker-calendar .react-datepicker__day--keyboard-selected:hover,.date-range-picker-calendar .react-datepicker__day--selected:hover{background-color:var(--primary);color:var(--primary-foreground);filter:brightness(.95)}.date-range-picker-calendar .react-datepicker__day--in-range,.date-range-picker-calendar .react-datepicker__day--in-selecting-range{background-color:color-mix(in srgb,var(--primary) 18%,transparent);color:var(--primary)}.date-range-picker-calendar .react-datepicker__day--range-end,.date-range-picker-calendar .react-datepicker__day--range-start{background-color:var(--primary);color:var(--primary-foreground)}.date-range-picker-calendar .react-datepicker__day--disabled{color:var(--muted-foreground);cursor:not-allowed;opacity:.4}.date-range-picker-calendar .react-datepicker__children-container{margin:0;padding:0;width:auto}.date-range-picker-footer{align-items:center;display:flex;justify-content:space-between;margin-top:.75rem;padding-top:.75rem;width:100%}.date-range-picker-action{align-items:center;background-color:color-mix(in srgb,var(--primary) 10%,transparent);border:0;border-radius:.5rem;color:var(--primary);cursor:pointer;display:inline-flex;font-size:.8125rem;font-weight:500;height:2rem;justify-content:center;padding:0 .875rem;transition:background-color .15s}.date-range-picker-action:hover{background-color:color-mix(in srgb,var(--primary) 18%,transparent)}:is(.dark) .date-range-picker-calendar .react-datepicker__day--today{background-color:color-mix(in srgb,var(--muted) 80%,transparent)}:is(.dark) .date-range-picker-action{background-color:color-mix(in srgb,var(--primary) 18%,transparent)}:is(.dark) .date-range-picker-action:hover{background-color:color-mix(in srgb,var(--primary) 28%,transparent)}";
-styleInject(css_248z$1);
-
 // Only one DateInput popover should be open at a time. Because each instance is
 // its own `modal` Radix Popover, opening a second one does not dismiss the first
 // via outside-click. Instances coordinate through a window event: whoever opens
 // broadcasts its id, and every other open instance closes itself.
 const DATEINPUT_OPEN_EVENT = 'caratlogic:dateinput-open';
-function DateInput({ value, onChange, onBlur, name, className, min, max, disabled, placeholder = 'Select date', }) {
+function useDateInput({ value, onChange, onBlur, min, max, disabled, }) {
     const [open, setOpen] = React.useState(false);
     const instanceId = React.useId();
-    const { minDate, maxDate, minYear, maxYear } = computeDateBounds(min, max);
-    // Close this popover when any other DateInput announces it just opened.
+    const inputRef = React.useRef(null);
+    const caretRef = React.useRef(null);
+    const bounds = computeDateBounds(min, max);
+    const formatted = formatDate(value);
+    const [text, setText] = React.useState(formatted);
+    const [syncedValue, setSyncedValue] = React.useState(formatted);
+    // Adopt `value` whenever it changes from the outside — a form reset, a
+    // calendar pick, a sibling field narrowing the range — while leaving a
+    // half-typed date alone.
+    if (formatted !== syncedValue) {
+        setSyncedValue(formatted);
+        setText(formatted);
+    }
+    // Masking rewrites the whole string, which parks the caret at the end on any
+    // keystroke that crosses a separator. Put it back once the DOM has the value.
+    React.useLayoutEffect(() => {
+        const caret = caretRef.current;
+        if (caret === null || !inputRef.current)
+            return;
+        caretRef.current = null;
+        inputRef.current.setSelectionRange(caret, caret);
+    });
     React.useEffect(() => {
-        const onOtherOpen = (e) => {
-            if (e.detail !== instanceId)
+        const onOtherOpen = (event) => {
+            if (event.detail !== instanceId)
                 setOpen(false);
         };
         window.addEventListener(DATEINPUT_OPEN_EVENT, onOtherOpen);
@@ -27900,6 +27979,132 @@ function DateInput({ value, onChange, onBlur, name, className, min, max, disable
             window.dispatchEvent(new CustomEvent(DATEINPUT_OPEN_EVENT, { detail: instanceId }));
         }
     };
+    const commit = (date) => {
+        const next = formatDate(date);
+        setText(next);
+        setSyncedValue(next);
+        onChange(date);
+    };
+    /**
+     * Show `masked` and report it upwards only once it is a whole, real,
+     * in-range date — so `01/01/2` on the way to `01/01/2026` never lands in the
+     * form, and an emptied field clears the value.
+     */
+    const applyText = (masked, caret) => {
+        caretRef.current = caret;
+        setText(masked);
+        if (masked === '') {
+            setSyncedValue('');
+            onChange(undefined);
+            return;
+        }
+        if (masked.length < DATE_FORMAT.length)
+            return;
+        const parsed = parseDateText(masked);
+        if (parsed && isWithinBounds(parsed, bounds)) {
+            setSyncedValue(masked);
+            onChange(parsed);
+        }
+    };
+    const handleTextChange = (event) => {
+        const raw = event.target.value;
+        const caret = event.target.selectionStart ?? raw.length;
+        const masked = maskDateText(raw);
+        applyText(masked, caretAfterDigits(masked, countDigits(raw.slice(0, caret))));
+    };
+    /** Fall back to the committed value when the field is left mid-edit. */
+    const normalize = () => {
+        if (text === '')
+            return;
+        const parsed = parseDateText(text);
+        if (!parsed || !isWithinBounds(parsed, bounds))
+            setText(formatted);
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === 'Enter') {
+            // Settle the field rather than submitting the form around it.
+            event.preventDefault();
+            setOpen(false);
+            normalize();
+            return;
+        }
+        if (event.key === 'Escape' && open) {
+            setOpen(false);
+            return;
+        }
+        if (event.key === 'ArrowDown' && event.altKey && !disabled) {
+            event.preventDefault();
+            handleOpenChange(true);
+            return;
+        }
+        if (event.key !== 'Backspace')
+            return;
+        // A separator is not content: backspacing onto a `/` has to take the digit
+        // in front of it, or the mask re-inserts the slash and the caret sticks.
+        const input = event.currentTarget;
+        const start = input.selectionStart ?? 0;
+        if (start !== input.selectionEnd ||
+            start < 2 ||
+            input.value[start - 1] !== '/') {
+            return;
+        }
+        event.preventDefault();
+        const kept = input.value.slice(0, start - 2);
+        const masked = maskDateText(kept + input.value.slice(start));
+        applyText(masked, caretAfterDigits(masked, countDigits(kept)));
+    };
+    const handleTextBlur = () => {
+        normalize();
+        onBlur?.();
+    };
+    const parsedText = parseDateText(text);
+    return {
+        open,
+        text,
+        invalid: text.length === DATE_FORMAT.length &&
+            (!parsedText || !isWithinBounds(parsedText, bounds)),
+        bounds,
+        inputRef,
+        handleOpenChange,
+        handleTextChange,
+        handleKeyDown,
+        handleTextBlur,
+        toggleOpen: () => {
+            if (!disabled)
+                handleOpenChange(!open);
+        },
+        selectDate: (date) => {
+            commit(date ?? undefined);
+            if (date)
+                setOpen(false);
+        },
+        clearDate: () => {
+            commit(undefined);
+            setOpen(false);
+        },
+        selectToday: () => {
+            commit(new Date());
+            setOpen(false);
+        },
+    };
+}
+
+const CALENDAR_BUTTON_LABEL = 'Open calendar';
+/** Spells out what the field accepts, since the format is now typeable. */
+const DATE_FORMAT_HINT = `Date format ${DATE_FORMAT}`;
+
+var css_248z$2 = "@charset \"UTF-8\";.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow,.react-datepicker__navigation-icon:before,.react-datepicker__year-read-view--down-arrow{border-color:#ccc;border-style:solid;border-width:3px 3px 0 0;content:\"\";display:block;height:9px;position:absolute;top:6px;width:9px}.react-datepicker__sr-only{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.react-datepicker-wrapper{border:0;display:inline-block;padding:0}.react-datepicker{background-color:#fff;border:1px solid #aeaeae;border-radius:.3rem;color:#000;display:inline-block;font-family:Helvetica Neue,helvetica,arial,sans-serif;font-size:.8rem;line-height:normal;position:relative}.react-datepicker--time-only .react-datepicker__time-container{border-left:0}.react-datepicker--time-only .react-datepicker__time,.react-datepicker--time-only .react-datepicker__time-box{border-bottom-left-radius:.3rem;border-bottom-right-radius:.3rem}.react-datepicker-popper{line-height:0;z-index:1}.react-datepicker-popper .react-datepicker__triangle{stroke:#aeaeae}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle{fill:#f0f0f0;color:#f0f0f0}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle{fill:#fff;color:#fff}.react-datepicker__header{background-color:#f0f0f0;border-bottom:1px solid #aeaeae;border-top-left-radius:.3rem;padding:8px 0;position:relative;text-align:center}.react-datepicker__header--time{padding-bottom:8px;padding-left:5px;padding-right:5px}.react-datepicker__header--time:not(.react-datepicker__header--time--only){border-top-left-radius:0}.react-datepicker__header:not(.react-datepicker__header--has-time-select){border-top-right-radius:.3rem}.react-datepicker__month-dropdown-container--scroll,.react-datepicker__month-dropdown-container--select,.react-datepicker__month-year-dropdown-container--scroll,.react-datepicker__month-year-dropdown-container--select,.react-datepicker__year-dropdown-container--scroll,.react-datepicker__year-dropdown-container--select{display:inline-block;margin:0 15px}.react-datepicker-time__header,.react-datepicker-year-header,.react-datepicker__current-month{color:#000;font-size:.944rem;font-weight:700;margin-top:0}h2.react-datepicker__current-month{margin:0;padding:0}.react-datepicker-time__header{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.react-datepicker__navigation{align-items:center;background:none;border:none;cursor:pointer;display:flex;height:32px;justify-content:center;overflow:hidden;padding:0;position:absolute;text-align:center;text-indent:-999em;top:2px;width:32px;z-index:1}.react-datepicker__navigation--previous{left:2px}.react-datepicker__navigation--next{right:2px}.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button){right:85px}.react-datepicker__navigation--years{display:block;margin-left:auto;margin-right:auto;position:relative;top:0}.react-datepicker__navigation--years-previous{top:4px}.react-datepicker__navigation--years-upcoming{top:-4px}.react-datepicker__navigation:hover :before{border-color:#a6a6a6}.react-datepicker__navigation-icon{font-size:20px;position:relative;top:-1px;width:0}.react-datepicker__navigation-icon--next{left:-2px}.react-datepicker__navigation-icon--next:before{left:-7px;transform:rotate(45deg)}.react-datepicker__navigation-icon--previous{right:-2px}.react-datepicker__navigation-icon--previous:before{right:-7px;transform:rotate(225deg)}.react-datepicker__month-container{float:left}.react-datepicker__year{margin:.4rem;text-align:center}.react-datepicker__year-wrapper{display:flex;flex-wrap:wrap;max-width:180px}.react-datepicker__year .react-datepicker__year-text{display:inline-block;margin:2px;width:4rem}.react-datepicker__month{margin:.4rem;text-align:center}.react-datepicker__month .react-datepicker__month-text,.react-datepicker__month .react-datepicker__quarter-text{display:inline-block;margin:2px;width:4rem}.react-datepicker__input-time-container{clear:both;float:left;margin:5px 0 10px 15px;text-align:left;width:100%}.react-datepicker__input-time-container .react-datepicker-time__caption,.react-datepicker__input-time-container .react-datepicker-time__input-container{display:inline-block}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input{display:inline-block;margin-left:10px}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input{width:auto}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]{-moz-appearance:textfield}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter{display:inline-block;margin-left:5px}.react-datepicker__time-container{border-left:1px solid #aeaeae;float:right;width:85px}.react-datepicker__time-container--with-today-button{border:1px solid #aeaeae;border-radius:.3rem;display:inline;position:absolute;right:-87px;top:0}.react-datepicker__time-container .react-datepicker__time{background:#fff;border-bottom-right-radius:.3rem;position:relative}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box{border-bottom-right-radius:.3rem;margin:0 auto;overflow-x:hidden;text-align:center;width:85px}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list{box-sizing:content-box;height:calc(195px + .85rem);list-style:none;margin:0;overflow-y:scroll;padding-left:0;padding-right:0;width:100%}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item{height:30px;padding:5px 10px;white-space:nowrap}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover{background-color:#f0f0f0;cursor:pointer}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected{background-color:#216ba5;color:#fff;font-weight:700}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover{background-color:#216ba5}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled{color:#ccc}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover{background-color:transparent;cursor:default}.react-datepicker__week-number{color:#ccc;display:inline-block;line-height:1.7rem;margin:.166rem;text-align:center;width:1.7rem}.react-datepicker__week-number.react-datepicker__week-number--clickable{cursor:pointer}.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected):hover{background-color:#f0f0f0;border-radius:.3rem}.react-datepicker__week-number--selected{background-color:#216ba5;border-radius:.3rem;color:#fff}.react-datepicker__week-number--selected:hover{background-color:#1d5d90}.react-datepicker__day-names{margin-bottom:-8px;text-align:center;white-space:nowrap}.react-datepicker__week{white-space:nowrap}.react-datepicker__day,.react-datepicker__day-name,.react-datepicker__time-name{color:#000;display:inline-block;line-height:1.7rem;margin:.166rem;text-align:center;width:1.7rem}.react-datepicker__day--disabled,.react-datepicker__day-name--disabled,.react-datepicker__time-name--disabled{color:#ccc;cursor:default}.react-datepicker__day,.react-datepicker__month-text,.react-datepicker__quarter-text,.react-datepicker__year-text{cursor:pointer}.react-datepicker__day:not([aria-disabled=true]):hover,.react-datepicker__month-text:not([aria-disabled=true]):hover,.react-datepicker__quarter-text:not([aria-disabled=true]):hover,.react-datepicker__year-text:not([aria-disabled=true]):hover{background-color:#f0f0f0;border-radius:.3rem}.react-datepicker__day--today,.react-datepicker__month-text--today,.react-datepicker__quarter-text--today,.react-datepicker__year-text--today{font-weight:700}.react-datepicker__day--highlighted,.react-datepicker__month-text--highlighted,.react-datepicker__quarter-text--highlighted,.react-datepicker__year-text--highlighted{background-color:#3dcc4a;border-radius:.3rem;color:#fff}.react-datepicker__day--highlighted:not([aria-disabled=true]):hover,.react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,.react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover{background-color:#32be3f}.react-datepicker__day--highlighted-custom-1,.react-datepicker__month-text--highlighted-custom-1,.react-datepicker__quarter-text--highlighted-custom-1,.react-datepicker__year-text--highlighted-custom-1{color:#f0f}.react-datepicker__day--highlighted-custom-2,.react-datepicker__month-text--highlighted-custom-2,.react-datepicker__quarter-text--highlighted-custom-2,.react-datepicker__year-text--highlighted-custom-2{color:green}.react-datepicker__day--holidays,.react-datepicker__month-text--holidays,.react-datepicker__quarter-text--holidays,.react-datepicker__year-text--holidays{background-color:#ff6803;border-radius:.3rem;color:#fff;position:relative}.react-datepicker__day--holidays .overlay,.react-datepicker__month-text--holidays .overlay,.react-datepicker__quarter-text--holidays .overlay,.react-datepicker__year-text--holidays .overlay{background-color:#333;border-radius:4px;bottom:100%;color:#fff;left:50%;opacity:0;padding:4px;position:absolute;transform:translateX(-50%);transition:visibility 0s,opacity .3s ease-in-out;visibility:hidden;white-space:nowrap}.react-datepicker__day--holidays:not([aria-disabled=true]):hover,.react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,.react-datepicker__year-text--holidays:not([aria-disabled=true]):hover{background-color:#cf5300}.react-datepicker__day--holidays:hover .overlay,.react-datepicker__month-text--holidays:hover .overlay,.react-datepicker__quarter-text--holidays:hover .overlay,.react-datepicker__year-text--holidays:hover .overlay{opacity:1;visibility:visible}.react-datepicker__day--in-range,.react-datepicker__day--in-selecting-range,.react-datepicker__day--selected,.react-datepicker__month-text--in-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__month-text--selected,.react-datepicker__quarter-text--in-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__quarter-text--selected,.react-datepicker__year-text--in-range,.react-datepicker__year-text--in-selecting-range,.react-datepicker__year-text--selected{background-color:#216ba5;border-radius:.3rem;color:#fff}.react-datepicker__day--in-range:not([aria-disabled=true]):hover,.react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover,.react-datepicker__day--selected:not([aria-disabled=true]):hover,.react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,.react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,.react-datepicker__month-text--selected:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,.react-datepicker__year-text--in-range:not([aria-disabled=true]):hover,.react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,.react-datepicker__year-text--selected:not([aria-disabled=true]):hover{background-color:#1d5d90}.react-datepicker__day--keyboard-selected,.react-datepicker__month-text--keyboard-selected,.react-datepicker__quarter-text--keyboard-selected,.react-datepicker__year-text--keyboard-selected{background-color:#bad9f1;border-radius:.3rem;color:#000}.react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,.react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,.react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover{background-color:#1d5d90;color:#fff}.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range){background-color:rgba(33,107,165,.5)}.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range){background-color:#f0f0f0;color:#000}.react-datepicker__day--disabled,.react-datepicker__month-text--disabled,.react-datepicker__quarter-text--disabled,.react-datepicker__year-text--disabled{color:#ccc;cursor:default}.react-datepicker__day--disabled .overlay,.react-datepicker__month-text--disabled .overlay,.react-datepicker__quarter-text--disabled .overlay,.react-datepicker__year-text--disabled .overlay{background-color:#333;border-radius:4px;bottom:70%;color:#fff;left:50%;opacity:0;padding:4px;position:absolute;transform:translateX(-50%);transition:visibility 0s,opacity .3s ease-in-out;visibility:hidden;white-space:nowrap}.react-datepicker__input-container{display:inline-block;position:relative;width:100%}.react-datepicker__input-container .react-datepicker__calendar-icon{box-sizing:content-box;padding:.5rem;position:absolute}.react-datepicker__view-calendar-icon input{padding:6px 10px 5px 25px}.react-datepicker__month-read-view,.react-datepicker__month-year-read-view,.react-datepicker__year-read-view{border:1px solid transparent;border-radius:.3rem;position:relative}.react-datepicker__month-read-view:hover,.react-datepicker__month-year-read-view:hover,.react-datepicker__year-read-view:hover{cursor:pointer}.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow{border-top-color:#b3b3b3}.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow{right:-16px;top:0;transform:rotate(135deg)}.react-datepicker__month-dropdown,.react-datepicker__month-year-dropdown,.react-datepicker__year-dropdown{background-color:#f0f0f0;border:1px solid #aeaeae;border-radius:.3rem;left:25%;position:absolute;text-align:center;top:30px;width:50%;z-index:1}.react-datepicker__month-dropdown:hover,.react-datepicker__month-year-dropdown:hover,.react-datepicker__year-dropdown:hover{cursor:pointer}.react-datepicker__month-dropdown--scrollable,.react-datepicker__month-year-dropdown--scrollable,.react-datepicker__year-dropdown--scrollable{height:150px;overflow-y:scroll}.react-datepicker__month-option,.react-datepicker__month-year-option,.react-datepicker__year-option{display:block;line-height:20px;margin-left:auto;margin-right:auto;width:100%}.react-datepicker__month-option:first-of-type,.react-datepicker__month-year-option:first-of-type,.react-datepicker__year-option:first-of-type{border-top-left-radius:.3rem;border-top-right-radius:.3rem}.react-datepicker__month-option:last-of-type,.react-datepicker__month-year-option:last-of-type,.react-datepicker__year-option:last-of-type{border-bottom-left-radius:.3rem;border-bottom-right-radius:.3rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.react-datepicker__month-option:hover,.react-datepicker__month-year-option:hover,.react-datepicker__year-option:hover{background-color:#ccc}.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming{border-bottom-color:#b3b3b3}.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous{border-top-color:#b3b3b3}.react-datepicker__month-option--selected,.react-datepicker__month-year-option--selected,.react-datepicker__year-option--selected{left:15px;position:absolute}.react-datepicker__close-icon{background-color:transparent;border:0;cursor:pointer;display:table-cell;height:100%;outline:0;padding:0 6px 0 0;position:absolute;right:0;top:0;vertical-align:middle}.react-datepicker__close-icon:after{background-color:#216ba5;border-radius:50%;color:#fff;content:\"×\";cursor:pointer;display:table-cell;font-size:12px;height:16px;line-height:1;padding:2px;text-align:center;vertical-align:middle;width:16px}.react-datepicker__close-icon--disabled{cursor:default}.react-datepicker__close-icon--disabled:after{background-color:#ccc;cursor:default}.react-datepicker__today-button{background:#f0f0f0;border-top:1px solid #aeaeae;clear:left;cursor:pointer;font-weight:700;padding:5px 0;text-align:center}.react-datepicker__portal{align-items:center;background-color:rgba(0,0,0,.8);display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100vw;z-index:2147483647}.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__time-name{line-height:3rem;width:3rem}@media (max-height:550px),(max-width:400px){.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__time-name{line-height:2rem;width:2rem}}.react-datepicker__portal .react-datepicker-time__header,.react-datepicker__portal .react-datepicker__current-month{font-size:1.44rem}.react-datepicker__children-container{height:auto;margin:.4rem;padding-left:.2rem;padding-right:.2rem;width:13.8rem}.react-datepicker__aria-live{border:0;clip-path:circle(0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.react-datepicker__calendar-icon{height:1em;vertical-align:-.125em;width:1em}";
+styleInject(css_248z$2);
+
+var css_248z$1 = ".date-range-picker-popover[data-slot=popover-content]{max-width:calc(100vw - 2rem);width:fit-content}.date-range-picker-calendar.react-datepicker{background:transparent;border:0;display:flex;flex-direction:column;font-family:inherit;font-size:.875rem}.date-range-picker-calendar .react-datepicker__month-container{float:none;width:auto}.date-range-picker-calendar .react-datepicker__header{background:transparent;border-bottom:0;padding:0}.date-range-picker-calendar .react-datepicker__current-month{display:none}.date-range-picker-header{align-items:center;display:flex;gap:.5rem;justify-content:space-between;padding:0 .25rem .25rem}.date-range-picker-selects{align-items:center;display:flex;gap:.375rem}.date-range-picker-select-wrap{align-items:center;display:inline-flex;position:relative}.date-range-picker-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:var(--background);background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E\");background-position:right .375rem center;background-repeat:no-repeat;background-size:.875rem;border:1px solid var(--input-border,var(--border));border-radius:.5rem;color:var(--foreground);cursor:pointer;font-size:.8125rem;font-weight:500;height:1.875rem;line-height:1.875rem;outline:none;padding:0 1.5rem 0 .625rem;transition:border-color .15s,box-shadow .15s}.date-range-picker-select:hover{background-color:var(--muted)}.date-range-picker-select:focus-visible{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 30%,transparent)}.date-range-picker-select option{background-color:var(--popover,var(--background));color:var(--foreground)}.date-range-picker-nav-spacer{display:inline-block;height:1.75rem;width:1.75rem}.date-range-picker-nav{align-items:center;background-color:var(--muted);border:0;border-radius:.5rem;color:var(--muted-foreground);cursor:pointer;display:inline-flex;height:1.75rem;justify-content:center;padding:0;transition:background-color .15s,color .15s;width:1.75rem}.date-range-picker-nav:hover{background-color:var(--accent);color:var(--foreground)}.date-range-picker-nav:disabled{cursor:not-allowed;opacity:.4}.date-range-picker-calendar .react-datepicker__day-names{display:flex;justify-content:space-between;margin:.5rem 0 .25rem}.date-range-picker-calendar .react-datepicker__day-name{color:var(--muted-foreground);font-size:.75rem;font-weight:400;line-height:1.75rem;margin:0;width:2.25rem}.date-range-picker-calendar .react-datepicker__month{margin:0}.date-range-picker-calendar .react-datepicker__week{display:flex;justify-content:space-between}.date-range-picker-calendar .react-datepicker__day{align-items:center;border-radius:.5rem;color:var(--foreground);display:inline-flex;font-size:.875rem;height:2.25rem;justify-content:center;line-height:2.25rem;margin:.125rem 0;width:2.25rem}.date-range-picker-calendar .react-datepicker__day--outside-month{color:var(--muted-foreground);opacity:.55}.date-range-picker-calendar .react-datepicker__day:hover{background-color:var(--muted);border-radius:.5rem}.date-range-picker-calendar .react-datepicker__day--today{background-color:var(--muted);color:var(--foreground);font-weight:600}.date-range-picker-calendar .react-datepicker__day--keyboard-selected,.date-range-picker-calendar .react-datepicker__day--selected{background-color:var(--primary);color:var(--primary-foreground);font-weight:500}.date-range-picker-calendar .react-datepicker__day--keyboard-selected:hover,.date-range-picker-calendar .react-datepicker__day--selected:hover{background-color:var(--primary);color:var(--primary-foreground);filter:brightness(.95)}.date-range-picker-calendar .react-datepicker__day--in-range,.date-range-picker-calendar .react-datepicker__day--in-selecting-range{background-color:color-mix(in srgb,var(--primary) 18%,transparent);color:var(--primary)}.date-range-picker-calendar .react-datepicker__day--range-end,.date-range-picker-calendar .react-datepicker__day--range-start{background-color:var(--primary);color:var(--primary-foreground)}.date-range-picker-calendar .react-datepicker__day--disabled{color:var(--muted-foreground);cursor:not-allowed;opacity:.4}.date-range-picker-calendar .react-datepicker__children-container{margin:0;padding:0;width:auto}.date-range-picker-footer{align-items:center;display:flex;justify-content:space-between;margin-top:.75rem;padding-top:.75rem;width:100%}.date-range-picker-action{align-items:center;background-color:color-mix(in srgb,var(--primary) 10%,transparent);border:0;border-radius:.5rem;color:var(--primary);cursor:pointer;display:inline-flex;font-size:.8125rem;font-weight:500;height:2rem;justify-content:center;padding:0 .875rem;transition:background-color .15s}.date-range-picker-action:hover{background-color:color-mix(in srgb,var(--primary) 18%,transparent)}:is(.dark) .date-range-picker-calendar .react-datepicker__day--today{background-color:color-mix(in srgb,var(--muted) 80%,transparent)}:is(.dark) .date-range-picker-action{background-color:color-mix(in srgb,var(--primary) 18%,transparent)}:is(.dark) .date-range-picker-action:hover{background-color:color-mix(in srgb,var(--primary) 28%,transparent)}";
+styleInject(css_248z$1);
+
+/**
+ * Date field that can be typed or picked. The text box takes a masked
+ * `DD/MM/YYYY` entry; the trailing button opens the same calendar as before.
+ */
+function DateInput({ value, onChange, onBlur, name, id, className, min, max, disabled, placeholder = DATE_FORMAT, ariaLabel, }) {
+    const { open, text, invalid, bounds, inputRef, handleOpenChange, handleTextChange, handleKeyDown, handleTextBlur, toggleOpen, selectDate, clearDate, selectToday, } = useDateInput({ value, onChange, onBlur, min, max, disabled });
     // NOTE: We drive `open` ourselves from the button's onClick instead of using
     // Radix's <PopoverTrigger> toggle. When this Popover is nested inside the
     // modal <SlideOut> (Radix Dialog), the trigger's built-in toggle does not
@@ -27908,20 +28113,7 @@ function DateInput({ value, onChange, onBlur, name, className, min, max, disable
     // source of truth — no double-fire, and it works across browsers. `modal`
     // lets the open popover own pointer events above the dialog so the calendar
     // (portalled to <body>) stays clickable.
-    return (jsxRuntime.jsxs(Popover, { open: open, onOpenChange: handleOpenChange, modal: true, children: [jsxRuntime.jsx(PopoverAnchor, { asChild: true, children: jsxRuntime.jsxs("button", { type: "button", name: name, onBlur: onBlur, disabled: disabled, "aria-haspopup": "dialog", "aria-expanded": open, onClick: () => {
-                        if (!disabled)
-                            handleOpenChange(!open);
-                    }, "data-slot": "input", "data-empty": !value || undefined, className: cn('border-input-border flex h-9 w-full min-w-0 cursor-pointer items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-1 text-left shadow-[0_1px_2px_0_#0000000d] transition-[color,box-shadow] outline-none', 'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]', 'aria-invalid:ring-destructive/20 aria-invalid:border-destructive', disabled && 'cursor-not-allowed bg-muted/50 text-label', className), children: [jsxRuntime.jsx("span", { className: cn('truncate text-sm md:text-sm', value ? 'text-foreground' : 'text-placeholder'), children: value ? moment(value).format('DD/MM/YYYY') : placeholder }), jsxRuntime.jsx("span", { className: "inline-flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground", children: jsxRuntime.jsx(CalendarDays, { className: "h-4 w-4 stroke-[1.75]" }) })] }) }), jsxRuntime.jsx(PopoverContent, { align: "start", className: "date-range-picker-popover w-auto p-4", children: jsxRuntime.jsx(DatePicker, { inline: true, selected: value ?? null, minDate: minDate ? moment(minDate, 'YYYY-MM-DD').toDate() : undefined, maxDate: maxDate ? moment(maxDate, 'YYYY-MM-DD').toDate() : undefined, onChange: (date) => {
-                        onChange(date ?? undefined);
-                        if (date)
-                            setOpen(false);
-                    }, calendarClassName: "date-range-picker-calendar", formatWeekDay: (weekday) => weekday.slice(0, 2), renderCustomHeader: ({ monthDate, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, }) => (jsxRuntime.jsx(DatePickerHeader, { monthDate: monthDate, changeYear: changeYear, changeMonth: changeMonth, decreaseMonth: decreaseMonth, increaseMonth: increaseMonth, prevMonthButtonDisabled: prevMonthButtonDisabled, nextMonthButtonDisabled: nextMonthButtonDisabled, minYear: minYear, maxYear: maxYear })), children: jsxRuntime.jsxs("div", { className: "date-range-picker-footer", children: [jsxRuntime.jsx("button", { type: "button", onClick: () => {
-                                    onChange(undefined);
-                                    setOpen(false);
-                                }, className: "date-range-picker-action", children: "Clear" }), jsxRuntime.jsx("button", { type: "button", onClick: () => {
-                                    onChange(new Date());
-                                    setOpen(false);
-                                }, className: "date-range-picker-action", children: "Today" })] }) }) })] }));
+    return (jsxRuntime.jsxs(Popover, { open: open, onOpenChange: handleOpenChange, modal: true, children: [jsxRuntime.jsx(PopoverAnchor, { asChild: true, children: jsxRuntime.jsxs("div", { "data-slot": "input", "data-empty": !value || undefined, "data-invalid": invalid || undefined, className: cn('border-input-border flex h-9 w-full min-w-0 items-center gap-2 rounded-md border bg-transparent px-3 py-1 shadow-[0_1px_2px_0_#0000000d] transition-[color,box-shadow] outline-none', 'focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]', 'data-[invalid]:border-destructive data-[invalid]:ring-destructive/20 data-[invalid]:ring-[3px]', disabled && 'cursor-not-allowed bg-muted/50 text-label', className), children: [jsxRuntime.jsx("input", { ref: inputRef, type: "text", inputMode: "numeric", autoComplete: "off", spellCheck: false, id: id, name: name, value: text, placeholder: placeholder, disabled: disabled, maxLength: DATE_FORMAT.length, "aria-label": ariaLabel, "aria-invalid": invalid || undefined, title: DATE_FORMAT_HINT, onChange: handleTextChange, onKeyDown: handleKeyDown, onBlur: handleTextBlur, className: "placeholder:text-placeholder selection:bg-primary selection:text-primary-foreground h-full min-w-0 flex-1 bg-transparent text-base text-foreground outline-none placeholder:text-sm disabled:cursor-not-allowed disabled:text-label md:text-sm" }), jsxRuntime.jsx("button", { type: "button", disabled: disabled, "aria-label": CALENDAR_BUTTON_LABEL, "aria-haspopup": "dialog", "aria-expanded": open, onClick: toggleOpen, className: "-mr-1 inline-flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground outline-none hover:text-foreground focus-visible:ring-ring/50 focus-visible:ring-[2px] disabled:cursor-not-allowed", children: jsxRuntime.jsx(CalendarDays, { className: "h-4 w-4 stroke-[1.75]" }) })] }) }), jsxRuntime.jsx(PopoverContent, { align: "start", className: "date-range-picker-popover w-auto p-4", children: jsxRuntime.jsx(DatePicker, { inline: true, selected: value ?? null, minDate: toBoundDate(bounds.minDate), maxDate: toBoundDate(bounds.maxDate), onChange: selectDate, calendarClassName: "date-range-picker-calendar", formatWeekDay: (weekday) => weekday.slice(0, 2), renderCustomHeader: ({ monthDate, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, }) => (jsxRuntime.jsx(DatePickerHeader, { monthDate: monthDate, changeYear: changeYear, changeMonth: changeMonth, decreaseMonth: decreaseMonth, increaseMonth: increaseMonth, prevMonthButtonDisabled: prevMonthButtonDisabled, nextMonthButtonDisabled: nextMonthButtonDisabled, minYear: bounds.minYear, maxYear: bounds.maxYear })), children: jsxRuntime.jsxs("div", { className: "date-range-picker-footer", children: [jsxRuntime.jsx("button", { type: "button", onClick: clearDate, className: "date-range-picker-action", children: "Clear" }), jsxRuntime.jsx("button", { type: "button", onClick: selectToday, className: "date-range-picker-action", children: "Today" })] }) }) })] }));
 }
 
 const DropdownMenu = DropdownMenuPrimitive__namespace.Root;
@@ -58286,33 +58478,39 @@ function ZoomSplitViewer({ src, alt = 'Preview', zoom = 2, lensSize = 160, paneO
                 }) })), isTouchDevice && (jsxRuntime.jsx("p", { className: `text-xs text-muted-foreground text-center mt-2 ${isMobile ? 'text-2xs' : ''}`, children: isMobile ? 'Touch & hold to zoom' : 'Touch and hold to zoom' }))] }));
 }
 
-const SIZE_MAP = {
-    sm: {
-        track: { width: 28, height: 16 },
-        thumb: 12,
-        on: 14,
-        off: 2,
-    },
-    md: {
-        track: { width: 44, height: 24 },
-        thumb: 20,
-        on: 22,
-        off: 2,
-    },
-    lg: {
-        track: { width: 52, height: 28 },
-        thumb: 24,
-        on: 26,
-        off: 2,
-    },
+/** 1px border on the track, and the gap between thumb and track. */
+const TRACK_BORDER = 1;
+const THUMB_INSET = 2;
+const TRACK_SIZE = {
+    sm: { width: 28, height: 16 },
+    md: { width: 44, height: 24 },
+    lg: { width: 52, height: 28 },
 };
+/**
+ * Thumb size and travel are derived from the track rather than listed per size:
+ * hardcoding them left the thumb 1px from the top and bottom but flush against
+ * the inner right edge when on, so it bulged past the track's rounded end.
+ * Deriving keeps the inset equal on all four sides at every size.
+ */
+function switchGeometry(size) {
+    const track = TRACK_SIZE[size];
+    const innerWidth = track.width - TRACK_BORDER * 2;
+    const innerHeight = track.height - TRACK_BORDER * 2;
+    const thumb = innerHeight - THUMB_INSET * 2;
+    return {
+        track,
+        thumb,
+        off: THUMB_INSET,
+        on: innerWidth - thumb - THUMB_INSET,
+    };
+}
 const Switch = React__namespace.forwardRef(({ checked = false, onCheckedChange, disabled = false, id, name, className, size = 'md', 'aria-label': ariaLabel, }, ref) => {
     const handleClick = () => {
         if (!disabled && onCheckedChange) {
             onCheckedChange(!checked);
         }
     };
-    const dims = SIZE_MAP[size];
+    const dims = switchGeometry(size);
     return (jsxRuntime.jsx("button", { type: "button", role: "switch", "aria-checked": checked, "aria-label": ariaLabel, "data-state": checked ? 'checked' : 'unchecked', disabled: disabled, onClick: handleClick, ref: ref, id: id, name: name, style: {
             width: dims.track.width,
             height: dims.track.height,
@@ -65936,7 +66134,13 @@ function CreateFormPageHeader({ title, onBack, backLabel = 'Go back', }) {
 function CreateFormPageShell({ title, onBack, children, backLabel, scrollable = false, containerClassName, }) {
     const content = (jsxRuntime.jsxs("div", { className: cn('mx-auto w-full max-w-4xl px-4 py-4', containerClassName), children: [jsxRuntime.jsx(CreateFormPageHeader, { title: title, onBack: onBack, backLabel: backLabel }), children] }));
     if (scrollable) {
-        return (jsxRuntime.jsx("div", { className: "h-full min-h-0 overflow-y-auto bg-card", children: content }));
+        // `shrink-0` is the load-bearing part. As a flex item in the shell's
+        // `flex-col overflow-y-auto` parent this div was shrunk to the parent's
+        // height while its content overflowed, so the background stopped one
+        // screenful down and taller forms showed the page background below it.
+        // `min-h-full` alone cannot fix that — it resolves to the same shrunken
+        // height. The parent already scrolls, so no inner scroller is needed.
+        return (jsxRuntime.jsx("div", { className: "min-h-full shrink-0 bg-card", children: content }));
     }
     return content;
 }