@owp/core 2.5.17 → 2.5.19

package/dist/components/OwpPicker/OwpTimePicker.js

@@ -1,18 +1,18 @@
-var te = Object.defineProperty;
-var n = (t, h) => te(t, "name", { value: h, configurable: !0 });
-import { jsx as f, jsxs as ae } 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 ie } from "../../hooks/useOwpTranslation.js";
-import { ensureDayjsBrowserSetup as le } from "../../utils/dayjsBrowser.js";
-import ce 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 { IconButton as se, InputAdornment as de } from "@mui/material";
-import { TimePicker as ue, LocalizationProvider as me } from "@mui/x-date-pickers";
-import { AdapterDayjs as fe } from "@mui/x-date-pickers/AdapterDayjs";
-import { clsx as pe } from "../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
-import E from "dayjs";
-import { useState as be, useRef as S, useMemo as ge, useCallback as I, useEffect as ke } from "react";
-import { VALUE_TIME_FORMATTER as K } from "./constants/index.js";
-le();
-const T = "––", z = {
+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 T = "––", z = {
       backgroundColor: "var(--owp-datepicker-selected-hover-bg, #039be5)"
     }
   }
-}, Me = {
+}, on = {
   "& .MuiInputBase-root": {
     alignItems: "center"
   },
@@ -49,243 +49,517 @@ const T = "––", z = {
       visibility: "visible"
     }
   }
-}, j = {
-  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;
   }
