@owp/core 2.5.25 → 2.5.26

package/dist/components/OwpPicker/OwpTimePicker.js

@@ -1,18 +1,20 @@
-var Jn = Object.defineProperty;
-var c = (r, I) => Jn(r, "name", { value: I, configurable: !0 });
-import { jsx as E, 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 Qn } from "../../hooks/useOwpTranslation.js";
-import bn 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 Zn, Paper as xn, InputAdornment as pn, IconButton as Mn } from "@mui/material";
-import { TimePicker as Fn, MultiSectionDigitalClock as Pn, LocalizationProvider as ne } from "@mui/x-date-pickers";
-import { AdapterDayjs as ee } from "@mui/x-date-pickers/AdapterDayjs";
-import { clsx as te } from "../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
-import { owpDayjs as g } from "../../dayjs.js";
-import { useMemo as P, useState as q, useRef as k, useCallback as o, useEffect as nn } from "react";
-import { TIME_PICKER_EDITOR_SECTION_WIDTH as en, VALUE_TIME_SECOND_FORMATTER as X, VALUE_TIME_FORMATTER as $, PICKER_INVALID_INPUT_MESSAGE_KEY as re, TIME_PICKER_EDITOR_SECTION_ITEM_WIDTH as gn, TIME_PICKER_SELECTED_ITEM_SX as ie } from "./constants/index.js";
-import { getAdjacentFocusableElement as ae, getPickerInputMask as ce } from "./utils/index.js";
-import { OwpTextMaskField as ue } from "../OwpTextField/OwpTextMaskField.js";
-const tn = "––", oe = {
+var xn = Object.defineProperty;
+var u = (r, I) => xn(r, "name", { value: I, configurable: !0 });
+import { jsx as w, jsxs as en } 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 Fn } from "../../hooks/useOwpTranslation.js";
+import An 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 Pn, Paper as ne, InputAdornment as bn, IconButton as Rn } from "@mui/material";
+import { TimePicker as ee, MultiSectionDigitalClock as te, LocalizationProvider as re } from "@mui/x-date-pickers";
+import { AdapterDayjs as ae } from "@mui/x-date-pickers/AdapterDayjs";
+import { clsx as ie } from "../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import { owpDayjs as O } from "../../dayjs.js";
+import { useMemo as tn, useState as Y, useRef as D, useCallback as o, useEffect as rn } from "react";
+import { TIME_PICKER_EDITOR_SECTION_WIDTH as ce, VALUE_TIME_SECOND_FORMATTER as G, VALUE_TIME_FORMATTER as J, PICKER_INVALID_INPUT_MESSAGE_KEY as ue, TIME_PICKER_SELECTED_ITEM_SX as oe } from "./constants/index.js";
+import { getOwpPickerEditorPaperSx as se, getOwpPickerEditorInputSx as le, getOwpTimePickerClockSx as fe } from "./internal/pickerEditorStyles.js";
+import { useOwpPickerPopperTransition as de, PICKER_TRANSITION_DURATION as Mn, PICKER_EXIT_TRANSFORM_DELAY as me, PICKER_TRANSFORM_TRANSITION_DURATION as Ie } from "./internal/useOwpPickerPopperTransition.js";
+import { getAdjacentFocusableElement as Te, getPickerInputMask as we } from "./utils/index.js";
+import { OwpTextMaskField as ye } from "../OwpTextField/OwpTextMaskField.js";
+const an = "––", ke = {
   "& .MuiInputBase-root": {
     alignItems: "center"
   },
@@ -38,19 +40,19 @@ const tn = "––", oe = {
       visibility: "visible"
     }
   }
