@starasia/dropdown 1.0.0

package/dist/dropdown.es.js

@@ -0,0 +1,1408 @@
+import or, { useState as G, useRef as X, useEffect as B, forwardRef as gn } from "react";
+var wr = { exports: {} }, H = {};
+/**
+ * @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 H;
+  zr = 1;
+  var c = or, p = Symbol.for("react.element"), x = Symbol.for("react.fragment"), b = Object.prototype.hasOwnProperty, u = c.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, v = { key: !0, ref: !0, __self: !0, __source: !0 };
+  function O(m, f, F) {
+    var y, T = {}, A = null, D = null;
+    F !== void 0 && (A = "" + F), f.key !== void 0 && (A = "" + f.key), f.ref !== void 0 && (D = f.ref);
+    for (y in f)
+      b.call(f, y) && !v.hasOwnProperty(y) && (T[y] = f[y]);
+    if (m && m.defaultProps)
+      for (y in f = m.defaultProps, f)
+        T[y] === void 0 && (T[y] = f[y]);
+    return { $$typeof: p, type: m, key: A, ref: D, props: T, _owner: u.current };
+  }
+  return H.Fragment = x, H.jsx = O, H.jsxs = O, H;
+}
+var K = {};
+/**
+ * @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 c = or, p = Symbol.for("react.element"), x = Symbol.for("react.portal"), b = Symbol.for("react.fragment"), u = Symbol.for("react.strict_mode"), v = Symbol.for("react.profiler"), O = Symbol.for("react.provider"), m = Symbol.for("react.context"), f = Symbol.for("react.forward_ref"), F = Symbol.for("react.suspense"), y = Symbol.for("react.suspense_list"), T = Symbol.for("react.memo"), A = Symbol.for("react.lazy"), D = Symbol.for("react.offscreen"), I = Symbol.iterator, o = "@@iterator";
+    function $(r) {
+      if (r === null || typeof r != "object")
+        return null;
+      var n = I && r[I] || r[o];
+      return typeof n == "function" ? n : null;
+    }
+    var S = c.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    function h(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 = S.ReactDebugCurrentFrame, d = a.getStackAddendum();
+        d !== "" && (n += "%s", e = e.concat([d]));
+        var l = e.map(function(s) {
+          return String(s);
+        });
+        l.unshift("Warning: " + n), Function.prototype.apply.call(console[r], console, l);
+      }
+    }
+    var V = !1, U = !1, Z = !1, ir = !1, Q = !1, rr;
+    rr = Symbol.for("react.module.reference");
+    function L(r) {
+      return !!(typeof r == "string" || typeof r == "function" || r === b || r === v || Q || r === u || r === F || r === y || ir || r === D || V || U || Z || typeof r == "object" && r !== null && (r.$$typeof === A || r.$$typeof === T || r.$$typeof === O || r.$$typeof === m || r.$$typeof === f || // 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 R(r, n, e) {
+      var a = r.displayName;
+      if (a)
+        return a;
+      var d = n.displayName || n.name || "";
+      return d !== "" ? e + "(" + d + ")" : e;
+    }
+    function k(r) {
+      return r.displayName || "Context";
+    }
+    function j(r) {
+      if (r == null)
+        return null;
+      if (typeof r.tag == "number" && h("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 b:
+          return "Fragment";
+        case x:
+          return "Portal";
+        case v:
+          return "Profiler";
+        case u:
+          return "StrictMode";
+        case F:
+          return "Suspense";
+        case y:
+          return "SuspenseList";
+      }
+      if (typeof r == "object")
+        switch (r.$$typeof) {
+          case m:
+            var n = r;
+            return k(n) + ".Consumer";
+          case O:
+            var e = r;
+            return k(e._context) + ".Provider";
+          case f:
+            return R(r, r.render, "ForwardRef");
+          case T:
+            var a = r.displayName || null;
+            return a !== null ? a : j(r.type) || "Memo";
+          case A: {
+            var d = r, l = d._payload, s = d._init;
+            try {
+              return j(s(l));
+            } catch {
+              return null;
+            }
+          }
+        }
+      return null;
+    }
+    var E = Object.assign, z = 0, gr, br, xr, mr, yr, kr, Er;
+    function Rr() {
+    }
+    Rr.__reactDisabledLog = !0;
+    function Mr() {
+      {
+        if (z === 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
+          });
+        }
+        z++;
+      }
+    }
+    function Vr() {
+      {
+        if (z--, z === 0) {
+          var r = {
+            configurable: !0,
+            enumerable: !0,
+            writable: !0
+          };
+          Object.defineProperties(console, {
+            log: E({}, r, {
+              value: gr
+            }),
+            info: E({}, r, {
+              value: br
+            }),
+            warn: E({}, r, {
+              value: xr
+            }),
+            error: E({}, r, {
+              value: mr
+            }),
+            group: E({}, r, {
+              value: yr
+            }),
+            groupCollapsed: E({}, r, {
+              value: kr
+            }),
+            groupEnd: E({}, r, {
+              value: Er
+            })
+          });
+        }
+        z < 0 && h("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
+      }
+    }
+    var sr = S.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 l;
+      l = 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 (C) {
+              a = C;
+            }
+            Reflect.construct(r, [], s);
+          } else {
+            try {
+              s.call();
+            } catch (C) {
+              a = C;
+            }
+            r.call(s.prototype);
+          }
+        } else {
+          try {
+            throw Error();
+          } catch (C) {
+            a = C;
+          }
+          r();
+        }
+      } catch (C) {
+        if (C && a && typeof C.stack == "string") {
+          for (var i = C.stack.split(`
+`), _ = a.stack.split(`
+`), w = i.length - 1, g = _.length - 1; w >= 1 && g >= 0 && i[w] !== _[g]; )
+            g--;
+          for (; w >= 1 && g >= 0; w--, g--)
+            if (i[w] !== _[g]) {
+              if (w !== 1 || g !== 1)
+                do
+                  if (w--, g--, g < 0 || i[w] !== _[g]) {
+                    var P = `
+` + i[w].replace(" at new ", " at ");
+                    return r.displayName && P.includes("<anonymous>") && (P = P.replace("<anonymous>", r.displayName)), typeof r == "function" && er.set(r, P), P;
+                  }
+                while (w >= 1 && g >= 0);
+              break;
+            }
+        }
+      } finally {
+        lr = !1, sr.current = l, Vr(), Error.prepareStackTrace = d;
+      }
+      var M = r ? r.displayName || r.name : "", N = M ? nr(M) : "";
+      return typeof r == "function" && er.set(r, N), N;
+    }
+    function qr(r, n, e) {
+      return _r(r, !1);
+    }
+    function Jr(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, Jr(r));
+      if (typeof r == "string")
+        return nr(r);
+      switch (r) {
+        case F:
+          return nr("Suspense");
+        case y:
+          return nr("SuspenseList");
+      }
+      if (typeof r == "object")
+        switch (r.$$typeof) {
+          case f:
+            return qr(r.render);
+          case T:
+            return ar(r.type, n, e);
+          case A: {
+            var a = r, d = a._payload, l = a._init;
+            try {
+              return ar(l(d), n, e);
+            } catch {
+            }
+          }
+        }
+      return "";
+    }
+    var q = Object.prototype.hasOwnProperty, jr = {}, Cr = S.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 Hr(r, n, e, a, d) {
+      {
+        var l = Function.call.bind(q);
+        for (var s in r)
+          if (l(r, s)) {
+            var i = void 0;
+            try {
+              if (typeof r[s] != "function") {
+                var _ = 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 _.name = "Invariant Violation", _;
+              }
+              i = r[s](n, s, a, e, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
+            } catch (w) {
+              i = w;
+            }
+            i && !(i instanceof Error) && (tr(d), h("%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), h("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 Or(r), !1;
+      } catch {
+        return !0;
+      }
+    }
+    function Or(r) {
+      return "" + r;
+    }
+    function Tr(r) {
+      if (Xr(r))
+        return h("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Gr(r)), Or(r);
+    }
+    var J = S.ReactCurrentOwner, Zr = {
+      key: !0,
+      ref: !0,
+      __self: !0,
+      __source: !0
+    }, Sr, Pr, ur;
+    ur = {};
+    function Qr(r) {
+      if (q.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 (q.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" && J.current && n && J.current.stateNode !== n) {
+        var e = j(J.current.type);
+        ur[e] || (h('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', j(J.current.type), r.ref), ur[e] = !0);
+      }
+    }
+    function en(r, n) {
+      {
+        var e = function() {
+          Sr || (Sr = !0, h("%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, h("%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, l, 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: l
+      };
+      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 l, s = {}, i = null, _ = null;
+        e !== void 0 && (Tr(e), i = "" + e), rn(n) && (Tr(n.key), i = "" + n.key), Qr(n) && (_ = n.ref, nn(n, d));
+        for (l in n)
+          q.call(n, l) && !Zr.hasOwnProperty(l) && (s[l] = n[l]);
+        if (r && r.defaultProps) {
+          var w = r.defaultProps;
+          for (l in w)
+            s[l] === void 0 && (s[l] = w[l]);
+        }
+        if (i || _) {
+          var g = typeof r == "function" ? r.displayName || r.name || "Unknown" : r;
+          i && en(s, g), _ && an(s, g);
+        }
+        return tn(r, i, _, d, a, J.current, s);
+      }
+    }
+    var pr = S.ReactCurrentOwner, Ir = S.ReactDebugCurrentFrame;
+    function Y(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 Fr() {
+      {
+        if (pr.current) {
+          var r = j(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 Ar = {};
+    function dn(r) {
+      {
+        var n = Fr();
+        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 Dr(r, n) {
+      {
+        if (!r._store || r._store.validated || r.key != null)
+          return;
+        r._store.validated = !0;
+        var e = dn(n);
+        if (Ar[e])
+          return;
+        Ar[e] = !0;
+        var a = "";
+        r && r._owner && r._owner !== pr.current && (a = " It was passed a child from " + j(r._owner.type) + "."), Y(r), h('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), Y(null);
+      }
+    }
+    function Wr(r, n) {
+      {
+        if (typeof r != "object")
+          return;
+        if (cr(r))
+          for (var e = 0; e < r.length; e++) {
+            var a = r[e];
+            vr(a) && Dr(a, n);
+          }
+        else if (vr(r))
+          r._store && (r._store.validated = !0);
+        else if (r) {
+          var d = $(r);
+          if (typeof d == "function" && d !== r.entries)
+            for (var l = d.call(r), s; !(s = l.next()).done; )
+              vr(s.value) && Dr(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 === f || // Note: Memo only checks outer props here.
+        // Inner props are checked in the reconciler.
+        n.$$typeof === T))
+          e = n.propTypes;
+        else
+          return;
+        if (e) {
+          var a = j(n);
+          Hr(e, r.props, "prop", a, r);
+        } else if (n.PropTypes !== void 0 && !fr) {
+          fr = !0;
+          var d = j(n);
+          h("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", d || "Unknown");
+        }
+        typeof n.getDefaultProps == "function" && !n.getDefaultProps.isReactClassApproved && h("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") {
+            Y(r), h("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", a), Y(null);
+            break;
+          }
+        }
+        r.ref !== null && (Y(r), h("Invalid attribute `ref` supplied to `React.Fragment`."), Y(null));
+      }
+    }
+    var $r = {};
+    function Lr(r, n, e, a, d, l) {
+      {
+        var s = L(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 _ = sn(d);
+          _ ? i += _ : i += Fr();
+          var w;
+          r === null ? w = "null" : cr(r) ? w = "array" : r !== void 0 && r.$$typeof === p ? (w = "<" + (j(r.type) || "Unknown") + " />", i = " Did you accidentally export a JSX literal instead of a component?") : w = typeof r, h("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", w, i);
+        }
+        var g = on(r, n, e, d, l);
+        if (g == null)
+          return g;
+        if (s) {
+          var P = n.children;
+          if (P !== void 0)
+            if (a)
+              if (cr(P)) {
+                for (var M = 0; M < P.length; M++)
+                  Wr(P[M], r);
+                Object.freeze && Object.freeze(P);
+              } else
+                h("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
+              Wr(P, r);
+        }
+        if (q.call(n, "key")) {
+          var N = j(r), C = Object.keys(n).filter(function(wn) {
+            return wn !== "key";
+          }), hr = C.length > 0 ? "{key: someKey, " + C.join(": ..., ") + ": ...}" : "{key: someKey}";
+          if (!$r[N + hr]) {
+            var hn = C.length > 0 ? "{" + C.join(": ..., ") + ": ...}" : "{}";
+            h(`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, N, hn, N), $r[N + hr] = !0;
+          }
+        }
+        return r === b ? cn(g) : ln(g), g;
+      }
+    }
+    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;
+    K.Fragment = b, K.jsx = fn, K.jsxs = vn;
+  }()), K;
+}
+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");
+* {
+  margin: 0;
+  padding: 0;
+  font-family: "Poppins", sans-serif;
+  box-sizing: border-box;
+}
+:root {
+  /* color */
+  /* blue */
+  --starasia-ui-dropdown-color-primary-blue: var(
+    --starasia-ui-color-blue-700,
+    #1d4ed8
+  );
+  --starasia-ui-dropdown-color-secondary-blue: var(
+    --starasia-ui-color-blue-500,
+    #3b82f6
+  );
+  --starasia-ui-dropdown-color-tertiary-blue: var(
+    --starasia-ui-color-blue-300,
+    #93c5fd
+  );
+  --starasia-ui-dropdown-color-quaternary-blue: var(
+    --starasia-ui-color-blue-100,
+    #dbeafe
+  );
+  --starasia-ui-dropdown-color-quinary-blue: var(
+    --starasia-ui-color-blue-50,
+    #eff6ff
+  );
+  /* gray */
+  --starasia-ui-dropdown-color-primary-gray: var(
+    --starasia-ui-color-gray-700,
+    #374151
+  );
+  --starasia-ui-dropdown-color-secondary-gray: var(
+    --starasia-ui-color-gray-500,
+    #6b7280
+  );
+  --starasia-ui-dropdown-color-tertiary-gray: var(
+    --starasia-ui-color-gray-300,
+    #d1d5db
+  );
+  --starasia-ui-dropdown-color-quaternary-gray: var(
+    --starasia-ui-color-gray-100,
+    #f3f4f6
+  );
+  --starasia-ui-dropdown-color-quinary-gray: var(
+    --starasia-ui-color-gray-50,
+    #f9fafb
+  );
+  /* bg color */
+  --starasia-ui-dropdown-background-color-primary: var(
+    --starasia-ui-dropdown-color-secondary-blue,
+    #3b82f6
+  );
+  --starasia-ui-dropdown-background-color-secondary: var(
+    --starasia-ui-dropdown-color-quinary-blue,
+    #eff6ff
+  );
+
+  /* disalble color */
+  --starasia-ui-dropdown-color-disable: var(
+    --starasia-ui-dropdown-color-tertiary-gray,
+    #d1d5db
+  );
+
+  /* border color */
+  --starasia-ui-dropdown-border-color-primary: var(
+    --starasia-ui-color-blue-500,
+    #3b82f6
+  );
+  --starasia-ui-dropdown-border-color-secondary: var(
+    --starasia-ui-color-gray-300,
+    #d1d5db
+  );
+  --starasia-ui-dropdown-border-color-tertiary: rgba(120, 134, 127, 0.2);
+
+  --starasia-ui-dropdown-color-secondary-red: var(
+    --starasia-ui-color-red-500,
+    #ef4444
+  );
+
+  /* plachoder color */
+  --starasia-ui-dropdown-placholder-color: var(
+    --starasia-ui-color-gray-200,
+    #c9cecc
+  );
+
+  /* border width */
+  --starasia-ui-dropdown-border-width: var(--starasia-ui-border, 1px);
+
+  /* spacing */
+  --starasia-ui-dropdown-spacing-xs: var(--starasia-ui-spacing-xs, 4px);
+  --starasia-ui-dropdown-spacing-sm: var(--starasia-ui-spacing-sm, 8px);
+
+  /* shadow */
+  --starasia-ui-dropdown-box-shadow: 0px 0px 0px 2px rgba(100, 181, 246, 0.2);
+
+  /* below is for size,above is */
+  --starasia-ui-dropdown-fontWeight-normal: var(
+    --starasia-ui-fontWeights-normal,
+    300
+  );
+  /* dropdown size sm */
+  --starasia-ui-dropdown-height-sm: var(--starasia-ui-h-8, 32px);
+  --starasia-ui-dropdown-border-radius-sm: var(--starasia-ui-radii-md, 8px);
+  --starasia-ui-dropdown-padding-inline-sm: var(--starasia-ui-spacing-sm, 8px);
+
+  /* dropdown size md */
+  --starasia-ui-dropdown-height-md: 38px;
+  --starasia-ui-dropdown-border-radius-md: var(--starasia-ui-radii-md, 8px);
+  --starasia-ui-dropdown-padding-inline-md: var(--starasia-ui-spacing-3, 12px);
+
+  /* dropdown size lg */
+  --starasia-ui-dropdown-height-lg: var(--starasia-ui-h-12, 48px);
+  --starasia-ui-dropdown-border-radius-lg: var(--starasia-ui-radii-lg, 12px);
+  --starasia-ui-dropdown-padding-inline-lg: var(--starasia-ui-spacing-3, 12px);
+}
+
+.starasia-input-dropdown-size-sm {
+  --baseFont: var(--starasia-ui-fontSizes-sm, 12px);
+  --height: var(--starasia-ui-dropdown-height-sm);
+  --borderRadius: var(--starasia-ui-dropdown-border-radius-sm);
+  --paddingInline: var(--starasia-ui-dropdown-padding-inline-sm);
+}
+
+.starasia-input-dropdown-size-md {
+  --baseFont: var(--starasia-ui-fontSizes-md, 14px);
+  --height: var(--starasia-ui-dropdown-height-md);
+  --borderRadius: var(--starasia-ui-dropdown-border-radius-md);
+  --paddingInline: var(--starasia-ui-dropdown-padding-inline-md);
+}
+
+.starasia-input-dropdown-size-lg {
+  --baseFont: var(--starasia-ui-fontSizes-lg, 16px);
+  --height: var(--starasia-ui-dropdown-height-lg);
+  --borderRadius: var(--starasia-ui-dropdown-border-radius-lg);
+  --paddingInline: var(--starasia-ui-dropdown-padding-inline-lg);
+}
+
+.starasia-input-dropdown-container {
+  position: relative;
+  min-height: var(--height);
+  padding-inline: var(--paddingInline);
+  display: flex;
+  align-items: center;
+  border: var(--starasia-ui-dropdown-border-width) solid
+    rgba(120, 134, 127, 0.2);
+  border-radius: var(--borderRadius);
+  background-color: white;
+  font-size: var(--baseFont);
+  cursor: pointer;
+}
+.starasia-input-dropdown-container.disable {
+  background-color: #f2f3f2;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.starasia-input-dropdown-container.error {
+  border-color: var(--starasia-ui-dropdown-color-secondary-red) !important;
+}
+.starasia-input-dropdown-container.active {
+  border-color: var(--starasia-ui-dropdown-border-color-primary);
+  box-shadow: var(--starasia-ui-dropdown-box-shadow);
+  background-color: white;
+}
+
+.starasia-input-dropdown-preview-container {
+  display: flex;
+  flex-direction: row;
+  gap: var(--starasia-ui-dropdown-spacing-sm);
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  overflow-y: hidden;
+}
+
+.starasia-input-dropdown-lists-container {
+  /* position: absolute; */
+  position: fixed;
+  /* left: 0; */
+  padding: var(--starasia-ui-dropdown-spacing-sm);
+  border: var(--starasia-ui-dropdown-border-width) solid
+    var(--starasia-ui-dropdown-border-color-tertiary);
+  border-radius: var(--borderRadius);
+  background-color: #fffeff;
+  box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.08);
+  max-height: 312px;
+  overflow-y: auto;
+  z-index: 999;
+  width: 100%;
+  /* width: max-content; */
+  /* min-width: 100%; */
+  display: flex;
+  flex-direction: column;
+  gap: var(--starasia-ui-dropdown-spacing-sm);
+  /* overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap; */
+}
+
+.starasia-input-dropdown-lists-container-bottom {
+  top: 100%;
+  margin-top: var(--starasia-ui-dropdown-spacing-xs);
+}
+.starasia-input-dropdown-lists-container-top {
+  bottom: 100%;
+  margin-bottom: var(--starasia-ui-dropdown-spacing-xs);
+}
+
+.starasia-input-dropdown-container-dropdown-search {
+  display: flex;
+  align-items: center;
+  height: var(--height);
+  min-height: var(--height);
+  max-height: var(--height);
+  border: var(--starasia-ui-dropdown-border-width) solid
+    var(--starasia-ui-dropdown-border-color-secondary);
+  border-radius: var(--borderRadius);
+  gap: var(--starasia-ui-dropdown-spacing-sm);
+  padding-inline: var(--paddingInline);
+  background: white;
+  & input {
+    flex: 1;
+    outline: none;
+    background-color: transparent;
+    border: none;
+    font-size: inherit;
+  }
+}
+
+.starasia-input-dropdwon-item-container {
+  display: flex;
+  flex-direction: column;
+  /* overflow: hidden; */
+
+  /* gap: var(--starasia-ui-dropdown-spacing-xs); */
+}
+.starasia-input-dropdwon-item-container.multi {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  /* overflow: hidden; */
+
+  /* gap: var(--starasia-ui-dropdown-spacing-xs); */
+}
+
+.starasia-input-dropdwon-item {
+  /* max-height: var(--height); */
+  max-height: 58px;
+  box-sizing: border-box;
+  padding-inline: var(--paddingInline);
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  gap: var(--starasia-ui-dropdown-spacing-xs);
+  padding-block: var(--paddingInline);
+  border-radius: var(--starasia-ui-dropdown-border-radius-sm);
+  /* min-width: max-content; */
+  overflow: hidden;
+}
+
+.starasia-input-dropdwon-item:hover {
+  background-color: rgba(100, 181, 246, 0.21);
+}
+.starasia-input-dropdwon-item.active {
+  /* color: var(--starasia-ui-dropdown-background-color-primary); */
+  /* border-radius: var(--borderRadius); */
+  background-color: rgba(100, 181, 246, 0.21);
+  /* background: var(--starasia-ui-dropdown-background-color-secondary); */
+  /* box-shadow: 0px 0px 0px -1px #f0f0f0; */
+}
+
+.starasia-input-dropdwon-item-disable {
+  color: var(--starasia-ui-dropdown-color-disable) !important;
+  pointer-events: none;
+}
+
+.starasia-input-dropdown-container-preview-item {
+  flex: 1;
+  display: flex;
+  gap: var(--starasia-ui-dropdown-spacing-xs);
+  flex-wrap: wrap;
+  align-items: center;
+  overflow-y: auto;
+  padding-block: 4px;
+}
+
+.starasia-input-dropdown-preview-item {
+  border: var(--starasia-ui-dropdown-border-width) solid
+    var(--starasia-ui-dropdown-border-color-primary);
+  padding-inline: var(--paddingInline);
+  border-radius: var(--borderRadius);
+  background-color: var(--starasia-ui-dropdown-background-color-secondary);
+  color: var(--starasia-ui-dropdown-background-color-primary);
+  height: max-content;
+  font-size: var(--baseFont);
+  display: flex;
+  align-items: center;
+  gap: 2;
+}
+.starasia-input-dropdown-placeholder {
+  color: var(--starasia-ui-dropdown-placholder-color);
+  font-weight: var(--starasia-ui-dropdown-fontWeight-normal);
+}
+
+.starasia-input-dropdwon-item-text {
+  color: #181a19;
+  /* font-size: 14px; */
+  font-size: inherit;
+  font-weight: 500;
+}
+.starasia-input-dropdwon-item-text.active {
+  color: #1976d2;
+}
+
+.starasia-input-dropdwon-item-text-description {
+  color: #78867f;
+  /* font-size: 14px; */
+  font-size: inherit;
+  font-weight: 400;
+}
+.starasia-input-dropdwon-item-text-description.active {
+  color: #1976d2;
+}
+
+/* for checkbox */
+.checkbox-wrapper-30 .checkbox {
+  --bg: #fff;
+  --brdr: #d1d6ee;
+  --brdr-actv: #1976d2;
+  --brdr-hovr: #bbc1e1;
+  --dur: calc((var(--size, 2) / 2) * 0.6s);
+  display: inline-block;
+  /* width: calc(var(--size, 1) * 22px); */
+  width: 16px;
+  height: 16px;
+  position: relative;
+}
+.checkbox-wrapper-30 .checkbox:after {
+  content: "";
+  width: 100%;
+  padding-top: 100%;
+  display: block;
+}
+.checkbox-wrapper-30 .checkbox > * {
+  position: absolute;
+}
+.checkbox-wrapper-30 .checkbox input {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -webkit-tap-highlight-color: transparent;
+  cursor: pointer;
+  background-color: var(--newBgClr, var(--bg));
+  border-radius: calc(var(--size, 1) * 4px);
+  border: calc(var(--newBrdr, var(--size, 1)) * 1px) solid;
+  color: var(--newBrdrClr, var(--brdr));
+  outline: none;
+  margin: 0;
+  padding: 0;
+  transition: all calc(var(--dur) / 3) linear;
+}
+.checkbox-wrapper-30 .checkbox input:hover,
+.checkbox-wrapper-30 .checkbox input:checked {
+  --newBrdr: calc(var(--size, 1) * 2);
+}
+.checkbox-wrapper-30 .checkbox input:hover {
+  --newBrdrClr: var(--brdr-hovr);
+}
+.checkbox-wrapper-30 .checkbox input:checked {
+  --newBrdrClr: var(--brdr-actv);
+  --newBgClr: var(--brdr-actv);
+  /* transition-delay: calc(var(--dur) / 1.3); */
+}
+.checkbox-wrapper-30 .checkbox input:checked + svg {
+  --dashArray: 16 93;
+  --dashOffset: 109;
+}
+.checkbox-wrapper-30 .checkbox input:checked + svg {
+  color: white;
+  /* transition-delay: calc(var(--dur) / 1.3); */
+  transition-delay: 0.1s;
+}
+.checkbox-wrapper-30 .checkbox svg {
+  fill: none;
+  left: 0;
+  pointer-events: none;
+  stroke: var(--stroke, var(--border-active));
+  stroke-dasharray: var(--dashArray, 93);
+  stroke-dashoffset: var(--dashOffset, 94);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2px;
+  top: 0;
+  transition: stroke-dasharray var(--dur), stroke-dashoffset var(--dur);
+}
+.checkbox-wrapper-30 .checkbox svg,
+.checkbox-wrapper-30 .checkbox input {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+`;
+function yn(c) {
+  const [p, x] = G(c), b = X(null), u = (v) => {
+    b.current && !b.current.contains(v.target) && x(!1);
+  };
+  return B(() => (document.addEventListener("click", u, !0), () => {
+    document.removeEventListener("click", u, !0);
+  }), []), { ref: b, isComponentVisible: p, setIsComponentVisible: x };
+}
+const kn = ({ ...c }) => /* @__PURE__ */ t.jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    ...c,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    color: "#939E99",
+    children: /* @__PURE__ */ t.jsx(
+      "path",
+      {
+        d: "M4 9L12 17L20 9",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      }
+    )
+  }
+), En = ({ ...c }) => /* @__PURE__ */ t.jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    ...c,
+    viewBox: "0 0 20 20",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ t.jsx(
+        "circle",
+        {
+          cx: "9.80547",
+          cy: "9.8055",
+          r: "7.49047",
+          stroke: "currentColor",
+          strokeWidth: "1.3",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ t.jsx(
+        "path",
+        {
+          d: "M15.0153 15.4043L17.9519 18.3333",
+          stroke: "currentColor",
+          strokeWidth: "1.3",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    ]
+  }
+), Rn = ({ isChecked: c }) => /* @__PURE__ */ t.jsxs("div", { className: "checkbox-wrapper-30", children: [
+  /* @__PURE__ */ t.jsxs("span", { className: "checkbox", children: [
+    /* @__PURE__ */ t.jsx(
+      "input",
+      {
+        type: "checkbox",
+        style: { pointerEvents: "none" },
+        checked: c
+      }
+    ),
+    /* @__PURE__ */ t.jsx("svg", { children: /* @__PURE__ */ t.jsx("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(
+    "path",
+    {
+      fill: "none",
+      stroke: "currentColor",
+      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(
+  ({
+    positionDropdown: c,
+    dropdownLists: p,
+    isComponentVisible: x,
+    searchAble: b,
+    onSearch: u,
+    value: v,
+    handleChangeValue: O,
+    multiSelect: m,
+    searchValue: f
+  }, F) => {
+    const [y, T] = G(0), [A, D] = G(), I = X(null);
+    return B(() => {
+      if (I.current) {
+        const o = I.current.getBoundingClientRect();
+        T(o.width);
+      }
+    }, [I, x]), B(() => {
+      p && f ? p.forEach((o) => {
+        if (o.label.startsWith(f || "")) {
+          D(o.value);
+          return;
+        }
+      }) : D(void 0);
+    }, [f, p]), /* @__PURE__ */ t.jsx(t.Fragment, { children: x ? /* @__PURE__ */ t.jsxs(
+      "div",
+      {
+        className: "starasia-input-dropdown-lists-container",
+        onClick: (o) => o.stopPropagation(),
+        ref: F,
+        children: [
+          b ? /* @__PURE__ */ t.jsxs(
+            "div",
+            {
+              className: "starasia-input-dropdown-container-dropdown-search",
+              style: {
+                order: c == "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(
+                  "input",
+                  {
+                    onChange: (o) => {
+                      u && u(o.target.value);
+                    },
+                    value: f,
+                    autoFocus: !0,
+                    style: { width: "100%" }
+                  }
+                )
+              ]
+            }
+          ) : null,
+          /* @__PURE__ */ t.jsx(
+            "div",
+            {
+              className: `starasia-input-dropdwon-item-container ${m ? "multi" : ""}`,
+              ref: I,
+              children: p.map((o, $) => {
+                const S = !!(v != null && v.find((h) => h.value === o.value));
+                return /* @__PURE__ */ t.jsxs(
+                  "div",
+                  {
+                    className: `starasia-input-dropdwon-item ${S ? "active" : " "} ${o.disable ? "starasia-input-dropdwon-item-disable" : null}`,
+                    onClick: () => O(o.label, o.value),
+                    children: [
+                      m ? /* @__PURE__ */ t.jsx("div", { style: { marginRight: "8px" }, children: /* @__PURE__ */ t.jsx(Rn, { isChecked: S }) }) : null,
+                      o.icon ? /* @__PURE__ */ t.jsx("div", { children: or.cloneElement(o.icon, {
+                        width: 16
+                      }) }) : null,
+                      /* @__PURE__ */ t.jsxs("div", { children: [
+                        /* @__PURE__ */ t.jsx(
+                          "p",
+                          {
+                            className: `starasia-input-dropdwon-item-text ${S ? "active" : null} ${o.disable ? "starasia-input-dropdwon-item-disable" : null}`,
+                            style: {
+                              textWrap: "nowrap",
+                              width: `${y - 12}px`,
+                              overflow: "hidden",
+                              textOverflow: "ellipsis"
+                            },
+                            children: o.label
+                          }
+                        ),
+                        o.description ? /* @__PURE__ */ t.jsx(
+                          "p",
+                          {
+                            className: `starasia-input-dropdwon-item-text-description ${S ? "active" : null} ${o.disable ? "starasia-input-dropdwon-item-disable" : null}`,
+                            style: {
+                              textWrap: "nowrap",
+                              width: `${y - 12}px`,
+                              overflow: "hidden",
+                              textOverflow: "ellipsis"
+                            },
+                            children: o.description
+                          }
+                        ) : null
+                      ] })
+                    ]
+                  },
+                  $
+                );
+              })
+            }
+          )
+        ]
+      }
+    ) : null });
+  }
+), jn = ({
+  children: c,
+  handleChangePosition: p
+}) => {
+  const x = X(null);
+  B(() => {
+    var O;
+    const u = () => {
+      if (x.current) {
+        let m = x.current.parentElement;
+        for (; m && !b(m); )
+          m = m.parentElement;
+        m && p();
+      }
+    };
+    let v = (O = x.current) == null ? void 0 : O.parentElement;
+    for (; v && !b(v); )
+      v = v.parentElement;
+    return v && v.addEventListener("scroll", u), u(), () => {
+      v && v.removeEventListener("scroll", u);
+    };
+  }, []);
+  const b = (u) => u && (u.scrollHeight > u.clientHeight || u.scrollWidth > u.clientWidth);
+  return /* @__PURE__ */ t.jsx("div", { ref: x, children: c });
+}, Br = "starasia-input-dropdown-styles", Cn = (c) => {
+  if (!document.getElementById(Br)) {
+    const p = document.createElement("style");
+    p.id = Br, p.textContent = c, document.head.appendChild(p);
+  }
+};
+Cn(mn);
+const Sn = ({
+  dropdownLists: c,
+  onChange: p,
+  defaultValue: x,
+  size: b = "md",
+  multiSelect: u,
+  searchAble: v,
+  iconLeft: O,
+  placeholder: m,
+  onSearch: f,
+  error: F,
+  onBlur: y,
+  onFocus: T,
+  disable: A,
+  searchValue: D
+}) => {
+  const I = X(), [o, $] = G([]), [S, h] = G(""), W = X(null), { isComponentVisible: V, ref: U, setIsComponentVisible: Z } = yn(!1), ir = () => {
+    Z((R) => !R);
+  }, Q = (R, k) => {
+    if (!u)
+      $([{ label: R, value: k }]), p([{ label: R, value: k }]), Z(!1);
+    else if (o == null ? void 0 : o.find((E) => E.value === k)) {
+      const E = [
+        ...o ? o.filter((z) => z.value !== k) : []
+      ];
+      $(E), p(E);
+    } else {
+      const E = [...o || [], { label: R, value: k }];
+      $(E), p(E);
+    }
+  };
+  B(() => {
+    JSON.stringify(I.current) === JSON.stringify(x) || (I.current = x, $(I.current || []));
+  }, [x]);
+  const rr = () => o.length ? u ? o == null ? void 0 : o.map((R, k) => /* @__PURE__ */ t.jsxs("div", { className: "starasia-input-dropdown-preview-item", children: [
+    /* @__PURE__ */ t.jsx("p", { style: { minWidth: "max-content" }, children: R == null ? void 0 : R.label }, k),
+    /* @__PURE__ */ t.jsx(
+      On,
+      {
+        onClick: () => Q(R.label, R.value)
+      }
+    )
+  ] })) : /* @__PURE__ */ t.jsx("p", { style: { minWidth: "max-content" }, children: o == null ? void 0 : o[0].label }) : /* @__PURE__ */ t.jsx("p", { className: "starasia-input-dropdown-placeholder", children: m }), L = () => {
+    if (U.current && W.current) {
+      const R = window.innerHeight, k = U.current.getBoundingClientRect(), j = W.current.getBoundingClientRect(), E = k.bottom + j.height;
+      W.current.style.left = `${k.left}px`, W.current.style.width = `${k.width}px`, E >= R - 10 ? (W.current.style.top = `${k.top - j.height - 5}px`, h("top")) : (W.current.style.top = `${k.top + k.height}px`, h("bottom"));
+    }
+  };
+  return B(() => (window.addEventListener("scroll", L), window.addEventListener("resize", L), () => {
+    window.removeEventListener("scroll", L), window.removeEventListener("resize", L);
+  }), []), B(() => {
+    L();
+  }, [V]), /* @__PURE__ */ t.jsx(jn, { handleChangePosition: L, children: /* @__PURE__ */ t.jsxs(
+    "div",
+    {
+      className: `starasia-input-dropdown-container ${A ? "disable" : ""} starasia-input-dropdown-size-${b} ${V ? "active" : ""} ${F ? "error" : ""}`,
+      ref: U,
+      onClick: ir,
+      children: [
+        /* @__PURE__ */ t.jsxs("div", { className: "starasia-input-dropdown-preview-container", children: [
+          O ? /* @__PURE__ */ t.jsx(t.Fragment, { children: or.cloneElement(O, {
+            width: Yr(b),
+            color: "#939E99",
+            style: {
+              color: "#939E99"
+            }
+          }) }) : null,
+          /* @__PURE__ */ t.jsx(
+            "div",
+            {
+              className: "starasia-input-dropdown-container-preview-item",
+              tabIndex: 100,
+              onBlur: y,
+              onFocus: T,
+              children: rr()
+            }
+          ),
+          /* @__PURE__ */ t.jsx(
+            kn,
+            {
+              strokeWidth: 2,
+              width: Yr(b),
+              style: { color: "#939E99" }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ t.jsx(
+          _n,
+          {
+            dropdownLists: c,
+            handleChangeValue: Q,
+            isComponentVisible: V,
+            positionDropdown: S,
+            searchAble: !!v,
+            value: o,
+            onSearch: f,
+            ref: W,
+            multiSelect: u,
+            searchValue: D
+          }
+        )
+      ]
+    }
+  ) });
+}, Yr = (c) => {
+  if (c === "sm")
+    return 16;
+  if (c === "md")
+    return 16;
+  if (c === "lg")
+    return 20;
+}, On = (c) => /* @__PURE__ */ t.jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "18",
+    height: "18",
+    viewBox: "0 0 18 18",
+    fill: "none",
+    ...c,
+    children: /* @__PURE__ */ t.jsx(
+      "path",
+      {
+        d: "M12 6L6 12M6.00001 6L12 12",
+        stroke: "currentColor",
+        "stroke-width": "1.5",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      }
+    )
+  }
+);
+export {
+  Sn as Dropdown
+};