se-design 1.0.90-dev.0 → 1.0.91-r-dev.1

package/dist/index51.js

@@ -1,464 +1,201 @@
-import r, { useState as S } from "react";
-import { Button as z } from "./index4.js";
-import { Icon as _ } from "./index6.js";
-import { Dropdown as te } from "./index25.js";
-import { useDatePickerA11y as Fe, formatDateId as Pe, getCellAriaLabel as Ce } from "./index245.js";
+import t, { useState as h, useRef as f, useCallback as g, useEffect as P } from "react";
 /* empty css         */
-function T() {
-  return T = Object.assign ? Object.assign.bind() : function(p) {
-    for (var m = 1; m < arguments.length; m++) {
-      var v = arguments[m];
-      for (var w in v) ({}).hasOwnProperty.call(v, w) && (p[w] = v[w]);
+import C from "./index238.js";
+import { Icon as H } from "./index6.js";
+import { useStableId as b } from "./index211.js";
+import { getA11yNameAttributes as J } from "./index86.js";
+import "./index77.js";
+import { useCombobox as le } from "./index73.js";
+function c() {
+  return c = Object.assign ? Object.assign.bind() : function(i) {
+    for (var l = 1; l < arguments.length; l++) {
+      var r = arguments[l];
+      for (var u in r) ({}).hasOwnProperty.call(r, u) && (i[u] = r[u]);
     }
-    return p;
-  }, T.apply(null, arguments);
+    return i;
+  }, c.apply(null, arguments);
 }
-const Oe = ["S", "M", "T", "W", "T", "F", "S"], Se = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], Te = ["Today", "Yesterday", "This Week", "Last Week", "This Month", "Last Month"], q = [{
-  value: "january",
-  label: "January"
-}, {
-  value: "february",
-  label: "February"
-}, {
-  value: "march",
-  label: "March"
-}, {
-  value: "april",
-  label: "April"
-}, {
-  value: "may",
-  label: "May"
-}, {
-  value: "june",
-  label: "June"
-}, {
-  value: "july",
-  label: "July"
-}, {
-  value: "august",
-  label: "August"
-}, {
-  value: "september",
-  label: "September"
-}, {
-  value: "october",
-  label: "October"
-}, {
-  value: "november",
-  label: "November"
-}, {
-  value: "december",
-  label: "December"
-}], Re = (p, m) => new Date(p, m + 1, 0).getDate(), je = (p, m) => new Date(p, m, 1).getDay(), ze = ({
-  title: p = "Select modified date",
-  // isOpen = true,
-  showHeader: m = !0,
-  initialStartDate: v,
-  initialEndDate: w,
-  onApply: R = () => {
-  },
-  onClose: j,
-  shouldAllowFutureDateSelection: F = !1,
-  maxDays: g,
-  disablePastDates: A = !1,
-  singleDateSelection: P = !1,
-  minYearOption: ae,
-  showQuickActions: ne = !1,
-  showSingleMonth: h = !1,
-  className: re = "",
-  automationId: y = "datepicker",
-  labels: J = {
-    clear: "Clear",
-    apply: "Apply"
-  }
+const ye = ({
+  onCountrycodeChange: i,
+  onNumberChange: l,
+  error: r,
+  errorMessage: u,
+  value: d,
+  label: s,
+  automationId: p = "",
+  ariaLabel: M,
+  ariaLabelledBy: T,
+  ariaDescribedBy: z,
+  phoneNumberAriaLabel: x,
+  countryCodeAriaLabel: G,
+  disabled: a = !1
 }) => {
-  const oe = () => {
-    if (v && w)
-      return {
-        startDate: v,
-        endDate: w
-      };
-    const t = /* @__PURE__ */ new Date();
-    t.setHours(23, 59, 59, 999);
-    const e = /* @__PURE__ */ new Date();
-    return e.setHours(0, 0, 0, 0), {
-      startDate: e,
-      endDate: t
+  const [v, A] = h(d?.countryCode || C[0].dial_code), [n, y] = h(!1), [w, $] = h(C), [Q, k] = h(""), [U, R] = h(""), W = f(null), F = f(null), O = f(null), m = f(!1), N = b(p, "phone-label"), B = b(p, "phone-listbox"), X = b(p, "phone-input"), K = b(p, "phone-error"), E = C.find((e) => e.dial_code === v), V = g(() => {
+    y(!1), k(""), $(C);
+  }, []), I = g((e) => {
+    e && (A(e), i(e)), V();
+  }, [i, V]), Y = g((e) => {
+    m.current = !0, I(e.dial_code);
+  }, [I]), {
+    containerProps: j,
+    inputProps: Z,
+    listboxProps: ee,
+    getOptionProps: te,
+    highlightedIndex: ne,
+    setHighlightedIndex: q
+  } = le({
+    items: w,
+    isOpen: n,
+    onOpenChange: y,
+    onSelect: Y,
+    listboxId: B
+  }), oe = (e) => {
+    const o = e.target.value;
+    k(o), q(-1);
+    const _ = C.filter((L) => L.name.toLowerCase().includes(o.toLowerCase()) || L.dial_code.toLowerCase().includes(o.toLowerCase()) || L.code.toLowerCase().includes(o.toLowerCase()));
+    $(_);
+  }, D = f(n);
+  P(() => {
+    let e = null;
+    return D.current && !n && m.current && (e = requestAnimationFrame(() => {
+      F.current?.focus();
+    })), D.current && !n && (m.current = !1), D.current = n, () => {
+      e !== null && cancelAnimationFrame(e);
     };
-  }, se = () => {
-    const t = /* @__PURE__ */ new Date(), e = /* @__PURE__ */ new Date();
-    return t.setDate(1), e.setDate(1), h || e.setMonth(e.getMonth() - 1), t.setHours(0, 0, 0, 0), e.setHours(0, 0, 0, 0), [e, t];
-  }, [l, M] = S(oe), [Q] = S(se), [x, W] = S(() => Q[0]), [C, G] = S(() => Q[1]), V = (t, e) => t.getTime() > e.getTime() ? [e, t] : [t, e], N = (t, e) => {
-    if (h) {
-      W(t);
-      return;
-    }
-    if (e) {
-      const [a, n] = V(t, C);
-      W(a), n !== C && G(n);
-    } else {
-      const [a, n] = V(x, t);
-      a !== x && W(a), G(n);
-    }
-  }, {
-    getGridCellProps: le,
-    getLeftContainerProps: ce,
-    getRightContainerProps: ie
-  } = Fe({
-    leftMonth: x,
-    rightMonth: C,
-    showSingleMonth: h,
-    selectedRange: l,
-    onMonthChange: N
-  }), ue = (t, e) => {
-    const a = Re(t, e), n = je(t, e), d = [];
-    for (let c = 0; c < n; c++)
-      d.push(null);
-    for (let c = 1; c <= a; c++) {
-      const u = new Date(t, e, c);
-      u.setHours(0, 0, 0, 0), d.push(u);
-    }
-    return d;
-  }, O = (t, e) => t.getDate() === e.getDate() && t.getMonth() === e.getMonth() && t.getFullYear() === e.getFullYear(), de = (t) => {
-    if (!l.startDate || !l.endDate) return !1;
-    const e = new Date(t);
-    e.setHours(12, 0, 0, 0);
-    const a = new Date(l.startDate);
-    a.setHours(0, 0, 0, 0);
-    const n = new Date(l.endDate);
-    return n.setHours(23, 59, 59, 999), e >= a && e <= n;
-  }, ge = (t) => {
-    const e = /* @__PURE__ */ new Date();
-    return t.getDate() === e.getDate() && t.getMonth() === e.getMonth() && t.getFullYear() === e.getFullYear();
-  }, I = (t) => {
-    if (!t) return !0;
-    const e = /* @__PURE__ */ new Date();
-    e.setHours(0, 0, 0, 0);
-    const a = new Date(t);
-    if (a.setHours(0, 0, 0, 0), A && a < e)
-      return !0;
-    if (g != null) {
-      const n = new Date(e);
-      return n.setDate(n.getDate() + g), n.setHours(0, 0, 0, 0), a > n;
-    }
-    return F ? !1 : a > e;
-  }, De = (t) => {
-    if (I(t)) return;
-    const e = new Date(t);
-    if (e.setHours(12, 0, 0, 0), P) {
-      M({
-        startDate: e,
-        endDate: e
-      }), R({
-        startDate: e,
-        endDate: e
-      }), j?.();
-      return;
-    }
-    if (!l.startDate || l.endDate)
-      M({
-        startDate: e,
-        endDate: null
-      });
-    else {
-      const a = new Date(l.startDate);
-      a.setHours(12, 0, 0, 0);
-      const n = e > a ? e : a, d = e > a ? a : e;
-      M({
-        startDate: d,
-        endDate: n
-      });
-    }
-  }, K = (t, e) => {
-    const a = new Date(t);
-    return a.setMonth(a.getMonth() + (e ? 1 : -1)), a;
-  }, me = (t) => l?.startDate ? O(t, l.startDate) : !1, fe = (t) => l?.endDate ? O(t, l?.endDate) : !1, pe = (t) => !l.startDate || !l.endDate ? !1 : O(l.startDate, l.endDate) && O(t, l.startDate), he = (t, e) => {
-    const a = ae || t - 10;
-    let n = F ? t + 10 : t;
-    if (g) {
-      const c = /* @__PURE__ */ new Date(), u = new Date(c);
-      u.setDate(u.getDate() + g);
-      const b = u.getFullYear();
-      n = Math.min(n, b);
-    }
-    n = Math.max(n, e);
-    const d = n - a + 1;
-    return Array.from({
-      length: d
-    }, (c, u) => ({
-      value: a + u,
-      label: (a + u).toString()
-    })).filter((c) => {
-      if (c.value === e)
-        return !0;
-      if (!F && c.value > t)
-        return !1;
-      if (g) {
-        const u = /* @__PURE__ */ new Date(), b = new Date(u);
-        return b.setDate(b.getDate() + g), c.value <= b.getFullYear();
+  }, [n]), P(() => {
+    d && (A(d.countryCode), R(d.number));
+  }, [d]), P(() => {
+    let e = null;
+    return n && (e = requestAnimationFrame(() => {
+      O.current?.focus();
+    })), () => {
+      e !== null && cancelAnimationFrame(e);
+    };
+  }, [n]);
+  const re = (e) => {
+    const o = e.replace(/\D/g, "");
+    R(o), l(o);
+  }, S = g(() => {
+    a || y((e) => !e);
+  }, [a]), ae = g((e) => {
+    if (!a)
+      switch (e.key) {
+        case "Enter":
+        case " ":
+          e.preventDefault(), S();
+          break;
+        case "ArrowDown":
+          e.preventDefault(), n || y(!0);
+          break;
       }
-      return !0;
-    });
-  }, be = () => {
-    const t = /* @__PURE__ */ new Date(), e = /* @__PURE__ */ new Date();
-    e.setHours(0, 0, 0, 0), t.setHours(23, 59, 59, 999), M({
-      startDate: e,
-      endDate: t
-    });
-  }, k = (t) => {
-    const e = new Date(t);
-    return e.setHours(0, 0, 0, 0), e;
-  }, E = (t) => {
-    const e = new Date(t);
-    return e.setHours(23, 59, 59, 999), e;
-  }, ve = (t) => {
-    const e = /* @__PURE__ */ new Date();
-    let a = /* @__PURE__ */ new Date(), n = /* @__PURE__ */ new Date();
-    switch (t) {
-      case "Today":
-        a = k(e), n = E(e);
-        break;
-      case "Yesterday":
-        a = k(new Date(e.setDate(e.getDate() - 1))), n = E(new Date(e));
-        break;
-      case "This Week":
-        const d = new Date(e.setDate(e.getDate() - e.getDay()));
-        a = k(d), n = E(/* @__PURE__ */ new Date());
-        break;
-      case "Last Week":
-        const c = new Date(e.setDate(e.getDate() - e.getDay() - 7)), u = new Date(e.setDate(c.getDate() + 6));
-        a = k(c), n = E(u);
-        break;
-      case "This Month":
-        a = k(new Date(e.getFullYear(), e.getMonth(), 1)), n = E(/* @__PURE__ */ new Date());
-        break;
-      case "Last Month":
-        a = k(new Date(e.getFullYear(), e.getMonth() - 1, 1)), n = E(new Date(e.getFullYear(), e.getMonth(), 0));
-        break;
-    }
-    M({
-      startDate: a,
-      endDate: n
-    });
-  }, we = () => /* @__PURE__ */ r.createElement("div", {
-    className: "w-[147px] p-4 border-r border-[var(--color-gray-200)]"
-  }, /* @__PURE__ */ r.createElement("div", {
-    role: "group",
-    "aria-label": "Quick date selections",
-    className: "flex flex-col gap-3"
-  }, Te.map((t) => /* @__PURE__ */ r.createElement(z, {
-    key: t,
-    label: t,
-    type: "link",
-    onClick: () => ve(t)
-  })))), ye = () => {
-    const {
-      startDate: t = null,
-      endDate: e = null
-    } = l;
-    if (t && e) {
-      R({
-        startDate: t,
-        endDate: e
-      });
-      return;
-    }
-    if (t || e) {
-      const a = t || e;
-      R({
-        startDate: a,
-        endDate: a
-      });
+  }, [a, n, S]), ce = J({
+    ariaLabelledBy: T,
+    internalLabelId: s ? N : void 0,
+    ariaLabel: M || (s ? void 0 : "Phone number")
+  }), se = J({
+    ariaLabelledBy: !x && s ? N : void 0,
+    ariaLabel: x || (s ? void 0 : "Phone number"),
+    ariaDescribedBy: r ? K : z
+  }), ie = G || `Select country code. Current: ${E?.name} ${E?.dial_code}`;
+  return /* @__PURE__ */ t.createElement("div", c({
+    className: "phone-input-container-se-design-main-container",
+    "data-automation-id": p
+  }, j, {
+    onKeyDownCapture: (e) => {
+      e.key === "Escape" && n && (m.current = !0), j.onKeyDownCapture(e);
     }
-  }, U = (t, e) => {
-    const a = t.getFullYear(), n = t.getMonth(), d = ue(a, n), c = (/* @__PURE__ */ new Date()).getFullYear(), u = he(c, a), b = new Date(a, n, 1).toLocaleString("en-US", {
-      month: "long",
-      year: "numeric"
-    }), ke = e ? ce : ie, X = `calendar-instructions-${e ? "left" : "right"}`, Ee = P ? "Press Enter or Space to select a date. Use arrow keys to navigate days, Page Up and Page Down to change months." : "Press Enter or Space to select a start date, then again to select an end date. Use arrow keys to navigate days, Page Up and Page Down to change months.", Me = le({
-      isLeftCalendar: e,
-      isDateDisabled: I,
-      handleDateClick: De
-    }), Z = [];
-    for (let o = 0; o < d.length; o += 7) {
-      const s = d.slice(o, o + 7);
-      for (; s.length < 7; ) s.push(null);
-      Z.push(s);
-    }
-    const $ = /* @__PURE__ */ new Date(), xe = A && t.getMonth() === $.getMonth() && t.getFullYear() === $.getFullYear(), Ne = !F && n === $.getMonth() && a === $.getFullYear() || g !== void 0 && (() => {
-      const o = new Date($);
-      return o.setDate(o.getDate() + g), t.getMonth() === o.getMonth() && t.getFullYear() === o.getFullYear();
-    })();
-    return /* @__PURE__ */ r.createElement("div", {
-      className: "se-design-calendar-container w-fit p-4"
-    }, /* @__PURE__ */ r.createElement("div", {
-      className: "flex justify-between items-center"
-    }, /* @__PURE__ */ r.createElement(_, {
-      name: "chevron",
-      rotation: "90",
-      size: 16,
-      disabled: xe,
-      onClick: () => {
-        const o = K(t, !1);
-        if (A) {
-          const s = /* @__PURE__ */ new Date();
-          if (s.setHours(0, 0, 0, 0), o < s && o.getMonth() !== s.getMonth())
-            return;
-        }
-        N(o, e);
-      },
-      automationId: `${y}-previous-month`,
-      ariaLabel: h ? "Previous month" : e ? "Previous month of starting date" : "Previous month of end date"
-    }), /* @__PURE__ */ r.createElement("div", {
-      className: "flex gap-2",
-      onClick: (o) => o.stopPropagation()
-    }, /* @__PURE__ */ r.createElement(te, {
-      type: "select",
-      dropDownOptions: q,
-      defaultSelectedValue: q[n],
-      selectBy: "label",
-      optionsUniqueBy: "value",
-      displaySelected: !0,
-      label: h ? "Month" : e ? "Start month" : "End month",
-      firstOptionAsHeading: !0,
-      onOptionClick: (o) => {
-        const s = new Date(t);
-        s.setMonth(q.findIndex((i) => i.value === o.value)), N(s, e);
-      },
-      className: "w-[124px] dropdown-option-container"
-    }), /* @__PURE__ */ r.createElement(te, {
-      type: "select",
-      dropDownOptions: u,
-      defaultSelectedValue: u.find((o) => o.value === a),
-      selectBy: "label",
-      optionsUniqueBy: "value",
-      displaySelected: !0,
-      label: h ? "Year" : e ? "Start year" : "End year",
-      firstOptionAsHeading: !0,
-      onOptionClick: (o) => {
-        const s = new Date(t);
-        s.setFullYear(o.value), N(s, e);
-      },
-      className: "w-[104px] dropdown-option-container"
-    })), /* @__PURE__ */ r.createElement(_, {
-      name: "chevron",
-      rotation: "270",
-      size: 16,
-      disabled: Ne,
+  }), s && /* @__PURE__ */ t.createElement("div", {
+    id: N,
+    className: "label-container"
+  }, s), /* @__PURE__ */ t.createElement("div", c({
+    role: "group"
+  }, ce, {
+    className: `phone-input-container-se-design-main ${r ? "error" : ""}`,
+    ref: W
+  }), /* @__PURE__ */ t.createElement("div", {
+    className: "phone-input-container-se-design"
+  }, /* @__PURE__ */ t.createElement("button", {
+    ref: F,
+    type: "button",
+    className: `phone-input-container-se-design-country-code focus-outline rounded ${a ? "cursor-not-allowed opacity-60" : ""}`,
+    onClick: S,
+    onKeyDown: ae,
+    "aria-haspopup": "listbox",
+    "aria-expanded": n,
+    "aria-controls": n ? B : void 0,
+    "aria-label": ie,
+    disabled: a,
+    "data-automation-id": "country-code-selector"
+  }, /* @__PURE__ */ t.createElement("img", {
+    src: `https://flagcdn.com/${E?.code.toLowerCase()}.svg`,
+    alt: "",
+    "aria-hidden": "true",
+    width: "16"
+  }), /* @__PURE__ */ t.createElement("span", null, E?.dial_code), /* @__PURE__ */ t.createElement(H, {
+    name: "chevron",
+    className: n ? "rotate-180" : "",
+    "aria-hidden": "true"
+  })), /* @__PURE__ */ t.createElement("span", {
+    className: "divider",
+    "aria-hidden": "true"
+  }), /* @__PURE__ */ t.createElement("input", c({
+    id: X,
+    type: "tel",
+    placeholder: "Enter phone number",
+    className: `phone-input-container-se-design-phone-number-input ${a ? "disabled" : ""}`,
+    onChange: (e) => re(e.target.value),
+    value: U,
+    pattern: "[0-9]*",
+    disabled: a,
+    "aria-invalid": r || void 0
+  }, se, {
+    "data-automation-id": "phone-number-input-field"
+  }))), n && /* @__PURE__ */ t.createElement("div", c({}, ee, {
+    className: "phone-input-container-se-design-country-code-list",
+    "aria-label": "Select country",
+    "data-automation-id": "country-code-list"
+  }), /* @__PURE__ */ t.createElement("div", {
+    className: "search-input-wrapper"
+  }, /* @__PURE__ */ t.createElement(H, {
+    name: "search",
+    className: "search-icon",
+    "aria-hidden": "true"
+  }), /* @__PURE__ */ t.createElement("input", c({
+    ref: O
+  }, Z, {
+    type: "text",
+    placeholder: "Search countries",
+    className: "phone-input-container-se-design-country-code-list-item-input",
+    onChange: oe,
+    value: Q,
+    "aria-label": "Search countries",
+    "data-automation-id": "country-code-search-input"
+  }))), w.length > 0 ? w.map((e, o) => {
+    const _ = te(o, e.dial_code === v);
+    return /* @__PURE__ */ t.createElement("div", c({
+      key: e.code
+    }, _, {
+      className: `phone-input-container-se-design-country-code-list-item ${ne === o ? "highlighted" : ""} ${e.dial_code === v ? "selected" : ""}`,
       onClick: () => {
-        const o = K(t, !0);
-        if (g !== void 0) {
-          const s = /* @__PURE__ */ new Date(), i = new Date(s);
-          if (i.setDate(i.getDate() + g), o > i)
-            return;
-        }
-        N(o, e);
+        m.current = !0, I(e.dial_code);
       },
-      automationId: `${y}-next-month`,
-      ariaLabel: h ? "Next month" : e ? "Next month of starting date" : "Next month of end date"
-    })), /* @__PURE__ */ r.createElement("span", {
-      id: X,
-      className: "sr-only"
-    }, Ee), /* @__PURE__ */ r.createElement("div", T({}, ke({
-      ariaLabel: b,
-      ariaDescribedBy: X
-    }), {
-      className: "mt-3"
-    }), /* @__PURE__ */ r.createElement("div", {
-      role: "row",
-      className: "grid grid-cols-7 gap-2"
-    }, Oe.map((o, s) => /* @__PURE__ */ r.createElement("abbr", {
-      key: `${o}-${s}`,
-      role: "columnheader",
-      title: Se[s],
-      className: "datepicker-weekdays"
-    }, o))), Z.map((o, s) => /* @__PURE__ */ r.createElement("div", {
-      key: s,
-      role: "row",
-      className: "grid grid-cols-7 gap-2"
-    }, o.map((i, $e) => {
-      if (!i)
-        return /* @__PURE__ */ r.createElement("div", {
-          key: `empty-${s}-${$e}`,
-          role: "gridcell",
-          "aria-hidden": "true",
-          className: "h-10 w-10"
-        });
-      const ee = Pe(i), D = me(i), f = fe(i), H = pe(i), B = !D && !f && de(i), L = ge(i), Y = I(i), {
-        ref: He,
-        ...Ye
-      } = Me({
-        cellId: ee,
-        cellDate: i,
-        disabled: Y,
-        ariaLabel: Ce(i, D, f, H, P, B),
-        ariaCurrent: L ? "date" : void 0,
-        ariaDisabled: Y || void 0
-      });
-      return /* @__PURE__ */ r.createElement("div", {
-        key: ee,
-        role: "gridcell",
-        "aria-selected": D || f || void 0,
-        className: "relative h-10 w-10"
-      }, /* @__PURE__ */ r.createElement("button", T({
-        type: "button"
-      }, Ye, {
-        ref: He,
-        className: `
-                        datepicker-cell-button
-                        h-full w-full flex items-center justify-center
-                        rounded-md focus-outline transition-colors
-                        ${Y ? "cursor-not-allowed text-[var(--color-gray-600)] hover:bg-transparent" : "cursor-pointer"}
-                        ${H ? "bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-600)]" : ""}
-                        ${!H && D ? "bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-600)]" : ""}
-                        ${!H && f ? "bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-600)]" : ""}
-                        ${!D && !f && B ? "bg-[var(--color-blue-100)] text-[var(--color-blue-600)] outline outline-1 outline-[var(--color-blue-500)]" : ""}
-                        ${!D && !f && !B && !Y ? "hover:bg-[var(--color-blue-100)] hover:outline hover:outline-1 hover:outline-[var(--color-blue-500)]" : ""}
-                        ${L && !D && !f ? "text-[var(--color-blue-500)] bg-[var(--color-blue-100)] outline outline-1 outline-[var(--color-blue-500)]" : ""}
-                        ${!Y && !D && !f && !L ? "text-[var(--color-blue-500)]" : ""}
-                      `,
-        "data-automation-id": `${y}-date-${i.getDate()}`
-      }), i.getDate()), !H && (D || f) && /* @__PURE__ */ r.createElement("div", {
-        "aria-hidden": "true",
-        className: `absolute top-0 bottom-0 ${D ? "right-[-8px]" : "left-[-8px]"} w-[8px]
-                        bg-[var(--color-blue-100)] -z-10`
-      }));
-    })))));
-  };
-  return /* @__PURE__ */ r.createElement("div", {
-    className: `se-design-datepicker-container flex flex-col bg-[var(--color-white)] rounded-md shadow-md w-max max-w-full ${re}`
-  }, m && /* @__PURE__ */ r.createElement("div", {
-    className: "se-design-datepicker-header flex justify-between items-center border-b border-[var(--color-gray-200)] p-4"
-  }, /* @__PURE__ */ r.createElement("h2", {
-    className: "datepicker-title"
-  }, p), j && /* @__PURE__ */ r.createElement(_, {
-    name: "close",
-    size: 16,
-    onClick: j,
-    className: "cursor-pointer",
-    automationId: `${y}-close`,
-    ariaLabel: "Close date picker"
-  })), /* @__PURE__ */ r.createElement("div", {
-    className: "se-design-datepicker-content flex"
-  }, ne && we(), /* @__PURE__ */ r.createElement("div", {
-    className: "flex"
-  }, h ? U(x, !0) : /* @__PURE__ */ r.createElement(r.Fragment, null, U(x, !0), /* @__PURE__ */ r.createElement("div", {
-    className: "h-full w-[1px] border-r border-[var(--color-gray-200)]",
-    "aria-hidden": "true"
-  }), U(C, !1)))), !P && /* @__PURE__ */ r.createElement("div", {
-    className: "se-design-datepicker-footer flex justify-end items-center gap-5 p-4 border-t border-[var(--color-gray-200)]"
-  }, /* @__PURE__ */ r.createElement(z, {
-    label: J?.clear || "Clear",
-    type: "ghost",
-    onClick: be,
-    "data-automation-id": `${y}-clear-button`
-  }), /* @__PURE__ */ r.createElement(z, {
-    label: J?.apply || "Apply",
-    type: "primary",
-    onClick: ye,
-    "data-automation-id": `${y}-apply-button`
-  })));
+      onMouseEnter: () => q(o)
+    }), /* @__PURE__ */ t.createElement("img", {
+      src: `https://flagcdn.com/${e.code.toLowerCase()}.svg`,
+      alt: "",
+      "aria-hidden": "true",
+      width: "16"
+    }), /* @__PURE__ */ t.createElement("span", null, e.name), /* @__PURE__ */ t.createElement("span", null, "(", e.dial_code, ")"));
+  }) : /* @__PURE__ */ t.createElement("div", {
+    className: "phone-input-container-se-design-country-code-list-item-no-results",
+    role: "status"
+  }, "No results found"))), r && /* @__PURE__ */ t.createElement("div", {
+    id: K,
+    className: "error-message",
+    role: "alert"
+  }, u));
 };
 export {
-  ze as DatePicker
+  ye as PhoneInput
 };
 //# sourceMappingURL=index51.js.map