@startdownnotez404/ui 1.3.5 → 1.3.6

package/dist/datePicker.js

@@ -31,28 +31,102 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var DatePicker_exports = {};
 __export(DatePicker_exports, {
   MuiXDatePicker: () => MuiXDatePicker_default,
+  MuiXDateRangePicker: () => MuiXDateRangePicker_default,
   MuiXDateTimePicker: () => MuiXDateTimePicker_default,
+  MuiXTimePicker: () => MuiXTimePicker_default,
   dateCalendarTheme: () => dateCalendarTheme,
   datePickerTheme: () => datePickerTheme,
   dateTimePickerTheme: () => dateTimePickerTheme,
   multiSectionDigitalClockTheme: () => multiSectionDigitalClockTheme,
   pickersCalendarHeaderTheme: () => pickersCalendarHeaderTheme,
   pickersDayTheme: () => pickersDayTheme,
-  pickersInputBaseTheme: () => pickersInputBaseTheme
+  pickersInputBaseTheme: () => pickersInputBaseTheme,
+  timePickerTheme: () => timePickerTheme
 });
 module.exports = __toCommonJS(DatePicker_exports);
 
 // src/components/elemental/DatePicker/src/MuiXDatePicker.tsx
+var import_react2 = __toESM(require("react"));
+var import_dayjs = __toESM(require("dayjs"));
+var import_customParseFormat = __toESM(require("dayjs/plugin/customParseFormat"));
 var import_LocalizationProvider = require("@mui/x-date-pickers/LocalizationProvider");
-var import_DatePicker = require("@mui/x-date-pickers/DatePicker");
 var import_AdapterDayjs = require("@mui/x-date-pickers/AdapterDayjs");
-
-// src/components/elemental/DatePicker/src/_shared.tsx
-var import_react2 = __toESM(require("react"));
-var import_PickersTextField = require("@mui/x-date-pickers/PickersTextField");
-var import_hooks = require("@mui/x-date-pickers/hooks");
-var import_styles = require("@mui/material/styles");
+var import_DateCalendar = require("@mui/x-date-pickers/DateCalendar");
 var import_DialogActions = __toESM(require("@mui/material/DialogActions"));
