@rufous/ui 0.2.78 → 0.2.81

package/dist/main.js

@@ -1742,1058 +1742,692 @@ var TextField = forwardRef3(({
 TextField.displayName = "TextField";
 
 // lib/TextFields/AddressLookup.tsx
-import React69, { useState as useState4, useRef as useRef3, useEffect as useEffect4 } from "react";
+import React70, { useState as useState5, useRef as useRef4, useEffect as useEffect5 } from "react";
 import Axios from "axios";
 import { Country, State, City } from "country-state-city";
-var AddressLookup = ({
-  value = {},
-  onChange = () => {
-  },
-  label = "Address",
-  error = {},
-  size = "medium",
-  sx = {},
-  layout = "stack",
-  required = false,
-  token = ""
-}) => {
-  const { theme } = useRufousTheme();
-  const [suggestions, setSuggestions] = useState4([]);
-  const [loading, setLoading] = useState4(false);
-  const [showSuggestions, setShowSuggestions] = useState4(false);
-  const [googleFields, setGoogleFields] = useState4({
-    country: false,
-    state: false,
-    city: false,
-    pincode: false
-  });
-  const debounceTimeout = useRef3(null);
+
+// lib/TextFields/Autocomplete.tsx
+import React69, {
+  useState as useState4,
+  useRef as useRef3,
+  useEffect as useEffect4,
+  useCallback
+} from "react";
+import ReactDOM2 from "react-dom";
+var ChevronDownIcon = () => /* @__PURE__ */ React69.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React69.createElement("polyline", { points: "6 9 12 15 18 9" }));
+var CloseSmIcon = ({ size = 16 }) => /* @__PURE__ */ React69.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }, /* @__PURE__ */ React69.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), /* @__PURE__ */ React69.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" }));
+var CheckIcon = () => /* @__PURE__ */ React69.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React69.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] = useState4(false);
+  const [inputStr, setInputStr] = useState4("");
+  const [focusedIdx, setFocusedIdx] = useState4(-1);
+  const [popupStyle, setPopupStyle] = useState4({});
   const containerRef = useRef3(null);
