@konstructio/ui 0.1.2-alpha.74 → 0.1.2-alpha.75

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

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