@konstructio/ui 0.1.2-alpha.3 → 0.1.2-alpha.30

package/dist/components/PhoneNumberInput/components/FlagSelectorList/FlagSelectorList.js

@@ -0,0 +1,629 @@
+import { jsx as f, jsxs as N } from "react/jsx-runtime";
+import * as y from "react";
+import { useRef as R, useMemo as F, useEffect as T } from "react";
+import { flushSync as k } from "react-dom";
+import { Typography as w } from "../../../Typography/Typography.js";
+import { TruncateText as D } from "../TruncateText/TruncateText.js";
+import { usePhoneNumberContext as A } from "../../contexts/phone-number.hook.js";
+function b(r, l, e) {
+  let t = e.initialDeps ?? [], s;
+  function i() {
+    var n, o, a, c;
+    let h;
+    e.key && ((n = e.debug) != null && n.call(e)) && (h = Date.now());
+    const u = r();
+    if (!(u.length !== t.length || u.some((m, p) => t[p] !== m)))
+      return s;
+    t = u;
+    let g;
+    if (e.key && ((o = e.debug) != null && o.call(e)) && (g = Date.now()), s = l(...u), e.key && ((a = e.debug) != null && a.call(e))) {
+      const m = Math.round((Date.now() - h) * 100) / 100, p = Math.round((Date.now() - g) * 100) / 100, E = p / 16, x = (v, _) => {
+        for (v = String(v); v.length < _; )
+          v = " " + v;
+        return v;
+      };
+      console.info(
+        `%c⏱ ${x(p, 5)} /${x(m, 5)} ms`,
+        `
+            font-size: .6rem;
+            font-weight: bold;
+            color: hsl(${Math.max(
+          0,
+          Math.min(120 - 120 * E, 120)
+        )}deg 100% 31%);`,
+        e?.key
+      );
+    }
+    return (c = e?.onChange) == null || c.call(e, s), s;
+  }
+  return i.updateDeps = (n) => {
+    t = n;
+  }, i;
+}
+function S(r, l) {
+  if (r === void 0)
+    throw new Error("Unexpected undefined");
+  return r;
+}
+const V = (r, l) => Math.abs(r - l) < 1.01, W = (r, l, e) => {
+  let t;
+  return function(...s) {
+    r.clearTimeout(t), t = r.setTimeout(() => l.apply(this, s), e);
+  };
+}, z = (r) => {
+  const { offsetWidth: l, offsetHeight: e } = r;
+  return { width: l, height: e };
+}, L = (r) => r, j = (r) => {
+  const l = Math.max(r.startIndex - r.overscan, 0), e = Math.min(r.endIndex + r.overscan, r.count - 1), t = [];
+  for (let s = l; s <= e; s++)
+    t.push(s);
+  return t;
+}, P = (r, l) => {
+  const e = r.scrollElement;
+  if (!e)
+    return;
+  const t = r.targetWindow;
+  if (!t)
+    return;
+  const s = (n) => {
+    const { width: o, height: a } = n;
+    l({ width: Math.round(o), height: Math.round(a) });
+  };
+  if (s(z(e)), !t.ResizeObserver)
+    return () => {
+    };
+  const i = new t.ResizeObserver((n) => {
+    const o = () => {
+      const a = n[0];
+      if (a?.borderBoxSize) {
+        const c = a.borderBoxSize[0];
+        if (c) {
+          s({ width: c.inlineSize, height: c.blockSize });
+          return;
+        }
+      }
+      s(z(e));
+    };
+    r.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(o) : o();
+  });
+  return i.observe(e, { box: "border-box" }), () => {
+    i.unobserve(e);
+  };
+}, M = {
+  passive: !0
+}, O = typeof window > "u" ? !0 : "onscrollend" in window, B = (r, l) => {
+  const e = r.scrollElement;
+  if (!e)
+    return;
+  const t = r.targetWindow;
+  if (!t)
+    return;
+  let s = 0;
+  const i = r.options.useScrollendEvent && O ? () => {
+  } : W(
+    t,
+    () => {
+      l(s, !1);
+    },
+    r.options.isScrollingResetDelay
+  ), n = (h) => () => {
+    const { horizontal: u, isRtl: d } = r.options;
+    s = u ? e.scrollLeft * (d && -1 || 1) : e.scrollTop, i(), l(s, h);
+  }, o = n(!0), a = n(!1);
+  a(), e.addEventListener("scroll", o, M);
+  const c = r.options.useScrollendEvent && O;
+  return c && e.addEventListener("scrollend", a, M), () => {
+    e.removeEventListener("scroll", o), c && e.removeEventListener("scrollend", a);
+  };
+}, $ = (r, l, e) => {
+  if (l?.borderBoxSize) {
+    const t = l.borderBoxSize[0];
+    if (t)
+      return Math.round(
+        t[e.options.horizontal ? "inlineSize" : "blockSize"]
+      );
+  }
+  return r[e.options.horizontal ? "offsetWidth" : "offsetHeight"];
+}, q = (r, {
+  adjustments: l = 0,
+  behavior: e
+}, t) => {
+  var s, i;
+  const n = r + l;
+  (i = (s = t.scrollElement) == null ? void 0 : s.scrollTo) == null || i.call(s, {
+    [t.options.horizontal ? "left" : "top"]: n,
+    behavior: e
+  });
+};
+class H {
+  constructor(l) {
+    this.unsubs = [], this.scrollElement = null, this.targetWindow = null, this.isScrolling = !1, this.measurementsCache = [], this.itemSizeCache = /* @__PURE__ */ new Map(), this.pendingMeasuredCacheIndexes = [], this.scrollRect = null, this.scrollOffset = null, this.scrollDirection = null, this.scrollAdjustments = 0, this.elementsCache = /* @__PURE__ */ new Map(), this.observer = /* @__PURE__ */ (() => {
+      let e = null;
+      const t = () => e || (!this.targetWindow || !this.targetWindow.ResizeObserver ? null : e = new this.targetWindow.ResizeObserver((s) => {
+        s.forEach((i) => {
+          const n = () => {
+            this._measureElement(i.target, i);
+          };
+          this.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(n) : n();
+        });
+      }));
+      return {
+        disconnect: () => {
+          var s;
+          (s = t()) == null || s.disconnect(), e = null;
+        },
+        observe: (s) => {
+          var i;
+          return (i = t()) == null ? void 0 : i.observe(s, { box: "border-box" });
+        },
+        unobserve: (s) => {
+          var i;
+          return (i = t()) == null ? void 0 : i.unobserve(s);
+        }
+      };
+    })(), this.range = null, this.setOptions = (e) => {
+      Object.entries(e).forEach(([t, s]) => {
+        typeof s > "u" && delete e[t];
+      }), this.options = {
+        debug: !1,
+        initialOffset: 0,
+        overscan: 1,
+        paddingStart: 0,
+        paddingEnd: 0,
+        scrollPaddingStart: 0,
+        scrollPaddingEnd: 0,
+        horizontal: !1,
+        getItemKey: L,
+        rangeExtractor: j,
+        onChange: () => {
+        },
+        measureElement: $,
+        initialRect: { width: 0, height: 0 },
+        scrollMargin: 0,
+        gap: 0,
+        indexAttribute: "data-index",
+        initialMeasurementsCache: [],
+        lanes: 1,
+        isScrollingResetDelay: 150,
+        enabled: !0,
+        isRtl: !1,
+        useScrollendEvent: !1,
+        useAnimationFrameWithResizeObserver: !1,
+        ...e
+      };
+    }, this.notify = (e) => {
+      var t, s;
+      (s = (t = this.options).onChange) == null || s.call(t, this, e);
+    }, this.maybeNotify = b(
+      () => (this.calculateRange(), [
+        this.isScrolling,
+        this.range ? this.range.startIndex : null,
+        this.range ? this.range.endIndex : null
+      ]),
+      (e) => {
+        this.notify(e);
+      },
+      {
+        key: process.env.NODE_ENV !== "production" && "maybeNotify",
+        debug: () => this.options.debug,
+        initialDeps: [
+          this.isScrolling,
+          this.range ? this.range.startIndex : null,
+          this.range ? this.range.endIndex : null
+        ]
+      }
+    ), this.cleanup = () => {
+      this.unsubs.filter(Boolean).forEach((e) => e()), this.unsubs = [], this.observer.disconnect(), this.scrollElement = null, this.targetWindow = null;
+    }, this._didMount = () => () => {
+      this.cleanup();
+    }, this._willUpdate = () => {
+      var e;
+      const t = this.options.enabled ? this.options.getScrollElement() : null;
+      if (this.scrollElement !== t) {
+        if (this.cleanup(), !t) {
+          this.maybeNotify();
+          return;
+        }
+        this.scrollElement = t, this.scrollElement && "ownerDocument" in this.scrollElement ? this.targetWindow = this.scrollElement.ownerDocument.defaultView : this.targetWindow = ((e = this.scrollElement) == null ? void 0 : e.window) ?? null, this.elementsCache.forEach((s) => {
+          this.observer.observe(s);
+        }), this._scrollToOffset(this.getScrollOffset(), {
+          adjustments: void 0,
+          behavior: void 0
+        }), this.unsubs.push(
+          this.options.observeElementRect(this, (s) => {
+            this.scrollRect = s, this.maybeNotify();
+          })
+        ), this.unsubs.push(
+          this.options.observeElementOffset(this, (s, i) => {
+            this.scrollAdjustments = 0, this.scrollDirection = i ? this.getScrollOffset() < s ? "forward" : "backward" : null, this.scrollOffset = s, this.isScrolling = i, this.maybeNotify();
+          })
+        );
+      }
+    }, this.getSize = () => this.options.enabled ? (this.scrollRect = this.scrollRect ?? this.options.initialRect, this.scrollRect[this.options.horizontal ? "width" : "height"]) : (this.scrollRect = null, 0), this.getScrollOffset = () => this.options.enabled ? (this.scrollOffset = this.scrollOffset ?? (typeof this.options.initialOffset == "function" ? this.options.initialOffset() : this.options.initialOffset), this.scrollOffset) : (this.scrollOffset = null, 0), this.getFurthestMeasurement = (e, t) => {
+      const s = /* @__PURE__ */ new Map(), i = /* @__PURE__ */ new Map();
+      for (let n = t - 1; n >= 0; n--) {
+        const o = e[n];
+        if (s.has(o.lane))
+          continue;
+        const a = i.get(
+          o.lane
+        );
+        if (a == null || o.end > a.end ? i.set(o.lane, o) : o.end < a.end && s.set(o.lane, !0), s.size === this.options.lanes)
+          break;
+      }
+      return i.size === this.options.lanes ? Array.from(i.values()).sort((n, o) => n.end === o.end ? n.index - o.index : n.end - o.end)[0] : void 0;
+    }, this.getMeasurementOptions = b(
+      () => [
+        this.options.count,
+        this.options.paddingStart,
+        this.options.scrollMargin,
+        this.options.getItemKey,
+        this.options.enabled
+      ],
+      (e, t, s, i, n) => (this.pendingMeasuredCacheIndexes = [], {
+        count: e,
+        paddingStart: t,
+        scrollMargin: s,
+        getItemKey: i,
+        enabled: n
+      }),
+      {
+        key: !1
+      }
+    ), this.getMeasurements = b(
+      () => [this.getMeasurementOptions(), this.itemSizeCache],
+      ({ count: e, paddingStart: t, scrollMargin: s, getItemKey: i, enabled: n }, o) => {
+        if (!n)
+          return this.measurementsCache = [], this.itemSizeCache.clear(), [];
+        this.measurementsCache.length === 0 && (this.measurementsCache = this.options.initialMeasurementsCache, this.measurementsCache.forEach((h) => {
+          this.itemSizeCache.set(h.key, h.size);
+        }));
+        const a = this.pendingMeasuredCacheIndexes.length > 0 ? Math.min(...this.pendingMeasuredCacheIndexes) : 0;
+        this.pendingMeasuredCacheIndexes = [];
+        const c = this.measurementsCache.slice(0, a);
+        for (let h = a; h < e; h++) {
+          const u = i(h), d = this.options.lanes === 1 ? c[h - 1] : this.getFurthestMeasurement(c, h), g = d ? d.end + this.options.gap : t + s, m = o.get(u), p = typeof m == "number" ? m : this.options.estimateSize(h), E = g + p, x = d ? d.lane : h % this.options.lanes;
+          c[h] = {
+            index: h,
+            start: g,
+            size: p,
+            end: E,
+            key: u,
+            lane: x
+          };
+        }
+        return this.measurementsCache = c, c;
+      },
+      {
+        key: process.env.NODE_ENV !== "production" && "getMeasurements",
+        debug: () => this.options.debug
+      }
+    ), this.calculateRange = b(
+      () => [
+        this.getMeasurements(),
+        this.getSize(),
+        this.getScrollOffset(),
+        this.options.lanes
+      ],
+      (e, t, s, i) => this.range = e.length > 0 && t > 0 ? U({
+        measurements: e,
+        outerSize: t,
+        scrollOffset: s,
+        lanes: i
+      }) : null,
+      {
+        key: process.env.NODE_ENV !== "production" && "calculateRange",
+        debug: () => this.options.debug
+      }
+    ), this.getVirtualIndexes = b(
+      () => {
+        let e = null, t = null;
+        const s = this.calculateRange();
+        return s && (e = s.startIndex, t = s.endIndex), this.maybeNotify.updateDeps([this.isScrolling, e, t]), [
+          this.options.rangeExtractor,
+          this.options.overscan,
+          this.options.count,
+          e,
+          t
+        ];
+      },
+      (e, t, s, i, n) => i === null || n === null ? [] : e({
+        startIndex: i,
+        endIndex: n,
+        overscan: t,
+        count: s
+      }),
+      {
+        key: process.env.NODE_ENV !== "production" && "getVirtualIndexes",
+        debug: () => this.options.debug
+      }
+    ), this.indexFromElement = (e) => {
+      const t = this.options.indexAttribute, s = e.getAttribute(t);
+      return s ? parseInt(s, 10) : (console.warn(
+        `Missing attribute name '${t}={index}' on measured element.`
+      ), -1);
+    }, this._measureElement = (e, t) => {
+      const s = this.indexFromElement(e), i = this.measurementsCache[s];
+      if (!i)
+        return;
+      const n = i.key, o = this.elementsCache.get(n);
+      o !== e && (o && this.observer.unobserve(o), this.observer.observe(e), this.elementsCache.set(n, e)), e.isConnected && this.resizeItem(s, this.options.measureElement(e, t, this));
+    }, this.resizeItem = (e, t) => {
+      const s = this.measurementsCache[e];
+      if (!s)
+        return;
+      const i = this.itemSizeCache.get(s.key) ?? s.size, n = t - i;
+      n !== 0 && ((this.shouldAdjustScrollPositionOnItemSizeChange !== void 0 ? this.shouldAdjustScrollPositionOnItemSizeChange(s, n, this) : s.start < this.getScrollOffset() + this.scrollAdjustments) && (process.env.NODE_ENV !== "production" && this.options.debug && console.info("correction", n), this._scrollToOffset(this.getScrollOffset(), {
+        adjustments: this.scrollAdjustments += n,
+        behavior: void 0
+      })), this.pendingMeasuredCacheIndexes.push(s.index), this.itemSizeCache = new Map(this.itemSizeCache.set(s.key, t)), this.notify(!1));
+    }, this.measureElement = (e) => {
+      if (!e) {
+        this.elementsCache.forEach((t, s) => {
+          t.isConnected || (this.observer.unobserve(t), this.elementsCache.delete(s));
+        });
+        return;
+      }
+      this._measureElement(e, void 0);
+    }, this.getVirtualItems = b(
+      () => [this.getVirtualIndexes(), this.getMeasurements()],
+      (e, t) => {
+        const s = [];
+        for (let i = 0, n = e.length; i < n; i++) {
+          const o = e[i], a = t[o];
+          s.push(a);
+        }
+        return s;
+      },
+      {
+        key: process.env.NODE_ENV !== "production" && "getVirtualItems",
+        debug: () => this.options.debug
+      }
+    ), this.getVirtualItemForOffset = (e) => {
+      const t = this.getMeasurements();
+      if (t.length !== 0)
+        return S(
+          t[I(
+            0,
+            t.length - 1,
+            (s) => S(t[s]).start,
+            e
+          )]
+        );
+    }, this.getOffsetForAlignment = (e, t, s = 0) => {
+      const i = this.getSize(), n = this.getScrollOffset();
+      t === "auto" && (t = e >= n + i ? "end" : "start"), t === "center" ? e += (s - i) / 2 : t === "end" && (e -= i);
+      const o = this.getTotalSize() + this.options.scrollMargin - i;
+      return Math.max(Math.min(o, e), 0);
+    }, this.getOffsetForIndex = (e, t = "auto") => {
+      e = Math.max(0, Math.min(e, this.options.count - 1));
+      const s = this.measurementsCache[e];
+      if (!s)
+        return;
+      const i = this.getSize(), n = this.getScrollOffset();
+      if (t === "auto")
+        if (s.end >= n + i - this.options.scrollPaddingEnd)
+          t = "end";
+        else if (s.start <= n + this.options.scrollPaddingStart)
+          t = "start";
+        else
+          return [n, t];
+      const o = t === "end" ? s.end + this.options.scrollPaddingEnd : s.start - this.options.scrollPaddingStart;
+      return [
+        this.getOffsetForAlignment(o, t, s.size),
+        t
+      ];
+    }, this.isDynamicMode = () => this.elementsCache.size > 0, this.scrollToOffset = (e, { align: t = "start", behavior: s } = {}) => {
+      s === "smooth" && this.isDynamicMode() && console.warn(
+        "The `smooth` scroll behavior is not fully supported with dynamic size."
+      ), this._scrollToOffset(this.getOffsetForAlignment(e, t), {
+        adjustments: void 0,
+        behavior: s
+      });
+    }, this.scrollToIndex = (e, { align: t = "auto", behavior: s } = {}) => {
+      s === "smooth" && this.isDynamicMode() && console.warn(
+        "The `smooth` scroll behavior is not fully supported with dynamic size."
+      ), e = Math.max(0, Math.min(e, this.options.count - 1));
+      let i = 0;
+      const n = 10, o = (c) => {
+        if (!this.targetWindow) return;
+        const h = this.getOffsetForIndex(e, c);
+        if (!h) {
+          console.warn("Failed to get offset for index:", e);
+          return;
+        }
+        const [u, d] = h;
+        this._scrollToOffset(u, { adjustments: void 0, behavior: s }), this.targetWindow.requestAnimationFrame(() => {
+          const g = this.getScrollOffset(), m = this.getOffsetForIndex(e, d);
+          if (!m) {
+            console.warn("Failed to get offset for index:", e);
+            return;
+          }
+          V(m[0], g) || a(d);
+        });
+      }, a = (c) => {
+        this.targetWindow && (i++, i < n ? (process.env.NODE_ENV !== "production" && this.options.debug && console.info("Schedule retry", i, n), this.targetWindow.requestAnimationFrame(() => o(c))) : console.warn(
+          `Failed to scroll to index ${e} after ${n} attempts.`
+        ));
+      };
+      o(t);
+    }, this.scrollBy = (e, { behavior: t } = {}) => {
+      t === "smooth" && this.isDynamicMode() && console.warn(
+        "The `smooth` scroll behavior is not fully supported with dynamic size."
+      ), this._scrollToOffset(this.getScrollOffset() + e, {
+        adjustments: void 0,
+        behavior: t
+      });
+    }, this.getTotalSize = () => {
+      var e;
+      const t = this.getMeasurements();
+      let s;
+      if (t.length === 0)
+        s = this.options.paddingStart;
+      else if (this.options.lanes === 1)
+        s = ((e = t[t.length - 1]) == null ? void 0 : e.end) ?? 0;
+      else {
+        const i = Array(this.options.lanes).fill(null);
+        let n = t.length - 1;
+        for (; n >= 0 && i.some((o) => o === null); ) {
+          const o = t[n];
+          i[o.lane] === null && (i[o.lane] = o.end), n--;
+        }
+        s = Math.max(...i.filter((o) => o !== null));
+      }
+      return Math.max(
+        s - this.options.scrollMargin + this.options.paddingEnd,
+        0
+      );
+    }, this._scrollToOffset = (e, {
+      adjustments: t,
+      behavior: s
+    }) => {
+      this.options.scrollToFn(e, { behavior: s, adjustments: t }, this);
+    }, this.measure = () => {
+      this.itemSizeCache = /* @__PURE__ */ new Map(), this.notify(!1);
+    }, this.setOptions(l);
+  }
+}
+const I = (r, l, e, t) => {
+  for (; r <= l; ) {
+    const s = (r + l) / 2 | 0, i = e(s);
+    if (i < t)
+      r = s + 1;
+    else if (i > t)
+      l = s - 1;
+    else
+      return s;
+  }
+  return r > 0 ? r - 1 : 0;
+};
+function U({
+  measurements: r,
+  outerSize: l,
+  scrollOffset: e,
+  lanes: t
+}) {
+  const s = r.length - 1, i = (a) => r[a].start;
+  if (r.length <= t)
+    return {
+      startIndex: 0,
+      endIndex: s
+    };
+  let n = I(
+    0,
+    s,
+    i,
+    e
+  ), o = n;
+  if (t === 1)
+    for (; o < s && r[o].end < e + l; )
+      o++;
+  else if (t > 1) {
+    const a = Array(t).fill(0);
+    for (; o < s && a.some((h) => h < e + l); ) {
+      const h = r[o];
+      a[h.lane] = h.end, o++;
+    }
+    const c = Array(t).fill(e + l);
+    for (; n >= 0 && c.some((h) => h >= e); ) {
+      const h = r[n];
+      c[h.lane] = h.start, n--;
+    }
+    n = Math.max(0, n - n % t), o = Math.min(s, o + (t - 1 - o % t));
+  }
+  return { startIndex: n, endIndex: o };
+}
+const C = typeof document < "u" ? y.useLayoutEffect : y.useEffect;
+function K(r) {
+  const l = y.useReducer(() => ({}), {})[1], e = {
+    ...r,
+    onChange: (s, i) => {
+      var n;
+      i ? k(l) : l(), (n = r.onChange) == null || n.call(r, s, i);
+    }
+  }, [t] = y.useState(
+    () => new H(e)
+  );
+  return t.setOptions(e), C(() => t._didMount(), []), C(() => t._willUpdate()), t;
+}
+function G(r) {
+  return K({
+    observeElementRect: P,
+    observeElementOffset: B,
+    scrollToFn: q,
+    ...r
+  });
+}
+const te = ({
+  showFlagOnSearch: r,
+  showNameOnSearch: l
+}) => {
+  const e = R(null), { termOfSearch: t, countries: s, handleSelectCountry: i } = A(), n = F(() => s.filter(
+    (a) => a.name.toLocaleLowerCase().includes(t.toLowerCase())
+  ), [t]), o = G({
+    count: n.length,
+    overscan: 5,
+    getScrollElement: () => e.current,
+    estimateSize: () => 40
+  });
+  return T(() => {
+    n.length > 0 && o.scrollToIndex(0);
+  }, [t, o]), n.length === 0 ? /* @__PURE__ */ f("div", { className: "overflow-y-auto max-h-60 snap-y snap-mandatory", children: /* @__PURE__ */ f("ul", { className: "relative", children: /* @__PURE__ */ f("li", { className: "w-full flex items-center h-10 select-none px-6", children: /* @__PURE__ */ f(
+    w,
+    {
+      variant: "body2",
+      component: "span",
+      className: "flex gap-2 items-center text-left text-slate-800 dark:text-slate-50",
+      children: "No options"
+    }
+  ) }) }) }) : /* @__PURE__ */ f(
+    "div",
+    {
+      ref: e,
+      className: "overflow-y-auto max-h-60 snap-y snap-mandatory",
+      children: /* @__PURE__ */ f(
+        "ul",
+        {
+          className: "relative",
+          style: { height: o.getTotalSize() },
+          children: o.getVirtualItems().map((a) => {
+            const c = n[a.index], { flag: h, name: u, prefix: d } = c;
+            return /* @__PURE__ */ f(
+              "li",
+              {
+                className: "absolute w-full snap-start snap-always scroll-m-0 flex items-center h-10",
+                style: {
+                  top: a.start,
+                  height: a.size
+                },
+                children: /* @__PURE__ */ f(
+                  "button",
+                  {
+                    className: "w-full h-full cursor-pointer px-6 hover:bg-gray-50 transition-colors duration-150 focus-visible:outline-0 hover:outline-gray-100 focus:bg-gray-50 dark:hover:bg-slate-700",
+                    onClick: () => i(c),
+                    children: /* @__PURE__ */ N(
+                      w,
+                      {
+                        variant: "body2",
+                        component: "span",
+                        className: "flex gap-2 items-center text-left text-slate-800 dark:text-slate-50",
+                        children: [
+                          r && /* @__PURE__ */ f(h, {}),
+                          l && /* @__PURE__ */ f(D, { text: u, prefix: d })
+                        ]
+                      }
+                    )
+                  }
+                )
+              },
+              a.key
+            );
+          })
+        }
+      )
+    }
+  );
+};
+export {
+  te as FlagSelectorList
+};