-  const apiKey = token || "";
-  const countries = Country.getAllCountries();
-  const [states, setStates] = useState4([]);
-  const [cities, setCities] = useState4([]);
-  useEffect4(() => {
-    const handleClickOutside = (event) => {
-      if (containerRef.current && !containerRef.current.contains(event.target)) {
-        setShowSuggestions(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-  useEffect4(() => {
-    if (value.country || value.state || value.city || value.pincode) {
-      setGoogleFields({
-        country: !!value.country,
-        state: !!value.state,
-        city: !!value.city,
-        pincode: !!value.pincode
+  const popupRef = useRef3(null);
+  const inputRef = useRef3(null);
+  const listRef = useRef3(null);
+  const inputId = useRef3(`rf-ac-${Math.random().toString(36).slice(2, 9)}`).current;
+  const sxClass = useSx(sx);
+  const calcPopupStyle = 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
       });
     }
   }, []);
-  useEffect4(() => {
-    if (value.country) {
-      const country = countries.find((c) => c.name === value.country);
-      if (country) {
-        const stateList = State.getStatesOfCountry(country.isoCode);
-        setStates(stateList);
-      } else {
-        setStates([]);
+  const activeInput = controlledInput !== void 0 ? controlledInput : inputStr;
+  const selectedValues = multiple ? Array.isArray(value) ? value : [] : value != null ? [value] : [];
+  const isEqual = useCallback(
+    (a, b) => isOptionEqualToValue ? isOptionEqualToValue(a, b) : a === b,
+    [isOptionEqualToValue]
+  );
+  const isSelected = 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);
       }
-    } else {
-      setStates([]);
+      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 = useCallback(() => {
+    if (disabled) return;
+    calcPopupStyle();
+    setOpen(true);
+    setFocusedIdx(-1);
+    onOpen?.();
+  }, [disabled, calcPopupStyle, onOpen]);
+  const closePopup = useCallback((justSelected = false) => {
+    setOpen(false);
+    setFocusedIdx(-1);
+    onClose?.();
+    if (!justSelected && !freeSolo && !multiple && value == null) {
+      setInputStr("");
+      onInputChange?.("");
     }
-  }, [value.country]);
+  }, [freeSolo, multiple, value, onInputChange, onClose]);
   useEffect4(() => {
-    if (value.state && value.country) {
-      const country = countries.find((c) => c.name === value.country);
-      if (country) {
-        const state = State.getStatesOfCountry(country.isoCode).find((s2) => s2.name === value.state);
-        if (state) {
-          const cityList = City.getCitiesOfState(country.isoCode, state.isoCode);
-          setCities(cityList);
-        } else {
-          setCities([]);
-        }
-      } else {
-        setCities([]);
+    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", 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]);
+  useEffect4(() => {
+    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 {
-      setCities([]);
+      onChange?.(opt);
+      setInputStr(getOptionLabel(opt));
+      onInputChange?.(getOptionLabel(opt));
+      closePopup(true);
     }
-  }, [value.state, value.country]);
-  const handleChange = (field, newVal) => {
-    onChange({
-      ...value,
-      [field]: newVal
-    });
+    setFocusedIdx(-1);
   };
-  const fetchPlaceDetails = async (placeId, mainText = "") => {
-    if (!apiKey) {
-      console.warn("Google Places API Key (token) is missing.");
-      return;
-    }
-    setLoading(true);
-    try {
-      const res = await Axios.get(
-        `https://places.googleapis.com/v1/places/${placeId}`,
-        {
-          headers: {
-            "Content-Type": "application/json",
-            "X-Goog-Api-Key": apiKey,
-            "X-Goog-FieldMask": "addressComponents,formattedAddress"
-          }
-        }
-      );
-      const comps = res.data.addressComponents || [];
-      const findComp = (type) => comps.find((c) => c.types.includes(type))?.longText || "";
-      const city = findComp("locality") || findComp("sublocality_level_1");
-      const state = findComp("administrative_area_level_1");
-      const country = findComp("country");
-      const pincode = findComp("postal_code");
-      setGoogleFields({
-        country: !!country,
-        state: !!state,
-        city: !!city,
-        pincode: !!pincode
-      });
-      const updatedData = {
-        ...value,
-        addressLine1: mainText || value.addressLine1,
-        addressLine2: res.data.formattedAddress || value.addressLine2,
-        city,
-        state,
-        country,
-        pincode
-      };
-      onChange(updatedData);
-      setShowSuggestions(false);
-    } catch (err) {
-      console.error("Error fetching place details:", err);
-    } finally {
-      setLoading(false);
-    }
+  const clearAll = (e) => {
+    e.stopPropagation();
+    onChange?.(multiple ? [] : null);
+    setInputStr("");
+    onInputChange?.("");
+    inputRef.current?.focus();
   };
-  const handleQuerySuggestions = async (query) => {
-    if (!apiKey || !query || query.length < 3) {
-      setSuggestions([]);
-      setShowSuggestions(false);
-      return;
-    }
-    setLoading(true);
-    try {
-      const res = await Axios.post(
-        `https://places.googleapis.com/v1/places:autocomplete`,
-        { input: query },
-        {
-          headers: {
-            "Content-Type": "application/json",
-            "X-Goog-Api-Key": apiKey
-          }
-        }
-      );
-      setSuggestions(res.data.suggestions || []);
-      setShowSuggestions(true);
-    } catch (err) {
-      console.error("Autocomplete Error:", err);
-    } finally {
-      setLoading(false);
-    }
+  const removeTag = (opt, e) => {
+    e.stopPropagation();
+    const next = selectedValues.filter((v) => !isEqual(v, opt));
+    onChange?.(next);
   };
-  const handleCountryChange = (newCountry) => {
-    onChange({
-      ...value,
-      country: newCountry,
-      state: "",
-      city: ""
-    });
-    setGoogleFields({ ...googleFields, country: false, state: false, city: false });
+  const handleInputChange = (e) => {
+    const v = e.target.value;
+    setInputStr(v);
+    onInputChange?.(v);
+    if (!open) openPopup();
   };
-  const handleStateChange = (newState) => {
-    onChange({
-      ...value,
-      state: newState,
-      city: ""
+  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 scrollOptionIntoView = (idx) => {
+    requestAnimationFrame(() => {
+      const el = listRef.current?.querySelector(`[data-idx="${idx}"]`);
+      el?.scrollIntoView({ block: "nearest" });
     });
   };
-  return /* @__PURE__ */ React69.createElement("div", { className: "address-lookup-container", style: sx, ref: containerRef }, /* @__PURE__ */ React69.createElement("div", { className: `address-lookup-grid address-lookup-grid-${layout}` }, /* @__PURE__ */ React69.createElement("div", { className: "address-lookup-grid-item col-l1" }, /* @__PURE__ */ React69.createElement(
-    TextField,
-    {
-      label,
-      name: "addressLine1",
-      fullWidth: true,
-      value: value.addressLine1 || "",
-      required,
-      autoComplete: "off",
-      onChange: (e) => {
-        const val = e.target.value;
-        handleChange("addressLine1", val);
-        if (!val) {
-          onChange({
-            ...value,
-            addressLine1: "",
-            city: "",
-            state: "",
-            country: "",
-            pincode: ""
-          });
-          setSuggestions([]);
-          setShowSuggestions(false);
-          setGoogleFields({ country: false, state: false, city: false, pincode: false });
-        } else {
-          if (debounceTimeout.current) clearTimeout(debounceTimeout.current);
-          debounceTimeout.current = setTimeout(() => {
-            handleQuerySuggestions(val);
-          }, 500);
-        }
-      },
-      onFocus: () => suggestions.length > 0 && setShowSuggestions(true)
-    }
-  ), loading && /* @__PURE__ */ React69.createElement("div", { className: "loading-indicator" }, /* @__PURE__ */ React69.createElement(circularProgress_default, { size: 20 })), showSuggestions && suggestions.length > 0 && /* @__PURE__ */ React69.createElement("div", { className: "autocomplete-dropdown" }, suggestions.map((option, idx) => /* @__PURE__ */ React69.createElement(
+  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__ */ React69.createElement("div", { ref: containerRef, className: rootClasses, style }, /* @__PURE__ */ React69.createElement(
     "div",
     {
-      key: idx,
-      className: "autocomplete-option",
+      className: "rf-text-field__wrapper",
       onClick: () => {
-        const mainText = option?.placePrediction?.structuredFormat?.mainText?.text || "";
-        handleChange("addressLine1", mainText);
-        fetchPlaceDetails(option.placePrediction.placeId, mainText);
+        if (!disabled) {
+          inputRef.current?.focus();
+          if (!open) openPopup();
+        }
       }
     },
-    /* @__PURE__ */ React69.createElement("div", { className: "autocomplete-main-text" }, option?.placePrediction?.structuredFormat?.mainText?.text),
-    /* @__PURE__ */ React69.createElement("div", { className: "autocomplete-secondary-text" }, option?.placePrediction?.structuredFormat?.secondaryText?.text)
-  ))), error.addressLine1 && /* @__PURE__ */ React69.createElement("div", { className: "field-error-text" }, error.addressLine1)), layout === "compact" && /* @__PURE__ */ React69.createElement("div", { className: "address-lookup-grid-item col-l2" }, /* @__PURE__ */ React69.createElement(
-    TextField,
-    {
-      label: "Address Line 2",
-      name: "addressLine2",
-      fullWidth: true,
-      value: value.addressLine2 || "",
-      onChange: (e) => handleChange("addressLine2", e.target.value)
-    }
-  )), layout !== "compact" && /* @__PURE__ */ React69.createElement("div", { className: "address-lookup-grid-item col-l2" }, /* @__PURE__ */ React69.createElement(
-    TextField,
-    {
-      label: "Address Line 2",
-      name: "addressLine2",
-      fullWidth: true,
-      value: value.addressLine2 || "",
-      onChange: (e) => handleChange("addressLine2", e.target.value)
-    }
-  )), /* @__PURE__ */ React69.createElement("div", { className: "address-lookup-grid-item col-country" }, /* @__PURE__ */ React69.createElement(
-    TextField,
-    {
-      label: "Country",
-      name: "country",
-      fullWidth: true,
-      value: value.country || "",
-      required,
-      className: googleFields.country && value.country ? "field-disabled" : "",
-      readOnly: googleFields.country && !!value.country,
-      onChange: (e) => handleCountryChange(e.target.value),
-      list: "countries-list"
-    }
-  ), /* @__PURE__ */ React69.createElement("datalist", { id: "countries-list" }, countries.map((c) => /* @__PURE__ */ React69.createElement("option", { key: c.isoCode, value: c.name }))), error.country && /* @__PURE__ */ React69.createElement("div", { className: "field-error-text" }, error.country)), /* @__PURE__ */ React69.createElement("div", { className: "address-lookup-grid-item col-state" }, /* @__PURE__ */ React69.createElement(
-    TextField,
-    {
-      label: "State",
-      name: "state",
-      fullWidth: true,
-      value: value.state || "",
-      required,
-      disabled: !value.country,
-      className: googleFields.state && value.state ? "field-disabled" : "",
-      readOnly: googleFields.state && !!value.state,
-      onChange: (e) => handleStateChange(e.target.value),
-      list: "states-list"
-    }
-  ), /* @__PURE__ */ React69.createElement("datalist", { id: "states-list" }, states.map((s2) => /* @__PURE__ */ React69.createElement("option", { key: s2.isoCode, value: s2.name }))), error.state && /* @__PURE__ */ React69.createElement("div", { className: "field-error-text" }, error.state)), /* @__PURE__ */ React69.createElement("div", { className: "address-lookup-grid-item col-city" }, /* @__PURE__ */ React69.createElement(
-    TextField,
-    {
-      label: "City",
-      name: "city",
-      fullWidth: true,
-      value: value.city || "",
-      required,
-      disabled: !value.state,
-      className: googleFields.city && value.city ? "field-disabled" : "",
-      readOnly: googleFields.city && !!value.city,
-      onChange: (e) => handleChange("city", e.target.value),
-      list: "cities-list"
-    }
-  ), /* @__PURE__ */ React69.createElement("datalist", { id: "cities-list" }, cities.map((c, i) => /* @__PURE__ */ React69.createElement("option", { key: i, value: c.name }))), error.city && /* @__PURE__ */ React69.createElement("div", { className: "field-error-text" }, error.city)), /* @__PURE__ */ React69.createElement("div", { className: "address-lookup-grid-item col-pin" }, /* @__PURE__ */ React69.createElement(
-    TextField,
-    {
-      label: "Pincode",
-      name: "pincode",
-      fullWidth: true,
-      value: value.pincode || "",
-      required,
-      className: googleFields.pincode && value.pincode ? "field-disabled" : "",
-      readOnly: googleFields.pincode && !!value.pincode,
-      onChange: (e) => handleChange("pincode", e.target.value)
-    }
-  ), error.pincode && /* @__PURE__ */ React69.createElement("div", { className: "field-error-text" }, error.pincode))));
-};
-var AddressLookup_default = AddressLookup;
-
-// lib/TextFields/DateField.tsx
-import React70, {
-  useState as useState5,
-  useRef as useRef4,
-  useEffect as useEffect5,
-  useCallback
-} from "react";
-import { createPortal } from "react-dom";
-var WEEKDAYS = ["SU", "MO", "TU", "WE", "TH", "FR", "SA"];
-var MONTHS = [
-  "January",
-  "February",
-  "March",
-  "April",
-  "May",
-  "June",
-  "July",
-  "August",
-  "September",
-  "October",
-  "November",
-  "December"
-];
-var MONTHS_SHORT = [
-  "Jan",
-  "Feb",
-  "Mar",
-  "Apr",
-  "May",
-  "Jun",
-  "Jul",
-  "Aug",
-  "Sep",
-  "Oct",
-  "Nov",
-  "Dec"
-];
-var formatDisplay = (d, fmt = "MM/DD/YYYY") => {
-  const mm = String(d.getMonth() + 1).padStart(2, "0");
-  const dd = String(d.getDate()).padStart(2, "0");
-  const yyyy = String(d.getFullYear());
-  const day = d.getDate();
-  switch (fmt) {
-    case "DD/MM/YYYY":
-      return `${dd}/${mm}/${yyyy}`;
-    case "YYYY-MM-DD":
-      return `${yyyy}-${mm}-${dd}`;
-    case "DD-MM-YYYY":
-      return `${dd}-${mm}-${yyyy}`;
-    case "MM-DD-YYYY":
-      return `${mm}-${dd}-${yyyy}`;
-    case "YYYY/MM/DD":
-      return `${yyyy}/${mm}/${dd}`;
-    case "DD MMM YYYY":
-      return `${dd} ${MONTHS_SHORT[d.getMonth()]} ${yyyy}`;
-    case "MMM DD, YYYY":
-      return `${MONTHS_SHORT[d.getMonth()]} ${dd}, ${yyyy}`;
-    case "DD MMMM YYYY":
-      return `${dd} ${MONTHS[d.getMonth()]} ${yyyy}`;
-    case "MMMM DD, YYYY":
-      return `${MONTHS[d.getMonth()]} ${dd}, ${yyyy}`;
-    case "MM/DD/YYYY":
-    default:
-      return `${mm}/${dd}/${yyyy}`;
-  }
-};
-var formatTimeDisplay = (h, m, ampm) => `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")} ${ampm}`;
-var parseMonthName = (name) => {
-  const lower = name.toLowerCase();
-  let idx = MONTHS.findIndex((m) => m.toLowerCase() === lower);
-  if (idx >= 0) return idx;
-  idx = MONTHS_SHORT.findIndex((m) => m.toLowerCase() === lower);
-  return idx;
-};
-var parseDisplay = (str, fmt = "MM/DD/YYYY") => {
-  if (fmt === "DD MMM YYYY" || fmt === "DD MMMM YYYY") {
-    const parts2 = str.split(" ");
-    if (parts2.length !== 3) return null;
-    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 (fmt === "MMM DD, YYYY" || fmt === "MMMM DD, YYYY") {
-    const cleaned = str.replace(",", "");
-    const parts2 = cleaned.split(" ").filter(Boolean);
-    if (parts2.length !== 3) return null;
-    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;
-  }
-  const sep = str.includes("/") ? "/" : "-";
-  const parts = str.split(sep);
-  if (parts.length !== 3) return null;
-  const nums = parts.map(Number);
-  let yyyy, mm, dd;
-  switch (fmt) {
-    case "DD/MM/YYYY":
-    case "DD-MM-YYYY":
-      [dd, mm, yyyy] = nums;
-      break;
-    case "YYYY-MM-DD":
-    case "YYYY/MM/DD":
-      [yyyy, mm, dd] = nums;
-      break;
-    case "MM-DD-YYYY":
-    case "MM/DD/YYYY":
-    default:
-      [mm, dd, yyyy] = nums;
-      break;
+    multiple && visibleTags.map((opt, i) => /* @__PURE__ */ React69.createElement("span", { key: i, className: "rf-autocomplete__tag" }, /* @__PURE__ */ React69.createElement("span", { style: { overflow: "hidden", textOverflow: "ellipsis" } }, getOptionLabel(opt)), /* @__PURE__ */ React69.createElement(
+      "button",
+      {
+        type: "button",
+        className: "rf-autocomplete__tag-delete",
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: (e) => removeTag(opt, e),
+        tabIndex: -1
+      },
+      /* @__PURE__ */ React69.createElement(CloseSmIcon, { size: 12 })
+    ))),
+    hiddenCount > 0 && /* @__PURE__ */ React69.createElement("span", { className: "rf-autocomplete__tag-more" }, "+", hiddenCount, " more"),
+    /* @__PURE__ */ React69.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__ */ React69.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, required && /* @__PURE__ */ React69.createElement("span", { className: "rf-text-field__asterisk" }, " *")),
+    variant === "outlined" && /* @__PURE__ */ React69.createElement("fieldset", { className: "rf-text-field__notch" }, label ? /* @__PURE__ */ React69.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ React69.createElement("span", null, label, required ? " *" : "")) : /* @__PURE__ */ React69.createElement("legend", { className: "rf-text-field__legend--empty" })),
+    /* @__PURE__ */ React69.createElement("div", { className: "rf-autocomplete__endgroup" }, hasClearable && /* @__PURE__ */ React69.createElement(
+      "button",
+      {
+        type: "button",
+        className: "rf-autocomplete__icon-btn",
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: clearAll,
+        tabIndex: -1,
+        "aria-label": "Clear"
+      },
+      /* @__PURE__ */ React69.createElement(CloseSmIcon, { size: 16 })
+    ), !freeSolo && /* @__PURE__ */ React69.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__ */ React69.createElement(ChevronDownIcon, null)
+    ))
+  ), helperText && /* @__PURE__ */ React69.createElement("div", { className: `rf-text-field__helper-text${error ? " rf-text-field__helper-text--error" : ""}` }, helperText), open && !disabled && ReactDOM2.createPortal(
+    /* @__PURE__ */ React69.createElement("div", { ref: popupRef, className: "rf-autocomplete__popup", role: "presentation", style: popupStyle }, loading ? /* @__PURE__ */ React69.createElement("div", { className: "rf-autocomplete__loading" }, /* @__PURE__ */ React69.createElement("span", { className: "rf-ac-spinner" }), loadingText) : flatEntries.length === 0 ? /* @__PURE__ */ React69.createElement("div", { className: "rf-autocomplete__no-options" }, noOptionsText) : /* @__PURE__ */ React69.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__ */ React69.createElement("li", { key: `g-${currentGroup}`, role: "presentation" }, /* @__PURE__ */ React69.createElement("div", { className: "rf-autocomplete__group-header" }, currentGroup), /* @__PURE__ */ React69.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__ */ React69.createElement("li", { key: `g-${currentGroup}`, role: "presentation" }, /* @__PURE__ */ React69.createElement("div", { className: "rf-autocomplete__group-header" }, currentGroup), /* @__PURE__ */ React69.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__ */ React69.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__ */ React69.createElement("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, label2),
+      !renderOption && /* @__PURE__ */ React69.createElement("span", { className: "rf-autocomplete__option-check" }, /* @__PURE__ */ React69.createElement(CheckIcon, null))
+    );
   }
-  if (!mm || !dd || !yyyy || yyyy < 1e3) return null;
-  const d = new Date(yyyy, mm - 1, dd);
-  if (isNaN(d.getTime())) return null;
-  return d;
-};
-var isoToDate = (iso) => {
-  if (!iso) return null;
-  const [datePart] = iso.split("T");
-  const [y, mo, d] = datePart.split("-").map(Number);
-  if (!y || !mo || !d) return null;
-  return new Date(y, mo - 1, d);
-};
-var today = () => {
-  const t = /* @__PURE__ */ new Date();
-  return new Date(t.getFullYear(), t.getMonth(), t.getDate());
-};
-var isSameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
-var isDatetimeType = (t) => t !== "date";
-var buildISO = (date, type, hour, minute, ampm) => {
-  const y = date.getFullYear();
-  const mo = String(date.getMonth() + 1).padStart(2, "0");
-  const d = String(date.getDate()).padStart(2, "0");
-  if (type === "date") return `${y}-${mo}-${d}`;
-  let h24 = hour % 12;
-  if (ampm === "PM") h24 += 12;
-  return `${y}-${mo}-${d}T${String(h24).padStart(2, "0")}:${String(minute).padStart(2, "0")}`;
-};
-var parseTimeFromISO = (iso) => {
-  const timePart = iso.split("T")[1] || "";
-  const [hStr, mStr] = timePart.split(":");
-  let h24 = parseInt(hStr, 10) || 0;
-  const m = parseInt(mStr, 10) || 0;
-  const ampm = h24 < 12 ? "AM" : "PM";
-  let h = h24 % 12;
-  if (h === 0) h = 12;
-  return { h, m, ampm };
-};
-var CalendarIcon = () => /* @__PURE__ */ React70.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React70.createElement("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), /* @__PURE__ */ React70.createElement("line", { x1: "16", y1: "2", x2: "16", y2: "6" }), /* @__PURE__ */ React70.createElement("line", { x1: "8", y1: "2", x2: "8", y2: "6" }), /* @__PURE__ */ React70.createElement("line", { x1: "3", y1: "10", x2: "21", y2: "10" }));
-var ChevUp = () => /* @__PURE__ */ React70.createElement("svg", { width: "10", height: "7", viewBox: "0 0 10 7", fill: "currentColor" }, /* @__PURE__ */ React70.createElement("path", { d: "M5 0L10 7H0L5 0Z" }));
-var ChevDown = () => /* @__PURE__ */ React70.createElement("svg", { width: "10", height: "7", viewBox: "0 0 10 7", fill: "currentColor" }, /* @__PURE__ */ React70.createElement("path", { d: "M5 7L0 0H10L5 7Z" }));
-var ITEM_H = 36;
-var ScrollColumn = ({ items, selected, onSelect, infinite = true }) => {
-  const listRef = useRef4(null);
-  const isInternalScroll = useRef4(false);
-  const scrollTimeout = useRef4(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;
+}
+var Autocomplete = React69.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] = useState5([]);
+  const [loading, setLoading] = useState5(false);
+  const [showSuggestions, setShowSuggestions] = useState5(false);
+  const debounceTimeout = useRef4(null);
+  const containerRef = useRef4(null);
+  const apiKey = token || "";
+  const countries = Country.getAllCountries();
+  const [states, setStates] = useState5([]);
+  const [cities, setCities] = useState5([]);
   useEffect5(() => {
-    if (listRef.current) {
-      const targetIndex = centerOffset + selected;
-      listRef.current.scrollTop = targetIndex * ITEM_H - (infinite ? VISUAL_OFFSET : 0);
-    }
-  }, [centerOffset, infinite, selected]);
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setShowSuggestions(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
   useEffect5(() => {
-    if (listRef.current && !isInternalScroll.current) {
-      const targetIndex = centerOffset + selected;
-      listRef.current.scrollTo({
-        top: targetIndex * ITEM_H - (infinite ? VISUAL_OFFSET : 0),
-        behavior: "smooth"
-      });
-    }
-    isInternalScroll.current = false;
-  }, [selected, centerOffset, infinite]);
-  const handleScroll = () => {
-    if (!listRef.current) return;
-    const scrollTop = listRef.current.scrollTop;
-    const adjustedScrollTop = infinite ? scrollTop + VISUAL_OFFSET : scrollTop;
-    const index = Math.round(adjustedScrollTop / ITEM_H);
-    const actualIndex = infinite ? (index % items.length + items.length) % items.length : Math.max(0, Math.min(items.length - 1, index));
-    if (infinite) {
-      const buffer = items.length * 10;
-      if (index < buffer || index > virtualItems.length - buffer) {
-        const newIndex = centerOffset + actualIndex;
-        listRef.current.scrollTop = newIndex * ITEM_H - VISUAL_OFFSET;
-        return;
+    if (value.country) {
+      const country = countries.find((c) => c.name === value.country);
+      if (country) {
+        const stateList = State.getStatesOfCountry(country.isoCode);
+        setStates(stateList);
+      } else {
+        setStates([]);
       }
+    } else {
+      setStates([]);
     }
-    if (scrollTimeout.current) clearTimeout(scrollTimeout.current);
-    scrollTimeout.current = setTimeout(() => {
-      if (actualIndex !== selected) {
-        isInternalScroll.current = true;
-        onSelect(actualIndex);
+  }, [value.country]);
+  useEffect5(() => {
+    if (value.state && value.country) {
+      const country = countries.find((c) => c.name === value.country);
+      if (country) {
+        const state = State.getStatesOfCountry(country.isoCode).find((s2) => s2.name === value.state);
+        if (state) {
+          const cityList = City.getCitiesOfState(country.isoCode, state.isoCode);
+          setCities(cityList);
+        } else {
+          setCities([]);
+        }
+      } else {
+        setCities([]);
       }
-    }, 100);
-  };
-  return /* @__PURE__ */ React70.createElement("div", { className: "rf-timescroll__col-wrapper" }, /* @__PURE__ */ React70.createElement(
-    "div",
-    {
-      className: "rf-timescroll__col",
-      ref: listRef,
-      onScroll: handleScroll
-    },
-    !infinite && /* @__PURE__ */ React70.createElement("div", { className: "rf-timescroll__spacer" }),
-    virtualItems.map((label, idx) => /* @__PURE__ */ React70.createElement(
-      "div",
-      {
-        key: `${label}-${idx}`,
-        className: `rf-timescroll__item ${idx % items.length === selected ? "rf-timescroll__item--active" : ""}`
-      },
-      label
-    )),
-    !infinite && /* @__PURE__ */ React70.createElement("div", { className: "rf-timescroll__spacer" })
-  ), /* @__PURE__ */ React70.createElement("div", { className: "rf-timescroll__mask rf-timescroll__mask--top" }), /* @__PURE__ */ React70.createElement("div", { className: "rf-timescroll__mask rf-timescroll__mask--bottom" }));
-};
-var SpinnerPanel = ({
-  hour,
-  minute,
-  ampm,
-  onHourChange,
-  onMinuteChange,
-  onHourInput,
-  onMinuteInput,
-  onAmpmToggle
-}) => /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__time-row" }, /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__time-input-wrap" }, /* @__PURE__ */ React70.createElement("button", { type: "button", className: "rf-date-picker__time-spin-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => onHourChange(1) }, /* @__PURE__ */ React70.createElement(ChevUp, null)), /* @__PURE__ */ React70.createElement(
-  "input",
-  {
-    type: "number",
-    className: "rf-date-picker__time-digit",
-    value: String(hour).padStart(2, "0"),
-    min: 1,
-    max: 12,
-    onChange: onHourInput,
-    onMouseDown: (e) => e.stopPropagation()
-  }
-), /* @__PURE__ */ React70.createElement("button", { type: "button", className: "rf-date-picker__time-spin-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => onHourChange(-1) }, /* @__PURE__ */ React70.createElement(ChevDown, null))), /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__time-colon" }, ":"), /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__time-input-wrap" }, /* @__PURE__ */ React70.createElement("button", { type: "button", className: "rf-date-picker__time-spin-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => onMinuteChange(1) }, /* @__PURE__ */ React70.createElement(ChevUp, null)), /* @__PURE__ */ React70.createElement(
-  "input",
-  {
-    type: "number",
-    className: "rf-date-picker__time-digit",
-    value: String(minute).padStart(2, "0"),
-    min: 0,
-    max: 59,
-    onChange: onMinuteInput,
-    onMouseDown: (e) => e.stopPropagation()
-  }
-), /* @__PURE__ */ React70.createElement("button", { type: "button", className: "rf-date-picker__time-spin-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => onMinuteChange(-1) }, /* @__PURE__ */ React70.createElement(ChevDown, null))), /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__ampm" }, /* @__PURE__ */ React70.createElement(
-  "button",
-  {
-    type: "button",
-    className: `rf-date-picker__ampm-btn ${ampm === "AM" ? "rf-date-picker__ampm-btn--active" : ""}`,
-    onMouseDown: (e) => e.preventDefault(),
-    onClick: () => onAmpmToggle("AM")
-  },
-  "AM"
-), /* @__PURE__ */ React70.createElement(
-  "button",
-  {
-    type: "button",
-    className: `rf-date-picker__ampm-btn ${ampm === "PM" ? "rf-date-picker__ampm-btn--active" : ""}`,
-    onMouseDown: (e) => e.preventDefault(),
-    onClick: () => onAmpmToggle("PM")
-  },
-  "PM"
-)));
-var CalendarBody = ({
-  viewMonth,
-  viewYear,
-  selectedDate,
-  todayDate,
-  dayCells,
-  onDayClick,
-  onPrev,
-  onNext,
-  onMonthSelect,
-  onYearSelect
-}) => {
-  const [pickerView, setPickerView] = useState5("calendar");
-  const handleMonthClick = () => {
-    setPickerView(pickerView === "month" ? "calendar" : "month");
+    } else {
+      setCities([]);
+    }
+  }, [value.state, value.country]);
+  const handleChange = (field, newVal) => {
+    onChange({
+      ...value,
+      [field]: newVal
+    });
   };
-  const handleYearClick = () => {
-    setPickerView(pickerView === "year" ? "calendar" : "year");
+  const fetchPlaceDetails = async (placeId, mainText = "") => {
+    if (!apiKey) {
+      console.warn("Google Places API Key (token) is missing.");
+      return;
+    }
+    setLoading(true);
+    try {
+      const res = await Axios.get(
+        `https://places.googleapis.com/v1/places/${placeId}`,
+        {
+          headers: {
+            "Content-Type": "application/json",
+            "X-Goog-Api-Key": apiKey,
+            "X-Goog-FieldMask": "addressComponents,formattedAddress"
+          }
+        }
+      );
+      const comps = res.data.addressComponents || [];
+      const findComp = (type) => comps.find((c) => c.types.includes(type))?.longText || "";
+      const city = findComp("locality") || findComp("sublocality_level_1");
+      const state = findComp("administrative_area_level_1");
+      const country = findComp("country");
+      const pincode = findComp("postal_code");
+      const updatedData = {
+        ...value,
+        addressLine1: mainText || value.addressLine1,
+        addressLine2: res.data.formattedAddress || value.addressLine2,
+        city,
+        state,
+        country,
+        pincode
+      };
+      onChange(updatedData);
+      setShowSuggestions(false);
+    } catch (err) {
+      console.error("Error fetching place details:", err);
+    } finally {
+      setLoading(false);
+    }
   };
-  const handleMonthPick = (month) => {
-    onMonthSelect(month);
-    setPickerView("calendar");
+  const handleQuerySuggestions = async (query) => {
+    if (!apiKey || !query || query.length < 3) {
+      setSuggestions([]);
+      setShowSuggestions(false);
+      return;
+    }
+    setLoading(true);
+    try {
+      const res = await Axios.post(
+        `https://places.googleapis.com/v1/places:autocomplete`,
+        { input: query },
+        {
+          headers: {
+            "Content-Type": "application/json",
+            "X-Goog-Api-Key": apiKey
+          }
+        }
+      );
+      setSuggestions(res.data.suggestions || []);
+      setShowSuggestions(true);
+    } catch (err) {
+      console.error("Autocomplete Error:", err);
+    } finally {
+      setLoading(false);
+    }
   };
-  const handleYearPick = (year) => {
-    onYearSelect(year);
-    setPickerView("calendar");
+  const handleCountryChange = (newCountry) => {
+    onChange({
+      ...value,
+      country: newCountry,
+      state: "",
+      city: ""
+    });
   };
-  const currentYear = todayDate.getFullYear();
-  const yearStart = viewYear - 6;
-  const years = Array.from({ length: 16 }, (_, i) => yearStart + i);
-  return /* @__PURE__ */ React70.createElement(React70.Fragment, null, /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__header" }, /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__header-labels" }, /* @__PURE__ */ React70.createElement(
-    "span",
+  const handleStateChange = (newState) => {
+    onChange({
+      ...value,
+      state: newState,
+      city: ""
+    });
+  };
+  return /* @__PURE__ */ React70.createElement("div", { className: "address-lookup-container", style: sx, ref: containerRef }, /* @__PURE__ */ React70.createElement("div", { className: `address-lookup-grid address-lookup-grid-${layout}` }, /* @__PURE__ */ React70.createElement("div", { className: "address-lookup-grid-item col-l1" }, /* @__PURE__ */ React70.createElement(
+    TextField,
     {
-      className: `rf-date-picker__month-label ${pickerView === "month" ? "rf-date-picker__month-label--active" : ""}`,
-      onClick: handleMonthClick
-    },
-    MONTHS[viewMonth]
-  ), /* @__PURE__ */ React70.createElement(
-    "span",
+      label,
+      name: "addressLine1",
+      fullWidth: true,
+      value: value.addressLine1 || "",
+      required,
+      autoComplete: "off",
+      onChange: (e) => {
+        const val = e.target.value;
+        handleChange("addressLine1", val);
+        if (!val) {
+          onChange({
+            ...value,
+            addressLine1: "",
+            city: "",
+            state: "",
+            country: "",
+            pincode: ""
+          });
+          setSuggestions([]);
+          setShowSuggestions(false);
+        } else {
+          if (debounceTimeout.current) clearTimeout(debounceTimeout.current);
+          debounceTimeout.current = setTimeout(() => {
+            handleQuerySuggestions(val);
+          }, 500);
+        }
+      },
+      onFocus: () => suggestions.length > 0 && setShowSuggestions(true)
+    }
+  ), loading && /* @__PURE__ */ React70.createElement("div", { className: "loading-indicator" }, /* @__PURE__ */ React70.createElement(circularProgress_default, { size: 20 })), showSuggestions && suggestions.length > 0 && /* @__PURE__ */ React70.createElement("div", { className: "autocomplete-dropdown" }, suggestions.map((option, idx) => /* @__PURE__ */ React70.createElement(
+    "div",
     {
-      className: `rf-date-picker__year-label ${pickerView === "year" ? "rf-date-picker__year-label--active" : ""}`,
-      onClick: handleYearClick
+      key: idx,
+      className: "autocomplete-option",
+      onClick: () => {
+        const mainText = option?.placePrediction?.structuredFormat?.mainText?.text || "";
+        handleChange("addressLine1", mainText);
+        fetchPlaceDetails(option.placePrediction.placeId, mainText);
+      }
     },
-    viewYear
-  )), /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__nav" }, pickerView === "year" ? /* @__PURE__ */ React70.createElement(React70.Fragment, null, /* @__PURE__ */ React70.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear - 16), "aria-label": "Previous years" }, "\u2039"), /* @__PURE__ */ React70.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear + 16), "aria-label": "Next years" }, "\u203A")) : /* @__PURE__ */ React70.createElement(React70.Fragment, null, /* @__PURE__ */ React70.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onPrev, "aria-label": "Previous month" }, "\u2039"), /* @__PURE__ */ React70.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onNext, "aria-label": "Next month" }, "\u203A")))), pickerView === "month" && /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__month-grid" }, MONTHS_SHORT.map((m, idx) => /* @__PURE__ */ React70.createElement(
-    "button",
+    /* @__PURE__ */ React70.createElement("div", { className: "autocomplete-main-text" }, option?.placePrediction?.structuredFormat?.mainText?.text),
+    /* @__PURE__ */ React70.createElement("div", { className: "autocomplete-secondary-text" }, option?.placePrediction?.structuredFormat?.secondaryText?.text)
+  ))), error.addressLine1 && /* @__PURE__ */ React70.createElement("div", { className: "field-error-text" }, error.addressLine1)), layout === "compact" && /* @__PURE__ */ React70.createElement("div", { className: "address-lookup-grid-item col-l2" }, /* @__PURE__ */ React70.createElement(
+    TextField,
     {
-      key: m,
-      type: "button",
-      className: [
-        "rf-date-picker__month-cell",
-        idx === viewMonth ? "rf-date-picker__month-cell--selected" : "",
-        idx === todayDate.getMonth() && viewYear === currentYear ? "rf-date-picker__month-cell--current" : ""
-      ].filter(Boolean).join(" "),
-      onClick: () => handleMonthPick(idx)
-    },
-    m
-  ))), pickerView === "year" && /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__year-grid" }, years.map((y) => /* @__PURE__ */ React70.createElement(
-    "button",
+      label: "Address Line 2",
+      name: "addressLine2",
+      fullWidth: true,
+      value: value.addressLine2 || "",
+      onChange: (e) => handleChange("addressLine2", e.target.value)
+    }
+  )), layout !== "compact" && /* @__PURE__ */ React70.createElement("div", { className: "address-lookup-grid-item col-l2" }, /* @__PURE__ */ React70.createElement(
+    TextField,
     {
-      key: y,
-      type: "button",
-      className: [
-        "rf-date-picker__year-cell",
-        y === viewYear ? "rf-date-picker__year-cell--selected" : "",
-        y === currentYear ? "rf-date-picker__year-cell--current" : ""
-      ].filter(Boolean).join(" "),
-      onClick: () => handleYearPick(y)
-    },
-    y
-  ))), pickerView === "calendar" && /* @__PURE__ */ React70.createElement(React70.Fragment, null, /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__weekdays" }, WEEKDAYS.map((w) => /* @__PURE__ */ React70.createElement("div", { key: w, className: "rf-date-picker__weekday" }, w))), /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__grid" }, dayCells.map((day, idx) => {
-    if (day === null) return /* @__PURE__ */ React70.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__ */ React70.createElement(
-      "button",
-      {
-        key: day,
-        type: "button",
-        className: [
-          "rf-date-picker__day",
-          isSelected ? "rf-date-picker__day--selected" : "",
-          isToday && !isSelected ? "rf-date-picker__day--today" : ""
-        ].filter(Boolean).join(" "),
-        onClick: () => onDayClick(day)
-      },
-      day
-    );
-  }))));
-};
-var DateField = ({
-  label,
-  value,
-  onChange,
-  type = "date",
-  dateFormat = "MM/DD/YYYY",
-  variant = "outlined",
-  size = "medium",
-  color = "primary",
-  error = false,
-  helperText,
-  fullWidth = false,
-  disabled = false,
-  required = false,
-  placeholder,
-  className = "",
-  style,
-  sx
-}) => {
-  const sxClass = useSx(sx);
-  const [open, setOpen] = useState5(false);
-  const [selectedDate, setSelectedDate] = useState5(() => value ? isoToDate(value) : null);
-  const [hour, setHour] = useState5(() => {
-    if (value && isDatetimeType(type)) return parseTimeFromISO(value).h;
-    return 12;
-  });
-  const [minute, setMinute] = useState5(() => {
-    if (value && isDatetimeType(type)) return parseTimeFromISO(value).m;
-    return 0;
-  });
-  const [ampm, setAmpm] = useState5(() => {
-    if (value && isDatetimeType(type)) return parseTimeFromISO(value).ampm;
-    return "AM";
-  });
-  const [viewYear, setViewYear] = useState5(() => {
-    const base = value ? isoToDate(value) : null;
-    return base ? base.getFullYear() : today().getFullYear();
-  });
-  const [viewMonth, setViewMonth] = useState5(() => {
-    const base = value ? isoToDate(value) : null;
-    return base ? base.getMonth() : today().getMonth();
-  });
-  const [inputStr, setInputStr] = useState5(() => {
-    if (!value) return "";
-    const d = isoToDate(value);
-    if (!d) return "";
-    let str = formatDisplay(d, dateFormat);
-    if (isDatetimeType(type)) {
-      const t = parseTimeFromISO(value);
-      str += " " + formatTimeDisplay(t.h, t.m, t.ampm);
-    }
-    return str;
-  });
-  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 = useRef4(null);
-  const pickerRef = useRef4(null);
-  const [dropUp, setDropUp] = useState5(false);
-  const inputId = useRef4(`rf-df-${Math.random().toString(36).substring(2, 11)}`).current;
-  useEffect5(() => {
-    if (value === void 0) return;
-    if (!value) {
-      setSelectedDate(null);
-      setInputStr("");
-      return;
+      label: "Address Line 2",
+      name: "addressLine2",
+      fullWidth: true,
+      value: value.addressLine2 || "",
+      onChange: (e) => handleChange("addressLine2", e.target.value)
     }
-    const d = isoToDate(value);
-    setSelectedDate(d);
-    if (d) {
-      setViewYear(d.getFullYear());
-      setViewMonth(d.getMonth());
-      let str = formatDisplay(d, dateFormat);
-      if (isDatetimeType(type)) {
-        const t = parseTimeFromISO(value);
-        setHour(t.h);
-        setMinute(t.m);
-        setAmpm(t.ampm);
-        str += " " + formatTimeDisplay(t.h, t.m, t.ampm);
-      }
-      setInputStr(str);
+  )), /* @__PURE__ */ React70.createElement("div", { className: "address-lookup-grid-item col-country" }, /* @__PURE__ */ React70.createElement(
+    Autocomplete,
+    {
+      options: countries.map((c) => c.name),
+      value: value.country || null,
+      onChange: (v) => handleCountryChange(v || ""),
+      label: "Country",
+      fullWidth: true,
+      required,
+      error: !!error.country
     }
-  }, [value, type]);
-  useEffect5(() => {
-    if (!open) return;
-    const handler = (e) => {
-      const target = e.target;
-      if (containerRef.current?.contains(target)) return;
-      if (pickerRef.current?.contains(target)) return;
-      setOpen(false);
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [open]);
-  useEffect5(() => {
-    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 = useCallback((d, h, m, ap) => {
-    setSelectedDate(d);
-    if (!d) {
-      setInputStr("");
-      onChange?.("");
-      return;
+  ), error.country && /* @__PURE__ */ React70.createElement("div", { className: "field-error-text" }, error.country)), /* @__PURE__ */ React70.createElement("div", { className: "address-lookup-grid-item col-state" }, /* @__PURE__ */ React70.createElement(
+    Autocomplete,
+    {
+      options: states.map((s2) => s2.name),
+      value: value.state || null,
+      onChange: (v) => handleStateChange(v || ""),
+      label: "State",
+      fullWidth: true,
+      required,
+      error: !!error.state
     }
-    let str = formatDisplay(d, dateFormat);
-    if (isDatetimeType(type)) str += " " + formatTimeDisplay(h, m, ap);
-    setInputStr(str);
-    onChange?.(buildISO(d, type, h, m, ap));
-  }, [type, onChange, dateFormat]);
-  const handleDayClick = (day) => {
-    const d = new Date(viewYear, viewMonth, day);
-    setSelectedDate(d);
-    let str = formatDisplay(d, dateFormat);
-    if (isDatetimeType(type)) str += " " + formatTimeDisplay(hour, minute, ampm);
-    setInputStr(str);
-    onChange?.(buildISO(d, type, hour, minute, ampm));
-    if (type === "date") setOpen(false);
-  };
-  const handleToday = () => {
-    const t = today();
-    setViewYear(t.getFullYear());
-    setViewMonth(t.getMonth());
-    commitDate(t, hour, minute, ampm);
-    if (type === "date") setOpen(false);
-  };
-  const handleClear = () => commitDate(null, hour, minute, ampm);
-  const handleInputChange = (e) => {
-    const raw = e.target.value;
-    setInputStr(raw);
-    const parts = raw.split(" ");
-    const datePart = parts[0];
-    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 (timePart?.includes(":")) {
-          const [hStr, mStr] = timePart.split(":");
-          const parsedH = parseInt(hStr, 10);
-          const parsedM = parseInt(mStr, 10);
-          if (!isNaN(parsedH) && parsedH >= 1 && parsedH <= 12) {
-            h = parsedH;
-            setHour(h);
-          }
-          if (!isNaN(parsedM) && parsedM >= 0 && parsedM <= 59) {
-            m = parsedM;
-            setMinute(m);
-          }
-        }
-        if (periodPart === "AM" || periodPart === "PM") {
-          ap = periodPart;
-          setAmpm(ap);
-        }
-      }
-      onChange?.(buildISO(parsed, type, h, m, ap));
-    } else if (!raw) {
-      setSelectedDate(null);
-      onChange?.("");
+  ), error.state && /* @__PURE__ */ React70.createElement("div", { className: "field-error-text" }, error.state)), /* @__PURE__ */ React70.createElement("div", { className: "address-lookup-grid-item col-city" }, /* @__PURE__ */ React70.createElement(
+    Autocomplete,
+    {
+      options: cities.map((c) => c.name),
+      value: value.city || null,
+      onChange: (v) => handleChange("city", v || ""),
+      label: "City",
+      fullWidth: true,
+      required,
+      error: !!error.city
     }
-  };
-  const handleHourChange = (delta) => {
-    const h = (hour - 1 + delta + 12) % 12 + 1;
-    setHour(h);
-    if (selectedDate) commitDate(selectedDate, h, minute, ampm);
-  };
-  const handleMinuteChange = (delta) => {
-    const m = (minute + delta + 60) % 60;
-    setMinute(m);
-    if (selectedDate) commitDate(selectedDate, hour, m, ampm);
-  };
-  const handleAmpmToggle = (val) => {
-    setAmpm(val);
-    if (selectedDate) commitDate(selectedDate, hour, minute, val);
-  };
-  const handleHourInput = (e) => {
-    let v = parseInt(e.target.value, 10);
-    if (isNaN(v)) return;
-    v = Math.max(1, Math.min(12, v));
-    setHour(v);
-    if (selectedDate) commitDate(selectedDate, v, minute, ampm);
-  };
-  const handleMinuteInput = (e) => {
-    let v = parseInt(e.target.value, 10);
-    if (isNaN(v)) return;
-    v = Math.max(0, Math.min(59, v));
-    setMinute(v);
-    if (selectedDate) commitDate(selectedDate, hour, v, ampm);
-  };
-  const handleScrollHour = (idx) => {
-    const h = idx + 1;
-    setHour(h);
-    if (selectedDate) commitDate(selectedDate, h, minute, ampm);
-  };
-  const handleScrollMinute = (idx) => {
-    setMinute(idx);
-    if (selectedDate) commitDate(selectedDate, hour, idx, ampm);
-  };
-  const handleScrollAmpm = (idx) => {
-    const ap = AMPMS[idx];
-    setAmpm(ap);
-    if (selectedDate) commitDate(selectedDate, hour, minute, ap);
-  };
-  const prevMonth = () => {
-    if (viewMonth === 0) {
-      setViewMonth(11);
-      setViewYear((y) => y - 1);
-    } else setViewMonth((m) => m - 1);
-  };
-  const nextMonth = () => {
-    if (viewMonth === 11) {
-      setViewMonth(0);
-      setViewYear((y) => y + 1);
-    } else setViewMonth((m) => m + 1);
-  };
-  const firstDayOfWeek = new Date(viewYear, viewMonth, 1).getDay();
-  const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
-  const dayCells = [
-    ...Array(firstDayOfWeek).fill(null),
-    ...Array.from({ length: daysInMonth }, (_, i) => i + 1)
-  ];
-  const isFloating = Boolean(inputStr || 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" : "",
-    variant !== "compact" ? "rf-text-field--adorned-end" : "",
-    "rf-date-field",
-    fullWidth ? "rf-date-field--full-width" : "",
-    sxClass,
-    className
-  ].filter(Boolean).join(" ");
-  const inputPlaceholder = placeholder || (variant === "outlined" ? " " : void 0);
-  const todayDate = today();
-  const isSideVariant = type === "datetime-side" || type === "datetime-scroll";
-  return /* @__PURE__ */ React70.createElement("div", { ref: containerRef, className: rootClasses, style }, /* @__PURE__ */ React70.createElement("div", { className: "rf-date-field__anchor" }, /* @__PURE__ */ React70.createElement(
-    "div",
+  ), error.city && /* @__PURE__ */ React70.createElement("div", { className: "field-error-text" }, error.city)), /* @__PURE__ */ React70.createElement("div", { className: "address-lookup-grid-item col-pin" }, /* @__PURE__ */ React70.createElement(
+    TextField,
     {
-      className: "rf-text-field__wrapper",
-      onClick: () => {
-        if (!disabled) setOpen((o) => !o);
-      },
-      style: { cursor: disabled ? "default" : "pointer" }
-    },
-    /* @__PURE__ */ React70.createElement(
-      "input",
-      {
-        id: inputId,
-        className: "rf-text-field__input",
-        type: "text",
-        value: inputStr,
-        onChange: handleInputChange,
-        placeholder: inputPlaceholder,
-        disabled,
-        onClick: (e) => e.stopPropagation(),
-        onFocus: () => {
-          if (!disabled) setOpen(true);
-        }
-      }
-    ),
-    /* @__PURE__ */ React70.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, /* @__PURE__ */ React70.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"
-      },
-      /* @__PURE__ */ React70.createElement(CalendarIcon, null)
-    )),
-    label && /* @__PURE__ */ React70.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ React70.createElement("span", { className: "rf-text-field__asterisk" }, "*")),
-    variant === "outlined" && /* @__PURE__ */ React70.createElement("fieldset", { className: "rf-text-field__notch" }, label && /* @__PURE__ */ React70.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ React70.createElement("span", null, label, required ? " *" : "")))
-  ), open && !disabled && createPortal(
-    /* @__PURE__ */ React70.createElement(
-      "div",
-      {
-        ref: pickerRef,
-        className: [
-          "rf-date-picker",
-          "rf-date-picker--portaled",
-          isSideVariant ? "rf-date-picker--side" : "",
-          dropUp ? "rf-date-picker--drop-up" : ""
-        ].filter(Boolean).join(" "),
-        style: (() => {
-          const rect = containerRef.current?.getBoundingClientRect();
-          if (!rect) return {};
-          const top = rect.bottom + 6;
-          const spaceBelow = window.innerHeight - rect.bottom - 6;
-          const useDropUp = spaceBelow < 350 && rect.top > spaceBelow;
-          return {
-            position: "fixed",
-            left: rect.left,
-            ...useDropUp ? { bottom: window.innerHeight - rect.top + 6 } : { top },
-            zIndex: 99999
-          };
-        })(),
-        onMouseDown: (e) => e.preventDefault()
-      },
-      /* @__PURE__ */ React70.createElement("div", { className: isSideVariant ? "rf-date-picker__cal-col" : void 0 }, /* @__PURE__ */ React70.createElement(
-        CalendarBody,
-        {
-          viewMonth,
-          viewYear,
-          selectedDate,
-          todayDate,
-          dayCells,
-          onDayClick: handleDayClick,
-          onPrev: prevMonth,
-          onNext: nextMonth,
-          onMonthSelect: setViewMonth,
-          onYearSelect: setViewYear
-        }
-      ), type === "datetime" && /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__time-section" }, /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__time-label" }, "Time"), /* @__PURE__ */ React70.createElement(
-        SpinnerPanel,
-        {
-          hour,
-          minute,
-          ampm,
-          onHourChange: handleHourChange,
-          onMinuteChange: handleMinuteChange,
-          onHourInput: handleHourInput,
-          onMinuteInput: handleMinuteInput,
-          onAmpmToggle: handleAmpmToggle
-        }
-      )), /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__divider" }), /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__footer" }, /* @__PURE__ */ React70.createElement("button", { type: "button", className: "rf-date-picker__footer-btn", onClick: handleToday }, "Today"), /* @__PURE__ */ React70.createElement("button", { type: "button", className: "rf-date-picker__footer-btn rf-date-picker__footer-btn--clear", onClick: handleClear }, "Clear"))),
-      type === "datetime-side" && /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__side-panel" }, /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__side-label" }, "Time"), /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__side-spinner" }, /* @__PURE__ */ React70.createElement(
-        SpinnerPanel,
-        {
-          hour,
-          minute,
-          ampm,
-          onHourChange: handleHourChange,
-          onMinuteChange: handleMinuteChange,
-          onHourInput: handleHourInput,
-          onMinuteInput: handleMinuteInput,
-          onAmpmToggle: handleAmpmToggle
-        }
-      )), /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__side-time-display" }, String(hour).padStart(2, "0"), ":", String(minute).padStart(2, "0"), " ", ampm)),
-      type === "datetime-scroll" && /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__side-panel" }, /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__side-label" }, "Time"), /* @__PURE__ */ React70.createElement("div", { className: "rf-timescroll" }, /* @__PURE__ */ React70.createElement(
-        ScrollColumn,
-        {
-          items: HOURS,
-          selected: hour - 1,
-          onSelect: handleScrollHour
-        }
-      ), /* @__PURE__ */ React70.createElement("div", { className: "rf-timescroll__colon" }, ":"), /* @__PURE__ */ React70.createElement(
-        ScrollColumn,
-        {
-          items: MINUTES,
-          selected: minute,
-          onSelect: handleScrollMinute
-        }
-      ), /* @__PURE__ */ React70.createElement(
-        ScrollColumn,
-        {
-          items: AMPMS,
-          selected: ampm === "AM" ? 0 : 1,
-          onSelect: handleScrollAmpm,
-          infinite: false
-        }
-      )), /* @__PURE__ */ React70.createElement("div", { className: "rf-date-picker__side-time-display" }, String(hour).padStart(2, "0"), ":", String(minute).padStart(2, "0"), " ", ampm))
-    ),
-    document.body
-  )), helperText && /* @__PURE__ */ React70.createElement("div", { className: "rf-text-field__helper-text" }, helperText));
+      label: "Pincode",
+      name: "pincode",
+      fullWidth: true,
+      value: value.pincode || "",
+      required,
+      onChange: (e) => handleChange("pincode", e.target.value)
+    }
+  ), error.pincode && /* @__PURE__ */ React70.createElement("div", { className: "field-error-text" }, error.pincode))));
 };