+var import_InputAdornment = __toESM(require("@mui/material/InputAdornment"));
+
+// src/components/elemental/Box/src/index.ts
+var import_Box = __toESM(require("@mui/material/Box"));
+var import_Stack = __toESM(require("@mui/material/Stack"));
+var import_Grid = __toESM(require("@mui/material/Grid"));
+
+// src/components/elemental/Paper/src/Paper/Paper.tsx
+var import_Paper = __toESM(require("@mui/material/Paper"));
+var import_jsx_runtime = require("react/jsx-runtime");
+function MuiPaper(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Paper.default, { ...props });
+}
+
+// src/components/elemental/Overlay/src/index.ts
+var import_ClickAwayListener = __toESM(require("@mui/material/ClickAwayListener"));
+var import_Popper = __toESM(require("@mui/material/Popper"));
+
+// src/components/elemental/Button/src/IconButton/IconButton.tsx
+var import_react = require("react");
+var import_IconButton = __toESM(require("@mui/material/IconButton"));
+
+// src/components/elemental/Tooltip/src/Tooltip/index.ts
+var import_Tooltip = __toESM(require("@mui/material/Tooltip"));
+
+// src/components/elemental/Button/src/IconButton/IconButton.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var IconButton = (0, import_react.forwardRef)(({
+  title = "",
+  children,
+  color,
+  size,
+  slotProps,
+  selected,
+  className,
+  ...props
+}, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_Tooltip.default,
+    {
+      title,
+      slotProps: {
+        popper: {
+          sx: {
+            textTransform: "capitalize"
+          }
+        },
+        ...slotProps?.tooltip
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Box.default, { component: "span", sx: { width: "fit-content" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_IconButton.default,
+        {
+          ref,
+          color,
+          size,
+          className: [className, selected ? "Mui-selected" : ""].filter(Boolean).join(" "),
+          ...props,
+          children
+        }
+      ) })
+    }
+  );
+});
+var IconButton_default = IconButton;
+
+// src/components/elemental/Chip/src/Chip/Chip.tsx
+var import_Chip = __toESM(require("@mui/material/Chip"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Chip({ color = "default", ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Chip.default, { ...props, color });
+}
+
+// src/components/elemental/Input/src/TextField/index.ts
+var import_TextField = __toESM(require("@mui/material/TextField"));
 
 // src/components/Icons/MuiIcon/index.ts
 var import_ArrowRightAlt = __toESM(require("@mui/icons-material/ArrowRightAlt"));
@@ -202,154 +276,1525 @@ var import_AutoAwesomeRounded = __toESM(require("@mui/icons-material/AutoAwesome
 var import_ErrorOutlineOutlined = __toESM(require("@mui/icons-material/ErrorOutlineOutlined"));
 var import_Download = __toESM(require("@mui/icons-material/Download"));
 
-// src/components/elemental/Box/src/index.ts
-var import_Box = __toESM(require("@mui/material/Box"));
-var import_Stack = __toESM(require("@mui/material/Stack"));
-var import_Grid = __toESM(require("@mui/material/Grid"));
-
-// src/components/elemental/Button/src/IconButton/IconButton.tsx
-var import_react = require("react");
-var import_IconButton = __toESM(require("@mui/material/IconButton"));
-
-// src/components/elemental/Tooltip/src/Tooltip/index.ts
-var import_Tooltip = __toESM(require("@mui/material/Tooltip"));
-
-// src/components/elemental/Button/src/IconButton/IconButton.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var IconButton = (0, import_react.forwardRef)(({
-  title = "",
-  children,
-  color,
-  size,
-  slotProps,
-  selected,
-  className,
-  ...props
-}, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_Tooltip.default,
-    {
-      title,
-      slotProps: {
-        popper: {
-          sx: {
-            textTransform: "capitalize"
-          }
+// src/components/elemental/DatePicker/src/MuiXDatePicker.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+import_dayjs.default.extend(import_customParseFormat.default);
+var DISPLAY_DATE_FMT = "MM/DD/YYYY";
+var toDayjs = (v) => {
+  if (v == null || v === "") return null;
+  const d = (0, import_dayjs.default)(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 = (0, import_dayjs.default)(trimmed, fmt, true);
+    if (d.isValid()) return d.startOf("day");
+  }
+  const loose = (0, import_dayjs.default)(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] = import_react2.default.useState(
+    () => toDayjs(defaultValue)
+  );
+  const value = isControlled ? toDayjs(valueProp) : uncontrolled;
+  const [open, setOpen] = import_react2.default.useState(false);
+  const [draft, setDraft] = import_react2.default.useState(value);
+  const committedLabel = formatDateLabel(value, displayFmt);
+  const [inputText, setInputText] = import_react2.default.useState(committedLabel);
+  const [fieldFocused, setFieldFocused] = import_react2.default.useState(false);
+  const typingEnabled = !disableTyping;
+  const skipCommitOnBlurRef = import_react2.default.useRef(false);
+  const anchorRef = import_react2.default.useRef(null);
+  const [anchorEl, setAnchorEl] = import_react2.default.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;
+  };
+  import_react2.default.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((0, import_dayjs.default)().startOf("day"));
+  };
+  const handleCalendarChange = (d) => {
+    if (!d) {
+      setDraft(null);
+      return;
+    }
+    setDraft((0, import_dayjs.default)(d).startOf("day"));
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_LocalizationProvider.LocalizationProvider, { dateAdapter: import_AdapterDayjs.AdapterDayjs, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_Box.default, { sx: { display: "inline-flex", flexDirection: "column", ...sx || {} }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_Box.default,
+      {
+        ref: (el) => {
+          anchorRef.current = el;
+          setAnchorEl(el);
         },
-        ...slotProps?.tooltip
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Box.default, { component: "span", sx: { width: "fit-content" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_IconButton.default,
-        {
-          ref,
-          color,
-          size,
-          className: [className, selected ? "Mui-selected" : ""].filter(Boolean).join(" "),
-          ...props,
-          children
-        }
-      ) })
+        sx: { display: "inline-flex", minWidth: 200 },
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_TextField.default,
+          {
+            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__ */ (0, import_jsx_runtime4.jsx)(import_InputAdornment.default, { position: "end", children: /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)(import_CalendarToday.default, { fontSize: "small" })
+                }
+              ) })
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_Popper.default,
+      {
+        open,
+        anchorEl,
+        placement: "bottom-start",
+        style: { zIndex: 1300 },
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ClickAwayListener.default, { onClickAway: handleCancel, children: /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)(
+                import_DateCalendar.DateCalendar,
+                {
+                  value: draft,
+                  onChange: handleCalendarChange,
+                  showDaysOutsideCurrentMonth: true
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_DialogActions.default, { sx: { px: 1.5, pb: 1, justifyContent: "flex-end", gap: 0.5 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconButton_default, { "data-testid": "clear-action-button", onClick: handleClear, title: "clear", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_DeleteForever2.default, { fontSize: "small" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconButton_default, { "data-testid": "today-action-button", onClick: handleToday, title: "today", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_Today.default, { fontSize: "small" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconButton_default, { onClick: handleCancel, title: "cancel", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_Close2.default, { fontSize: "small" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconButton_default, { onClick: handleAccept, title: "accept", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_Check.default, { fontSize: "small" }) })
+              ] })
+            ]
+          }
+        ) })
+      }
+    )
+  ] }) });
+};
+var MuiXDatePicker_default = MuiXDatePicker;
+
+// src/components/elemental/DatePicker/src/MuiXDateTimePicker.tsx
+var import_react3 = __toESM(require("react"));
+var import_dayjs2 = __toESM(require("dayjs"));
+var import_customParseFormat2 = __toESM(require("dayjs/plugin/customParseFormat"));
+var import_LocalizationProvider2 = require("@mui/x-date-pickers/LocalizationProvider");
+var import_AdapterDayjs2 = require("@mui/x-date-pickers/AdapterDayjs");
+var import_DateCalendar2 = require("@mui/x-date-pickers/DateCalendar");
+var import_MultiSectionDigitalClock = require("@mui/x-date-pickers/MultiSectionDigitalClock");
+var import_DialogActions2 = __toESM(require("@mui/material/DialogActions"));
+var import_InputAdornment2 = __toESM(require("@mui/material/InputAdornment"));
+var import_jsx_runtime5 = require("react/jsx-runtime");
+import_dayjs2.default.extend(import_customParseFormat2.default);
+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 = (0, import_dayjs2.default)(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 = (0, import_dayjs2.default)(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 = (0, import_dayjs2.default)(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 = (0, import_dayjs2.default)(t, fmt, true);
+    if (d.isValid()) return d.startOf("day");
+  }
+  const loose = (0, import_dayjs2.default)(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 = (0, import_dayjs2.default)(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 = (0, import_dayjs2.default)(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] = import_react3.default.useState(
+    () => toDayjs2(defaultValue)
   );
-});
-var IconButton_default = IconButton;
+  const value = isControlled ? toDayjs2(valueProp) : uncontrolled;
+  const [open, setOpen] = import_react3.default.useState(false);
+  const [draft, setDraft] = import_react3.default.useState(value);
+  const committedLabel = formatDateTimeLabel(value, displayFmt);
+  const [inputText, setInputText] = import_react3.default.useState(committedLabel);
+  const [fieldFocused, setFieldFocused] = import_react3.default.useState(false);
+  const typingEnabled = !disableTyping;
+  const skipCommitOnBlurRef = import_react3.default.useRef(false);
+  const anchorRef = import_react3.default.useRef(null);
+  const [anchorEl, setAnchorEl] = import_react3.default.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;
+  };
+  import_react3.default.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 = (0, import_dayjs2.default)();
+      setDraft(stampDateTime(d, now.hour(), now.minute()));
+    }
+  };
+  const handleClockChange = (v) => {
+    if (!v) return;
+    const base = draft && draft.isValid() ? draft : (0, import_dayjs2.default)();
+    setDraft(stampDateTime(base, (0, import_dayjs2.default)(v).hour(), (0, import_dayjs2.default)(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__ */ (0, import_jsx_runtime5.jsx)(import_LocalizationProvider2.LocalizationProvider, { dateAdapter: import_AdapterDayjs2.AdapterDayjs, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_Box.default, { sx: { display: "inline-flex", flexDirection: "column", ...sx || {} }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_Box.default,
+      {
+        ref: (el) => {
+          anchorRef.current = el;
+          setAnchorEl(el);
+        },
+        sx: { display: "inline-flex", minWidth: 260 },
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          import_TextField.default,
+          {
+            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__ */ (0, import_jsx_runtime5.jsx)(import_InputAdornment2.default, { position: "end", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                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__ */ (0, import_jsx_runtime5.jsx)(import_CalendarToday.default, { fontSize: "small" })
+                }
+              ) })
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_Popper.default,
+      {
+        open,
+        anchorEl,
+        placement: "bottom-start",
+        style: { zIndex: 1300 },
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_ClickAwayListener.default, { onClickAway: handleCancel, children: /* @__PURE__ */ (0, import_jsx_runtime5.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__ */ (0, import_jsx_runtime5.jsxs)(
+                import_Box.default,
+                {
+                  sx: {
+                    display: "flex",
+                    flexDirection: { xs: "column", sm: "row" },
+                    alignItems: "stretch"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                      import_DateCalendar2.DateCalendar,
+                      {
+                        value: draft,
+                        onChange: handleCalendarChange,
+                        showDaysOutsideCurrentMonth: true
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                      import_Box.default,
+                      {
+                        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__ */ (0, import_jsx_runtime5.jsx)(
+                          import_MultiSectionDigitalClock.MultiSectionDigitalClock,
+                          {
+                            ampm,
+                            value: draft,
+                            onChange: handleClockChange,
+                            views: [...clockViews]
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_DialogActions2.default, { sx: { px: 1.5, pb: 1, justifyContent: "flex-end", gap: 0.5 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconButton_default, { "data-testid": "clear-action-button", onClick: handleClear, title: "clear", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_DeleteForever2.default, { fontSize: "small" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconButton_default, { onClick: handleCancel, title: "cancel", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Close2.default, { fontSize: "small" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconButton_default, { onClick: handleAccept, title: "accept", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Check.default, { fontSize: "small" }) })
+              ] })
+            ]
+          }
+        ) })
+      }
+    )
+  ] }) });
+};
+var MuiXDateTimePicker_default = MuiXDateTimePicker;
 
-// src/components/elemental/DatePicker/src/_shared.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var MyPickersTextField = import_react2.default.forwardRef(
-  (props, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_PickersTextField.PickersTextField, { size: "small", ...props, ref })
-);
-var PickersActionBarRoot = (0, import_styles.styled)(import_DialogActions.default, {
-  name: "MuiPickersLayout",
-  slot: "ActionBar"
-})({});
-var MyActionBar = (props) => {
-  const { actions, ...other } = props;
-  const {
-    clearValue,
-    setValueToToday,
-    acceptValueChanges,
-    cancelValueChanges,
-    goToNextStep,
-    hasNextStep
-  } = (0, import_hooks.usePickerContext)();
-  if (actions == null || actions.length === 0) {
-    return null;
+// src/components/elemental/DatePicker/src/MuiXTimePicker.tsx
+var import_react4 = __toESM(require("react"));
+var import_dayjs3 = __toESM(require("dayjs"));
+var import_customParseFormat3 = __toESM(require("dayjs/plugin/customParseFormat"));
+var import_LocalizationProvider3 = require("@mui/x-date-pickers/LocalizationProvider");
+var import_AdapterDayjs3 = require("@mui/x-date-pickers/AdapterDayjs");
+var import_MultiSectionDigitalClock2 = require("@mui/x-date-pickers/MultiSectionDigitalClock");
+var import_DialogActions3 = __toESM(require("@mui/material/DialogActions"));
+var import_InputAdornment3 = __toESM(require("@mui/material/InputAdornment"));
+var import_AccessTime = __toESM(require("@mui/icons-material/AccessTime"));
+var import_jsx_runtime6 = require("react/jsx-runtime");
+import_dayjs3.default.extend(import_customParseFormat3.default);
+var DISPLAY_TIME_FMT = "hh:mm a";
+var toDayjs3 = (v) => {
+  if (v == null || v === "") return null;
+  const d = (0, import_dayjs3.default)(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 : (0, import_dayjs3.default)();
+  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 = (0, import_dayjs3.default)(normalized, fmt, true);
+    if (d.isValid()) return stampTime(opts.anchor, d.hour(), d.minute());
   }
-  const buttons = actions.map((actionType) => {
-    switch (actionType) {
-      case "clear":
-        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IconButton_default, { "data-testid": "clear-action-button", onClick: clearValue, title: "clear", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_DeleteForever2.default, { fontSize: "small" }) }, actionType);
-      case "cancel":
-        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IconButton_default, { onClick: cancelValueChanges, title: "cancel", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Close2.default, { fontSize: "small" }) }, actionType);
-      case "accept":
-        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IconButton_default, { onClick: acceptValueChanges, title: "accept", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Check.default, { fontSize: "small" }) }, actionType);
-      case "today":
-        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IconButton_default, { "data-testid": "today-action-button", onClick: setValueToToday, title: "today", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Today.default, { fontSize: "small" }) }, actionType);
-      case "next":
-        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IconButton_default, { onClick: goToNextStep, title: "next", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_NavigateNext.default, { fontSize: "small" }) }, actionType);
-      case "nextOrAccept":
-        if (hasNextStep) {
-          return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IconButton_default, { onClick: goToNextStep, title: "next", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_NavigateNext.default, { fontSize: "small" }) }, actionType);
-        }
-        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IconButton_default, { onClick: acceptValueChanges, title: "accept", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Check.default, { fontSize: "small" }) }, actionType);
-      default:
-        return null;
+  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;
     }
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PickersActionBarRoot, { ...other, children: buttons });
+    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 = (0, import_dayjs3.default)(normalized, fmt, true);
+    if (d.isValid()) return stampTime(opts.anchor, d.hour(), d.minute());
+  }
+  return "invalid";
 };
