@owp/core 2.5.18 → 2.5.20

package/dist/components/OwpPicker/OwpTimePicker.js

@@ -1,18 +1,18 @@
-var me = Object.defineProperty;
-var t = (r, w) => me(r, "name", { value: w, configurable: !0 });
-import { jsx as f, jsxs as fe } from "../../node_modules/.pnpm/@emotion_react@11.14.0_@types_react@19.2.14_react@19.2.4/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js";
-import { useOwpTranslation as pe } from "../../hooks/useOwpTranslation.js";
-import { ensureDayjsBrowserSetup as ge } from "../../utils/dayjsBrowser.js";
-import be from "../../node_modules/.pnpm/@mui_icons-material@7.3.9_@mui_material@7.3.9_@emotion_react@11.14.0_@types_react@19.2._dc2be6bc014bebdac88a574e3e02c144/node_modules/@mui/icons-material/esm/Clear.js";
-import { MenuItem as ke, IconButton as Ie, InputAdornment as Me } from "@mui/material";
-import { TimePicker as Ee, LocalizationProvider as ye } from "@mui/x-date-pickers";
-import { AdapterDayjs as Te } from "@mui/x-date-pickers/AdapterDayjs";
-import { clsx as he } from "../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
-import B from "dayjs";
-import { useState as Se, useRef as v, useMemo as V, useCallback as S, useEffect as we, forwardRef as Ce } from "react";
-import { VALUE_TIME_FORMATTER as Y } from "./constants/index.js";
-ge();
-const D = "––", Be = 1, U = {
+var Ye = Object.defineProperty;
+var a = (t, s) => Ye(t, "name", { value: s, configurable: !0 });
+import { jsx as y, jsxs as F } from "../../node_modules/.pnpm/@emotion_react@11.14.0_@types_react@19.2.14_react@19.2.4/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js";
+import { useOwpTranslation as Je } from "../../hooks/useOwpTranslation.js";
+import { ensureDayjsBrowserSetup as Qe } from "../../utils/dayjsBrowser.js";
+import ke from "../../node_modules/.pnpm/@mui_icons-material@7.3.9_@mui_material@7.3.9_@emotion_react@11.14.0_@types_react@19.2._dc2be6bc014bebdac88a574e3e02c144/node_modules/@mui/icons-material/esm/Clear.js";
+import { Popper as Ze, Paper as xe, TextField as Fe, InputAdornment as pe, IconButton as we } from "@mui/material";
+import { TimePicker as Pe, MultiSectionDigitalClock as en, LocalizationProvider as nn } from "@mui/x-date-pickers";
+import { AdapterDayjs as tn } from "@mui/x-date-pickers/AdapterDayjs";
+import { clsx as rn } from "../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import h from "dayjs";
+import { useMemo as P, useState as G, useRef as k, useCallback as l, useEffect as ee } from "react";
+import { VALUE_TIME_FORMATTER as X, PICKER_INVALID_INPUT_MESSAGE_KEY as an } from "./constants/index.js";
+Qe();
+const ne = "––", $ = "HH:mm:ss", te = 64, ge = 56, cn = {
   "&:hover": {
     backgroundColor: "var(--owp-datepicker-hover-bg, rgba(3, 155, 229, 0.14))"
   },
@@ -23,7 +23,7 @@ const D = "––", Be = 1, U = {
       backgroundColor: "var(--owp-datepicker-selected-hover-bg, #039be5)"
     }
   }
-}, ve = {
+}, on = {
   "& .MuiInputBase-root": {
     alignItems: "center"
   },
@@ -49,259 +49,517 @@ const D = "––", Be = 1, U = {
       visibility: "visible"
     }
   }
