@startdownnotez404/ui 1.3.5 → 1.3.6

package/dist/chunk-XAJAMVAG.mjs

@@ -0,0 +1,1720 @@
+import {
+  MuiPaper
+} from "./chunk-3VUAM2GY.mjs";
+import {
+  default as default12
+} from "./chunk-VYD3PDBB.mjs";
+import {
+  default as default3,
+  default2 as default4
+} from "./chunk-MDAUF7IL.mjs";
+import {
+  default108 as default6,
+  default125 as default7,
+  default126 as default8,
+  default128 as default9,
+  default130 as default10,
+  default131 as default11,
+  default69 as default5
+} from "./chunk-ZVFYOXDE.mjs";
+import {
+  IconButton_default
+} from "./chunk-D4XPNSSI.mjs";
+import {
+  Chip
+} from "./chunk-OP6LKXPA.mjs";
+import {
+  default as default2
+} from "./chunk-PNSJC6PC.mjs";
+
+// src/components/elemental/DatePicker/src/MuiXDatePicker.tsx
+import React from "react";
+import dayjs from "dayjs";
+import customParseFormat from "dayjs/plugin/customParseFormat";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { DateCalendar } from "@mui/x-date-pickers/DateCalendar";
+import DialogActions from "@mui/material/DialogActions";
+import InputAdornment from "@mui/material/InputAdornment";
+import { jsx, jsxs } from "react/jsx-runtime";
+dayjs.extend(customParseFormat);
+var DISPLAY_DATE_FMT = "MM/DD/YYYY";
+var toDayjs = (v) => {
+  if (v == null || v === "") return null;
+  const d = dayjs(v);
+  return d.isValid() ? d : null;
+};
+var formatDateLabel = (v, fmt) => v && v.isValid() ? v.format(fmt) : "";
+var DATE_PARSE_FORMATS = [
+  DISPLAY_DATE_FMT,
+  "M/D/YYYY",
+  "YYYY-MM-DD",
+  "MMM D, YYYY",
+  "D MMM YYYY",
+  "MMM D YYYY",
+  "YYYY/MM/DD"
+];
+var parseDateInput = (raw) => {
+  const trimmed = raw.trim();
+  if (!trimmed) return null;
+  for (const fmt of DATE_PARSE_FORMATS) {
+    const d = dayjs(trimmed, fmt, true);
+    if (d.isValid()) return d.startOf("day");
+  }
+  const loose = dayjs(trimmed);
+  if (loose.isValid()) return loose.startOf("day");
+  return "invalid";
+};
+var MuiXDatePicker = ({
+  value: valueProp,
+  defaultValue,
+  onChange,
+  label = "Pick a date",
+  disabled,
+  format: formatProp,
+  sx,
+  disableTyping = false,
+  slotProps
+}) => {
+  const displayFmt = formatProp ?? DISPLAY_DATE_FMT;
+  const isControlled = valueProp !== void 0;
+  const [uncontrolled, setUncontrolled] = React.useState(
+    () => toDayjs(defaultValue)
+  );
+  const value = isControlled ? toDayjs(valueProp) : uncontrolled;
+  const [open, setOpen] = React.useState(false);
+  const [draft, setDraft] = React.useState(value);
+  const committedLabel = formatDateLabel(value, displayFmt);
+  const [inputText, setInputText] = React.useState(committedLabel);
+  const [fieldFocused, setFieldFocused] = React.useState(false);
+  const typingEnabled = !disableTyping;
+  const skipCommitOnBlurRef = React.useRef(false);
+  const anchorRef = React.useRef(null);
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const tf = slotProps?.textField ?? {};
+  const mergedDisabled = disabled ?? tf.disabled;
+  const mergedRequired = Boolean(tf.required);
+  const mergedError = Boolean(tf.error);
+  const helperText = tf.helperText;
+  const commit = (next) => {
+    if (!isControlled) setUncontrolled(next);
+    onChange?.(next);
+    return next;
+  };
+  React.useEffect(() => {
+    if (!fieldFocused) setInputText(committedLabel);
+  }, [committedLabel, fieldFocused]);
+  const commitTypedInput = () => {
+    if (!typingEnabled) return;
+    const parsed = parseDateInput(inputText);
+    if (parsed === "invalid") {
+      setInputText(committedLabel);
+      return;
+    }
+    const next = commit(parsed);
+    setDraft(next);
+    setInputText(formatDateLabel(next, displayFmt));
+  };
+  const openPicker = () => {
+    if (mergedDisabled) return;
+    setDraft(value);
+    setOpen(true);
+  };
+  const closePicker = () => {
+    setOpen(false);
+  };
+  const handleAccept = () => {
+    commit(draft);
+    setInputText(formatDateLabel(draft, displayFmt));
+    closePicker();
+  };
+  const handleCancel = () => {
+    setDraft(value);
+    closePicker();
+  };
+  const handleClear = () => {
+    setDraft(null);
+  };
+  const handleToday = () => {
+    setDraft(dayjs().startOf("day"));
+  };
+  const handleCalendarChange = (d) => {
+    if (!d) {
+      setDraft(null);
+      return;
+    }
+    setDraft(dayjs(d).startOf("day"));
+  };
+  return /* @__PURE__ */ jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: /* @__PURE__ */ jsxs(default2, { sx: { display: "inline-flex", flexDirection: "column", ...sx || {} }, children: [
+    /* @__PURE__ */ jsx(
+      default2,
+      {
+        ref: (el) => {
+          anchorRef.current = el;
+          setAnchorEl(el);
+        },
+        sx: { display: "inline-flex", minWidth: 200 },
+        children: /* @__PURE__ */ jsx(
+          default12,
+          {
+            size: "small",
+            fullWidth: true,
+            label,
+            value: typingEnabled ? inputText : committedLabel,
+            placeholder: displayFmt,
+            disabled: mergedDisabled,
+            required: mergedRequired,
+            error: mergedError,
+            helperText,
+            onClick: typingEnabled ? void 0 : openPicker,
+            onFocus: () => {
+              if (typingEnabled) {
+                setFieldFocused(true);
+              } else {
+                openPicker();
+              }
+            },
+            onBlur: () => {
+              if (!typingEnabled) return;
+              setFieldFocused(false);
+              if (skipCommitOnBlurRef.current) {
+                skipCommitOnBlurRef.current = false;
+                setInputText(committedLabel);
+                return;
+              }
+              commitTypedInput();
+            },
+            onChange: (e) => {
+              if (!typingEnabled) return;
+              setInputText(e.target.value);
+            },
+            onKeyDown: (e) => {
+              if (!typingEnabled) return;
+              if (e.key === "Enter") {
+                e.preventDefault();
+                e.target.blur();
+              }
+              if (e.key === "Escape") {
+                e.preventDefault();
+                skipCommitOnBlurRef.current = true;
+                setInputText(committedLabel);
+                e.target.blur();
+              }
+            },
+            inputProps: {
+              readOnly: !typingEnabled,
+              "aria-label": label,
+              "data-testid": "date-field"
+            },
+            InputProps: {
+              endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
+                IconButton_default,
+                {
+                  size: "small",
+                  disabled: mergedDisabled,
+                  "aria-label": "Choose date",
+                  title: "Choose date",
+                  ...slotProps?.openPickerIcon,
+                  onMouseDown: (e) => {
+                    e.preventDefault();
+                  },
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    if (open) closePicker();
+                    else openPicker();
+                  },
+                  children: /* @__PURE__ */ jsx(default9, { fontSize: "small" })
+                }
+              ) })
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      default4,
+      {
+        open,
+        anchorEl,
+        placement: "bottom-start",
+        style: { zIndex: 1300 },
+        children: /* @__PURE__ */ jsx(default3, { onClickAway: handleCancel, children: /* @__PURE__ */ jsxs(
+          MuiPaper,
+          {
+            elevation: 0,
+            sx: {
+              mt: 1,
+              borderRadius: "20px",
+              background: "var(--mui-palette-background-default)",
+              border: "solid 1px var(--mui-palette-border-1)",
+              overflow: "hidden"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                DateCalendar,
+                {
+                  value: draft,
+                  onChange: handleCalendarChange,
+                  showDaysOutsideCurrentMonth: true
+                }
+              ),
+              /* @__PURE__ */ jsxs(DialogActions, { sx: { px: 1.5, pb: 1, justifyContent: "flex-end", gap: 0.5 }, children: [
+                /* @__PURE__ */ jsx(IconButton_default, { "data-testid": "clear-action-button", onClick: handleClear, title: "clear", children: /* @__PURE__ */ jsx(default11, { fontSize: "small" }) }),
+                /* @__PURE__ */ jsx(IconButton_default, { "data-testid": "today-action-button", onClick: handleToday, title: "today", children: /* @__PURE__ */ jsx(default10, { fontSize: "small" }) }),
+                /* @__PURE__ */ jsx(IconButton_default, { onClick: handleCancel, title: "cancel", children: /* @__PURE__ */ jsx(default6, { fontSize: "small" }) }),
+                /* @__PURE__ */ jsx(IconButton_default, { onClick: handleAccept, title: "accept", children: /* @__PURE__ */ jsx(default5, { fontSize: "small" }) })
+              ] })
+            ]
+          }
+        ) })
+      }
+    )
+  ] }) });
+};
+var MuiXDatePicker_default = MuiXDatePicker;
+
+// src/components/elemental/DatePicker/src/MuiXDateTimePicker.tsx
+import React2 from "react";
+import dayjs2 from "dayjs";
+import customParseFormat2 from "dayjs/plugin/customParseFormat";
+import { LocalizationProvider as LocalizationProvider2 } from "@mui/x-date-pickers/LocalizationProvider";
+import { AdapterDayjs as AdapterDayjs2 } from "@mui/x-date-pickers/AdapterDayjs";
+import { DateCalendar as DateCalendar2 } from "@mui/x-date-pickers/DateCalendar";
+import { MultiSectionDigitalClock } from "@mui/x-date-pickers/MultiSectionDigitalClock";
+import DialogActions2 from "@mui/material/DialogActions";
+import InputAdornment2 from "@mui/material/InputAdornment";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+dayjs2.extend(customParseFormat2);
+var DISPLAY_DATETIME_FMT = "MM/DD/YYYY hh:mm a";
+var DISPLAY_DATETIME_FMT_24 = "MM/DD/YYYY HH:mm";
+var toDayjs2 = (v) => {
+  if (v == null || v === "") return null;
+  const d = dayjs2(v);
+  return d.isValid() ? d : null;
+};
+var formatDateTimeLabel = (v, fmt) => v && v.isValid() ? v.format(fmt) : "";
+var DATE_PARSE_FORMATS2 = [
+  "MM/DD/YYYY",
+  "M/D/YYYY",
+  "YYYY-MM-DD",
+  "MMM D, YYYY",
+  "D MMM YYYY",
+  "MMM D YYYY",
+  "YYYY/MM/DD"
+];
+var MERIDIEM_TIME_FORMATS = [
+  "hh:mm a",
+  "h:mm a",
+  "hh:mma",
+  "h:mma",
+  "hh:mm A",
+  "h:mm A",
+  "hh:mmA",
+  "h:mmA"
+];
+var DATETIME_PARSE_FORMATS = [
+  DISPLAY_DATETIME_FMT,
+  "MM/DD/YYYY h:mm a",
+  "M/D/YYYY hh:mm a",
+  "M/D/YYYY h:mm a",
+  "MM/DD/YYYY hh:mma",
+  "M/D/YYYY h:mma",
+  "MM/DD/YYYY HH:mm",
+  "M/D/YYYY H:mm",
+  "MM/DD/YYYY H:mm",
+  "YYYY-MM-DD HH:mm",
+  "YYYY-MM-DD H:mm",
+  "YYYY-MM-DDTHH:mm",
+  "YYYY-MM-DDTHH:mm:ss",
+  "YYYY-MM-DD HH:mm:ss",
+  "MMM D, YYYY hh:mm a",
+  "MMM D, YYYY h:mm a",
+  "MMM D, YYYY HH:mm"
+];
+var stampDateTime = (datePart, hour, minute) => datePart.hour(hour).minute(minute).second(0).millisecond(0);
+var parseTimeFragment = (raw, opts) => {
+  const trimmed = raw.trim();
+  if (!trimmed) return "invalid";
+  const normalized = trimmed.replace(/\s+/g, " ").replace(/(\d)\s*([ap])\.?m\.?$/i, (_, d, p) => `${d} ${p.toLowerCase()}m`);
+  for (const fmt of MERIDIEM_TIME_FORMATS) {
+    const d = dayjs2(normalized, fmt, true);
+    if (d.isValid()) return { hour: d.hour(), minute: d.minute() };
+  }
+  const bare = normalized.match(/^(\d{1,2})\s*:\s*(\d{2})$/);
+  if (bare) {
+    const hour = Number(bare[1]);
+    const minute = Number(bare[2]);
+    if (minute > 59 || hour > 23) return "invalid";
+    if (!opts.ampm || hour > 12 || hour === 0 && bare[1].length === 2) {
+      return { hour, minute };
+    }
+    let h12 = hour % 12;
+    if (opts.anchorHour != null && opts.anchorHour >= 12) {
+      h12 += 12;
+    }
+    if (hour === 12 && opts.anchorHour == null) {
+      h12 = 12;
+    } else if (hour === 12 && opts.anchorHour != null) {
+      h12 = opts.anchorHour >= 12 ? 12 : 0;
+    }
+    return { hour: h12, minute };
+  }
+  for (const fmt of ["HH:mm", "H:mm"]) {
+    const d = dayjs2(normalized, fmt, true);
+    if (d.isValid()) return { hour: d.hour(), minute: d.minute() };
+  }
+  return "invalid";
+};
+var parseDateFragment = (raw) => {
+  const t = raw.trim();
+  if (!t) return null;
+  for (const fmt of DATE_PARSE_FORMATS2) {
+    const d = dayjs2(t, fmt, true);
+    if (d.isValid()) return d.startOf("day");
+  }
+  const loose = dayjs2(t);
+  if (loose.isValid()) return loose.startOf("day");
+  return "invalid";
+};
+var splitDateAndTime = (raw) => {
+  const s = raw.trim();
+  const isoT = s.match(/^(\d{4}-\d{2}-\d{2})[T\s]+(.+)$/i);
+  if (isoT) return [isoT[1], isoT[2]];
+  const m = s.match(/^(.+?)\s+(\d{1,2}:\d{2}(?:\s*[ap]\.?m\.?)?)$/i);
+  if (m) return [m[1], m[2]];
+  return null;
+};
+var parseDateTimeInput = (raw, opts) => {
+  const trimmed = raw.trim();
+  if (!trimmed) return null;
+  const normalized = trimmed.replace(/\s+/g, " ").replace(/(\d)\s*([ap])\.?m\.?$/i, (_, d, p) => `${d} ${p.toLowerCase()}m`);
+  for (const fmt of DATETIME_PARSE_FORMATS) {
+    const d = dayjs2(normalized, fmt, true);
+    if (d.isValid()) return d.second(0).millisecond(0);
+  }
+  const halves = splitDateAndTime(normalized);
+  if (halves) {
+    const datePart = parseDateFragment(halves[0]);
+    if (datePart === "invalid" || datePart == null) return "invalid";
+    const timePart = parseTimeFragment(halves[1], {
+      ampm: opts.ampm,
+      anchorHour: opts.anchor && opts.anchor.isValid() ? opts.anchor.hour() : null
+    });
+    if (timePart === "invalid") return "invalid";
+    return stampDateTime(datePart, timePart.hour, timePart.minute);
+  }
+  const dateOnly = parseDateFragment(normalized);
+  if (dateOnly !== "invalid" && dateOnly != null) {
+    if (opts.anchor && opts.anchor.isValid()) {
+      return stampDateTime(dateOnly, opts.anchor.hour(), opts.anchor.minute());
+    }
+    return stampDateTime(dateOnly, 0, 0);
+  }
+  const loose = dayjs2(trimmed);
+  if (loose.isValid()) return loose.second(0).millisecond(0);
+  return "invalid";
+};
+var MuiXDateTimePicker = ({
+  value: valueProp,
+  defaultValue,
+  onChange,
+  label = "Pick date & time",
+  disabled,
+  ampm = true,
+  format: formatProp,
+  sx,
+  disableTyping = false,
+  slotProps
+}) => {
+  const displayFmt = formatProp ?? (ampm ? DISPLAY_DATETIME_FMT : DISPLAY_DATETIME_FMT_24);
+  const isControlled = valueProp !== void 0;
+  const [uncontrolled, setUncontrolled] = React2.useState(
+    () => toDayjs2(defaultValue)
+  );
+  const value = isControlled ? toDayjs2(valueProp) : uncontrolled;
+  const [open, setOpen] = React2.useState(false);
+  const [draft, setDraft] = React2.useState(value);
+  const committedLabel = formatDateTimeLabel(value, displayFmt);
+  const [inputText, setInputText] = React2.useState(committedLabel);
+  const [fieldFocused, setFieldFocused] = React2.useState(false);
+  const typingEnabled = !disableTyping;
+  const skipCommitOnBlurRef = React2.useRef(false);
+  const anchorRef = React2.useRef(null);
+  const [anchorEl, setAnchorEl] = React2.useState(null);
+  const tf = slotProps?.textField ?? {};
+  const mergedDisabled = disabled ?? tf.disabled;
+  const mergedRequired = Boolean(tf.required);
+  const mergedError = Boolean(tf.error);
+  const helperText = tf.helperText;
+  const commit = (next) => {
+    if (!isControlled) setUncontrolled(next);
+    onChange?.(next);
+    return next;
+  };
+  React2.useEffect(() => {
+    if (!fieldFocused) setInputText(committedLabel);
+  }, [committedLabel, fieldFocused]);
+  const commitTypedInput = () => {
+    if (!typingEnabled) return;
+    const parsed = parseDateTimeInput(inputText, { ampm, anchor: value });
+    if (parsed === "invalid") {
+      setInputText(committedLabel);
+      return;
+    }
+    const next = commit(parsed);
+    setDraft(next);
+    setInputText(formatDateTimeLabel(next, displayFmt));
+  };
+  const openPicker = () => {
+    if (mergedDisabled) return;
+    setDraft(value);
+    setOpen(true);
+  };
+  const closePicker = () => {
+    setOpen(false);
+  };
+  const handleAccept = () => {
+    commit(draft);
+    setInputText(formatDateTimeLabel(draft, displayFmt));
+    closePicker();
+  };
+  const handleCancel = () => {
+    setDraft(value);
+    closePicker();
+  };
+  const handleClear = () => {
+    setDraft(null);
+  };
+  const handleCalendarChange = (d) => {
+    if (!d) {
+      setDraft(null);
+      return;
+    }
+    if (draft && draft.isValid()) {
+      setDraft(stampDateTime(d, draft.hour(), draft.minute()));
+    } else {
+      const now = dayjs2();
+      setDraft(stampDateTime(d, now.hour(), now.minute()));
+    }
+  };
+  const handleClockChange = (v) => {
+    if (!v) return;
+    const base = draft && draft.isValid() ? draft : dayjs2();
+    setDraft(stampDateTime(base, dayjs2(v).hour(), dayjs2(v).minute()));
+  };
+  const clockViews = ampm ? ["hours", "minutes", "meridiem"] : ["hours", "minutes"];
+  const placeholder = ampm ? "MM/DD/YYYY hh:mm aa" : "MM/DD/YYYY HH:mm";
+  return /* @__PURE__ */ jsx2(LocalizationProvider2, { dateAdapter: AdapterDayjs2, children: /* @__PURE__ */ jsxs2(default2, { sx: { display: "inline-flex", flexDirection: "column", ...sx || {} }, children: [
+    /* @__PURE__ */ jsx2(
+      default2,
+      {
+        ref: (el) => {
+          anchorRef.current = el;
+          setAnchorEl(el);
+        },
+        sx: { display: "inline-flex", minWidth: 260 },
+        children: /* @__PURE__ */ jsx2(
+          default12,
+          {
+            size: "small",
+            fullWidth: true,
+            label,
+            value: typingEnabled ? inputText : committedLabel,
+            placeholder,
+            disabled: mergedDisabled,
+            required: mergedRequired,
+            error: mergedError,
+            helperText,
+            onClick: typingEnabled ? void 0 : openPicker,
+            onFocus: () => {
+              if (typingEnabled) {
+                setFieldFocused(true);
+              } else {
+                openPicker();
+              }
+            },
+            onBlur: () => {
+              if (!typingEnabled) return;
+              setFieldFocused(false);
+              if (skipCommitOnBlurRef.current) {
+                skipCommitOnBlurRef.current = false;
+                setInputText(committedLabel);
+                return;
+              }
+              commitTypedInput();
+            },
+            onChange: (e) => {
+              if (!typingEnabled) return;
+              setInputText(e.target.value);
+            },
+            onKeyDown: (e) => {
+              if (!typingEnabled) return;
+              if (e.key === "Enter") {
+                e.preventDefault();
+                e.target.blur();
+              }
+              if (e.key === "Escape") {
+                e.preventDefault();
+                skipCommitOnBlurRef.current = true;
+                setInputText(committedLabel);
+                e.target.blur();
+              }
+            },
+            inputProps: {
+              readOnly: !typingEnabled,
+              "aria-label": label,
+              "data-testid": "datetime-field"
+            },
+            InputProps: {
+              endAdornment: /* @__PURE__ */ jsx2(InputAdornment2, { position: "end", children: /* @__PURE__ */ jsx2(
+                IconButton_default,
+                {
+                  size: "small",
+                  disabled: mergedDisabled,
+                  "aria-label": "Choose date and time",
+                  title: "Choose date and time",
+                  ...slotProps?.openPickerIcon,
+                  onMouseDown: (e) => {
+                    e.preventDefault();
+                  },
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    if (open) closePicker();
+                    else openPicker();
+                  },
+                  children: /* @__PURE__ */ jsx2(default9, { fontSize: "small" })
+                }
+              ) })
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      default4,
+      {
+        open,
+        anchorEl,
+        placement: "bottom-start",
+        style: { zIndex: 1300 },
+        children: /* @__PURE__ */ jsx2(default3, { onClickAway: handleCancel, children: /* @__PURE__ */ jsxs2(
+          MuiPaper,
+          {
+            elevation: 0,
+            sx: {
+              mt: 1,
+              borderRadius: "20px",
+              background: "var(--mui-palette-background-default)",
+              border: "solid 1px var(--mui-palette-border-1)",
+              overflow: "hidden"
+            },
+            children: [
+              /* @__PURE__ */ jsxs2(
+                default2,
+                {
+                  sx: {
+                    display: "flex",
+                    flexDirection: { xs: "column", sm: "row" },
+                    alignItems: "stretch"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx2(
+                      DateCalendar2,
+                      {
+                        value: draft,
+                        onChange: handleCalendarChange,
+                        showDaysOutsideCurrentMonth: true
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2(
+                      default2,
+                      {
+                        sx: {
+                          px: 1,
+                          pt: 1,
+                          borderLeft: {
+                            sm: "solid 1px var(--mui-palette-border-1)"
+                          },
+                          borderTop: {
+                            xs: "solid 1px var(--mui-palette-border-1)",
+                            sm: "none"
+                          },
+                          display: "flex",
+                          alignItems: "center"
+                        },
+                        children: /* @__PURE__ */ jsx2(
+                          MultiSectionDigitalClock,
+                          {
+                            ampm,
+                            value: draft,
+                            onChange: handleClockChange,
+                            views: [...clockViews]
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs2(DialogActions2, { sx: { px: 1.5, pb: 1, justifyContent: "flex-end", gap: 0.5 }, children: [
+                /* @__PURE__ */ jsx2(IconButton_default, { "data-testid": "clear-action-button", onClick: handleClear, title: "clear", children: /* @__PURE__ */ jsx2(default11, { fontSize: "small" }) }),
+                /* @__PURE__ */ jsx2(IconButton_default, { onClick: handleCancel, title: "cancel", children: /* @__PURE__ */ jsx2(default6, { fontSize: "small" }) }),
+                /* @__PURE__ */ jsx2(IconButton_default, { onClick: handleAccept, title: "accept", children: /* @__PURE__ */ jsx2(default5, { fontSize: "small" }) })
+              ] })
+            ]
+          }
+        ) })
+      }
+    )
+  ] }) });
+};
+var MuiXDateTimePicker_default = MuiXDateTimePicker;
+
+// src/components/elemental/DatePicker/src/MuiXTimePicker.tsx
+import React3 from "react";
+import dayjs3 from "dayjs";
+import customParseFormat3 from "dayjs/plugin/customParseFormat";
+import { LocalizationProvider as LocalizationProvider3 } from "@mui/x-date-pickers/LocalizationProvider";
+import { AdapterDayjs as AdapterDayjs3 } from "@mui/x-date-pickers/AdapterDayjs";
+import { MultiSectionDigitalClock as MultiSectionDigitalClock2 } from "@mui/x-date-pickers/MultiSectionDigitalClock";
+import DialogActions3 from "@mui/material/DialogActions";
+import InputAdornment3 from "@mui/material/InputAdornment";
+import AccessTimeIcon from "@mui/icons-material/AccessTime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+dayjs3.extend(customParseFormat3);
+var DISPLAY_TIME_FMT = "hh:mm a";
+var toDayjs3 = (v) => {
+  if (v == null || v === "") return null;
+  const d = dayjs3(v);
+  return d.isValid() ? d : null;
+};
+var formatTimeLabel = (v, fmt) => v && v.isValid() ? v.format(fmt) : "";
+var MERIDIEM_PARSE_FORMATS = [
+  "hh:mm a",
+  "h:mm a",
+  "hh:mma",
+  "h:mma",
+  "hh:mm A",
+  "h:mm A",
+  "hh:mmA",
+  "h:mmA"
+];
+var stampTime = (anchor, hour, minute) => {
+  const base = anchor && anchor.isValid() ? anchor : dayjs3();
+  return base.hour(hour).minute(minute).second(0).millisecond(0);
+};
+var parseTimeInput = (raw, opts) => {
+  const trimmed = raw.trim();
+  if (!trimmed) return null;
+  const normalized = trimmed.replace(/\s+/g, " ").replace(/(\d)\s*([ap])\.?m\.?$/i, (_, d, p) => `${d} ${p.toLowerCase()}m`);
+  for (const fmt of MERIDIEM_PARSE_FORMATS) {
+    const d = dayjs3(normalized, fmt, true);
+    if (d.isValid()) return stampTime(opts.anchor, d.hour(), d.minute());
+  }
+  const bare = normalized.match(/^(\d{1,2})\s*:\s*(\d{2})$/);
+  if (bare) {
+    const hour = Number(bare[1]);
+    const minute = Number(bare[2]);
+    if (minute > 59 || hour > 23) return "invalid";
+    if (!opts.ampm || hour > 12 || hour === 0 && bare[1].length === 2) {
+      return stampTime(opts.anchor, hour, minute);
+    }
+    let h12 = hour % 12;
+    if (opts.anchor && opts.anchor.isValid() && opts.anchor.hour() >= 12) {
+      h12 += 12;
+    }
+    if (hour === 12 && !(opts.anchor && opts.anchor.isValid())) {
+      h12 = 12;
+    } else if (hour === 12 && opts.anchor && opts.anchor.isValid()) {
+      h12 = opts.anchor.hour() >= 12 ? 12 : 0;
+    }
+    return stampTime(opts.anchor, h12, minute);
+  }
+  for (const fmt of ["HH:mm", "H:mm"]) {
+    const d = dayjs3(normalized, fmt, true);
+    if (d.isValid()) return stampTime(opts.anchor, d.hour(), d.minute());
+  }
+  return "invalid";
+};
+var MuiXTimePicker = ({
+  value: valueProp,
+  defaultValue,
+  onChange,
+  label = "Pick a time",
+  disabled,
+  ampm = true,
+  format: formatProp,
+  sx,
+  disableTyping = false,
+  slotProps
+}) => {
+  const displayFmt = formatProp ?? (ampm ? DISPLAY_TIME_FMT : "HH:mm");
+  const isControlled = valueProp !== void 0;
+  const [uncontrolled, setUncontrolled] = React3.useState(
+    () => toDayjs3(defaultValue)
+  );
+  const value = isControlled ? toDayjs3(valueProp) : uncontrolled;
+  const [open, setOpen] = React3.useState(false);
+  const [draft, setDraft] = React3.useState(value);
+  const committedLabel = formatTimeLabel(value, displayFmt);
+  const [inputText, setInputText] = React3.useState(committedLabel);
+  const [fieldFocused, setFieldFocused] = React3.useState(false);
+  const typingEnabled = !disableTyping;
+  const skipCommitOnBlurRef = React3.useRef(false);
+  const anchorRef = React3.useRef(null);
+  const [anchorEl, setAnchorEl] = React3.useState(null);
+  const tf = slotProps?.textField ?? {};
+  const mergedDisabled = disabled ?? tf.disabled;
+  const mergedRequired = Boolean(tf.required);
+  const mergedError = Boolean(tf.error);
+  const helperText = tf.helperText;
+  const commit = (next) => {
+    if (!isControlled) setUncontrolled(next);
+    onChange?.(next);
+    return next;
+  };
+  React3.useEffect(() => {
+    if (!fieldFocused) setInputText(committedLabel);
+  }, [committedLabel, fieldFocused]);
+  const commitTypedInput = () => {
+    if (!typingEnabled) return;
+    const parsed = parseTimeInput(inputText, { ampm, anchor: value });
+    if (parsed === "invalid") {
+      setInputText(committedLabel);
+      return;
+    }
+    const next = commit(parsed);
+    setDraft(next);
+    setInputText(formatTimeLabel(next, displayFmt));
+  };
+  const openPicker = () => {
+    if (mergedDisabled) return;
+    setDraft(value);
+    setOpen(true);
+  };
+  const closePicker = () => {
+    setOpen(false);
+  };
+  const handleAccept = () => {
+    commit(draft);
+    setInputText(formatTimeLabel(draft, displayFmt));
+    closePicker();
+  };
+  const handleCancel = () => {
+    setDraft(value);
+    closePicker();
+  };
+  const handleClear = () => {
+    setDraft(null);
+  };
+  const clockViews = ampm ? ["hours", "minutes", "meridiem"] : ["hours", "minutes"];
+  return /* @__PURE__ */ jsx3(LocalizationProvider3, { dateAdapter: AdapterDayjs3, children: /* @__PURE__ */ jsxs3(default2, { sx: { display: "inline-flex", flexDirection: "column", ...sx || {} }, children: [
+    /* @__PURE__ */ jsx3(
+      default2,
+      {
+        ref: (el) => {
+          anchorRef.current = el;
+          setAnchorEl(el);
+        },
+        sx: { display: "inline-flex", minWidth: 200 },
+        children: /* @__PURE__ */ jsx3(
+          default12,
+          {
+            size: "small",
+            fullWidth: true,
+            label,
+            value: typingEnabled ? inputText : committedLabel,
+            placeholder: ampm ? "hh:mm aa" : "HH:mm",
+            disabled: mergedDisabled,
+            required: mergedRequired,
+            error: mergedError,
+            helperText,
+            onClick: typingEnabled ? void 0 : openPicker,
+            onFocus: () => {
+              if (typingEnabled) {
+                setFieldFocused(true);
+              } else {
+                openPicker();
+              }
+            },
+            onBlur: () => {
+              if (!typingEnabled) return;
+              setFieldFocused(false);
+              if (skipCommitOnBlurRef.current) {
+                skipCommitOnBlurRef.current = false;
+                setInputText(committedLabel);
+                return;
+              }
+              commitTypedInput();
+            },
+            onChange: (e) => {
+              if (!typingEnabled) return;
+              setInputText(e.target.value);
+            },
+            onKeyDown: (e) => {
+              if (!typingEnabled) return;
+              if (e.key === "Enter") {
+                e.preventDefault();
+                e.target.blur();
+              }
+              if (e.key === "Escape") {
+                e.preventDefault();
+                skipCommitOnBlurRef.current = true;
+                setInputText(committedLabel);
+                e.target.blur();
+              }
+            },
+            inputProps: {
+              readOnly: !typingEnabled,
+              "aria-label": label,
+              "data-testid": "time-field"
+            },
+            InputProps: {
+              endAdornment: /* @__PURE__ */ jsx3(InputAdornment3, { position: "end", children: /* @__PURE__ */ jsx3(
+                IconButton_default,
+                {
+                  size: "small",
+                  disabled: mergedDisabled,
+                  "aria-label": "Choose time",
+                  title: "Choose time",
+                  ...slotProps?.openPickerIcon,
+                  onMouseDown: (e) => {
+                    e.preventDefault();
+                  },
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    if (open) closePicker();
+                    else openPicker();
+                  },
+                  children: /* @__PURE__ */ jsx3(AccessTimeIcon, { fontSize: "small" })
+                }
+              ) })
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      default4,
+      {
+        open,
+        anchorEl,
+        placement: "bottom-start",
+        style: { zIndex: 1300 },
+        children: /* @__PURE__ */ jsx3(default3, { onClickAway: handleCancel, children: /* @__PURE__ */ jsxs3(
+          MuiPaper,
+          {
+            elevation: 0,
+            sx: {
+              mt: 1,
+              borderRadius: "20px",
+              background: "var(--mui-palette-background-default)",
+              border: "solid 1px var(--mui-palette-border-1)",
+              overflow: "hidden"
+            },
+            children: [
+              /* @__PURE__ */ jsx3(default2, { sx: { px: 1, pt: 1 }, children: /* @__PURE__ */ jsx3(
+                MultiSectionDigitalClock2,
+                {
+                  ampm,
+                  value: draft,
+                  onChange: (v) => setDraft(v ? dayjs3(v) : null),
+                  views: [...clockViews]
+                }
+              ) }),
+              /* @__PURE__ */ jsxs3(DialogActions3, { sx: { px: 1.5, pb: 1, justifyContent: "flex-end", gap: 0.5 }, children: [
+                /* @__PURE__ */ jsx3(IconButton_default, { "data-testid": "clear-action-button", onClick: handleClear, title: "clear", children: /* @__PURE__ */ jsx3(default11, { fontSize: "small" }) }),
+                /* @__PURE__ */ jsx3(IconButton_default, { onClick: handleCancel, title: "cancel", children: /* @__PURE__ */ jsx3(default6, { fontSize: "small" }) }),
+                /* @__PURE__ */ jsx3(IconButton_default, { onClick: handleAccept, title: "accept", children: /* @__PURE__ */ jsx3(default5, { fontSize: "small" }) })
+              ] })
+            ]
+          }
+        ) })
+      }
+    )
+  ] }) });
+};
+var MuiXTimePicker_default = MuiXTimePicker;
+
+// src/components/elemental/DatePicker/src/MuiXDateRangePicker.tsx
+import React4 from "react";
+import dayjs4 from "dayjs";
+import customParseFormat4 from "dayjs/plugin/customParseFormat";
+import { LocalizationProvider as LocalizationProvider4 } from "@mui/x-date-pickers/LocalizationProvider";
+import { AdapterDayjs as AdapterDayjs4 } from "@mui/x-date-pickers/AdapterDayjs";
+import { DateCalendar as DateCalendar3 } from "@mui/x-date-pickers/DateCalendar";
+import { PickersDay } from "@mui/x-date-pickers/PickersDay";
+import DialogActions4 from "@mui/material/DialogActions";
+import InputAdornment4 from "@mui/material/InputAdornment";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+dayjs4.extend(customParseFormat4);
+var EMPTY = { start: null, end: null };
+var toDayjs4 = (d) => d ? dayjs4(d) : null;
+var toDate = (d) => {
+  if (!d) return null;
+  return typeof d.toDate === "function" ? d.toDate() : d;
+};
+var orderRange = (next) => {
+  if (next.start && next.end && next.start.getTime() > next.end.getTime()) {
+    return { start: next.end, end: next.start };
+  }
+  return next;
+};
+var DISPLAY_DATE_FMT2 = "MMM D, YYYY";
+var formatDay = (d) => d ? dayjs4(d).format(DISPLAY_DATE_FMT2) : "";
+var formatRangeLabel = (v, startLabel, endLabel) => {
+  const s = formatDay(v.start);
+  const e = formatDay(v.end);
+  if (s && e) return `${s} \u2013 ${e}`;
+  if (s) return `${s} \u2013 ${endLabel}`;
+  if (e) return `${startLabel} \u2013 ${e}`;
+  return "";
+};
+var DATE_PARSE_FORMATS3 = [
+  DISPLAY_DATE_FMT2,
+  "YYYY-MM-DD",
+  "M/D/YYYY",
+  "MM/DD/YYYY",
+  "D MMM YYYY",
+  "MMM D YYYY",
+  "YYYY/MM/DD"
+];
+var parseOneDate = (raw) => {
+  const t = raw.trim();
+  if (!t) return null;
+  for (const fmt of DATE_PARSE_FORMATS3) {
+    const d = dayjs4(t, fmt, true);
+    if (d.isValid()) return d.startOf("day").toDate();
+  }
+  const loose = dayjs4(t);
+  if (loose.isValid()) return loose.startOf("day").toDate();
+  return "invalid";
+};
+var splitRangeHalves = (raw) => {
+  const s = raw.trim();
+  if (!s) return null;
+  if (s.includes("\u2013")) {
+    const i = s.indexOf("\u2013");
+    return [s.slice(0, i), s.slice(i + "\u2013".length)];
+  }
+  const toParts = s.split(/\s+to\s+/i);
+  if (toParts.length === 2) return [toParts[0], toParts[1]];
+  for (const sep of [" - ", " / "]) {
+    if (s.includes(sep)) {
+      const i = s.indexOf(sep);
+      return [s.slice(0, i), s.slice(i + sep.length)];
+    }
+  }
+  const isoSlash = s.match(/^(\d{4}-\d{2}-\d{2})\s*\/\s*(\d{4}-\d{2}-\d{2})$/);
+  if (isoSlash) return [isoSlash[1], isoSlash[2]];
+  const isoHyphen = s.match(/^(\d{4}-\d{2}-\d{2})\s*-\s*(\d{4}-\d{2}-\d{2})$/);
+  if (isoHyphen) return [isoHyphen[1], isoHyphen[2]];
+  return null;
+};
+var isLabelPlaceholder = (part, label) => {
+  const t = part.trim();
+  return !t || t.toLowerCase() === label.trim().toLowerCase();
+};
+var parseRangeInput = (raw, startLabel, endLabel) => {
+  const trimmed = raw.trim();
+  if (!trimmed) return EMPTY;
+  const halves = splitRangeHalves(trimmed);
+  if (!halves) {
+    if (isLabelPlaceholder(trimmed, startLabel) || isLabelPlaceholder(trimmed, endLabel)) {
+      return EMPTY;
+    }
+    const one = parseOneDate(trimmed);
+    if (one === "invalid") return null;
+    return { start: one, end: null };
+  }
+  const [a, b] = halves;
+  let start;
+  let end;
+  if (isLabelPlaceholder(a, startLabel)) {
+    start = null;
+  } else {
+    const p = parseOneDate(a);
+    if (p === "invalid") return null;
+    start = p;
+  }
+  if (isLabelPlaceholder(b, endLabel)) {
+    end = null;
+  } else {
+    const p = parseOneDate(b);
+    if (p === "invalid") return null;
+    end = p;
+  }
+  return orderRange({ start, end });
+};
+var formatDefaultEndorsement = (start, end, unit = "nights") => {
+  const nights = Math.max(0, dayjs4(end).startOf("day").diff(dayjs4(start).startOf("day"), "day"));
+  if (unit === "days") {
+    const days = nights + 1;
+    return days === 1 ? "1 day" : `${days} days`;
+  }
+  return nights === 1 ? "1 night" : `${nights} nights`;
+};
+var resolveEndorsementLabel = (start, end, showEndorsement, endorsement, endorsementUnit = "nights") => {
+  if (!start || !end) return null;
+  if (showEndorsement === false) return null;
+  if (typeof endorsement === "string") return endorsement;
+  if (typeof endorsement === "function") return endorsement({ start, end });
+  return formatDefaultEndorsement(start, end, endorsementUnit);
+};
+var endorsementChipSx = {
+  height: 22,
+  mr: 0.5,
+  maxWidth: 140,
+  borderColor: "var(--mui-palette-border-1)",
+  backgroundColor: "var(--mui-palette-focus-1)",
+  color: "text.secondary",
+  fontWeight: 500,
+  fontSize: "0.75rem",
+  "& .MuiChip-label": { px: 1, overflow: "hidden", textOverflow: "ellipsis" }
+};
+var dayStart = (d) => d.startOf("day");
+var isSameDay = (a, b) => !!(a && b && a.isSame(b, "day"));
+var isBetween = (day, start, end) => {
+  const t = dayStart(day).valueOf();
+  const a = dayStart(start).valueOf();
+  const b = dayStart(end).valueOf();
+  const lo = Math.min(a, b);
+  const hi = Math.max(a, b);
+  return t > lo && t < hi;
+};
+var RANGE_TEXT = "var(--mui-palette-error-main)";
+var RANGE_FILL = "var(--mui-palette-focus-1)";
+var RANGE_FILL_HOVER = "var(--mui-palette-focus-1-hover)";
+var RANGE_QUIET_BORDER = "var(--mui-palette-border-1)";
+var rangeDayFillSx = (isEndpoint, isHoveredCell) => ({
+  color: RANGE_TEXT,
+  // Hovered cell (preview end under cursor) gets the stronger wash; others stay focus-1.
+  backgroundColor: isHoveredCell ? RANGE_FILL_HOVER : RANGE_FILL,
+  fontWeight: isEndpoint ? 600 : void 0,
+  // Soft quiet ring on the day under cursor — readable, no cream primary.
+  ...isHoveredCell ? {
+    boxShadow: `inset 0 0 0 1px ${RANGE_QUIET_BORDER}`
+  } : {},
+  // Per-cell :hover intensify only; focus/selected stay on shared tokens (no primary cream).
+  "&:hover": {
+    color: RANGE_TEXT,
+    backgroundColor: RANGE_FILL_HOVER
+  },
+  "&:focus, &.Mui-focusVisible": {
+    color: RANGE_TEXT,
+    backgroundColor: isHoveredCell ? RANGE_FILL_HOVER : RANGE_FILL
+  },
+  "&.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus": {
+    color: RANGE_TEXT,
+    backgroundColor: isHoveredCell ? RANGE_FILL_HOVER : RANGE_FILL,
+    fontWeight: isEndpoint ? 600 : void 0
+  }
+});
+var RangeDay = React4.forwardRef(function RangeDay2(props, ref) {
+  const { rangeStart, rangeEnd, hoverDay, day, outsideCurrentMonth, sx, ...other } = props;
+  const current = dayjs4(day);
+  const previewEnd = rangeStart && !rangeEnd && hoverDay ? hoverDay : rangeEnd;
+  const isStart = isSameDay(current, rangeStart);
+  const isEnd = isSameDay(current, previewEnd) && !!(rangeEnd || rangeStart && hoverDay);
+  const inBridge = !!rangeStart && !!previewEnd && isBetween(current, rangeStart, previewEnd);
+  const isEndpoint = isStart || isEnd;
+  const showRange = isEndpoint || inBridge;
+  const isHoveredCell = !!hoverDay && isSameDay(current, hoverDay) && !outsideCurrentMonth;
+  let radius = "50%";
+  if (isStart && isEnd) {
+    radius = "50%";
+  } else if (isStart && previewEnd) {
+    radius = "50% 0 0 50%";
+  } else if (isEnd && rangeStart) {
+    radius = "0 50% 50% 0";
+  } else if (inBridge) {
+    radius = 0;
+  }
+  return /* @__PURE__ */ jsx4(
+    PickersDay,
+    {
+      ...other,
+      ref,
+      day,
+      outsideCurrentMonth,
+      selected: false,
+      autoFocus: false,
+      disableMargin: true,
+      sx: [
+        {
+          fontSize: "0.8125rem",
+          // Soft hover for ordinary (non-range) days — quiet focus wash, not primary cream.
+          ...!showRange && !outsideCurrentMonth ? {
+            "&:hover": {
+              backgroundColor: RANGE_FILL
+            }
+          } : {},
+          ...showRange && !outsideCurrentMonth ? {
+            borderRadius: radius,
+            ...rangeDayFillSx(isEndpoint, isHoveredCell)
+          } : {}
+        },
+        ...Array.isArray(sx) ? sx : sx ? [sx] : []
+      ]
+    }
+  );
+});
+var NAV_BTN_SLOT_PX = 30;
+var monthPaneLabelSx = {
+  flex: 1,
+  textAlign: "center",
+  typography: "body1",
+  fontWeight: 500,
+  lineHeight: "40px",
+  userSelect: "none",
+  color: "text.primary"
+};
+var navBtnSlotSx = {
+  width: NAV_BTN_SLOT_PX,
+  flexShrink: 0
+};
+var NullCalendarHeader = () => null;
+var MuiXDateRangePicker = ({
+  value: valueProp,
+  defaultValue,
+  onChange,
+  label,
+  startLabel = "Start",
+  endLabel = "End",
+  disabled,
+  showEndorsement,
+  endorsement,
+  endorsementUnit = "nights",
+  slotProps,
+  sx,
+  disableTyping = false
+}) => {
+  const isControlled = valueProp !== void 0;
+  const [uncontrolled, setUncontrolled] = React4.useState(
+    defaultValue ?? EMPTY
+  );
+  const value = isControlled ? valueProp ?? EMPTY : uncontrolled;
+  const [open, setOpen] = React4.useState(false);
+  const [draft, setDraft] = React4.useState(value);
+  const [selectingEnd, setSelectingEnd] = React4.useState(false);
+  const [hoverDay, setHoverDay] = React4.useState(null);
+  const [leftMonth, setLeftMonth] = React4.useState(
+    () => toDayjs4(value.start) ?? toDayjs4(value.end) ?? dayjs4().startOf("month")
+  );
+  const committedLabel = formatRangeLabel(value, startLabel, endLabel);
+  const [inputText, setInputText] = React4.useState(committedLabel);
+  const [fieldFocused, setFieldFocused] = React4.useState(false);
+  const typingEnabled = !disableTyping;
+  const skipCommitOnBlurRef = React4.useRef(false);
+  const anchorRef = React4.useRef(null);
+  const [anchorEl, setAnchorEl] = React4.useState(null);
+  const fieldLabel = label ?? `${startLabel} \u2013 ${endLabel}`;
+  const startTf = slotProps?.start?.slotProps?.textField ?? {};
+  const endTf = slotProps?.end?.slotProps?.textField ?? {};
+  const mergedDisabled = disabled ?? slotProps?.start?.disabled ?? slotProps?.end?.disabled ?? startTf.disabled ?? endTf.disabled;
+  const mergedRequired = Boolean(startTf.required || endTf.required);
+  const mergedError = Boolean(startTf.error || endTf.error);
+  const commit = (next) => {
+    const ordered = orderRange(next);
+    if (!isControlled) setUncontrolled(ordered);
+    onChange?.(ordered);
+    return ordered;
+  };
+  React4.useEffect(() => {
+    if (!fieldFocused) setInputText(committedLabel);
+  }, [committedLabel, fieldFocused]);
+  const commitTypedInput = () => {
+    if (!typingEnabled) return;
+    const parsed = parseRangeInput(inputText, startLabel, endLabel);
+    if (parsed === null) {
+      setInputText(committedLabel);
+      return;
+    }
+    const ordered = commit(parsed);
+    setDraft(ordered);
+    setSelectingEnd(Boolean(ordered.start && !ordered.end));
+    setInputText(formatRangeLabel(ordered, startLabel, endLabel));
+  };
+  const openPicker = () => {
+    if (mergedDisabled) return;
+    setDraft(value);
+    setSelectingEnd(Boolean(value.start && !value.end));
+    setHoverDay(null);
+    setLeftMonth(toDayjs4(value.start) ?? toDayjs4(value.end) ?? dayjs4().startOf("month"));
+    setOpen(true);
+  };
+  const closePicker = () => {
+    setOpen(false);
+    setHoverDay(null);
+  };
+  const handleAccept = () => {
+    commit(draft);
+    closePicker();
+  };
+  const handleCancel = () => {
+    setDraft(value);
+    closePicker();
+  };
+  const handleClear = () => {
+    setDraft(EMPTY);
+    setSelectingEnd(false);
+    setHoverDay(null);
+  };
+  const handleDayClick = (day) => {
+    if (!day) return;
+    const picked = toDate(day);
+    if (!selectingEnd || !draft.start) {
+      setDraft({ start: picked, end: null });
+      setSelectingEnd(true);
+      setHoverDay(null);
+      return;
+    }
+    setDraft(orderRange({ start: draft.start, end: picked }));
+    setSelectingEnd(false);
+    setHoverDay(null);
+  };
+  const shiftMonths = (delta) => {
+    setLeftMonth((m) => m.add(delta, "month").startOf("month"));
+  };
+  const rangeStart = toDayjs4(draft.start);
+  const rangeEnd = toDayjs4(draft.end);
+  const DaySlot = React4.useCallback(
+    (dayProps) => /* @__PURE__ */ jsx4(
+      RangeDay,
+      {
+        ...dayProps,
+        rangeStart,
+        rangeEnd,
+        hoverDay: selectingEnd ? hoverDay : null,
+        onMouseEnter: (event, d) => {
+          dayProps.onMouseEnter?.(event, d);
+          if (selectingEnd) setHoverDay(dayjs4(d));
+        },
+        onDaySelect: (d) => {
+          handleDayClick(dayjs4(d));
+        }
+      }
+    ),
+    // handleDayClick closes over draft/selectingEnd; recreate when those change.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [rangeStart, rangeEnd, selectingEnd, hoverDay, draft.start]
+  );
+  const rightMonth = leftMonth.add(1, "month");
+  const endorsementStart = open ? draft.start : value.start;
+  const endorsementEnd = open ? selectingEnd && draft.start && hoverDay ? toDate(hoverDay) : selectingEnd ? null : draft.end : value.end;
+  const endorsementLabel = resolveEndorsementLabel(
+    endorsementStart,
+    endorsementEnd,
+    showEndorsement,
+    endorsement,
+    endorsementUnit
+  );
+  return /* @__PURE__ */ jsx4(LocalizationProvider4, { dateAdapter: AdapterDayjs4, children: /* @__PURE__ */ jsxs4(default2, { sx: { display: "inline-flex", flexDirection: "column", ...sx || {} }, children: [
+    /* @__PURE__ */ jsx4(
+      default2,
+      {
+        ref: (el) => {
+          anchorRef.current = el;
+          setAnchorEl(el);
+        },
+        sx: { display: "inline-flex", minWidth: 280 },
+        children: /* @__PURE__ */ jsx4(
+          default12,
+          {
+            size: "small",
+            fullWidth: true,
+            label: fieldLabel,
+            value: typingEnabled ? inputText : committedLabel,
+            placeholder: `${startLabel} \u2013 ${endLabel}`,
+            disabled: mergedDisabled,
+            required: mergedRequired,
+            error: mergedError,
+            onClick: typingEnabled ? void 0 : openPicker,
+            onFocus: () => {
+              if (typingEnabled) {
+                setFieldFocused(true);
+              } else {
+                openPicker();
+              }
+            },
+            onBlur: () => {
+              if (!typingEnabled) return;
+              setFieldFocused(false);
+              if (skipCommitOnBlurRef.current) {
+                skipCommitOnBlurRef.current = false;
+                setInputText(committedLabel);
+                return;
+              }
+              commitTypedInput();
+            },
+            onChange: (e) => {
+              if (!typingEnabled) return;
+              setInputText(e.target.value);
+            },
+            onKeyDown: (e) => {
+              if (!typingEnabled) return;
+              if (e.key === "Enter") {
+                e.preventDefault();
+                e.target.blur();
+              }
+              if (e.key === "Escape") {
+                e.preventDefault();
+                skipCommitOnBlurRef.current = true;
+                setInputText(committedLabel);
+                e.target.blur();
+              }
+            },
+            inputProps: {
+              readOnly: !typingEnabled,
+              "aria-label": fieldLabel,
+              "data-testid": "date-range-field"
+            },
+            InputProps: {
+              endAdornment: /* @__PURE__ */ jsxs4(InputAdornment4, { position: "end", sx: { gap: 0.25 }, children: [
+                endorsementLabel ? /* @__PURE__ */ jsx4(
+                  default2,
+                  {
+                    component: "span",
+                    onMouseDown: (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                    },
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      openPicker();
+                    },
+                    sx: { display: "inline-flex", cursor: "pointer" },
+                    children: /* @__PURE__ */ jsx4(
+                      Chip,
+                      {
+                        size: "small",
+                        variant: "outlined",
+                        label: endorsementLabel,
+                        "data-testid": "date-range-endorsement",
+                        "aria-label": endorsementLabel,
+                        sx: endorsementChipSx
+                      }
+                    )
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx4(
+                  IconButton_default,
+                  {
+                    size: "small",
+                    disabled: mergedDisabled,
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      if (open) closePicker();
+                      else openPicker();
+                    },
+                    "aria-label": "Choose date range",
+                    title: "Choose date range",
+                    children: /* @__PURE__ */ jsx4(default9, { fontSize: "small" })
+                  }
+                )
+              ] })
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      default4,
+      {
+        open,
+        anchorEl,
+        placement: "bottom-start",
+        style: { zIndex: 1300 },
+        children: /* @__PURE__ */ jsx4(default3, { onClickAway: handleCancel, children: /* @__PURE__ */ jsxs4(
+          MuiPaper,
+          {
+            elevation: 0,
+            sx: {
+              mt: 1,
+              borderRadius: "20px",
+              background: "var(--mui-palette-background-default)",
+              border: "solid 1px var(--mui-palette-border-1)",
+              overflow: "hidden"
+            },
+            children: [
+              /* @__PURE__ */ jsxs4(
+                default2,
+                {
+                  sx: {
+                    display: "flex",
+                    alignItems: "stretch",
+                    gap: 0,
+                    px: 1,
+                    pt: 1,
+                    flexWrap: { xs: "wrap", sm: "nowrap" }
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs4(default2, { sx: { width: 300 }, children: [
+                      /* @__PURE__ */ jsxs4(
+                        default2,
+                        {
+                          sx: {
+                            display: "flex",
+                            alignItems: "center",
+                            minHeight: 40,
+                            px: 0.5
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx4(
+                              IconButton_default,
+                              {
+                                size: "small",
+                                onClick: () => shiftMonths(-1),
+                                "aria-label": "Previous month",
+                                title: "Previous month",
+                                children: /* @__PURE__ */ jsx4(default7, { fontSize: "small" })
+                              }
+                            ),
+                            /* @__PURE__ */ jsx4(default2, { sx: monthPaneLabelSx, "aria-live": "polite", children: leftMonth.format("MMMM YYYY") }),
+                            /* @__PURE__ */ jsx4(default2, { sx: navBtnSlotSx, "aria-hidden": true })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx4(
+                        DateCalendar3,
+                        {
+                          value: null,
+                          referenceDate: leftMonth,
+                          onMonthChange: (m) => setLeftMonth(dayjs4(m).startOf("month")),
+                          showDaysOutsideCurrentMonth: true,
+                          slots: { day: DaySlot, calendarHeader: NullCalendarHeader },
+                          sx: { width: 300 }
+                        },
+                        leftMonth.format("YYYY-MM")
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx4(
+                      default2,
+                      {
+                        sx: {
+                          width: "1px",
+                          alignSelf: "stretch",
+                          bgcolor: "var(--mui-palette-border-1)",
+                          display: { xs: "none", sm: "block" }
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs4(default2, { sx: { width: 300 }, children: [
+                      /* @__PURE__ */ jsxs4(
+                        default2,
+                        {
+                          sx: {
+                            display: "flex",
+                            alignItems: "center",
+                            minHeight: 40,
+                            px: 0.5
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx4(default2, { sx: navBtnSlotSx, "aria-hidden": true }),
+                            /* @__PURE__ */ jsx4(default2, { sx: monthPaneLabelSx, "aria-live": "polite", children: rightMonth.format("MMMM YYYY") }),
+                            /* @__PURE__ */ jsx4(
+                              IconButton_default,
+                              {
+                                size: "small",
+                                onClick: () => shiftMonths(1),
+                                "aria-label": "Next month",
+                                title: "Next month",
+                                children: /* @__PURE__ */ jsx4(default8, { fontSize: "small" })
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx4(
+                        DateCalendar3,
+                        {
+                          value: null,
+                          referenceDate: rightMonth,
+                          onMonthChange: (m) => setLeftMonth(dayjs4(m).subtract(1, "month").startOf("month")),
+                          showDaysOutsideCurrentMonth: true,
+                          slots: { day: DaySlot, calendarHeader: NullCalendarHeader },
+                          sx: { width: 300 }
+                        },
+                        rightMonth.format("YYYY-MM")
+                      )
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs4(DialogActions4, { sx: { px: 1.5, pb: 1, justifyContent: "flex-end", gap: 0.5 }, children: [
+                /* @__PURE__ */ jsx4(IconButton_default, { "data-testid": "clear-action-button", onClick: handleClear, title: "clear", children: /* @__PURE__ */ jsx4(default11, { fontSize: "small" }) }),
+                /* @__PURE__ */ jsx4(IconButton_default, { onClick: handleCancel, title: "cancel", children: /* @__PURE__ */ jsx4(default6, { fontSize: "small" }) }),
+                /* @__PURE__ */ jsx4(IconButton_default, { onClick: handleAccept, title: "accept", children: /* @__PURE__ */ jsx4(default5, { fontSize: "small" }) })
+              ] })
+            ]
+          }
+        ) })
+      }
+    )
+  ] }) });
+};
+var MuiXDateRangePicker_default = MuiXDateRangePicker;
+
+// src/components/elemental/DatePicker/src/theme.ts
+var datePickerTheme = {
+  defaultProps: {
+    slotProps: {
+      popper: {
+        sx: {
+          "& .MuiPaper-root": {
+            borderRadius: "20px",
+            background: "var(--mui-palette-background-default)",
+            border: "solid 1px var(--mui-palette-border-1)"
+          }
+        }
+      }
+    }
+  }
+};
+var dateTimePickerTheme = {
+  defaultProps: {
+    slotProps: {
+      popper: {
+        sx: {
+          "& .MuiPaper-root": {
+            borderRadius: "20px",
+            background: "var(--mui-palette-background-default)",
+            border: "solid 1px var(--mui-palette-border-1)"
+          }
+        }
+      }
+    }
+  }
+};
+var timePickerTheme = {
+  defaultProps: {
+    slotProps: {
+      popper: {
+        sx: {
+          "& .MuiPaper-root": {
+            borderRadius: "20px",
+            background: "var(--mui-palette-background-default)",
+            border: "solid 1px var(--mui-palette-border-1)"
+          }
+        }
+      }
+    }
+  }
+};
+var dateCalendarTheme = {
+  defaultProps: {
+    slotProps: {}
+  },
+  styleOverrides: {
+    root: {
+      borderRadius: "20px"
+    }
+  }
+};
+var pickersCalendarHeaderTheme = {
+  defaultProps: {
+    slotProps: {
+      previousIconButton: { size: "small" },
+      nextIconButton: { size: "small" },
+      switchViewIcon: { fontSize: "small" }
+    }
+  },
+  styleOverrides: {
+    root: {},
+    label: {}
+  }
+};
+var pickersDayTheme = {
+  defaultProps: {},
+  styleOverrides: {
+    root: {
+      "&.Mui-selected.MuiButtonBase-root": {
+        color: "var(--mui-palette-error-main)",
+        backgroundColor: "var(--mui-palette-focus-1)",
+        "&:hover": {
+          backgroundColor: "var(--mui-palette-focus-1-hover)"
+        }
+      },
+      "&.MuiPickersDay-today": {
+        borderColor: "var(--mui-palette-focus-1)"
+      }
+    },
+    dayOutsideMonth: {
+      color: "var(--mui-palette-text-disabled)"
+    }
+  }
+};
+var multiSectionDigitalClockTheme = {
+  defaultProps: {
+    slotProps: {
+      digitalClockSectionItem: {
+        dense: true
+      }
+    }
+  },
+  styleOverrides: {
+    root: {
+      "&": { paddingRight: "4px" },
+      "& .MuiMultiSectionDigitalClockSection-root": {
+        scrollbarWidth: "inherit",
+        "& .MuiMultiSectionDigitalClockSection-item, & li": {
+          borderRadius: "var(--mui-shape-borderRadius)",
+          position: "relative",
+          overflow: "hidden",
+          "&::before": {
+            borderRadius: "var(--mui-shape-borderRadius)",
+            content: "none",
+            display: "none",
+            backgroundColor: "transparent",
+            width: 0,
+            height: 0
+          },
+          "&.Mui-selected": {
+            color: "var(--mui-palette-error-main)",
+            backgroundColor: "var(--mui-palette-focus-1)",
+            "&:hover, &:focus-visible": {
+              backgroundColor: "var(--mui-palette-focus-1-hover)"
+            },
+            "&::before": {
+              content: "none",
+              display: "none",
+              backgroundColor: "transparent"
+            }
+          }
+        }
+      }
+    }
+  }
+};
+var pickersInputBaseTheme = {
+  styleOverrides: {
+    root: {
+      "&.Mui-focused:not(.Mui-error) fieldset.MuiPickersOutlinedInput-notchedOutline": {
+        borderColor: "var(--mui-palette-text-secondary)"
+      },
+      "&.MuiPickersInputBase-root": {
+        "& .MuiButtonBase-root": {
+          "& > svg": {
+            fontSize: "1.25rem"
+          }
+        }
+      }
+    }
+  }
+};
+
+export {
+  MuiXDatePicker_default,
+  MuiXDateTimePicker_default,
+  MuiXTimePicker_default,
+  MuiXDateRangePicker_default,
+  datePickerTheme,
+  dateTimePickerTheme,
+  timePickerTheme,
+  dateCalendarTheme,
+  pickersCalendarHeaderTheme,
+  pickersDayTheme,
+  multiSectionDigitalClockTheme,
+  pickersInputBaseTheme
+};
+//# sourceMappingURL=chunk-XAJAMVAG.mjs.map