@dmsi/wedgekit-react 0.0.476 → 0.0.477

package/dist/{chunk-HSJ34DOK.js → chunk-WIDUWFLX.js}

@@ -35,7 +35,8 @@ import {
   Search
 } from "./chunk-RQRR4FEF.js";
 import {
-  Input
+  Input,
+  InputBase
 } from "./chunk-44TH3VC7.js";
 import {
   Label
@@ -48,7 +49,14 @@ import {
   useTableLayout
 } from "./chunk-URYQ24NF.js";
 import {
-  formatDate
+  findDocumentRoot
+} from "./chunk-VXWSAIB5.js";
+import {
+  calculateCursorPosition,
+  formatDate,
+  formatInputValue,
+  isValidDate,
+  parseInputDate
 } from "./chunk-R3EQIDBX.js";
 import {
   formatCurrencyDisplay
@@ -73,7 +81,10 @@ import {
 } from "./chunk-LPY6PMAY.js";
 import {
   componentGap,
-  componentPadding
+  componentPadding,
+  layoutGap,
+  layoutPaddding,
+  typography
 } from "./chunk-IXR65MOU.js";
 import {
   __objRest,
@@ -82,7 +93,7 @@ import {
 } from "./chunk-ORMEWXMH.js";
 
 // src/components/DataGrid/utils.tsx
-import clsx5 from "clsx";
+import clsx6 from "clsx";
 
 // src/components/DataGrid/index.tsx
 import React3, {
@@ -1225,13 +1236,712 @@ function adaptTableStateSetter(setter) {
 }
 var DataGrid_default = DataGrid;
 
-// src/components/MobileDataGrid/ColumnSelector/index.tsx
-import { useCallback as useCallback2, useRef as useRef2, useState as useState4 } from "react";
+// src/components/DateInput.tsx
+import { useRef as useRef3, useEffect as useEffect3, useState as useState5, useLayoutEffect } from "react";
+import { createPortal } from "react-dom";
+
+// src/components/CalendarRange.tsx
+import clsx5 from "clsx";
+import React4, { useEffect as useEffect2, useRef as useRef2, useState as useState4 } from "react";
+import { Temporal } from "@js-temporal/polyfill";
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function isWeekend(date) {
+  return date.dayOfWeek === 6 || date.dayOfWeek === 7;
+}
+function DateCell(_a) {
+  var _b = _a, {
+    date,
+    isInMonth,
+    isToday,
+    isSelected,
+    inRange,
+    isDisabled,
+    isRangeStart,
+    isRangeEnd,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    cellPadding = "",
+    isRangeDisabled = false,
+    id,
+    testid
+  } = _b, props = __objRest(_b, [
+    "date",
+    "isInMonth",
+    "isToday",
+    "isSelected",
+    "inRange",
+    "isDisabled",
+    "isRangeStart",
+    "isRangeEnd",
+    "onClick",
+    "onMouseEnter",
+    "onMouseLeave",
+    "cellPadding",
+    "isRangeDisabled",
+    "id",
+    "testid"
+  ]);
+  return /* @__PURE__ */ jsx8(
+    "span",
+    __spreadProps(__spreadValues({}, props), {
+      id,
+      "data-testid": testid,
+      className: clsx5(
+        "flex items-center justify-center aspect-square select-none transition-colors border duration-100 font-medium",
+        typography.caption,
+        cellPadding,
+        !isToday && !isSelected && !inRange && !isDisabled && !isRangeStart && !isRangeEnd && "border-transparent",
+        !isInMonth && "border-transparent",
+        // Today: subtle border ring
+        isToday && !isSelected && !inRange && "rounded-full border-border-primary-normal ",
+        // Selected: Figma blue, white text, strong shadow
+        isSelected && "bg-action-400 text-white border-action-400 z-10",
+        !isSelected && !inRange && "rounded-base",
+        // When range is disabled OR when only 'from' is selected (no range yet), apply rounded corners
+        (isRangeDisabled || !inRange && isSelected) && "rounded-base",
+        inRange && isSelected && "hover:border-action-500",
+        // In range: Figma light blue background
+        inRange && !isSelected && "bg-action-100 text-text-primary-normal border-y-action-400 border-x-0  ",
+        // Disabled: Figma gray, no pointer, no hover
+        isDisabled && !inRange ? "text-text-primary-disabled bg-transparent pointer-events-none opacity-40 border-transparent" : [
+          "text-text-primary-normal cursor-pointer",
+          // Figma hover: blue bg, blue text (or red text if selected)
+          isSelected ? "hover:bg-background-action-primary-hover hover:text-white" : "hover:bg-action-100 hover:text-text-action-primary-hover",
+          // Figma active: darker blue bg, white text
+          "active:bg-action-300 active:text-white",
+          // Figma focus: ring
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action-400"
+        ],
+        isRangeStart && "rounded-l",
+        isRangeEnd && "rounded-r"
+      ),
+      tabIndex: isDisabled ? -1 : 0,
+      "aria-disabled": isDisabled,
+      onClick: () => !isDisabled && isInMonth && onClick(),
+      onMouseEnter: () => isInMonth && onMouseEnter(),
+      onMouseLeave: () => isInMonth && onMouseLeave(),
+      children: isInMonth ? date.day : ""
+    })
+  );
+}
+function CalendarRange({
+  from,
+  to,
+  onChange,
+  isDateAvailable,
+  mode = "double",
+  cardStyle = false,
+  disableRange = false,
+  id,
+  testid
+}) {
+  const weekDays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+  const parseDate = (d) => {
+    if (!d) {
+      return void 0;
+    }
+    try {
+      if (typeof d === "number") {
+        return Temporal.PlainDate.from(new Date(d).toISOString().slice(0, 10));
+      }
+      if (typeof d === "string") {
+        return Temporal.PlainDate.from(d);
+      }
+      return void 0;
+    } catch (error) {
+      console.error("Invalid date format:", d, error);
+      return Temporal.Now.plainDateISO();
+    }
+  };
+  const fromDate = parseDate(from);
+  const toDate = parseDate(to);
+  const today = Temporal.Now.plainDateISO();
+  const [baseMonth, setBaseMonth] = useState4(
+    fromDate != null ? fromDate : today.with({ day: 1 })
+  );
+  const [selecting, setSelecting] = useState4("from");
+  const [pendingFrom, setPendingFrom] = useState4(void 0);
+  const [hoveredDate, setHoveredDate] = useState4(void 0);
+  useEffect2(() => {
+    if (fromDate) {
+      setBaseMonth(fromDate.with({ day: 1 }));
+    } else if (toDate) {
+      setBaseMonth(toDate.with({ day: 1 }));
+    }
+  }, [from, to]);
+  useEffect2(() => {
+    if (fromDate && toDate) {
+      setSelecting("from");
+      setPendingFrom(void 0);
+      setHoveredDate(void 0);
+    }
+  }, [from, to]);
+  function getMonthData(monthOffset) {
+    const monthDate = baseMonth.add({ months: monthOffset }).with({ day: 1 });
+    const days = monthDate.daysInMonth;
+    const firstDayOffset = monthDate.dayOfWeek % 7;
+    return {
+      name: monthDate.toLocaleString("en-US", { month: "long" }),
+      year: monthDate.year,
+      days,
+      firstDayOffset,
+      date: monthDate
+    };
+  }
+  function getMonthDataWith(monthOffset) {
+    const monthDate = baseMonth.with({ month: monthOffset }).with({ day: 1 });
+    const days = monthDate.daysInMonth;
+    const firstDayOffset = monthDate.dayOfWeek % 7;
+    return {
+      name: monthDate.toLocaleString("en-US", { month: "long" }),
+      year: monthDate.year,
+      days,
+      firstDayOffset,
+      date: monthDate
+    };
+  }
+  function handleDayClick(date) {
+    if (isDateAvailable && !isDateAvailable(date)) return;
+    if (mode === "single" && disableRange) {
+      if (onChange) {
+        onChange(date.toString(), date.toString());
+      }
+      return;
+    }
+    if (selecting === "from") {
+      setPendingFrom(date);
+      setSelecting("to");
+      setHoveredDate(void 0);
+    } else if (pendingFrom) {
+      if (onChange) {
+        const [start, end] = Temporal.PlainDate.compare(date, pendingFrom) < 0 ? [date, pendingFrom] : [pendingFrom, date];
+        onChange(start.toString(), end.toString());
+      }
+      setPendingFrom(void 0);
+      setSelecting("from");
+      setHoveredDate(void 0);
+    }
+  }
+  function isInRange(date) {
+    if (mode === "single" && disableRange) {
+      return false;
+    }
+    if (pendingFrom && selecting === "to" && hoveredDate) {
+      const [start, end] = Temporal.PlainDate.compare(hoveredDate, pendingFrom) < 0 ? [hoveredDate, pendingFrom] : [pendingFrom, hoveredDate];
+      return Temporal.PlainDate.compare(date, start) >= 0 && Temporal.PlainDate.compare(date, end) <= 0;
+    }
+    if (!pendingFrom && fromDate && toDate) {
+      return Temporal.PlainDate.compare(date, fromDate) >= 0 && Temporal.PlainDate.compare(date, toDate) <= 0;
+    }
+    return false;
+  }
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      id,
+      "data-testid": testid,
+      className: clsx5(
+        "relative bg-background-grouped-primary-normal rounded-base w-fit",
+        layoutPaddding,
+        layoutGap,
+        cardStyle && "shadow-4",
+        // baseTransition,
+        "overflow-hidden"
+      ),
+      children: /* @__PURE__ */ jsx8(
+        "div",
+        {
+          className: clsx5(
+            "flex flex-row items-start justify-start bg-background-primary-normal overflow-clip",
+            layoutGap
+          ),
+          children: (mode === "double" ? [0, 1] : [0]).map((offset, idx) => {
+            return /* @__PURE__ */ jsx8(
+              CalendarPane,
+              {
+                getMonthData,
+                getMonthDataWith,
+                offset,
+                idx,
+                id,
+                testid,
+                baseMonth,
+                setBaseMonth,
+                mode,
+                pendingFrom,
+                weekDays,
+                fromDate,
+                toDate,
+                isDateAvailable,
+                disableRange,
+                hoveredDate,
+                isInRange,
+                today,
+                setHoveredDate,
+                handleDayClick
+              },
+              idx
+            );
+          })
+        }
+      )
+    }
+  );
+}
+function CalendarPane({
+  getMonthData,
+  getMonthDataWith,
+  offset,
+  idx,
+  id,
+  testid,
+  baseMonth,
+  setBaseMonth,
+  mode,
+  pendingFrom,
+  weekDays,
+  fromDate,
+  toDate,
+  isDateAvailable,
+  disableRange,
+  hoveredDate,
+  isInRange,
+  today,
+  setHoveredDate,
+  handleDayClick
+}) {
+  const months = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+  const years = Array.from({ length: 100 }).map(
+    (_, i) => baseMonth.year - 50 + i
+  );
+  const [monthMenuOpen, setMonthMenuOpen] = useState4(false);
+  const [yearMenuOpen, setYearMenuOpen] = useState4(false);
+  const monthMenuRef = useRef2(null);
+  const yearMenuRef = useRef2(null);
+  const month = getMonthData(offset);
+  const totalCells = 42;
+  const emptyCells = month.firstDayOffset;
+  return /* @__PURE__ */ jsxs6(React4.Fragment, { children: [
+    /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        className: clsx5("flex flex-col"),
+        children: [
+          /* @__PURE__ */ jsxs6(
+            "div",
+            {
+              className: clsx5(
+                "flex flex-row items-center justify-between",
+                typography.label,
+                "text-text-action-primary-normal"
+              ),
+              children: [
+                idx === 0 ? /* @__PURE__ */ jsx8(
+                  "button",
+                  {
+                    id: id ? `${id}-prev-month-button` : void 0,
+                    "data-testid": testid ? `${testid}-prev-month-button` : void 0,
+                    type: "button",
+                    className: clsx5(
+                      "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
+                      componentPadding
+                    ),
+                    "aria-label": "Previous month",
+                    onClick: () => setBaseMonth(baseMonth.subtract({ months: 1 })),
+                    children: /* @__PURE__ */ jsx8(Icon, { name: "chevron_left", size: 24 })
+                  }
+                ) : /* @__PURE__ */ jsx8("span", { className: clsx5(componentPadding, "mr-1") }),
+                /* @__PURE__ */ jsxs6("div", { className: "flex gap-desktop-compact-component-padding", children: [
+                  /* @__PURE__ */ jsx8(
+                    "button",
+                    {
+                      ref: (el) => {
+                        monthMenuRef.current = el;
+                      },
+                      type: "button",
+                      onClick: () => {
+                        setMonthMenuOpen(true);
+                        setYearMenuOpen(false);
+                      },
+                      className: "font-semibold text-text-action-primary-normal text-[14px] py-[2px] truncate",
+                      children: month.name
+                    }
+                  ),
+                  /* @__PURE__ */ jsx8(
+                    Menu,
+                    {
+                      show: monthMenuOpen,
+                      positionTo: monthMenuRef,
+                      setShow: () => setMonthMenuOpen(false),
+                      children: months.map((x) => [x, getMonthDataWith(x + 1)]).map(([x, m]) => /* @__PURE__ */ jsx8(
+                        MenuOption,
+                        {
+                          selected: baseMonth.month === x + 1,
+                          onClick: () => {
+                            setBaseMonth(baseMonth.with({ month: x + 1 }));
+                            setMonthMenuOpen(false);
+                          },
+                          children: m.name
+                        },
+                        m.name
+                      ))
+                    }
+                  ),
+                  /* @__PURE__ */ jsx8(
+                    "button",
+                    {
+                      ref: (el) => {
+                        yearMenuRef.current = el;
+                      },
+                      type: "button",
+                      onClick: () => {
+                        setYearMenuOpen(true);
+                        setMonthMenuOpen(false);
+                      },
+                      className: "font-semibold text-text-action-primary-normal text-[14px] py-[2px] truncate",
+                      children: month.year
+                    }
+                  ),
+                  /* @__PURE__ */ jsx8(
+                    Menu,
+                    {
+                      show: yearMenuOpen,
+                      positionTo: yearMenuRef,
+                      setShow: () => setYearMenuOpen(false),
+                      children: years.map((y) => /* @__PURE__ */ jsx8(
+                        MenuOption,
+                        {
+                          selected: baseMonth.year === y,
+                          onClick: () => {
+                            setBaseMonth(baseMonth.with({ year: y }));
+                            setYearMenuOpen(false);
+                          },
+                          children: y
+                        },
+                        y
+                      ))
+                    }
+                  )
+                ] }),
+                (mode === "double" ? idx === 1 : true) ? /* @__PURE__ */ jsx8(
+                  "button",
+                  {
+                    id: id ? `${id}-next-month-button` : void 0,
+                    "data-testid": testid ? `${testid}-next-month-button` : void 0,
+                    type: "button",
+                    className: clsx5(
+                      "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
+                      componentPadding
+                    ),
+                    "aria-label": "Next month",
+                    onClick: () => setBaseMonth(baseMonth.add({ months: 1 })),
+                    children: /* @__PURE__ */ jsx8(Icon, { name: "chevron_right", size: 24 })
+                  }
+                ) : /* @__PURE__ */ jsx8("span", { className: clsx5(componentPadding, "ml-1") })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx8("div", { className: clsx5("grid grid-cols-7"), children: weekDays.map((d) => /* @__PURE__ */ jsx8(
+            "span",
+            {
+              className: clsx5(
+                typography.caption,
+                "text-text-secondary-normal text-center",
+                "w-10"
+              ),
+              children: d
+            },
+            d
+          )) }),
+          /* @__PURE__ */ jsx8("div", { className: clsx5("grid grid-cols-7"), children: Array.from({ length: totalCells }).map((_, i) => {
+            const day = i - emptyCells + 1;
+            const date = month.date.with({ day: 1 }).add({
+              days: i - emptyCells
+            });
+            const isInMonth = day > 0 && day <= month.days;
+            const isToday = isInMonth && date.equals(today);
+            const isSelected = isInMonth && (!pendingFrom && fromDate && date.equals(fromDate) || !pendingFrom && toDate && date.equals(toDate) || pendingFrom && date.equals(pendingFrom));
+            const inRange = isInMonth && isInRange(date);
+            const isDisabled = !isInMonth || (isDateAvailable ? !isDateAvailable(date) : false);
+            const hoverDateIsBeforePendingFrom = hoveredDate && pendingFrom && Temporal.PlainDate.compare(hoveredDate, pendingFrom) < 0;
+            const hoverDateIsAfterPendingFrom = hoveredDate && pendingFrom && Temporal.PlainDate.compare(hoveredDate, pendingFrom) >= 0;
+            const isRangeStart = mode === "single" && disableRange ? false : !pendingFrom && isInMonth && fromDate && date.equals(fromDate) || hoverDateIsAfterPendingFrom && date.equals(pendingFrom);
+            const isRangeEnd = mode === "single" && disableRange ? false : !pendingFrom && isInMonth && toDate && date.equals(toDate) || hoverDateIsBeforePendingFrom && date.equals(pendingFrom);
+            return /* @__PURE__ */ jsx8(
+              DateCell,
+              {
+                id: id ? `${id}-date-${date.toString()}` : void 0,
+                testid: testid ? `${testid}-date-${date.toString()}` : void 0,
+                date,
+                isInMonth: !!isInMonth,
+                isToday: !!isToday,
+                isSelected: !!isSelected,
+                inRange: !!inRange,
+                isDisabled: !!isDisabled,
+                onClick: () => handleDayClick(date),
+                onMouseEnter: () => setHoveredDate(date),
+                onMouseLeave: () => setHoveredDate(void 0),
+                isRangeStart: !!isRangeStart,
+                isRangeEnd: !!isRangeEnd,
+                isRangeDisabled: mode === "single" && disableRange,
+                cellPadding: componentPadding
+              },
+              i
+            );
+          }) })
+        ]
+      }
+    ),
+    mode === "double" && idx === 0 && /* @__PURE__ */ jsx8(
+      "div",
+      {
+        className: clsx5(
+          "self-stretch bg-border-primary-normal rounded-base",
+          // 1px width, full height, matches Figma divider
+          "w-px"
+        )
+      }
+    )
+  ] }, month.name + month.year);
+}
+var CalendarRange_default = CalendarRange;
+
+// src/components/DateInput.tsx
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var DateInput = (_a) => {
+  var _b = _a, {
+    id,
+    testid,
+    value,
+    onChange,
+    placeholder = "MM/DD/YYYY",
+    disabled,
+    readOnly = false,
+    label
+  } = _b, props = __objRest(_b, [
+    "id",
+    "testid",
+    "value",
+    "onChange",
+    "placeholder",
+    "disabled",
+    "readOnly",
+    "label"
+  ]);
+  const [visible, setVisible] = useState5(false);
+  const [inputValue, setInputValue] = useState5("");
+  const [isTyping, setIsTyping] = useState5(false);
+  const popoverRef = useRef3(null);
+  const triggerRef = useRef3(null);
+  const rootRef = useRef3(null);
+  const [calendarPosition, setCalendarPosition] = useState5({
+    top: 0,
+    left: 0,
+    width: 0
+  });
+  const [from, to] = [value, ""];
+  useEffect3(() => {
+    if (!isTyping) {
+      setInputValue(formatDisplayValue(from));
+    }
+  }, [from, isTyping]);
+  useLayoutEffect(() => {
+    if (visible) {
+      updatePosition();
+    }
+  }, [visible]);
+  const updatePosition = () => {
+    if (rootRef.current) {
+      const rect = rootRef.current.getBoundingClientRect();
+      setCalendarPosition({
+        top: rect.bottom + window.scrollY,
+        left: rect.left + window.scrollX,
+        width: rect.width
+      });
+    }
+  };
+  useEffect3(() => {
+    updatePosition();
+    const resizeObserver = new ResizeObserver(updatePosition);
+    if (triggerRef.current) {
+      resizeObserver.observe(triggerRef.current);
+    }
+    window.addEventListener("scroll", updatePosition);
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("scroll", updatePosition);
+    };
+  }, []);
+  useEffect3(() => {
+    const handleKeyDown2 = (event) => {
+      var _a2;
+      if (event.key === "Escape" && popoverRef.current) {
+        setVisible(false);
+        (_a2 = triggerRef.current) == null ? void 0 : _a2.blur();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown2);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown2);
+    };
+  });
+  useEffect3(() => {
+    const handleClickOutside = (event) => {
+      if (popoverRef.current && !popoverRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
+        setVisible(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+  function handleDateChange(fromValue) {
+    onChange(fromValue);
+    setVisible(false);
+    setIsTyping(false);
+  }
+  const handleFocus = () => {
+    if (readOnly) return;
+    setVisible(true);
+  };
+  const handleClick = () => {
+    handleFocus();
+  };
+  const handleInputChange = (event) => {
+    if (readOnly) return;
+    const rawValue = event.target.value;
+    const cursorPosition = event.target.selectionStart || 0;
+    setIsTyping(true);
+    const formattedValue = formatInputValue(rawValue);
+    setInputValue(formattedValue);
+    requestAnimationFrame(() => {
+      if (triggerRef.current) {
+        const newPosition = calculateCursorPosition(
+          rawValue,
+          formattedValue,
+          cursorPosition
+        );
+        triggerRef.current.setSelectionRange(newPosition, newPosition);
+      }
+    });
+    const parsedDate = parseInputDate(formattedValue);
+    if (parsedDate && isValidDate(parsedDate)) {
+      onChange(parsedDate);
+    }
+  };
+  const handleBlur = () => {
+    setIsTyping(false);
+    const parsedDate = parseInputDate(inputValue);
+    if (!parsedDate || !isValidDate(parsedDate)) {
+      setInputValue(formatDisplayValue(from));
+    }
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Backspace") {
+      const input = event.target;
+      const cursorPosition = input.selectionStart || 0;
+      const value2 = input.value;
+      if (cursorPosition > 0 && value2[cursorPosition - 1] === "/") {
+        event.preventDefault();
+        const newValue = value2.slice(0, cursorPosition - 2) + value2.slice(cursorPosition);
+        const formattedValue = formatInputValue(newValue);
+        setInputValue(formattedValue);
+        requestAnimationFrame(() => {
+          if (triggerRef.current) {
+            const newPosition = Math.max(0, cursorPosition - 2);
+            triggerRef.current.setSelectionRange(newPosition, newPosition);
+          }
+        });
+        setIsTyping(true);
+        return;
+      }
+    }
+    if (event.key === "Enter") {
+      const parsedDate = parseInputDate(inputValue);
+      if (parsedDate && isValidDate(parsedDate)) {
+        onChange(parsedDate);
+        setVisible(false);
+        setIsTyping(false);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs7("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx9(
+      InputBase,
+      __spreadProps(__spreadValues({
+        id,
+        testid,
+        ref: (el) => {
+          triggerRef.current = el;
+        }
+      }, props), {
+        wrapperRef: rootRef,
+        value: inputValue,
+        placeholder,
+        disabled,
+        readOnly,
+        after: /* @__PURE__ */ jsx9(Icon, { name: "calendar_month" }),
+        onFocus: handleFocus,
+        onClick: handleClick,
+        onChange: handleInputChange,
+        onBlur: handleBlur,
+        onKeyDown: handleKeyDown,
+        label,
+        secondaryIconColor: true
+      })
+    ),
+    visible && !readOnly && createPortal(
+      /* @__PURE__ */ jsx9(
+        "div",
+        {
+          ref: (el) => {
+            popoverRef.current = el;
+          },
+          className: "absolute z-40 bg-white",
+          style: {
+            top: `${calendarPosition.top + 4}px`,
+            left: `${calendarPosition.left}px`,
+            minWidth: `${calendarPosition.width}px`
+          },
+          children: /* @__PURE__ */ jsx9(
+            CalendarRange,
+            {
+              id: id ? `${id}-calendar` : void 0,
+              testid: testid ? `${testid}-calendar` : void 0,
+              from,
+              to: to || from,
+              onChange: handleDateChange,
+              cardStyle: true,
+              mode: "single",
+              disableRange: true
+            }
+          )
+        }
+      ),
+      findDocumentRoot(popoverRef.current)
+    )
+  ] });
+};
+DateInput.displayName = "DateInput";
+function formatDisplayValue(from) {
+  if (!from) {
+    return "";
+  }
+  if (!isValidDate(from)) {
+    return "";
+  }
+  return formatDate(from);
+}
+
+// src/components/MobileDataGrid/ColumnSelector/index.tsx
+import { useCallback as useCallback2, useRef as useRef4, useState as useState6 } from "react";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 function ColumnSelector() {
   const context = useGridContext();
-  const ref = useRef2(null);
-  const [show, setShow] = useState4(false);
+  const ref = useRef4(null);
+  const [show, setShow] = useState6(false);
   const {
     columns,
     id,
@@ -1248,7 +1958,7 @@ function ColumnSelector() {
     },
     [dispatch]
   );
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       id: id ? `${id}-column-selector` : void 0,
@@ -1256,7 +1966,7 @@ function ColumnSelector() {
       className: "text-text-secondary-normal border-l border-brand-200 p-mobile-container-padding",
       ref,
       children: [
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx10(
           Button,
           {
             id: id ? `${id}-button` : void 0,
@@ -1265,10 +1975,10 @@ function ColumnSelector() {
             variant: "navigation",
             iconOnly: true,
             size: 24,
-            leftIcon: /* @__PURE__ */ jsx8(Icon, { name: "tune" })
+            leftIcon: /* @__PURE__ */ jsx10(Icon, { name: "tune" })
           }
         ),
-        /* @__PURE__ */ jsxs6(
+        /* @__PURE__ */ jsxs8(
           Menu,
           {
             id: id ? `${id}-menu` : void 0,
@@ -1279,7 +1989,7 @@ function ColumnSelector() {
             setShow,
             calculateMinMaxHeight: true,
             children: [
-              /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx10(
                 Button,
                 {
                   id: id ? `${id}-reset-button` : void 0,
@@ -1297,11 +2007,11 @@ function ColumnSelector() {
                 return (_a = x.meta) == null ? void 0 : _a.inVisibilityMenu;
               }).map((column) => {
                 var _a, _b, _c;
-                return /* @__PURE__ */ jsx8(
+                return /* @__PURE__ */ jsx10(
                   MenuOption,
                   {
                     testid: testid ? `${testid}-option-${column.id}` : void 0,
-                    children: /* @__PURE__ */ jsx8(
+                    children: /* @__PURE__ */ jsx10(
                       Checkbox,
                       {
                         id: id ? `${id}-checkbox-${column.id}` : void 0,
@@ -1331,7 +2041,7 @@ function ColumnSelector() {
 }
 
 // src/components/MobileDataGrid/MobileDataGridHeader.tsx
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 function MobileDataGridHeader({
   header: Header,
   enableColumnSelector,
@@ -1349,15 +2059,15 @@ function MobileDataGridHeader({
     handleRowSelectAll
   } = ctx;
   if (typeof Header === "undefined" && !primaryKey) return null;
-  if (typeof Header === "function") return /* @__PURE__ */ jsx9(Header, __spreadValues({}, ctx));
+  if (typeof Header === "function") return /* @__PURE__ */ jsx11(Header, __spreadValues({}, ctx));
   if (typeof Header === "string" || primaryKey)
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx11(
       "div",
       {
         id: id ? `${id}-header` : void 0,
         "data-testid": testid ? `${testid}-header` : void 0,
         className: "sticky top-0",
-        children: /* @__PURE__ */ jsx9(Theme, { theme: "brand", children: /* @__PURE__ */ jsxs7(
+        children: /* @__PURE__ */ jsx11(Theme, { theme: "brand", children: /* @__PURE__ */ jsxs9(
           Stack,
           {
             horizontal: true,
@@ -1366,7 +2076,7 @@ function MobileDataGridHeader({
             justify: "between",
             backgroundColor: "background-primary-normal",
             children: [
-              enableRowSelection && /* @__PURE__ */ jsx9("div", { className: "p-mobile-component-padding border-r border-brand-200 max-w-fit h-full", children: /* @__PURE__ */ jsx9(
+              enableRowSelection && /* @__PURE__ */ jsx11("div", { className: "p-mobile-component-padding border-r border-brand-200 max-w-fit h-full", children: /* @__PURE__ */ jsx11(
                 Checkbox,
                 {
                   id: id ? `${id}-select-all-checkbox` : void 0,
@@ -1376,7 +2086,7 @@ function MobileDataGridHeader({
                   onChange: handleRowSelectAll
                 }
               ) }),
-              /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx11(
                 Stack,
                 {
                   horizontal: true,
@@ -1384,10 +2094,10 @@ function MobileDataGridHeader({
                   items: "center",
                   sizing: "component",
                   padding: true,
-                  children: /* @__PURE__ */ jsx9(Heading3, { as: "span", color: "text-primary-normal", children: typeof Header === "string" ? Header : (_b = (_a = columns.find((col) => col.id === primaryKey)) == null ? void 0 : _a.header) == null ? void 0 : _b.toString() })
+                  children: /* @__PURE__ */ jsx11(Heading3, { as: "span", color: "text-primary-normal", children: typeof Header === "string" ? Header : (_b = (_a = columns.find((col) => col.id === primaryKey)) == null ? void 0 : _a.header) == null ? void 0 : _b.toString() })
                 }
               ),
-              enableColumnSelector && /* @__PURE__ */ jsx9(ColumnSelector, {})
+              enableColumnSelector && /* @__PURE__ */ jsx11(ColumnSelector, {})
             ]
           }
         ) })
@@ -1396,7 +2106,7 @@ function MobileDataGridHeader({
 }
 
 // src/components/MobileDataGrid/index.tsx
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 function MobileDataGrid(props) {
   const {
     columns,
@@ -1418,7 +2128,7 @@ function MobileDataGrid(props) {
     rowActions,
     rounded
   } = props;
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs10(
     GridContextProvider,
     {
       initialColumns: columns,
@@ -1430,7 +2140,7 @@ function MobileDataGrid(props) {
       numberOfColumnsToShow,
       primaryKey,
       children: [
-        /* @__PURE__ */ jsxs8(
+        /* @__PURE__ */ jsxs10(
           Stack,
           {
             height: "full",
@@ -1438,7 +2148,7 @@ function MobileDataGrid(props) {
             overflowX: "hidden",
             overflowY: "hidden",
             children: [
-              !hideHeader && /* @__PURE__ */ jsx10(
+              !hideHeader && /* @__PURE__ */ jsx12(
                 MobileDataGridHeader,
                 {
                   header,
@@ -1446,7 +2156,7 @@ function MobileDataGrid(props) {
                   enableRowSelection
                 }
               ),
-              /* @__PURE__ */ jsx10(
+              /* @__PURE__ */ jsx12(
                 ColumnList,
                 {
                   withBorder,
@@ -1460,23 +2170,23 @@ function MobileDataGrid(props) {
             ]
           }
         ),
-        /* @__PURE__ */ jsx10(RowDetailModalProvider, {})
+        /* @__PURE__ */ jsx12(RowDetailModalProvider, {})
       ]
     }
   );
 }
 
 // src/components/DataGrid/utils.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function getSortIcon(sort, nextSort = false) {
-  const iconClassName = clsx5(
+  const iconClassName = clsx6(
     "text-icon-on-action-primary-normal",
     nextSort && "hidden group-hover:block"
   );
   if (sort === "asc")
-    return /* @__PURE__ */ jsx11(Icon, { size: 16, className: iconClassName, name: "arrow_upward" });
+    return /* @__PURE__ */ jsx13(Icon, { size: 16, className: iconClassName, name: "arrow_upward" });
   if (sort === "desc")
-    return /* @__PURE__ */ jsx11(Icon, { size: 16, className: iconClassName, name: "arrow_downward" });
+    return /* @__PURE__ */ jsx13(Icon, { size: 16, className: iconClassName, name: "arrow_downward" });
   return null;
 }
 
@@ -1490,7 +2200,11 @@ export {
   PinnedColumns,
   DataGrid,
   DataGrid_default,
+  DateInput,
   ColumnSelector,
   MobileDataGridHeader,
-  MobileDataGrid
+  MobileDataGrid,
+  isWeekend,
+  CalendarRange,
+  CalendarRange_default
 };