-}, W = {
-  border: 0,
-  borderRadius: 1,
-  boxShadow: 8,
-  backgroundImage: "none",
-  backgroundColor: "background.paper",
-  overflow: "hidden",
-  "& .MuiPickersLayout-contentWrapper": {
-    border: 0
-  },
-  "& .MuiPickersLayout-actionBar": {
-    borderTop: "1px solid",
-    borderColor: "#e0e0e0"
-  },
-  "& .MuiMultiSectionDigitalClock-root, & .MuiDigitalClock-root": {
-    border: 0
-  },
-  "& .MuiMultiSectionDigitalClockSection-root": {
-    border: 0
-  },
-  "& .MuiMultiSectionDigitalClockSection-root:last-of-type": {
-    overflowY: "hidden",
-    scrollbarWidth: "none",
-    "&::-webkit-scrollbar": {
-      display: "none",
-      width: 0
-    },
-    "@media (pointer: fine)": {
-      "&:hover": {
-        overflowY: "hidden"
-      }
-    },
-    "@media (pointer: none), (pointer: coarse)": {
-      overflowY: "hidden"
+}, un = /* @__PURE__ */ a((t) => t.ctrlKey || t.altKey || t.metaKey ? !1 : t.key.length === 1 || t.key === "Backspace" || t.key === "Delete", "isValueEditingKey"), ln = /* @__PURE__ */ a((t) => t.ctrlKey || t.altKey || t.metaKey || t.key === "Escape" || t.key === "Enter" || t.key === "Tab" ? !1 : t.key.length === 1 || t.key.startsWith("Arrow"), "isTimePickerOpenKey"), sn = /* @__PURE__ */ a((t, s) => {
+  const D = s ? 6 : 4, i = t.replace(/\D/g, "").slice(0, D);
+  return [i.slice(0, 2), i.slice(2, 4), i.slice(4, 6)].filter(Boolean).join(":");
+}, "formatTimePickerInput"), re = /* @__PURE__ */ a((t, s) => {
+  const D = t.trim(), i = s ? "(\\d{2}):(\\d{2}):(\\d{2})" : "(\\d{2}):(\\d{2})", p = D.match(new RegExp(`^${i}$`));
+  if (!p)
+    return null;
+  const S = Number(p[1]), N = Number(p[2]), A = s ? Number(p[3]) : 0;
+  if (N > 59 || A > 59 || S > 24 || S === 24 && (N > 0 || A > 0))
+    return null;
+  const K = [S, N, ...s ? [A] : []].map((o) => String(o).padStart(2, "0")).join(":");
+  return {
+    dateValue: S === 24 ? h("00:00:00", $, !0).add(1, "day") : h(K, s ? $ : X, !0),
+    valueText: K
+  };
+}, "parseTimePickerInput"), ie = /* @__PURE__ */ a((t, s) => t.format(s ? $ : X), "formatTimePickerDisplayInput"), dn = /* @__PURE__ */ a((t) => !(!(t instanceof HTMLElement) || t.hasAttribute("disabled") || t.getAttribute("aria-disabled") === "true" || t.tabIndex < 0 || !t.getClientRects().length), "isFocusableElement"), fn = /* @__PURE__ */ a((t, s) => {
+  const D = Array.from(
+    document.querySelectorAll(
+      'a[href],button,input,select,textarea,[tabindex]:not([tabindex="-1"])'
+    )
+  ).filter(
+    (i) => dn(i) && !t.contains(i)
+  );
+  return s ? D.reverse().find(
+    (i) => !!(t.compareDocumentPosition(i) & Node.DOCUMENT_POSITION_PRECEDING)
+  ) : D.find(
+    (i) => !!(t.compareDocumentPosition(i) & Node.DOCUMENT_POSITION_FOLLOWING)
+  );
+}, "getAdjacentFocusableElement"), mn = /* @__PURE__ */ a((t, s) => {
+  if (t) {
+    if (typeof t == "function") {
+      t(s);
+      return;
     }
+    t.current = s;
   }
-}, De = /* @__PURE__ */ t((r) => r.ctrlKey || r.altKey || r.metaKey ? !1 : r.key.length === 1 || r.key === "Backspace" || r.key === "Delete", "isValueEditingKey"), We = /* @__PURE__ */ t(({
-  label: r,
-  variant: w = "standard",
-  sx: q,
-  value: d,
-  format: G = Y,
-  useAmPm: J,
-  placeholder: Q,
-  disabledClearButton: _,
-  fullWidth: L,
-  onChange: s,
-  textFieldProps: n,
-  localeText: Z,
-  open: A,
-  onOpen: g,
-  onClose: b,
-  slots: k,
-  slotProps: m,
-  ...i
+}, "assignInputRef"), On = /* @__PURE__ */ a(({
+  label: t,
+  variant: s = "standard",
+  sx: D,
+  value: i,
+  format: p = X,
+  useAmPm: S,
+  placeholder: N,
+  disabledClearButton: A,
+  fullWidth: K,
+  onChange: o,
+  textFieldProps: r,
+  localeText: Me,
+  open: ae,
+  onOpen: C,
+  onClose: H,
+  slots: he,
+  slotProps: c,
+  ...d
 }) => {
-  const I = Y, M = J ?? /a/i.test(G), $ = M ? "A hh:mm" : I, x = i.closeOnSelect ?? !1, F = {
+  var Te;
+  const m = /s/i.test(p), b = m ? $ : X, O = S ?? /a/i.test(p), Se = O ? m ? "A hh:mm:ss" : "A hh:mm" : b, Ae = d.closeOnSelect ?? !1, ce = {
     minutes: 1,
-    ...i.timeSteps
-  }, [P, O] = Se(!1), R = v(null), K = v(null), E = v(!1), { t: N, i18n: z } = pe(), ee = (z.resolvedLanguage ?? z.language ?? "kr") === "kr" ? "ko" : "en", j = {
-    okButtonLabel: N("Button.확인"),
-    clearButtonLabel: N("Button.초기화"),
-    fieldHoursPlaceholder: /* @__PURE__ */ t(() => D, "fieldHoursPlaceholder"),
-    fieldMinutesPlaceholder: /* @__PURE__ */ t(() => D, "fieldMinutesPlaceholder"),
-    fieldMeridiemPlaceholder: /* @__PURE__ */ t(() => D, "fieldMeridiemPlaceholder"),
-    ...Z
-  }, ne = Q ?? (M ? "–– ––:––" : "––:––"), oe = [ve, q, n == null ? void 0 : n.sx].filter(
+    seconds: 1,
+    ...d.timeSteps
+  }, _ = P(
+    () => m ? ["hours", "minutes", "seconds"] : ["hours", "minutes"],
+    [m]
+  ), oe = _.length - 1, Y = te * (_.length + (O ? 1 : 0)), [Oe, ue] = G(!1), [R, _e] = G(""), [le, se] = G(!1), [Re, B] = G(null), U = k(null), de = k(null), fe = k(null), J = k(null), W = k(!1), q = k(!1), w = k(0), Q = k(!1), { t: Z, i18n: me } = Je(), Be = (me.resolvedLanguage ?? me.language ?? "kr") === "kr" ? "ko" : "en", x = {
+    okButtonLabel: Z("Button.확인"),
+    clearButtonLabel: Z("Button.초기화"),
+    fieldHoursPlaceholder: /* @__PURE__ */ a(() => ne, "fieldHoursPlaceholder"),
+    fieldMinutesPlaceholder: /* @__PURE__ */ a(() => ne, "fieldMinutesPlaceholder"),
+    fieldMeridiemPlaceholder: /* @__PURE__ */ a(() => ne, "fieldMeridiemPlaceholder"),
+    ...Me
+  }, Le = N ?? (O ? "–– ––:––" : "––:––"), Ne = [on, D, r == null ? void 0 : r.sx].filter(
     Boolean
-  ), te = !!(_ || i.disabled || i.readOnly), re = !!s && !_, p = A !== void 0, l = p ? A : P, y = typeof (m == null ? void 0 : m.actionBar) == "function" || m == null ? void 0 : m.actionBar, ie = V(() => {
-    if (!d)
+  ), Ke = !!(A || d.disabled || d.readOnly), Ve = !!o && !A, V = ae !== void 0, I = V ? ae : Oe, f = l((e) => {
+    _e(e), se(!1);
+  }, []), g = P(() => {
+    if (!i)
       return null;
-    if (B.isDayjs(d))
-      return d;
-    if (typeof d == "string") {
-      const o = B(d, I, !0);
-      return o.isValid() ? o : null;
+    if (h.isDayjs(i))
+      return i;
+    if (typeof i == "string") {
+      const n = re(i, m);
+      if (n != null && n.dateValue.isValid())
+        return n.dateValue;
+      const u = h(i, b, !0);
+      return u.isValid() ? u : null;
     }
-    const e = B(d);
+    const e = h(i);
     return e.isValid() ? e : null;
-  }, [I, d]), ae = /* @__PURE__ */ t((e) => {
-    s == null || s(e != null && e.isValid() ? e.format(I) : void 0);
-  }, "handleChange"), T = S(() => {
-    if (E.current) {
-      E.current = !1;
+  }, [m, b, i]), L = P(() => {
+    if (!i)
+      return "";
+    if (typeof i == "string") {
+      const n = h(i, b, !0);
+      return n.isValid() ? ie(n, m) : i;
+    }
+    const e = h(i);
+    return e.isValid() ? ie(e, m) : "";
+  }, [m, b, i]), ze = /* @__PURE__ */ a((e) => {
+    const n = e != null && e.isValid() ? e.format(b) : void 0;
+    f(
+      e != null && e.isValid() ? ie(e, m) : ""
+    ), o == null || o(n);
+  }, "handleChange"), z = l(
+    (e) => {
+      if (!R)
+        return f(""), o == null || o(""), !0;
+      const n = re(R, m);
+      return n != null && n.dateValue.isValid() ? (f(n.valueText), o == null || o(n.valueText), !0) : (e && R && se(!0), !1);
+    },
+    [m, R, o, f]
+  ), T = l(() => {
+    if (q.current || Date.now() < w.current) {
+      q.current = !1;
       return;
     }
-    p || O(!0), g == null || g();
-  }, [p, g]), a = S(() => {
-    p || O(!1), b == null || b();
-  }, [p, b]), ce = /* @__PURE__ */ t(() => {
-    s == null || s("");
-  }, "handleClear"), le = S(
+    V || ue(!0), f(L), B(g), C == null || C();
+  }, [V, C, L, g, f]), E = l(() => {
+    V || ue(!1), H == null || H();
+  }, [V, H]), M = l(() => {
+    z(), E();
+  }, [E, z]), Ie = l(() => {
+    w.current = Date.now() + 200, M();
+  }, [M]), be = l(() => {
+    w.current = Date.now() + 200, E();
+  }, [E]), ye = l((e) => {
+    const n = U.current;
+    n && window.requestAnimationFrame(() => {
+      var u;
+      (u = fn(n, e)) == null || u.focus();
+    });
+  }, []), v = l(() => {
+    window.requestAnimationFrame(() => {
+      var e;
+      (e = fe.current) == null || e.focus();
+    });
+  }, []), ve = l(
+    (e) => {
+      fe.current = e, mn(r == null ? void 0 : r.inputRef, e);
+    },
+    [r == null ? void 0 : r.inputRef]
+  ), je = /* @__PURE__ */ a(() => {
+    o == null || o(""), f("");
+  }, "handleClear"), Ce = l(
+    (e) => {
+      const n = sn(e.target.value, m), u = re(n, m);
+      f(n), u != null && u.dateValue.isValid() && B(u.dateValue);
+    },
+    [m, f]
+  ), De = l(
+    (e) => {
+      e.stopPropagation(), e.nativeEvent.stopImmediatePropagation();
+    },
+    []
+  ), He = l(
+    (e) => {
+      if (De(e), e.key === "Escape") {
+        e.preventDefault(), w.current = Date.now() + 200, f(L), B(g), E(), v();
+        return;
+      }
+      if (e.key === "Tab") {
+        if (e.preventDefault(), !z(!0))
+          return;
+        w.current = Date.now() + 200, E(), ye(e.shiftKey);
+        return;
+      }
+      e.key === "Enter" && (e.preventDefault(), z(!0) && (w.current = Date.now() + 200, E(), v()));
+    },
+    [
+      E,
+      z,
+      ye,
+      v,
+      L,
+      g,
+      f,
+      De
+    ]
+  ), Ue = l(
     (e) => {
-      var o;
-      if ((o = n == null ? void 0 : n.onClick) == null || o.call(n, e), !(e.defaultPrevented || i.disabled || i.readOnly)) {
-        if (l) {
-          E.current = !0, a(), queueMicrotask(() => {
-            E.current = !1;
+      var n;
+      e.preventDefault(), e.stopPropagation(), o == null || o(""), f(""), B(null), (n = J.current) == null || n.focus();
+    },
+    [o, f]
+  ), We = l(
+    (e, n) => {
+      if (!(e != null && e.isValid()))
+        return;
+      const u = e.format(b);
+      B(e), f(u), n === _[oe] && (w.current = Date.now() + 200, o == null || o(u), be(), v());
+    },
+    [
+      oe,
+      be,
+      v,
+      b,
+      o,
+      f,
+      _
+    ]
+  ), qe = l(
+    (e) => {
+      var n;
+      (n = r == null ? void 0 : r.onMouseDown) == null || n.call(r, e), W.current = !0;
+    },
+    [r]
+  ), Ge = l(
+    (e) => {
+      var n;
+      (n = r == null ? void 0 : r.onFocus) == null || n.call(r, e), !(e.defaultPrevented || d.disabled || d.readOnly || I) && (Q.current = W.current, T());
+    },
+    [T, I, r, d.disabled, d.readOnly]
+  ), Xe = l(
+    (e) => {
+      var n;
+      if ((n = r == null ? void 0 : r.onClick) == null || n.call(r, e), !(e.defaultPrevented || d.disabled || d.readOnly)) {
+        if (Q.current) {
+          Q.current = !1, W.current = !1;
+          return;
+        }
+        if (W.current = !1, I) {
+          q.current = !0, M(), queueMicrotask(() => {
+            q.current = !1;
           });
           return;
         }
         T();
       }
     },
-    [a, T, l, n, i.disabled, i.readOnly]
-  ), de = S(
+    [
+      M,
+      T,
+      I,
+      r,
+      d.disabled,
+      d.readOnly
+    ]
+  ), $e = l(
     (e) => {
-      var o;
-      (o = n == null ? void 0 : n.onKeyDown) == null || o.call(n, e), !(e.defaultPrevented || !l || !De(e)) && a();
+      var n;
+      if ((n = r == null ? void 0 : r.onKeyDown) == null || n.call(r, e), !(e.defaultPrevented || d.disabled || d.readOnly)) {
+        if (!I && ln(e)) {
+          e.preventDefault(), T();
+          return;
+        }
+        !I || !un(e) || M();
+      }
     },
-    [a, l, n]
+    [
+      M,
+      T,
+      I,
+      r,
+      d.disabled,
+      d.readOnly
+    ]
   );
-  we(() => {
-    if (!l)
+  return ee(() => {
+    I && (f(L), B(g));
+  }, [I, L, g, f]), ee(() => {
+    if (!I)
       return;
-    const e = /* @__PURE__ */ t((o) => {
-      var u, C;
-      const c = o.target;
-      c instanceof Node && ((u = R.current) != null && u.contains(c) || (C = K.current) != null && C.contains(c) || a());
+    const e = window.requestAnimationFrame(() => {
+      var n;
+      (n = J.current) == null || n.focus();
+    });
+    return () => {
+      window.cancelAnimationFrame(e);
+    };
+  }, [I]), ee(() => {
+    if (!I)
+      return;
+    const e = /* @__PURE__ */ a((n) => {
+      var j, Ee;
+      const u = n.target;
+      u instanceof Node && ((j = U.current) != null && j.contains(u) || (Ee = de.current) != null && Ee.contains(u) || Ie());
     }, "handleDocumentMouseDown");
     return document.addEventListener("mousedown", e, !0), () => {
       document.removeEventListener("mousedown", e, !0);
     };
-  }, [a, l]);
-  const se = /* @__PURE__ */ t(({ position: e, children: o, ...c }) => /* @__PURE__ */ fe(Me, { position: e, ...c, children: [
-    e === "end" && re && /* @__PURE__ */ f(
-      Ie,
+  }, [Ie, I]), /* @__PURE__ */ y(nn, { dateAdapter: tn, adapterLocale: Be, children: /* @__PURE__ */ F("div", { ref: U, children: [
+    /* @__PURE__ */ y(
+      Pe,
       {
-        className: "clearButton",
-        size: "small",
-        "aria-label": j.clearButtonLabel,
-        disabled: te,
-        onClick: /* @__PURE__ */ t((u) => {
-          u.preventDefault(), u.stopPropagation(), ce();
-        }, "onClick"),
-        children: /* @__PURE__ */ f(be, { fontSize: "small" })
-      }
-    ),
-    o
-  ] }), "TimePickerInputAdornment"), ue = V(
-    () => Ce((e, o) => {
-      const { onClick: c, ...u } = e;
-      return /* @__PURE__ */ f(ke, { ref: o, onClick: /* @__PURE__ */ t((X) => {
-        c == null || c(X);
-        const h = X.currentTarget.parentElement, H = h == null ? void 0 : h.parentElement;
-        (H ? Array.from(H.children).indexOf(h) : -1) === Be && window.setTimeout(a, 0);
-      }, "handleClick"), ...u });
-    }),
-    [a]
-  );
-  return /* @__PURE__ */ f(ye, { dateAdapter: Te, adapterLocale: ee, children: /* @__PURE__ */ f("div", { ref: R, children: /* @__PURE__ */ f(
-    Ee,
-    {
-      ...i,
-      enableAccessibleFieldDOMStructure: !1,
-      ampm: M,
-      open: l,
-      closeOnSelect: x,
-      timeSteps: F,
-      label: r,
-      value: ie,
-      format: $,
-      localeText: j,
-      onChange: ae,
-      onOpen: T,
-      onClose: a,
-      slots: {
-        ...k,
-        inputAdornment: se,
-        digitalClockSectionItem: (k == null ? void 0 : k.digitalClockSectionItem) ?? ue
-      },
-      slotProps: {
-        popper: {
-          placement: "bottom-end",
-          ref: /* @__PURE__ */ t((e) => {
-            K.current = e;
-          }, "ref"),
-          modifiers: [
-            {
-              name: "offset",
-              options: {
-                offset: [0, 7]
+        ...d,
+        enableAccessibleFieldDOMStructure: !1,
+        ampm: O,
+        open: !1,
+        closeOnSelect: Ae,
+        timeSteps: ce,
+        label: t,
+        value: g,
+        views: _,
+        format: Se,
+        localeText: x,
+        onChange: ze,
+        onOpen: T,
+        onClose: M,
+        slots: {
+          ...he,
+          inputAdornment: /* @__PURE__ */ a(({ position: e, children: n, ...u }) => /* @__PURE__ */ F(pe, { position: e, ...u, children: [
+            e === "end" && Ve && /* @__PURE__ */ y(
+              we,
+              {
+                className: "clearButton",
+                size: "small",
+                tabIndex: -1,
+                "aria-label": x.clearButtonLabel,
+                disabled: Ke,
+                onClick: /* @__PURE__ */ a((j) => {
+                  j.preventDefault(), j.stopPropagation(), je();
+                }, "onClick"),
+                children: /* @__PURE__ */ y(ke, { fontSize: "small" })
               }
-            }
-          ]
-        },
-        desktopPaper: {
-          sx: W
-        },
-        mobilePaper: {
-          sx: W
+            ),
+            n
+          ] }), "TimePickerInputAdornment")
         },
-        actionBar: {
-          actions: [],
-          sx: {
-            backgroundColor: "#f6f3f4",
-            minHeight: 44,
-            padding: "4px 8px",
-            "& .MuiButton-root": {
-              minHeight: 28,
-              minWidth: 48,
-              padding: "4px 8px",
-              fontSize: "1.3rem",
-              lineHeight: 1.2
-            },
-            ...y == null ? void 0 : y.sx
+        slotProps: {
+          ...c,
+          openPickerButton: {
+            ...typeof (c == null ? void 0 : c.openPickerButton) == "function" || c == null ? void 0 : c.openPickerButton,
+            size: "small",
+            tabIndex: -1,
+            onClick: /* @__PURE__ */ a((e) => {
+              e.preventDefault(), e.stopPropagation(), I || T();
+            }, "onClick"),
+            sx: {
+              margin: 0,
+              padding: 0
+            }
           },
-          ...y
-        },
-        openPickerButton: {
-          size: "small",
-          onClick: /* @__PURE__ */ t((e) => {
-            e.preventDefault(), e.stopPropagation(), l || T();
-          }, "onClick"),
-          sx: {
-            margin: 0,
-            padding: 0
-          }
-        },
-        openPickerIcon: {
-          fontSize: "small"
-        },
-        inputAdornment: {
-          sx: {
-            marginBottom: 0,
-            marginLeft: 0,
-            gap: 0
+          openPickerIcon: {
+            ...typeof (c == null ? void 0 : c.openPickerIcon) == "function" || c == null ? void 0 : c.openPickerIcon,
+            fontSize: "small"
+          },
+          inputAdornment: {
+            ...typeof (c == null ? void 0 : c.inputAdornment) == "function" || c == null ? void 0 : c.inputAdornment,
+            sx: {
+              marginBottom: 0,
+              marginLeft: 0,
+              gap: 0,
+              ...typeof (c == null ? void 0 : c.inputAdornment) == "function" || (Te = c == null ? void 0 : c.inputAdornment) == null ? void 0 : Te.sx
+            }
+          },
+          textField: {
+            variant: s,
+            fullWidth: K,
+            ...r,
+            className: rn(
+              !K && (O ? "w-[160px]" : "w-[140px]"),
+              r == null ? void 0 : r.className
+            ),
+            onMouseDown: qe,
+            onFocus: Ge,
+            onClick: Xe,
+            onKeyDown: $e,
+            inputRef: ve,
+            placeholder: Le,
+            sx: Ne
           }
-        },
-        digitalClockItem: {
-          sx: U
-        },
-        digitalClockSectionItem: {
-          sx: U
-        },
-        textField: {
-          variant: w,
-          fullWidth: L,
-          ...n,
-          className: he(
-            !L && (M ? "w-[160px]" : "w-[140px]"),
-            n == null ? void 0 : n.className
-          ),
-          onClick: le,
-          onKeyDown: de,
-          placeholder: ne,
-          sx: oe
         }
       }
-    }
-  ) }) });
+    ),
+    /* @__PURE__ */ y(
+      Ze,
+      {
+        open: I,
+        anchorEl: U.current,
+        placement: "bottom-end",
+        ref: de,
+        modifiers: [
+          {
+            name: "offset",
+            options: {
+              offset: [0, 7]
+            }
+          }
+        ],
+        sx: { zIndex: /* @__PURE__ */ a((e) => e.zIndex.modal, "zIndex") },
+        children: /* @__PURE__ */ F(
+          xe,
+          {
+            elevation: 8,
+            onClick: /* @__PURE__ */ a((e) => {
+              e.stopPropagation();
+            }, "onClick"),
+            onKeyDown: /* @__PURE__ */ a((e) => {
+              e.stopPropagation();
+            }, "onKeyDown"),
+            onKeyUp: /* @__PURE__ */ a((e) => {
+              e.stopPropagation();
+            }, "onKeyUp"),
+            onMouseDown: /* @__PURE__ */ a((e) => {
+              e.stopPropagation();
+            }, "onMouseDown"),
+            sx: {
+              borderRadius: 1,
+              lineHeight: 0,
+              overflow: "hidden",
+              width: Y
+            },
+            children: [
+              /* @__PURE__ */ y(
+                Fe,
+                {
+                  autoFocus: !0,
+                  inputRef: J,
+                  fullWidth: !0,
+                  size: "small",
+                  value: R,
+                  error: le,
+                  helperText: le ? Z(an) : void 0,
+                  placeholder: b,
+                  onChange: Ce,
+                  onKeyDown: He,
+                  slotProps: {
+                    htmlInput: {
+                      inputMode: "numeric",
+                      "aria-label": b
+                    },
+                    input: {
+                      sx: {
+                        paddingRight: 0.5
+                      },
+                      endAdornment: /* @__PURE__ */ y(
+                        pe,
+                        {
+                          position: "end",
+                          sx: {
+                            marginLeft: 0
+                          },
+                          children: /* @__PURE__ */ y(
+                            we,
+                            {
+                              size: "small",
+                              tabIndex: -1,
+                              "aria-label": x.clearButtonLabel,
+                              disabled: !R,
+                              onClick: Ue,
+                              onMouseDown: /* @__PURE__ */ a((e) => {
+                                e.preventDefault(), e.stopPropagation();
+                              }, "onMouseDown"),
+                              sx: {
+                                margin: 0,
+                                padding: 0.25
+                              },
+                              children: /* @__PURE__ */ y(ke, { fontSize: "small" })
+                            }
+                          )
+                        }
+                      )
+                    }
+                  },
+                  sx: {
+                    boxSizing: "border-box",
+                    width: Y,
+                    px: 1,
+                    py: 1,
+                    "& .MuiOutlinedInput-root": {
+                      borderRadius: 0.75,
+                      fontSize: 13
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ y(
+                en,
+                {
+                  ampm: O,
+                  value: Re,
+                  views: _,
+                  onChange: /* @__PURE__ */ a((e, n, u) => We(e, u), "onChange"),
+                  timeSteps: ce,
+                  slotProps: {
+                    digitalClockSectionItem: {
+                      sx: cn
+                    }
+                  },
+                  sx: {
+                    border: 0,
+                    width: Y,
+                    "& .MuiMultiSectionDigitalClockSection-root": {
+                      border: 0,
+                      boxSizing: "border-box",
+                      width: te,
+                      flex: `0 0 ${te}px`,
+                      display: "flex",
+                      flexDirection: "column",
+                      alignItems: "stretch"
+                    },
+                    "& .MuiMultiSectionDigitalClockSection-item": {
+                      alignSelf: "stretch",
+                      boxSizing: "border-box",
+                      width: ge,
+                      minWidth: ge,
+                      justifyContent: "center",
+                      marginLeft: "auto",
+                      marginRight: "auto"
+                    }
+                  }
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] }) });
 }, "OwpTimePicker");
 export {
-  We as OwpTimePicker
+  On as OwpTimePicker
 };
 //# sourceMappingURL=OwpTimePicker.js.map