@starasia/dropdown 1.0.2 → 1.0.4

package/dist/dropdown.es.js

@@ -1,647 +1,6 @@
-import or, { useState as Z, useRef as H, useEffect as N, forwardRef as gn } from "react";
-var wr = { exports: {} }, G = {};
-/**
- * @license React
- * react-jsx-runtime.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var zr;
-function bn() {
-  if (zr)
-    return G;
-  zr = 1;
-  var u = or, p = Symbol.for("react.element"), x = Symbol.for("react.fragment"), k = Object.prototype.hasOwnProperty, f = u.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, h = { key: !0, ref: !0, __self: !0, __source: !0 };
-  function P(R, g, C) {
-    var _, $ = {}, E = null, L = null;
-    C !== void 0 && (E = "" + C), g.key !== void 0 && (E = "" + g.key), g.ref !== void 0 && (L = g.ref);
-    for (_ in g)
-      k.call(g, _) && !h.hasOwnProperty(_) && ($[_] = g[_]);
-    if (R && R.defaultProps)
-      for (_ in g = R.defaultProps, g)
-        $[_] === void 0 && ($[_] = g[_]);
-    return { $$typeof: p, type: R, key: E, ref: L, props: $, _owner: f.current };
-  }
-  return G.Fragment = x, G.jsx = P, G.jsxs = P, G;
-}
-var X = {};
-/**
- * @license React
- * react-jsx-runtime.development.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var Nr;
-function xn() {
-  return Nr || (Nr = 1, process.env.NODE_ENV !== "production" && function() {
-    var u = or, p = Symbol.for("react.element"), x = Symbol.for("react.portal"), k = Symbol.for("react.fragment"), f = Symbol.for("react.strict_mode"), h = Symbol.for("react.profiler"), P = Symbol.for("react.provider"), R = Symbol.for("react.context"), g = Symbol.for("react.forward_ref"), C = Symbol.for("react.suspense"), _ = Symbol.for("react.suspense_list"), $ = Symbol.for("react.memo"), E = Symbol.for("react.lazy"), L = Symbol.for("react.offscreen"), A = Symbol.iterator, m = "@@iterator";
-    function o(r) {
-      if (r === null || typeof r != "object")
-        return null;
-      var n = A && r[A] || r[m];
-      return typeof n == "function" ? n : null;
-    }
-    var v = u.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-    function l(r) {
-      {
-        for (var n = arguments.length, e = new Array(n > 1 ? n - 1 : 0), a = 1; a < n; a++)
-          e[a - 1] = arguments[a];
-        w("error", r, e);
-      }
-    }
-    function w(r, n, e) {
-      {
-        var a = v.ReactDebugCurrentFrame, d = a.getStackAddendum();
-        d !== "" && (n += "%s", e = e.concat([d]));
-        var c = e.map(function(s) {
-          return String(s);
-        });
-        c.unshift("Warning: " + n), Function.prototype.apply.call(console[r], console, c);
-      }
-    }
-    var j = !1, z = !1, B = !1, ir = !1, Q = !1, rr;
-    rr = Symbol.for("react.module.reference");
-    function Y(r) {
-      return !!(typeof r == "string" || typeof r == "function" || r === k || r === h || Q || r === f || r === C || r === _ || ir || r === L || j || z || B || typeof r == "object" && r !== null && (r.$$typeof === E || r.$$typeof === $ || r.$$typeof === P || r.$$typeof === R || r.$$typeof === g || // This needs to include all possible module reference object
-      // types supported by any Flight configuration anywhere since
-      // we don't know which Flight build this will end up being used
-      // with.
-      r.$$typeof === rr || r.getModuleId !== void 0));
-    }
-    function T(r, n, e) {
-      var a = r.displayName;
-      if (a)
-        return a;
-      var d = n.displayName || n.name || "";
-      return d !== "" ? e + "(" + d + ")" : e;
-    }
-    function O(r) {
-      return r.displayName || "Context";
-    }
-    function D(r) {
-      if (r == null)
-        return null;
-      if (typeof r.tag == "number" && l("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof r == "function")
-        return r.displayName || r.name || null;
-      if (typeof r == "string")
-        return r;
-      switch (r) {
-        case k:
-          return "Fragment";
-        case x:
-          return "Portal";
-        case h:
-          return "Profiler";
-        case f:
-          return "StrictMode";
-        case C:
-          return "Suspense";
-        case _:
-          return "SuspenseList";
-      }
-      if (typeof r == "object")
-        switch (r.$$typeof) {
-          case R:
-            var n = r;
-            return O(n) + ".Consumer";
-          case P:
-            var e = r;
-            return O(e._context) + ".Provider";
-          case g:
-            return T(r, r.render, "ForwardRef");
-          case $:
-            var a = r.displayName || null;
-            return a !== null ? a : D(r.type) || "Memo";
-          case E: {
-            var d = r, c = d._payload, s = d._init;
-            try {
-              return D(s(c));
-            } catch {
-              return null;
-            }
-          }
-        }
-      return null;
-    }
-    var S = Object.assign, M = 0, gr, br, xr, mr, yr, kr, Er;
-    function Rr() {
-    }
-    Rr.__reactDisabledLog = !0;
-    function Mr() {
-      {
-        if (M === 0) {
-          gr = console.log, br = console.info, xr = console.warn, mr = console.error, yr = console.group, kr = console.groupCollapsed, Er = console.groupEnd;
-          var r = {
-            configurable: !0,
-            enumerable: !0,
-            value: Rr,
-            writable: !0
-          };
-          Object.defineProperties(console, {
-            info: r,
-            log: r,
-            warn: r,
-            error: r,
-            group: r,
-            groupCollapsed: r,
-            groupEnd: r
-          });
-        }
-        M++;
-      }
-    }
-    function Vr() {
-      {
-        if (M--, M === 0) {
-          var r = {
-            configurable: !0,
-            enumerable: !0,
-            writable: !0
-          };
-          Object.defineProperties(console, {
-            log: S({}, r, {
-              value: gr
-            }),
-            info: S({}, r, {
-              value: br
-            }),
-            warn: S({}, r, {
-              value: xr
-            }),
-            error: S({}, r, {
-              value: mr
-            }),
-            group: S({}, r, {
-              value: yr
-            }),
-            groupCollapsed: S({}, r, {
-              value: kr
-            }),
-            groupEnd: S({}, r, {
-              value: Er
-            })
-          });
-        }
-        M < 0 && l("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
-      }
-    }
-    var sr = v.ReactCurrentDispatcher, dr;
-    function nr(r, n, e) {
-      {
-        if (dr === void 0)
-          try {
-            throw Error();
-          } catch (d) {
-            var a = d.stack.trim().match(/\n( *(at )?)/);
-            dr = a && a[1] || "";
-          }
-        return `
-` + dr + r;
-      }
-    }
-    var lr = !1, er;
-    {
-      var Ur = typeof WeakMap == "function" ? WeakMap : Map;
-      er = new Ur();
-    }
-    function _r(r, n) {
-      if (!r || lr)
-        return "";
-      {
-        var e = er.get(r);
-        if (e !== void 0)
-          return e;
-      }
-      var a;
-      lr = !0;
-      var d = Error.prepareStackTrace;
-      Error.prepareStackTrace = void 0;
-      var c;
-      c = sr.current, sr.current = null, Mr();
-      try {
-        if (n) {
-          var s = function() {
-            throw Error();
-          };
-          if (Object.defineProperty(s.prototype, "props", {
-            set: function() {
-              throw Error();
-            }
-          }), typeof Reflect == "object" && Reflect.construct) {
-            try {
-              Reflect.construct(s, []);
-            } catch (F) {
-              a = F;
-            }
-            Reflect.construct(r, [], s);
-          } else {
-            try {
-              s.call();
-            } catch (F) {
-              a = F;
-            }
-            r.call(s.prototype);
-          }
-        } else {
-          try {
-            throw Error();
-          } catch (F) {
-            a = F;
-          }
-          r();
-        }
-      } catch (F) {
-        if (F && a && typeof F.stack == "string") {
-          for (var i = F.stack.split(`
-`), I = a.stack.split(`
-`), b = i.length - 1, y = I.length - 1; b >= 1 && y >= 0 && i[b] !== I[y]; )
-            y--;
-          for (; b >= 1 && y >= 0; b--, y--)
-            if (i[b] !== I[y]) {
-              if (b !== 1 || y !== 1)
-                do
-                  if (b--, y--, y < 0 || i[b] !== I[y]) {
-                    var W = `
-` + i[b].replace(" at new ", " at ");
-                    return r.displayName && W.includes("<anonymous>") && (W = W.replace("<anonymous>", r.displayName)), typeof r == "function" && er.set(r, W), W;
-                  }
-                while (b >= 1 && y >= 0);
-              break;
-            }
-        }
-      } finally {
-        lr = !1, sr.current = c, Vr(), Error.prepareStackTrace = d;
-      }
-      var q = r ? r.displayName || r.name : "", V = q ? nr(q) : "";
-      return typeof r == "function" && er.set(r, V), V;
-    }
-    function qr(r, n, e) {
-      return _r(r, !1);
-    }
-    function Hr(r) {
-      var n = r.prototype;
-      return !!(n && n.isReactComponent);
-    }
-    function ar(r, n, e) {
-      if (r == null)
-        return "";
-      if (typeof r == "function")
-        return _r(r, Hr(r));
-      if (typeof r == "string")
-        return nr(r);
-      switch (r) {
-        case C:
-          return nr("Suspense");
-        case _:
-          return nr("SuspenseList");
-      }
-      if (typeof r == "object")
-        switch (r.$$typeof) {
-          case g:
-            return qr(r.render);
-          case $:
-            return ar(r.type, n, e);
-          case E: {
-            var a = r, d = a._payload, c = a._init;
-            try {
-              return ar(c(d), n, e);
-            } catch {
-            }
-          }
-        }
-      return "";
-    }
-    var J = Object.prototype.hasOwnProperty, jr = {}, Cr = v.ReactDebugCurrentFrame;
-    function tr(r) {
-      if (r) {
-        var n = r._owner, e = ar(r.type, r._source, n ? n.type : null);
-        Cr.setExtraStackFrame(e);
-      } else
-        Cr.setExtraStackFrame(null);
-    }
-    function Jr(r, n, e, a, d) {
-      {
-        var c = Function.call.bind(J);
-        for (var s in r)
-          if (c(r, s)) {
-            var i = void 0;
-            try {
-              if (typeof r[s] != "function") {
-                var I = Error((a || "React class") + ": " + e + " type `" + s + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof r[s] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
-                throw I.name = "Invariant Violation", I;
-              }
-              i = r[s](n, s, a, e, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
-            } catch (b) {
-              i = b;
-            }
-            i && !(i instanceof Error) && (tr(d), l("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", a || "React class", e, s, typeof i), tr(null)), i instanceof Error && !(i.message in jr) && (jr[i.message] = !0, tr(d), l("Failed %s type: %s", e, i.message), tr(null));
-          }
-      }
-    }
-    var Kr = Array.isArray;
-    function cr(r) {
-      return Kr(r);
-    }
-    function Gr(r) {
-      {
-        var n = typeof Symbol == "function" && Symbol.toStringTag, e = n && r[Symbol.toStringTag] || r.constructor.name || "Object";
-        return e;
-      }
-    }
-    function Xr(r) {
-      try {
-        return Tr(r), !1;
-      } catch {
-        return !0;
-      }
-    }
-    function Tr(r) {
-      return "" + r;
-    }
-    function Or(r) {
-      if (Xr(r))
-        return l("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Gr(r)), Tr(r);
-    }
-    var K = v.ReactCurrentOwner, Zr = {
-      key: !0,
-      ref: !0,
-      __self: !0,
-      __source: !0
-    }, Sr, Pr, ur;
-    ur = {};
-    function Qr(r) {
-      if (J.call(r, "ref")) {
-        var n = Object.getOwnPropertyDescriptor(r, "ref").get;
-        if (n && n.isReactWarning)
-          return !1;
-      }
-      return r.ref !== void 0;
-    }
-    function rn(r) {
-      if (J.call(r, "key")) {
-        var n = Object.getOwnPropertyDescriptor(r, "key").get;
-        if (n && n.isReactWarning)
-          return !1;
-      }
-      return r.key !== void 0;
-    }
-    function nn(r, n) {
-      if (typeof r.ref == "string" && K.current && n && K.current.stateNode !== n) {
-        var e = D(K.current.type);
-        ur[e] || (l('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref', D(K.current.type), r.ref), ur[e] = !0);
-      }
-    }
-    function en(r, n) {
-      {
-        var e = function() {
-          Sr || (Sr = !0, l("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", n));
-        };
-        e.isReactWarning = !0, Object.defineProperty(r, "key", {
-          get: e,
-          configurable: !0
-        });
-      }
-    }
-    function an(r, n) {
-      {
-        var e = function() {
-          Pr || (Pr = !0, l("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", n));
-        };
-        e.isReactWarning = !0, Object.defineProperty(r, "ref", {
-          get: e,
-          configurable: !0
-        });
-      }
-    }
-    var tn = function(r, n, e, a, d, c, s) {
-      var i = {
-        // This tag allows us to uniquely identify this as a React Element
-        $$typeof: p,
-        // Built-in properties that belong on the element
-        type: r,
-        key: n,
-        ref: e,
-        props: s,
-        // Record the component responsible for creating this element.
-        _owner: c
-      };
-      return i._store = {}, Object.defineProperty(i._store, "validated", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: !1
-      }), Object.defineProperty(i, "_self", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !1,
-        value: a
-      }), Object.defineProperty(i, "_source", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !1,
-        value: d
-      }), Object.freeze && (Object.freeze(i.props), Object.freeze(i)), i;
-    };
-    function on(r, n, e, a, d) {
-      {
-        var c, s = {}, i = null, I = null;
-        e !== void 0 && (Or(e), i = "" + e), rn(n) && (Or(n.key), i = "" + n.key), Qr(n) && (I = n.ref, nn(n, d));
-        for (c in n)
-          J.call(n, c) && !Zr.hasOwnProperty(c) && (s[c] = n[c]);
-        if (r && r.defaultProps) {
-          var b = r.defaultProps;
-          for (c in b)
-            s[c] === void 0 && (s[c] = b[c]);
-        }
-        if (i || I) {
-          var y = typeof r == "function" ? r.displayName || r.name || "Unknown" : r;
-          i && en(s, y), I && an(s, y);
-        }
-        return tn(r, i, I, d, a, K.current, s);
-      }
-    }
-    var pr = v.ReactCurrentOwner, Ir = v.ReactDebugCurrentFrame;
-    function U(r) {
-      if (r) {
-        var n = r._owner, e = ar(r.type, r._source, n ? n.type : null);
-        Ir.setExtraStackFrame(e);
-      } else
-        Ir.setExtraStackFrame(null);
-    }
-    var fr;
-    fr = !1;
-    function vr(r) {
-      return typeof r == "object" && r !== null && r.$$typeof === p;
-    }
-    function Dr() {
-      {
-        if (pr.current) {
-          var r = D(pr.current.type);
-          if (r)
-            return `
-
-Check the render method of \`` + r + "`.";
-        }
-        return "";
-      }
-    }
-    function sn(r) {
-      {
-        if (r !== void 0) {
-          var n = r.fileName.replace(/^.*[\\\/]/, ""), e = r.lineNumber;
-          return `
-
-Check your code at ` + n + ":" + e + ".";
-        }
-        return "";
-      }
-    }
-    var Fr = {};
-    function dn(r) {
-      {
-        var n = Dr();
-        if (!n) {
-          var e = typeof r == "string" ? r : r.displayName || r.name;
-          e && (n = `
-
-Check the top-level render call using <` + e + ">.");
-        }
-        return n;
-      }
-    }
-    function $r(r, n) {
-      {
-        if (!r._store || r._store.validated || r.key != null)
-          return;
-        r._store.validated = !0;
-        var e = dn(n);
-        if (Fr[e])
-          return;
-        Fr[e] = !0;
-        var a = "";
-        r && r._owner && r._owner !== pr.current && (a = " It was passed a child from " + D(r._owner.type) + "."), U(r), l('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', e, a), U(null);
-      }
-    }
-    function Ar(r, n) {
-      {
-        if (typeof r != "object")
-          return;
-        if (cr(r))
-          for (var e = 0; e < r.length; e++) {
-            var a = r[e];
-            vr(a) && $r(a, n);
-          }
-        else if (vr(r))
-          r._store && (r._store.validated = !0);
-        else if (r) {
-          var d = o(r);
-          if (typeof d == "function" && d !== r.entries)
-            for (var c = d.call(r), s; !(s = c.next()).done; )
-              vr(s.value) && $r(s.value, n);
-        }
-      }
-    }
-    function ln(r) {
-      {
-        var n = r.type;
-        if (n == null || typeof n == "string")
-          return;
-        var e;
-        if (typeof n == "function")
-          e = n.propTypes;
-        else if (typeof n == "object" && (n.$$typeof === g || // Note: Memo only checks outer props here.
-        // Inner props are checked in the reconciler.
-        n.$$typeof === $))
-          e = n.propTypes;
-        else
-          return;
-        if (e) {
-          var a = D(n);
-          Jr(e, r.props, "prop", a, r);
-        } else if (n.PropTypes !== void 0 && !fr) {
-          fr = !0;
-          var d = D(n);
-          l("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", d || "Unknown");
-        }
-        typeof n.getDefaultProps == "function" && !n.getDefaultProps.isReactClassApproved && l("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
-      }
-    }
-    function cn(r) {
-      {
-        for (var n = Object.keys(r.props), e = 0; e < n.length; e++) {
-          var a = n[e];
-          if (a !== "children" && a !== "key") {
-            U(r), l("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", a), U(null);
-            break;
-          }
-        }
-        r.ref !== null && (U(r), l("Invalid attribute `ref` supplied to `React.Fragment`."), U(null));
-      }
-    }
-    var Wr = {};
-    function Lr(r, n, e, a, d, c) {
-      {
-        var s = Y(r);
-        if (!s) {
-          var i = "";
-          (r === void 0 || typeof r == "object" && r !== null && Object.keys(r).length === 0) && (i += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
-          var I = sn(d);
-          I ? i += I : i += Dr();
-          var b;
-          r === null ? b = "null" : cr(r) ? b = "array" : r !== void 0 && r.$$typeof === p ? (b = "<" + (D(r.type) || "Unknown") + " />", i = " Did you accidentally export a JSX literal instead of a component?") : b = typeof r, l("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", b, i);
-        }
-        var y = on(r, n, e, d, c);
-        if (y == null)
-          return y;
-        if (s) {
-          var W = n.children;
-          if (W !== void 0)
-            if (a)
-              if (cr(W)) {
-                for (var q = 0; q < W.length; q++)
-                  Ar(W[q], r);
-                Object.freeze && Object.freeze(W);
-              } else
-                l("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
-            else
-              Ar(W, r);
-        }
-        if (J.call(n, "key")) {
-          var V = D(r), F = Object.keys(n).filter(function(wn) {
-            return wn !== "key";
-          }), hr = F.length > 0 ? "{key: someKey, " + F.join(": ..., ") + ": ...}" : "{key: someKey}";
-          if (!Wr[V + hr]) {
-            var hn = F.length > 0 ? "{" + F.join(": ..., ") + ": ...}" : "{}";
-            l(`A props object containing a "key" prop is being spread into JSX:
-  let props = %s;
-  <%s {...props} />
-React keys must be passed directly to JSX without using spread:
-  let props = %s;
-  <%s key={someKey} {...props} />`, hr, V, hn, V), Wr[V + hr] = !0;
-          }
-        }
-        return r === k ? cn(y) : ln(y), y;
-      }
-    }
-    function un(r, n, e) {
-      return Lr(r, n, e, !0);
-    }
-    function pn(r, n, e) {
-      return Lr(r, n, e, !1);
-    }
-    var fn = pn, vn = un;
-    X.Fragment = k, X.jsx = fn, X.jsxs = vn;
-  }()), X;
-}
-process.env.NODE_ENV === "production" ? wr.exports = bn() : wr.exports = xn();
-var t = wr.exports;
-const mn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
+import { jsx as r, jsxs as p, Fragment as q } from "react/jsx-runtime";
+import F, { useState as k, useRef as y, useEffect as b, forwardRef as M } from "react";
+const P = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
 * {
   margin: 0;
   padding: 0;
@@ -844,12 +203,6 @@ const mn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@3
   white-space: nowrap; */
 }
 