-}, ye = /* @__PURE__ */ n((t) => t.ctrlKey || t.altKey || t.metaKey ? !1 : t.key.length === 1 || t.key === "Backspace" || t.key === "Delete", "isValueEditingKey"), Re = /* @__PURE__ */ n(({
+}, "assignInputRef"), On = /* @__PURE__ */ a(({
   label: t,
-  variant: h = "standard",
-  sx: N,
-  value: l,
-  format: H = K,
-  useAmPm: V,
-  placeholder: X,
-  disabledClearButton: w,
-  fullWidth: v,
-  onChange: c,
-  textFieldProps: o,
-  localeText: Y,
-  open: B,
-  onOpen: p,
-  onClose: b,
-  slots: W,
-  ...a
+  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 g = K, k = V ?? /a/i.test(H), q = k ? "A hh:mm" : g, U = a.closeOnSelect ?? !1, G = {
+  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,
-    ...a.timeSteps
-  }, [J, D] = be(!1), L = S(null), C = S(null), M = S(!1), { t: A, i18n: _ } = ie(), Q = (_.resolvedLanguage ?? _.language ?? "kr") === "kr" ? "ko" : "en", O = {
-    okButtonLabel: A("Button.확인"),
-    clearButtonLabel: A("Button.초기화"),
-    fieldHoursPlaceholder: /* @__PURE__ */ n(() => T, "fieldHoursPlaceholder"),
-    fieldMinutesPlaceholder: /* @__PURE__ */ n(() => T, "fieldMinutesPlaceholder"),
-    fieldMeridiemPlaceholder: /* @__PURE__ */ n(() => T, "fieldMeridiemPlaceholder"),
-    ...Y
-  }, Z = X ?? (k ? "–– ––:––" : "––:––"), $ = [Me, N, o == null ? void 0 : o.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
-  ), x = !!(w || a.disabled || a.readOnly), F = !!c && !w, d = B !== void 0, i = d ? B : J, P = ge(() => {
-    if (!l)
+  ), 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 (E.isDayjs(l))
-      return l;
-    if (typeof l == "string") {
-      const r = E(l, g, !0);
-      return r.isValid() ? r : 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 = E(l);
+    const e = h(i);
     return e.isValid() ? e : null;
-  }, [g, l]), ee = /* @__PURE__ */ n((e) => {
-    c == null || c(e != null && e.isValid() ? e.format(g) : void 0);
-  }, "handleChange"), y = I(() => {
-    if (M.current) {
-      M.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;
     }
-    d || D(!0), p == null || p();
-  }, [d, p]), s = I(() => {
-    d || D(!1), b == null || b();
-  }, [d, b]), oe = /* @__PURE__ */ n(() => {
-    c == null || c("");
-  }, "handleClear"), ne = I(
+    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 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 r;
-      if ((r = o == null ? void 0 : o.onClick) == null || r.call(o, e), !(e.defaultPrevented || a.disabled || a.readOnly)) {
-        if (i) {
-          M.current = !0, s(), queueMicrotask(() => {
-            M.current = !1;
+      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;
         }
-        y();
+        T();
       }
     },
-    [s, y, i, o, a.disabled, a.readOnly]
-  ), re = I(
+    [
+      M,
+      T,
+      I,
+      r,
+      d.disabled,
+      d.readOnly
+    ]
+  ), $e = l(
     (e) => {
-      var r;
-      (r = o == null ? void 0 : o.onKeyDown) == null || r.call(o, e), !(e.defaultPrevented || !i || !ye(e)) && s();
+      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();
+      }
     },
-    [s, i, o]
+    [
+      M,
+      T,
+      I,
+      r,
+      d.disabled,
+      d.readOnly
+    ]
   );
-  return ke(() => {
-    if (!i)
+  return ee(() => {
+    I && (f(L), B(g));
+  }, [I, L, g, f]), ee(() => {
+    if (!I)
       return;
-    const e = /* @__PURE__ */ n((r) => {
-      var m, R;
-      const u = r.target;
-      u instanceof Node && ((m = L.current) != null && m.contains(u) || (R = C.current) != null && R.contains(u) || s());
+    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);
     };
-  }, [s, i]), /* @__PURE__ */ f(me, { dateAdapter: fe, adapterLocale: Q, children: /* @__PURE__ */ f("div", { ref: L, children: /* @__PURE__ */ f(
-    ue,
-    {
-      ...a,
-      enableAccessibleFieldDOMStructure: !1,
-      ampm: k,
-      open: i,
-      closeOnSelect: U,
-      timeSteps: G,
-      label: t,
-      value: P,
-      format: q,
-      localeText: O,
-      onChange: ee,
-      onOpen: y,
-      onClose: s,
-      slots: {
-        ...W,
-        inputAdornment: /* @__PURE__ */ n(({ position: e, children: r, ...u }) => /* @__PURE__ */ ae(de, { position: e, ...u, children: [
-          e === "end" && F && /* @__PURE__ */ f(
-            se,
-            {
-              className: "clearButton",
-              size: "small",
-              "aria-label": O.clearButtonLabel,
-              disabled: x,
-              onClick: /* @__PURE__ */ n((m) => {
-                m.preventDefault(), m.stopPropagation(), oe();
-              }, "onClick"),
-              children: /* @__PURE__ */ f(ce, { fontSize: "small" })
-            }
-          ),
-          r
-        ] }), "TimePickerInputAdornment")
-      },
-      slotProps: {
-        popper: {
-          placement: "bottom-end",
-          ref: /* @__PURE__ */ n((e) => {
-            C.current = e;
-          }, "ref"),
-          modifiers: [
-            {
-              name: "offset",
-              options: {
-                offset: [0, 7]
+  }, [Ie, I]), /* @__PURE__ */ y(nn, { dateAdapter: tn, adapterLocale: Be, children: /* @__PURE__ */ F("div", { ref: U, children: [
+    /* @__PURE__ */ y(
+      Pe,
+      {
+        ...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" })
               }
-            }
-          ]
+            ),
+            n
+          ] }), "TimePickerInputAdornment")
         },
-        desktopPaper: {
-          sx: j
-        },
-        mobilePaper: {
-          sx: j
-        },
-        actionBar: {
-          actions: ["accept"],
-          sx: {
-            backgroundColor: "#f6f3f4",
-            minHeight: 44,
-            padding: "4px 8px",
-            "& .MuiButton-root": {
-              minHeight: 28,
-              minWidth: 48,
-              padding: "4px 8px",
-              fontSize: "1.3rem",
-              lineHeight: 1.2
+        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
             }
+          },
+          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
           }
-        },
-        openPickerButton: {
-          size: "small",
-          onClick: /* @__PURE__ */ n((e) => {
-            e.preventDefault(), e.stopPropagation(), i || y();
-          }, "onClick"),
-          sx: {
-            margin: 0,
-            padding: 0
+        }
+      }
+    ),
+    /* @__PURE__ */ y(
+      Ze,
+      {
+        open: I,
+        anchorEl: U.current,
+        placement: "bottom-end",
+        ref: de,
+        modifiers: [
+          {
+            name: "offset",
+            options: {
+              offset: [0, 7]
+            }
           }
-        },
-        openPickerIcon: {
-          fontSize: "small"
-        },
-        inputAdornment: {
-          sx: {
-            marginBottom: 0,
-            marginLeft: 0,
-            gap: 0
+        ],
+        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"
+                    }
+                  }
+                }
+              )
+            ]
           }
-        },
-        digitalClockItem: {
-          sx: z
-        },
-        digitalClockSectionItem: {
-          sx: z
-        },
-        textField: {
-          variant: h,
-          fullWidth: v,
-          ...o,
-          className: pe(
-            !v && (k ? "w-[160px]" : "w-[140px]"),
-            o == null ? void 0 : o.className
-          ),
-          onClick: ne,
-          onKeyDown: re,
-          placeholder: Z,
-          sx: $
-        }
+        )
       }
-    }
-  ) }) });
+    )
+  ] }) });
 }, "OwpTimePicker");
 export {
-  Re as OwpTimePicker
+  On as OwpTimePicker
 };
 //# sourceMappingURL=OwpTimePicker.js.map