-
-// src/components/elemental/DatePicker/src/MuiXDatePicker.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var MuiXDatePicker = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_LocalizationProvider.LocalizationProvider, { dateAdapter: import_AdapterDayjs.AdapterDayjs, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_DatePicker.DatePicker,
-    {
-      showDaysOutsideCurrentMonth: true,
-      ...props,
-      slotProps: {
-        actionBar: {
-          actions: ["clear", "today", "cancel", "accept"]
+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] = import_react4.default.useState(
+    () => toDayjs3(defaultValue)
+  );
+  const value = isControlled ? toDayjs3(valueProp) : uncontrolled;
+  const [open, setOpen] = import_react4.default.useState(false);
+  const [draft, setDraft] = import_react4.default.useState(value);
+  const committedLabel = formatTimeLabel(value, displayFmt);
+  const [inputText, setInputText] = import_react4.default.useState(committedLabel);
+  const [fieldFocused, setFieldFocused] = import_react4.default.useState(false);
+  const typingEnabled = !disableTyping;
+  const skipCommitOnBlurRef = import_react4.default.useRef(false);
+  const anchorRef = import_react4.default.useRef(null);
+  const [anchorEl, setAnchorEl] = import_react4.default.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;
+  };
+  import_react4.default.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__ */ (0, import_jsx_runtime6.jsx)(import_LocalizationProvider3.LocalizationProvider, { dateAdapter: import_AdapterDayjs3.AdapterDayjs, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_Box.default, { sx: { display: "inline-flex", flexDirection: "column", ...sx || {} }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_Box.default,
+      {
+        ref: (el) => {
+          anchorRef.current = el;
+          setAnchorEl(el);
         },
-        ...props.slotProps || {}
-      },
-      slots: {
-        actionBar: MyActionBar,
-        textField: MyPickersTextField,
-        ...props.slots || {}
+        sx: { display: "inline-flex", minWidth: 200 },
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          import_TextField.default,
+          {
+            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__ */ (0, import_jsx_runtime6.jsx)(import_InputAdornment3.default, { position: "end", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                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__ */ (0, import_jsx_runtime6.jsx)(import_AccessTime.default, { fontSize: "small" })
+                }
+              ) })
+            }
+          }
+        )
       }