-/* remove default focus outline when container is focused for keyboard handling */
-.starasia-input-dropdown-lists-container:focus {
-  outline: none;
-  box-shadow: none;
-}
-
 .starasia-input-dropdown-lists-container-bottom {
   top: 100%;
   margin-top: var(--starasia-ui-dropdown-spacing-xs);
@@ -922,10 +275,6 @@ const mn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@3
   /* box-shadow: 0px 0px 0px -1px #f0f0f0; */
 }
 
-.starasia-input-dropdwon-item.highlight {
-  background-color: rgba(100, 181, 246, 0.21);
-}
-
 .starasia-input-dropdwon-item-disable {
   color: var(--starasia-ui-dropdown-color-disable) !important;
   pointer-events: none;
@@ -1056,23 +405,23 @@ const mn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@3
   width: 100%;
 }
 `;
-function yn(u) {
-  const [p, x] = Z(u), k = H(null), f = (h) => {
-    k.current && !k.current.contains(h.target) && x(!1);
+function V(a) {
+  const [i, t] = k(a), c = y(null), o = (e) => {
+    c.current && !c.current.contains(e.target) && t(!1);
   };
-  return N(() => (document.addEventListener("click", f, !0), () => {
-    document.removeEventListener("click", f, !0);
-  }), []), { ref: k, isComponentVisible: p, setIsComponentVisible: x };
+  return b(() => (document.addEventListener("click", o, !0), () => {
+    document.removeEventListener("click", o, !0);
+  }), []), { ref: c, isComponentVisible: i, setIsComponentVisible: t };
 }
-const kn = ({ ...u }) => /* @__PURE__ */ t.jsx(
+const J = ({ ...a }) => /* @__PURE__ */ r(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
-    ...u,
+    ...a,
     viewBox: "0 0 24 24",
     fill: "none",
     color: "#939E99",
-    children: /* @__PURE__ */ t.jsx(
+    children: /* @__PURE__ */ r(
       "path",
       {
         d: "M4 9L12 17L20 9",
@@ -1083,15 +432,15 @@ const kn = ({ ...u }) => /* @__PURE__ */ t.jsx(
       }
     )
   }
-), En = ({ ...u }) => /* @__PURE__ */ t.jsxs(
+), G = ({ ...a }) => /* @__PURE__ */ p(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
-    ...u,
+    ...a,
     viewBox: "0 0 20 20",
     fill: "none",
     children: [
-      /* @__PURE__ */ t.jsx(
+      /* @__PURE__ */ r(
         "circle",
         {
           cx: "9.80547",
@@ -1103,7 +452,7 @@ const kn = ({ ...u }) => /* @__PURE__ */ t.jsx(
           strokeLinejoin: "round"
         }
       ),
-      /* @__PURE__ */ t.jsx(
+      /* @__PURE__ */ r(
         "path",
         {
           d: "M15.0153 15.4043L17.9519 18.3333",
@@ -1115,19 +464,19 @@ const kn = ({ ...u }) => /* @__PURE__ */ t.jsx(
       )
     ]
   }
-), Rn = ({ isChecked: u }) => /* @__PURE__ */ t.jsxs("div", { className: "checkbox-wrapper-30", children: [
-  /* @__PURE__ */ t.jsxs("span", { className: "checkbox", children: [
-    /* @__PURE__ */ t.jsx(
+), K = ({ isChecked: a }) => /* @__PURE__ */ p("div", { className: "checkbox-wrapper-30", children: [
+  /* @__PURE__ */ p("span", { className: "checkbox", children: [
+    /* @__PURE__ */ r(
       "input",
       {
         type: "checkbox",
         style: { pointerEvents: "none" },
-        checked: u
+        checked: a
       }
     ),
-    /* @__PURE__ */ t.jsx("svg", { children: /* @__PURE__ */ t.jsx("use", { xlinkHref: "#checkbox-30", className: "checkbox" }) })
+    /* @__PURE__ */ r("svg", { children: /* @__PURE__ */ r("use", { xlinkHref: "#checkbox-30", className: "checkbox" }) })
   ] }),
-  /* @__PURE__ */ t.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", style: { display: "none" }, children: /* @__PURE__ */ t.jsx("symbol", { id: "checkbox-30", viewBox: "0 0 22 22", children: /* @__PURE__ */ t.jsx(
+  /* @__PURE__ */ r("svg", { xmlns: "http://www.w3.org/2000/svg", style: { display: "none" }, children: /* @__PURE__ */ r("symbol", { id: "checkbox-30", viewBox: "0 0 22 22", children: /* @__PURE__ */ r(
     "path",
     {
       fill: "none",
@@ -1135,98 +484,58 @@ const kn = ({ ...u }) => /* @__PURE__ */ t.jsx(
       d: "M5.5,11.3L9,14.8L20.2,3.3l0,0c-0.5-1-1.5-1.8-2.7-1.8h-13c-1.7,0-3,1.3-3,3v13c0,1.7,1.3,3,3,3h13 c1.7,0,3-1.3,3-3v-13c0-0.4-0.1-0.8-0.3-1.2"
     }
   ) }) })
-] }), _n = gn(
+] }), Q = M(
   ({
-    positionDropdown: u,
-    dropdownLists: p,
-    isComponentVisible: x,
-    searchAble: k,
-    onSearch: f,
-    value: h,
-    handleChangeValue: P,
-    multiSelect: R,
-    searchValue: g
-  }, C) => {
-    const [_, $] = Z(0), [E, L] = Z(), A = H(null), m = H(null);
-    return N(() => {
-      if (A.current) {
-        const o = A.current.getBoundingClientRect();
-        $(o.width);
-      }
-    }, [A, x]), N(() => {
-      p && g ? p.forEach((o) => {
-        if (o.label.startsWith(g || "")) {
-          L(o.value);
+    positionDropdown: a,
+    dropdownLists: i,
+    isComponentVisible: t,
+    searchAble: c,
+    onSearch: o,
+    value: e,
+    handleChangeValue: h,
+    multiSelect: l,
+    searchValue: v
+  }, I) => {
+    const [C, R] = k(0), [$, z] = k(), w = y(null);
+    return b(() => {
+      if (w.current) {
+        const n = w.current.getBoundingClientRect();
+        R(n.width);
+      }
+    }, [w, t]), b(() => {
+      i && v ? i.forEach((n) => {
+        if (n.label.startsWith(v || "")) {
+          z(n.value);
           return;
         }
-      }) : L(void 0);
-    }, [g, p]), N(() => {
-      const o = m.current || (C == null ? void 0 : C.current);
-      if (!o || !x)
-        return;
-      const v = p.filter((w) => !w.disable), l = (w) => {
-        if (w.key === "ArrowDown") {
-          if (w.preventDefault(), !v.length)
-            return;
-          const j = v.findIndex((B) => B.value === E), z = j === -1 ? 0 : (j + 1) % v.length;
-          L(v[z].value);
-        } else if (w.key === "ArrowUp") {
-          if (w.preventDefault(), !v.length)
-            return;
-          const j = v.findIndex((B) => B.value === E), z = j <= 0 ? v.length - 1 : j - 1;
-          L(v[z].value);
-        } else if (w.key === "Enter") {
-          if (w.preventDefault(), !E)
-            return;
-          const j = p.find((z) => z.value === E);
-          j && !j.disable && P(j.label, j.value);
-        }
-      };
-      return o.addEventListener("keydown", l), () => o.removeEventListener("keydown", l);
-    }, [x, p, E, P, C]), N(() => {
-      if (!E)
-        return;
-      const o = A.current;
-      if (!o)
-        return;
-      const v = o.querySelector(`[data-value="${E}"]`);
-      v && v.scrollIntoView && v.scrollIntoView({ block: "nearest" });
-    }, [E]), /* @__PURE__ */ t.jsx(t.Fragment, { children: x ? /* @__PURE__ */ t.jsxs(
+      }) : z(void 0);
+    }, [v, i]), /* @__PURE__ */ r(q, { children: t ? /* @__PURE__ */ p(
       "div",
       {
         className: "starasia-input-dropdown-lists-container",
-        onClick: (o) => o.stopPropagation(),
-        ref: (o) => {
-          if (m.current = o, typeof C == "function")
-            C(o);
-          else if (C)
-            try {
-              C.current = o;
-            } catch {
-            }
-        },
-        tabIndex: 0,
+        onClick: (n) => n.stopPropagation(),
+        ref: I,
         children: [
-          k ? /* @__PURE__ */ t.jsxs(
+          c ? /* @__PURE__ */ p(
             "div",
             {
               className: "starasia-input-dropdown-container-dropdown-search",
               style: {
-                order: u == "bottom" ? 0 : 2,
+                order: a == "bottom" ? 0 : 2,
                 position: "sticky",
                 top: 0,
                 bottom: 0,
                 zIndex: 1
               },
               children: [
-                /* @__PURE__ */ t.jsx("div", { style: { display: "flex" }, children: /* @__PURE__ */ t.jsx(En, { strokeWidth: 2, width: 20 }) }),
-                /* @__PURE__ */ t.jsx(
+                /* @__PURE__ */ r("div", { style: { display: "flex" }, children: /* @__PURE__ */ r(G, { strokeWidth: 2, width: 20 }) }),
+                /* @__PURE__ */ r(
                   "input",
                   {
-                    onChange: (o) => {
-                      f && f(o.target.value);
+                    onChange: (n) => {
+                      o && o(n.target.value);
                     },
-                    value: g,
+                    value: v,
                     autoFocus: !0,
                     style: { width: "100%" }
                   }
@@ -1234,55 +543,54 @@ const kn = ({ ...u }) => /* @__PURE__ */ t.jsx(
               ]
             }
           ) : null,
-          /* @__PURE__ */ t.jsx(
+          /* @__PURE__ */ r(
             "div",
             {
-              className: `starasia-input-dropdwon-item-container ${R ? "multi" : ""}`,
-              ref: A,
-              children: p.map((o, v) => {
-                const l = !!(h != null && h.find((w) => w.value === o.value));
-                return /* @__PURE__ */ t.jsxs(
+              className: `starasia-input-dropdwon-item-container ${l ? "multi" : ""}`,
+              ref: w,
+              children: i.map((n, f) => {
+                const x = !!(e != null && e.find((E) => E.value === n.value));
+                return /* @__PURE__ */ p(
                   "div",
                   {
-                    "data-value": o.value,
-                    className: `starasia-input-dropdwon-item ${l ? "active" : " "} ${E === o.value ? "highlight" : ""} ${o.disable ? "starasia-input-dropdwon-item-disable" : null}`,
-                    onClick: () => P(o.label, o.value),
+                    className: `starasia-input-dropdwon-item ${x ? "active" : " "} ${n.disable ? "starasia-input-dropdwon-item-disable" : null}`,
+                    onClick: () => h(n.label, n.value),
                     children: [
-                      R ? /* @__PURE__ */ t.jsx("div", { style: { marginRight: "8px" }, children: /* @__PURE__ */ t.jsx(Rn, { isChecked: l }) }) : null,
-                      o.icon ? /* @__PURE__ */ t.jsx("div", { children: or.cloneElement(o.icon, {
+                      l ? /* @__PURE__ */ r("div", { style: { marginRight: "8px" }, children: /* @__PURE__ */ r(K, { isChecked: x }) }) : null,
+                      n.icon ? /* @__PURE__ */ r("div", { children: F.cloneElement(n.icon, {
                         width: 16
                       }) }) : null,
-                      /* @__PURE__ */ t.jsxs("div", { children: [
-                        /* @__PURE__ */ t.jsx(
+                      /* @__PURE__ */ p("div", { children: [
+                        /* @__PURE__ */ r(
                           "p",
                           {
-                            className: `starasia-input-dropdwon-item-text ${l ? "active" : null} ${o.disable ? "starasia-input-dropdwon-item-disable" : null}`,
+                            className: `starasia-input-dropdwon-item-text ${x ? "active" : null} ${n.disable ? "starasia-input-dropdwon-item-disable" : null}`,
                             style: {
                               textWrap: "nowrap",
-                              width: `${_ - 12}px`,
+                              width: `${C - 12}px`,
                               overflow: "hidden",
                               textOverflow: "ellipsis"
                             },
-                            children: o.label
+                            children: n.label
                           }
                         ),
-                        o.description ? /* @__PURE__ */ t.jsx(
+                        n.description ? /* @__PURE__ */ r(
                           "p",
                           {
-                            className: `starasia-input-dropdwon-item-text-description ${l ? "active" : null} ${o.disable ? "starasia-input-dropdwon-item-disable" : null}`,
+                            className: `starasia-input-dropdwon-item-text-description ${x ? "active" : null} ${n.disable ? "starasia-input-dropdwon-item-disable" : null}`,
                             style: {
                               textWrap: "nowrap",
-                              width: `${_ - 12}px`,
+                              width: `${C - 12}px`,
                               overflow: "hidden",
                               textOverflow: "ellipsis"
                             },
-                            children: o.description
+                            children: n.description
                           }
                         ) : null
                       ] })
                     ]
                   },
-                  v
+                  f
                 );
               })
             }
@@ -1291,156 +599,149 @@ const kn = ({ ...u }) => /* @__PURE__ */ t.jsx(
       }
     ) : null });
   }
-), jn = ({
-  children: u,
-  handleChangePosition: p
+), T = ({
+  children: a,
+  handleChangePosition: i
 }) => {
-  const x = H(null);
-  N(() => {
-    var P;
-    const f = () => {
-      if (x.current) {
-        let R = x.current.parentElement;
-        for (; R && !k(R); )
-          R = R.parentElement;
-        R && p();
+  const t = y(null);
+  b(() => {
+    var h;
+    const o = () => {
+      if (t.current) {
+        let l = t.current.parentElement;
+        for (; l && !c(l); )
+          l = l.parentElement;
+        l && i();
       }
     };
-    let h = (P = x.current) == null ? void 0 : P.parentElement;
-    for (; h && !k(h); )
-      h = h.parentElement;
-    return h && h.addEventListener("scroll", f), f(), () => {
-      h && h.removeEventListener("scroll", f);
+    let e = (h = t.current) == null ? void 0 : h.parentElement;
+    for (; e && !c(e); )
+      e = e.parentElement;
+    return e && e.addEventListener("scroll", o), o(), () => {
+      e && e.removeEventListener("scroll", o);
     };
   }, []);
-  const k = (f) => f && (f.scrollHeight > f.clientHeight || f.scrollWidth > f.clientWidth);
-  return /* @__PURE__ */ t.jsx("div", { ref: x, children: u });
-}, Br = "starasia-input-dropdown-styles", Cn = (u) => {
-  if (!document.getElementById(Br)) {
-    const p = document.createElement("style");
-    p.id = Br, p.textContent = u, document.head.appendChild(p);
+  const c = (o) => o && (o.scrollHeight > o.clientHeight || o.scrollWidth > o.clientWidth);
+  return /* @__PURE__ */ r("div", { ref: t, children: a });
+}, A = "starasia-input-dropdown-styles", U = (a) => {
+  if (!document.getElementById(A)) {
+    const i = document.createElement("style");
+    i.id = A, i.textContent = a, document.head.appendChild(i);
   }
 };
-Cn(mn);
-const Sn = ({
-  dropdownLists: u,
-  onChange: p,
-  defaultValue: x,
-  size: k = "md",
-  multiSelect: f,
-  searchAble: h,
-  iconLeft: P,
-  placeholder: R,
-  onSearch: g,
-  error: C,
-  onBlur: _,
-  onFocus: $,
-  disable: E,
-  searchValue: L
+U(P);
+const _ = ({
+  dropdownLists: a,
+  onChange: i,
+  defaultValue: t,
+  size: c = "md",
+  multiSelect: o,
+  searchAble: e,
+  iconLeft: h,
+  placeholder: l,
+  onSearch: v,
+  error: I,
+  onBlur: C,
+  onFocus: R,
+  disable: $,
+  searchValue: z
 }) => {
-  const A = H(), [m, o] = Z([]), [v, l] = Z(""), w = H(null), { isComponentVisible: j, ref: z, setIsComponentVisible: B } = yn(!1), ir = () => {
-    B((T) => !T);
-  }, Q = (T, O) => {
-    if (!f)
-      o([{ label: T, value: O }]), p([{ label: T, value: O }]), B(!1);
-    else if (m == null ? void 0 : m.find((S) => S.value === O)) {
-      const S = [
-        ...m ? m.filter((M) => M.value !== O) : []
+  const w = y(), [n, f] = k([]), [x, E] = k(""), g = y(null), { isComponentVisible: B, ref: L, setIsComponentVisible: N } = V(!1), H = () => {
+    N((s) => !s);
+  }, j = (s, d) => {
+    if (!o)
+      f([{ label: s, value: d }]), i([{ label: s, value: d }]), N(!1);
+    else if (n == null ? void 0 : n.find((u) => u.value === d)) {
+      const u = [
+        ...n ? n.filter((D) => D.value !== d) : []
       ];
-      o(S), p(S);
+      f(u), i(u);
     } else {
-      const S = [...m || [], { label: T, value: O }];
-      o(S), p(S);
+      const u = [...n || [], { label: s, value: d }];
+      f(u), i(u);
     }
   };
-  N(() => {
-    JSON.stringify(A.current) === JSON.stringify(x) || (A.current = x, o(A.current || []));
-  }, [x]);
-  const rr = () => m.length ? f ? m == null ? void 0 : m.map((T, O) => /* @__PURE__ */ t.jsxs("div", { className: "starasia-input-dropdown-preview-item", children: [
-    /* @__PURE__ */ t.jsx("p", { style: { minWidth: "max-content" }, children: T == null ? void 0 : T.label }, O),
-    /* @__PURE__ */ t.jsx(
-      Tn,
+  b(() => {
+    JSON.stringify(w.current) === JSON.stringify(t) || (w.current = t, f(w.current || []));
+  }, [t]);
+  const O = () => n.length ? o ? n == null ? void 0 : n.map((s, d) => /* @__PURE__ */ p("div", { className: "starasia-input-dropdown-preview-item", children: [
+    /* @__PURE__ */ r("p", { style: { minWidth: "max-content" }, children: s == null ? void 0 : s.label }, d),
+    /* @__PURE__ */ r(
+      X,
       {
-        onClick: () => Q(T.label, T.value)
+        onClick: () => j(s.label, s.value)
       }
     )
-  ] })) : /* @__PURE__ */ t.jsx("p", { style: { minWidth: "max-content" }, children: m == null ? void 0 : m[0].label }) : /* @__PURE__ */ t.jsx("p", { className: "starasia-input-dropdown-placeholder", children: R }), Y = () => {
-    if (z.current && w.current) {
-      const T = window.innerHeight, O = z.current.getBoundingClientRect(), D = w.current.getBoundingClientRect(), S = O.bottom + D.height;
-      w.current.style.left = `${O.left}px`, w.current.style.width = `${O.width}px`, S >= T - 10 ? (w.current.style.top = `${O.top - D.height - 5}px`, l("top")) : (w.current.style.top = `${O.top + O.height}px`, l("bottom"));
+  ] })) : /* @__PURE__ */ r("p", { style: { minWidth: "max-content" }, children: n == null ? void 0 : n[0].label }) : /* @__PURE__ */ r("p", { className: "starasia-input-dropdown-placeholder", children: l }), m = () => {
+    if (L.current && g.current) {
+      const s = window.innerHeight, d = L.current.getBoundingClientRect(), W = g.current.getBoundingClientRect(), u = d.bottom + W.height;
+      g.current.style.left = `${d.left}px`, g.current.style.width = `${d.width}px`, u >= s - 10 ? (g.current.style.top = `${d.top - W.height - 5}px`, E("top")) : (g.current.style.top = `${d.top + d.height}px`, E("bottom"));
     }
   };
-  return N(() => (window.addEventListener("scroll", Y), window.addEventListener("resize", Y), () => {
-    window.removeEventListener("scroll", Y), window.removeEventListener("resize", Y);
-  }), []), N(() => {
-    Y();
-  }, [j]), N(() => {
-    j && w.current && !h && setTimeout(() => {
-      try {
-        w.current && w.current.focus();
-      } catch {
-      }
-    }, 0);
-  }, [j, h]), /* @__PURE__ */ t.jsx(jn, { handleChangePosition: Y, children: /* @__PURE__ */ t.jsxs(
+  return b(() => (window.addEventListener("scroll", m), window.addEventListener("resize", m), () => {
+    window.removeEventListener("scroll", m), window.removeEventListener("resize", m);
+  }), []), b(() => {
+    m();
+  }, [B]), /* @__PURE__ */ r(T, { handleChangePosition: m, children: /* @__PURE__ */ p(
     "div",
     {
-      className: `starasia-input-dropdown-container ${E ? "disable" : ""} starasia-input-dropdown-size-${k} ${j ? "active" : ""} ${C ? "error" : ""}`,
-      ref: z,
-      onClick: ir,
+      className: `starasia-input-dropdown-container ${$ ? "disable" : ""} starasia-input-dropdown-size-${c} ${B ? "active" : ""} ${I ? "error" : ""}`,
+      ref: L,
+      onClick: H,
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: "starasia-input-dropdown-preview-container", children: [
-          P ? /* @__PURE__ */ t.jsx(t.Fragment, { children: or.cloneElement(P, {
-            width: Yr(k),
+        /* @__PURE__ */ p("div", { className: "starasia-input-dropdown-preview-container", children: [
+          h ? /* @__PURE__ */ r(q, { children: F.cloneElement(h, {
+            width: S(c),
             color: "#939E99",
             style: {
               color: "#939E99"
             }
           }) }) : null,
-          /* @__PURE__ */ t.jsx(
+          /* @__PURE__ */ r(
             "div",
             {
               className: "starasia-input-dropdown-container-preview-item",
               tabIndex: 100,
-              onBlur: _,
-              onFocus: $,
-              children: rr()
+              onBlur: C,
+              onFocus: R,
+              children: O()
             }
           ),
-          /* @__PURE__ */ t.jsx(
-            kn,
+          /* @__PURE__ */ r(
+            J,
             {
               strokeWidth: 2,
-              width: Yr(k),
+              width: S(c),
               style: { color: "#939E99" }
             }
           )
         ] }),
-        /* @__PURE__ */ t.jsx(
-          _n,
+        /* @__PURE__ */ r(
+          Q,
           {
-            dropdownLists: u,
-            handleChangeValue: Q,
-            isComponentVisible: j,
-            positionDropdown: v,
-            searchAble: !!h,
-            value: m,
-            onSearch: g,
-            ref: w,
-            multiSelect: f,
-            searchValue: L
+            dropdownLists: a,
+            handleChangeValue: j,
+            isComponentVisible: B,
+            positionDropdown: x,
+            searchAble: !!e,
+            value: n,
+            onSearch: v,
+            ref: g,
+            multiSelect: o,
+            searchValue: z
           }
         )
       ]
     }
   ) });
-}, Yr = (u) => {
-  if (u === "sm")
+}, S = (a) => {
+  if (a === "sm")
     return 16;
-  if (u === "md")
+  if (a === "md")
     return 16;
-  if (u === "lg")
+  if (a === "lg")
     return 20;
-}, Tn = (u) => /* @__PURE__ */ t.jsx(
+}, X = (a) => /* @__PURE__ */ r(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1448,8 +749,8 @@ const Sn = ({
     height: "18",
     viewBox: "0 0 18 18",
     fill: "none",
-    ...u,
-    children: /* @__PURE__ */ t.jsx(
+    ...a,
+    children: /* @__PURE__ */ r(
       "path",
       {
         d: "M12 6L6 12M6.00001 6L12 12",
@@ -1462,5 +763,5 @@ const Sn = ({
   }
 );
 export {
-  Sn as Dropdown
+  _ as Dropdown
 };