@rufous/ui 0.2.93 → 0.2.94

package/dist/main.cjs

@@ -1908,16 +1908,243 @@ var TextField = (0, import_react17.forwardRef)(({
 TextField.displayName = "TextField";
 
 // lib/TextFields/AddressLookup.tsx
-var import_react19 = __toESM(require("react"), 1);
+var import_react20 = __toESM(require("react"), 1);
 var import_axios = __toESM(require("axios"), 1);
 var import_country_state_city = require("country-state-city");
 
 // lib/TextFields/Autocomplete.tsx
+var import_react19 = __toESM(require("react"), 1);
+var import_react_dom3 = __toESM(require("react-dom"), 1);
+
+// lib/Tooltip/Tooltip.tsx
 var import_react18 = __toESM(require("react"), 1);
 var import_react_dom2 = __toESM(require("react-dom"), 1);
-var ChevronDownIcon = () => /* @__PURE__ */ import_react18.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react18.default.createElement("polyline", { points: "6 9 12 15 18 9" }));
-var CloseSmIcon = ({ size = 16 }) => /* @__PURE__ */ import_react18.default.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }, /* @__PURE__ */ import_react18.default.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), /* @__PURE__ */ import_react18.default.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" }));
-var CheckIcon = () => /* @__PURE__ */ import_react18.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react18.default.createElement("polyline", { points: "20 6 9 17 4 12" }));
+var GAP = 8;
+function computePosition(anchor, tooltip, placement) {
+  const { top: aTop, left: aLeft, width: aW, height: aH } = anchor;
+  const { width: tW, height: tH } = tooltip;
+  let top = 0;
+  let left = 0;
+  let arrowLeft;
+  let arrowTop;
+  switch (placement) {
+    case "top":
+      top = aTop - tH - GAP;
+      left = aLeft + aW / 2 - tW / 2;
+      arrowLeft = tW / 2 - 4;
+      break;
+    case "top-start":
+      top = aTop - tH - GAP;
+      left = aLeft;
+      arrowLeft = Math.min(aW / 2, tW - 16);
+      break;
+    case "top-end":
+      top = aTop - tH - GAP;
+      left = aLeft + aW - tW;
+      arrowLeft = Math.max(tW - aW / 2 - 4, 8);
+      break;
+    case "bottom":
+      top = aTop + aH + GAP;
+      left = aLeft + aW / 2 - tW / 2;
+      arrowLeft = tW / 2 - 4;
+      break;
+    case "bottom-start":
+      top = aTop + aH + GAP;
+      left = aLeft;
+      arrowLeft = Math.min(aW / 2, tW - 16);
+      break;
+    case "bottom-end":
+      top = aTop + aH + GAP;
+      left = aLeft + aW - tW;
+      arrowLeft = Math.max(tW - aW / 2 - 4, 8);
+      break;
+    case "left":
+      top = aTop + aH / 2 - tH / 2;
+      left = aLeft - tW - GAP;
+      arrowTop = tH / 2 - 4;
+      break;
+    case "left-start":
+      top = aTop;
+      left = aLeft - tW - GAP;
+      arrowTop = Math.min(aH / 2, tH - 16);
+      break;
+    case "left-end":
+      top = aTop + aH - tH;
+      left = aLeft - tW - GAP;
+      arrowTop = Math.max(tH - aH / 2 - 4, 8);
+      break;
+    case "right":
+      top = aTop + aH / 2 - tH / 2;
+      left = aLeft + aW + GAP;
+      arrowTop = tH / 2 - 4;
+      break;
+    case "right-start":
+      top = aTop;
+      left = aLeft + aW + GAP;
+      arrowTop = Math.min(aH / 2, tH - 16);
+      break;
+    case "right-end":
+      top = aTop + aH - tH;
+      left = aLeft + aW + GAP;
+      arrowTop = Math.max(tH - aH / 2 - 4, 8);
+      break;
+    default:
+      top = aTop - tH - GAP;
+      left = aLeft + aW / 2 - tW / 2;
+  }
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  left = Math.max(8, Math.min(left, vw - tW - 8));
+  top = Math.max(8, Math.min(top, vh - tH - 8));
+  return { top, left, arrowLeft, arrowTop };
+}
+var Tooltip = ({
+  title,
+  placement = "top",
+  arrow = false,
+  open: controlledOpen,
+  disableHoverListener = false,
+  disableFocusListener = false,
+  enterDelay = 100,
+  leaveDelay = 0,
+  children,
+  followCursor = false,
+  className = "",
+  style,
+  sx
+}) => {
+  const sxClass = useSx(sx);
+  const [internalOpen, setInternalOpen] = (0, import_react18.useState)(false);
+  const [position, setPosition] = (0, import_react18.useState)({ top: 0, left: 0 });
+  const anchorRef = (0, import_react18.useRef)(null);
+  const tooltipRef = (0, import_react18.useRef)(null);
+  const enterTimer = (0, import_react18.useRef)(null);
+  const leaveTimer = (0, import_react18.useRef)(null);
+  const cursorPos = (0, import_react18.useRef)({ x: 0, y: 0 });
+  const isOpen = controlledOpen !== void 0 ? controlledOpen : internalOpen;
+  const clearTimers = (0, import_react18.useCallback)(() => {
+    if (enterTimer.current) clearTimeout(enterTimer.current);
+    if (leaveTimer.current) clearTimeout(leaveTimer.current);
+  }, []);
+  const updatePosition = (0, import_react18.useCallback)(() => {
+    if (!anchorRef.current || !tooltipRef.current) return;
+    const anchorRect = anchorRef.current.getBoundingClientRect();
+    const tooltipRect = tooltipRef.current.getBoundingClientRect();
+    if (followCursor) {
+      const fakeRect = {
+        top: cursorPos.current.y,
+        left: cursorPos.current.x,
+        right: cursorPos.current.x,
+        bottom: cursorPos.current.y,
+        width: 0,
+        height: 0,
+        x: cursorPos.current.x,
+        y: cursorPos.current.y,
+        toJSON: () => ({})
+      };
+      setPosition(computePosition(fakeRect, tooltipRect, placement));
+    } else {
+      setPosition(computePosition(anchorRect, tooltipRect, placement));
+    }
+  }, [placement, followCursor]);
+  (0, import_react18.useEffect)(() => {
+    if (isOpen) {
+      requestAnimationFrame(() => {
+        updatePosition();
+      });
+    }
+  }, [isOpen, updatePosition]);
+  const handleOpen = (0, import_react18.useCallback)(() => {
+    clearTimers();
+    if (enterDelay > 0) {
+      enterTimer.current = setTimeout(() => {
+        setInternalOpen(true);
+      }, enterDelay);
+    } else {
+      setInternalOpen(true);
+    }
+  }, [enterDelay, clearTimers]);
+  const handleClose = (0, import_react18.useCallback)(() => {
+    clearTimers();
+    if (leaveDelay > 0) {
+      leaveTimer.current = setTimeout(() => {
+        setInternalOpen(false);
+      }, leaveDelay);
+    } else {
+      setInternalOpen(false);
+    }
+  }, [leaveDelay, clearTimers]);
+  const handleMouseMove = (0, import_react18.useCallback)(
+    (e) => {
+      cursorPos.current = { x: e.clientX, y: e.clientY };
+      if (isOpen && followCursor) {
+        updatePosition();
+      }
+    },
+    [isOpen, followCursor, updatePosition]
+  );
+  (0, import_react18.useEffect)(() => {
+    return () => clearTimers();
+  }, [clearTimers]);
+  const childProps = {};
+  if (!disableHoverListener) {
+    childProps.onMouseEnter = handleOpen;
+    childProps.onMouseLeave = handleClose;
+    childProps.onMouseMove = followCursor ? handleMouseMove : void 0;
+  }
+  if (!disableFocusListener) {
+    childProps.onFocus = handleOpen;
+    childProps.onBlur = handleClose;
+  }
+  const tooltipClasses = [
+    "rf-tooltip",
+    `rf-tooltip--placement-${placement}`,
+    isOpen ? "rf-tooltip--visible" : "",
+    sxClass,
+    className
+  ].filter(Boolean).join(" ");
+  const tooltipElement = /* @__PURE__ */ import_react18.default.createElement(
+    "div",
+    {
+      ref: tooltipRef,
+      className: tooltipClasses,
+      style: {
+        top: position.top,
+        left: position.left,
+        ...style
+      },
+      role: "tooltip",
+      "aria-hidden": !isOpen
+    },
+    title,
+    arrow && /* @__PURE__ */ import_react18.default.createElement(
+      "span",
+      {
+        className: "rf-tooltip__arrow",
+        style: {
+          ...position.arrowLeft !== void 0 ? { left: position.arrowLeft } : {},
+          ...position.arrowTop !== void 0 ? { top: position.arrowTop } : {}
+        }
+      }
+    )
+  );
+  return /* @__PURE__ */ import_react18.default.createElement(import_react18.default.Fragment, null, /* @__PURE__ */ import_react18.default.createElement(
+    "span",
+    {
+      ref: anchorRef,
+      style: { display: "inline-flex", position: "relative" },
+      "aria-describedby": isOpen ? "rf-tooltip" : void 0,
+      ...childProps
+    },
+    import_react18.default.cloneElement(children)
+  ), import_react_dom2.default.createPortal(tooltipElement, document.body));
+};
+Tooltip.displayName = "Tooltip";
+
+// lib/TextFields/Autocomplete.tsx
+var ChevronDownIcon = () => /* @__PURE__ */ import_react19.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react19.default.createElement("polyline", { points: "6 9 12 15 18 9" }));
+var CloseSmIcon = ({ size = 16 }) => /* @__PURE__ */ import_react19.default.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }, /* @__PURE__ */ import_react19.default.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), /* @__PURE__ */ import_react19.default.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" }));
+var CheckIcon = () => /* @__PURE__ */ import_react19.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react19.default.createElement("polyline", { points: "20 6 9 17 4 12" }));
 function defaultGetLabel(option) {
   if (option === null || option === void 0) return "";
   if (typeof option === "string") return option;
@@ -1927,11 +2154,19 @@ function defaultGetLabel(option) {
 }
 function defaultIsEqual(a, b) {
   if (a === b) return true;
-  if (a !== null && b !== null && typeof a === "object" && typeof b === "object") {
+  if (a == null || b == null) return false;
+  const aIsObj = typeof a === "object";
+  const bIsObj = typeof b === "object";
+  if (aIsObj && bIsObj) {
     const aVal = a.value;
     const bVal = b.value;
     if (aVal !== void 0 && bVal !== void 0) return aVal === bVal;
+    const aId = a.id;
+    const bId = b.id;
+    if (aId !== void 0 && bId !== void 0) return aId === bId;
   }
+  if (aIsObj && !bIsObj) return a.value === b;
+  if (!aIsObj && bIsObj) return a === b.value;
   return false;
 }
 function defaultFilter(options, inputValue, getLabel) {
@@ -1974,18 +2209,18 @@ function AutocompleteInner(props, _ref) {
     onOpen,
     onClose
   } = props;
-  const [open, setOpen] = (0, import_react18.useState)(false);
-  const [inputStr, setInputStr] = (0, import_react18.useState)("");
-  const [filterQuery, setFilterQuery] = (0, import_react18.useState)("");
-  const [focusedIdx, setFocusedIdx] = (0, import_react18.useState)(-1);
-  const [popupStyle, setPopupStyle] = (0, import_react18.useState)({});
-  const containerRef = (0, import_react18.useRef)(null);
-  const popupRef = (0, import_react18.useRef)(null);
-  const inputRef = (0, import_react18.useRef)(null);
-  const listRef = (0, import_react18.useRef)(null);
-  const inputId = (0, import_react18.useRef)(`rf-ac-${Math.random().toString(36).slice(2, 9)}`).current;
+  const [open, setOpen] = (0, import_react19.useState)(false);
+  const [inputStr, setInputStr] = (0, import_react19.useState)("");
+  const [filterQuery, setFilterQuery] = (0, import_react19.useState)("");
+  const [focusedIdx, setFocusedIdx] = (0, import_react19.useState)(-1);
+  const [popupStyle, setPopupStyle] = (0, import_react19.useState)({});
+  const containerRef = (0, import_react19.useRef)(null);
+  const popupRef = (0, import_react19.useRef)(null);
+  const inputRef = (0, import_react19.useRef)(null);
+  const listRef = (0, import_react19.useRef)(null);
+  const inputId = (0, import_react19.useRef)(`rf-ac-${Math.random().toString(36).slice(2, 9)}`).current;
   const sxClass = useSx(sx);
-  const calcPopupStyle = (0, import_react18.useCallback)(() => {
+  const calcPopupStyle = (0, import_react19.useCallback)(() => {
     if (!containerRef.current) return;
     const rect = containerRef.current.getBoundingClientRect();
     const POPUP_MAX_HEIGHT = 280;
@@ -2016,11 +2251,11 @@ function AutocompleteInner(props, _ref) {
   }, []);
   const activeInput = controlledInput !== void 0 ? controlledInput : inputStr;
   const selectedValues = multiple ? Array.isArray(value) ? value : [] : value != null ? [value] : [];
-  const isEqual = (0, import_react18.useCallback)(
+  const isEqual = (0, import_react19.useCallback)(
     (a, b) => isOptionEqualToValue ? isOptionEqualToValue(a, b) : defaultIsEqual(a, b),
     [isOptionEqualToValue]
   );
-  const isSelected = (0, import_react18.useCallback)(
+  const isSelected = (0, import_react19.useCallback)(
     (opt) => selectedValues.some((v) => isEqual(opt, v)),
     [selectedValues, isEqual]
   );
@@ -2047,7 +2282,7 @@ function AutocompleteInner(props, _ref) {
     filtered.forEach((opt, i) => flatEntries.push({ kind: "option", option: opt, flatIdx: i }));
   }
   const selectableOptions = flatEntries.filter((e) => e.kind === "option");
-  const openPopup = (0, import_react18.useCallback)(() => {
+  const openPopup = (0, import_react19.useCallback)(() => {
     if (disabled) return;
     calcPopupStyle();
     setOpen(true);
@@ -2055,7 +2290,7 @@ function AutocompleteInner(props, _ref) {
     setFilterQuery("");
     onOpen?.();
   }, [disabled, calcPopupStyle, onOpen]);
-  const closePopup = (0, import_react18.useCallback)((justSelected = false) => {
+  const closePopup = (0, import_react19.useCallback)((justSelected = false) => {
     setOpen(false);
     setFocusedIdx(-1);
     onClose?.();
@@ -2064,7 +2299,7 @@ function AutocompleteInner(props, _ref) {
       onInputChange?.("");
     }
   }, [freeSolo, multiple, value, onInputChange, onClose]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!open) return;
     const handleOutside = (e) => {
       const target = e.target;
@@ -2083,7 +2318,7 @@ function AutocompleteInner(props, _ref) {
       window.removeEventListener("resize", calcPopupStyle);
     };
   }, [open, closePopup, calcPopupStyle]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (controlledInput !== void 0) return;
     if (!multiple) {
       const v = value;
@@ -2199,7 +2434,7 @@ function AutocompleteInner(props, _ref) {
     className
   ].filter(Boolean).join(" ");
   const inputPlaceholder = placeholder || (variant === "outlined" ? " " : void 0);
-  return /* @__PURE__ */ import_react18.default.createElement("div", { ref: containerRef, className: rootClasses, style }, /* @__PURE__ */ import_react18.default.createElement(
+  return /* @__PURE__ */ import_react19.default.createElement("div", { ref: containerRef, className: rootClasses, style }, /* @__PURE__ */ import_react19.default.createElement(
     "div",
     {
       className: "rf-text-field__wrapper",
@@ -2210,7 +2445,7 @@ function AutocompleteInner(props, _ref) {
         }
       }
     },
-    multiple && visibleTags.map((opt, i) => /* @__PURE__ */ import_react18.default.createElement("span", { key: i, className: "rf-autocomplete__tag" }, /* @__PURE__ */ import_react18.default.createElement("span", { style: { overflow: "hidden", textOverflow: "ellipsis" } }, getOptionLabel(opt)), /* @__PURE__ */ import_react18.default.createElement(
+    multiple && visibleTags.map((opt, i) => /* @__PURE__ */ import_react19.default.createElement("span", { key: i, className: "rf-autocomplete__tag" }, /* @__PURE__ */ import_react19.default.createElement("span", { style: { overflow: "hidden", textOverflow: "ellipsis" } }, getOptionLabel(opt)), /* @__PURE__ */ import_react19.default.createElement(
       "button",
       {
         type: "button",
@@ -2219,10 +2454,17 @@ function AutocompleteInner(props, _ref) {
         onClick: (e) => removeTag(opt, e),
         tabIndex: -1
       },
-      /* @__PURE__ */ import_react18.default.createElement(CloseSmIcon, { size: 12 })
+      /* @__PURE__ */ import_react19.default.createElement(CloseSmIcon, { size: 12 })
     ))),
-    hiddenCount > 0 && /* @__PURE__ */ import_react18.default.createElement("span", { className: "rf-autocomplete__tag-more" }, "+", hiddenCount, " more"),
-    /* @__PURE__ */ import_react18.default.createElement(
+    hiddenCount > 0 && /* @__PURE__ */ import_react19.default.createElement(
+      Tooltip,
+      {
+        title: selectedValues.slice(limitTags).map((o) => getOptionLabel(o)).join(", "),
+        placement: "top"
+      },
+      /* @__PURE__ */ import_react19.default.createElement("span", { className: "rf-autocomplete__tag-more" }, "+", hiddenCount, " more")
+    ),
+    /* @__PURE__ */ import_react19.default.createElement(
       "input",
       {
         ref: inputRef,
@@ -2244,9 +2486,9 @@ function AutocompleteInner(props, _ref) {
         "aria-autocomplete": "list"
       }
     ),
-    label && /* @__PURE__ */ import_react18.default.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, required && /* @__PURE__ */ import_react18.default.createElement("span", { className: "rf-text-field__asterisk" }, " *")),
-    variant === "outlined" && /* @__PURE__ */ import_react18.default.createElement("fieldset", { className: "rf-text-field__notch" }, label ? /* @__PURE__ */ import_react18.default.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ import_react18.default.createElement("span", null, label, required ? " *" : "")) : /* @__PURE__ */ import_react18.default.createElement("legend", { className: "rf-text-field__legend--empty" })),
-    /* @__PURE__ */ import_react18.default.createElement("div", { className: "rf-autocomplete__endgroup" }, hasClearable && /* @__PURE__ */ import_react18.default.createElement(
+    label && /* @__PURE__ */ import_react19.default.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, required && /* @__PURE__ */ import_react19.default.createElement("span", { className: "rf-text-field__asterisk" }, " *")),
+    variant === "outlined" && /* @__PURE__ */ import_react19.default.createElement("fieldset", { className: "rf-text-field__notch" }, label ? /* @__PURE__ */ import_react19.default.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ import_react19.default.createElement("span", null, label, required ? " *" : "")) : /* @__PURE__ */ import_react19.default.createElement("legend", { className: "rf-text-field__legend--empty" })),
+    /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-autocomplete__endgroup" }, hasClearable && /* @__PURE__ */ import_react19.default.createElement(
       "button",
       {
         type: "button",
@@ -2256,8 +2498,8 @@ function AutocompleteInner(props, _ref) {
         tabIndex: -1,
         "aria-label": "Clear"
       },
-      /* @__PURE__ */ import_react18.default.createElement(CloseSmIcon, { size: 16 })
-    ), !freeSolo && /* @__PURE__ */ import_react18.default.createElement(
+      /* @__PURE__ */ import_react19.default.createElement(CloseSmIcon, { size: 16 })
+    ), !freeSolo && /* @__PURE__ */ import_react19.default.createElement(
       "button",
       {
         type: "button",
@@ -2269,10 +2511,10 @@ function AutocompleteInner(props, _ref) {
         tabIndex: -1,
         "aria-label": open ? "Close" : "Open"
       },
-      /* @__PURE__ */ import_react18.default.createElement(ChevronDownIcon, null)
+      /* @__PURE__ */ import_react19.default.createElement(ChevronDownIcon, null)
     ))
-  ), helperText && /* @__PURE__ */ import_react18.default.createElement("div", { className: `rf-text-field__helper-text${error ? " rf-text-field__helper-text--error" : ""}` }, helperText), open && !disabled && import_react_dom2.default.createPortal(
-    /* @__PURE__ */ import_react18.default.createElement("div", { ref: popupRef, className: "rf-autocomplete__popup", role: "presentation", style: popupStyle }, loading ? /* @__PURE__ */ import_react18.default.createElement("div", { className: "rf-autocomplete__loading" }, /* @__PURE__ */ import_react18.default.createElement("span", { className: "rf-ac-spinner" }), loadingText) : flatEntries.length === 0 ? /* @__PURE__ */ import_react18.default.createElement("div", { className: "rf-autocomplete__no-options" }, noOptionsText) : /* @__PURE__ */ import_react18.default.createElement("ul", { ref: listRef, className: "rf-autocomplete__listbox", role: "listbox" }, groupBy ? (
+  ), helperText && /* @__PURE__ */ import_react19.default.createElement("div", { className: `rf-text-field__helper-text${error ? " rf-text-field__helper-text--error" : ""}` }, helperText), open && !disabled && import_react_dom3.default.createPortal(
+    /* @__PURE__ */ import_react19.default.createElement("div", { ref: popupRef, className: "rf-autocomplete__popup", role: "presentation", style: popupStyle }, loading ? /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-autocomplete__loading" }, /* @__PURE__ */ import_react19.default.createElement("span", { className: "rf-ac-spinner" }), loadingText) : flatEntries.length === 0 ? /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-autocomplete__no-options" }, noOptionsText) : /* @__PURE__ */ import_react19.default.createElement("ul", { ref: listRef, className: "rf-autocomplete__listbox", role: "listbox" }, groupBy ? (
       // Grouped render
       (() => {
         const rendered = [];
@@ -2282,7 +2524,7 @@ function AutocompleteInner(props, _ref) {
           if (entry.kind === "group") {
             if (groupItems.length > 0) {
               rendered.push(
-                /* @__PURE__ */ import_react18.default.createElement("li", { key: `g-${currentGroup}`, role: "presentation" }, /* @__PURE__ */ import_react18.default.createElement("div", { className: "rf-autocomplete__group-header" }, currentGroup), /* @__PURE__ */ import_react18.default.createElement("ul", { className: "rf-autocomplete__group-items", role: "group" }, groupItems))
+                /* @__PURE__ */ import_react19.default.createElement("li", { key: `g-${currentGroup}`, role: "presentation" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-autocomplete__group-header" }, currentGroup), /* @__PURE__ */ import_react19.default.createElement("ul", { className: "rf-autocomplete__group-items", role: "group" }, groupItems))
               );
               groupItems = [];
             }
@@ -2293,7 +2535,7 @@ function AutocompleteInner(props, _ref) {
           }
           if (ei === flatEntries.length - 1 && groupItems.length > 0) {
             rendered.push(
-              /* @__PURE__ */ import_react18.default.createElement("li", { key: `g-${currentGroup}`, role: "presentation" }, /* @__PURE__ */ import_react18.default.createElement("div", { className: "rf-autocomplete__group-header" }, currentGroup), /* @__PURE__ */ import_react18.default.createElement("ul", { className: "rf-autocomplete__group-items", role: "group" }, groupItems))
+              /* @__PURE__ */ import_react19.default.createElement("li", { key: `g-${currentGroup}`, role: "presentation" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-autocomplete__group-header" }, currentGroup), /* @__PURE__ */ import_react19.default.createElement("ul", { className: "rf-autocomplete__group-items", role: "group" }, groupItems))
             );
           }
         });
@@ -2307,7 +2549,7 @@ function AutocompleteInner(props, _ref) {
     const focused = focusedIdx === flatIdx;
     const optDisabled = getOptionDisabled?.(option) ?? false;
     const label2 = getOptionLabel(option);
-    return /* @__PURE__ */ import_react18.default.createElement(
+    return /* @__PURE__ */ import_react19.default.createElement(
       "li",
       {
         key: label2 + flatIdx,
@@ -2326,12 +2568,12 @@ function AutocompleteInner(props, _ref) {
         onMouseDown: (e) => e.preventDefault(),
         onClick: (e) => selectOption(option, e)
       },
-      renderOption ? renderOption(option, { selected, focused, index: flatIdx }) : /* @__PURE__ */ import_react18.default.createElement("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, label2),
-      !renderOption && /* @__PURE__ */ import_react18.default.createElement("span", { className: "rf-autocomplete__option-check" }, /* @__PURE__ */ import_react18.default.createElement(CheckIcon, null))
+      renderOption ? renderOption(option, { selected, focused, index: flatIdx }) : /* @__PURE__ */ import_react19.default.createElement("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, label2),
+      !renderOption && /* @__PURE__ */ import_react19.default.createElement("span", { className: "rf-autocomplete__option-check" }, /* @__PURE__ */ import_react19.default.createElement(CheckIcon, null))
     );
   }
 }
-var Autocomplete = import_react18.default.forwardRef(AutocompleteInner);
+var Autocomplete = import_react19.default.forwardRef(AutocompleteInner);
 Autocomplete.displayName = "Autocomplete";
 
 // lib/TextFields/AddressLookup.tsx
@@ -2348,16 +2590,16 @@ var AddressLookup = ({
   token = ""
 }) => {
   const { theme } = useRufousTheme();
-  const [suggestions, setSuggestions] = (0, import_react19.useState)([]);
-  const [loading, setLoading] = (0, import_react19.useState)(false);
-  const [showSuggestions, setShowSuggestions] = (0, import_react19.useState)(false);
-  const debounceTimeout = (0, import_react19.useRef)(null);
-  const containerRef = (0, import_react19.useRef)(null);
+  const [suggestions, setSuggestions] = (0, import_react20.useState)([]);
+  const [loading, setLoading] = (0, import_react20.useState)(false);
+  const [showSuggestions, setShowSuggestions] = (0, import_react20.useState)(false);
+  const debounceTimeout = (0, import_react20.useRef)(null);
+  const containerRef = (0, import_react20.useRef)(null);
   const apiKey = token || "";
   const countries = import_country_state_city.Country.getAllCountries();
-  const [states, setStates] = (0, import_react19.useState)([]);
-  const [cities, setCities] = (0, import_react19.useState)([]);
-  (0, import_react19.useEffect)(() => {
+  const [states, setStates] = (0, import_react20.useState)([]);
+  const [cities, setCities] = (0, import_react20.useState)([]);
+  (0, import_react20.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
         setShowSuggestions(false);
@@ -2366,7 +2608,7 @@ var AddressLookup = ({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (value.country) {
       const country = countries.find((c) => c.name === value.country);
       if (country) {
@@ -2379,7 +2621,7 @@ var AddressLookup = ({
       setStates([]);
     }
   }, [value.country]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (value.state && value.country) {
       const country = countries.find((c) => c.name === value.country);
       if (country) {
@@ -2484,7 +2726,7 @@ var AddressLookup = ({
       city: ""
     });
   };
-  return /* @__PURE__ */ import_react19.default.createElement("div", { className: "address-lookup-container", style: sx, ref: containerRef }, /* @__PURE__ */ import_react19.default.createElement("div", { className: `address-lookup-grid address-lookup-grid-${layout}` }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "address-lookup-grid-item col-l1" }, /* @__PURE__ */ import_react19.default.createElement(
+  return /* @__PURE__ */ import_react20.default.createElement("div", { className: "address-lookup-container", style: sx, ref: containerRef }, /* @__PURE__ */ import_react20.default.createElement("div", { className: `address-lookup-grid address-lookup-grid-${layout}` }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "address-lookup-grid-item col-l1" }, /* @__PURE__ */ import_react20.default.createElement(
     TextField,
     {
       label,
@@ -2516,7 +2758,7 @@ var AddressLookup = ({
       },
       onFocus: () => suggestions.length > 0 && setShowSuggestions(true)
     }
-  ), loading && /* @__PURE__ */ import_react19.default.createElement("div", { className: "loading-indicator" }, /* @__PURE__ */ import_react19.default.createElement(circularProgress_default, { size: 20 })), showSuggestions && suggestions.length > 0 && /* @__PURE__ */ import_react19.default.createElement("div", { className: "autocomplete-dropdown" }, suggestions.map((option, idx) => /* @__PURE__ */ import_react19.default.createElement(
+  ), loading && /* @__PURE__ */ import_react20.default.createElement("div", { className: "loading-indicator" }, /* @__PURE__ */ import_react20.default.createElement(circularProgress_default, { size: 20 })), showSuggestions && suggestions.length > 0 && /* @__PURE__ */ import_react20.default.createElement("div", { className: "autocomplete-dropdown" }, suggestions.map((option, idx) => /* @__PURE__ */ import_react20.default.createElement(
     "div",
     {
       key: idx,
@@ -2527,9 +2769,9 @@ var AddressLookup = ({
         fetchPlaceDetails(option.placePrediction.placeId, mainText);
       }
     },
-    /* @__PURE__ */ import_react19.default.createElement("div", { className: "autocomplete-main-text" }, option?.placePrediction?.structuredFormat?.mainText?.text),
-    /* @__PURE__ */ import_react19.default.createElement("div", { className: "autocomplete-secondary-text" }, option?.placePrediction?.structuredFormat?.secondaryText?.text)
-  ))), error.addressLine1 && /* @__PURE__ */ import_react19.default.createElement("div", { className: "field-error-text" }, error.addressLine1)), layout === "compact" && /* @__PURE__ */ import_react19.default.createElement("div", { className: "address-lookup-grid-item col-l2" }, /* @__PURE__ */ import_react19.default.createElement(
+    /* @__PURE__ */ import_react20.default.createElement("div", { className: "autocomplete-main-text" }, option?.placePrediction?.structuredFormat?.mainText?.text),
+    /* @__PURE__ */ import_react20.default.createElement("div", { className: "autocomplete-secondary-text" }, option?.placePrediction?.structuredFormat?.secondaryText?.text)
+  ))), error.addressLine1 && /* @__PURE__ */ import_react20.default.createElement("div", { className: "field-error-text" }, error.addressLine1)), layout === "compact" && /* @__PURE__ */ import_react20.default.createElement("div", { className: "address-lookup-grid-item col-l2" }, /* @__PURE__ */ import_react20.default.createElement(
     TextField,
     {
       label: "Address Line 2",
@@ -2538,7 +2780,7 @@ var AddressLookup = ({
       value: value.addressLine2 || "",
       onChange: (e) => handleChange("addressLine2", e.target.value)
     }
-  )), layout !== "compact" && /* @__PURE__ */ import_react19.default.createElement("div", { className: "address-lookup-grid-item col-l2" }, /* @__PURE__ */ import_react19.default.createElement(
+  )), layout !== "compact" && /* @__PURE__ */ import_react20.default.createElement("div", { className: "address-lookup-grid-item col-l2" }, /* @__PURE__ */ import_react20.default.createElement(
     TextField,
     {
       label: "Address Line 2",
@@ -2547,7 +2789,7 @@ var AddressLookup = ({
       value: value.addressLine2 || "",
       onChange: (e) => handleChange("addressLine2", e.target.value)
     }
-  )), /* @__PURE__ */ import_react19.default.createElement("div", { className: "address-lookup-grid-item col-country" }, /* @__PURE__ */ import_react19.default.createElement(
+  )), /* @__PURE__ */ import_react20.default.createElement("div", { className: "address-lookup-grid-item col-country" }, /* @__PURE__ */ import_react20.default.createElement(
     Autocomplete,
     {
       options: countries.map((c) => c.name),
@@ -2558,7 +2800,7 @@ var AddressLookup = ({
       required,
       error: !!error.country
     }
-  ), error.country && /* @__PURE__ */ import_react19.default.createElement("div", { className: "field-error-text" }, error.country)), /* @__PURE__ */ import_react19.default.createElement("div", { className: "address-lookup-grid-item col-state" }, /* @__PURE__ */ import_react19.default.createElement(
+  ), error.country && /* @__PURE__ */ import_react20.default.createElement("div", { className: "field-error-text" }, error.country)), /* @__PURE__ */ import_react20.default.createElement("div", { className: "address-lookup-grid-item col-state" }, /* @__PURE__ */ import_react20.default.createElement(
     Autocomplete,
     {
       options: states.map((s2) => s2.name),
@@ -2569,7 +2811,7 @@ var AddressLookup = ({
       required,
       error: !!error.state
     }
-  ), error.state && /* @__PURE__ */ import_react19.default.createElement("div", { className: "field-error-text" }, error.state)), /* @__PURE__ */ import_react19.default.createElement("div", { className: "address-lookup-grid-item col-city" }, /* @__PURE__ */ import_react19.default.createElement(
+  ), error.state && /* @__PURE__ */ import_react20.default.createElement("div", { className: "field-error-text" }, error.state)), /* @__PURE__ */ import_react20.default.createElement("div", { className: "address-lookup-grid-item col-city" }, /* @__PURE__ */ import_react20.default.createElement(
     Autocomplete,
     {
       options: cities.map((c) => c.name),
@@ -2580,7 +2822,7 @@ var AddressLookup = ({
       required,
       error: !!error.city
     }
-  ), error.city && /* @__PURE__ */ import_react19.default.createElement("div", { className: "field-error-text" }, error.city)), /* @__PURE__ */ import_react19.default.createElement("div", { className: "address-lookup-grid-item col-pin" }, /* @__PURE__ */ import_react19.default.createElement(
+  ), error.city && /* @__PURE__ */ import_react20.default.createElement("div", { className: "field-error-text" }, error.city)), /* @__PURE__ */ import_react20.default.createElement("div", { className: "address-lookup-grid-item col-pin" }, /* @__PURE__ */ import_react20.default.createElement(
     TextField,
     {
       label: "Pincode",
@@ -2590,13 +2832,13 @@ var AddressLookup = ({
       required,
       onChange: (e) => handleChange("pincode", e.target.value)
     }
-  ), error.pincode && /* @__PURE__ */ import_react19.default.createElement("div", { className: "field-error-text" }, error.pincode))));
+  ), error.pincode && /* @__PURE__ */ import_react20.default.createElement("div", { className: "field-error-text" }, error.pincode))));
 };
 var AddressLookup_default = AddressLookup;
 
 // lib/TextFields/DateField.tsx
-var import_react20 = __toESM(require("react"), 1);
-var import_react_dom3 = require("react-dom");
+var import_react21 = __toESM(require("react"), 1);
+var import_react_dom4 = require("react-dom");
 var WEEKDAYS = ["SU", "MO", "TU", "WE", "TH", "FR", "SA"];
 var MONTHS = [
   "January",
@@ -2756,25 +2998,25 @@ var parseTimeFromISO = (iso) => {
   if (h === 0) h = 12;
   return { h, m, ampm };
 };
-var CalendarIcon = () => /* @__PURE__ */ import_react20.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react20.default.createElement("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), /* @__PURE__ */ import_react20.default.createElement("line", { x1: "16", y1: "2", x2: "16", y2: "6" }), /* @__PURE__ */ import_react20.default.createElement("line", { x1: "8", y1: "2", x2: "8", y2: "6" }), /* @__PURE__ */ import_react20.default.createElement("line", { x1: "3", y1: "10", x2: "21", y2: "10" }));
-var ChevUp = () => /* @__PURE__ */ import_react20.default.createElement("svg", { width: "10", height: "7", viewBox: "0 0 10 7", fill: "currentColor" }, /* @__PURE__ */ import_react20.default.createElement("path", { d: "M5 0L10 7H0L5 0Z" }));
-var ChevDown = () => /* @__PURE__ */ import_react20.default.createElement("svg", { width: "10", height: "7", viewBox: "0 0 10 7", fill: "currentColor" }, /* @__PURE__ */ import_react20.default.createElement("path", { d: "M5 7L0 0H10L5 7Z" }));
+var CalendarIcon = () => /* @__PURE__ */ import_react21.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react21.default.createElement("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), /* @__PURE__ */ import_react21.default.createElement("line", { x1: "16", y1: "2", x2: "16", y2: "6" }), /* @__PURE__ */ import_react21.default.createElement("line", { x1: "8", y1: "2", x2: "8", y2: "6" }), /* @__PURE__ */ import_react21.default.createElement("line", { x1: "3", y1: "10", x2: "21", y2: "10" }));
+var ChevUp = () => /* @__PURE__ */ import_react21.default.createElement("svg", { width: "10", height: "7", viewBox: "0 0 10 7", fill: "currentColor" }, /* @__PURE__ */ import_react21.default.createElement("path", { d: "M5 0L10 7H0L5 0Z" }));
+var ChevDown = () => /* @__PURE__ */ import_react21.default.createElement("svg", { width: "10", height: "7", viewBox: "0 0 10 7", fill: "currentColor" }, /* @__PURE__ */ import_react21.default.createElement("path", { d: "M5 7L0 0H10L5 7Z" }));
 var ITEM_H = 36;
 var ScrollColumn = ({ items, selected, onSelect, infinite = true }) => {
-  const listRef = (0, import_react20.useRef)(null);
-  const isInternalScroll = (0, import_react20.useRef)(false);
-  const scrollTimeout = (0, import_react20.useRef)(null);
+  const listRef = (0, import_react21.useRef)(null);
+  const isInternalScroll = (0, import_react21.useRef)(false);
+  const scrollTimeout = (0, import_react21.useRef)(null);
   const MULTIPLIER = infinite ? 100 : 1;
   const virtualItems = infinite ? Array(MULTIPLIER).fill(items).flat() : items;
   const centerOffset = infinite ? Math.floor(MULTIPLIER / 2) * items.length : 0;
   const VISUAL_OFFSET = 54;
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (listRef.current) {
       const targetIndex = centerOffset + selected;
       listRef.current.scrollTop = targetIndex * ITEM_H - (infinite ? VISUAL_OFFSET : 0);
     }
   }, [centerOffset, infinite, selected]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (listRef.current && !isInternalScroll.current) {
       const targetIndex = centerOffset + selected;
       listRef.current.scrollTo({
@@ -2806,15 +3048,15 @@ var ScrollColumn = ({ items, selected, onSelect, infinite = true }) => {
       }
     }, 100);
   };
-  return /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-timescroll__col-wrapper" }, /* @__PURE__ */ import_react20.default.createElement(
+  return /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-timescroll__col-wrapper" }, /* @__PURE__ */ import_react21.default.createElement(
     "div",
     {
       className: "rf-timescroll__col",
       ref: listRef,
       onScroll: handleScroll
     },
-    !infinite && /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-timescroll__spacer" }),
-    virtualItems.map((label, idx) => /* @__PURE__ */ import_react20.default.createElement(
+    !infinite && /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-timescroll__spacer" }),
+    virtualItems.map((label, idx) => /* @__PURE__ */ import_react21.default.createElement(
       "div",
       {
         key: `${label}-${idx}`,
@@ -2822,8 +3064,8 @@ var ScrollColumn = ({ items, selected, onSelect, infinite = true }) => {
       },
       label
     )),
-    !infinite && /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-timescroll__spacer" })
-  ), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-timescroll__mask rf-timescroll__mask--top" }), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-timescroll__mask rf-timescroll__mask--bottom" }));
+    !infinite && /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-timescroll__spacer" })
+  ), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-timescroll__mask rf-timescroll__mask--top" }), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-timescroll__mask rf-timescroll__mask--bottom" }));
 };
 var SpinnerPanel = ({
   hour,
@@ -2834,7 +3076,7 @@ var SpinnerPanel = ({
   onHourInput,
   onMinuteInput,
   onAmpmToggle
-}) => /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__time-row" }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__time-input-wrap" }, /* @__PURE__ */ import_react20.default.createElement("button", { type: "button", className: "rf-date-picker__time-spin-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => onHourChange(1) }, /* @__PURE__ */ import_react20.default.createElement(ChevUp, null)), /* @__PURE__ */ import_react20.default.createElement(
+}) => /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__time-row" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__time-input-wrap" }, /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__time-spin-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => onHourChange(1) }, /* @__PURE__ */ import_react21.default.createElement(ChevUp, null)), /* @__PURE__ */ import_react21.default.createElement(
   "input",
   {
     type: "number",
@@ -2845,7 +3087,7 @@ var SpinnerPanel = ({
     onChange: onHourInput,
     onMouseDown: (e) => e.stopPropagation()
   }
-), /* @__PURE__ */ import_react20.default.createElement("button", { type: "button", className: "rf-date-picker__time-spin-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => onHourChange(-1) }, /* @__PURE__ */ import_react20.default.createElement(ChevDown, null))), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__time-colon" }, ":"), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__time-input-wrap" }, /* @__PURE__ */ import_react20.default.createElement("button", { type: "button", className: "rf-date-picker__time-spin-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => onMinuteChange(1) }, /* @__PURE__ */ import_react20.default.createElement(ChevUp, null)), /* @__PURE__ */ import_react20.default.createElement(
+), /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__time-spin-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => onHourChange(-1) }, /* @__PURE__ */ import_react21.default.createElement(ChevDown, null))), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__time-colon" }, ":"), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__time-input-wrap" }, /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__time-spin-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => onMinuteChange(1) }, /* @__PURE__ */ import_react21.default.createElement(ChevUp, null)), /* @__PURE__ */ import_react21.default.createElement(
   "input",
   {
     type: "number",
@@ -2856,7 +3098,7 @@ var SpinnerPanel = ({
     onChange: onMinuteInput,
     onMouseDown: (e) => e.stopPropagation()
   }
-), /* @__PURE__ */ import_react20.default.createElement("button", { type: "button", className: "rf-date-picker__time-spin-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => onMinuteChange(-1) }, /* @__PURE__ */ import_react20.default.createElement(ChevDown, null))), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__ampm" }, /* @__PURE__ */ import_react20.default.createElement(
+), /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__time-spin-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => onMinuteChange(-1) }, /* @__PURE__ */ import_react21.default.createElement(ChevDown, null))), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__ampm" }, /* @__PURE__ */ import_react21.default.createElement(
   "button",
   {
     type: "button",
@@ -2865,7 +3107,7 @@ var SpinnerPanel = ({
     onClick: () => onAmpmToggle("AM")
   },
   "AM"
-), /* @__PURE__ */ import_react20.default.createElement(
+), /* @__PURE__ */ import_react21.default.createElement(
   "button",
   {
     type: "button",
@@ -2887,7 +3129,7 @@ var CalendarBody = ({
   onMonthSelect,
   onYearSelect
 }) => {
-  const [pickerView, setPickerView] = (0, import_react20.useState)("calendar");
+  const [pickerView, setPickerView] = (0, import_react21.useState)("calendar");
   const handleMonthClick = () => {
     setPickerView(pickerView === "month" ? "calendar" : "month");
   };
@@ -2905,21 +3147,21 @@ var CalendarBody = ({
   const currentYear = todayDate.getFullYear();
   const yearStart = viewYear - 6;
   const years = Array.from({ length: 16 }, (_, i) => yearStart + i);
-  return /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__header" }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__header-labels" }, /* @__PURE__ */ import_react20.default.createElement(
+  return /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__header" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__header-labels" }, /* @__PURE__ */ import_react21.default.createElement(
     "span",
     {
       className: `rf-date-picker__month-label ${pickerView === "month" ? "rf-date-picker__month-label--active" : ""}`,
       onClick: handleMonthClick
     },
     MONTHS[viewMonth]
-  ), /* @__PURE__ */ import_react20.default.createElement(
+  ), /* @__PURE__ */ import_react21.default.createElement(
     "span",
     {
       className: `rf-date-picker__year-label ${pickerView === "year" ? "rf-date-picker__year-label--active" : ""}`,
       onClick: handleYearClick
     },
     viewYear
-  )), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__nav" }, pickerView === "year" ? /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear - 16), "aria-label": "Previous years" }, "\u2039"), /* @__PURE__ */ import_react20.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear + 16), "aria-label": "Next years" }, "\u203A")) : /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onPrev, "aria-label": "Previous month" }, "\u2039"), /* @__PURE__ */ import_react20.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onNext, "aria-label": "Next month" }, "\u203A")))), pickerView === "month" && /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__month-grid" }, MONTHS_SHORT.map((m, idx) => /* @__PURE__ */ import_react20.default.createElement(
+  )), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__nav" }, pickerView === "year" ? /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear - 16), "aria-label": "Previous years" }, "\u2039"), /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear + 16), "aria-label": "Next years" }, "\u203A")) : /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onPrev, "aria-label": "Previous month" }, "\u2039"), /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onNext, "aria-label": "Next month" }, "\u203A")))), pickerView === "month" && /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__month-grid" }, MONTHS_SHORT.map((m, idx) => /* @__PURE__ */ import_react21.default.createElement(
     "button",
     {
       key: m,
@@ -2932,7 +3174,7 @@ var CalendarBody = ({
       onClick: () => handleMonthPick(idx)
     },
     m
-  ))), pickerView === "year" && /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__year-grid" }, years.map((y) => /* @__PURE__ */ import_react20.default.createElement(
+  ))), pickerView === "year" && /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__year-grid" }, years.map((y) => /* @__PURE__ */ import_react21.default.createElement(
     "button",
     {
       key: y,
@@ -2945,12 +3187,12 @@ var CalendarBody = ({
       onClick: () => handleYearPick(y)
     },
     y
-  ))), pickerView === "calendar" && /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__weekdays" }, WEEKDAYS.map((w) => /* @__PURE__ */ import_react20.default.createElement("div", { key: w, className: "rf-date-picker__weekday" }, w))), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__grid" }, dayCells.map((day, idx) => {
-    if (day === null) return /* @__PURE__ */ import_react20.default.createElement("div", { key: `e-${idx}`, className: "rf-date-picker__day rf-date-picker__day--empty" });
+  ))), pickerView === "calendar" && /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__weekdays" }, WEEKDAYS.map((w) => /* @__PURE__ */ import_react21.default.createElement("div", { key: w, className: "rf-date-picker__weekday" }, w))), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__grid" }, dayCells.map((day, idx) => {
+    if (day === null) return /* @__PURE__ */ import_react21.default.createElement("div", { key: `e-${idx}`, className: "rf-date-picker__day rf-date-picker__day--empty" });
     const cellDate = new Date(viewYear, viewMonth, day);
     const isSelected = selectedDate ? isSameDay(cellDate, selectedDate) : false;
     const isToday = isSameDay(cellDate, todayDate);
-    return /* @__PURE__ */ import_react20.default.createElement(
+    return /* @__PURE__ */ import_react21.default.createElement(
       "button",
       {
         key: day,
@@ -2986,29 +3228,29 @@ var DateField = ({
   sx
 }) => {
   const sxClass = useSx(sx);
-  const [open, setOpen] = (0, import_react20.useState)(false);
-  const [selectedDate, setSelectedDate] = (0, import_react20.useState)(() => value ? isoToDate(value) : null);
-  const [hour, setHour] = (0, import_react20.useState)(() => {
+  const [open, setOpen] = (0, import_react21.useState)(false);
+  const [selectedDate, setSelectedDate] = (0, import_react21.useState)(() => value ? isoToDate(value) : null);
+  const [hour, setHour] = (0, import_react21.useState)(() => {
     if (value && isDatetimeType(type)) return parseTimeFromISO(value).h;
     return 12;
   });
-  const [minute, setMinute] = (0, import_react20.useState)(() => {
+  const [minute, setMinute] = (0, import_react21.useState)(() => {
     if (value && isDatetimeType(type)) return parseTimeFromISO(value).m;
     return 0;
   });
-  const [ampm, setAmpm] = (0, import_react20.useState)(() => {
+  const [ampm, setAmpm] = (0, import_react21.useState)(() => {
     if (value && isDatetimeType(type)) return parseTimeFromISO(value).ampm;
     return "AM";
   });
-  const [viewYear, setViewYear] = (0, import_react20.useState)(() => {
+  const [viewYear, setViewYear] = (0, import_react21.useState)(() => {
     const base = value ? isoToDate(value) : null;
     return base ? base.getFullYear() : today().getFullYear();
   });
-  const [viewMonth, setViewMonth] = (0, import_react20.useState)(() => {
+  const [viewMonth, setViewMonth] = (0, import_react21.useState)(() => {
     const base = value ? isoToDate(value) : null;
     return base ? base.getMonth() : today().getMonth();
   });
-  const [inputStr, setInputStr] = (0, import_react20.useState)(() => {
+  const [inputStr, setInputStr] = (0, import_react21.useState)(() => {
     if (!value) return "";
     const d = isoToDate(value);
     if (!d) return "";
@@ -3022,12 +3264,12 @@ var DateField = ({
   const HOURS = Array.from({ length: 12 }, (_, i) => String(i + 1).padStart(2, "0"));
   const MINUTES = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, "0"));
   const AMPMS = ["AM", "PM"];
-  const containerRef = (0, import_react20.useRef)(null);
-  const pickerRef = (0, import_react20.useRef)(null);
-  const [dropUp, setDropUp] = (0, import_react20.useState)(false);
-  const inputId = (0, import_react20.useRef)(`rf-df-${Math.random().toString(36).substring(2, 11)}`).current;
-  const isInternalChange = (0, import_react20.useRef)(false);
-  (0, import_react20.useEffect)(() => {
+  const containerRef = (0, import_react21.useRef)(null);
+  const pickerRef = (0, import_react21.useRef)(null);
+  const [dropUp, setDropUp] = (0, import_react21.useState)(false);
+  const inputId = (0, import_react21.useRef)(`rf-df-${Math.random().toString(36).substring(2, 11)}`).current;
+  const isInternalChange = (0, import_react21.useRef)(false);
+  (0, import_react21.useEffect)(() => {
     if (value === void 0) return;
     if (isInternalChange.current) {
       isInternalChange.current = false;
@@ -3054,7 +3296,7 @@ var DateField = ({
       setInputStr(str);
     }
   }, [value, type]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!open) return;
     const handler = (e) => {
       const target = e.target;
@@ -3065,14 +3307,14 @@ var DateField = ({
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [open]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!open || !containerRef.current) return;
     const rect = containerRef.current.getBoundingClientRect();
     const spaceBelow = window.innerHeight - rect.bottom;
     const pickerHeight = 400;
     setDropUp(spaceBelow < pickerHeight && rect.top > pickerHeight);
   }, [open]);
-  const commitDate = (0, import_react20.useCallback)((d, h, m, ap) => {
+  const commitDate = (0, import_react21.useCallback)((d, h, m, ap) => {
     setSelectedDate(d);
     if (!d) {
       setInputStr("");
@@ -3223,7 +3465,7 @@ var DateField = ({
   const inputPlaceholder = placeholder || (variant === "outlined" ? " " : void 0);
   const todayDate = today();
   const isSideVariant = type === "datetime-side" || type === "datetime-scroll";
-  return /* @__PURE__ */ import_react20.default.createElement("div", { ref: containerRef, className: rootClasses, style }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-field__anchor" }, /* @__PURE__ */ import_react20.default.createElement(
+  return /* @__PURE__ */ import_react21.default.createElement("div", { ref: containerRef, className: rootClasses, style }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-field__anchor" }, /* @__PURE__ */ import_react21.default.createElement(
     "div",
     {
       className: "rf-text-field__wrapper",
@@ -3232,7 +3474,7 @@ var DateField = ({
       },
       style: { cursor: disabled ? "default" : "pointer" }
     },
-    /* @__PURE__ */ import_react20.default.createElement(
+    /* @__PURE__ */ import_react21.default.createElement(
       "input",
       {
         id: inputId,
@@ -3248,7 +3490,7 @@ var DateField = ({
         }
       }
     ),
-    /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, /* @__PURE__ */ import_react20.default.createElement(
+    /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, /* @__PURE__ */ import_react21.default.createElement(
       "button",
       {
         type: "button",
@@ -3261,12 +3503,12 @@ var DateField = ({
         },
         "aria-label": "Pick date"
       },
-      /* @__PURE__ */ import_react20.default.createElement(CalendarIcon, null)
+      /* @__PURE__ */ import_react21.default.createElement(CalendarIcon, null)
     )),
-    label && /* @__PURE__ */ import_react20.default.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ import_react20.default.createElement("span", { className: "rf-text-field__asterisk" }, "*")),
-    variant === "outlined" && /* @__PURE__ */ import_react20.default.createElement("fieldset", { className: "rf-text-field__notch" }, label && /* @__PURE__ */ import_react20.default.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ import_react20.default.createElement("span", null, label, required ? " *" : "")))
-  ), open && !disabled && (0, import_react_dom3.createPortal)(
-    /* @__PURE__ */ import_react20.default.createElement(
+    label && /* @__PURE__ */ import_react21.default.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ import_react21.default.createElement("span", { className: "rf-text-field__asterisk" }, "*")),
+    variant === "outlined" && /* @__PURE__ */ import_react21.default.createElement("fieldset", { className: "rf-text-field__notch" }, label && /* @__PURE__ */ import_react21.default.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ import_react21.default.createElement("span", null, label, required ? " *" : "")))
+  ), open && !disabled && (0, import_react_dom4.createPortal)(
+    /* @__PURE__ */ import_react21.default.createElement(
       "div",
       {
         ref: pickerRef,
@@ -3291,7 +3533,7 @@ var DateField = ({
         })(),
         onMouseDown: (e) => e.preventDefault()
       },
-      /* @__PURE__ */ import_react20.default.createElement("div", { className: isSideVariant ? "rf-date-picker__cal-col" : void 0 }, /* @__PURE__ */ import_react20.default.createElement(
+      /* @__PURE__ */ import_react21.default.createElement("div", { className: isSideVariant ? "rf-date-picker__cal-col" : void 0 }, /* @__PURE__ */ import_react21.default.createElement(
         CalendarBody,
         {
           viewMonth,
@@ -3305,7 +3547,7 @@ var DateField = ({
           onMonthSelect: setViewMonth,
           onYearSelect: setViewYear
         }
-      ), type === "datetime" && /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__time-section" }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__time-label" }, "Time"), /* @__PURE__ */ import_react20.default.createElement(
+      ), type === "datetime" && /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__time-section" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__time-label" }, "Time"), /* @__PURE__ */ import_react21.default.createElement(
         SpinnerPanel,
         {
           hour,
@@ -3317,8 +3559,8 @@ var DateField = ({
           onMinuteInput: handleMinuteInput,
           onAmpmToggle: handleAmpmToggle
         }
-      )), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__divider" }), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__footer" }, /* @__PURE__ */ import_react20.default.createElement("button", { type: "button", className: "rf-date-picker__footer-btn", onClick: handleToday }, "Today"), /* @__PURE__ */ import_react20.default.createElement("button", { type: "button", className: "rf-date-picker__footer-btn rf-date-picker__footer-btn--clear", onClick: handleClear }, "Clear"))),
-      type === "datetime-side" && /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__side-panel" }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__side-label" }, "Time"), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__side-spinner" }, /* @__PURE__ */ import_react20.default.createElement(
+      )), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__divider" }), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__footer" }, /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__footer-btn", onClick: handleToday }, "Today"), /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__footer-btn rf-date-picker__footer-btn--clear", onClick: handleClear }, "Clear"))),
+      type === "datetime-side" && /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__side-panel" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__side-label" }, "Time"), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__side-spinner" }, /* @__PURE__ */ import_react21.default.createElement(
         SpinnerPanel,
         {
           hour,
@@ -3330,22 +3572,22 @@ var DateField = ({
           onMinuteInput: handleMinuteInput,
           onAmpmToggle: handleAmpmToggle
         }
-      )), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__side-time-display" }, String(hour).padStart(2, "0"), ":", String(minute).padStart(2, "0"), " ", ampm)),
-      type === "datetime-scroll" && /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__side-panel" }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__side-label" }, "Time"), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-timescroll" }, /* @__PURE__ */ import_react20.default.createElement(
+      )), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__side-time-display" }, String(hour).padStart(2, "0"), ":", String(minute).padStart(2, "0"), " ", ampm)),
+      type === "datetime-scroll" && /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__side-panel" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__side-label" }, "Time"), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-timescroll" }, /* @__PURE__ */ import_react21.default.createElement(
         ScrollColumn,
         {
           items: HOURS,
           selected: hour - 1,
           onSelect: handleScrollHour
         }
-      ), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-timescroll__colon" }, ":"), /* @__PURE__ */ import_react20.default.createElement(
+      ), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-timescroll__colon" }, ":"), /* @__PURE__ */ import_react21.default.createElement(
         ScrollColumn,
         {
           items: MINUTES,
           selected: minute,
           onSelect: handleScrollMinute
         }
-      ), /* @__PURE__ */ import_react20.default.createElement(
+      ), /* @__PURE__ */ import_react21.default.createElement(
         ScrollColumn,
         {
           items: AMPMS,
@@ -3353,15 +3595,15 @@ var DateField = ({
           onSelect: handleScrollAmpm,
           infinite: false
         }
-      )), /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-date-picker__side-time-display" }, String(hour).padStart(2, "0"), ":", String(minute).padStart(2, "0"), " ", ampm))
+      )), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__side-time-display" }, String(hour).padStart(2, "0"), ":", String(minute).padStart(2, "0"), " ", ampm))
     ),
     document.body
-  )), helperText && /* @__PURE__ */ import_react20.default.createElement("div", { className: "rf-text-field__helper-text" }, helperText));
+  )), helperText && /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-text-field__helper-text" }, helperText));
 };
 DateField.displayName = "DateField";
 
 // lib/TextFields/DateRangeField.tsx
-var import_react21 = __toESM(require("react"), 1);
+var import_react22 = __toESM(require("react"), 1);
 var WEEKDAYS2 = ["SU", "MO", "TU", "WE", "TH", "FR", "SA"];
 var MONTHS2 = [
   "January",
@@ -3486,7 +3728,7 @@ var detectPreset = (start, end) => {
   if (isSameDay2(start, new Date(2e3, 0, 1)) && isSameDay2(end, today2)) return "all";
   return null;
 };
-var CalendarIcon2 = () => /* @__PURE__ */ import_react21.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react21.default.createElement("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), /* @__PURE__ */ import_react21.default.createElement("line", { x1: "16", y1: "2", x2: "16", y2: "6" }), /* @__PURE__ */ import_react21.default.createElement("line", { x1: "8", y1: "2", x2: "8", y2: "6" }), /* @__PURE__ */ import_react21.default.createElement("line", { x1: "3", y1: "10", x2: "21", y2: "10" }));
+var CalendarIcon2 = () => /* @__PURE__ */ import_react22.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react22.default.createElement("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), /* @__PURE__ */ import_react22.default.createElement("line", { x1: "16", y1: "2", x2: "16", y2: "6" }), /* @__PURE__ */ import_react22.default.createElement("line", { x1: "8", y1: "2", x2: "8", y2: "6" }), /* @__PURE__ */ import_react22.default.createElement("line", { x1: "3", y1: "10", x2: "21", y2: "10" }));
 var RangeCalendarBody = ({
   viewYear,
   viewMonth,
@@ -3511,7 +3753,7 @@ var RangeCalendarBody = ({
   const hasRange = startDate != null && effectiveEnd != null && !isSameDay2(startDate, effectiveEnd);
   const lo = startDate && effectiveEnd ? startDate <= effectiveEnd ? startDate : effectiveEnd : null;
   const hi = startDate && effectiveEnd ? startDate <= effectiveEnd ? effectiveEnd : startDate : null;
-  return /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-calendar" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-calendar__header" }, /* @__PURE__ */ import_react21.default.createElement(
+  return /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-calendar" }, /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-calendar__header" }, /* @__PURE__ */ import_react22.default.createElement(
     "button",
     {
       type: "button",
@@ -3521,7 +3763,7 @@ var RangeCalendarBody = ({
       "aria-label": "Previous month"
     },
     "\u2039"
-  ), /* @__PURE__ */ import_react21.default.createElement("span", { className: "rf-dr-calendar__month-label" }, MONTHS2[viewMonth], " ", viewYear), /* @__PURE__ */ import_react21.default.createElement(
+  ), /* @__PURE__ */ import_react22.default.createElement("span", { className: "rf-dr-calendar__month-label" }, MONTHS2[viewMonth], " ", viewYear), /* @__PURE__ */ import_react22.default.createElement(
     "button",
     {
       type: "button",
@@ -3531,9 +3773,9 @@ var RangeCalendarBody = ({
       "aria-label": "Next month"
     },
     "\u203A"
-  )), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-calendar__weekdays" }, WEEKDAYS2.map((w) => /* @__PURE__ */ import_react21.default.createElement("div", { key: w, className: "rf-dr-calendar__weekday" }, w))), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-calendar__grid" }, dayCells.map((day, idx) => {
+  )), /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-calendar__weekdays" }, WEEKDAYS2.map((w) => /* @__PURE__ */ import_react22.default.createElement("div", { key: w, className: "rf-dr-calendar__weekday" }, w))), /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-calendar__grid" }, dayCells.map((day, idx) => {
     if (day === null) {
-      return /* @__PURE__ */ import_react21.default.createElement("div", { key: `e-${idx}`, className: "rf-dr-calendar__cell rf-dr-calendar__cell--empty" });
+      return /* @__PURE__ */ import_react22.default.createElement("div", { key: `e-${idx}`, className: "rf-dr-calendar__cell rf-dr-calendar__cell--empty" });
     }
     const cellDate = new Date(viewYear, viewMonth, day);
     const isStart = startDate ? isSameDay2(cellDate, startDate) : false;
@@ -3553,7 +3795,7 @@ var RangeCalendarBody = ({
       isStart || isEnd ? "rf-dr-calendar__day--selected" : "",
       isToday && !isStart && !isEnd ? "rf-dr-calendar__day--today" : ""
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ import_react21.default.createElement(
+    return /* @__PURE__ */ import_react22.default.createElement(
       "div",
       {
         key: day,
@@ -3561,7 +3803,7 @@ var RangeCalendarBody = ({
         onMouseEnter: () => onDayHover(cellDate),
         onMouseLeave: () => onDayHover(null)
       },
-      /* @__PURE__ */ import_react21.default.createElement(
+      /* @__PURE__ */ import_react22.default.createElement(
         "button",
         {
           type: "button",
@@ -3575,8 +3817,8 @@ var RangeCalendarBody = ({
 };
 var MiniCalendar = ({ selectedDate, todayDate, onSelect, onClose }) => {
   const init = selectedDate ?? todayDate;
-  const [viewYear, setViewYear] = (0, import_react21.useState)(init.getFullYear());
-  const [viewMonth, setViewMonth] = (0, import_react21.useState)(init.getMonth());
+  const [viewYear, setViewYear] = (0, import_react22.useState)(init.getFullYear());
+  const [viewMonth, setViewMonth] = (0, import_react22.useState)(init.getMonth());
   const firstDay = new Date(viewYear, viewMonth, 1).getDay();
   const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
   const dayCells = [
@@ -3595,14 +3837,14 @@ var MiniCalendar = ({ selectedDate, todayDate, onSelect, onClose }) => {
       setViewYear((y) => y + 1);
     } else setViewMonth((m) => m + 1);
   };
-  return /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-mini-cal" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-mini-cal__header" }, /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-dr-calendar__nav-btn", onClick: prevMonth }, "\u2039"), /* @__PURE__ */ import_react21.default.createElement("span", { className: "rf-dr-calendar__month-label", style: { fontSize: "0.88rem" } }, MONTHS2[viewMonth], " ", viewYear), /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-dr-calendar__nav-btn", onClick: nextMonth }, "\u203A")), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-calendar__weekdays" }, WEEKDAYS2.map((w) => /* @__PURE__ */ import_react21.default.createElement("div", { key: w, className: "rf-dr-calendar__weekday" }, w))), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-calendar__grid" }, dayCells.map((day, idx) => {
+  return /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-mini-cal" }, /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-mini-cal__header" }, /* @__PURE__ */ import_react22.default.createElement("button", { type: "button", className: "rf-dr-calendar__nav-btn", onClick: prevMonth }, "\u2039"), /* @__PURE__ */ import_react22.default.createElement("span", { className: "rf-dr-calendar__month-label", style: { fontSize: "0.88rem" } }, MONTHS2[viewMonth], " ", viewYear), /* @__PURE__ */ import_react22.default.createElement("button", { type: "button", className: "rf-dr-calendar__nav-btn", onClick: nextMonth }, "\u203A")), /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-calendar__weekdays" }, WEEKDAYS2.map((w) => /* @__PURE__ */ import_react22.default.createElement("div", { key: w, className: "rf-dr-calendar__weekday" }, w))), /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-calendar__grid" }, dayCells.map((day, idx) => {
     if (day === null) {
-      return /* @__PURE__ */ import_react21.default.createElement("div", { key: `e-${idx}`, className: "rf-dr-calendar__cell rf-dr-calendar__cell--empty" });
+      return /* @__PURE__ */ import_react22.default.createElement("div", { key: `e-${idx}`, className: "rf-dr-calendar__cell rf-dr-calendar__cell--empty" });
     }
     const cellDate = new Date(viewYear, viewMonth, day);
     const isSel = selectedDate ? isSameDay2(cellDate, selectedDate) : false;
     const isToday = isSameDay2(cellDate, todayDate);
-    return /* @__PURE__ */ import_react21.default.createElement("div", { key: day, className: "rf-dr-calendar__cell" }, /* @__PURE__ */ import_react21.default.createElement(
+    return /* @__PURE__ */ import_react22.default.createElement("div", { key: day, className: "rf-dr-calendar__cell" }, /* @__PURE__ */ import_react22.default.createElement(
       "button",
       {
         type: "button",
@@ -3641,22 +3883,22 @@ var DateRangeField = ({
   const today2 = todayFn();
   const committedStart = value?.start ? isoToDate2(value.start) : null;
   const committedEnd = value?.end ? isoToDate2(value.end) : null;
-  const [open, setOpen] = (0, import_react21.useState)(false);
-  const [draftStart, setDraftStart] = (0, import_react21.useState)(committedStart);
-  const [draftEnd, setDraftEnd] = (0, import_react21.useState)(committedEnd);
-  const [activePreset, setActivePreset] = (0, import_react21.useState)(
+  const [open, setOpen] = (0, import_react22.useState)(false);
+  const [draftStart, setDraftStart] = (0, import_react22.useState)(committedStart);
+  const [draftEnd, setDraftEnd] = (0, import_react22.useState)(committedEnd);
+  const [activePreset, setActivePreset] = (0, import_react22.useState)(
     () => detectPreset(committedStart, committedEnd)
   );
-  const [startInputStr, setStartInputStr] = (0, import_react21.useState)(() => committedStart ? formatShort(committedStart) : "");
-  const [endInputStr, setEndInputStr] = (0, import_react21.useState)(() => committedEnd ? formatShort(committedEnd) : "");
-  const [inlineCal, setInlineCal] = (0, import_react21.useState)(null);
-  const [hoverDate, setHoverDate] = (0, import_react21.useState)(null);
-  const [selecting, setSelecting] = (0, import_react21.useState)("start");
-  const [leftViewYear, setLeftViewYear] = (0, import_react21.useState)(() => today2.getFullYear());
-  const [leftViewMonth, setLeftViewMonth] = (0, import_react21.useState)(() => today2.getMonth());
-  const containerRef = (0, import_react21.useRef)(null);
-  const inputId = (0, import_react21.useRef)(`rf-dr-${Math.random().toString(36).substr(2, 9)}`).current;
-  (0, import_react21.useEffect)(() => {
+  const [startInputStr, setStartInputStr] = (0, import_react22.useState)(() => committedStart ? formatShort(committedStart) : "");
+  const [endInputStr, setEndInputStr] = (0, import_react22.useState)(() => committedEnd ? formatShort(committedEnd) : "");
+  const [inlineCal, setInlineCal] = (0, import_react22.useState)(null);
+  const [hoverDate, setHoverDate] = (0, import_react22.useState)(null);
+  const [selecting, setSelecting] = (0, import_react22.useState)("start");
+  const [leftViewYear, setLeftViewYear] = (0, import_react22.useState)(() => today2.getFullYear());
+  const [leftViewMonth, setLeftViewMonth] = (0, import_react22.useState)(() => today2.getMonth());
+  const containerRef = (0, import_react22.useRef)(null);
+  const inputId = (0, import_react22.useRef)(`rf-dr-${Math.random().toString(36).substr(2, 9)}`).current;
+  (0, import_react22.useEffect)(() => {
     const s2 = value?.start ? isoToDate2(value.start) : null;
     const e = value?.end ? isoToDate2(value.end) : null;
     setDraftStart(s2);
@@ -3665,10 +3907,10 @@ var DateRangeField = ({
     setEndInputStr(e ? formatShort(e) : "");
     setActivePreset(detectPreset(s2, e));
   }, [value?.start, value?.end]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     setActivePreset(detectPreset(draftStart, draftEnd));
   }, [draftStart?.getTime(), draftEnd?.getTime()]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (!open) return;
     const handler = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
@@ -3810,7 +4052,7 @@ var DateRangeField = ({
     className
   ].filter(Boolean).join(" ");
   const inputPlaceholder = variant === "outlined" ? " " : void 0;
-  return /* @__PURE__ */ import_react21.default.createElement("div", { ref: containerRef, className: rootClasses, style }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-field__anchor" }, /* @__PURE__ */ import_react21.default.createElement(
+  return /* @__PURE__ */ import_react22.default.createElement("div", { ref: containerRef, className: rootClasses, style }, /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-date-field__anchor" }, /* @__PURE__ */ import_react22.default.createElement(
     "div",
     {
       className: "rf-text-field__wrapper",
@@ -3819,7 +4061,7 @@ var DateRangeField = ({
       },
       style: { cursor: disabled ? "default" : "pointer" }
     },
-    /* @__PURE__ */ import_react21.default.createElement(
+    /* @__PURE__ */ import_react22.default.createElement(
       "input",
       {
         id: inputId,
@@ -3835,7 +4077,7 @@ var DateRangeField = ({
         }
       }
     ),
-    /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, /* @__PURE__ */ import_react21.default.createElement(
+    /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, /* @__PURE__ */ import_react22.default.createElement(
       "button",
       {
         type: "button",
@@ -3848,13 +4090,13 @@ var DateRangeField = ({
         },
         "aria-label": "Pick date range"
       },
-      /* @__PURE__ */ import_react21.default.createElement(CalendarIcon2, null)
+      /* @__PURE__ */ import_react22.default.createElement(CalendarIcon2, null)
     )),
-    label && /* @__PURE__ */ import_react21.default.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ import_react21.default.createElement("span", { className: "rf-text-field__asterisk" }, "*")),
-    variant === "outlined" && /* @__PURE__ */ import_react21.default.createElement("fieldset", { className: "rf-text-field__notch" }, label ? /* @__PURE__ */ import_react21.default.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ import_react21.default.createElement("span", null, label, required ? " *" : "")) : /* @__PURE__ */ import_react21.default.createElement("legend", { className: "rf-text-field__legend--empty" }))
+    label && /* @__PURE__ */ import_react22.default.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ import_react22.default.createElement("span", { className: "rf-text-field__asterisk" }, "*")),
+    variant === "outlined" && /* @__PURE__ */ import_react22.default.createElement("fieldset", { className: "rf-text-field__notch" }, label ? /* @__PURE__ */ import_react22.default.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ import_react22.default.createElement("span", null, label, required ? " *" : "")) : /* @__PURE__ */ import_react22.default.createElement("legend", { className: "rf-text-field__legend--empty" }))
   ), open && !disabled && (pickerType === "panel" ? (
     /* ── Panel Mode ── */
-    /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-picker rf-dr-picker--panel", onMouseDown: (e) => e.preventDefault() }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-picker__presets" }, PRESETS.map((p, i) => /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, { key: p.id }, i > 0 && /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-picker__preset-sep" }), /* @__PURE__ */ import_react21.default.createElement(
+    /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-picker rf-dr-picker--panel", onMouseDown: (e) => e.preventDefault() }, /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-picker__presets" }, PRESETS.map((p, i) => /* @__PURE__ */ import_react22.default.createElement(import_react22.default.Fragment, { key: p.id }, i > 0 && /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-picker__preset-sep" }), /* @__PURE__ */ import_react22.default.createElement(
       "button",
       {
         type: "button",
@@ -3865,7 +4107,7 @@ var DateRangeField = ({
         onClick: () => handlePreset(p.id)
       },
       p.label
-    )))), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-picker__manual" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-picker__date-field-wrap" }, /* @__PURE__ */ import_react21.default.createElement(
+    )))), /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-picker__manual" }, /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-picker__date-field-wrap" }, /* @__PURE__ */ import_react22.default.createElement(
       "div",
       {
         className: [
@@ -3873,8 +4115,8 @@ var DateRangeField = ({
           inlineCal === "start" ? "rf-dr-picker__date-field--active" : ""
         ].filter(Boolean).join(" ")
       },
-      /* @__PURE__ */ import_react21.default.createElement("span", { className: "rf-dr-picker__date-floating-label" }, "Start Date"),
-      /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-picker__date-display" }, /* @__PURE__ */ import_react21.default.createElement(
+      /* @__PURE__ */ import_react22.default.createElement("span", { className: "rf-dr-picker__date-floating-label" }, "Start Date"),
+      /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-picker__date-display" }, /* @__PURE__ */ import_react22.default.createElement(
         "input",
         {
           type: "text",
@@ -3885,7 +4127,7 @@ var DateRangeField = ({
           onBlur: handleStartInputBlur,
           onMouseDown: (e) => e.stopPropagation()
         }
-      ), /* @__PURE__ */ import_react21.default.createElement(
+      ), /* @__PURE__ */ import_react22.default.createElement(
         "button",
         {
           type: "button",
@@ -3894,9 +4136,9 @@ var DateRangeField = ({
           onClick: () => setInlineCal((v) => v === "start" ? null : "start"),
           "aria-label": "Pick start date"
         },
-        /* @__PURE__ */ import_react21.default.createElement(CalendarIcon2, null)
+        /* @__PURE__ */ import_react22.default.createElement(CalendarIcon2, null)
       ))
-    ), inlineCal === "start" && /* @__PURE__ */ import_react21.default.createElement(
+    ), inlineCal === "start" && /* @__PURE__ */ import_react22.default.createElement(
       MiniCalendar,
       {
         selectedDate: draftStart,
@@ -3907,7 +4149,7 @@ var DateRangeField = ({
         },
         onClose: () => setInlineCal(null)
       }
-    )), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-picker__date-field-wrap" }, /* @__PURE__ */ import_react21.default.createElement(
+    )), /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-picker__date-field-wrap" }, /* @__PURE__ */ import_react22.default.createElement(
       "div",
       {
         className: [
@@ -3915,8 +4157,8 @@ var DateRangeField = ({
           inlineCal === "end" ? "rf-dr-picker__date-field--active" : ""
         ].filter(Boolean).join(" ")
       },
-      /* @__PURE__ */ import_react21.default.createElement("span", { className: "rf-dr-picker__date-floating-label" }, "End Date"),
-      /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-picker__date-display" }, /* @__PURE__ */ import_react21.default.createElement(
+      /* @__PURE__ */ import_react22.default.createElement("span", { className: "rf-dr-picker__date-floating-label" }, "End Date"),
+      /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-picker__date-display" }, /* @__PURE__ */ import_react22.default.createElement(
         "input",
         {
           type: "text",
@@ -3927,7 +4169,7 @@ var DateRangeField = ({
           onBlur: handleEndInputBlur,
           onMouseDown: (e) => e.stopPropagation()
         }
-      ), /* @__PURE__ */ import_react21.default.createElement(
+      ), /* @__PURE__ */ import_react22.default.createElement(
         "button",
         {
           type: "button",
@@ -3936,9 +4178,9 @@ var DateRangeField = ({
           onClick: () => setInlineCal((v) => v === "end" ? null : "end"),
           "aria-label": "Pick end date"
         },
-        /* @__PURE__ */ import_react21.default.createElement(CalendarIcon2, null)
+        /* @__PURE__ */ import_react22.default.createElement(CalendarIcon2, null)
       ))
-    ), inlineCal === "end" && /* @__PURE__ */ import_react21.default.createElement(
+    ), inlineCal === "end" && /* @__PURE__ */ import_react22.default.createElement(
       MiniCalendar,
       {
         selectedDate: draftEnd,
@@ -3949,7 +4191,7 @@ var DateRangeField = ({
         },
         onClose: () => setInlineCal(null)
       }
-    )), !inlineCal && /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-picker__days-section" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-picker__days-row" }, /* @__PURE__ */ import_react21.default.createElement("span", { className: "rf-dr-picker__days-label" }, "Days until today"), /* @__PURE__ */ import_react21.default.createElement(
+    )), !inlineCal && /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-picker__days-section" }, /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-picker__days-row" }, /* @__PURE__ */ import_react22.default.createElement("span", { className: "rf-dr-picker__days-label" }, "Days until today"), /* @__PURE__ */ import_react22.default.createElement(
       "input",
       {
         type: "number",
@@ -3960,7 +4202,7 @@ var DateRangeField = ({
         onMouseDown: (e) => e.stopPropagation(),
         placeholder: "\u2014"
       }
-    )), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-picker__days-row" }, /* @__PURE__ */ import_react21.default.createElement("span", { className: "rf-dr-picker__days-label" }, "Days from today"), /* @__PURE__ */ import_react21.default.createElement(
+    )), /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-picker__days-row" }, /* @__PURE__ */ import_react22.default.createElement("span", { className: "rf-dr-picker__days-label" }, "Days from today"), /* @__PURE__ */ import_react22.default.createElement(
       "input",
       {
         type: "number",
@@ -3971,10 +4213,10 @@ var DateRangeField = ({
         onMouseDown: (e) => e.stopPropagation(),
         placeholder: "\u2014"
       }
-    ))), /* @__PURE__ */ import_react21.default.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-picker__footer" }, /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-dr-picker__close-btn", onClick: handleClose }, "CLOSE"), /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-dr-picker__apply-btn", onClick: handleApply }, "APPLY"))))
+    ))), /* @__PURE__ */ import_react22.default.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-picker__footer" }, /* @__PURE__ */ import_react22.default.createElement("button", { type: "button", className: "rf-dr-picker__close-btn", onClick: handleClose }, "CLOSE"), /* @__PURE__ */ import_react22.default.createElement("button", { type: "button", className: "rf-dr-picker__apply-btn", onClick: handleApply }, "APPLY"))))
   ) : (
     /* ── Calendar Mode ── */
-    /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-picker rf-dr-picker--calendar", onMouseDown: (e) => e.preventDefault() }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-picker__calendars" }, /* @__PURE__ */ import_react21.default.createElement(
+    /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-picker rf-dr-picker--calendar", onMouseDown: (e) => e.preventDefault() }, /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-picker__calendars" }, /* @__PURE__ */ import_react22.default.createElement(
       RangeCalendarBody,
       {
         viewYear: leftViewYear,
@@ -3989,7 +4231,7 @@ var DateRangeField = ({
         onNext: nextMonth,
         showNext: false
       }
-    ), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-picker__cal-col-divider" }), /* @__PURE__ */ import_react21.default.createElement(
+    ), /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-picker__cal-col-divider" }), /* @__PURE__ */ import_react22.default.createElement(
       RangeCalendarBody,
       {
         viewYear: rightViewYear,
@@ -4004,19 +4246,19 @@ var DateRangeField = ({
         onNext: nextMonth,
         showPrev: false
       }
-    )), selecting === "end" && draftStart && /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-picker__cal-hint" }, /* @__PURE__ */ import_react21.default.createElement("span", { className: "rf-dr-picker__cal-hint-dot" }), /* @__PURE__ */ import_react21.default.createElement("span", null, "Select end date \xB7 started from ", /* @__PURE__ */ import_react21.default.createElement("strong", null, formatShort(draftStart)))), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-picker__divider" }), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-dr-picker__cal-footer" }, draftStart && draftEnd && /* @__PURE__ */ import_react21.default.createElement("span", { className: "rf-dr-picker__cal-range-label" }, formatShort(draftStart <= draftEnd ? draftStart : draftEnd), " \u2013 ", formatShort(draftStart <= draftEnd ? draftEnd : draftStart), /* @__PURE__ */ import_react21.default.createElement("span", { className: "rf-dr-picker__cal-range-days" }, " ", "(", Math.abs(daysBetween(draftStart, draftEnd)) + 1, " days)")), /* @__PURE__ */ import_react21.default.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-dr-picker__close-btn", onClick: handleClose }, "CLOSE"), /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-dr-picker__apply-btn", onClick: handleApply }, "APPLY")))
-  ))), helperText && /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-text-field__helper-text" }, helperText));
+    )), selecting === "end" && draftStart && /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-picker__cal-hint" }, /* @__PURE__ */ import_react22.default.createElement("span", { className: "rf-dr-picker__cal-hint-dot" }), /* @__PURE__ */ import_react22.default.createElement("span", null, "Select end date \xB7 started from ", /* @__PURE__ */ import_react22.default.createElement("strong", null, formatShort(draftStart)))), /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-picker__divider" }), /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-dr-picker__cal-footer" }, draftStart && draftEnd && /* @__PURE__ */ import_react22.default.createElement("span", { className: "rf-dr-picker__cal-range-label" }, formatShort(draftStart <= draftEnd ? draftStart : draftEnd), " \u2013 ", formatShort(draftStart <= draftEnd ? draftEnd : draftStart), /* @__PURE__ */ import_react22.default.createElement("span", { className: "rf-dr-picker__cal-range-days" }, " ", "(", Math.abs(daysBetween(draftStart, draftEnd)) + 1, " days)")), /* @__PURE__ */ import_react22.default.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ import_react22.default.createElement("button", { type: "button", className: "rf-dr-picker__close-btn", onClick: handleClose }, "CLOSE"), /* @__PURE__ */ import_react22.default.createElement("button", { type: "button", className: "rf-dr-picker__apply-btn", onClick: handleApply }, "APPLY")))
+  ))), helperText && /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-text-field__helper-text" }, helperText));
 };
 DateRangeField.displayName = "DateRangeField";
 
 // lib/Progress/RufousLogoLoader.tsx
-var React73 = __toESM(require("react"), 1);
+var React74 = __toESM(require("react"), 1);
 var _uid = 0;
 var RufousLogoLoader = ({ size = 80, sx, className }) => {
-  const clipId = React73.useRef(`rll-${++_uid}`).current;
+  const clipId = React74.useRef(`rll-${++_uid}`).current;
   const height = size * (38.795 / 54.585);
   const sxClass = useSx(sx);
-  return /* @__PURE__ */ React73.createElement("div", { className: ["rufous-logo-loader", sxClass, className].filter(Boolean).join(" "), style: { width: size, height } }, /* @__PURE__ */ React73.createElement(
+  return /* @__PURE__ */ React74.createElement("div", { className: ["rufous-logo-loader", sxClass, className].filter(Boolean).join(" "), style: { width: size, height } }, /* @__PURE__ */ React74.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -4025,247 +4267,20 @@ var RufousLogoLoader = ({ size = 80, sx, className }) => {
       height,
       className: "rufous-logo-loader__svg"
     },
-    /* @__PURE__ */ React73.createElement("defs", null, /* @__PURE__ */ React73.createElement("clipPath", { id: clipId }, /* @__PURE__ */ React73.createElement(
+    /* @__PURE__ */ React74.createElement("defs", null, /* @__PURE__ */ React74.createElement("clipPath", { id: clipId }, /* @__PURE__ */ React74.createElement(
       "path",
       {
         transform: "translate(2208 18.205)",
         d: "M.7,38.8a3.783,3.783,0,0,1-.5-.045l-.031,0A.26.26,0,0,1,0,38.564a.279.279,0,0,1,.14-.2c.222-.126.45-.251.671-.371l.047-.026c.357-.194.8-.435,1.209-.685.783-.479,1.565-.993,2.32-1.489l.033-.022.218-.143.49-.32c.575-.374,1.226-.8,1.824-1.241.98-.726,1.834-1.407,2.611-2.081a22.444,22.444,0,0,0,1.783-1.774A14.2,14.2,0,0,0,12.5,28.749l.012-.016a15.8,15.8,0,0,0,1.151-1.8,10.351,10.351,0,0,0,.586-1.511l0-.011.092-.278a4.425,4.425,0,0,0,.14-.583l.007-.036c.024-.119.048-.243.079-.363a4.639,4.639,0,0,0-.034-2.566c-.064-.212-.126-.43-.184-.636l-.008-.028c-.111-.391-.225-.8-.369-1.181a8.71,8.71,0,0,0-2.279-3.24,14.363,14.363,0,0,0-3.239-2.326c-.75-.4-1.553-.727-2.329-1.046L6.1,13.114l-.157-.065c-.294-.122-.6-.221-.9-.318l-.025-.008c-.19-.061-.427-.136-.649-.218-.108-.04-.265-.172-.252-.229a.7.7,0,0,1,.235-.4.915.915,0,0,1,.449-.112c.383-.029.77-.063,1.165-.1.969-.085,1.971-.174,2.962-.181h.119a13.145,13.145,0,0,1,2.907.315,11.888,11.888,0,0,1,3.128,1.123,10.286,10.286,0,0,1,2.3,1.554.92.92,0,0,1,.273.4,12.722,12.722,0,0,1,.458,3.3c-.009,1.494-.014,2.867-.014,4.2,0,.309.013.588.039.852a1.013,1.013,0,0,0,.078.26l0,.01c.027.067.051.129.077.207.029-.064.054-.116.076-.161l.009-.017.006-.012a.823.823,0,0,0,.076-.189c.051-.247.1-.494.164-.767.136-.618.276-1.257.359-1.9a24.362,24.362,0,0,0,0-6.777,13.01,13.01,0,0,0-.559-2.1c-.061-.185-.125-.382-.187-.579a9.42,9.42,0,0,0-.583-1.469c-.367-.727-.786-1.449-1.184-2.126a9.376,9.376,0,0,0-.643-.918c-.076-.1-.151-.2-.224-.3L15.548,6.3a8.128,8.128,0,0,0-.865-1.057,32.021,32.021,0,0,0-2.466-2.183,12.673,12.673,0,0,0-1.905-1.188c-.48-.256-1-.485-1.462-.687-.221-.1-.457-.2-.683-.306a.663.663,0,0,1-.11-.071L8.039.795c-.027-.02-.058-.043-.1-.069L8.062.667,8.108.644a1.786,1.786,0,0,1,.27-.12A11.679,11.679,0,0,1,11.866,0a13.332,13.332,0,0,1,1.769.121A13.927,13.927,0,0,1,15.9.693l.471.147a10.775,10.775,0,0,1,1.656.658,9.622,9.622,0,0,1,1.768,1.041,32.024,32.024,0,0,1,3.092,2.717,25.62,25.62,0,0,1,2.245,2.829l.084.117c.617.86,1.171,1.777,1.678,2.641.255.435.484.9.687,1.3.14.281.285.572.436.854.262.491.534.977.835,1.516l.005.01q.169.3.337.6c.064.116.13.232.2.347l.027.047c.12.212.244.431.357.651a8.518,8.518,0,0,0,2.121,2.695c.065.024.137.054.212.086l.013.006a1.268,1.268,0,0,0,.376.123.087.087,0,0,0,.063-.02.209.209,0,0,0,.083-.151c0-.083-.08-.153-.157-.22a.694.694,0,0,1-.135-.142c-.134-.216-.273-.436-.407-.649l-.063-.1c-.373-.587-.8-1.251-1.157-1.923s-.666-1.373-.964-2.057l0-.008q-.123-.284-.247-.564a1.707,1.707,0,0,1,.239-1.554l.026-.046.005-.009A12.918,12.918,0,0,1,31.408,9.3,7.814,7.814,0,0,1,33.75,7.612a5.391,5.391,0,0,1,2.218-.444,11.369,11.369,0,0,1,1.882.186,9.211,9.211,0,0,1,2.845,1.022c.138.071.261.135.373.188a4.155,4.155,0,0,0,1.849.464h.093c1.993-.052,4-.14,5.95-.224l.846-.036c.9-.038,1.808-.066,2.682-.093L52.7,8.67l1.007-.031h.041a1.787,1.787,0,0,1,.73.163c.1.051.109.256.109.318,0,.081-.147.169-.257.175-.466.028-.994.043-1.485.043a37.855,37.855,0,0,0-6.3.577A9.221,9.221,0,0,0,42.7,11.3a7.884,7.884,0,0,0-1.565,1.5c-.593.743-1.116,1.545-1.621,2.321l-.121.185c-.228.35-.435.709-.662,1.109l-.041.071c-.136.236-.276.481-.42.717l-.007.012c-.349.572-.709,1.162-1.1,1.716l-.216.307-.01.014a21.585,21.585,0,0,1-1.451,1.907c-1.317,1.485-2.538,2.8-3.734,4.006a30.822,30.822,0,0,1-2.5,2.207c-.548.446-1.139.86-1.71,1.26l-.01.007q-.254.177-.5.355c-.536.379-1.109.78-1.7,1.157-.545.35-1.143.71-1.828,1.1-.842.483-1.586.9-2.275,1.26-.271.144-.553.272-.868.412-.13.058-.3.135-.467.213a6.838,6.838,0,0,1-1.18.3,5.079,5.079,0,0,1,.647-.771l.008-.008c.132-.136.251-.26.365-.393l.048-.056c.566-.667,1.151-1.357,1.7-2.059s1.126-1.439,1.649-2.2c.4-.579.749-1.2,1.134-1.888l.016-.028c.406-.734.826-1.493,1.181-2.266.274-.6.733-1.787.866-2.189l.023-.07c.13-.389.215-.646-.013-.916a.369.369,0,0,1-.041.031l0,0c-.028.021-.055.041-.058.065a2.307,2.307,0,0,1-.146.5,5.257,5.257,0,0,1-.374.709c-.281.468-.536.959-.782,1.434-.2.385-.379.731-.57,1.069a20.042,20.042,0,0,1-1.161,1.871,30.689,30.689,0,0,1-1.985,2.531c-.74.821-1.567,1.648-2.6,2.6a21.448,21.448,0,0,1-2.1,1.669c-.85.606-1.754,1.2-2.688,1.768a17.867,17.867,0,0,1-1.993,1.037c-.994.445-2.066.891-3.185,1.324a12.127,12.127,0,0,1-1.714.514c-.955.213-1.969.413-3.1.611-1.023.18-2.054.328-2.927.449A1.41,1.41,0,0,1,.7,38.8ZM37.945,10.58l-.007,0a.583.583,0,0,0-.223.048.677.677,0,0,0-.437.555.637.637,0,0,0,.426.527.621.621,0,0,0,.209.046h.016a.72.72,0,0,0,.464-.194.676.676,0,0,0,.194-.282l0-.011,0-.005,0-.006,0-.009a.415.415,0,0,0,.014-.109.734.734,0,0,0-.657-.56Z"
       }
     ))),
-    /* @__PURE__ */ React73.createElement("g", { transform: "translate(-123.275 -24)" }, /* @__PURE__ */ React73.createElement("g", { transform: "translate(-2084.725 5.795)", clipPath: `url(#${clipId})` }, /* @__PURE__ */ React73.createElement("rect", { className: "rufous-ls rufous-ls-1", width: "40", height: "6", transform: "translate(2208 58) rotate(-90)", fill: "#d07f6f" }), /* @__PURE__ */ React73.createElement("rect", { className: "rufous-ls rufous-ls-2", width: "40", height: "6", transform: "translate(2214 58) rotate(-90)", fill: "#c66958" }), /* @__PURE__ */ React73.createElement("rect", { className: "rufous-ls rufous-ls-3", width: "40", height: "7", transform: "translate(2220 58) rotate(-90)", fill: "#bb5341" }), /* @__PURE__ */ React73.createElement("rect", { className: "rufous-ls rufous-ls-4", width: "40", height: "6", transform: "translate(2227 58) rotate(-90)", fill: "#b03a28" }), /* @__PURE__ */ React73.createElement("rect", { className: "rufous-ls rufous-ls-5", width: "40", height: "6", transform: "translate(2233 58) rotate(-90)", fill: "#a41b06" }), /* @__PURE__ */ React73.createElement("rect", { className: "rufous-ls rufous-ls-6", width: "40", height: "6", transform: "translate(2239 58) rotate(-90)", fill: "#8e1604" }), /* @__PURE__ */ React73.createElement("rect", { className: "rufous-ls rufous-ls-7", width: "40", height: "6", transform: "translate(2245 58) rotate(-90)", fill: "#791103" }), /* @__PURE__ */ React73.createElement("rect", { className: "rufous-ls rufous-ls-8", width: "40", height: "5", transform: "translate(2251 58) rotate(-90)", fill: "#640c02" }), /* @__PURE__ */ React73.createElement("rect", { className: "rufous-ls rufous-ls-9", width: "40", height: "7", transform: "translate(2256 58) rotate(-90)", fill: "#500801" })))
+    /* @__PURE__ */ React74.createElement("g", { transform: "translate(-123.275 -24)" }, /* @__PURE__ */ React74.createElement("g", { transform: "translate(-2084.725 5.795)", clipPath: `url(#${clipId})` }, /* @__PURE__ */ React74.createElement("rect", { className: "rufous-ls rufous-ls-1", width: "40", height: "6", transform: "translate(2208 58) rotate(-90)", fill: "#d07f6f" }), /* @__PURE__ */ React74.createElement("rect", { className: "rufous-ls rufous-ls-2", width: "40", height: "6", transform: "translate(2214 58) rotate(-90)", fill: "#c66958" }), /* @__PURE__ */ React74.createElement("rect", { className: "rufous-ls rufous-ls-3", width: "40", height: "7", transform: "translate(2220 58) rotate(-90)", fill: "#bb5341" }), /* @__PURE__ */ React74.createElement("rect", { className: "rufous-ls rufous-ls-4", width: "40", height: "6", transform: "translate(2227 58) rotate(-90)", fill: "#b03a28" }), /* @__PURE__ */ React74.createElement("rect", { className: "rufous-ls rufous-ls-5", width: "40", height: "6", transform: "translate(2233 58) rotate(-90)", fill: "#a41b06" }), /* @__PURE__ */ React74.createElement("rect", { className: "rufous-ls rufous-ls-6", width: "40", height: "6", transform: "translate(2239 58) rotate(-90)", fill: "#8e1604" }), /* @__PURE__ */ React74.createElement("rect", { className: "rufous-ls rufous-ls-7", width: "40", height: "6", transform: "translate(2245 58) rotate(-90)", fill: "#791103" }), /* @__PURE__ */ React74.createElement("rect", { className: "rufous-ls rufous-ls-8", width: "40", height: "5", transform: "translate(2251 58) rotate(-90)", fill: "#640c02" }), /* @__PURE__ */ React74.createElement("rect", { className: "rufous-ls rufous-ls-9", width: "40", height: "7", transform: "translate(2256 58) rotate(-90)", fill: "#500801" })))
   ));
 };
 
 // lib/DataGrid/DataGrid.tsx
 var import_react23 = __toESM(require("react"), 1);
 var import_lucide_react2 = require("lucide-react");
-
-// lib/Tooltip/Tooltip.tsx
-var import_react22 = __toESM(require("react"), 1);
-var import_react_dom4 = __toESM(require("react-dom"), 1);
-var GAP = 8;
-function computePosition(anchor, tooltip, placement) {
-  const { top: aTop, left: aLeft, width: aW, height: aH } = anchor;
-  const { width: tW, height: tH } = tooltip;
-  let top = 0;
-  let left = 0;
-  let arrowLeft;
-  let arrowTop;
-  switch (placement) {
-    case "top":
-      top = aTop - tH - GAP;
-      left = aLeft + aW / 2 - tW / 2;
-      arrowLeft = tW / 2 - 4;
-      break;
-    case "top-start":
-      top = aTop - tH - GAP;
-      left = aLeft;
-      arrowLeft = Math.min(aW / 2, tW - 16);
-      break;
-    case "top-end":
-      top = aTop - tH - GAP;
-      left = aLeft + aW - tW;
-      arrowLeft = Math.max(tW - aW / 2 - 4, 8);
-      break;
-    case "bottom":
-      top = aTop + aH + GAP;
-      left = aLeft + aW / 2 - tW / 2;
-      arrowLeft = tW / 2 - 4;
-      break;
-    case "bottom-start":
-      top = aTop + aH + GAP;
-      left = aLeft;
-      arrowLeft = Math.min(aW / 2, tW - 16);
-      break;
-    case "bottom-end":
-      top = aTop + aH + GAP;
-      left = aLeft + aW - tW;
-      arrowLeft = Math.max(tW - aW / 2 - 4, 8);
-      break;
-    case "left":
-      top = aTop + aH / 2 - tH / 2;
-      left = aLeft - tW - GAP;
-      arrowTop = tH / 2 - 4;
-      break;
-    case "left-start":
-      top = aTop;
-      left = aLeft - tW - GAP;
-      arrowTop = Math.min(aH / 2, tH - 16);
-      break;
-    case "left-end":
-      top = aTop + aH - tH;
-      left = aLeft - tW - GAP;
-      arrowTop = Math.max(tH - aH / 2 - 4, 8);
-      break;
-    case "right":
-      top = aTop + aH / 2 - tH / 2;
-      left = aLeft + aW + GAP;
-      arrowTop = tH / 2 - 4;
-      break;
-    case "right-start":
-      top = aTop;
-      left = aLeft + aW + GAP;
-      arrowTop = Math.min(aH / 2, tH - 16);
-      break;
-    case "right-end":
-      top = aTop + aH - tH;
-      left = aLeft + aW + GAP;
-      arrowTop = Math.max(tH - aH / 2 - 4, 8);
-      break;
-    default:
-      top = aTop - tH - GAP;
-      left = aLeft + aW / 2 - tW / 2;
-  }
-  const vw = window.innerWidth;
-  const vh = window.innerHeight;
-  left = Math.max(8, Math.min(left, vw - tW - 8));
-  top = Math.max(8, Math.min(top, vh - tH - 8));
-  return { top, left, arrowLeft, arrowTop };
-}
-var Tooltip = ({
-  title,
-  placement = "top",
-  arrow = false,
-  open: controlledOpen,
-  disableHoverListener = false,
-  disableFocusListener = false,
-  enterDelay = 100,
-  leaveDelay = 0,
-  children,
-  followCursor = false,
-  className = "",
-  style,
-  sx
-}) => {
-  const sxClass = useSx(sx);
-  const [internalOpen, setInternalOpen] = (0, import_react22.useState)(false);
-  const [position, setPosition] = (0, import_react22.useState)({ top: 0, left: 0 });
-  const anchorRef = (0, import_react22.useRef)(null);
-  const tooltipRef = (0, import_react22.useRef)(null);
-  const enterTimer = (0, import_react22.useRef)(null);
-  const leaveTimer = (0, import_react22.useRef)(null);
-  const cursorPos = (0, import_react22.useRef)({ x: 0, y: 0 });
-  const isOpen = controlledOpen !== void 0 ? controlledOpen : internalOpen;
-  const clearTimers = (0, import_react22.useCallback)(() => {
-    if (enterTimer.current) clearTimeout(enterTimer.current);
-    if (leaveTimer.current) clearTimeout(leaveTimer.current);
-  }, []);
-  const updatePosition = (0, import_react22.useCallback)(() => {
-    if (!anchorRef.current || !tooltipRef.current) return;
-    const anchorRect = anchorRef.current.getBoundingClientRect();
-    const tooltipRect = tooltipRef.current.getBoundingClientRect();
-    if (followCursor) {
-      const fakeRect = {
-        top: cursorPos.current.y,
-        left: cursorPos.current.x,
-        right: cursorPos.current.x,
-        bottom: cursorPos.current.y,
-        width: 0,
-        height: 0,
-        x: cursorPos.current.x,
-        y: cursorPos.current.y,
-        toJSON: () => ({})
-      };
-      setPosition(computePosition(fakeRect, tooltipRect, placement));
-    } else {
-      setPosition(computePosition(anchorRect, tooltipRect, placement));
-    }
-  }, [placement, followCursor]);
-  (0, import_react22.useEffect)(() => {
-    if (isOpen) {
-      requestAnimationFrame(() => {
-        updatePosition();
-      });
-    }
-  }, [isOpen, updatePosition]);
-  const handleOpen = (0, import_react22.useCallback)(() => {
-    clearTimers();
-    if (enterDelay > 0) {
-      enterTimer.current = setTimeout(() => {
-        setInternalOpen(true);
-      }, enterDelay);
-    } else {
-      setInternalOpen(true);
-    }
-  }, [enterDelay, clearTimers]);
-  const handleClose = (0, import_react22.useCallback)(() => {
-    clearTimers();
-    if (leaveDelay > 0) {
-      leaveTimer.current = setTimeout(() => {
-        setInternalOpen(false);
-      }, leaveDelay);
-    } else {
-      setInternalOpen(false);
-    }
-  }, [leaveDelay, clearTimers]);
-  const handleMouseMove = (0, import_react22.useCallback)(
-    (e) => {
-      cursorPos.current = { x: e.clientX, y: e.clientY };
-      if (isOpen && followCursor) {
-        updatePosition();
-      }
-    },
-    [isOpen, followCursor, updatePosition]
-  );
-  (0, import_react22.useEffect)(() => {
-    return () => clearTimers();
-  }, [clearTimers]);
-  const childProps = {};
-  if (!disableHoverListener) {
-    childProps.onMouseEnter = handleOpen;
-    childProps.onMouseLeave = handleClose;
-    childProps.onMouseMove = followCursor ? handleMouseMove : void 0;
-  }
-  if (!disableFocusListener) {
-    childProps.onFocus = handleOpen;
-    childProps.onBlur = handleClose;
-  }
-  const tooltipClasses = [
-    "rf-tooltip",
-    `rf-tooltip--placement-${placement}`,
-    isOpen ? "rf-tooltip--visible" : "",
-    sxClass,
-    className
-  ].filter(Boolean).join(" ");
-  const tooltipElement = /* @__PURE__ */ import_react22.default.createElement(
-    "div",
-    {
-      ref: tooltipRef,
-      className: tooltipClasses,
-      style: {
-        top: position.top,
-        left: position.left,
-        ...style
-      },
-      role: "tooltip",
-      "aria-hidden": !isOpen
-    },
-    title,
-    arrow && /* @__PURE__ */ import_react22.default.createElement(
-      "span",
-      {
-        className: "rf-tooltip__arrow",
-        style: {
-          ...position.arrowLeft !== void 0 ? { left: position.arrowLeft } : {},
-          ...position.arrowTop !== void 0 ? { top: position.arrowTop } : {}
-        }
-      }
-    )
-  );
-  return /* @__PURE__ */ import_react22.default.createElement(import_react22.default.Fragment, null, /* @__PURE__ */ import_react22.default.createElement(
-    "span",
-    {
-      ref: anchorRef,
-      style: { display: "inline-flex", position: "relative" },
-      "aria-describedby": isOpen ? "rf-tooltip" : void 0,
-      ...childProps
-    },
-    import_react22.default.cloneElement(children)
-  ), import_react_dom4.default.createPortal(tooltipElement, document.body));
-};
-Tooltip.displayName = "Tooltip";
-
-// lib/DataGrid/DataGrid.tsx
 var getOperatorsForType = (type) => {
   if (type === "date") return [
     { value: "is", label: "is" },