-}, le = /* @__PURE__ */ c((r) => r.ctrlKey || r.altKey || r.metaKey ? !1 : r.key.length === 1 || r.key === "Backspace" || r.key === "Delete", "isValueEditingKey"), fe = /* @__PURE__ */ c((r) => r.ctrlKey || r.altKey || r.metaKey || r.key === "Escape" || r.key === "Enter" || r.key === "Tab" ? !1 : r.key.length === 1 || r.key.startsWith("Arrow"), "isTimePickerOpenKey"), rn = /* @__PURE__ */ c((r, I) => {
-  const Y = r.trim(), d = I ? "(\\d{2}):(\\d{2}):(\\d{2})" : "(\\d{2}):(\\d{2})", w = Y.match(new RegExp(`^${d}$`));
-  if (!w)
+}, pe = /* @__PURE__ */ u((r) => r.ctrlKey || r.altKey || r.metaKey ? !1 : r.key.length === 1 || r.key === "Backspace" || r.key === "Delete", "isValueEditingKey"), Ee = /* @__PURE__ */ u((r) => r.ctrlKey || r.altKey || r.metaKey || r.key === "Escape" || r.key === "Enter" || r.key === "Tab" ? !1 : r.key.length === 1 || r.key.startsWith("Arrow"), "isTimePickerOpenKey"), cn = /* @__PURE__ */ u((r, I) => {
+  const Q = r.trim(), d = I ? "(\\d{2}):(\\d{2}):(\\d{2})" : "(\\d{2}):(\\d{2})", A = Q.match(new RegExp(`^${d}$`));
+  if (!A)
     return null;
-  const S = Number(w[1]), B = Number(w[2]), h = I ? Number(w[3]) : 0;
-  if (B > 59 || h > 59 || S > 24 || S === 24 && (B > 0 || h > 0))
+  const S = Number(A[1]), L = Number(A[2]), _ = I ? Number(A[3]) : 0;
+  if (L > 59 || _ > 59 || S > 24 || S === 24 && (L > 0 || _ > 0))
     return null;
-  const L = [S, B, ...I ? [h] : []].map((a) => String(a).padStart(2, "0")).join(":");
+  const V = [S, L, ...I ? [_] : []].map((i) => String(i).padStart(2, "0")).join(":");
   return {
-    dateValue: S === 24 ? g("00:00:00", X, !0).add(1, "day") : g(L, I ? X : $, !0),
-    valueText: L
+    dateValue: S === 24 ? O("00:00:00", G, !0).add(1, "day") : O(V, I ? G : J, !0),
+    valueText: V
   };
-}, "parseTimePickerInput"), an = /* @__PURE__ */ c((r, I) => r.format(I ? X : $), "formatTimePickerDisplayInput"), de = /* @__PURE__ */ c((r, I) => {
+}, "parseTimePickerInput"), un = /* @__PURE__ */ u((r, I) => r.format(I ? G : J), "formatTimePickerDisplayInput"), De = /* @__PURE__ */ u((r, I) => {
   if (r) {
     if (typeof r == "function") {
       r(I);
@@ -58,296 +60,320 @@ const tn = "––", oe = {
     }
     r.current = I;
   }
-}, "assignInputRef"), Ae = /* @__PURE__ */ c(({
+}, "assignInputRef"), qe = /* @__PURE__ */ u(({
   label: r,
   variant: I = "standard",
-  sx: Y,
+  sx: Q,
   value: d,
-  format: w = $,
+  format: A = J,
   useAmPm: S,
-  placeholder: B,
-  disabledClearButton: h,
-  fullWidth: L,
-  onChange: a,
+  placeholder: L,
+  disabledClearButton: _,
+  fullWidth: V,
+  onChange: i,
   textFieldProps: t,
-  localeText: Sn,
-  open: cn,
-  onOpen: v,
-  onClose: W,
-  slots: hn,
-  slotProps: i,
+  localeText: On,
+  open: on,
+  onOpen: q,
+  onClose: $,
+  slots: Sn,
+  slotProps: a,
   ...l
 }) => {
-  var kn;
-  const m = /s/i.test(w), y = m ? X : $, A = S ?? /a/i.test(w), An = A ? m ? "A hh:mm:ss" : "A hh:mm" : y, Rn = l.closeOnSelect ?? !1, un = {
+  var En;
+  const m = /s/i.test(A), T = m ? G : J, K = S ?? /a/i.test(A), _n = K ? m ? "A hh:mm:ss" : "A hh:mm" : T, Kn = l.closeOnSelect ?? !1, sn = {
     minutes: 1,
     seconds: 1,
     ...l.timeSteps
-  }, R = P(
+  }, g = tn(
     () => m ? ["hours", "minutes", "seconds"] : ["hours", "minutes"],
     [m]
-  ), on = R.length - 1, G = en * (R.length + (A ? 1 : 0)), [_n, ln] = q(!1), [_, On] = q(""), [fn, dn] = q(!1), [Kn, O] = q(null), C = k(null), sn = k(null), mn = k(null), J = k(null), H = k(!1), U = k(!1), b = k(0), Q = k(!1), { t: Z, i18n: In } = Qn(), Bn = (In.resolvedLanguage ?? In.language ?? "kr") === "kr" ? "ko" : "en", x = {
-    okButtonLabel: Z("Button.확인"),
-    clearButtonLabel: Z("Button.초기화"),
-    fieldHoursPlaceholder: /* @__PURE__ */ c(() => tn, "fieldHoursPlaceholder"),
-    fieldMinutesPlaceholder: /* @__PURE__ */ c(() => tn, "fieldMinutesPlaceholder"),
-    fieldMeridiemPlaceholder: /* @__PURE__ */ c(() => tn, "fieldMeridiemPlaceholder"),
-    ...Sn
-  }, Ln = B ?? (A ? "–– ––:––" : "––:––"), Vn = [oe, Y, t == null ? void 0 : t.sx].filter(
+  ), ln = g.length - 1, Z = ce * (g.length + (K ? 1 : 0)), [gn, fn] = Y(!1), [h, hn] = Y(""), [dn, mn] = Y(!1), [Nn, N] = Y(null), C = D(null), In = D(null), Tn = D(null), x = D(null), W = D(!1), X = D(!1), k = D(0), F = D(!1), { t: P, i18n: wn } = Fn(), Bn = (wn.resolvedLanguage ?? wn.language ?? "kr") === "kr" ? "ko" : "en", nn = {
+    okButtonLabel: P("Button.확인"),
+    clearButtonLabel: P("Button.초기화"),
+    fieldHoursPlaceholder: /* @__PURE__ */ u(() => an, "fieldHoursPlaceholder"),
+    fieldMinutesPlaceholder: /* @__PURE__ */ u(() => an, "fieldMinutesPlaceholder"),
+    fieldMeridiemPlaceholder: /* @__PURE__ */ u(() => an, "fieldMeridiemPlaceholder"),
+    ...On
+  }, Ln = L ?? (K ? "–– ––:––" : "––:––"), Vn = [ke, Q, t == null ? void 0 : t.sx].filter(
     Boolean
-  ), zn = !!(h || l.disabled || l.readOnly), Nn = !!a && !h, V = cn !== void 0, s = V ? cn : _n, f = o((n) => {
-    On(n), dn(!1);
-  }, []), p = P(() => {
+  ), zn = !!(_ || l.disabled || l.readOnly), jn = !!i && !_, z = on !== void 0, s = z ? on : gn, v = de(s), f = o((n) => {
+    hn(n), mn(!1);
+  }, []), b = o(() => {
+    var n;
+    (n = x.current) == null || n.focus();
+  }, []), R = tn(() => {
     if (!d)
       return null;
-    if (g.isDayjs(d))
+    if (O.isDayjs(d))
       return d;
     if (typeof d == "string") {
-      const e = rn(d, m);
+      const e = cn(d, m);
       if (e != null && e.dateValue.isValid())
         return e.dateValue;
-      const u = g(d, y, !0);
-      return u.isValid() ? u : null;
+      const c = O(d, T, !0);
+      return c.isValid() ? c : null;
     }
-    const n = g(d);
+    const n = O(d);
     return n.isValid() ? n : null;
-  }, [m, y, d]), K = P(() => {
+  }, [m, T, d]), B = tn(() => {
     if (!d)
       return "";
     if (typeof d == "string") {
-      const e = g(d, y, !0);
-      return e.isValid() ? an(e, m) : d;
+      const e = O(d, T, !0);
+      return e.isValid() ? un(e, m) : d;
     }
-    const n = g(d);
-    return n.isValid() ? an(n, m) : "";
-  }, [m, y, d]), jn = /* @__PURE__ */ c((n) => {
-    const e = n != null && n.isValid() ? n.format(y) : void 0;
+    const n = O(d);
+    return n.isValid() ? un(n, m) : "";
+  }, [m, T, d]), Un = /* @__PURE__ */ u((n) => {
+    const e = n != null && n.isValid() ? n.format(T) : void 0;
     f(
-      n != null && n.isValid() ? an(n, m) : ""
-    ), a == null || a(e);
-  }, "handleChange"), z = o(
+      n != null && n.isValid() ? un(n, m) : ""
+    ), i == null || i(e);
+  }, "handleChange"), M = o(
     (n) => {
-      if (!_)
-        return f(""), a == null || a(""), !0;
-      const e = rn(_, m);
-      return e != null && e.dateValue.isValid() ? (f(e.valueText), a == null || a(e.valueText), !0) : (n && _ && dn(!0), !1);
+      if (!h)
+        return f(""), i == null || i(""), !0;
+      const e = cn(h, m);
+      return e != null && e.dateValue.isValid() ? (f(e.valueText), i == null || i(e.valueText), !0) : (n && h && mn(!0), !1);
     },
-    [m, _, a, f]
-  ), D = o(() => {
-    if (U.current || Date.now() < b.current) {
-      U.current = !1;
+    [m, h, i, f]
+  ), p = o(() => {
+    if (X.current || Date.now() < k.current) {
+      X.current = !1;
       return;
     }
-    V || ln(!0), f(K), O(p), v == null || v();
-  }, [V, v, K, p, f]), T = o(() => {
-    V || ln(!1), W == null || W();
-  }, [V, W]), M = o(() => {
-    z(), T();
-  }, [T, z]), yn = o(() => {
-    b.current = Date.now() + 200, M();
-  }, [M]), En = o(() => {
-    b.current = Date.now() + 200, T();
-  }, [T]), Dn = o((n) => {
+    z || fn(!0), f(B), N(R), q == null || q();
+  }, [z, q, B, R, f]), y = o(() => {
+    z || fn(!1), $ == null || $();
+  }, [z, $]), E = o(() => {
+    M(), y();
+  }, [y, M]), yn = o(() => {
+    k.current = Date.now() + 200, E();
+  }, [E]), kn = o(() => {
+    k.current = Date.now() + 200, y();
+  }, [y]), H = o((n) => {
     const e = C.current;
     e && window.requestAnimationFrame(() => {
-      var u;
-      (u = ae(e, n)) == null || u.focus();
+      var c;
+      (c = Te(e, n)) == null || c.focus();
     });
-  }, []), N = o(() => {
+  }, []), j = o(() => {
     window.requestAnimationFrame(() => {
       var n;
-      (n = mn.current) == null || n.focus();
+      (n = Tn.current) == null || n.focus();
     });
-  }, []), vn = o(
+  }, []), qn = o(
     (n) => {
-      mn.current = n, de(t == null ? void 0 : t.inputRef, n);
+      Tn.current = n, De(t == null ? void 0 : t.inputRef, n);
     },
     [t == null ? void 0 : t.inputRef]
-  ), Wn = /* @__PURE__ */ c(() => {
-    a == null || a(""), f("");
-  }, "handleClear"), Cn = o(
+  ), $n = o(
+    (n) => {
+      x.current = n, !(!n || !s) && (window.requestAnimationFrame(() => {
+        b();
+      }), window.setTimeout(() => {
+        b();
+      }));
+    },
+    [b, s]
+  ), Cn = /* @__PURE__ */ u(() => {
+    i == null || i(""), f("");
+  }, "handleClear"), Wn = o(
     (n) => {
-      const e = n.target.value, u = rn(e, m);
-      f(e), u != null && u.dateValue.isValid() && O(u.dateValue);
+      const e = n.target.value, c = cn(e, m);
+      f(e), c != null && c.dateValue.isValid() && N(c.dateValue);
     },
     [m, f]
-  ), Tn = o(
+  ), pn = o(
     (n) => {
       n.stopPropagation(), n.nativeEvent.stopImmediatePropagation();
     },
     []
-  ), Hn = o(
+  ), Xn = o(
     (n) => {
-      if (Tn(n), n.key === "Escape") {
-        n.preventDefault(), b.current = Date.now() + 200, f(K), O(p), T(), N();
+      if (pn(n), n.key === "Escape") {
+        n.preventDefault(), k.current = Date.now() + 200, f(B), N(R), y(), j();
         return;
       }
       if (n.key === "Tab") {
-        if (n.preventDefault(), !z(!0))
+        if (n.preventDefault(), !M(!0))
           return;
-        b.current = Date.now() + 200, T(), Dn(n.shiftKey);
+        k.current = Date.now() + 200, y(), H(n.shiftKey);
         return;
       }
-      n.key === "Enter" && (n.preventDefault(), z(!0) && (b.current = Date.now() + 200, T(), N()));
+      n.key === "Enter" && (n.preventDefault(), M(!0) && (k.current = Date.now() + 200, y(), j()));
     },
     [
-      T,
-      z,
-      Dn,
-      N,
-      K,
-      p,
+      y,
+      M,
+      H,
+      j,
+      B,
+      R,
       f,
-      Tn
+      pn
     ]
-  ), Un = o(
+  ), vn = o(
+    (n) => {
+      n.stopPropagation(), n.key === "Tab" && (n.preventDefault(), M(!0) && (k.current = Date.now() + 200, y(), H(n.shiftKey)));
+    },
+    [y, M, H]
+  ), Hn = o(
     (n) => {
       var e;
-      n.preventDefault(), n.stopPropagation(), a == null || a(""), f(""), O(null), (e = J.current) == null || e.focus();
+      n.preventDefault(), n.stopPropagation(), i == null || i(""), f(""), N(null), (e = x.current) == null || e.focus();
     },
-    [a, f]
-  ), qn = o(
+    [i, f]
+  ), Yn = o(
     (n, e) => {
       if (!(n != null && n.isValid()))
         return;
-      const u = n.format(y);
-      O(n), f(u), e === R[on] && (b.current = Date.now() + 200, a == null || a(u), En(), N());
+      const c = n.format(T);
+      N(n), f(c), e === g[ln] && (k.current = Date.now() + 200, i == null || i(c), kn(), j());
     },
     [
-      on,
-      En,
-      N,
-      y,
-      a,
+      ln,
+      kn,
+      j,
+      T,
+      i,
       f,
-      R
+      g
     ]
-  ), Xn = o(
+  ), Gn = o(
     (n) => {
       var e;
-      (e = t == null ? void 0 : t.onMouseDown) == null || e.call(t, n), H.current = !0;
+      (e = t == null ? void 0 : t.onMouseDown) == null || e.call(t, n), W.current = !0;
     },
     [t]
-  ), $n = o(
+  ), Jn = o(
     (n) => {
       var e;
-      (e = t == null ? void 0 : t.onFocus) == null || e.call(t, n), !(n.defaultPrevented || l.disabled || l.readOnly || s) && (Q.current = H.current, D());
+      (e = t == null ? void 0 : t.onFocus) == null || e.call(t, n), !(n.defaultPrevented || l.disabled || l.readOnly || s) && (F.current = W.current, p());
     },
-    [D, s, t, l.disabled, l.readOnly]
-  ), Yn = o(
+    [p, s, t, l.disabled, l.readOnly]
+  ), Qn = o(
     (n) => {
       var e;
       if ((e = t == null ? void 0 : t.onClick) == null || e.call(t, n), !(n.defaultPrevented || l.disabled || l.readOnly)) {
-        if (Q.current) {
-          Q.current = !1, H.current = !1;
+        if (F.current) {
+          F.current = !1, W.current = !1;
           return;
         }
-        if (H.current = !1, s) {
-          U.current = !0, M(), queueMicrotask(() => {
-            U.current = !1;
+        if (W.current = !1, s) {
+          X.current = !0, E(), queueMicrotask(() => {
+            X.current = !1;
           });
           return;
         }
-        D();
+        p();
       }
     },
     [
-      M,
-      D,
+      E,
+      p,
       s,
       t,
       l.disabled,
       l.readOnly
     ]
-  ), Gn = o(
+  ), Zn = o(
     (n) => {
       var e;
       if ((e = t == null ? void 0 : t.onKeyDown) == null || e.call(t, n), !(n.defaultPrevented || l.disabled || l.readOnly)) {
-        if (!s && fe(n)) {
-          n.preventDefault(), D();
+        if (!s && Ee(n)) {
+          n.preventDefault(), p();
           return;
         }
-        !s || !le(n) || M();
+        if (s && n.key === "Tab") {
+          k.current = Date.now() + 200, E();
+          return;
+        }
+        !s || !pe(n) || E();
       }
     },
     [
-      M,
-      D,
+      E,
+      p,
       s,
       t,
       l.disabled,
       l.readOnly
     ]
   );
-  return nn(() => {
-    s && (f(K), O(p));
-  }, [s, K, p, f]), nn(() => {
-    if (!s)
+  return rn(() => {
+    s && (f(B), N(R));
+  }, [s, B, R, f]), rn(() => {
+    if (!s || v.state !== "open")
       return;
     const n = window.requestAnimationFrame(() => {
-      var e;
-      (e = J.current) == null || e.focus();
-    });
+      b();
+    }), e = window.setTimeout(() => {
+      b();
+    }), c = window.setTimeout(() => {
+      b();
+    }, Mn);
     return () => {
-      window.cancelAnimationFrame(n);
+      window.cancelAnimationFrame(n), window.clearTimeout(e), window.clearTimeout(c);
     };
-  }, [s]), nn(() => {
+  }, [b, s, v.state]), rn(() => {
     if (!s)
       return;
-    const n = /* @__PURE__ */ c((e) => {
-      var j, wn;
-      const u = e.target;
-      u instanceof Node && ((j = C.current) != null && j.contains(u) || (wn = sn.current) != null && wn.contains(u) || yn());
+    const n = /* @__PURE__ */ u((e) => {
+      var U, Dn;
+      const c = e.target;
+      c instanceof Node && ((U = C.current) != null && U.contains(c) || (Dn = In.current) != null && Dn.contains(c) || yn());
     }, "handleDocumentMouseDown");
     return document.addEventListener("mousedown", n, !0), () => {
       document.removeEventListener("mousedown", n, !0);
     };
-  }, [yn, s]), /* @__PURE__ */ E(ne, { dateAdapter: ee, adapterLocale: Bn, children: /* @__PURE__ */ F("div", { ref: C, children: [
-    /* @__PURE__ */ E(
-      Fn,
+  }, [yn, s]), /* @__PURE__ */ w(re, { dateAdapter: ae, adapterLocale: Bn, children: /* @__PURE__ */ en("div", { ref: C, children: [
+    /* @__PURE__ */ w(
+      ee,
       {
         ...l,
         enableAccessibleFieldDOMStructure: !1,
-        ampm: A,
+        ampm: K,
         open: !1,
-        closeOnSelect: Rn,
-        timeSteps: un,
+        closeOnSelect: Kn,
+        timeSteps: sn,
         label: r,
-        value: p,
-        views: R,
-        format: An,
-        localeText: x,
-        onChange: jn,
-        onOpen: D,
-        onClose: M,
+        value: R,
+        views: g,
+        format: _n,
+        localeText: nn,
+        onChange: Un,
+        onOpen: p,
+        onClose: E,
         slots: {
-          ...hn,
-          inputAdornment: /* @__PURE__ */ c(({ position: n, children: e, ...u }) => /* @__PURE__ */ F(pn, { position: n, ...u, children: [
-            n === "end" && Nn && /* @__PURE__ */ E(
-              Mn,
+          ...Sn,
+          inputAdornment: /* @__PURE__ */ u(({ position: n, children: e, ...c }) => /* @__PURE__ */ en(bn, { position: n, ...c, children: [
+            n === "end" && jn && /* @__PURE__ */ w(
+              Rn,
               {
                 className: "clearButton",
                 size: "small",
                 tabIndex: -1,
-                "aria-label": x.clearButtonLabel,
+                "aria-label": nn.clearButtonLabel,
                 disabled: zn,
-                onClick: /* @__PURE__ */ c((j) => {
-                  j.preventDefault(), j.stopPropagation(), Wn();
+                onClick: /* @__PURE__ */ u((U) => {
+                  U.preventDefault(), U.stopPropagation(), Cn();
                 }, "onClick"),
-                children: /* @__PURE__ */ E(bn, { fontSize: "small" })
+                children: /* @__PURE__ */ w(An, { fontSize: "small" })
               }
             ),
             e
           ] }), "TimePickerInputAdornment")
         },
         slotProps: {
-          ...i,
+          ...a,
           openPickerButton: {
-            ...typeof (i == null ? void 0 : i.openPickerButton) == "function" || i == null ? void 0 : i.openPickerButton,
+            ...typeof (a == null ? void 0 : a.openPickerButton) == "function" || a == null ? void 0 : a.openPickerButton,
             size: "small",
             tabIndex: -1,
-            onClick: /* @__PURE__ */ c((n) => {
-              n.preventDefault(), n.stopPropagation(), s || D();
+            onClick: /* @__PURE__ */ u((n) => {
+              n.preventDefault(), n.stopPropagation(), s || p();
             }, "onClick"),
             sx: {
               margin: 0,
@@ -355,44 +381,44 @@ const tn = "––", oe = {
             }
           },
           openPickerIcon: {
-            ...typeof (i == null ? void 0 : i.openPickerIcon) == "function" || i == null ? void 0 : i.openPickerIcon,
+            ...typeof (a == null ? void 0 : a.openPickerIcon) == "function" || a == null ? void 0 : a.openPickerIcon,
             fontSize: "small"
           },
           inputAdornment: {
-            ...typeof (i == null ? void 0 : i.inputAdornment) == "function" || i == null ? void 0 : i.inputAdornment,
+            ...typeof (a == null ? void 0 : a.inputAdornment) == "function" || a == null ? void 0 : a.inputAdornment,
             sx: {
               marginBottom: 0,
               marginLeft: 0,
               gap: 0,
-              ...typeof (i == null ? void 0 : i.inputAdornment) == "function" || (kn = i == null ? void 0 : i.inputAdornment) == null ? void 0 : kn.sx
+              ...typeof (a == null ? void 0 : a.inputAdornment) == "function" || (En = a == null ? void 0 : a.inputAdornment) == null ? void 0 : En.sx
             }
           },
           textField: {
             variant: I,
-            fullWidth: L,
+            fullWidth: V,
             ...t,
-            className: te(
-              !L && (A ? "w-[160px]" : "w-[140px]"),
+            className: ie(
+              !V && (K ? "w-[160px]" : "w-[140px]"),
               t == null ? void 0 : t.className
             ),
-            onMouseDown: Xn,
-            onFocus: $n,
-            onClick: Yn,
-            onKeyDown: Gn,
-            inputRef: vn,
+            onMouseDown: Gn,
+            onFocus: Jn,
+            onClick: Qn,
+            onKeyDown: Zn,
+            inputRef: qn,
             placeholder: Ln,
             sx: Vn
           }
         }
       }
     ),
-    /* @__PURE__ */ E(
-      Zn,
+    v.shouldRender && /* @__PURE__ */ w(
+      Pn,
       {
-        open: s,
+        open: !0,
         anchorEl: C.current,
         placement: "bottom-end",
-        ref: sn,
+        ref: In,
         modifiers: [
           {
             name: "offset",
@@ -401,127 +427,101 @@ const tn = "––", oe = {
             }
           }
         ],
-        sx: { zIndex: /* @__PURE__ */ c((n) => n.zIndex.modal, "zIndex") },
-        children: /* @__PURE__ */ F(
-          xn,
+        sx: { zIndex: /* @__PURE__ */ u((n) => n.zIndex.modal, "zIndex") },
+        children: /* @__PURE__ */ w(
+          "div",
           {
-            elevation: 8,
-            onClick: /* @__PURE__ */ c((n) => {
-              n.stopPropagation();
-            }, "onClick"),
-            onKeyDown: /* @__PURE__ */ c((n) => {
-              n.stopPropagation();
-            }, "onKeyDown"),
-            onKeyUp: /* @__PURE__ */ c((n) => {
-              n.stopPropagation();
-            }, "onKeyUp"),
-            onMouseDown: /* @__PURE__ */ c((n) => {
-              n.stopPropagation();
-            }, "onMouseDown"),
-            sx: {
-              borderRadius: 1,
-              lineHeight: 0,
-              overflow: "hidden",
-              width: G
+            className: "owp-animated-picker-popper",
+            "data-state": v.state,
+            style: {
+              "--owp-calendar-transition-duration": `${Mn}ms`,
+              "--owp-calendar-transform-transition-duration": `${Ie}ms`,
+              "--owp-calendar-exit-transform-delay": `${me}ms`
             },
-            children: [
-              /* @__PURE__ */ E(
-                ue,
-                {
-                  autoFocus: !0,
-                  inputRef: J,
-                  fullWidth: !0,
-                  size: "small",
-                  variant: "outlined",
-                  value: _,
-                  error: fn,
-                  helperText: fn ? Z(re) : void 0,
-                  mask: ce(y),
-                  placeholder: y,
-                  onChange: Cn,
-                  onKeyDown: Hn,
-                  inputProps: {
-                    inputMode: "numeric",
-                    "aria-label": y
-                  },
-                  endAdornment: /* @__PURE__ */ E(
-                    pn,
+            children: /* @__PURE__ */ en(
+              ne,
+              {
+                elevation: 8,
+                onClick: /* @__PURE__ */ u((n) => {
+                  n.stopPropagation();
+                }, "onClick"),
+                onKeyDown: vn,
+                onKeyUp: /* @__PURE__ */ u((n) => {
+                  n.stopPropagation();
+                }, "onKeyUp"),
+                onMouseDown: /* @__PURE__ */ u((n) => {
+                  n.stopPropagation();
+                }, "onMouseDown"),
+                sx: se(Z),
+                children: [
+                  /* @__PURE__ */ w(
+                    ye,
                     {
-                      position: "end",
-                      sx: {
-                        marginLeft: 0
+                      autoFocus: !0,
+                      inputRef: $n,
+                      fullWidth: !0,
+                      size: "small",
+                      variant: "outlined",
+                      value: h,
+                      error: dn,
+                      helperText: dn ? P(ue) : void 0,
+                      mask: we(T),
+                      placeholder: T,
+                      onChange: Wn,
+                      onKeyDown: Xn,
+                      inputProps: {
+                        inputMode: "numeric",
+                        "aria-label": T
                       },
-                      children: /* @__PURE__ */ E(
-                        Mn,
+                      endAdornment: /* @__PURE__ */ w(
+                        bn,
                         {
-                          size: "small",
-                          tabIndex: -1,
-                          "aria-label": x.clearButtonLabel,
-                          disabled: !_,
-                          onClick: Un,
-                          onMouseDown: /* @__PURE__ */ c((n) => {
-                            n.preventDefault(), n.stopPropagation();
-                          }, "onMouseDown"),
+                          position: "end",
                           sx: {
-                            margin: 0,
-                            padding: 0.25
+                            marginLeft: 0
                           },
-                          children: /* @__PURE__ */ E(bn, { fontSize: "small" })
+                          children: /* @__PURE__ */ w(
+                            Rn,
+                            {
+                              size: "small",
+                              tabIndex: -1,
+                              "aria-label": nn.clearButtonLabel,
+                              disabled: !h,
+                              onClick: Hn,
+                              onMouseDown: /* @__PURE__ */ u((n) => {
+                                n.preventDefault(), n.stopPropagation();
+                              }, "onMouseDown"),
+                              sx: {
+                                margin: 0,
+                                padding: 0.25
+                              },
+                              children: /* @__PURE__ */ w(An, { fontSize: "small" })
+                            }
+                          )
                         }
-                      )
+                      ),
+                      sx: le(Z)
                     }
                   ),
-                  sx: {
-                    boxSizing: "border-box",
-                    width: G,
-                    px: 1,
-                    py: 1,
-                    "& .MuiOutlinedInput-root": {
-                      borderRadius: 0.75,
-                      fontSize: 13,
-                      paddingRight: 0.5
-                    }
-                  }
-                }
-              ),
-              /* @__PURE__ */ E(
-                Pn,
-                {
-                  ampm: A,
-                  value: Kn,
-                  views: R,
-                  onChange: /* @__PURE__ */ c((n, e, u) => qn(n, u), "onChange"),
-                  timeSteps: un,
-                  slotProps: {
-                    digitalClockSectionItem: {
-                      sx: ie
-                    }
-                  },
-                  sx: {
-                    border: 0,
-                    width: G,
-                    "& .MuiMultiSectionDigitalClockSection-root": {
-                      border: 0,
-                      boxSizing: "border-box",
-                      width: en,
-                      flex: `0 0 ${en}px`,
-                      display: "flex",
-                      flexDirection: "column",
-                      alignItems: "stretch"
-                    },
-                    "& .MuiMultiSectionDigitalClockSection-item": {
-                      alignSelf: "stretch",
-                      boxSizing: "border-box",
-                      width: gn,
-                      minWidth: gn,
-                      justifyContent: "center",
-                      marginLeft: "auto",
-                      marginRight: "auto"
+                  /* @__PURE__ */ w(
+                    te,
+                    {
+                      ampm: K,
+                      value: Nn,
+                      views: g,
+                      onChange: /* @__PURE__ */ u((n, e, c) => Yn(n, c), "onChange"),
+                      timeSteps: sn,
+                      slotProps: {
+                        digitalClockSectionItem: {
+                          sx: oe
+                        }
+                      },
+                      sx: fe(Z)
                     }
-                  }
-                }
-              )
-            ]
+                  )
+                ]
+              }
+            )
           }
         )
       }
@@ -529,6 +529,6 @@ const tn = "––", oe = {
   ] }) });
 }, "OwpTimePicker");
 export {
-  Ae as OwpTimePicker
+  qe as OwpTimePicker
 };
 //# sourceMappingURL=OwpTimePicker.js.map