-DateField.displayName = "DateField";
+var AddressLookup_default = AddressLookup;
 
-// lib/TextFields/DateRangeField.tsx
+// lib/TextFields/DateField.tsx
 import React71, {
   useState as useState6,
   useRef as useRef5,
-  useEffect as useEffect6
+  useEffect as useEffect6,
+  useCallback as useCallback2
 } from "react";
-var WEEKDAYS2 = ["SU", "MO", "TU", "WE", "TH", "FR", "SA"];
-var MONTHS2 = [
+import { createPortal } from "react-dom";
+var WEEKDAYS = ["SU", "MO", "TU", "WE", "TH", "FR", "SA"];
+var MONTHS = [
   "January",
   "February",
   "March",
@@ -2807,7 +2441,7 @@ var MONTHS2 = [
   "November",
   "December"
 ];
-var MONTHS_SHORT2 = [
+var MONTHS_SHORT = [
   "Jan",
   "Feb",
   "Mar",
@@ -2821,240 +2455,352 @@ var MONTHS_SHORT2 = [
   "Nov",
   "Dec"
 ];
-var PRESETS = [
-  { id: "today", label: "Today" },
-  { id: "this_week", label: "This week" },
-  { id: "this_month", label: "This month" },
-  { id: "till_date", label: "Till date" },
-  { id: "all", label: "All" }
-];
-var todayFn = () => {
-  const t = /* @__PURE__ */ new Date();
-  return new Date(t.getFullYear(), t.getMonth(), t.getDate());
+var formatDisplay = (d, fmt = "MM/DD/YYYY") => {
+  const mm = String(d.getMonth() + 1).padStart(2, "0");
+  const dd = String(d.getDate()).padStart(2, "0");
+  const yyyy = String(d.getFullYear());
+  const day = d.getDate();
+  switch (fmt) {
+    case "DD/MM/YYYY":
+      return `${dd}/${mm}/${yyyy}`;
+    case "YYYY-MM-DD":
+      return `${yyyy}-${mm}-${dd}`;
+    case "DD-MM-YYYY":
+      return `${dd}-${mm}-${yyyy}`;
+    case "MM-DD-YYYY":
+      return `${mm}-${dd}-${yyyy}`;
+    case "YYYY/MM/DD":
+      return `${yyyy}/${mm}/${dd}`;
+    case "DD MMM YYYY":
+      return `${dd} ${MONTHS_SHORT[d.getMonth()]} ${yyyy}`;
+    case "MMM DD, YYYY":
+      return `${MONTHS_SHORT[d.getMonth()]} ${dd}, ${yyyy}`;
+    case "DD MMMM YYYY":
+      return `${dd} ${MONTHS[d.getMonth()]} ${yyyy}`;
+    case "MMMM DD, YYYY":
+      return `${MONTHS[d.getMonth()]} ${dd}, ${yyyy}`;
+    case "MM/DD/YYYY":
+    default:
+      return `${mm}/${dd}/${yyyy}`;
+  }
 };
-var isoToDate2 = (iso) => {
-  if (!iso) return null;
-  const parts = iso.split("-").map(Number);
-  if (parts.length < 3 || !parts[0] || !parts[1] || !parts[2]) return null;
-  return new Date(parts[0], parts[1] - 1, parts[2]);
+var formatTimeDisplay = (h, m, ampm) => `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")} ${ampm}`;
+var parseMonthName = (name) => {
+  const lower = name.toLowerCase();
+  let idx = MONTHS.findIndex((m) => m.toLowerCase() === lower);
+  if (idx >= 0) return idx;
+  idx = MONTHS_SHORT.findIndex((m) => m.toLowerCase() === lower);
+  return idx;
 };
-var dateToISO = (d) => {
-  const y = d.getFullYear();
-  const mo = String(d.getMonth() + 1).padStart(2, "0");
-  const dd = String(d.getDate()).padStart(2, "0");
-  return `${y}-${mo}-${dd}`;
+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 formatShort = (d) => `${String(d.getDate()).padStart(2, "0")} ${MONTHS_SHORT2[d.getMonth()]} ${d.getFullYear()}`;
-var parseInputDate = (str) => {
-  const s2 = str.trim();
-  if (!s2) return null;
-  const shortMatch = s2.match(/^(\d{1,2})\s+([A-Za-z]+)\s+(\d{4})$/);
-  if (shortMatch) {
-    const day = parseInt(shortMatch[1], 10);
-    const monthIdx = MONTHS_SHORT2.findIndex((m) => m.toLowerCase() === shortMatch[2].toLowerCase());
-    const year = parseInt(shortMatch[3], 10);
-    if (monthIdx !== -1 && day >= 1 && day <= 31 && year >= 1e3) {
-      const d = new Date(year, monthIdx, day);
-      if (!isNaN(d.getTime())) return d;
-    }
+var parseDisplay = (str, fmt = "MM/DD/YYYY") => {
+  if (fmt === "DD MMM YYYY" || fmt === "DD MMMM YYYY") {
+    const parts2 = str.split(" ");
+    if (parts2.length !== 3) return null;
+    const dd2 = parseInt(parts2[0], 10);
+    const mm2 = parseMonthName(parts2[1]);
+    const yyyy2 = parseInt(parts2[2], 10);
+    if (isNaN(dd2) || isNaN(yyyy2) || yyyy2 < 1e3) return null;
+    return strictDate(yyyy2, mm2, dd2);
   }
-  const slashMatch = s2.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
-  if (slashMatch) {
-    const d = new Date(parseInt(slashMatch[3], 10), parseInt(slashMatch[2], 10) - 1, parseInt(slashMatch[1], 10));
-    if (!isNaN(d.getTime())) return d;
+  if (fmt === "MMM DD, YYYY" || fmt === "MMMM DD, YYYY") {
+    const cleaned = str.replace(",", "");
+    const parts2 = cleaned.split(" ").filter(Boolean);
+    if (parts2.length !== 3) return null;
+    const mm2 = parseMonthName(parts2[0]);
+    const dd2 = parseInt(parts2[1], 10);
+    const yyyy2 = parseInt(parts2[2], 10);
+    if (isNaN(dd2) || isNaN(yyyy2) || yyyy2 < 1e3) return null;
+    return strictDate(yyyy2, mm2, dd2);
   }
-  const isoMatch = s2.match(/^(\d{4})-(\d{2})-(\d{2})$/);
-  if (isoMatch) {
-    const d = new Date(parseInt(isoMatch[1], 10), parseInt(isoMatch[2], 10) - 1, parseInt(isoMatch[3], 10));
-    if (!isNaN(d.getTime())) return d;
+  const sep = str.includes("/") ? "/" : "-";
+  const parts = str.split(sep);
+  if (parts.length !== 3) return null;
+  const nums = parts.map(Number);
+  let yyyy, mm, dd;
+  switch (fmt) {
+    case "DD/MM/YYYY":
+    case "DD-MM-YYYY":
+      [dd, mm, yyyy] = nums;
+      break;
+    case "YYYY-MM-DD":
+    case "YYYY/MM/DD":
+      [yyyy, mm, dd] = nums;
+      break;
+    case "MM-DD-YYYY":
+    case "MM/DD/YYYY":
+    default:
+      [mm, dd, yyyy] = nums;
+      break;
   }
-  return null;
+  if (!yyyy || yyyy < 1e3) return null;
+  return strictDate(yyyy, mm - 1, dd);
 };
-var isSameDay2 = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
-var daysBetween = (a, b) => Math.round((b.getTime() - a.getTime()) / (1e3 * 60 * 60 * 24));
-var addDays = (d, n) => {
-  const r = new Date(d.getTime());
-  r.setDate(r.getDate() + n);
-  return r;
+var isoToDate = (iso) => {
+  if (!iso) return null;
+  const [datePart] = iso.split("T");
+  const [y, mo, d] = datePart.split("-").map(Number);
+  if (!y || !mo || !d) return null;
+  return new Date(y, mo - 1, d);
 };
-var getPresetRange = (preset, currentStart) => {
-  const today2 = todayFn();
-  switch (preset) {
-    case "today":
-      return { start: dateToISO(today2), end: dateToISO(today2) };
-    case "this_week": {
-      const day = today2.getDay();
-      const monday = addDays(today2, day === 0 ? -6 : -(day - 1));
-      return { start: dateToISO(monday), end: dateToISO(addDays(monday, 6)) };
-    }
-    case "this_month": {
-      const start = new Date(today2.getFullYear(), today2.getMonth(), 1);
-      const end = new Date(today2.getFullYear(), today2.getMonth() + 1, 0);
-      return { start: dateToISO(start), end: dateToISO(end) };
-    }
-    case "till_date": {
-      const start = currentStart ?? addDays(today2, -30);
-      return { start: dateToISO(start), end: dateToISO(today2) };
-    }
-    case "all":
-      return { start: dateToISO(new Date(2e3, 0, 1)), end: dateToISO(today2) };
+var today = () => {
+  const t = /* @__PURE__ */ new Date();
+  return new Date(t.getFullYear(), t.getMonth(), t.getDate());
+};
+var isSameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+var isDatetimeType = (t) => t !== "date";
+var buildISO = (date, type, hour, minute, ampm) => {
+  const y = date.getFullYear();
+  const mo = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  if (type === "date") return `${y}-${mo}-${d}`;
+  let h24 = hour % 12;
+  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 { start: "", end: "" };
+      return 1;
   }
 };
-var detectPreset = (start, end) => {
-  if (!start || !end) return null;
-  const today2 = todayFn();
-  if (isSameDay2(start, today2) && isSameDay2(end, today2)) return "today";
-  const day = today2.getDay();
-  const monday = addDays(today2, day === 0 ? -6 : -(day - 1));
-  if (isSameDay2(start, monday) && isSameDay2(end, addDays(monday, 6))) return "this_week";
-  const monthStart = new Date(today2.getFullYear(), today2.getMonth(), 1);
-  const monthEnd = new Date(today2.getFullYear(), today2.getMonth() + 1, 0);
-  if (isSameDay2(start, monthStart) && isSameDay2(end, monthEnd)) return "this_month";
-  if (isSameDay2(end, today2)) return "till_date";
-  if (isSameDay2(start, new Date(2e3, 0, 1)) && isSameDay2(end, today2)) return "all";
-  return null;
+var parseTimeFromISO = (iso) => {
+  const timePart = iso.split("T")[1] || "";
+  const [hStr, mStr] = timePart.split(":");
+  let h24 = parseInt(hStr, 10) || 0;
+  const m = parseInt(mStr, 10) || 0;
+  const ampm = h24 < 12 ? "AM" : "PM";
+  let h = h24 % 12;
+  if (h === 0) h = 12;
+  return { h, m, ampm };
 };
-var CalendarIcon2 = () => /* @__PURE__ */ React71.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React71.createElement("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), /* @__PURE__ */ React71.createElement("line", { x1: "16", y1: "2", x2: "16", y2: "6" }), /* @__PURE__ */ React71.createElement("line", { x1: "8", y1: "2", x2: "8", y2: "6" }), /* @__PURE__ */ React71.createElement("line", { x1: "3", y1: "10", x2: "21", y2: "10" }));
-var RangeCalendarBody = ({
-  viewYear,
+var CalendarIcon = () => /* @__PURE__ */ React71.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React71.createElement("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), /* @__PURE__ */ React71.createElement("line", { x1: "16", y1: "2", x2: "16", y2: "6" }), /* @__PURE__ */ React71.createElement("line", { x1: "8", y1: "2", x2: "8", y2: "6" }), /* @__PURE__ */ React71.createElement("line", { x1: "3", y1: "10", x2: "21", y2: "10" }));
+var ChevUp = () => /* @__PURE__ */ React71.createElement("svg", { width: "10", height: "7", viewBox: "0 0 10 7", fill: "currentColor" }, /* @__PURE__ */ React71.createElement("path", { d: "M5 0L10 7H0L5 0Z" }));
+var ChevDown = () => /* @__PURE__ */ React71.createElement("svg", { width: "10", height: "7", viewBox: "0 0 10 7", fill: "currentColor" }, /* @__PURE__ */ React71.createElement("path", { d: "M5 7L0 0H10L5 7Z" }));
+var ITEM_H = 36;
+var ScrollColumn = ({ items, selected, onSelect, infinite = true }) => {
+  const listRef = useRef5(null);
+  const isInternalScroll = useRef5(false);
+  const scrollTimeout = useRef5(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;
+  useEffect6(() => {
+    if (listRef.current) {
+      const targetIndex = centerOffset + selected;
+      listRef.current.scrollTop = targetIndex * ITEM_H - (infinite ? VISUAL_OFFSET : 0);
+    }
+  }, [centerOffset, infinite, selected]);
+  useEffect6(() => {
+    if (listRef.current && !isInternalScroll.current) {
+      const targetIndex = centerOffset + selected;
+      listRef.current.scrollTo({
+        top: targetIndex * ITEM_H - (infinite ? VISUAL_OFFSET : 0),
+        behavior: "smooth"
+      });
+    }
+    isInternalScroll.current = false;
+  }, [selected, centerOffset, infinite]);
+  const handleScroll = () => {
+    if (!listRef.current) return;
+    const scrollTop = listRef.current.scrollTop;
+    const adjustedScrollTop = infinite ? scrollTop + VISUAL_OFFSET : scrollTop;
+    const index = Math.round(adjustedScrollTop / ITEM_H);
+    const actualIndex = infinite ? (index % items.length + items.length) % items.length : Math.max(0, Math.min(items.length - 1, index));
+    if (infinite) {
+      const buffer = items.length * 10;
+      if (index < buffer || index > virtualItems.length - buffer) {
+        const newIndex = centerOffset + actualIndex;
+        listRef.current.scrollTop = newIndex * ITEM_H - VISUAL_OFFSET;
+        return;
+      }
+    }
+    if (scrollTimeout.current) clearTimeout(scrollTimeout.current);
+    scrollTimeout.current = setTimeout(() => {
+      if (actualIndex !== selected) {
+        isInternalScroll.current = true;
+        onSelect(actualIndex);
+      }
+    }, 100);
+  };
+  return /* @__PURE__ */ React71.createElement("div", { className: "rf-timescroll__col-wrapper" }, /* @__PURE__ */ React71.createElement(
+    "div",
+    {
+      className: "rf-timescroll__col",
+      ref: listRef,
+      onScroll: handleScroll
+    },
+    !infinite && /* @__PURE__ */ React71.createElement("div", { className: "rf-timescroll__spacer" }),
+    virtualItems.map((label, idx) => /* @__PURE__ */ React71.createElement(
+      "div",
+      {
+        key: `${label}-${idx}`,
+        className: `rf-timescroll__item ${idx % items.length === selected ? "rf-timescroll__item--active" : ""}`
+      },
+      label
+    )),
+    !infinite && /* @__PURE__ */ React71.createElement("div", { className: "rf-timescroll__spacer" })
+  ), /* @__PURE__ */ React71.createElement("div", { className: "rf-timescroll__mask rf-timescroll__mask--top" }), /* @__PURE__ */ React71.createElement("div", { className: "rf-timescroll__mask rf-timescroll__mask--bottom" }));
+};
+var SpinnerPanel = ({
+  hour,
+  minute,
+  ampm,
+  onHourChange,
+  onMinuteChange,
+  onHourInput,
+  onMinuteInput,
+  onAmpmToggle
+}) => /* @__PURE__ */ React71.createElement("div", { className: "rf-date-picker__time-row" }, /* @__PURE__ */ React71.createElement("div", { className: "rf-date-picker__time-input-wrap" }, /* @__PURE__ */ React71.createElement("button", { type: "button", className: "rf-date-picker__time-spin-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => onHourChange(1) }, /* @__PURE__ */ React71.createElement(ChevUp, null)), /* @__PURE__ */ React71.createElement(
+  "input",
+  {
+    type: "number",
+    className: "rf-date-picker__time-digit",
+    value: String(hour).padStart(2, "0"),
+    min: 1,
+    max: 12,
+    onChange: onHourInput,
+    onMouseDown: (e) => e.stopPropagation()
+  }
+), /* @__PURE__ */ React71.createElement("button", { type: "button", className: "rf-date-picker__time-spin-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => onHourChange(-1) }, /* @__PURE__ */ React71.createElement(ChevDown, null))), /* @__PURE__ */ React71.createElement("div", { className: "rf-date-picker__time-colon" }, ":"), /* @__PURE__ */ React71.createElement("div", { className: "rf-date-picker__time-input-wrap" }, /* @__PURE__ */ React71.createElement("button", { type: "button", className: "rf-date-picker__time-spin-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => onMinuteChange(1) }, /* @__PURE__ */ React71.createElement(ChevUp, null)), /* @__PURE__ */ React71.createElement(
+  "input",
+  {
+    type: "number",
+    className: "rf-date-picker__time-digit",
+    value: String(minute).padStart(2, "0"),
+    min: 0,
+    max: 59,
+    onChange: onMinuteInput,
+    onMouseDown: (e) => e.stopPropagation()
+  }
+), /* @__PURE__ */ React71.createElement("button", { type: "button", className: "rf-date-picker__time-spin-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => onMinuteChange(-1) }, /* @__PURE__ */ React71.createElement(ChevDown, null))), /* @__PURE__ */ React71.createElement("div", { className: "rf-date-picker__ampm" }, /* @__PURE__ */ React71.createElement(
+  "button",
+  {
+    type: "button",
+    className: `rf-date-picker__ampm-btn ${ampm === "AM" ? "rf-date-picker__ampm-btn--active" : ""}`,
+    onMouseDown: (e) => e.preventDefault(),
+    onClick: () => onAmpmToggle("AM")
+  },
+  "AM"
+), /* @__PURE__ */ React71.createElement(
+  "button",
+  {
+    type: "button",
+    className: `rf-date-picker__ampm-btn ${ampm === "PM" ? "rf-date-picker__ampm-btn--active" : ""}`,
+    onMouseDown: (e) => e.preventDefault(),
+    onClick: () => onAmpmToggle("PM")
+  },
+  "PM"
+)));
+var CalendarBody = ({
   viewMonth,
-  startDate,
-  endDate,
-  hoverDate,
+  viewYear,
+  selectedDate,
   todayDate,
+  dayCells,
   onDayClick,
-  onDayHover,
   onPrev,
   onNext,
-  showPrev = true,
-  showNext = true
+  onMonthSelect,
+  onYearSelect
 }) => {
-  const firstDay = new Date(viewYear, viewMonth, 1).getDay();
-  const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
-  const dayCells = [
-    ...Array(firstDay).fill(null),
-    ...Array.from({ length: daysInMonth }, (_, i) => i + 1)
-  ];
-  const effectiveEnd = endDate ?? hoverDate;
-  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__ */ React71.createElement("div", { className: "rf-dr-calendar" }, /* @__PURE__ */ React71.createElement("div", { className: "rf-dr-calendar__header" }, /* @__PURE__ */ React71.createElement(
+  const [pickerView, setPickerView] = useState6("calendar");
+  const handleMonthClick = () => {
+    setPickerView(pickerView === "month" ? "calendar" : "month");
+  };
+  const handleYearClick = () => {
+    setPickerView(pickerView === "year" ? "calendar" : "year");
+  };
+  const handleMonthPick = (month) => {
+    onMonthSelect(month);
+    setPickerView("calendar");
+  };
+  const handleYearPick = (year) => {
+    onYearSelect(year);
+    setPickerView("calendar");
+  };
+  const currentYear = todayDate.getFullYear();
+  const yearStart = viewYear - 6;
+  const years = Array.from({ length: 16 }, (_, i) => yearStart + i);
+  return /* @__PURE__ */ React71.createElement(React71.Fragment, null, /* @__PURE__ */ React71.createElement("div", { className: "rf-date-picker__header" }, /* @__PURE__ */ React71.createElement("div", { className: "rf-date-picker__header-labels" }, /* @__PURE__ */ React71.createElement(
+    "span",
+    {
+      className: `rf-date-picker__month-label ${pickerView === "month" ? "rf-date-picker__month-label--active" : ""}`,
+      onClick: handleMonthClick
+    },
+    MONTHS[viewMonth]
+  ), /* @__PURE__ */ React71.createElement(
+    "span",
+    {
+      className: `rf-date-picker__year-label ${pickerView === "year" ? "rf-date-picker__year-label--active" : ""}`,
+      onClick: handleYearClick
+    },
+    viewYear
+  )), /* @__PURE__ */ React71.createElement("div", { className: "rf-date-picker__nav" }, pickerView === "year" ? /* @__PURE__ */ React71.createElement(React71.Fragment, null, /* @__PURE__ */ React71.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear - 16), "aria-label": "Previous years" }, "\u2039"), /* @__PURE__ */ React71.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear + 16), "aria-label": "Next years" }, "\u203A")) : /* @__PURE__ */ React71.createElement(React71.Fragment, null, /* @__PURE__ */ React71.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onPrev, "aria-label": "Previous month" }, "\u2039"), /* @__PURE__ */ React71.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onNext, "aria-label": "Next month" }, "\u203A")))), pickerView === "month" && /* @__PURE__ */ React71.createElement("div", { className: "rf-date-picker__month-grid" }, MONTHS_SHORT.map((m, idx) => /* @__PURE__ */ React71.createElement(
     "button",
     {
+      key: m,
       type: "button",
-      className: "rf-dr-calendar__nav-btn",
-      onClick: onPrev,
-      style: { visibility: showPrev ? "visible" : "hidden" },
-      "aria-label": "Previous month"
+      className: [
+        "rf-date-picker__month-cell",
+        idx === viewMonth ? "rf-date-picker__month-cell--selected" : "",
+        idx === todayDate.getMonth() && viewYear === currentYear ? "rf-date-picker__month-cell--current" : ""
+      ].filter(Boolean).join(" "),
+      onClick: () => handleMonthPick(idx)
     },
-    "\u2039"
-  ), /* @__PURE__ */ React71.createElement("span", { className: "rf-dr-calendar__month-label" }, MONTHS2[viewMonth], " ", viewYear), /* @__PURE__ */ React71.createElement(
+    m
+  ))), pickerView === "year" && /* @__PURE__ */ React71.createElement("div", { className: "rf-date-picker__year-grid" }, years.map((y) => /* @__PURE__ */ React71.createElement(
     "button",
     {
+      key: y,
       type: "button",
-      className: "rf-dr-calendar__nav-btn",
-      onClick: onNext,
-      style: { visibility: showNext ? "visible" : "hidden" },
-      "aria-label": "Next month"
+      className: [
+        "rf-date-picker__year-cell",
+        y === viewYear ? "rf-date-picker__year-cell--selected" : "",
+        y === currentYear ? "rf-date-picker__year-cell--current" : ""
+      ].filter(Boolean).join(" "),
+      onClick: () => handleYearPick(y)
     },
-    "\u203A"
-  )), /* @__PURE__ */ React71.createElement("div", { className: "rf-dr-calendar__weekdays" }, WEEKDAYS2.map((w) => /* @__PURE__ */ React71.createElement("div", { key: w, className: "rf-dr-calendar__weekday" }, w))), /* @__PURE__ */ React71.createElement("div", { className: "rf-dr-calendar__grid" }, dayCells.map((day, idx) => {
-    if (day === null) {
-      return /* @__PURE__ */ React71.createElement("div", { key: `e-${idx}`, className: "rf-dr-calendar__cell rf-dr-calendar__cell--empty" });
-    }
+    y
+  ))), pickerView === "calendar" && /* @__PURE__ */ React71.createElement(React71.Fragment, null, /* @__PURE__ */ React71.createElement("div", { className: "rf-date-picker__weekdays" }, WEEKDAYS.map((w) => /* @__PURE__ */ React71.createElement("div", { key: w, className: "rf-date-picker__weekday" }, w))), /* @__PURE__ */ React71.createElement("div", { className: "rf-date-picker__grid" }, dayCells.map((day, idx) => {
+    if (day === null) return /* @__PURE__ */ React71.createElement("div", { key: `e-${idx}`, className: "rf-date-picker__day rf-date-picker__day--empty" });
     const cellDate = new Date(viewYear, viewMonth, day);
-    const isStart = startDate ? isSameDay2(cellDate, startDate) : false;
-    const isEnd = endDate ? isSameDay2(cellDate, endDate) : false;
-    const isToday = isSameDay2(cellDate, todayDate);
-    const isInRange = lo && hi ? cellDate > lo && cellDate < hi : false;
-    const isRangeStart = hasRange && lo ? isSameDay2(cellDate, lo) : false;
-    const isRangeEnd = hasRange && hi ? isSameDay2(cellDate, hi) : false;
-    const cellClasses = [
-      "rf-dr-calendar__cell",
-      isInRange ? "rf-dr-calendar__cell--in-range" : "",
-      isRangeStart ? "rf-dr-calendar__cell--range-start" : "",
-      isRangeEnd ? "rf-dr-calendar__cell--range-end" : ""
-    ].filter(Boolean).join(" ");
-    const dayClasses = [
-      "rf-dr-calendar__day",
-      isStart || isEnd ? "rf-dr-calendar__day--selected" : "",
-      isToday && !isStart && !isEnd ? "rf-dr-calendar__day--today" : ""
-    ].filter(Boolean).join(" ");
+    const isSelected = selectedDate ? isSameDay(cellDate, selectedDate) : false;
+    const isToday = isSameDay(cellDate, todayDate);
     return /* @__PURE__ */ React71.createElement(
-      "div",
-      {
-        key: day,
-        className: cellClasses,
-        onMouseEnter: () => onDayHover(cellDate),
-        onMouseLeave: () => onDayHover(null)
-      },
-      /* @__PURE__ */ React71.createElement(
-        "button",
-        {
-          type: "button",
-          className: dayClasses,
-          onClick: () => onDayClick(cellDate)
-        },
-        day
-      )
-    );
-  })));
-};
-var MiniCalendar = ({ selectedDate, todayDate, onSelect, onClose }) => {
-  const init = selectedDate ?? todayDate;
-  const [viewYear, setViewYear] = useState6(init.getFullYear());
-  const [viewMonth, setViewMonth] = useState6(init.getMonth());
-  const firstDay = new Date(viewYear, viewMonth, 1).getDay();
-  const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
-  const dayCells = [
-    ...Array(firstDay).fill(null),
-    ...Array.from({ length: daysInMonth }, (_, i) => i + 1)
-  ];
-  const prevMonth = () => {
-    if (viewMonth === 0) {
-      setViewMonth(11);
-      setViewYear((y) => y - 1);
-    } else setViewMonth((m) => m - 1);
-  };
-  const nextMonth = () => {
-    if (viewMonth === 11) {
-      setViewMonth(0);
-      setViewYear((y) => y + 1);
-    } else setViewMonth((m) => m + 1);
-  };
-  return /* @__PURE__ */ React71.createElement("div", { className: "rf-dr-mini-cal" }, /* @__PURE__ */ React71.createElement("div", { className: "rf-dr-mini-cal__header" }, /* @__PURE__ */ React71.createElement("button", { type: "button", className: "rf-dr-calendar__nav-btn", onClick: prevMonth }, "\u2039"), /* @__PURE__ */ React71.createElement("span", { className: "rf-dr-calendar__month-label", style: { fontSize: "0.88rem" } }, MONTHS2[viewMonth], " ", viewYear), /* @__PURE__ */ React71.createElement("button", { type: "button", className: "rf-dr-calendar__nav-btn", onClick: nextMonth }, "\u203A")), /* @__PURE__ */ React71.createElement("div", { className: "rf-dr-calendar__weekdays" }, WEEKDAYS2.map((w) => /* @__PURE__ */ React71.createElement("div", { key: w, className: "rf-dr-calendar__weekday" }, w))), /* @__PURE__ */ React71.createElement("div", { className: "rf-dr-calendar__grid" }, dayCells.map((day, idx) => {
-    if (day === null) {
-      return /* @__PURE__ */ React71.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__ */ React71.createElement("div", { key: day, className: "rf-dr-calendar__cell" }, /* @__PURE__ */ React71.createElement(
       "button",
       {
+        key: day,
         type: "button",
         className: [
-          "rf-dr-calendar__day",
-          isSel ? "rf-dr-calendar__day--selected" : "",
-          isToday && !isSel ? "rf-dr-calendar__day--today" : ""
+          "rf-date-picker__day",
+          isSelected ? "rf-date-picker__day--selected" : "",
+          isToday && !isSelected ? "rf-date-picker__day--today" : ""
         ].filter(Boolean).join(" "),
-        onClick: () => {
-          onSelect(cellDate);
-          onClose();
-        }
+        onClick: () => onDayClick(day)
       },
       day
-    ));
-  })));
+    );
+  }))));
 };
-var DateRangeField = ({
+var DateField = ({
   label,
   value,
   onChange,
-  pickerType = "panel",
+  type = "date",
+  dateFormat = "MM/DD/YYYY",
   variant = "outlined",
   size = "medium",
   color = "primary",
@@ -3063,165 +2809,230 @@ var DateRangeField = ({
   fullWidth = false,
   disabled = false,
   required = false,
+  placeholder,
   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] = useState6(false);
-  const [draftStart, setDraftStart] = useState6(committedStart);
-  const [draftEnd, setDraftEnd] = useState6(committedEnd);
-  const [activePreset, setActivePreset] = useState6(
-    () => detectPreset(committedStart, committedEnd)
-  );
-  const [startInputStr, setStartInputStr] = useState6(() => committedStart ? formatShort(committedStart) : "");
-  const [endInputStr, setEndInputStr] = useState6(() => committedEnd ? formatShort(committedEnd) : "");
-  const [inlineCal, setInlineCal] = useState6(null);
-  const [hoverDate, setHoverDate] = useState6(null);
-  const [selecting, setSelecting] = useState6("start");
-  const [leftViewYear, setLeftViewYear] = useState6(() => today2.getFullYear());
-  const [leftViewMonth, setLeftViewMonth] = useState6(() => today2.getMonth());
+  const [selectedDate, setSelectedDate] = useState6(() => value ? isoToDate(value) : null);
+  const [hour, setHour] = useState6(() => {
+    if (value && isDatetimeType(type)) return parseTimeFromISO(value).h;
+    return 12;
+  });
+  const [minute, setMinute] = useState6(() => {
+    if (value && isDatetimeType(type)) return parseTimeFromISO(value).m;
+    return 0;
+  });
+  const [ampm, setAmpm] = useState6(() => {
+    if (value && isDatetimeType(type)) return parseTimeFromISO(value).ampm;
+    return "AM";
+  });
+  const [viewYear, setViewYear] = useState6(() => {
+    const base = value ? isoToDate(value) : null;
+    return base ? base.getFullYear() : today().getFullYear();
+  });
+  const [viewMonth, setViewMonth] = useState6(() => {
+    const base = value ? isoToDate(value) : null;
+    return base ? base.getMonth() : today().getMonth();
+  });
+  const [inputStr, setInputStr] = useState6(() => {
+    if (!value) return "";
+    const d = isoToDate(value);
+    if (!d) return "";
+    let str = formatDisplay(d, dateFormat);
+    if (isDatetimeType(type)) {
+      const t = parseTimeFromISO(value);
+      str += " " + formatTimeDisplay(t.h, t.m, t.ampm);
+    }
+    return str;
+  });
+  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 = useRef5(null);
-  const inputId = useRef5(`rf-dr-${Math.random().toString(36).substr(2, 9)}`).current;
-  useEffect6(() => {
-    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]);
+  const pickerRef = useRef5(null);
+  const [dropUp, setDropUp] = useState6(false);
+  const inputId = useRef5(`rf-df-${Math.random().toString(36).substring(2, 11)}`).current;
+  const isInternalChange = useRef5(false);
   useEffect6(() => {
-    setActivePreset(detectPreset(draftStart, draftEnd));
-  }, [draftStart?.getTime(), draftEnd?.getTime()]);
+    if (value === void 0) return;
+    if (isInternalChange.current) {
+      isInternalChange.current = false;
+      return;
+    }
+    if (!value) {
+      setSelectedDate(null);
+      setInputStr("");
+      return;
+    }
+    const d = isoToDate(value);
+    setSelectedDate(d);
+    if (d) {
+      setViewYear(d.getFullYear());
+      setViewMonth(d.getMonth());
+      let str = formatDisplay(d, dateFormat);
+      if (isDatetimeType(type)) {
+        const t = parseTimeFromISO(value);
+        setHour(t.h);
+        setMinute(t.m);
+        setAmpm(t.ampm);
+        str += " " + formatTimeDisplay(t.h, t.m, t.ampm);
+      }
+      setInputStr(str);
+    }
+  }, [value, type]);
   useEffect6(() => {
     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");
-      }
+      const target = e.target;
+      if (containerRef.current?.contains(target)) return;
+      if (pickerRef.current?.contains(target)) return;
+      setOpen(false);
     };
     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) });
+  }, [open]);
+  useEffect6(() => {
+    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 = useCallback2((d, h, m, ap) => {
+    setSelectedDate(d);
+    if (!d) {
+      setInputStr("");
+      onChange?.("");
+      return;
     }
-    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");
+    let str = formatDisplay(d, dateFormat);
+    if (isDatetimeType(type)) str += " " + formatTimeDisplay(h, m, ap);
+    setInputStr(str);
+    onChange?.(buildISO(d, type, h, m, ap));
+  }, [type, onChange, dateFormat]);
+  const handleDayClick = (day) => {
+    const d = new Date(viewYear, viewMonth, day);
+    setSelectedDate(d);
+    let str = formatDisplay(d, dateFormat);
+    if (isDatetimeType(type)) str += " " + formatTimeDisplay(hour, minute, ampm);
+    setInputStr(str);
+    onChange?.(buildISO(d, type, hour, minute, ampm));
+    if (type === "date") setOpen(false);
   };
-  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 handleToday = () => {
+    const t = today();
+    setViewYear(t.getFullYear());
+    setViewMonth(t.getMonth());
+    commitDate(t, hour, minute, ampm);
+    if (type === "date") setOpen(false);
   };
-  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);
+  const handleClear = () => commitDate(null, hour, minute, ampm);
+  const handleInputChange = (e) => {
+    const raw = e.target.value;
+    setInputStr(raw);
+    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) && 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);
+          const parsedM = parseInt(mStr, 10);
+          if (!isNaN(parsedH) && parsedH >= 1 && parsedH <= 12) {
+            h = parsedH;
+            setHour(h);
+          }
+          if (!isNaN(parsedM) && parsedM >= 0 && parsedM <= 59) {
+            m = parsedM;
+            setMinute(m);
+          }
+        }
+        if (periodPart === "AM" || periodPart === "PM") {
+          ap = periodPart;
+          setAmpm(ap);
+        }
       }
-      setSelecting("start");
-      setActivePreset(detectPreset(draftStart, d));
+      isInternalChange.current = true;
+      onChange?.(buildISO(parsed, type, h, m, ap));
+    } else if (!raw) {
+      setSelectedDate(null);
+      isInternalChange.current = true;
+      onChange?.("");
     }
   };
-  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 handleHourChange = (delta) => {
+    const h = (hour - 1 + delta + 12) % 12 + 1;
+    setHour(h);
+    if (selectedDate) commitDate(selectedDate, h, minute, ampm);
   };
-  const nextMonth = () => {
-    if (leftViewMonth === 11) {
-      setLeftViewMonth(0);
-      setLeftViewYear((y) => y + 1);
-    } else setLeftViewMonth((m) => m + 1);
+  const handleMinuteChange = (delta) => {
+    const m = (minute + delta + 60) % 60;
+    setMinute(m);
+    if (selectedDate) commitDate(selectedDate, hour, m, ampm);
   };
-  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 handleAmpmToggle = (val) => {
+    setAmpm(val);
+    if (selectedDate) commitDate(selectedDate, hour, minute, val);
   };
-  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 handleHourInput = (e) => {
+    let v = parseInt(e.target.value, 10);
+    if (isNaN(v)) return;
+    v = Math.max(1, Math.min(12, v));
+    setHour(v);
+    if (selectedDate) commitDate(selectedDate, v, minute, ampm);
   };
-  const handleStartInputChange = (e) => {
-    const raw = e.target.value;
-    setStartInputStr(raw);
-    const parsed = parseInputDate(raw);
-    if (parsed) setDraftStart(parsed);
-    else if (!raw) setDraftStart(null);
+  const handleMinuteInput = (e) => {
+    let v = parseInt(e.target.value, 10);
+    if (isNaN(v)) return;
+    v = Math.max(0, Math.min(59, v));
+    setMinute(v);
+    if (selectedDate) commitDate(selectedDate, hour, v, ampm);
   };
-  const handleStartInputBlur = () => {
-    setStartInputStr(draftStart ? formatShort(draftStart) : "");
+  const handleScrollHour = (idx) => {
+    const h = idx + 1;
+    setHour(h);
+    if (selectedDate) commitDate(selectedDate, h, minute, ampm);
   };
-  const handleEndInputChange = (e) => {
-    const raw = e.target.value;
-    setEndInputStr(raw);
-    const parsed = parseInputDate(raw);
-    if (parsed) setDraftEnd(parsed);
-    else if (!raw) setDraftEnd(null);
+  const handleScrollMinute = (idx) => {
+    setMinute(idx);
+    if (selectedDate) commitDate(selectedDate, hour, idx, ampm);
   };
-  const handleEndInputBlur = () => {
-    setEndInputStr(draftEnd ? formatShort(draftEnd) : "");
+  const handleScrollAmpm = (idx) => {
+    const ap = AMPMS[idx];
+    setAmpm(ap);
+    if (selectedDate) commitDate(selectedDate, hour, minute, ap);
   };
-  const isFloating = Boolean(displayStr || open);
+  const prevMonth = () => {
+    if (viewMonth === 0) {
+      setViewMonth(11);
+      setViewYear((y) => y - 1);
+    } else setViewMonth((m) => m - 1);
+  };
+  const nextMonth = () => {
+    if (viewMonth === 11) {
+      setViewMonth(0);
+      setViewYear((y) => y + 1);
+    } else setViewMonth((m) => m + 1);
+  };
+  const firstDayOfWeek = new Date(viewYear, viewMonth, 1).getDay();
+  const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
+  const dayCells = [
+    ...Array(firstDayOfWeek).fill(null),
+    ...Array.from({ length: daysInMonth }, (_, i) => i + 1)
+  ];
+  const isFloating = Boolean(inputStr || open);
   const rootClasses = [
     "rf-text-field",
     `rf-text-field--${variant}`,
@@ -3232,14 +3043,15 @@ var DateRangeField = ({
     disabled ? "rf-text-field--disabled" : "",
     isFloating ? "rf-text-field--floating" : "",
     Boolean(label) ? "rf-text-field--has-label" : "",
-    "rf-text-field--adorned-end",
+    variant !== "compact" ? "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;
+  const inputPlaceholder = placeholder || (variant === "outlined" ? " " : void 0);
+  const todayDate = today();
+  const isSideVariant = type === "datetime-side" || type === "datetime-scroll";
   return /* @__PURE__ */ React71.createElement("div", { ref: containerRef, className: rootClasses, style }, /* @__PURE__ */ React71.createElement("div", { className: "rf-date-field__anchor" }, /* @__PURE__ */ React71.createElement(
     "div",
     {
@@ -3255,8 +3067,8 @@ var DateRangeField = ({
         id: inputId,
         className: "rf-text-field__input",
         type: "text",
-        value: displayStr,
-        readOnly: true,
+        value: inputStr,
+        onChange: handleInputChange,
         placeholder: inputPlaceholder,
         disabled,
         onClick: (e) => e.stopPropagation(),
@@ -3276,556 +3088,759 @@ var DateRangeField = ({
           e.stopPropagation();
           if (!disabled) setOpen((o) => !o);
         },
-        "aria-label": "Pick date range"
+        "aria-label": "Pick date"
       },
-      /* @__PURE__ */ React71.createElement(CalendarIcon2, null)
+      /* @__PURE__ */ React71.createElement(CalendarIcon, null)
     )),
     label && /* @__PURE__ */ React71.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ React71.createElement("span", { className: "rf-text-field__asterisk" }, "*")),
-    variant === "outlined" && /* @__PURE__ */ React71.createElement("fieldset", { className: "rf-text-field__notch" }, label ? /* @__PURE__ */ React71.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ React71.createElement("span", null, label, required ? " *" : "")) : /* @__PURE__ */ React71.createElement("legend", { className: "rf-text-field__legend--empty" }))
-  ), open && !disabled && (pickerType === "panel" ? (
-    /* ── Panel Mode ── */
-    /* @__PURE__ */ React71.createElement("div", { className: "rf-dr-picker rf-dr-picker--panel", onMouseDown: (e) => e.preventDefault() }, /* @__PURE__ */ React71.createElement("div", { className: "rf-dr-picker__presets" }, PRESETS.map((p, i) => /* @__PURE__ */ React71.createElement(React71.Fragment, { key: p.id }, i > 0 && /* @__PURE__ */ React71.createElement("div", { className: "rf-dr-picker__preset-sep" }), /* @__PURE__ */ React71.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__ */ React71.createElement("div", { className: "rf-dr-picker__manual" }, /* @__PURE__ */ React71.createElement("div", { className: "rf-dr-picker__date-field-wrap" }, /* @__PURE__ */ React71.createElement(
+    variant === "outlined" && /* @__PURE__ */ React71.createElement("fieldset", { className: "rf-text-field__notch" }, label && /* @__PURE__ */ React71.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ React71.createElement("span", null, label, required ? " *" : "")))
+  ), open && !disabled && createPortal(
+    /* @__PURE__ */ React71.createElement(
       "div",
       {
+        ref: pickerRef,
         className: [
-          "rf-dr-picker__date-field",
-          inlineCal === "start" ? "rf-dr-picker__date-field--active" : ""
-        ].filter(Boolean).join(" ")
+          "rf-date-picker",
+          "rf-date-picker--portaled",
+          isSideVariant ? "rf-date-picker--side" : "",
+          dropUp ? "rf-date-picker--drop-up" : ""
+        ].filter(Boolean).join(" "),
+        style: (() => {
+          const rect = containerRef.current?.getBoundingClientRect();
+          if (!rect) return {};
+          const top = rect.bottom + 6;
+          const spaceBelow = window.innerHeight - rect.bottom - 6;
+          const useDropUp = spaceBelow < 350 && rect.top > spaceBelow;
+          return {
+            position: "fixed",
+            left: rect.left,
+            ...useDropUp ? { bottom: window.innerHeight - rect.top + 6 } : { top },
+            zIndex: 99999
+          };
+        })(),
+        onMouseDown: (e) => e.preventDefault()
       },
-      /* @__PURE__ */ React71.createElement("span", { className: "rf-dr-picker__date-floating-label" }, "Start Date"),
-      /* @__PURE__ */ React71.createElement("div", { className: "rf-dr-picker__date-display" }, /* @__PURE__ */ React71.createElement(
-        "input",
+      /* @__PURE__ */ React71.createElement("div", { className: isSideVariant ? "rf-date-picker__cal-col" : void 0 }, /* @__PURE__ */ React71.createElement(
+        CalendarBody,
         {
-          type: "text",
-          className: "rf-dr-picker__date-input",
-          value: startInputStr,
-          placeholder: "DD Mon YYYY",
-          onChange: handleStartInputChange,
-          onBlur: handleStartInputBlur,
-          onMouseDown: (e) => e.stopPropagation()
+          viewMonth,
+          viewYear,
+          selectedDate,
+          todayDate,
+          dayCells,
+          onDayClick: handleDayClick,
+          onPrev: prevMonth,
+          onNext: nextMonth,
+          onMonthSelect: setViewMonth,
+          onYearSelect: setViewYear
+        }
+      ), type === "datetime" && /* @__PURE__ */ React71.createElement("div", { className: "rf-date-picker__time-section" }, /* @__PURE__ */ React71.createElement("div", { className: "rf-date-picker__time-label" }, "Time"), /* @__PURE__ */ React71.createElement(
+        SpinnerPanel,
+        {
+          hour,
+          minute,
+          ampm,
+          onHourChange: handleHourChange,
+          onMinuteChange: handleMinuteChange,
+          onHourInput: handleHourInput,
+          onMinuteInput: handleMinuteInput,
+          onAmpmToggle: handleAmpmToggle
+        }
+      )), /* @__PURE__ */ React71.createElement("div", { className: "rf-date-picker__divider" }), /* @__PURE__ */ React71.createElement("div", { className: "rf-date-picker__footer" }, /* @__PURE__ */ React71.createElement("button", { type: "button", className: "rf-date-picker__footer-btn", onClick: handleToday }, "Today"), /* @__PURE__ */ React71.createElement("button", { type: "button", className: "rf-date-picker__footer-btn rf-date-picker__footer-btn--clear", onClick: handleClear }, "Clear"))),
+      type === "datetime-side" && /* @__PURE__ */ React71.createElement("div", { className: "rf-date-picker__side-panel" }, /* @__PURE__ */ React71.createElement("div", { className: "rf-date-picker__side-label" }, "Time"), /* @__PURE__ */ React71.createElement("div", { className: "rf-date-picker__side-spinner" }, /* @__PURE__ */ React71.createElement(
+        SpinnerPanel,
+        {
+          hour,
+          minute,
+          ampm,
+          onHourChange: handleHourChange,
+          onMinuteChange: handleMinuteChange,
+          onHourInput: handleHourInput,
+          onMinuteInput: handleMinuteInput,
+          onAmpmToggle: handleAmpmToggle
+        }
+      )), /* @__PURE__ */ React71.createElement("div", { className: "rf-date-picker__side-time-display" }, String(hour).padStart(2, "0"), ":", String(minute).padStart(2, "0"), " ", ampm)),
+      type === "datetime-scroll" && /* @__PURE__ */ React71.createElement("div", { className: "rf-date-picker__side-panel" }, /* @__PURE__ */ React71.createElement("div", { className: "rf-date-picker__side-label" }, "Time"), /* @__PURE__ */ React71.createElement("div", { className: "rf-timescroll" }, /* @__PURE__ */ React71.createElement(
+        ScrollColumn,
+        {
+          items: HOURS,
+          selected: hour - 1,
+          onSelect: handleScrollHour
+        }
+      ), /* @__PURE__ */ React71.createElement("div", { className: "rf-timescroll__colon" }, ":"), /* @__PURE__ */ React71.createElement(
+        ScrollColumn,
+        {
+          items: MINUTES,
+          selected: minute,
+          onSelect: handleScrollMinute
         }
       ), /* @__PURE__ */ React71.createElement(
-        "button",
+        ScrollColumn,
         {
-          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__ */ React71.createElement(CalendarIcon2, null)
-      ))
-    ), inlineCal === "start" && /* @__PURE__ */ React71.createElement(
-      MiniCalendar,
-      {
-        selectedDate: draftStart,
-        todayDate: today2,
-        onSelect: (d) => {
-          setDraftStart(d);
-          setStartInputStr(formatShort(d));
-        },
-        onClose: () => setInlineCal(null)
-      }
-    )), /* @__PURE__ */ React71.createElement("div", { className: "rf-dr-picker__date-field-wrap" }, /* @__PURE__ */ React71.createElement(
+          items: AMPMS,
+          selected: ampm === "AM" ? 0 : 1,
+          onSelect: handleScrollAmpm,
+          infinite: false
+        }
+      )), /* @__PURE__ */ React71.createElement("div", { className: "rf-date-picker__side-time-display" }, String(hour).padStart(2, "0"), ":", String(minute).padStart(2, "0"), " ", ampm))
+    ),
+    document.body
+  )), helperText && /* @__PURE__ */ React71.createElement("div", { className: "rf-text-field__helper-text" }, helperText));
+};
+DateField.displayName = "DateField";
+
+// lib/TextFields/DateRangeField.tsx
+import React72, {
+  useState as useState7,
+  useRef as useRef6,
+  useEffect as useEffect7
+} from "react";
+var WEEKDAYS2 = ["SU", "MO", "TU", "WE", "TH", "FR", "SA"];
+var MONTHS2 = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+var MONTHS_SHORT2 = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec"
+];
+var PRESETS = [
+  { id: "today", label: "Today" },
+  { id: "this_week", label: "This week" },
+  { id: "this_month", label: "This month" },
+  { id: "till_date", label: "Till date" },
+  { id: "all", label: "All" }
+];
+var todayFn = () => {
+  const t = /* @__PURE__ */ new Date();
+  return new Date(t.getFullYear(), t.getMonth(), t.getDate());
+};
+var isoToDate2 = (iso) => {
+  if (!iso) return null;
+  const parts = iso.split("-").map(Number);
+  if (parts.length < 3 || !parts[0] || !parts[1] || !parts[2]) return null;
+  return new Date(parts[0], parts[1] - 1, parts[2]);
+};
+var dateToISO = (d) => {
+  const y = d.getFullYear();
+  const mo = String(d.getMonth() + 1).padStart(2, "0");
+  const dd = String(d.getDate()).padStart(2, "0");
+  return `${y}-${mo}-${dd}`;
+};
+var formatShort = (d) => `${String(d.getDate()).padStart(2, "0")} ${MONTHS_SHORT2[d.getMonth()]} ${d.getFullYear()}`;
+var parseInputDate = (str) => {
+  const s2 = str.trim();
+  if (!s2) return null;
+  const shortMatch = s2.match(/^(\d{1,2})\s+([A-Za-z]+)\s+(\d{4})$/);
+  if (shortMatch) {
+    const day = parseInt(shortMatch[1], 10);
+    const monthIdx = MONTHS_SHORT2.findIndex((m) => m.toLowerCase() === shortMatch[2].toLowerCase());
+    const year = parseInt(shortMatch[3], 10);
+    if (monthIdx !== -1 && day >= 1 && day <= 31 && year >= 1e3) {
+      const d = new Date(year, monthIdx, day);
+      if (!isNaN(d.getTime())) return d;
+    }
+  }
+  const slashMatch = s2.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
+  if (slashMatch) {
+    const d = new Date(parseInt(slashMatch[3], 10), parseInt(slashMatch[2], 10) - 1, parseInt(slashMatch[1], 10));
+    if (!isNaN(d.getTime())) return d;
+  }
+  const isoMatch = s2.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+  if (isoMatch) {
+    const d = new Date(parseInt(isoMatch[1], 10), parseInt(isoMatch[2], 10) - 1, parseInt(isoMatch[3], 10));
+    if (!isNaN(d.getTime())) return d;
+  }
+  return null;
+};
+var isSameDay2 = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+var daysBetween = (a, b) => Math.round((b.getTime() - a.getTime()) / (1e3 * 60 * 60 * 24));
+var addDays = (d, n) => {
+  const r = new Date(d.getTime());
+  r.setDate(r.getDate() + n);
+  return r;
+};
+var getPresetRange = (preset, currentStart) => {
+  const today2 = todayFn();
+  switch (preset) {
+    case "today":
+      return { start: dateToISO(today2), end: dateToISO(today2) };
+    case "this_week": {
+      const day = today2.getDay();
+      const monday = addDays(today2, day === 0 ? -6 : -(day - 1));
+      return { start: dateToISO(monday), end: dateToISO(addDays(monday, 6)) };
+    }
+    case "this_month": {
+      const start = new Date(today2.getFullYear(), today2.getMonth(), 1);
+      const end = new Date(today2.getFullYear(), today2.getMonth() + 1, 0);
+      return { start: dateToISO(start), end: dateToISO(end) };
+    }
+    case "till_date": {
+      const start = currentStart ?? addDays(today2, -30);
+      return { start: dateToISO(start), end: dateToISO(today2) };
+    }
+    case "all":
+      return { start: dateToISO(new Date(2e3, 0, 1)), end: dateToISO(today2) };
+    default:
+      return { start: "", end: "" };
+  }
+};
+var detectPreset = (start, end) => {
+  if (!start || !end) return null;
+  const today2 = todayFn();
+  if (isSameDay2(start, today2) && isSameDay2(end, today2)) return "today";
+  const day = today2.getDay();
+  const monday = addDays(today2, day === 0 ? -6 : -(day - 1));
+  if (isSameDay2(start, monday) && isSameDay2(end, addDays(monday, 6))) return "this_week";
+  const monthStart = new Date(today2.getFullYear(), today2.getMonth(), 1);
+  const monthEnd = new Date(today2.getFullYear(), today2.getMonth() + 1, 0);
+  if (isSameDay2(start, monthStart) && isSameDay2(end, monthEnd)) return "this_month";
+  if (isSameDay2(end, today2)) return "till_date";
+  if (isSameDay2(start, new Date(2e3, 0, 1)) && isSameDay2(end, today2)) return "all";
+  return null;
+};
+var CalendarIcon2 = () => /* @__PURE__ */ React72.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React72.createElement("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), /* @__PURE__ */ React72.createElement("line", { x1: "16", y1: "2", x2: "16", y2: "6" }), /* @__PURE__ */ React72.createElement("line", { x1: "8", y1: "2", x2: "8", y2: "6" }), /* @__PURE__ */ React72.createElement("line", { x1: "3", y1: "10", x2: "21", y2: "10" }));
+var RangeCalendarBody = ({
+  viewYear,
+  viewMonth,
+  startDate,
+  endDate,
+  hoverDate,
+  todayDate,
+  onDayClick,
+  onDayHover,
+  onPrev,
+  onNext,
+  showPrev = true,
+  showNext = true
+}) => {
+  const firstDay = new Date(viewYear, viewMonth, 1).getDay();
+  const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
+  const dayCells = [
+    ...Array(firstDay).fill(null),
+    ...Array.from({ length: daysInMonth }, (_, i) => i + 1)
+  ];
+  const effectiveEnd = endDate ?? hoverDate;
+  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__ */ React72.createElement("div", { className: "rf-dr-calendar" }, /* @__PURE__ */ React72.createElement("div", { className: "rf-dr-calendar__header" }, /* @__PURE__ */ React72.createElement(
+    "button",
+    {
+      type: "button",
+      className: "rf-dr-calendar__nav-btn",
+      onClick: onPrev,
+      style: { visibility: showPrev ? "visible" : "hidden" },
+      "aria-label": "Previous month"
+    },
+    "\u2039"
+  ), /* @__PURE__ */ React72.createElement("span", { className: "rf-dr-calendar__month-label" }, MONTHS2[viewMonth], " ", viewYear), /* @__PURE__ */ React72.createElement(
+    "button",
+    {
+      type: "button",
+      className: "rf-dr-calendar__nav-btn",
+      onClick: onNext,
+      style: { visibility: showNext ? "visible" : "hidden" },
+      "aria-label": "Next month"
+    },
+    "\u203A"
+  )), /* @__PURE__ */ React72.createElement("div", { className: "rf-dr-calendar__weekdays" }, WEEKDAYS2.map((w) => /* @__PURE__ */ React72.createElement("div", { key: w, className: "rf-dr-calendar__weekday" }, w))), /* @__PURE__ */ React72.createElement("div", { className: "rf-dr-calendar__grid" }, dayCells.map((day, idx) => {
+    if (day === null) {
+      return /* @__PURE__ */ React72.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;
+    const isEnd = endDate ? isSameDay2(cellDate, endDate) : false;
+    const isToday = isSameDay2(cellDate, todayDate);
+    const isInRange = lo && hi ? cellDate > lo && cellDate < hi : false;
+    const isRangeStart = hasRange && lo ? isSameDay2(cellDate, lo) : false;
+    const isRangeEnd = hasRange && hi ? isSameDay2(cellDate, hi) : false;
+    const cellClasses = [
+      "rf-dr-calendar__cell",
+      isInRange ? "rf-dr-calendar__cell--in-range" : "",
+      isRangeStart ? "rf-dr-calendar__cell--range-start" : "",
+      isRangeEnd ? "rf-dr-calendar__cell--range-end" : ""
+    ].filter(Boolean).join(" ");
+    const dayClasses = [
+      "rf-dr-calendar__day",
+      isStart || isEnd ? "rf-dr-calendar__day--selected" : "",
+      isToday && !isStart && !isEnd ? "rf-dr-calendar__day--today" : ""
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ React72.createElement(
       "div",
       {
-        className: [
-          "rf-dr-picker__date-field",
-          inlineCal === "end" ? "rf-dr-picker__date-field--active" : ""
-        ].filter(Boolean).join(" ")
+        key: day,
+        className: cellClasses,
+        onMouseEnter: () => onDayHover(cellDate),
+        onMouseLeave: () => onDayHover(null)
       },
-      /* @__PURE__ */ React71.createElement("span", { className: "rf-dr-picker__date-floating-label" }, "End Date"),
-      /* @__PURE__ */ React71.createElement("div", { className: "rf-dr-picker__date-display" }, /* @__PURE__ */ React71.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__ */ React71.createElement(
+      /* @__PURE__ */ React72.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__ */ React71.createElement(CalendarIcon2, null)
-      ))
-    ), inlineCal === "end" && /* @__PURE__ */ React71.createElement(
-      MiniCalendar,
-      {
-        selectedDate: draftEnd,
-        todayDate: today2,
-        onSelect: (d) => {
-          setDraftEnd(d);
-          setEndInputStr(formatShort(d));
+          className: dayClasses,
+          onClick: () => onDayClick(cellDate)
         },
-        onClose: () => setInlineCal(null)
-      }
-    )), !inlineCal && /* @__PURE__ */ React71.createElement("div", { className: "rf-dr-picker__days-section" }, /* @__PURE__ */ React71.createElement("div", { className: "rf-dr-picker__days-row" }, /* @__PURE__ */ React71.createElement("span", { className: "rf-dr-picker__days-label" }, "Days until today"), /* @__PURE__ */ React71.createElement(
-      "input",
-      {
-        type: "number",
-        className: "rf-dr-picker__days-input",
-        value: draftStart ? daysUntilToday : "",
-        min: 0,
-        onChange: handleDaysUntilChange,
-        onMouseDown: (e) => e.stopPropagation(),
-        placeholder: "\u2014"
-      }
-    )), /* @__PURE__ */ React71.createElement("div", { className: "rf-dr-picker__days-row" }, /* @__PURE__ */ React71.createElement("span", { className: "rf-dr-picker__days-label" }, "Days from today"), /* @__PURE__ */ React71.createElement(
-      "input",
-      {
-        type: "number",
-        className: "rf-dr-picker__days-input",
-        value: draftEnd ? daysFromToday : "",
-        min: 0,
-        onChange: handleDaysFromChange,
-        onMouseDown: (e) => e.stopPropagation(),
-        placeholder: "\u2014"
-      }
-    ))), /* @__PURE__ */ React71.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ React71.createElement("div", { className: "rf-dr-picker__footer" }, /* @__PURE__ */ React71.createElement("button", { type: "button", className: "rf-dr-picker__close-btn", onClick: handleClose }, "CLOSE"), /* @__PURE__ */ React71.createElement("button", { type: "button", className: "rf-dr-picker__apply-btn", onClick: handleApply }, "APPLY"))))
-  ) : (
-    /* ── Calendar Mode ── */
-    /* @__PURE__ */ React71.createElement("div", { className: "rf-dr-picker rf-dr-picker--calendar", onMouseDown: (e) => e.preventDefault() }, /* @__PURE__ */ React71.createElement("div", { className: "rf-dr-picker__calendars" }, /* @__PURE__ */ React71.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__ */ React71.createElement("div", { className: "rf-dr-picker__cal-col-divider" }), /* @__PURE__ */ React71.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__ */ React71.createElement("div", { className: "rf-dr-picker__cal-hint" }, /* @__PURE__ */ React71.createElement("span", { className: "rf-dr-picker__cal-hint-dot" }), /* @__PURE__ */ React71.createElement("span", null, "Select end date \xB7 started from ", /* @__PURE__ */ React71.createElement("strong", null, formatShort(draftStart)))), /* @__PURE__ */ React71.createElement("div", { className: "rf-dr-picker__divider" }), /* @__PURE__ */ React71.createElement("div", { className: "rf-dr-picker__cal-footer" }, draftStart && draftEnd && /* @__PURE__ */ React71.createElement("span", { className: "rf-dr-picker__cal-range-label" }, formatShort(draftStart <= draftEnd ? draftStart : draftEnd), " \u2013 ", formatShort(draftStart <= draftEnd ? draftEnd : draftStart), /* @__PURE__ */ React71.createElement("span", { className: "rf-dr-picker__cal-range-days" }, " ", "(", Math.abs(daysBetween(draftStart, draftEnd)) + 1, " days)")), /* @__PURE__ */ React71.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ React71.createElement("button", { type: "button", className: "rf-dr-picker__close-btn", onClick: handleClose }, "CLOSE"), /* @__PURE__ */ React71.createElement("button", { type: "button", className: "rf-dr-picker__apply-btn", onClick: handleApply }, "APPLY")))
-  ))), helperText && /* @__PURE__ */ React71.createElement("div", { className: "rf-text-field__helper-text" }, helperText));
+        day
+      )
+    );
+  })));
 };
-DateRangeField.displayName = "DateRangeField";
-
-// lib/TextFields/Autocomplete.tsx
-import React72, {
-  useState as useState7,
-  useRef as useRef6,
-  useEffect as useEffect7,
-  useCallback as useCallback2
-} from "react";
-import ReactDOM2 from "react-dom";
-var ChevronDownIcon = () => /* @__PURE__ */ React72.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React72.createElement("polyline", { points: "6 9 12 15 18 9" }));
-var CloseSmIcon = ({ size = 16 }) => /* @__PURE__ */ React72.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }, /* @__PURE__ */ React72.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), /* @__PURE__ */ React72.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" }));
-var CheckIcon = () => /* @__PURE__ */ React72.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React72.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] = useState7(false);
-  const [inputStr, setInputStr] = useState7("");
-  const [focusedIdx, setFocusedIdx] = useState7(-1);
-  const [popupStyle, setPopupStyle] = useState7({});
-  const containerRef = useRef6(null);
-  const inputRef = useRef6(null);
-  const listRef = useRef6(null);
-  const inputId = useRef6(`rf-ac-${Math.random().toString(36).slice(2, 9)}`).current;
-  const sxClass = useSx(sx);
-  const calcPopupStyle = useCallback2(() => {
-    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 = useCallback2(
-    (a, b) => isOptionEqualToValue ? isOptionEqualToValue(a, b) : a === b,
-    [isOptionEqualToValue]
-  );
-  const isSelected = useCallback2(
-    (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 = useCallback2(() => {
-    if (disabled) return;
-    calcPopupStyle();
-    setOpen(true);
-    setFocusedIdx(-1);
-    onOpen?.();
-  }, [disabled, calcPopupStyle, onOpen]);
-  const closePopup = useCallback2(() => {
-    setOpen(false);
-    setFocusedIdx(-1);
-    onClose?.();
-    if (!freeSolo && !multiple && value == null) {
-      setInputStr("");
-      onInputChange?.("");
+var MiniCalendar = ({ selectedDate, todayDate, onSelect, onClose }) => {
+  const init = selectedDate ?? todayDate;
+  const [viewYear, setViewYear] = useState7(init.getFullYear());
+  const [viewMonth, setViewMonth] = useState7(init.getMonth());
+  const firstDay = new Date(viewYear, viewMonth, 1).getDay();
+  const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
+  const dayCells = [
+    ...Array(firstDay).fill(null),
+    ...Array.from({ length: daysInMonth }, (_, i) => i + 1)
+  ];
+  const prevMonth = () => {
+    if (viewMonth === 0) {
+      setViewMonth(11);
+      setViewYear((y) => y - 1);
+    } else setViewMonth((m) => m - 1);
+  };
+  const nextMonth = () => {
+    if (viewMonth === 11) {
+      setViewMonth(0);
+      setViewYear((y) => y + 1);
+    } else setViewMonth((m) => m + 1);
+  };
+  return /* @__PURE__ */ React72.createElement("div", { className: "rf-dr-mini-cal" }, /* @__PURE__ */ React72.createElement("div", { className: "rf-dr-mini-cal__header" }, /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-dr-calendar__nav-btn", onClick: prevMonth }, "\u2039"), /* @__PURE__ */ React72.createElement("span", { className: "rf-dr-calendar__month-label", style: { fontSize: "0.88rem" } }, MONTHS2[viewMonth], " ", viewYear), /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-dr-calendar__nav-btn", onClick: nextMonth }, "\u203A")), /* @__PURE__ */ React72.createElement("div", { className: "rf-dr-calendar__weekdays" }, WEEKDAYS2.map((w) => /* @__PURE__ */ React72.createElement("div", { key: w, className: "rf-dr-calendar__weekday" }, w))), /* @__PURE__ */ React72.createElement("div", { className: "rf-dr-calendar__grid" }, dayCells.map((day, idx) => {
+    if (day === null) {
+      return /* @__PURE__ */ React72.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__ */ React72.createElement("div", { key: day, className: "rf-dr-calendar__cell" }, /* @__PURE__ */ React72.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] = useState7(false);
+  const [draftStart, setDraftStart] = useState7(committedStart);
+  const [draftEnd, setDraftEnd] = useState7(committedEnd);
+  const [activePreset, setActivePreset] = useState7(
+    () => detectPreset(committedStart, committedEnd)
+  );
+  const [startInputStr, setStartInputStr] = useState7(() => committedStart ? formatShort(committedStart) : "");
+  const [endInputStr, setEndInputStr] = useState7(() => committedEnd ? formatShort(committedEnd) : "");
+  const [inlineCal, setInlineCal] = useState7(null);
+  const [hoverDate, setHoverDate] = useState7(null);
+  const [selecting, setSelecting] = useState7("start");
+  const [leftViewYear, setLeftViewYear] = useState7(() => today2.getFullYear());
+  const [leftViewMonth, setLeftViewMonth] = useState7(() => today2.getMonth());
+  const containerRef = useRef6(null);
+  const inputId = useRef6(`rf-dr-${Math.random().toString(36).substr(2, 9)}`).current;
+  useEffect7(() => {
+    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]);
+  useEffect7(() => {
+    setActivePreset(detectPreset(draftStart, draftEnd));
+  }, [draftStart?.getTime(), draftEnd?.getTime()]);
   useEffect7(() => {
     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]);
-  useEffect7(() => {
-    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__ */ React72.createElement("div", { ref: containerRef, className: rootClasses, style }, /* @__PURE__ */ React72.createElement(
+  const inputPlaceholder = variant === "outlined" ? " " : void 0;
+  return /* @__PURE__ */ React72.createElement("div", { ref: containerRef, className: rootClasses, style }, /* @__PURE__ */ React72.createElement("div", { className: "rf-date-field__anchor" }, /* @__PURE__ */ React72.createElement(
     "div",
     {
       className: "rf-text-field__wrapper",
       onClick: () => {
-        if (!disabled) {
-          inputRef.current?.focus();
-          if (!open) openPopup();
-        }
-      }
-    },
-    multiple && visibleTags.map((opt, i) => /* @__PURE__ */ React72.createElement("span", { key: i, className: "rf-autocomplete__tag" }, /* @__PURE__ */ React72.createElement("span", { style: { overflow: "hidden", textOverflow: "ellipsis" } }, getOptionLabel(opt)), /* @__PURE__ */ React72.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__ */ React72.createElement(CloseSmIcon, { size: 12 })
-    ))),
-    hiddenCount > 0 && /* @__PURE__ */ React72.createElement("span", { className: "rf-autocomplete__tag-more" }, "+", hiddenCount, " more"),
+      style: { cursor: disabled ? "default" : "pointer" }
+    },
     /* @__PURE__ */ React72.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__ */ React72.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, required && /* @__PURE__ */ React72.createElement("span", { className: "rf-text-field__asterisk" }, " *")),
-    variant === "outlined" && /* @__PURE__ */ React72.createElement("fieldset", { className: "rf-text-field__notch" }, label ? /* @__PURE__ */ React72.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ React72.createElement("span", null, label, required ? " *" : "")) : /* @__PURE__ */ React72.createElement("legend", { className: "rf-text-field__legend--empty" })),
-    /* @__PURE__ */ React72.createElement("div", { className: "rf-autocomplete__endgroup" }, hasClearable && /* @__PURE__ */ React72.createElement(
+    /* @__PURE__ */ React72.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, /* @__PURE__ */ React72.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__ */ React72.createElement(CloseSmIcon, { size: 16 })
-    ), !freeSolo && /* @__PURE__ */ React72.createElement(
+      /* @__PURE__ */ React72.createElement(CalendarIcon2, null)
+    )),
+    label && /* @__PURE__ */ React72.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ React72.createElement("span", { className: "rf-text-field__asterisk" }, "*")),
+    variant === "outlined" && /* @__PURE__ */ React72.createElement("fieldset", { className: "rf-text-field__notch" }, label ? /* @__PURE__ */ React72.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ React72.createElement("span", null, label, required ? " *" : "")) : /* @__PURE__ */ React72.createElement("legend", { className: "rf-text-field__legend--empty" }))
+  ), open && !disabled && (pickerType === "panel" ? (
+    /* ── Panel Mode ── */
+    /* @__PURE__ */ React72.createElement("div", { className: "rf-dr-picker rf-dr-picker--panel", onMouseDown: (e) => e.preventDefault() }, /* @__PURE__ */ React72.createElement("div", { className: "rf-dr-picker__presets" }, PRESETS.map((p, i) => /* @__PURE__ */ React72.createElement(React72.Fragment, { key: p.id }, i > 0 && /* @__PURE__ */ React72.createElement("div", { className: "rf-dr-picker__preset-sep" }), /* @__PURE__ */ React72.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__ */ React72.createElement(ChevronDownIcon, null)
-    ))
-  ), helperText && /* @__PURE__ */ React72.createElement("div", { className: `rf-text-field__helper-text${error ? " rf-text-field__helper-text--error" : ""}` }, helperText), open && !disabled && ReactDOM2.createPortal(
-    /* @__PURE__ */ React72.createElement("div", { className: "rf-autocomplete__popup", role: "presentation", style: popupStyle }, loading ? /* @__PURE__ */ React72.createElement("div", { className: "rf-autocomplete__loading" }, /* @__PURE__ */ React72.createElement("span", { className: "rf-ac-spinner" }), loadingText) : flatEntries.length === 0 ? /* @__PURE__ */ React72.createElement("div", { className: "rf-autocomplete__no-options" }, noOptionsText) : /* @__PURE__ */ React72.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__ */ React72.createElement("li", { key: `g-${currentGroup}`, role: "presentation" }, /* @__PURE__ */ React72.createElement("div", { className: "rf-autocomplete__group-header" }, currentGroup), /* @__PURE__ */ React72.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__ */ React72.createElement("li", { key: `g-${currentGroup}`, role: "presentation" }, /* @__PURE__ */ React72.createElement("div", { className: "rf-autocomplete__group-header" }, currentGroup), /* @__PURE__ */ React72.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__ */ React72.createElement(
-      "li",
+      p.label
+    )))), /* @__PURE__ */ React72.createElement("div", { className: "rf-dr-picker__manual" }, /* @__PURE__ */ React72.createElement("div", { className: "rf-dr-picker__date-field-wrap" }, /* @__PURE__ */ React72.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__ */ React72.createElement("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, label2),
-      !renderOption && /* @__PURE__ */ React72.createElement("span", { className: "rf-autocomplete__option-check" }, /* @__PURE__ */ React72.createElement(CheckIcon, null))
-    );
-  }
-}
-var Autocomplete = React72.forwardRef(AutocompleteInner);
-Autocomplete.displayName = "Autocomplete";
+      /* @__PURE__ */ React72.createElement("span", { className: "rf-dr-picker__date-floating-label" }, "Start Date"),
+      /* @__PURE__ */ React72.createElement("div", { className: "rf-dr-picker__date-display" }, /* @__PURE__ */ React72.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__ */ React72.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__ */ React72.createElement(CalendarIcon2, null)
+      ))
+    ), inlineCal === "start" && /* @__PURE__ */ React72.createElement(
+      MiniCalendar,
+      {
+        selectedDate: draftStart,
+        todayDate: today2,
+        onSelect: (d) => {
+          setDraftStart(d);
+          setStartInputStr(formatShort(d));
+        },
+        onClose: () => setInlineCal(null)
+      }
+    )), /* @__PURE__ */ React72.createElement("div", { className: "rf-dr-picker__date-field-wrap" }, /* @__PURE__ */ React72.createElement(
+      "div",
+      {
+        className: [
+          "rf-dr-picker__date-field",
+          inlineCal === "end" ? "rf-dr-picker__date-field--active" : ""
+        ].filter(Boolean).join(" ")
+      },
+      /* @__PURE__ */ React72.createElement("span", { className: "rf-dr-picker__date-floating-label" }, "End Date"),
+      /* @__PURE__ */ React72.createElement("div", { className: "rf-dr-picker__date-display" }, /* @__PURE__ */ React72.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__ */ React72.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__ */ React72.createElement(CalendarIcon2, null)
+      ))
+    ), inlineCal === "end" && /* @__PURE__ */ React72.createElement(
+      MiniCalendar,
+      {
+        selectedDate: draftEnd,
+        todayDate: today2,
+        onSelect: (d) => {
+          setDraftEnd(d);
+          setEndInputStr(formatShort(d));
+        },
+        onClose: () => setInlineCal(null)
+      }
+    )), !inlineCal && /* @__PURE__ */ React72.createElement("div", { className: "rf-dr-picker__days-section" }, /* @__PURE__ */ React72.createElement("div", { className: "rf-dr-picker__days-row" }, /* @__PURE__ */ React72.createElement("span", { className: "rf-dr-picker__days-label" }, "Days until today"), /* @__PURE__ */ React72.createElement(
+      "input",
+      {
+        type: "number",
+        className: "rf-dr-picker__days-input",
+        value: draftStart ? daysUntilToday : "",
+        min: 0,
+        onChange: handleDaysUntilChange,
+        onMouseDown: (e) => e.stopPropagation(),
+        placeholder: "\u2014"
+      }
+    )), /* @__PURE__ */ React72.createElement("div", { className: "rf-dr-picker__days-row" }, /* @__PURE__ */ React72.createElement("span", { className: "rf-dr-picker__days-label" }, "Days from today"), /* @__PURE__ */ React72.createElement(
+      "input",
+      {
+        type: "number",
+        className: "rf-dr-picker__days-input",
+        value: draftEnd ? daysFromToday : "",
+        min: 0,
+        onChange: handleDaysFromChange,
+        onMouseDown: (e) => e.stopPropagation(),
+        placeholder: "\u2014"
+      }
+    ))), /* @__PURE__ */ React72.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ React72.createElement("div", { className: "rf-dr-picker__footer" }, /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-dr-picker__close-btn", onClick: handleClose }, "CLOSE"), /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-dr-picker__apply-btn", onClick: handleApply }, "APPLY"))))
+  ) : (
+    /* ── Calendar Mode ── */
+    /* @__PURE__ */ React72.createElement("div", { className: "rf-dr-picker rf-dr-picker--calendar", onMouseDown: (e) => e.preventDefault() }, /* @__PURE__ */ React72.createElement("div", { className: "rf-dr-picker__calendars" }, /* @__PURE__ */ React72.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__ */ React72.createElement("div", { className: "rf-dr-picker__cal-col-divider" }), /* @__PURE__ */ React72.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__ */ React72.createElement("div", { className: "rf-dr-picker__cal-hint" }, /* @__PURE__ */ React72.createElement("span", { className: "rf-dr-picker__cal-hint-dot" }), /* @__PURE__ */ React72.createElement("span", null, "Select end date \xB7 started from ", /* @__PURE__ */ React72.createElement("strong", null, formatShort(draftStart)))), /* @__PURE__ */ React72.createElement("div", { className: "rf-dr-picker__divider" }), /* @__PURE__ */ React72.createElement("div", { className: "rf-dr-picker__cal-footer" }, draftStart && draftEnd && /* @__PURE__ */ React72.createElement("span", { className: "rf-dr-picker__cal-range-label" }, formatShort(draftStart <= draftEnd ? draftStart : draftEnd), " \u2013 ", formatShort(draftStart <= draftEnd ? draftEnd : draftStart), /* @__PURE__ */ React72.createElement("span", { className: "rf-dr-picker__cal-range-days" }, " ", "(", Math.abs(daysBetween(draftStart, draftEnd)) + 1, " days)")), /* @__PURE__ */ React72.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-dr-picker__close-btn", onClick: handleClose }, "CLOSE"), /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-dr-picker__apply-btn", onClick: handleApply }, "APPLY")))
+  ))), helperText && /* @__PURE__ */ React72.createElement("div", { className: "rf-text-field__helper-text" }, helperText));
+};
+DateRangeField.displayName = "DateRangeField";
 
 // lib/Progress/RufousLogoLoader.tsx
 import * as React73 from "react";