-    }
-  ) });
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_Popper.default,
+      {
+        open,
+        anchorEl,
+        placement: "bottom-start",
+        style: { zIndex: 1300 },
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ClickAwayListener.default, { onClickAway: handleCancel, children: /* @__PURE__ */ (0, import_jsx_runtime6.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__ */ (0, import_jsx_runtime6.jsx)(import_Box.default, { sx: { px: 1, pt: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                import_MultiSectionDigitalClock2.MultiSectionDigitalClock,
+                {
+                  ampm,
+                  value: draft,
+                  onChange: (v) => setDraft(v ? (0, import_dayjs3.default)(v) : null),
+                  views: [...clockViews]
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_DialogActions3.default, { sx: { px: 1.5, pb: 1, justifyContent: "flex-end", gap: 0.5 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IconButton_default, { "data-testid": "clear-action-button", onClick: handleClear, title: "clear", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_DeleteForever2.default, { fontSize: "small" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IconButton_default, { onClick: handleCancel, title: "cancel", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_Close2.default, { fontSize: "small" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IconButton_default, { onClick: handleAccept, title: "accept", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_Check.default, { fontSize: "small" }) })
+              ] })
+            ]
+          }
+        ) })
+      }
+    )
+  ] }) });
 };
-var MuiXDatePicker_default = MuiXDatePicker;
+var MuiXTimePicker_default = MuiXTimePicker;
 