package/dist/components/PhoneNumberInput/components/FlagSelectorWrapper/FlagSelectorWrapper.js

@@ -0,0 +1,36 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { useCallback as d } from "react";
+import { Input as p } from "../../../Input/Input.js";
+import { FlagSelectorList as c } from "../FlagSelectorList/FlagSelectorList.js";
+import { usePhoneNumberContext as u } from "../../contexts/phone-number.hook.js";
+const S = ({
+  placeholder: r = "Search",
+  showFlagOnSearch: o,
+  showInputFilter: t,
+  showNameOnSearch: a,
+  showPlaceHolder: s = !0
+}) => {
+  const { onChangeTermOfSearch: l } = u(), n = d((m) => {
+    l(m.target.value);
+  }, []);
+  return /* @__PURE__ */ i("div", { className: "absolute top-full mt-1.5 animate-in fade-in-0 zoom-in-95 w-full border border-transparent bg-white shadow-sm py-2 z-10 rounded-sm dark:bg-slate-800 dark:border-slate-600", children: [
+    t && /* @__PURE__ */ e("div", { className: "px-6 py-2.5", children: /* @__PURE__ */ e(
+      p,
+      {
+        isSearch: !0,
+        placeholder: s ? r : void 0,
+        onChange: n
+      }
+    ) }),
+    /* @__PURE__ */ e(
+      c,
+      {
+        showFlagOnSearch: o,
+        showNameOnSearch: a
+      }
+    )
+  ] });
+};
+export {
+  S as FlagSelectorWrapper
+};