@rufous/ui 0.2.79 → 0.2.81

package/dist/main.cjs

@@ -1908,83 +1908,492 @@ var TextField = (0, import_react17.forwardRef)(({
 TextField.displayName = "TextField";
 
 // lib/TextFields/AddressLookup.tsx
-var import_react18 = __toESM(require("react"), 1);
+var import_react19 = __toESM(require("react"), 1);
 var import_axios = __toESM(require("axios"), 1);
 var import_country_state_city = require("country-state-city");
-var AddressLookup = ({
-  value = {},
-  onChange = () => {
-  },
-  label = "Address",
-  error = {},
-  size = "medium",
-  sx = {},
-  layout = "stack",
-  required = false,
-  token = ""
-}) => {
-  const { theme } = useRufousTheme();
-  const [suggestions, setSuggestions] = (0, import_react18.useState)([]);
-  const [loading, setLoading] = (0, import_react18.useState)(false);
-  const [showSuggestions, setShowSuggestions] = (0, import_react18.useState)(false);
-  const debounceTimeout = (0, import_react18.useRef)(null);
+
+// lib/TextFields/Autocomplete.tsx
+var import_react18 = __toESM(require("react"), 1);
+var import_react_dom2 = __toESM(require("react-dom"), 1);
+var ChevronDownIcon = () => /* @__PURE__ */ import_react18.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react18.default.createElement("polyline", { points: "6 9 12 15 18 9" }));
+var CloseSmIcon = ({ size = 16 }) => /* @__PURE__ */ import_react18.default.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }, /* @__PURE__ */ import_react18.default.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), /* @__PURE__ */ import_react18.default.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" }));
+var CheckIcon = () => /* @__PURE__ */ import_react18.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react18.default.createElement("polyline", { points: "20 6 9 17 4 12" }));
+function defaultGetLabel(option) {
+  if (option === null || option === void 0) return "";
+  if (typeof option === "string") return option;
+  if (typeof option === "object" && "label" in option)
+    return String(option.label);
+  return String(option);
+}
+function defaultFilter(options, inputValue, getLabel) {
+  if (!inputValue) return options;
+  const q = inputValue.toLowerCase();
+  return options.filter((o) => getLabel(o).toLowerCase().includes(q));
+}
+function AutocompleteInner(props, _ref) {
+  const {
+    options,
+    value,
+    onChange,
+    inputValue: controlledInput,
+    onInputChange,
+    getOptionLabel = defaultGetLabel,
+    isOptionEqualToValue,
+    groupBy,
+    filterOptions,
+    renderOption,
+    getOptionDisabled,
+    multiple = false,
+    freeSolo = false,
+    clearable = true,
+    loading = false,
+    loadingText = "Loading\u2026",
+    noOptionsText = "No options",
+    limitTags,
+    label,
+    placeholder,
+    variant = "outlined",
+    size = "medium",
+    error = false,
+    helperText,
+    fullWidth = false,
+    disabled = false,
+    required = false,
+    className = "",
+    style,
+    sx,
+    onOpen,
+    onClose
+  } = props;
+  const [open, setOpen] = (0, import_react18.useState)(false);
+  const [inputStr, setInputStr] = (0, import_react18.useState)("");
+  const [focusedIdx, setFocusedIdx] = (0, import_react18.useState)(-1);
+  const [popupStyle, setPopupStyle] = (0, import_react18.useState)({});
   const containerRef = (0, import_react18.useRef)(null);
-  const apiKey = token || "";
-  const countries = import_country_state_city.Country.getAllCountries();
-  const [states, setStates] = (0, import_react18.useState)([]);
-  const [cities, setCities] = (0, import_react18.useState)([]);
+  const popupRef = (0, import_react18.useRef)(null);
+  const inputRef = (0, import_react18.useRef)(null);
+  const listRef = (0, import_react18.useRef)(null);
+  const inputId = (0, import_react18.useRef)(`rf-ac-${Math.random().toString(36).slice(2, 9)}`).current;
+  const sxClass = useSx(sx);
+  const calcPopupStyle = (0, import_react18.useCallback)(() => {
+    if (!containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    const POPUP_MAX_HEIGHT = 280;
+    const GAP2 = 4;
+    const viewportH = window.innerHeight;
+    const viewportW = window.innerWidth;
+    const spaceBelow = viewportH - rect.bottom - GAP2;
+    const spaceAbove = rect.top - GAP2;
+    const openUpward = spaceBelow < POPUP_MAX_HEIGHT && spaceAbove > spaceBelow;
+    const minLeft = 8;
+    const maxLeft = viewportW - rect.width - 8;
+    const left = Math.min(Math.max(rect.left, minLeft), maxLeft);
+    if (openUpward) {
+      setPopupStyle({
+        bottom: viewportH - rect.top + GAP2,
+        top: "auto",
+        left,
+        width: rect.width
+      });
+    } else {
+      setPopupStyle({
+        top: rect.bottom + GAP2,
+        bottom: "auto",
+        left,
+        width: rect.width
+      });
+    }
+  }, []);
+  const activeInput = controlledInput !== void 0 ? controlledInput : inputStr;
+  const selectedValues = multiple ? Array.isArray(value) ? value : [] : value != null ? [value] : [];
+  const isEqual = (0, import_react18.useCallback)(
+    (a, b) => isOptionEqualToValue ? isOptionEqualToValue(a, b) : a === b,
+    [isOptionEqualToValue]
+  );
+  const isSelected = (0, import_react18.useCallback)(
+    (opt) => selectedValues.some((v) => isEqual(opt, v)),
+    [selectedValues, isEqual]
+  );
+  const filtered = filterOptions ? filterOptions(options, activeInput) : defaultFilter(options, activeInput, getOptionLabel);
+  const flatEntries = [];
+  if (groupBy) {
+    const groups = {};
+    const order = [];
+    filtered.forEach((opt) => {
+      const g = groupBy(opt);
+      if (!groups[g]) {
+        groups[g] = [];
+        order.push(g);
+      }
+      groups[g].push(opt);
+    });
+    order.forEach((g) => {
+      flatEntries.push({ kind: "group", label: g });
+      groups[g].forEach((opt) => {
+        flatEntries.push({ kind: "option", option: opt, flatIdx: flatEntries.filter((e) => e.kind === "option").length });
+      });
+    });
+  } else {
+    filtered.forEach((opt, i) => flatEntries.push({ kind: "option", option: opt, flatIdx: i }));
+  }
+  const selectableOptions = flatEntries.filter((e) => e.kind === "option");
+  const openPopup = (0, import_react18.useCallback)(() => {
+    if (disabled) return;
+    calcPopupStyle();
+    setOpen(true);
+    setFocusedIdx(-1);
+    onOpen?.();
+  }, [disabled, calcPopupStyle, onOpen]);
+  const closePopup = (0, import_react18.useCallback)((justSelected = false) => {
+    setOpen(false);
+    setFocusedIdx(-1);
+    onClose?.();
+    if (!justSelected && !freeSolo && !multiple && value == null) {
+      setInputStr("");
+      onInputChange?.("");
+    }
+  }, [freeSolo, multiple, value, onInputChange, onClose]);
   (0, import_react18.useEffect)(() => {
-    const handleClickOutside = (event) => {
-      if (containerRef.current && !containerRef.current.contains(event.target)) {
-        setShowSuggestions(false);
+    if (!open) return;
+    const handleOutside = (e) => {
+      const target = e.target;
+      const insideContainer = containerRef.current?.contains(target);
+      const insidePopup = popupRef.current?.contains(target);
+      if (!insideContainer && !insidePopup) {
+        closePopup();
       }
     };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
+    document.addEventListener("mousedown", handleOutside);
+    window.addEventListener("scroll", calcPopupStyle, true);
+    window.addEventListener("resize", calcPopupStyle);
+    return () => {
+      document.removeEventListener("mousedown", handleOutside);
+      window.removeEventListener("scroll", calcPopupStyle, true);
+      window.removeEventListener("resize", calcPopupStyle);
+    };
+  }, [open, closePopup, calcPopupStyle]);
   (0, import_react18.useEffect)(() => {
-    if (value.country) {
-      const country = countries.find((c) => c.name === value.country);
-      if (country) {
-        const stateList = import_country_state_city.State.getStatesOfCountry(country.isoCode);
-        setStates(stateList);
-      } else {
-        setStates([]);
-      }
+    if (controlledInput !== void 0) return;
+    if (!multiple) {
+      const v = value;
+      setInputStr(v != null ? getOptionLabel(v) : "");
+    }
+  }, [value, multiple, getOptionLabel, controlledInput]);
+  const selectOption = (opt) => {
+    if (getOptionDisabled?.(opt)) return;
+    if (multiple) {
+      const already = isSelected(opt);
+      const next = already ? selectedValues.filter((v) => !isEqual(v, opt)) : [...selectedValues, opt];
+      onChange?.(next);
+      setInputStr("");
+      onInputChange?.("");
+      inputRef.current?.focus();
     } else {
-      setStates([]);
+      onChange?.(opt);
+      setInputStr(getOptionLabel(opt));
+      onInputChange?.(getOptionLabel(opt));
+      closePopup(true);
     }
-  }, [value.country]);
-  (0, import_react18.useEffect)(() => {
-    if (value.state && value.country) {
-      const country = countries.find((c) => c.name === value.country);
-      if (country) {
-        const state = import_country_state_city.State.getStatesOfCountry(country.isoCode).find((s2) => s2.name === value.state);
-        if (state) {
-          const cityList = import_country_state_city.City.getCitiesOfState(country.isoCode, state.isoCode);
-          setCities(cityList);
-        } else {
-          setCities([]);
-        }
-      } else {
-        setCities([]);
+    setFocusedIdx(-1);
+  };
+  const clearAll = (e) => {
+    e.stopPropagation();
+    onChange?.(multiple ? [] : null);
+    setInputStr("");
+    onInputChange?.("");
+    inputRef.current?.focus();
+  };
+  const removeTag = (opt, e) => {
+    e.stopPropagation();
+    const next = selectedValues.filter((v) => !isEqual(v, opt));
+    onChange?.(next);
+  };
+  const handleInputChange = (e) => {
+    const v = e.target.value;
+    setInputStr(v);
+    onInputChange?.(v);
+    if (!open) openPopup();
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      if (!open) {
+        openPopup();
+        return;
       }
-    } else {
-      setCities([]);
+      setFocusedIdx((i) => {
+        const next = (i + 1) % selectableOptions.length;
+        scrollOptionIntoView(next);
+        return next;
+      });
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      if (!open) {
+        openPopup();
+        return;
+      }
+      setFocusedIdx((i) => {
+        const next = (i - 1 + selectableOptions.length) % selectableOptions.length;
+        scrollOptionIntoView(next);
+        return next;
+      });
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      if (!open) {
+        openPopup();
+        return;
+      }
+      if (focusedIdx >= 0 && focusedIdx < selectableOptions.length) {
+        selectOption(selectableOptions[focusedIdx].option);
+      } else if (freeSolo && activeInput) {
+        onChange?.(activeInput);
+        if (!multiple) closePopup();
+      }
+    } else if (e.key === "Escape") {
+      closePopup();
+    } else if (e.key === "Backspace" && multiple && !activeInput && selectedValues.length > 0) {
+      removeTag(selectedValues[selectedValues.length - 1], { stopPropagation: () => {
+      } });
     }
-  }, [value.state, value.country]);
-  const handleChange = (field, newVal) => {
-    onChange({
-      ...value,
-      [field]: newVal
+  };
+  const scrollOptionIntoView = (idx) => {
+    requestAnimationFrame(() => {
+      const el = listRef.current?.querySelector(`[data-idx="${idx}"]`);
+      el?.scrollIntoView({ block: "nearest" });
     });
   };
-  const fetchPlaceDetails = async (placeId, mainText = "") => {
-    if (!apiKey) {
-      console.warn("Google Places API Key (token) is missing.");
-      return;
-    }
-    setLoading(true);
+  const hasClearable = clearable && !disabled && (multiple ? selectedValues.length > 0 : value != null);
+  const visibleTags = multiple && limitTags != null ? selectedValues.slice(0, limitTags) : selectedValues;
+  const hiddenCount = multiple && limitTags != null ? Math.max(0, selectedValues.length - limitTags) : 0;
+  const isFloating = Boolean(
+    open || activeInput || (multiple ? selectedValues.length > 0 : value != null)
+  );
+  const rootClasses = [
+    "rf-text-field",
+    `rf-text-field--${variant}`,
+    `rf-text-field--${size}`,
+    "rf-text-field--primary",
+    error ? "rf-text-field--error" : "",
+    fullWidth ? "rf-text-field--full-width" : "",
+    disabled ? "rf-text-field--disabled" : "",
+    isFloating ? "rf-text-field--floating" : "",
+    label ? "rf-text-field--has-label" : "",
+    "rf-text-field--adorned-end",
+    "rf-autocomplete",
+    sxClass,
+    className
+  ].filter(Boolean).join(" ");
+  const inputPlaceholder = placeholder || (variant === "outlined" ? " " : void 0);
+  return /* @__PURE__ */ import_react18.default.createElement("div", { ref: containerRef, className: rootClasses, style }, /* @__PURE__ */ import_react18.default.createElement(
+    "div",
+    {
+      className: "rf-text-field__wrapper",
+      onClick: () => {
+        if (!disabled) {
+          inputRef.current?.focus();
+          if (!open) openPopup();
+        }
+      }
+    },
+    multiple && visibleTags.map((opt, i) => /* @__PURE__ */ import_react18.default.createElement("span", { key: i, className: "rf-autocomplete__tag" }, /* @__PURE__ */ import_react18.default.createElement("span", { style: { overflow: "hidden", textOverflow: "ellipsis" } }, getOptionLabel(opt)), /* @__PURE__ */ import_react18.default.createElement(
+      "button",
+      {
+        type: "button",
+        className: "rf-autocomplete__tag-delete",
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: (e) => removeTag(opt, e),
+        tabIndex: -1
+      },
+      /* @__PURE__ */ import_react18.default.createElement(CloseSmIcon, { size: 12 })
+    ))),
+    hiddenCount > 0 && /* @__PURE__ */ import_react18.default.createElement("span", { className: "rf-autocomplete__tag-more" }, "+", hiddenCount, " more"),
+    /* @__PURE__ */ import_react18.default.createElement(
+      "input",
+      {
+        ref: inputRef,
+        id: inputId,
+        className: "rf-text-field__input",
+        type: "text",
+        value: activeInput,
+        onChange: handleInputChange,
+        onFocus: () => {
+          if (!open) openPopup();
+        },
+        onKeyDown: handleKeyDown,
+        placeholder: !multiple || selectedValues.length === 0 ? inputPlaceholder : void 0,
+        disabled,
+        autoComplete: "off",
+        role: "combobox",
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        "aria-autocomplete": "list"
+      }
+    ),
+    label && /* @__PURE__ */ import_react18.default.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, required && /* @__PURE__ */ import_react18.default.createElement("span", { className: "rf-text-field__asterisk" }, " *")),
+    variant === "outlined" && /* @__PURE__ */ import_react18.default.createElement("fieldset", { className: "rf-text-field__notch" }, label ? /* @__PURE__ */ import_react18.default.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ import_react18.default.createElement("span", null, label, required ? " *" : "")) : /* @__PURE__ */ import_react18.default.createElement("legend", { className: "rf-text-field__legend--empty" })),
+    /* @__PURE__ */ import_react18.default.createElement("div", { className: "rf-autocomplete__endgroup" }, hasClearable && /* @__PURE__ */ import_react18.default.createElement(
+      "button",
+      {
+        type: "button",
+        className: "rf-autocomplete__icon-btn",
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: clearAll,
+        tabIndex: -1,
+        "aria-label": "Clear"
+      },
+      /* @__PURE__ */ import_react18.default.createElement(CloseSmIcon, { size: 16 })
+    ), !freeSolo && /* @__PURE__ */ import_react18.default.createElement(
+      "button",
+      {
+        type: "button",
+        className: `rf-autocomplete__icon-btn rf-autocomplete__icon-btn--popup ${open ? "rf-autocomplete__icon-btn--open" : ""}`,
+        onMouseDown: (e) => {
+          e.preventDefault();
+          open ? closePopup() : openPopup();
+        },
+        tabIndex: -1,
+        "aria-label": open ? "Close" : "Open"
+      },
+      /* @__PURE__ */ import_react18.default.createElement(ChevronDownIcon, null)
+    ))
+  ), helperText && /* @__PURE__ */ import_react18.default.createElement("div", { className: `rf-text-field__helper-text${error ? " rf-text-field__helper-text--error" : ""}` }, helperText), open && !disabled && import_react_dom2.default.createPortal(
+    /* @__PURE__ */ import_react18.default.createElement("div", { ref: popupRef, className: "rf-autocomplete__popup", role: "presentation", style: popupStyle }, loading ? /* @__PURE__ */ import_react18.default.createElement("div", { className: "rf-autocomplete__loading" }, /* @__PURE__ */ import_react18.default.createElement("span", { className: "rf-ac-spinner" }), loadingText) : flatEntries.length === 0 ? /* @__PURE__ */ import_react18.default.createElement("div", { className: "rf-autocomplete__no-options" }, noOptionsText) : /* @__PURE__ */ import_react18.default.createElement("ul", { ref: listRef, className: "rf-autocomplete__listbox", role: "listbox" }, groupBy ? (
+      // Grouped render
+      (() => {
+        const rendered = [];
+        let groupItems = [];
+        let currentGroup = "";
+        flatEntries.forEach((entry, ei) => {
+          if (entry.kind === "group") {
+            if (groupItems.length > 0) {
+              rendered.push(
+                /* @__PURE__ */ import_react18.default.createElement("li", { key: `g-${currentGroup}`, role: "presentation" }, /* @__PURE__ */ import_react18.default.createElement("div", { className: "rf-autocomplete__group-header" }, currentGroup), /* @__PURE__ */ import_react18.default.createElement("ul", { className: "rf-autocomplete__group-items", role: "group" }, groupItems))
+              );
+              groupItems = [];
+            }
+            currentGroup = entry.label;
+          } else {
+            const { option, flatIdx } = entry;
+            groupItems.push(renderOptionItem(option, flatIdx));
+          }
+          if (ei === flatEntries.length - 1 && groupItems.length > 0) {
+            rendered.push(
+              /* @__PURE__ */ import_react18.default.createElement("li", { key: `g-${currentGroup}`, role: "presentation" }, /* @__PURE__ */ import_react18.default.createElement("div", { className: "rf-autocomplete__group-header" }, currentGroup), /* @__PURE__ */ import_react18.default.createElement("ul", { className: "rf-autocomplete__group-items", role: "group" }, groupItems))
+            );
+          }
+        });
+        return rendered;
+      })()
+    ) : selectableOptions.map(({ option, flatIdx }) => renderOptionItem(option, flatIdx)))),
+    document.body
+  ));
+  function renderOptionItem(option, flatIdx) {
+    const selected = isSelected(option);
+    const focused = focusedIdx === flatIdx;
+    const optDisabled = getOptionDisabled?.(option) ?? false;
+    const label2 = getOptionLabel(option);
+    return /* @__PURE__ */ import_react18.default.createElement(
+      "li",
+      {
+        key: label2 + flatIdx,
+        "data-idx": flatIdx,
+        role: "option",
+        "aria-selected": selected,
+        "aria-disabled": optDisabled,
+        className: [
+          "rf-autocomplete__option",
+          selected ? "rf-autocomplete__option--selected" : "",
+          focused ? "rf-autocomplete__option--focused" : "",
+          optDisabled ? "rf-autocomplete__option--disabled" : ""
+        ].filter(Boolean).join(" "),
+        onMouseEnter: () => setFocusedIdx(flatIdx),
+        onMouseLeave: () => setFocusedIdx(-1),
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => selectOption(option)
+      },
+      renderOption ? renderOption(option, { selected, focused, index: flatIdx }) : /* @__PURE__ */ import_react18.default.createElement("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, label2),
+      !renderOption && /* @__PURE__ */ import_react18.default.createElement("span", { className: "rf-autocomplete__option-check" }, /* @__PURE__ */ import_react18.default.createElement(CheckIcon, null))
+    );
+  }
+}
+var Autocomplete = import_react18.default.forwardRef(AutocompleteInner);
+Autocomplete.displayName = "Autocomplete";
+
+// lib/TextFields/AddressLookup.tsx
+var AddressLookup = ({
+  value = {},
+  onChange = () => {
+  },
+  label = "Address",
+  error = {},
+  size = "medium",
+  sx = {},
+  layout = "stack",
+  required = false,
+  token = ""
+}) => {
+  const { theme } = useRufousTheme();
+  const [suggestions, setSuggestions] = (0, import_react19.useState)([]);
+  const [loading, setLoading] = (0, import_react19.useState)(false);
+  const [showSuggestions, setShowSuggestions] = (0, import_react19.useState)(false);
+  const debounceTimeout = (0, import_react19.useRef)(null);
+  const containerRef = (0, import_react19.useRef)(null);
+  const apiKey = token || "";
+  const countries = import_country_state_city.Country.getAllCountries();
+  const [states, setStates] = (0, import_react19.useState)([]);
+  const [cities, setCities] = (0, import_react19.useState)([]);
+  (0, import_react19.useEffect)(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setShowSuggestions(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  (0, import_react19.useEffect)(() => {
+    if (value.country) {
+      const country = countries.find((c) => c.name === value.country);
+      if (country) {
+        const stateList = import_country_state_city.State.getStatesOfCountry(country.isoCode);
+        setStates(stateList);
+      } else {
+        setStates([]);
+      }
+    } else {
+      setStates([]);
+    }
+  }, [value.country]);
+  (0, import_react19.useEffect)(() => {
+    if (value.state && value.country) {
+      const country = countries.find((c) => c.name === value.country);
+      if (country) {
+        const state = import_country_state_city.State.getStatesOfCountry(country.isoCode).find((s2) => s2.name === value.state);
+        if (state) {
+          const cityList = import_country_state_city.City.getCitiesOfState(country.isoCode, state.isoCode);
+          setCities(cityList);
+        } else {
+          setCities([]);
+        }
+      } else {
+        setCities([]);
+      }
+    } else {
+      setCities([]);
+    }
+  }, [value.state, value.country]);
+  const handleChange = (field, newVal) => {
+    onChange({
+      ...value,
+      [field]: newVal
+    });
+  };
+  const fetchPlaceDetails = async (placeId, mainText = "") => {
+    if (!apiKey) {
+      console.warn("Google Places API Key (token) is missing.");
+      return;
+    }
+    setLoading(true);
     try {
       const res = await import_axios.default.get(
         `https://places.googleapis.com/v1/places/${placeId}`,
@@ -2060,7 +2469,7 @@ var AddressLookup = ({
       city: ""
     });
   };
-  return /* @__PURE__ */ import_react18.default.createElement("div", { className: "address-lookup-container", style: sx, ref: containerRef }, /* @__PURE__ */ import_react18.default.createElement("div", { className: `address-lookup-grid address-lookup-grid-${layout}` }, /* @__PURE__ */ import_react18.default.createElement("div", { className: "address-lookup-grid-item col-l1" }, /* @__PURE__ */ import_react18.default.createElement(
+  return /* @__PURE__ */ import_react19.default.createElement("div", { className: "address-lookup-container", style: sx, ref: containerRef }, /* @__PURE__ */ import_react19.default.createElement("div", { className: `address-lookup-grid address-lookup-grid-${layout}` }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "address-lookup-grid-item col-l1" }, /* @__PURE__ */ import_react19.default.createElement(
     TextField,
     {
       label,
@@ -2092,7 +2501,7 @@ var AddressLookup = ({
       },
       onFocus: () => suggestions.length > 0 && setShowSuggestions(true)
     }
-  ), loading && /* @__PURE__ */ import_react18.default.createElement("div", { className: "loading-indicator" }, /* @__PURE__ */ import_react18.default.createElement(circularProgress_default, { size: 20 })), showSuggestions && suggestions.length > 0 && /* @__PURE__ */ import_react18.default.createElement("div", { className: "autocomplete-dropdown" }, suggestions.map((option, idx) => /* @__PURE__ */ import_react18.default.createElement(
+  ), loading && /* @__PURE__ */ import_react19.default.createElement("div", { className: "loading-indicator" }, /* @__PURE__ */ import_react19.default.createElement(circularProgress_default, { size: 20 })), showSuggestions && suggestions.length > 0 && /* @__PURE__ */ import_react19.default.createElement("div", { className: "autocomplete-dropdown" }, suggestions.map((option, idx) => /* @__PURE__ */ import_react19.default.createElement(
     "div",
     {
       key: idx,
@@ -2103,9 +2512,9 @@ var AddressLookup = ({
         fetchPlaceDetails(option.placePrediction.placeId, mainText);
       }
     },
-    /* @__PURE__ */ import_react18.default.createElement("div", { className: "autocomplete-main-text" }, option?.placePrediction?.structuredFormat?.mainText?.text),
-    /* @__PURE__ */ import_react18.default.createElement("div", { className: "autocomplete-secondary-text" }, option?.placePrediction?.structuredFormat?.secondaryText?.text)
-  ))), error.addressLine1 && /* @__PURE__ */ import_react18.default.createElement("div", { className: "field-error-text" }, error.addressLine1)), layout === "compact" && /* @__PURE__ */ import_react18.default.createElement("div", { className: "address-lookup-grid-item col-l2" }, /* @__PURE__ */ import_react18.default.createElement(
+    /* @__PURE__ */ import_react19.default.createElement("div", { className: "autocomplete-main-text" }, option?.placePrediction?.structuredFormat?.mainText?.text),
+    /* @__PURE__ */ import_react19.default.createElement("div", { className: "autocomplete-secondary-text" }, option?.placePrediction?.structuredFormat?.secondaryText?.text)
+  ))), error.addressLine1 && /* @__PURE__ */ import_react19.default.createElement("div", { className: "field-error-text" }, error.addressLine1)), layout === "compact" && /* @__PURE__ */ import_react19.default.createElement("div", { className: "address-lookup-grid-item col-l2" }, /* @__PURE__ */ import_react19.default.createElement(
     TextField,
     {
       label: "Address Line 2",
@@ -2114,7 +2523,7 @@ var AddressLookup = ({
       value: value.addressLine2 || "",
       onChange: (e) => handleChange("addressLine2", e.target.value)
     }
-  )), layout !== "compact" && /* @__PURE__ */ import_react18.default.createElement("div", { className: "address-lookup-grid-item col-l2" }, /* @__PURE__ */ import_react18.default.createElement(
+  )), layout !== "compact" && /* @__PURE__ */ import_react19.default.createElement("div", { className: "address-lookup-grid-item col-l2" }, /* @__PURE__ */ import_react19.default.createElement(
     TextField,
     {
       label: "Address Line 2",
@@ -2123,40 +2532,40 @@ var AddressLookup = ({
       value: value.addressLine2 || "",
       onChange: (e) => handleChange("addressLine2", e.target.value)
     }
-  )), /* @__PURE__ */ import_react18.default.createElement("div", { className: "address-lookup-grid-item col-country" }, /* @__PURE__ */ import_react18.default.createElement(
-    TextField,
+  )), /* @__PURE__ */ import_react19.default.createElement("div", { className: "address-lookup-grid-item col-country" }, /* @__PURE__ */ import_react19.default.createElement(
+    Autocomplete,
     {
+      options: countries.map((c) => c.name),
+      value: value.country || null,
+      onChange: (v) => handleCountryChange(v || ""),
       label: "Country",
-      name: "country",
       fullWidth: true,
-      value: value.country || "",
       required,
-      onChange: (e) => handleCountryChange(e.target.value),
-      list: "countries-list"
+      error: !!error.country
     }
-  ), /* @__PURE__ */ import_react18.default.createElement("datalist", { id: "countries-list" }, countries.map((c) => /* @__PURE__ */ import_react18.default.createElement("option", { key: c.isoCode, value: c.name }))), error.country && /* @__PURE__ */ import_react18.default.createElement("div", { className: "field-error-text" }, error.country)), /* @__PURE__ */ import_react18.default.createElement("div", { className: "address-lookup-grid-item col-state" }, /* @__PURE__ */ import_react18.default.createElement(
-    TextField,
+  ), error.country && /* @__PURE__ */ import_react19.default.createElement("div", { className: "field-error-text" }, error.country)), /* @__PURE__ */ import_react19.default.createElement("div", { className: "address-lookup-grid-item col-state" }, /* @__PURE__ */ import_react19.default.createElement(
+    Autocomplete,
     {
+      options: states.map((s2) => s2.name),
+      value: value.state || null,
+      onChange: (v) => handleStateChange(v || ""),
       label: "State",
-      name: "state",
       fullWidth: true,
-      value: value.state || "",
       required,
-      onChange: (e) => handleStateChange(e.target.value),
-      list: "states-list"
+      error: !!error.state
     }
-  ), /* @__PURE__ */ import_react18.default.createElement("datalist", { id: "states-list" }, states.map((s2) => /* @__PURE__ */ import_react18.default.createElement("option", { key: s2.isoCode, value: s2.name }))), error.state && /* @__PURE__ */ import_react18.default.createElement("div", { className: "field-error-text" }, error.state)), /* @__PURE__ */ import_react18.default.createElement("div", { className: "address-lookup-grid-item col-city" }, /* @__PURE__ */ import_react18.default.createElement(
-    TextField,
+  ), error.state && /* @__PURE__ */ import_react19.default.createElement("div", { className: "field-error-text" }, error.state)), /* @__PURE__ */ import_react19.default.createElement("div", { className: "address-lookup-grid-item col-city" }, /* @__PURE__ */ import_react19.default.createElement(
+    Autocomplete,
     {
+      options: cities.map((c) => c.name),
+      value: value.city || null,
+      onChange: (v) => handleChange("city", v || ""),
       label: "City",
-      name: "city",
       fullWidth: true,
-      value: value.city || "",
       required,
-      onChange: (e) => handleChange("city", e.target.value),
-      list: "cities-list"
+      error: !!error.city
     }
-  ), /* @__PURE__ */ import_react18.default.createElement("datalist", { id: "cities-list" }, cities.map((c, i) => /* @__PURE__ */ import_react18.default.createElement("option", { key: i, value: c.name }))), error.city && /* @__PURE__ */ import_react18.default.createElement("div", { className: "field-error-text" }, error.city)), /* @__PURE__ */ import_react18.default.createElement("div", { className: "address-lookup-grid-item col-pin" }, /* @__PURE__ */ import_react18.default.createElement(
+  ), error.city && /* @__PURE__ */ import_react19.default.createElement("div", { className: "field-error-text" }, error.city)), /* @__PURE__ */ import_react19.default.createElement("div", { className: "address-lookup-grid-item col-pin" }, /* @__PURE__ */ import_react19.default.createElement(
     TextField,
     {
       label: "Pincode",
@@ -2166,13 +2575,13 @@ var AddressLookup = ({
       required,
       onChange: (e) => handleChange("pincode", e.target.value)
     }
-  ), error.pincode && /* @__PURE__ */ import_react18.default.createElement("div", { className: "field-error-text" }, error.pincode))));
+  ), error.pincode && /* @__PURE__ */ import_react19.default.createElement("div", { className: "field-error-text" }, error.pincode))));
 };
 var AddressLookup_default = AddressLookup;
 
 // lib/TextFields/DateField.tsx
-var import_react19 = __toESM(require("react"), 1);
-var import_react_dom2 = require("react-dom");
+var import_react20 = __toESM(require("react"), 1);
+var import_react_dom3 = require("react-dom");
 var WEEKDAYS = ["SU", "MO", "TU", "WE", "TH", "FR", "SA"];
 var MONTHS = [
   "January",
@@ -2239,6 +2648,13 @@ var parseMonthName = (name) => {
   idx = MONTHS_SHORT.findIndex((m) => m.toLowerCase() === lower);
   return idx;
 };
+var strictDate = (yyyy, mm0, dd) => {
+  if (dd < 1 || dd > 31 || mm0 < 0 || mm0 > 11) return null;
+  const d = new Date(yyyy, mm0, dd);
+  if (isNaN(d.getTime())) return null;
+  if (d.getMonth() !== mm0 || d.getDate() !== dd) return null;
+  return d;
+};
 var parseDisplay = (str, fmt = "MM/DD/YYYY") => {
   if (fmt === "DD MMM YYYY" || fmt === "DD MMMM YYYY") {
     const parts2 = str.split(" ");
@@ -2246,9 +2662,8 @@ var parseDisplay = (str, fmt = "MM/DD/YYYY") => {
     const dd2 = parseInt(parts2[0], 10);
     const mm2 = parseMonthName(parts2[1]);
     const yyyy2 = parseInt(parts2[2], 10);
-    if (isNaN(dd2) || mm2 < 0 || isNaN(yyyy2) || yyyy2 < 1e3) return null;
-    const d2 = new Date(yyyy2, mm2, dd2);
-    return isNaN(d2.getTime()) ? null : d2;
+    if (isNaN(dd2) || isNaN(yyyy2) || yyyy2 < 1e3) return null;
+    return strictDate(yyyy2, mm2, dd2);
   }
   if (fmt === "MMM DD, YYYY" || fmt === "MMMM DD, YYYY") {
     const cleaned = str.replace(",", "");
@@ -2257,9 +2672,8 @@ var parseDisplay = (str, fmt = "MM/DD/YYYY") => {
     const mm2 = parseMonthName(parts2[0]);
     const dd2 = parseInt(parts2[1], 10);
     const yyyy2 = parseInt(parts2[2], 10);
-    if (mm2 < 0 || isNaN(dd2) || isNaN(yyyy2) || yyyy2 < 1e3) return null;
-    const d2 = new Date(yyyy2, mm2, dd2);
-    return isNaN(d2.getTime()) ? null : d2;
+    if (isNaN(dd2) || isNaN(yyyy2) || yyyy2 < 1e3) return null;
+    return strictDate(yyyy2, mm2, dd2);
   }
   const sep = str.includes("/") ? "/" : "-";
   const parts = str.split(sep);
@@ -2281,10 +2695,8 @@ var parseDisplay = (str, fmt = "MM/DD/YYYY") => {
       [mm, dd, yyyy] = nums;
       break;
   }
-  if (!mm || !dd || !yyyy || yyyy < 1e3) return null;
-  const d = new Date(yyyy, mm - 1, dd);
-  if (isNaN(d.getTime())) return null;
-  return d;
+  if (!yyyy || yyyy < 1e3) return null;
+  return strictDate(yyyy, mm - 1, dd);
 };
 var isoToDate = (iso) => {
   if (!iso) return null;
@@ -2308,6 +2720,17 @@ var buildISO = (date, type, hour, minute, ampm) => {
   if (ampm === "PM") h24 += 12;
   return `${y}-${mo}-${d}T${String(h24).padStart(2, "0")}:${String(minute).padStart(2, "0")}`;
 };
+var getDateWordCount = (fmt) => {
+  switch (fmt) {
+    case "DD MMM YYYY":
+    case "MMM DD, YYYY":
+    case "DD MMMM YYYY":
+    case "MMMM DD, YYYY":
+      return 3;
+    default:
+      return 1;
+  }
+};
 var parseTimeFromISO = (iso) => {
   const timePart = iso.split("T")[1] || "";
   const [hStr, mStr] = timePart.split(":");
@@ -2318,25 +2741,25 @@ var parseTimeFromISO = (iso) => {
   if (h === 0) h = 12;
   return { h, m, ampm };
 };
-var CalendarIcon = () => /* @__PURE__ */ import_react19.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react19.default.createElement("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), /* @__PURE__ */ import_react19.default.createElement("line", { x1: "16", y1: "2", x2: "16", y2: "6" }), /* @__PURE__ */ import_react19.default.createElement("line", { x1: "8", y1: "2", x2: "8", y2: "6" }), /* @__PURE__ */ import_react19.default.createElement("line", { x1: "3", y1: "10", x2: "21", y2: "10" }));
-var ChevUp = () => /* @__PURE__ */ import_react19.default.createElement("svg", { width: "10", height: "7", viewBox: "0 0 10 7", fill: "currentColor" }, /* @__PURE__ */ import_react19.default.createElement("path", { d: "M5 0L10 7H0L5 0Z" }));
-var ChevDown = () => /* @__PURE__ */ import_react19.default.createElement("svg", { width: "10", height: "7", viewBox: "0 0 10 7", fill: "currentColor" }, /* @__PURE__ */ import_react19.default.createElement("path", { d: "M5 7L0 0H10L5 7Z" }));
+var CalendarIcon = () => /* @__PURE__ */ import_react20.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react20.default.createElement("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), /* @__PURE__ */ import_react20.default.createElement("line", { x1: "16", y1: "2", x2: "16", y2: "6" }), /* @__PURE__ */ import_react20.default.createElement("line", { x1: "8", y1: "2", x2: "8", y2: "6" }), /* @__PURE__ */ import_react20.default.createElement("line", { x1: "3", y1: "10", x2: "21", y2: "10" }));
+var ChevUp = () => /* @__PURE__ */ import_react20.default.createElement("svg", { width: "10", height: "7", viewBox: "0 0 10 7", fill: "currentColor" }, /* @__PURE__ */ import_react20.default.createElement("path", { d: "M5 0L10 7H0L5 0Z" }));
+var ChevDown = () => /* @__PURE__ */ import_react20.default.createElement("svg", { width: "10", height: "7", viewBox: "0 0 10 7", fill: "currentColor" }, /* @__PURE__ */ import_react20.default.createElement("path", { d: "M5 7L0 0H10L5 7Z" }));
 var ITEM_H = 36;
 var ScrollColumn = ({ items, selected, onSelect, infinite = true }) => {
-  const listRef = (0, import_react19.useRef)(null);
-  const isInternalScroll = (0, import_react19.useRef)(false);
-  const scrollTimeout = (0, import_react19.useRef)(null);
+  const listRef = (0, import_react20.useRef)(null);
+  const isInternalScroll = (0, import_react20.useRef)(false);
+  const scrollTimeout = (0, import_react20.useRef)(null);
   const MULTIPLIER = infinite ? 100 : 1;
   const virtualItems = infinite ? Array(MULTIPLIER).fill(items).flat() : items;
   const centerOffset = infinite ? Math.floor(MULTIPLIER / 2) * items.length : 0;
   const VISUAL_OFFSET = 54;
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (listRef.current) {
       const targetIndex = centerOffset + selected;
       listRef.current.scrollTop = targetIndex * ITEM_H - (infinite ? VISUAL_OFFSET : 0);
     }
   }, [centerOffset, infinite, selected]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (listRef.current && !isInternalScroll.current) {
       const targetIndex = centerOffset + selected;
       listRef.current.scrollTo({
@@ -2368,15 +2791,15 @@ var ScrollColumn = ({ items, selected, onSelect, infinite = true }) => {
       }
     }, 100);
   };
-  return /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-timescroll__col-wrapper" }, /* @__PURE__ */ import_react19.default.createElement(
+  return /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-timescroll__col-wrapper" }, /* @__PURE__ */ import_react20.default.createElement(
     "div",
     {
       className: "rf-timescroll__col",
       ref: listRef,
       onScroll: handleScroll
     },
-    !infinite && /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-timescroll__spacer" }),
-    virtualItems.map((label, idx) => /* @__PURE__ */ import_react19.default.createElement(
+    !infinite && /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-timescroll__spacer" }),
+    virtualItems.map((label, idx) => /* @__PURE__ */ import_react20.default.createElement(
       "div",
       {
         key: `${label}-${idx}`,
@@ -2384,8 +2807,8 @@ var ScrollColumn = ({ items, selected, onSelect, infinite = true }) => {
       },
       label
     )),
-    !infinite && /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-timescroll__spacer" })
-  ), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-timescroll__mask rf-timescroll__mask--top" }), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-timescroll__mask rf-timescroll__mask--bottom" }));
+    !infinite && /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-timescroll__spacer" })
+  ), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-timescroll__mask rf-timescroll__mask--top" }), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-timescroll__mask rf-timescroll__mask--bottom" }));
 };
 var SpinnerPanel = ({
   hour,
@@ -2396,7 +2819,7 @@ var SpinnerPanel = ({
   onHourInput,
   onMinuteInput,
   onAmpmToggle
-}) => /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__time-row" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__time-input-wrap" }, /* @__PURE__ */ import_react19.default.createElement("button", { type: "button", className: "rf-date-picker__time-spin-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => onHourChange(1) }, /* @__PURE__ */ import_react19.default.createElement(ChevUp, null)), /* @__PURE__ */ import_react19.default.createElement(
+}) => /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__time-row" }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__time-input-wrap" }, /* @__PURE__ */ import_react20.default.createElement("button", { type: "button", className: "rf-date-picker__time-spin-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => onHourChange(1) }, /* @__PURE__ */ import_react20.default.createElement(ChevUp, null)), /* @__PURE__ */ import_react20.default.createElement(
   "input",
   {
     type: "number",
@@ -2407,7 +2830,7 @@ var SpinnerPanel = ({
     onChange: onHourInput,
     onMouseDown: (e) => e.stopPropagation()
   }
-), /* @__PURE__ */ import_react19.default.createElement("button", { type: "button", className: "rf-date-picker__time-spin-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => onHourChange(-1) }, /* @__PURE__ */ import_react19.default.createElement(ChevDown, null))), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__time-colon" }, ":"), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__time-input-wrap" }, /* @__PURE__ */ import_react19.default.createElement("button", { type: "button", className: "rf-date-picker__time-spin-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => onMinuteChange(1) }, /* @__PURE__ */ import_react19.default.createElement(ChevUp, null)), /* @__PURE__ */ import_react19.default.createElement(
+), /* @__PURE__ */ import_react20.default.createElement("button", { type: "button", className: "rf-date-picker__time-spin-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => onHourChange(-1) }, /* @__PURE__ */ import_react20.default.createElement(ChevDown, null))), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__time-colon" }, ":"), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__time-input-wrap" }, /* @__PURE__ */ import_react20.default.createElement("button", { type: "button", className: "rf-date-picker__time-spin-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => onMinuteChange(1) }, /* @__PURE__ */ import_react20.default.createElement(ChevUp, null)), /* @__PURE__ */ import_react20.default.createElement(
   "input",
   {
     type: "number",
@@ -2418,7 +2841,7 @@ var SpinnerPanel = ({
     onChange: onMinuteInput,
     onMouseDown: (e) => e.stopPropagation()
   }
-), /* @__PURE__ */ import_react19.default.createElement("button", { type: "button", className: "rf-date-picker__time-spin-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => onMinuteChange(-1) }, /* @__PURE__ */ import_react19.default.createElement(ChevDown, null))), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__ampm" }, /* @__PURE__ */ import_react19.default.createElement(
+), /* @__PURE__ */ import_react20.default.createElement("button", { type: "button", className: "rf-date-picker__time-spin-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => onMinuteChange(-1) }, /* @__PURE__ */ import_react20.default.createElement(ChevDown, null))), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__ampm" }, /* @__PURE__ */ import_react20.default.createElement(
   "button",
   {
     type: "button",
@@ -2427,7 +2850,7 @@ var SpinnerPanel = ({
     onClick: () => onAmpmToggle("AM")
   },
   "AM"
-), /* @__PURE__ */ import_react19.default.createElement(
+), /* @__PURE__ */ import_react20.default.createElement(
   "button",
   {
     type: "button",
@@ -2449,7 +2872,7 @@ var CalendarBody = ({
   onMonthSelect,
   onYearSelect
 }) => {
-  const [pickerView, setPickerView] = (0, import_react19.useState)("calendar");
+  const [pickerView, setPickerView] = (0, import_react20.useState)("calendar");
   const handleMonthClick = () => {
     setPickerView(pickerView === "month" ? "calendar" : "month");
   };
@@ -2467,21 +2890,21 @@ var CalendarBody = ({
   const currentYear = todayDate.getFullYear();
   const yearStart = viewYear - 6;
   const years = Array.from({ length: 16 }, (_, i) => yearStart + i);
-  return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__header" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__header-labels" }, /* @__PURE__ */ import_react19.default.createElement(
+  return /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__header" }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__header-labels" }, /* @__PURE__ */ import_react20.default.createElement(
     "span",
     {
       className: `rf-date-picker__month-label ${pickerView === "month" ? "rf-date-picker__month-label--active" : ""}`,
       onClick: handleMonthClick
     },
     MONTHS[viewMonth]
-  ), /* @__PURE__ */ import_react19.default.createElement(
+  ), /* @__PURE__ */ import_react20.default.createElement(
     "span",
     {
       className: `rf-date-picker__year-label ${pickerView === "year" ? "rf-date-picker__year-label--active" : ""}`,
       onClick: handleYearClick
     },
     viewYear
-  )), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__nav" }, pickerView === "year" ? /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear - 16), "aria-label": "Previous years" }, "\u2039"), /* @__PURE__ */ import_react19.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear + 16), "aria-label": "Next years" }, "\u203A")) : /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onPrev, "aria-label": "Previous month" }, "\u2039"), /* @__PURE__ */ import_react19.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onNext, "aria-label": "Next month" }, "\u203A")))), pickerView === "month" && /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__month-grid" }, MONTHS_SHORT.map((m, idx) => /* @__PURE__ */ import_react19.default.createElement(
+  )), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__nav" }, pickerView === "year" ? /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear - 16), "aria-label": "Previous years" }, "\u2039"), /* @__PURE__ */ import_react20.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear + 16), "aria-label": "Next years" }, "\u203A")) : /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onPrev, "aria-label": "Previous month" }, "\u2039"), /* @__PURE__ */ import_react20.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onNext, "aria-label": "Next month" }, "\u203A")))), pickerView === "month" && /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__month-grid" }, MONTHS_SHORT.map((m, idx) => /* @__PURE__ */ import_react20.default.createElement(
     "button",
     {
       key: m,
@@ -2494,7 +2917,7 @@ var CalendarBody = ({
       onClick: () => handleMonthPick(idx)
     },
     m
-  ))), pickerView === "year" && /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__year-grid" }, years.map((y) => /* @__PURE__ */ import_react19.default.createElement(
+  ))), pickerView === "year" && /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__year-grid" }, years.map((y) => /* @__PURE__ */ import_react20.default.createElement(
     "button",
     {
       key: y,
@@ -2507,12 +2930,12 @@ var CalendarBody = ({
       onClick: () => handleYearPick(y)
     },
     y
-  ))), pickerView === "calendar" && /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__weekdays" }, WEEKDAYS.map((w) => /* @__PURE__ */ import_react19.default.createElement("div", { key: w, className: "rf-date-picker__weekday" }, w))), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__grid" }, dayCells.map((day, idx) => {
-    if (day === null) return /* @__PURE__ */ import_react19.default.createElement("div", { key: `e-${idx}`, className: "rf-date-picker__day rf-date-picker__day--empty" });
+  ))), pickerView === "calendar" && /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__weekdays" }, WEEKDAYS.map((w) => /* @__PURE__ */ import_react20.default.createElement("div", { key: w, className: "rf-date-picker__weekday" }, w))), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__grid" }, dayCells.map((day, idx) => {
+    if (day === null) return /* @__PURE__ */ import_react20.default.createElement("div", { key: `e-${idx}`, className: "rf-date-picker__day rf-date-picker__day--empty" });
     const cellDate = new Date(viewYear, viewMonth, day);
     const isSelected = selectedDate ? isSameDay(cellDate, selectedDate) : false;
     const isToday = isSameDay(cellDate, todayDate);
-    return /* @__PURE__ */ import_react19.default.createElement(
+    return /* @__PURE__ */ import_react20.default.createElement(
       "button",
       {
         key: day,
@@ -2548,29 +2971,29 @@ var DateField = ({
   sx
 }) => {
   const sxClass = useSx(sx);
-  const [open, setOpen] = (0, import_react19.useState)(false);
-  const [selectedDate, setSelectedDate] = (0, import_react19.useState)(() => value ? isoToDate(value) : null);
-  const [hour, setHour] = (0, import_react19.useState)(() => {
+  const [open, setOpen] = (0, import_react20.useState)(false);
+  const [selectedDate, setSelectedDate] = (0, import_react20.useState)(() => value ? isoToDate(value) : null);
+  const [hour, setHour] = (0, import_react20.useState)(() => {
     if (value && isDatetimeType(type)) return parseTimeFromISO(value).h;
     return 12;
   });
-  const [minute, setMinute] = (0, import_react19.useState)(() => {
+  const [minute, setMinute] = (0, import_react20.useState)(() => {
     if (value && isDatetimeType(type)) return parseTimeFromISO(value).m;
     return 0;
   });
-  const [ampm, setAmpm] = (0, import_react19.useState)(() => {
+  const [ampm, setAmpm] = (0, import_react20.useState)(() => {
     if (value && isDatetimeType(type)) return parseTimeFromISO(value).ampm;
     return "AM";
   });
-  const [viewYear, setViewYear] = (0, import_react19.useState)(() => {
+  const [viewYear, setViewYear] = (0, import_react20.useState)(() => {
     const base = value ? isoToDate(value) : null;
     return base ? base.getFullYear() : today().getFullYear();
   });
-  const [viewMonth, setViewMonth] = (0, import_react19.useState)(() => {
+  const [viewMonth, setViewMonth] = (0, import_react20.useState)(() => {
     const base = value ? isoToDate(value) : null;
     return base ? base.getMonth() : today().getMonth();
   });
-  const [inputStr, setInputStr] = (0, import_react19.useState)(() => {
+  const [inputStr, setInputStr] = (0, import_react20.useState)(() => {
     if (!value) return "";
     const d = isoToDate(value);
     if (!d) return "";
@@ -2584,12 +3007,17 @@ var DateField = ({
   const HOURS = Array.from({ length: 12 }, (_, i) => String(i + 1).padStart(2, "0"));
   const MINUTES = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, "0"));
   const AMPMS = ["AM", "PM"];
-  const containerRef = (0, import_react19.useRef)(null);
-  const pickerRef = (0, import_react19.useRef)(null);
-  const [dropUp, setDropUp] = (0, import_react19.useState)(false);
-  const inputId = (0, import_react19.useRef)(`rf-df-${Math.random().toString(36).substring(2, 11)}`).current;
-  (0, import_react19.useEffect)(() => {
+  const containerRef = (0, import_react20.useRef)(null);
+  const pickerRef = (0, import_react20.useRef)(null);
+  const [dropUp, setDropUp] = (0, import_react20.useState)(false);
+  const inputId = (0, import_react20.useRef)(`rf-df-${Math.random().toString(36).substring(2, 11)}`).current;
+  const isInternalChange = (0, import_react20.useRef)(false);
+  (0, import_react20.useEffect)(() => {
     if (value === void 0) return;
+    if (isInternalChange.current) {
+      isInternalChange.current = false;
+      return;
+    }
     if (!value) {
       setSelectedDate(null);
       setInputStr("");
@@ -2611,7 +3039,7 @@ var DateField = ({
       setInputStr(str);
     }
   }, [value, type]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!open) return;
     const handler = (e) => {
       const target = e.target;
@@ -2622,14 +3050,14 @@ var DateField = ({
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [open]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!open || !containerRef.current) return;
     const rect = containerRef.current.getBoundingClientRect();
     const spaceBelow = window.innerHeight - rect.bottom;
     const pickerHeight = 400;
     setDropUp(spaceBelow < pickerHeight && rect.top > pickerHeight);
   }, [open]);
-  const commitDate = (0, import_react19.useCallback)((d, h, m, ap) => {
+  const commitDate = (0, import_react20.useCallback)((d, h, m, ap) => {
     setSelectedDate(d);
     if (!d) {
       setInputStr("");
@@ -2661,17 +3089,19 @@ var DateField = ({
   const handleInputChange = (e) => {
     const raw = e.target.value;
     setInputStr(raw);
-    const parts = raw.split(" ");
-    const datePart = parts[0];
+    const dateWordCount = getDateWordCount(dateFormat);
+    const words = raw.split(" ");
+    const datePart = words.slice(0, dateWordCount).join(" ");
+    const timeParts = words.slice(dateWordCount);
     const parsed = parseDisplay(datePart, dateFormat);
     if (parsed) {
       setSelectedDate(parsed);
       setViewYear(parsed.getFullYear());
       setViewMonth(parsed.getMonth());
       let h = hour, m = minute, ap = ampm;
-      if (isDatetimeType(type) && parts.length >= 3) {
-        const timePart = parts[1];
-        const periodPart = parts[2]?.toUpperCase();
+      if (isDatetimeType(type) && timeParts.length >= 2) {
+        const timePart = timeParts[0];
+        const periodPart = timeParts[1]?.toUpperCase();
         if (timePart?.includes(":")) {
           const [hStr, mStr] = timePart.split(":");
           const parsedH = parseInt(hStr, 10);
@@ -2690,9 +3120,11 @@ var DateField = ({
           setAmpm(ap);
         }
       }
+      isInternalChange.current = true;
       onChange?.(buildISO(parsed, type, h, m, ap));
     } else if (!raw) {
       setSelectedDate(null);
+      isInternalChange.current = true;
       onChange?.("");
     }
   };
@@ -2776,7 +3208,7 @@ var DateField = ({
   const inputPlaceholder = placeholder || (variant === "outlined" ? " " : void 0);
   const todayDate = today();
   const isSideVariant = type === "datetime-side" || type === "datetime-scroll";
-  return /* @__PURE__ */ import_react19.default.createElement("div", { ref: containerRef, className: rootClasses, style }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-field__anchor" }, /* @__PURE__ */ import_react19.default.createElement(
+  return /* @__PURE__ */ import_react20.default.createElement("div", { ref: containerRef, className: rootClasses, style }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-field__anchor" }, /* @__PURE__ */ import_react20.default.createElement(
     "div",
     {
       className: "rf-text-field__wrapper",
@@ -2785,7 +3217,7 @@ var DateField = ({
       },
       style: { cursor: disabled ? "default" : "pointer" }
     },
-    /* @__PURE__ */ import_react19.default.createElement(
+    /* @__PURE__ */ import_react20.default.createElement(
       "input",
       {
         id: inputId,
@@ -2801,7 +3233,7 @@ var DateField = ({
         }
       }
     ),
-    /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, /* @__PURE__ */ import_react19.default.createElement(
+    /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, /* @__PURE__ */ import_react20.default.createElement(
       "button",
       {
         type: "button",
@@ -2814,12 +3246,12 @@ var DateField = ({
         },
         "aria-label": "Pick date"
       },
-      /* @__PURE__ */ import_react19.default.createElement(CalendarIcon, null)
+      /* @__PURE__ */ import_react20.default.createElement(CalendarIcon, null)
     )),
-    label && /* @__PURE__ */ import_react19.default.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ import_react19.default.createElement("span", { className: "rf-text-field__asterisk" }, "*")),
-    variant === "outlined" && /* @__PURE__ */ import_react19.default.createElement("fieldset", { className: "rf-text-field__notch" }, label && /* @__PURE__ */ import_react19.default.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ import_react19.default.createElement("span", null, label, required ? " *" : "")))
-  ), open && !disabled && (0, import_react_dom2.createPortal)(
-    /* @__PURE__ */ import_react19.default.createElement(
+    label && /* @__PURE__ */ import_react20.default.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ import_react20.default.createElement("span", { className: "rf-text-field__asterisk" }, "*")),
+    variant === "outlined" && /* @__PURE__ */ import_react20.default.createElement("fieldset", { className: "rf-text-field__notch" }, label && /* @__PURE__ */ import_react20.default.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ import_react20.default.createElement("span", null, label, required ? " *" : "")))
+  ), open && !disabled && (0, import_react_dom3.createPortal)(
+    /* @__PURE__ */ import_react20.default.createElement(
       "div",
       {
         ref: pickerRef,
@@ -2844,7 +3276,7 @@ var DateField = ({
         })(),
         onMouseDown: (e) => e.preventDefault()
       },
-      /* @__PURE__ */ import_react19.default.createElement("div", { className: isSideVariant ? "rf-date-picker__cal-col" : void 0 }, /* @__PURE__ */ import_react19.default.createElement(
+      /* @__PURE__ */ import_react20.default.createElement("div", { className: isSideVariant ? "rf-date-picker__cal-col" : void 0 }, /* @__PURE__ */ import_react20.default.createElement(
         CalendarBody,
         {
           viewMonth,
@@ -2858,7 +3290,7 @@ var DateField = ({
           onMonthSelect: setViewMonth,
           onYearSelect: setViewYear
         }
-      ), type === "datetime" && /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__time-section" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__time-label" }, "Time"), /* @__PURE__ */ import_react19.default.createElement(
+      ), type === "datetime" && /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__time-section" }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__time-label" }, "Time"), /* @__PURE__ */ import_react20.default.createElement(
         SpinnerPanel,
         {
           hour,
@@ -2870,8 +3302,8 @@ var DateField = ({
           onMinuteInput: handleMinuteInput,
           onAmpmToggle: handleAmpmToggle
         }
-      )), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__divider" }), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__footer" }, /* @__PURE__ */ import_react19.default.createElement("button", { type: "button", className: "rf-date-picker__footer-btn", onClick: handleToday }, "Today"), /* @__PURE__ */ import_react19.default.createElement("button", { type: "button", className: "rf-date-picker__footer-btn rf-date-picker__footer-btn--clear", onClick: handleClear }, "Clear"))),
-      type === "datetime-side" && /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__side-panel" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__side-label" }, "Time"), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__side-spinner" }, /* @__PURE__ */ import_react19.default.createElement(
+      )), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__divider" }), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__footer" }, /* @__PURE__ */ import_react20.default.createElement("button", { type: "button", className: "rf-date-picker__footer-btn", onClick: handleToday }, "Today"), /* @__PURE__ */ import_react20.default.createElement("button", { type: "button", className: "rf-date-picker__footer-btn rf-date-picker__footer-btn--clear", onClick: handleClear }, "Clear"))),
+      type === "datetime-side" && /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__side-panel" }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__side-label" }, "Time"), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__side-spinner" }, /* @__PURE__ */ import_react20.default.createElement(
         SpinnerPanel,
         {
           hour,
@@ -2883,22 +3315,22 @@ var DateField = ({
           onMinuteInput: handleMinuteInput,
           onAmpmToggle: handleAmpmToggle
         }
-      )), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__side-time-display" }, String(hour).padStart(2, "0"), ":", String(minute).padStart(2, "0"), " ", ampm)),
-      type === "datetime-scroll" && /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__side-panel" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__side-label" }, "Time"), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-timescroll" }, /* @__PURE__ */ import_react19.default.createElement(
+      )), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__side-time-display" }, String(hour).padStart(2, "0"), ":", String(minute).padStart(2, "0"), " ", ampm)),
+      type === "datetime-scroll" && /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__side-panel" }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__side-label" }, "Time"), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-timescroll" }, /* @__PURE__ */ import_react20.default.createElement(
         ScrollColumn,
         {
           items: HOURS,
           selected: hour - 1,
           onSelect: handleScrollHour
         }
-      ), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-timescroll__colon" }, ":"), /* @__PURE__ */ import_react19.default.createElement(
+      ), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-timescroll__colon" }, ":"), /* @__PURE__ */ import_react20.default.createElement(
         ScrollColumn,
         {
           items: MINUTES,
           selected: minute,
           onSelect: handleScrollMinute
         }
-      ), /* @__PURE__ */ import_react19.default.createElement(
+      ), /* @__PURE__ */ import_react20.default.createElement(
         ScrollColumn,
         {
           items: AMPMS,
@@ -2906,15 +3338,15 @@ var DateField = ({
           onSelect: handleScrollAmpm,
           infinite: false
         }
-      )), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__side-time-display" }, String(hour).padStart(2, "0"), ":", String(minute).padStart(2, "0"), " ", ampm))
+      )), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__side-time-display" }, String(hour).padStart(2, "0"), ":", String(minute).padStart(2, "0"), " ", ampm))
     ),
     document.body
-  )), helperText && /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-text-field__helper-text" }, helperText));
+  )), helperText && /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-text-field__helper-text" }, helperText));
 };
 DateField.displayName = "DateField";
 
 // lib/TextFields/DateRangeField.tsx
-var import_react20 = __toESM(require("react"), 1);
+var import_react21 = __toESM(require("react"), 1);
 var WEEKDAYS2 = ["SU", "MO", "TU", "WE", "TH", "FR", "SA"];
 var MONTHS2 = [
   "January",
@@ -3039,7 +3471,7 @@ var detectPreset = (start, end) => {
   if (isSameDay2(start, new Date(2e3, 0, 1)) && isSameDay2(end, today2)) return "all";
   return null;
 };
-var CalendarIcon2 = () => /* @__PURE__ */ import_react20.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react20.default.createElement("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), /* @__PURE__ */ import_react20.default.createElement("line", { x1: "16", y1: "2", x2: "16", y2: "6" }), /* @__PURE__ */ import_react20.default.createElement("line", { x1: "8", y1: "2", x2: "8", y2: "6" }), /* @__PURE__ */ import_react20.default.createElement("line", { x1: "3", y1: "10", x2: "21", y2: "10" }));
+var CalendarIcon2 = () => /* @__PURE__ */ import_react21.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react21.default.createElement("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), /* @__PURE__ */ import_react21.default.createElement("line", { x1: "16", y1: "2", x2: "16", y2: "6" }), /* @__PURE__ */ import_react21.default.createElement("line", { x1: "8", y1: "2", x2: "8", y2: "6" }), /* @__PURE__ */ import_react21.default.createElement("line", { x1: "3", y1: "10", x2: "21", y2: "10" }));
 var RangeCalendarBody = ({
   viewYear,
   viewMonth,
@@ -3064,7 +3496,7 @@ var RangeCalendarBody = ({
   const hasRange = startDate != null && effectiveEnd != null && !isSameDay2(startDate, effectiveEnd);
   const lo = startDate && effectiveEnd ? startDate <= effectiveEnd ? startDate : effectiveEnd : null;
   const hi = startDate && effectiveEnd ? startDate <= effectiveEnd ? effectiveEnd : startDate : null;
-  return /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-dr-calendar" }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-dr-calendar__header" }, /* @__PURE__ */ import_react20.default.createElement(
+  return /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-calendar" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-calendar__header" }, /* @__PURE__ */ import_react21.default.createElement(
     "button",
     {
       type: "button",
@@ -3074,7 +3506,7 @@ var RangeCalendarBody = ({
       "aria-label": "Previous month"
     },
     "\u2039"
-  ), /* @__PURE__ */ import_react20.default.createElement("span", { className: "rf-dr-calendar__month-label" }, MONTHS2[viewMonth], " ", viewYear), /* @__PURE__ */ import_react20.default.createElement(
+  ), /* @__PURE__ */ import_react21.default.createElement("span", { className: "rf-dr-calendar__month-label" }, MONTHS2[viewMonth], " ", viewYear), /* @__PURE__ */ import_react21.default.createElement(
     "button",
     {
       type: "button",
@@ -3084,9 +3516,9 @@ var RangeCalendarBody = ({
       "aria-label": "Next month"
     },
     "\u203A"
-  )), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-dr-calendar__weekdays" }, WEEKDAYS2.map((w) => /* @__PURE__ */ import_react20.default.createElement("div", { key: w, className: "rf-dr-calendar__weekday" }, w))), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-dr-calendar__grid" }, dayCells.map((day, idx) => {
+  )), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-calendar__weekdays" }, WEEKDAYS2.map((w) => /* @__PURE__ */ import_react21.default.createElement("div", { key: w, className: "rf-dr-calendar__weekday" }, w))), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-calendar__grid" }, dayCells.map((day, idx) => {
     if (day === null) {
-      return /* @__PURE__ */ import_react20.default.createElement("div", { key: `e-${idx}`, className: "rf-dr-calendar__cell rf-dr-calendar__cell--empty" });
+      return /* @__PURE__ */ import_react21.default.createElement("div", { key: `e-${idx}`, className: "rf-dr-calendar__cell rf-dr-calendar__cell--empty" });
     }
     const cellDate = new Date(viewYear, viewMonth, day);
     const isStart = startDate ? isSameDay2(cellDate, startDate) : false;
@@ -3106,7 +3538,7 @@ var RangeCalendarBody = ({
       isStart || isEnd ? "rf-dr-calendar__day--selected" : "",
       isToday && !isStart && !isEnd ? "rf-dr-calendar__day--today" : ""
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ import_react20.default.createElement(
+    return /* @__PURE__ */ import_react21.default.createElement(
       "div",
       {
         key: day,
@@ -3114,7 +3546,7 @@ var RangeCalendarBody = ({
         onMouseEnter: () => onDayHover(cellDate),
         onMouseLeave: () => onDayHover(null)
       },
-      /* @__PURE__ */ import_react20.default.createElement(
+      /* @__PURE__ */ import_react21.default.createElement(
         "button",
         {
           type: "button",
@@ -3128,8 +3560,8 @@ var RangeCalendarBody = ({
 };
 var MiniCalendar = ({ selectedDate, todayDate, onSelect, onClose }) => {
   const init = selectedDate ?? todayDate;
-  const [viewYear, setViewYear] = (0, import_react20.useState)(init.getFullYear());
-  const [viewMonth, setViewMonth] = (0, import_react20.useState)(init.getMonth());
+  const [viewYear, setViewYear] = (0, import_react21.useState)(init.getFullYear());
+  const [viewMonth, setViewMonth] = (0, import_react21.useState)(init.getMonth());
   const firstDay = new Date(viewYear, viewMonth, 1).getDay();
   const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
   const dayCells = [
@@ -3148,802 +3580,419 @@ var MiniCalendar = ({ selectedDate, todayDate, onSelect, onClose }) => {
       setViewYear((y) => y + 1);
     } else setViewMonth((m) => m + 1);
   };
-  return /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-dr-mini-cal" }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-dr-mini-cal__header" }, /* @__PURE__ */ import_react20.default.createElement("button", { type: "button", className: "rf-dr-calendar__nav-btn", onClick: prevMonth }, "\u2039"), /* @__PURE__ */ import_react20.default.createElement("span", { className: "rf-dr-calendar__month-label", style: { fontSize: "0.88rem" } }, MONTHS2[viewMonth], " ", viewYear), /* @__PURE__ */ import_react20.default.createElement("button", { type: "button", className: "rf-dr-calendar__nav-btn", onClick: nextMonth }, "\u203A")), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-dr-calendar__weekdays" }, WEEKDAYS2.map((w) => /* @__PURE__ */ import_react20.default.createElement("div", { key: w, className: "rf-dr-calendar__weekday" }, w))), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-dr-calendar__grid" }, dayCells.map((day, idx) => {
+  return /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-mini-cal" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-mini-cal__header" }, /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-dr-calendar__nav-btn", onClick: prevMonth }, "\u2039"), /* @__PURE__ */ import_react21.default.createElement("span", { className: "rf-dr-calendar__month-label", style: { fontSize: "0.88rem" } }, MONTHS2[viewMonth], " ", viewYear), /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-dr-calendar__nav-btn", onClick: nextMonth }, "\u203A")), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-calendar__weekdays" }, WEEKDAYS2.map((w) => /* @__PURE__ */ import_react21.default.createElement("div", { key: w, className: "rf-dr-calendar__weekday" }, w))), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-calendar__grid" }, dayCells.map((day, idx) => {
     if (day === null) {
-      return /* @__PURE__ */ import_react20.default.createElement("div", { key: `e-${idx}`, className: "rf-dr-calendar__cell rf-dr-calendar__cell--empty" });
-    }
-    const cellDate = new Date(viewYear, viewMonth, day);
-    const isSel = selectedDate ? isSameDay2(cellDate, selectedDate) : false;
-    const isToday = isSameDay2(cellDate, todayDate);
-    return /* @__PURE__ */ import_react20.default.createElement("div", { key: day, className: "rf-dr-calendar__cell" }, /* @__PURE__ */ import_react20.default.createElement(
-      "button",
-      {
-        type: "button",
-        className: [
-          "rf-dr-calendar__day",
-          isSel ? "rf-dr-calendar__day--selected" : "",
-          isToday && !isSel ? "rf-dr-calendar__day--today" : ""
-        ].filter(Boolean).join(" "),
-        onClick: () => {
-          onSelect(cellDate);
-          onClose();
-        }
-      },
-      day
-    ));
-  })));
-};
-var DateRangeField = ({
-  label,
-  value,
-  onChange,
-  pickerType = "panel",
-  variant = "outlined",
-  size = "medium",
-  color = "primary",
-  error = false,
-  helperText,
-  fullWidth = false,
-  disabled = false,
-  required = false,
-  className = "",
-  style,
-  sx
-}) => {
-  const sxClass = useSx(sx);
-  const today2 = todayFn();
-  const committedStart = value?.start ? isoToDate2(value.start) : null;
-  const committedEnd = value?.end ? isoToDate2(value.end) : null;
-  const [open, setOpen] = (0, import_react20.useState)(false);
-  const [draftStart, setDraftStart] = (0, import_react20.useState)(committedStart);
-  const [draftEnd, setDraftEnd] = (0, import_react20.useState)(committedEnd);
-  const [activePreset, setActivePreset] = (0, import_react20.useState)(
-    () => detectPreset(committedStart, committedEnd)
-  );
-  const [startInputStr, setStartInputStr] = (0, import_react20.useState)(() => committedStart ? formatShort(committedStart) : "");
-  const [endInputStr, setEndInputStr] = (0, import_react20.useState)(() => committedEnd ? formatShort(committedEnd) : "");
-  const [inlineCal, setInlineCal] = (0, import_react20.useState)(null);
-  const [hoverDate, setHoverDate] = (0, import_react20.useState)(null);
-  const [selecting, setSelecting] = (0, import_react20.useState)("start");
-  const [leftViewYear, setLeftViewYear] = (0, import_react20.useState)(() => today2.getFullYear());
-  const [leftViewMonth, setLeftViewMonth] = (0, import_react20.useState)(() => today2.getMonth());
-  const containerRef = (0, import_react20.useRef)(null);
-  const inputId = (0, import_react20.useRef)(`rf-dr-${Math.random().toString(36).substr(2, 9)}`).current;
-  (0, import_react20.useEffect)(() => {
-    const s2 = value?.start ? isoToDate2(value.start) : null;
-    const e = value?.end ? isoToDate2(value.end) : null;
-    setDraftStart(s2);
-    setDraftEnd(e);
-    setStartInputStr(s2 ? formatShort(s2) : "");
-    setEndInputStr(e ? formatShort(e) : "");
-    setActivePreset(detectPreset(s2, e));
-  }, [value?.start, value?.end]);
-  (0, import_react20.useEffect)(() => {
-    setActivePreset(detectPreset(draftStart, draftEnd));
-  }, [draftStart?.getTime(), draftEnd?.getTime()]);
-  (0, import_react20.useEffect)(() => {
-    if (!open) return;
-    const handler = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
-        setOpen(false);
-        setInlineCal(null);
-        setDraftStart(committedStart);
-        setDraftEnd(committedEnd);
-        setStartInputStr(committedStart ? formatShort(committedStart) : "");
-        setEndInputStr(committedEnd ? formatShort(committedEnd) : "");
-        setActivePreset(detectPreset(committedStart, committedEnd));
-        setSelecting("start");
-      }
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [open, committedStart, committedEnd]);
-  const displayStr = (() => {
-    if (committedStart && committedEnd) {
-      return `${formatShort(committedStart)}  \u2013  ${formatShort(committedEnd)}`;
-    }
-    if (committedStart) return `${formatShort(committedStart)}  \u2013`;
-    return "";
-  })();
-  const handleApply = () => {
-    if (draftStart && draftEnd) {
-      const [s2, e] = draftStart <= draftEnd ? [draftStart, draftEnd] : [draftEnd, draftStart];
-      onChange?.({ start: dateToISO(s2), end: dateToISO(e) });
-    } else if (draftStart) {
-      onChange?.({ start: dateToISO(draftStart), end: dateToISO(draftStart) });
-    }
-    setOpen(false);
-    setInlineCal(null);
-  };
-  const handleClose = () => {
-    setOpen(false);
-    setInlineCal(null);
-    setDraftStart(committedStart);
-    setDraftEnd(committedEnd);
-    setStartInputStr(committedStart ? formatShort(committedStart) : "");
-    setEndInputStr(committedEnd ? formatShort(committedEnd) : "");
-    setActivePreset(detectPreset(committedStart, committedEnd));
-    setSelecting("start");
-  };
-  const handlePreset = (presetId) => {
-    const range = getPresetRange(presetId, draftStart);
-    const s2 = isoToDate2(range.start);
-    const e = isoToDate2(range.end);
-    setDraftStart(s2);
-    setDraftEnd(e);
-    setStartInputStr(s2 ? formatShort(s2) : "");
-    setEndInputStr(e ? formatShort(e) : "");
-    setInlineCal(null);
-  };
-  const handleCalDayClick = (d) => {
-    if (selecting === "start") {
-      setDraftStart(d);
-      setDraftEnd(null);
-      setSelecting("end");
-      setActivePreset(null);
-    } else {
-      if (draftStart && d < draftStart) {
-        setDraftEnd(draftStart);
-        setDraftStart(d);
-      } else {
-        setDraftEnd(d);
-      }
-      setSelecting("start");
-      setActivePreset(detectPreset(draftStart, d));
-    }
-  };
-  const rightViewMonth = leftViewMonth === 11 ? 0 : leftViewMonth + 1;
-  const rightViewYear = leftViewMonth === 11 ? leftViewYear + 1 : leftViewYear;
-  const prevMonth = () => {
-    if (leftViewMonth === 0) {
-      setLeftViewMonth(11);
-      setLeftViewYear((y) => y - 1);
-    } else setLeftViewMonth((m) => m - 1);
-  };
-  const nextMonth = () => {
-    if (leftViewMonth === 11) {
-      setLeftViewMonth(0);
-      setLeftViewYear((y) => y + 1);
-    } else setLeftViewMonth((m) => m + 1);
-  };
-  const daysUntilToday = draftStart ? Math.max(0, daysBetween(draftStart, today2)) : 0;
-  const daysFromToday = draftEnd ? Math.max(0, daysBetween(today2, draftEnd)) : 0;
-  const handleDaysUntilChange = (e) => {
-    const n = parseInt(e.target.value, 10);
-    if (!isNaN(n) && n >= 0) {
-      const d = addDays(today2, -n);
-      setDraftStart(d);
-      setStartInputStr(formatShort(d));
-    }
-  };
-  const handleDaysFromChange = (e) => {
-    const n = parseInt(e.target.value, 10);
-    if (!isNaN(n) && n >= 0) {
-      const d = addDays(today2, n);
-      setDraftEnd(d);
-      setEndInputStr(formatShort(d));
-    }
-  };
-  const handleStartInputChange = (e) => {
-    const raw = e.target.value;
-    setStartInputStr(raw);
-    const parsed = parseInputDate(raw);
-    if (parsed) setDraftStart(parsed);
-    else if (!raw) setDraftStart(null);
-  };
-  const handleStartInputBlur = () => {
-    setStartInputStr(draftStart ? formatShort(draftStart) : "");
-  };
-  const handleEndInputChange = (e) => {
-    const raw = e.target.value;
-    setEndInputStr(raw);
-    const parsed = parseInputDate(raw);
-    if (parsed) setDraftEnd(parsed);
-    else if (!raw) setDraftEnd(null);
-  };
-  const handleEndInputBlur = () => {
-    setEndInputStr(draftEnd ? formatShort(draftEnd) : "");
-  };
-  const isFloating = Boolean(displayStr || open);
-  const rootClasses = [
-    "rf-text-field",
-    `rf-text-field--${variant}`,
-    `rf-text-field--${size}`,
-    `rf-text-field--${color}`,
-    error ? "rf-text-field--error" : "",
-    fullWidth ? "rf-text-field--full-width" : "",
-    disabled ? "rf-text-field--disabled" : "",
-    isFloating ? "rf-text-field--floating" : "",
-    Boolean(label) ? "rf-text-field--has-label" : "",
-    "rf-text-field--adorned-end",
-    "rf-date-field",
-    "rf-date-range-field",
-    fullWidth ? "rf-date-field--full-width" : "",
-    sxClass,
-    className
-  ].filter(Boolean).join(" ");
-  const inputPlaceholder = variant === "outlined" ? " " : void 0;
-  return /* @__PURE__ */ import_react20.default.createElement("div", { ref: containerRef, className: rootClasses, style }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-field__anchor" }, /* @__PURE__ */ import_react20.default.createElement(
-    "div",
-    {
-      className: "rf-text-field__wrapper",
-      onClick: () => {
-        if (!disabled) setOpen((o) => !o);
-      },
-      style: { cursor: disabled ? "default" : "pointer" }
-    },
-    /* @__PURE__ */ import_react20.default.createElement(
-      "input",
-      {
-        id: inputId,
-        className: "rf-text-field__input",
-        type: "text",
-        value: displayStr,
-        readOnly: true,
-        placeholder: inputPlaceholder,
-        disabled,
-        onClick: (e) => e.stopPropagation(),
-        onFocus: () => {
-          if (!disabled) setOpen(true);
-        }
-      }
-    ),
-    /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, /* @__PURE__ */ import_react20.default.createElement(
-      "button",
-      {
-        type: "button",
-        className: "rf-date-field__icon-btn",
-        tabIndex: -1,
-        disabled,
-        onClick: (e) => {
-          e.stopPropagation();
-          if (!disabled) setOpen((o) => !o);
-        },
-        "aria-label": "Pick date range"
-      },
-      /* @__PURE__ */ import_react20.default.createElement(CalendarIcon2, null)
-    )),
-    label && /* @__PURE__ */ import_react20.default.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ import_react20.default.createElement("span", { className: "rf-text-field__asterisk" }, "*")),
-    variant === "outlined" && /* @__PURE__ */ import_react20.default.createElement("fieldset", { className: "rf-text-field__notch" }, label ? /* @__PURE__ */ import_react20.default.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ import_react20.default.createElement("span", null, label, required ? " *" : "")) : /* @__PURE__ */ import_react20.default.createElement("legend", { className: "rf-text-field__legend--empty" }))
-  ), open && !disabled && (pickerType === "panel" ? (
-    /* ── Panel Mode ── */
-    /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-dr-picker rf-dr-picker--panel", onMouseDown: (e) => e.preventDefault() }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-dr-picker__presets" }, PRESETS.map((p, i) => /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, { key: p.id }, i > 0 && /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-dr-picker__preset-sep" }), /* @__PURE__ */ import_react20.default.createElement(
-      "button",
-      {
-        type: "button",
-        className: [
-          "rf-dr-picker__preset-btn",
-          activePreset === p.id ? "rf-dr-picker__preset-btn--active" : ""
-        ].filter(Boolean).join(" "),
-        onClick: () => handlePreset(p.id)
-      },
-      p.label
-    )))), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-dr-picker__manual" }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-dr-picker__date-field-wrap" }, /* @__PURE__ */ import_react20.default.createElement(
-      "div",
-      {
-        className: [
-          "rf-dr-picker__date-field",
-          inlineCal === "start" ? "rf-dr-picker__date-field--active" : ""
-        ].filter(Boolean).join(" ")
-      },
-      /* @__PURE__ */ import_react20.default.createElement("span", { className: "rf-dr-picker__date-floating-label" }, "Start Date"),
-      /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-dr-picker__date-display" }, /* @__PURE__ */ import_react20.default.createElement(
-        "input",
-        {
-          type: "text",
-          className: "rf-dr-picker__date-input",
-          value: startInputStr,
-          placeholder: "DD Mon YYYY",
-          onChange: handleStartInputChange,
-          onBlur: handleStartInputBlur,
-          onMouseDown: (e) => e.stopPropagation()
-        }
-      ), /* @__PURE__ */ import_react20.default.createElement(
-        "button",
-        {
-          type: "button",
-          className: "rf-dr-picker__cal-icon-btn",
-          onMouseDown: (e) => e.stopPropagation(),
-          onClick: () => setInlineCal((v) => v === "start" ? null : "start"),
-          "aria-label": "Pick start date"
-        },
-        /* @__PURE__ */ import_react20.default.createElement(CalendarIcon2, null)
-      ))
-    ), inlineCal === "start" && /* @__PURE__ */ import_react20.default.createElement(
-      MiniCalendar,
-      {
-        selectedDate: draftStart,
-        todayDate: today2,
-        onSelect: (d) => {
-          setDraftStart(d);
-          setStartInputStr(formatShort(d));
-        },
-        onClose: () => setInlineCal(null)
-      }
-    )), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-dr-picker__date-field-wrap" }, /* @__PURE__ */ import_react20.default.createElement(
-      "div",
-      {
-        className: [
-          "rf-dr-picker__date-field",
-          inlineCal === "end" ? "rf-dr-picker__date-field--active" : ""
-        ].filter(Boolean).join(" ")
-      },
-      /* @__PURE__ */ import_react20.default.createElement("span", { className: "rf-dr-picker__date-floating-label" }, "End Date"),
-      /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-dr-picker__date-display" }, /* @__PURE__ */ import_react20.default.createElement(
-        "input",
-        {
-          type: "text",
-          className: "rf-dr-picker__date-input",
-          value: endInputStr,
-          placeholder: "DD Mon YYYY",
-          onChange: handleEndInputChange,
-          onBlur: handleEndInputBlur,
-          onMouseDown: (e) => e.stopPropagation()
-        }
-      ), /* @__PURE__ */ import_react20.default.createElement(
-        "button",
-        {
-          type: "button",
-          className: "rf-dr-picker__cal-icon-btn",
-          onMouseDown: (e) => e.stopPropagation(),
-          onClick: () => setInlineCal((v) => v === "end" ? null : "end"),
-          "aria-label": "Pick end date"
-        },
-        /* @__PURE__ */ import_react20.default.createElement(CalendarIcon2, null)
-      ))
-    ), inlineCal === "end" && /* @__PURE__ */ import_react20.default.createElement(
-      MiniCalendar,
-      {
-        selectedDate: draftEnd,
-        todayDate: today2,
-        onSelect: (d) => {
-          setDraftEnd(d);
-          setEndInputStr(formatShort(d));
-        },
-        onClose: () => setInlineCal(null)
-      }
-    )), !inlineCal && /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-dr-picker__days-section" }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-dr-picker__days-row" }, /* @__PURE__ */ import_react20.default.createElement("span", { className: "rf-dr-picker__days-label" }, "Days until today"), /* @__PURE__ */ import_react20.default.createElement(
-      "input",
-      {
-        type: "number",
-        className: "rf-dr-picker__days-input",
-        value: draftStart ? daysUntilToday : "",
-        min: 0,
-        onChange: handleDaysUntilChange,
-        onMouseDown: (e) => e.stopPropagation(),
-        placeholder: "\u2014"
-      }
-    )), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-dr-picker__days-row" }, /* @__PURE__ */ import_react20.default.createElement("span", { className: "rf-dr-picker__days-label" }, "Days from today"), /* @__PURE__ */ import_react20.default.createElement(
-      "input",
-      {
-        type: "number",
-        className: "rf-dr-picker__days-input",
-        value: draftEnd ? daysFromToday : "",
-        min: 0,
-        onChange: handleDaysFromChange,
-        onMouseDown: (e) => e.stopPropagation(),
-        placeholder: "\u2014"
-      }
-    ))), /* @__PURE__ */ import_react20.default.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-dr-picker__footer" }, /* @__PURE__ */ import_react20.default.createElement("button", { type: "button", className: "rf-dr-picker__close-btn", onClick: handleClose }, "CLOSE"), /* @__PURE__ */ import_react20.default.createElement("button", { type: "button", className: "rf-dr-picker__apply-btn", onClick: handleApply }, "APPLY"))))
-  ) : (
-    /* ── Calendar Mode ── */
-    /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-dr-picker rf-dr-picker--calendar", onMouseDown: (e) => e.preventDefault() }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-dr-picker__calendars" }, /* @__PURE__ */ import_react20.default.createElement(
-      RangeCalendarBody,
-      {
-        viewYear: leftViewYear,
-        viewMonth: leftViewMonth,
-        startDate: draftStart,
-        endDate: draftEnd,
-        hoverDate: selecting === "end" ? hoverDate : null,
-        todayDate: today2,
-        onDayClick: handleCalDayClick,
-        onDayHover: setHoverDate,
-        onPrev: prevMonth,
-        onNext: nextMonth,
-        showNext: false
-      }
-    ), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-dr-picker__cal-col-divider" }), /* @__PURE__ */ import_react20.default.createElement(
-      RangeCalendarBody,
-      {
-        viewYear: rightViewYear,
-        viewMonth: rightViewMonth,
-        startDate: draftStart,
-        endDate: draftEnd,
-        hoverDate: selecting === "end" ? hoverDate : null,
-        todayDate: today2,
-        onDayClick: handleCalDayClick,
-        onDayHover: setHoverDate,
-        onPrev: prevMonth,
-        onNext: nextMonth,
-        showPrev: false
-      }
-    )), selecting === "end" && draftStart && /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-dr-picker__cal-hint" }, /* @__PURE__ */ import_react20.default.createElement("span", { className: "rf-dr-picker__cal-hint-dot" }), /* @__PURE__ */ import_react20.default.createElement("span", null, "Select end date \xB7 started from ", /* @__PURE__ */ import_react20.default.createElement("strong", null, formatShort(draftStart)))), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-dr-picker__divider" }), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-dr-picker__cal-footer" }, draftStart && draftEnd && /* @__PURE__ */ import_react20.default.createElement("span", { className: "rf-dr-picker__cal-range-label" }, formatShort(draftStart <= draftEnd ? draftStart : draftEnd), " \u2013 ", formatShort(draftStart <= draftEnd ? draftEnd : draftStart), /* @__PURE__ */ import_react20.default.createElement("span", { className: "rf-dr-picker__cal-range-days" }, " ", "(", Math.abs(daysBetween(draftStart, draftEnd)) + 1, " days)")), /* @__PURE__ */ import_react20.default.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ import_react20.default.createElement("button", { type: "button", className: "rf-dr-picker__close-btn", onClick: handleClose }, "CLOSE"), /* @__PURE__ */ import_react20.default.createElement("button", { type: "button", className: "rf-dr-picker__apply-btn", onClick: handleApply }, "APPLY")))
-  ))), helperText && /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-text-field__helper-text" }, helperText));
-};
-DateRangeField.displayName = "DateRangeField";
-
-// lib/TextFields/Autocomplete.tsx
-var import_react21 = __toESM(require("react"), 1);
-var import_react_dom3 = __toESM(require("react-dom"), 1);
-var ChevronDownIcon = () => /* @__PURE__ */ import_react21.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react21.default.createElement("polyline", { points: "6 9 12 15 18 9" }));
-var CloseSmIcon = ({ size = 16 }) => /* @__PURE__ */ import_react21.default.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }, /* @__PURE__ */ import_react21.default.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), /* @__PURE__ */ import_react21.default.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" }));
-var CheckIcon = () => /* @__PURE__ */ import_react21.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react21.default.createElement("polyline", { points: "20 6 9 17 4 12" }));
-function defaultGetLabel(option) {
-  if (option === null || option === void 0) return "";
-  if (typeof option === "string") return option;
-  if (typeof option === "object" && "label" in option)
-    return String(option.label);
-  return String(option);
-}
-function defaultFilter(options, inputValue, getLabel) {
-  if (!inputValue) return options;
-  const q = inputValue.toLowerCase();
-  return options.filter((o) => getLabel(o).toLowerCase().includes(q));
-}
-function AutocompleteInner(props, _ref) {
-  const {
-    options,
-    value,
-    onChange,
-    inputValue: controlledInput,
-    onInputChange,
-    getOptionLabel = defaultGetLabel,
-    isOptionEqualToValue,
-    groupBy,
-    filterOptions,
-    renderOption,
-    getOptionDisabled,
-    multiple = false,
-    freeSolo = false,
-    clearable = true,
-    loading = false,
-    loadingText = "Loading\u2026",
-    noOptionsText = "No options",
-    limitTags,
-    label,
-    placeholder,
-    variant = "outlined",
-    size = "medium",
-    error = false,
-    helperText,
-    fullWidth = false,
-    disabled = false,
-    required = false,
-    className = "",
-    style,
-    sx,
-    onOpen,
-    onClose
-  } = props;
-  const [open, setOpen] = (0, import_react21.useState)(false);
-  const [inputStr, setInputStr] = (0, import_react21.useState)("");
-  const [focusedIdx, setFocusedIdx] = (0, import_react21.useState)(-1);
-  const [popupStyle, setPopupStyle] = (0, import_react21.useState)({});
-  const containerRef = (0, import_react21.useRef)(null);
-  const inputRef = (0, import_react21.useRef)(null);
-  const listRef = (0, import_react21.useRef)(null);
-  const inputId = (0, import_react21.useRef)(`rf-ac-${Math.random().toString(36).slice(2, 9)}`).current;
-  const sxClass = useSx(sx);
-  const calcPopupStyle = (0, import_react21.useCallback)(() => {
-    if (!containerRef.current) return;
-    const rect = containerRef.current.getBoundingClientRect();
-    setPopupStyle({
-      top: rect.bottom + 4,
-      left: rect.left,
-      width: rect.width
-    });
-  }, []);
-  const activeInput = controlledInput !== void 0 ? controlledInput : inputStr;
-  const selectedValues = multiple ? Array.isArray(value) ? value : [] : value != null ? [value] : [];
-  const isEqual = (0, import_react21.useCallback)(
-    (a, b) => isOptionEqualToValue ? isOptionEqualToValue(a, b) : a === b,
-    [isOptionEqualToValue]
-  );
-  const isSelected = (0, import_react21.useCallback)(
-    (opt) => selectedValues.some((v) => isEqual(opt, v)),
-    [selectedValues, isEqual]
-  );
-  const filtered = filterOptions ? filterOptions(options, activeInput) : defaultFilter(options, activeInput, getOptionLabel);
-  const flatEntries = [];
-  if (groupBy) {
-    const groups = {};
-    const order = [];
-    filtered.forEach((opt) => {
-      const g = groupBy(opt);
-      if (!groups[g]) {
-        groups[g] = [];
-        order.push(g);
-      }
-      groups[g].push(opt);
-    });
-    order.forEach((g) => {
-      flatEntries.push({ kind: "group", label: g });
-      groups[g].forEach((opt) => {
-        flatEntries.push({ kind: "option", option: opt, flatIdx: flatEntries.filter((e) => e.kind === "option").length });
-      });
-    });
-  } else {
-    filtered.forEach((opt, i) => flatEntries.push({ kind: "option", option: opt, flatIdx: i }));
-  }
-  const selectableOptions = flatEntries.filter((e) => e.kind === "option");
-  const openPopup = (0, import_react21.useCallback)(() => {
-    if (disabled) return;
-    calcPopupStyle();
-    setOpen(true);
-    setFocusedIdx(-1);
-    onOpen?.();
-  }, [disabled, calcPopupStyle, onOpen]);
-  const closePopup = (0, import_react21.useCallback)(() => {
-    setOpen(false);
-    setFocusedIdx(-1);
-    onClose?.();
-    if (!freeSolo && !multiple && value == null) {
-      setInputStr("");
-      onInputChange?.("");
+      return /* @__PURE__ */ import_react21.default.createElement("div", { key: `e-${idx}`, className: "rf-dr-calendar__cell rf-dr-calendar__cell--empty" });
     }
-  }, [freeSolo, multiple, value, onInputChange, onClose]);
+    const cellDate = new Date(viewYear, viewMonth, day);
+    const isSel = selectedDate ? isSameDay2(cellDate, selectedDate) : false;
+    const isToday = isSameDay2(cellDate, todayDate);
+    return /* @__PURE__ */ import_react21.default.createElement("div", { key: day, className: "rf-dr-calendar__cell" }, /* @__PURE__ */ import_react21.default.createElement(
+      "button",
+      {
+        type: "button",
+        className: [
+          "rf-dr-calendar__day",
+          isSel ? "rf-dr-calendar__day--selected" : "",
+          isToday && !isSel ? "rf-dr-calendar__day--today" : ""
+        ].filter(Boolean).join(" "),
+        onClick: () => {
+          onSelect(cellDate);
+          onClose();
+        }
+      },
+      day
+    ));
+  })));
+};
+var DateRangeField = ({
+  label,
+  value,
+  onChange,
+  pickerType = "panel",
+  variant = "outlined",
+  size = "medium",
+  color = "primary",
+  error = false,
+  helperText,
+  fullWidth = false,
+  disabled = false,
+  required = false,
+  className = "",
+  style,
+  sx
+}) => {
+  const sxClass = useSx(sx);
+  const today2 = todayFn();
+  const committedStart = value?.start ? isoToDate2(value.start) : null;
+  const committedEnd = value?.end ? isoToDate2(value.end) : null;
+  const [open, setOpen] = (0, import_react21.useState)(false);
+  const [draftStart, setDraftStart] = (0, import_react21.useState)(committedStart);
+  const [draftEnd, setDraftEnd] = (0, import_react21.useState)(committedEnd);
+  const [activePreset, setActivePreset] = (0, import_react21.useState)(
+    () => detectPreset(committedStart, committedEnd)
+  );
+  const [startInputStr, setStartInputStr] = (0, import_react21.useState)(() => committedStart ? formatShort(committedStart) : "");
+  const [endInputStr, setEndInputStr] = (0, import_react21.useState)(() => committedEnd ? formatShort(committedEnd) : "");
+  const [inlineCal, setInlineCal] = (0, import_react21.useState)(null);
+  const [hoverDate, setHoverDate] = (0, import_react21.useState)(null);
+  const [selecting, setSelecting] = (0, import_react21.useState)("start");
+  const [leftViewYear, setLeftViewYear] = (0, import_react21.useState)(() => today2.getFullYear());
+  const [leftViewMonth, setLeftViewMonth] = (0, import_react21.useState)(() => today2.getMonth());
+  const containerRef = (0, import_react21.useRef)(null);
+  const inputId = (0, import_react21.useRef)(`rf-dr-${Math.random().toString(36).substr(2, 9)}`).current;
+  (0, import_react21.useEffect)(() => {
+    const s2 = value?.start ? isoToDate2(value.start) : null;
+    const e = value?.end ? isoToDate2(value.end) : null;
+    setDraftStart(s2);
+    setDraftEnd(e);
+    setStartInputStr(s2 ? formatShort(s2) : "");
+    setEndInputStr(e ? formatShort(e) : "");
+    setActivePreset(detectPreset(s2, e));
+  }, [value?.start, value?.end]);
+  (0, import_react21.useEffect)(() => {
+    setActivePreset(detectPreset(draftStart, draftEnd));
+  }, [draftStart?.getTime(), draftEnd?.getTime()]);
   (0, import_react21.useEffect)(() => {
     if (!open) return;
-    const handleOutside = (e) => {
+    const handler = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
-        closePopup();
+        setOpen(false);
+        setInlineCal(null);
+        setDraftStart(committedStart);
+        setDraftEnd(committedEnd);
+        setStartInputStr(committedStart ? formatShort(committedStart) : "");
+        setEndInputStr(committedEnd ? formatShort(committedEnd) : "");
+        setActivePreset(detectPreset(committedStart, committedEnd));
+        setSelecting("start");
       }
     };
-    document.addEventListener("mousedown", handleOutside);
-    window.addEventListener("scroll", calcPopupStyle, true);
-    window.addEventListener("resize", calcPopupStyle);
-    return () => {
-      document.removeEventListener("mousedown", handleOutside);
-      window.removeEventListener("scroll", calcPopupStyle, true);
-      window.removeEventListener("resize", calcPopupStyle);
-    };
-  }, [open, closePopup, calcPopupStyle]);
-  (0, import_react21.useEffect)(() => {
-    if (controlledInput !== void 0) return;
-    if (!multiple) {
-      const v = value;
-      setInputStr(v != null ? getOptionLabel(v) : "");
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open, committedStart, committedEnd]);
+  const displayStr = (() => {
+    if (committedStart && committedEnd) {
+      return `${formatShort(committedStart)}  \u2013  ${formatShort(committedEnd)}`;
     }
-  }, [value, multiple, getOptionLabel, controlledInput]);
-  const selectOption = (opt) => {
-    if (getOptionDisabled?.(opt)) return;
-    if (multiple) {
-      const already = isSelected(opt);
-      const next = already ? selectedValues.filter((v) => !isEqual(v, opt)) : [...selectedValues, opt];
-      onChange?.(next);
-      setInputStr("");
-      onInputChange?.("");
-      inputRef.current?.focus();
+    if (committedStart) return `${formatShort(committedStart)}  \u2013`;
+    return "";
+  })();
+  const handleApply = () => {
+    if (draftStart && draftEnd) {
+      const [s2, e] = draftStart <= draftEnd ? [draftStart, draftEnd] : [draftEnd, draftStart];
+      onChange?.({ start: dateToISO(s2), end: dateToISO(e) });
+    } else if (draftStart) {
+      onChange?.({ start: dateToISO(draftStart), end: dateToISO(draftStart) });
+    }
+    setOpen(false);
+    setInlineCal(null);
+  };
+  const handleClose = () => {
+    setOpen(false);
+    setInlineCal(null);
+    setDraftStart(committedStart);
+    setDraftEnd(committedEnd);
+    setStartInputStr(committedStart ? formatShort(committedStart) : "");
+    setEndInputStr(committedEnd ? formatShort(committedEnd) : "");
+    setActivePreset(detectPreset(committedStart, committedEnd));
+    setSelecting("start");
+  };
+  const handlePreset = (presetId) => {
+    const range = getPresetRange(presetId, draftStart);
+    const s2 = isoToDate2(range.start);
+    const e = isoToDate2(range.end);
+    setDraftStart(s2);
+    setDraftEnd(e);
+    setStartInputStr(s2 ? formatShort(s2) : "");
+    setEndInputStr(e ? formatShort(e) : "");
+    setInlineCal(null);
+  };
+  const handleCalDayClick = (d) => {
+    if (selecting === "start") {
+      setDraftStart(d);
+      setDraftEnd(null);
+      setSelecting("end");
+      setActivePreset(null);
     } else {
-      onChange?.(opt);
-      setInputStr(getOptionLabel(opt));
-      onInputChange?.(getOptionLabel(opt));
-      closePopup();
+      if (draftStart && d < draftStart) {
+        setDraftEnd(draftStart);
+        setDraftStart(d);
+      } else {
+        setDraftEnd(d);
+      }
+      setSelecting("start");
+      setActivePreset(detectPreset(draftStart, d));
     }
-    setFocusedIdx(-1);
   };
-  const clearAll = (e) => {
-    e.stopPropagation();
-    onChange?.(multiple ? [] : null);
-    setInputStr("");
-    onInputChange?.("");
-    inputRef.current?.focus();
+  const rightViewMonth = leftViewMonth === 11 ? 0 : leftViewMonth + 1;
+  const rightViewYear = leftViewMonth === 11 ? leftViewYear + 1 : leftViewYear;
+  const prevMonth = () => {
+    if (leftViewMonth === 0) {
+      setLeftViewMonth(11);
+      setLeftViewYear((y) => y - 1);
+    } else setLeftViewMonth((m) => m - 1);
   };
-  const removeTag = (opt, e) => {
-    e.stopPropagation();
-    const next = selectedValues.filter((v) => !isEqual(v, opt));
-    onChange?.(next);
+  const nextMonth = () => {
+    if (leftViewMonth === 11) {
+      setLeftViewMonth(0);
+      setLeftViewYear((y) => y + 1);
+    } else setLeftViewMonth((m) => m + 1);
   };
-  const handleInputChange = (e) => {
-    const v = e.target.value;
-    setInputStr(v);
-    onInputChange?.(v);
-    if (!open) openPopup();
+  const daysUntilToday = draftStart ? Math.max(0, daysBetween(draftStart, today2)) : 0;
+  const daysFromToday = draftEnd ? Math.max(0, daysBetween(today2, draftEnd)) : 0;
+  const handleDaysUntilChange = (e) => {
+    const n = parseInt(e.target.value, 10);
+    if (!isNaN(n) && n >= 0) {
+      const d = addDays(today2, -n);
+      setDraftStart(d);
+      setStartInputStr(formatShort(d));
+    }
   };
-  const handleKeyDown = (e) => {
-    if (e.key === "ArrowDown") {
-      e.preventDefault();
-      if (!open) {
-        openPopup();
-        return;
-      }
-      setFocusedIdx((i) => {
-        const next = (i + 1) % selectableOptions.length;
-        scrollOptionIntoView(next);
-        return next;
-      });
-    } else if (e.key === "ArrowUp") {
-      e.preventDefault();
-      if (!open) {
-        openPopup();
-        return;
-      }
-      setFocusedIdx((i) => {
-        const next = (i - 1 + selectableOptions.length) % selectableOptions.length;
-        scrollOptionIntoView(next);
-        return next;
-      });
-    } else if (e.key === "Enter") {
-      e.preventDefault();
-      if (!open) {
-        openPopup();
-        return;
-      }
-      if (focusedIdx >= 0 && focusedIdx < selectableOptions.length) {
-        selectOption(selectableOptions[focusedIdx].option);
-      } else if (freeSolo && activeInput) {
-        onChange?.(activeInput);
-        if (!multiple) closePopup();
-      }
-    } else if (e.key === "Escape") {
-      closePopup();
-    } else if (e.key === "Backspace" && multiple && !activeInput && selectedValues.length > 0) {
-      removeTag(selectedValues[selectedValues.length - 1], { stopPropagation: () => {
-      } });
+  const handleDaysFromChange = (e) => {
+    const n = parseInt(e.target.value, 10);
+    if (!isNaN(n) && n >= 0) {
+      const d = addDays(today2, n);
+      setDraftEnd(d);
+      setEndInputStr(formatShort(d));
     }
   };
-  const scrollOptionIntoView = (idx) => {
-    requestAnimationFrame(() => {
-      const el = listRef.current?.querySelector(`[data-idx="${idx}"]`);
-      el?.scrollIntoView({ block: "nearest" });
-    });
+  const handleStartInputChange = (e) => {
+    const raw = e.target.value;
+    setStartInputStr(raw);
+    const parsed = parseInputDate(raw);
+    if (parsed) setDraftStart(parsed);
+    else if (!raw) setDraftStart(null);
+  };
+  const handleStartInputBlur = () => {
+    setStartInputStr(draftStart ? formatShort(draftStart) : "");
+  };
+  const handleEndInputChange = (e) => {
+    const raw = e.target.value;
+    setEndInputStr(raw);
+    const parsed = parseInputDate(raw);
+    if (parsed) setDraftEnd(parsed);
+    else if (!raw) setDraftEnd(null);
+  };
+  const handleEndInputBlur = () => {
+    setEndInputStr(draftEnd ? formatShort(draftEnd) : "");
   };
-  const hasClearable = clearable && !disabled && (multiple ? selectedValues.length > 0 : value != null);
-  const visibleTags = multiple && limitTags != null ? selectedValues.slice(0, limitTags) : selectedValues;
-  const hiddenCount = multiple && limitTags != null ? Math.max(0, selectedValues.length - limitTags) : 0;
-  const isFloating = Boolean(
-    open || activeInput || (multiple ? selectedValues.length > 0 : value != null)
-  );
+  const isFloating = Boolean(displayStr || open);
   const rootClasses = [
     "rf-text-field",
     `rf-text-field--${variant}`,
     `rf-text-field--${size}`,
-    "rf-text-field--primary",
+    `rf-text-field--${color}`,
     error ? "rf-text-field--error" : "",
     fullWidth ? "rf-text-field--full-width" : "",
     disabled ? "rf-text-field--disabled" : "",
     isFloating ? "rf-text-field--floating" : "",
-    label ? "rf-text-field--has-label" : "",
+    Boolean(label) ? "rf-text-field--has-label" : "",
     "rf-text-field--adorned-end",
-    "rf-autocomplete",
+    "rf-date-field",
+    "rf-date-range-field",
+    fullWidth ? "rf-date-field--full-width" : "",
     sxClass,
     className
   ].filter(Boolean).join(" ");
-  const inputPlaceholder = placeholder || (variant === "outlined" ? " " : void 0);
-  return /* @__PURE__ */ import_react21.default.createElement("div", { ref: containerRef, className: rootClasses, style }, /* @__PURE__ */ import_react21.default.createElement(
+  const inputPlaceholder = variant === "outlined" ? " " : void 0;
+  return /* @__PURE__ */ import_react21.default.createElement("div", { ref: containerRef, className: rootClasses, style }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-field__anchor" }, /* @__PURE__ */ import_react21.default.createElement(
     "div",
     {
       className: "rf-text-field__wrapper",
       onClick: () => {
-        if (!disabled) {
-          inputRef.current?.focus();
-          if (!open) openPopup();
-        }
-      }
-    },
-    multiple && visibleTags.map((opt, i) => /* @__PURE__ */ import_react21.default.createElement("span", { key: i, className: "rf-autocomplete__tag" }, /* @__PURE__ */ import_react21.default.createElement("span", { style: { overflow: "hidden", textOverflow: "ellipsis" } }, getOptionLabel(opt)), /* @__PURE__ */ import_react21.default.createElement(
-      "button",
-      {
-        type: "button",
-        className: "rf-autocomplete__tag-delete",
-        onMouseDown: (e) => e.preventDefault(),
-        onClick: (e) => removeTag(opt, e),
-        tabIndex: -1
+        if (!disabled) setOpen((o) => !o);
       },
-      /* @__PURE__ */ import_react21.default.createElement(CloseSmIcon, { size: 12 })
-    ))),
-    hiddenCount > 0 && /* @__PURE__ */ import_react21.default.createElement("span", { className: "rf-autocomplete__tag-more" }, "+", hiddenCount, " more"),
+      style: { cursor: disabled ? "default" : "pointer" }
+    },
     /* @__PURE__ */ import_react21.default.createElement(
       "input",
       {
-        ref: inputRef,
         id: inputId,
         className: "rf-text-field__input",
         type: "text",
-        value: activeInput,
-        onChange: handleInputChange,
-        onFocus: () => {
-          if (!open) openPopup();
-        },
-        onKeyDown: handleKeyDown,
-        placeholder: !multiple || selectedValues.length === 0 ? inputPlaceholder : void 0,
+        value: displayStr,
+        readOnly: true,
+        placeholder: inputPlaceholder,
         disabled,
-        autoComplete: "off",
-        role: "combobox",
-        "aria-expanded": open,
-        "aria-haspopup": "listbox",
-        "aria-autocomplete": "list"
+        onClick: (e) => e.stopPropagation(),
+        onFocus: () => {
+          if (!disabled) setOpen(true);
+        }
       }
     ),
-    label && /* @__PURE__ */ import_react21.default.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, required && /* @__PURE__ */ import_react21.default.createElement("span", { className: "rf-text-field__asterisk" }, " *")),
-    variant === "outlined" && /* @__PURE__ */ import_react21.default.createElement("fieldset", { className: "rf-text-field__notch" }, label ? /* @__PURE__ */ import_react21.default.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ import_react21.default.createElement("span", null, label, required ? " *" : "")) : /* @__PURE__ */ import_react21.default.createElement("legend", { className: "rf-text-field__legend--empty" })),
-    /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-autocomplete__endgroup" }, hasClearable && /* @__PURE__ */ import_react21.default.createElement(
+    /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, /* @__PURE__ */ import_react21.default.createElement(
       "button",
       {
         type: "button",
-        className: "rf-autocomplete__icon-btn",
-        onMouseDown: (e) => e.preventDefault(),
-        onClick: clearAll,
+        className: "rf-date-field__icon-btn",
         tabIndex: -1,
-        "aria-label": "Clear"
+        disabled,
+        onClick: (e) => {
+          e.stopPropagation();
+          if (!disabled) setOpen((o) => !o);
+        },
+        "aria-label": "Pick date range"
       },
-      /* @__PURE__ */ import_react21.default.createElement(CloseSmIcon, { size: 16 })
-    ), !freeSolo && /* @__PURE__ */ import_react21.default.createElement(
+      /* @__PURE__ */ import_react21.default.createElement(CalendarIcon2, null)
+    )),
+    label && /* @__PURE__ */ import_react21.default.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ import_react21.default.createElement("span", { className: "rf-text-field__asterisk" }, "*")),
+    variant === "outlined" && /* @__PURE__ */ import_react21.default.createElement("fieldset", { className: "rf-text-field__notch" }, label ? /* @__PURE__ */ import_react21.default.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ import_react21.default.createElement("span", null, label, required ? " *" : "")) : /* @__PURE__ */ import_react21.default.createElement("legend", { className: "rf-text-field__legend--empty" }))
+  ), open && !disabled && (pickerType === "panel" ? (
+    /* ── Panel Mode ── */
+    /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-picker rf-dr-picker--panel", onMouseDown: (e) => e.preventDefault() }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-picker__presets" }, PRESETS.map((p, i) => /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, { key: p.id }, i > 0 && /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-picker__preset-sep" }), /* @__PURE__ */ import_react21.default.createElement(
       "button",
       {
         type: "button",
-        className: `rf-autocomplete__icon-btn rf-autocomplete__icon-btn--popup ${open ? "rf-autocomplete__icon-btn--open" : ""}`,
-        onMouseDown: (e) => {
-          e.preventDefault();
-          open ? closePopup() : openPopup();
-        },
-        tabIndex: -1,
-        "aria-label": open ? "Close" : "Open"
+        className: [
+          "rf-dr-picker__preset-btn",
+          activePreset === p.id ? "rf-dr-picker__preset-btn--active" : ""
+        ].filter(Boolean).join(" "),
+        onClick: () => handlePreset(p.id)
       },
-      /* @__PURE__ */ import_react21.default.createElement(ChevronDownIcon, null)
-    ))
-  ), helperText && /* @__PURE__ */ import_react21.default.createElement("div", { className: `rf-text-field__helper-text${error ? " rf-text-field__helper-text--error" : ""}` }, helperText), open && !disabled && import_react_dom3.default.createPortal(
-    /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-autocomplete__popup", role: "presentation", style: popupStyle }, loading ? /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-autocomplete__loading" }, /* @__PURE__ */ import_react21.default.createElement("span", { className: "rf-ac-spinner" }), loadingText) : flatEntries.length === 0 ? /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-autocomplete__no-options" }, noOptionsText) : /* @__PURE__ */ import_react21.default.createElement("ul", { ref: listRef, className: "rf-autocomplete__listbox", role: "listbox" }, groupBy ? (
-      // Grouped render
-      (() => {
-        const rendered = [];
-        let groupItems = [];
-        let currentGroup = "";
-        flatEntries.forEach((entry, ei) => {
-          if (entry.kind === "group") {
-            if (groupItems.length > 0) {
-              rendered.push(
-                /* @__PURE__ */ import_react21.default.createElement("li", { key: `g-${currentGroup}`, role: "presentation" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-autocomplete__group-header" }, currentGroup), /* @__PURE__ */ import_react21.default.createElement("ul", { className: "rf-autocomplete__group-items", role: "group" }, groupItems))
-              );
-              groupItems = [];
-            }
-            currentGroup = entry.label;
-          } else {
-            const { option, flatIdx } = entry;
-            groupItems.push(renderOptionItem(option, flatIdx));
-          }
-          if (ei === flatEntries.length - 1 && groupItems.length > 0) {
-            rendered.push(
-              /* @__PURE__ */ import_react21.default.createElement("li", { key: `g-${currentGroup}`, role: "presentation" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-autocomplete__group-header" }, currentGroup), /* @__PURE__ */ import_react21.default.createElement("ul", { className: "rf-autocomplete__group-items", role: "group" }, groupItems))
-            );
-          }
-        });
-        return rendered;
-      })()
-    ) : selectableOptions.map(({ option, flatIdx }) => renderOptionItem(option, flatIdx)))),
-    document.body
-  ));
-  function renderOptionItem(option, flatIdx) {
-    const selected = isSelected(option);
-    const focused = focusedIdx === flatIdx;
-    const optDisabled = getOptionDisabled?.(option) ?? false;
-    const label2 = getOptionLabel(option);
-    return /* @__PURE__ */ import_react21.default.createElement(
-      "li",
+      p.label
+    )))), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-picker__manual" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-picker__date-field-wrap" }, /* @__PURE__ */ import_react21.default.createElement(
+      "div",
       {
-        key: label2 + flatIdx,
-        "data-idx": flatIdx,
-        role: "option",
-        "aria-selected": selected,
-        "aria-disabled": optDisabled,
         className: [
-          "rf-autocomplete__option",
-          selected ? "rf-autocomplete__option--selected" : "",
-          focused ? "rf-autocomplete__option--focused" : "",
-          optDisabled ? "rf-autocomplete__option--disabled" : ""
-        ].filter(Boolean).join(" "),
-        onMouseEnter: () => setFocusedIdx(flatIdx),
-        onMouseLeave: () => setFocusedIdx(-1),
-        onMouseDown: (e) => e.preventDefault(),
-        onClick: () => selectOption(option)
+          "rf-dr-picker__date-field",
+          inlineCal === "start" ? "rf-dr-picker__date-field--active" : ""
+        ].filter(Boolean).join(" ")
       },
-      renderOption ? renderOption(option, { selected, focused, index: flatIdx }) : /* @__PURE__ */ import_react21.default.createElement("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, label2),
-      !renderOption && /* @__PURE__ */ import_react21.default.createElement("span", { className: "rf-autocomplete__option-check" }, /* @__PURE__ */ import_react21.default.createElement(CheckIcon, null))
-    );
-  }
-}
-var Autocomplete = import_react21.default.forwardRef(AutocompleteInner);
-Autocomplete.displayName = "Autocomplete";
+      /* @__PURE__ */ import_react21.default.createElement("span", { className: "rf-dr-picker__date-floating-label" }, "Start Date"),
+      /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-picker__date-display" }, /* @__PURE__ */ import_react21.default.createElement(
+        "input",
+        {
+          type: "text",
+          className: "rf-dr-picker__date-input",
+          value: startInputStr,
+          placeholder: "DD Mon YYYY",
+          onChange: handleStartInputChange,
+          onBlur: handleStartInputBlur,
+          onMouseDown: (e) => e.stopPropagation()
+        }
+      ), /* @__PURE__ */ import_react21.default.createElement(
+        "button",
+        {
+          type: "button",
+          className: "rf-dr-picker__cal-icon-btn",
+          onMouseDown: (e) => e.stopPropagation(),
+          onClick: () => setInlineCal((v) => v === "start" ? null : "start"),
+          "aria-label": "Pick start date"
+        },
+        /* @__PURE__ */ import_react21.default.createElement(CalendarIcon2, null)
+      ))
+    ), inlineCal === "start" && /* @__PURE__ */ import_react21.default.createElement(
+      MiniCalendar,
+      {
+        selectedDate: draftStart,
+        todayDate: today2,
+        onSelect: (d) => {
+          setDraftStart(d);
+          setStartInputStr(formatShort(d));
+        },
+        onClose: () => setInlineCal(null)
+      }
+    )), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-picker__date-field-wrap" }, /* @__PURE__ */ import_react21.default.createElement(
+      "div",
+      {
+        className: [
+          "rf-dr-picker__date-field",
+          inlineCal === "end" ? "rf-dr-picker__date-field--active" : ""
+        ].filter(Boolean).join(" ")
+      },
+      /* @__PURE__ */ import_react21.default.createElement("span", { className: "rf-dr-picker__date-floating-label" }, "End Date"),
+      /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-picker__date-display" }, /* @__PURE__ */ import_react21.default.createElement(
+        "input",
+        {
+          type: "text",
+          className: "rf-dr-picker__date-input",
+          value: endInputStr,
+          placeholder: "DD Mon YYYY",
+          onChange: handleEndInputChange,
+          onBlur: handleEndInputBlur,
+          onMouseDown: (e) => e.stopPropagation()
+        }
+      ), /* @__PURE__ */ import_react21.default.createElement(
+        "button",
+        {
+          type: "button",
+          className: "rf-dr-picker__cal-icon-btn",
+          onMouseDown: (e) => e.stopPropagation(),
+          onClick: () => setInlineCal((v) => v === "end" ? null : "end"),
+          "aria-label": "Pick end date"
+        },
+        /* @__PURE__ */ import_react21.default.createElement(CalendarIcon2, null)
+      ))
+    ), inlineCal === "end" && /* @__PURE__ */ import_react21.default.createElement(
+      MiniCalendar,
+      {
+        selectedDate: draftEnd,
+        todayDate: today2,
+        onSelect: (d) => {
+          setDraftEnd(d);
+          setEndInputStr(formatShort(d));
+        },
+        onClose: () => setInlineCal(null)
+      }
+    )), !inlineCal && /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-picker__days-section" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-picker__days-row" }, /* @__PURE__ */ import_react21.default.createElement("span", { className: "rf-dr-picker__days-label" }, "Days until today"), /* @__PURE__ */ import_react21.default.createElement(
+      "input",
+      {
+        type: "number",
+        className: "rf-dr-picker__days-input",
+        value: draftStart ? daysUntilToday : "",
+        min: 0,
+        onChange: handleDaysUntilChange,
+        onMouseDown: (e) => e.stopPropagation(),
+        placeholder: "\u2014"
+      }
+    )), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-picker__days-row" }, /* @__PURE__ */ import_react21.default.createElement("span", { className: "rf-dr-picker__days-label" }, "Days from today"), /* @__PURE__ */ import_react21.default.createElement(
+      "input",
+      {
+        type: "number",
+        className: "rf-dr-picker__days-input",
+        value: draftEnd ? daysFromToday : "",
+        min: 0,
+        onChange: handleDaysFromChange,
+        onMouseDown: (e) => e.stopPropagation(),
+        placeholder: "\u2014"
+      }
+    ))), /* @__PURE__ */ import_react21.default.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-picker__footer" }, /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-dr-picker__close-btn", onClick: handleClose }, "CLOSE"), /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-dr-picker__apply-btn", onClick: handleApply }, "APPLY"))))
+  ) : (
+    /* ── Calendar Mode ── */
+    /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-picker rf-dr-picker--calendar", onMouseDown: (e) => e.preventDefault() }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-picker__calendars" }, /* @__PURE__ */ import_react21.default.createElement(
+      RangeCalendarBody,
+      {
+        viewYear: leftViewYear,
+        viewMonth: leftViewMonth,
+        startDate: draftStart,
+        endDate: draftEnd,
+        hoverDate: selecting === "end" ? hoverDate : null,
+        todayDate: today2,
+        onDayClick: handleCalDayClick,
+        onDayHover: setHoverDate,
+        onPrev: prevMonth,
+        onNext: nextMonth,
+        showNext: false
+      }
+    ), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-picker__cal-col-divider" }), /* @__PURE__ */ import_react21.default.createElement(
+      RangeCalendarBody,
+      {
+        viewYear: rightViewYear,
+        viewMonth: rightViewMonth,
+        startDate: draftStart,
+        endDate: draftEnd,
+        hoverDate: selecting === "end" ? hoverDate : null,
+        todayDate: today2,
+        onDayClick: handleCalDayClick,
+        onDayHover: setHoverDate,
+        onPrev: prevMonth,
+        onNext: nextMonth,
+        showPrev: false
+      }
+    )), selecting === "end" && draftStart && /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-picker__cal-hint" }, /* @__PURE__ */ import_react21.default.createElement("span", { className: "rf-dr-picker__cal-hint-dot" }), /* @__PURE__ */ import_react21.default.createElement("span", null, "Select end date \xB7 started from ", /* @__PURE__ */ import_react21.default.createElement("strong", null, formatShort(draftStart)))), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-picker__divider" }), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-picker__cal-footer" }, draftStart && draftEnd && /* @__PURE__ */ import_react21.default.createElement("span", { className: "rf-dr-picker__cal-range-label" }, formatShort(draftStart <= draftEnd ? draftStart : draftEnd), " \u2013 ", formatShort(draftStart <= draftEnd ? draftEnd : draftStart), /* @__PURE__ */ import_react21.default.createElement("span", { className: "rf-dr-picker__cal-range-days" }, " ", "(", Math.abs(daysBetween(draftStart, draftEnd)) + 1, " days)")), /* @__PURE__ */ import_react21.default.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-dr-picker__close-btn", onClick: handleClose }, "CLOSE"), /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-dr-picker__apply-btn", onClick: handleApply }, "APPLY")))
+  ))), helperText && /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-text-field__helper-text" }, helperText));
+};
+DateRangeField.displayName = "DateRangeField";
 
 // lib/Progress/RufousLogoLoader.tsx
 var React73 = __toESM(require("react"), 1);