-// src/components/elemental/DatePicker/src/MuiXDateTimePicker.tsx
-var import_LocalizationProvider2 = require("@mui/x-date-pickers/LocalizationProvider");
-var import_DateTimePicker = require("@mui/x-date-pickers/DateTimePicker");
-var import_AdapterDayjs2 = require("@mui/x-date-pickers/AdapterDayjs");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var MuiXDateTimePicker = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_LocalizationProvider2.LocalizationProvider, { dateAdapter: import_AdapterDayjs2.AdapterDayjs, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_DateTimePicker.DateTimePicker,
+// src/components/elemental/DatePicker/src/MuiXDateRangePicker.tsx
+var import_react5 = __toESM(require("react"));
+var import_dayjs4 = __toESM(require("dayjs"));
+var import_customParseFormat4 = __toESM(require("dayjs/plugin/customParseFormat"));
+var import_LocalizationProvider4 = require("@mui/x-date-pickers/LocalizationProvider");
+var import_AdapterDayjs4 = require("@mui/x-date-pickers/AdapterDayjs");
+var import_DateCalendar3 = require("@mui/x-date-pickers/DateCalendar");
+var import_PickersDay = require("@mui/x-date-pickers/PickersDay");
+var import_DialogActions4 = __toESM(require("@mui/material/DialogActions"));
+var import_InputAdornment4 = __toESM(require("@mui/material/InputAdornment"));
+var import_jsx_runtime7 = require("react/jsx-runtime");
+import_dayjs4.default.extend(import_customParseFormat4.default);
+var EMPTY = { start: null, end: null };
+var toDayjs4 = (d) => d ? (0, import_dayjs4.default)(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 ? (0, import_dayjs4.default)(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 = (0, import_dayjs4.default)(t, fmt, true);
+    if (d.isValid()) return d.startOf("day").toDate();
+  }
+  const loose = (0, import_dayjs4.default)(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, (0, import_dayjs4.default)(end).startOf("day").diff((0, import_dayjs4.default)(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 = import_react5.default.forwardRef(function RangeDay2(props, ref) {
+  const { rangeStart, rangeEnd, hoverDay, day, outsideCurrentMonth, sx, ...other } = props;
+  const current = (0, import_dayjs4.default)(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__ */ (0, import_jsx_runtime7.jsx)(
+    import_PickersDay.PickersDay,
     {
-      showDaysOutsideCurrentMonth: true,
-      ...props,
-      slotProps: {
-        actionBar: {
-          actions: ["clear", "today", "cancel", "accept"]
+      ...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)
+          } : {}
         },
-        ...props.slotProps || {}
-      },
-      slots: {
-        actionBar: MyActionBar,
-        textField: MyPickersTextField,
-        ...props.slots || {}
-      }
+        ...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 MuiXDateTimePicker_default = MuiXDateTimePicker;
+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] = import_react5.default.useState(
+    defaultValue ?? EMPTY
+  );
+  const value = isControlled ? valueProp ?? EMPTY : uncontrolled;
+  const [open, setOpen] = import_react5.default.useState(false);
+  const [draft, setDraft] = import_react5.default.useState(value);
+  const [selectingEnd, setSelectingEnd] = import_react5.default.useState(false);
+  const [hoverDay, setHoverDay] = import_react5.default.useState(null);
+  const [leftMonth, setLeftMonth] = import_react5.default.useState(
+    () => toDayjs4(value.start) ?? toDayjs4(value.end) ?? (0, import_dayjs4.default)().startOf("month")
+  );
+  const committedLabel = formatRangeLabel(value, startLabel, endLabel);
+  const [inputText, setInputText] = import_react5.default.useState(committedLabel);
+  const [fieldFocused, setFieldFocused] = import_react5.default.useState(false);
+  const typingEnabled = !disableTyping;
+  const skipCommitOnBlurRef = import_react5.default.useRef(false);
+  const anchorRef = import_react5.default.useRef(null);
+  const [anchorEl, setAnchorEl] = import_react5.default.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;
+  };
+  import_react5.default.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) ?? (0, import_dayjs4.default)().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 = import_react5.default.useCallback(
+    (dayProps) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      RangeDay,
+      {
+        ...dayProps,
+        rangeStart,
+        rangeEnd,
+        hoverDay: selectingEnd ? hoverDay : null,
+        onMouseEnter: (event, d) => {
+          dayProps.onMouseEnter?.(event, d);
+          if (selectingEnd) setHoverDay((0, import_dayjs4.default)(d));
+        },
+        onDaySelect: (d) => {
+          handleDayClick((0, import_dayjs4.default)(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__ */ (0, import_jsx_runtime7.jsx)(import_LocalizationProvider4.LocalizationProvider, { dateAdapter: import_AdapterDayjs4.AdapterDayjs, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_Box.default, { sx: { display: "inline-flex", flexDirection: "column", ...sx || {} }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_Box.default,
+      {
+        ref: (el) => {
+          anchorRef.current = el;
+          setAnchorEl(el);
+        },
+        sx: { display: "inline-flex", minWidth: 280 },
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          import_TextField.default,
+          {
+            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__ */ (0, import_jsx_runtime7.jsxs)(import_InputAdornment4.default, { position: "end", sx: { gap: 0.25 }, children: [
+                endorsementLabel ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  import_Box.default,
+                  {
+                    component: "span",
+                    onMouseDown: (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                    },
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      openPicker();
+                    },
+                    sx: { display: "inline-flex", cursor: "pointer" },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                      Chip,
+                      {
+                        size: "small",
+                        variant: "outlined",
+                        label: endorsementLabel,
+                        "data-testid": "date-range-endorsement",
+                        "aria-label": endorsementLabel,
+                        sx: endorsementChipSx
+                      }
+                    )
+                  }
+                ) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  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__ */ (0, import_jsx_runtime7.jsx)(import_CalendarToday.default, { fontSize: "small" })
+                  }
+                )
+              ] })
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_Popper.default,
+      {
+        open,
+        anchorEl,
+        placement: "bottom-start",
+        style: { zIndex: 1300 },
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_ClickAwayListener.default, { onClickAway: handleCancel, children: /* @__PURE__ */ (0, import_jsx_runtime7.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__ */ (0, import_jsx_runtime7.jsxs)(
+                import_Box.default,
+                {
+                  sx: {
+                    display: "flex",
+                    alignItems: "stretch",
+                    gap: 0,
+                    px: 1,
+                    pt: 1,
+                    flexWrap: { xs: "wrap", sm: "nowrap" }
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_Box.default, { sx: { width: 300 }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                        import_Box.default,
+                        {
+                          sx: {
+                            display: "flex",
+                            alignItems: "center",
+                            minHeight: 40,
+                            px: 0.5
+                          },
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                              IconButton_default,
+                              {
+                                size: "small",
+                                onClick: () => shiftMonths(-1),
+                                "aria-label": "Previous month",
+                                title: "Previous month",
+                                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_NavigateBefore.default, { fontSize: "small" })
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_Box.default, { sx: monthPaneLabelSx, "aria-live": "polite", children: leftMonth.format("MMMM YYYY") }),
+                            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_Box.default, { sx: navBtnSlotSx, "aria-hidden": true })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                        import_DateCalendar3.DateCalendar,
+                        {
+                          value: null,
+                          referenceDate: leftMonth,
+                          onMonthChange: (m) => setLeftMonth((0, import_dayjs4.default)(m).startOf("month")),
+                          showDaysOutsideCurrentMonth: true,
+                          slots: { day: DaySlot, calendarHeader: NullCalendarHeader },
+                          sx: { width: 300 }
+                        },
+                        leftMonth.format("YYYY-MM")
+                      )
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                      import_Box.default,
+                      {
+                        sx: {
+                          width: "1px",
+                          alignSelf: "stretch",
+                          bgcolor: "var(--mui-palette-border-1)",
+                          display: { xs: "none", sm: "block" }
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_Box.default, { sx: { width: 300 }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                        import_Box.default,
+                        {
+                          sx: {
+                            display: "flex",
+                            alignItems: "center",
+                            minHeight: 40,
+                            px: 0.5
+                          },
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_Box.default, { sx: navBtnSlotSx, "aria-hidden": true }),
+                            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_Box.default, { sx: monthPaneLabelSx, "aria-live": "polite", children: rightMonth.format("MMMM YYYY") }),
+                            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                              IconButton_default,
+                              {
+                                size: "small",
+                                onClick: () => shiftMonths(1),
+                                "aria-label": "Next month",
+                                title: "Next month",
+                                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_NavigateNext.default, { fontSize: "small" })
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                        import_DateCalendar3.DateCalendar,
+                        {
+                          value: null,
+                          referenceDate: rightMonth,
+                          onMonthChange: (m) => setLeftMonth((0, import_dayjs4.default)(m).subtract(1, "month").startOf("month")),
+                          showDaysOutsideCurrentMonth: true,
+                          slots: { day: DaySlot, calendarHeader: NullCalendarHeader },
+                          sx: { width: 300 }
+                        },
+                        rightMonth.format("YYYY-MM")
+                      )
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_DialogActions4.default, { sx: { px: 1.5, pb: 1, justifyContent: "flex-end", gap: 0.5 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IconButton_default, { "data-testid": "clear-action-button", onClick: handleClear, title: "clear", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_DeleteForever2.default, { fontSize: "small" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IconButton_default, { onClick: handleCancel, title: "cancel", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_Close2.default, { fontSize: "small" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IconButton_default, { onClick: handleAccept, title: "accept", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_Check.default, { fontSize: "small" }) })
+              ] })
+            ]
+          }
+        ) })
+      }
+    )
+  ] }) });
+};
+var MuiXDateRangePicker_default = MuiXDateRangePicker;
 
 // src/components/elemental/DatePicker/src/theme.ts
 var datePickerTheme = {
@@ -382,6 +1827,21 @@ var dateTimePickerTheme = {
     }
   }
 };
+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: {}
@@ -438,13 +1898,29 @@ var multiSectionDigitalClockTheme = {
       "&": { paddingRight: "4px" },
       "& .MuiMultiSectionDigitalClockSection-root": {
         scrollbarWidth: "inherit",
-        "& li": {
+        "& .MuiMultiSectionDigitalClockSection-item, & li": {
           borderRadius: "var(--mui-shape-borderRadius)",
+          position: "relative",
+          overflow: "hidden",
           "&::before": {
-            borderRadius: "var(--mui-shape-borderRadius)"
+            borderRadius: "var(--mui-shape-borderRadius)",
+            content: "none",
+            display: "none",
+            backgroundColor: "transparent",
+            width: 0,
+            height: 0
           },
           "&.Mui-selected": {
-            backgroundColor: "transparent"
+            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"
+            }
           }
         }
       }
@@ -470,13 +1946,16 @@ var pickersInputBaseTheme = {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   MuiXDatePicker,
+  MuiXDateRangePicker,
   MuiXDateTimePicker,
+  MuiXTimePicker,
   dateCalendarTheme,
   datePickerTheme,
   dateTimePickerTheme,
   multiSectionDigitalClockTheme,
   pickersCalendarHeaderTheme,
   pickersDayTheme,
-  pickersInputBaseTheme
+  pickersInputBaseTheme,
+  timePickerTheme
 });
 //# sourceMappingURL=datePicker.js.map