@starasia/dropdown 1.0.3 → 1.0.5

package/dist/dropdown.es.js

@@ -1,647 +1,6 @@
-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");
+import { jsx as r, jsxs as l, Fragment as q } from "react/jsx-runtime";
+import F, { useState as y, useRef as k, 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;
@@ -650,27 +9,12 @@ const mn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@3
 }
 :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
-  );
+  /* brand */
+  --starasia-ui-dropdown-color-primary-blue: var(--starasia-ui-brand-primary-default);
+  --starasia-ui-dropdown-color-secondary-blue: var(--starasia-ui-brand-primary-default);
+  --starasia-ui-dropdown-color-tertiary-blue: var(--starasia-ui-brand-primary-secondary);
+  --starasia-ui-dropdown-color-quaternary-blue: var(--starasia-ui-brand-primary-tertiary);
+  --starasia-ui-dropdown-color-quinary-blue: var(--starasia-ui-brand-primary-tertiary);
   /* gray */
   --starasia-ui-dropdown-color-primary-gray: var(
     --starasia-ui-color-gray-700,
@@ -709,10 +53,7 @@ const mn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@3
   );
 
   /* border color */
-  --starasia-ui-dropdown-border-color-primary: var(
-    --starasia-ui-color-blue-500,
-    #3b82f6
-  );
+  --starasia-ui-dropdown-border-color-primary: var(--starasia-ui-brand-primary-default);
   --starasia-ui-dropdown-border-color-secondary: var(
     --starasia-ui-color-gray-300,
     #d1d5db
@@ -738,7 +79,7 @@ const mn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@3
   --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);
+  --starasia-ui-dropdown-box-shadow: 0px 0px 0px 2px rgba(var(--starasia-ui-raw-color-brand-secondary), 0.2);
 
   /* below is for size,above is */
   --starasia-ui-dropdown-fontWeight-normal: var(
@@ -906,12 +247,12 @@ const mn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@3
 }
 
 .starasia-input-dropdwon-item:hover {
-  background-color: rgba(100, 181, 246, 0.21);
+  background-color: rgba(var(--starasia-ui-raw-color-brand-secondary), 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-color: rgba(var(--starasia-ui-raw-color-brand-secondary), 0.21);
   /* background: var(--starasia-ui-dropdown-background-color-secondary); */
   /* box-shadow: 0px 0px 0px -1px #f0f0f0; */
 }
@@ -956,7 +297,7 @@ const mn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@3
   font-weight: 500;
 }
 .starasia-input-dropdwon-item-text.active {
-  color: #1976d2;
+  color: var(--starasia-ui-brand-primary-default);
 }
 
 .starasia-input-dropdwon-item-text-description {
@@ -966,14 +307,14 @@ const mn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@3
   font-weight: 400;
 }
 .starasia-input-dropdwon-item-text-description.active {
-  color: #1976d2;
+  color: var(--starasia-ui-brand-primary-default);
 }
 
 /* for checkbox */
 .checkbox-wrapper-30 .checkbox {
   --bg: #fff;
   --brdr: #d1d6ee;
-  --brdr-actv: #1976d2;
+  --brdr-actv: var(--starasia-ui-brand-primary-default);
   --brdr-hovr: #bbc1e1;
   --dur: calc((var(--size, 2) / 2) * 0.6s);
   display: inline-block;
@@ -1046,23 +387,23 @@ const mn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@3
   width: 100%;
 }
 `;
-function yn(c) {
-  const [p, x] = G(c), b = X(null), u = (v) => {
-    b.current && !b.current.contains(v.target) && x(!1);
+function V(a) {
+  const [i, t] = y(a), c = k(null), o = (e) => {
+    c.current && !c.current.contains(e.target) && t(!1);
   };
-  return B(() => (document.addEventListener("click", u, !0), () => {
-    document.removeEventListener("click", u, !0);
-  }), []), { ref: b, isComponentVisible: p, setIsComponentVisible: x };
+  return b(() => (document.addEventListener("click", o, !0), () => {
+    document.removeEventListener("click", o, !0);
+  }), []), { ref: c, isComponentVisible: i, setIsComponentVisible: t };
 }
-const kn = ({ ...c }) => /* @__PURE__ */ t.jsx(
+const J = ({ ...a }) => /* @__PURE__ */ r(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
-    ...c,
+    ...a,
     viewBox: "0 0 24 24",
     fill: "none",
     color: "#939E99",
-    children: /* @__PURE__ */ t.jsx(
+    children: /* @__PURE__ */ r(
       "path",
       {
         d: "M4 9L12 17L20 9",
@@ -1073,15 +414,15 @@ const kn = ({ ...c }) => /* @__PURE__ */ t.jsx(
       }
     )
   }
-), En = ({ ...c }) => /* @__PURE__ */ t.jsxs(
+), G = ({ ...a }) => /* @__PURE__ */ l(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
-    ...c,
+    ...a,
     viewBox: "0 0 20 20",
     fill: "none",
     children: [
-      /* @__PURE__ */ t.jsx(
+      /* @__PURE__ */ r(
         "circle",
         {
           cx: "9.80547",
@@ -1093,7 +434,7 @@ const kn = ({ ...c }) => /* @__PURE__ */ t.jsx(
           strokeLinejoin: "round"
         }
       ),
-      /* @__PURE__ */ t.jsx(
+      /* @__PURE__ */ r(
         "path",
         {
           d: "M15.0153 15.4043L17.9519 18.3333",
@@ -1105,19 +446,19 @@ const kn = ({ ...c }) => /* @__PURE__ */ t.jsx(
       )
     ]
   }
-), Rn = ({ isChecked: c }) => /* @__PURE__ */ t.jsxs("div", { className: "checkbox-wrapper-30", children: [
-  /* @__PURE__ */ t.jsxs("span", { className: "checkbox", children: [
-    /* @__PURE__ */ t.jsx(
+), K = ({ isChecked: a }) => /* @__PURE__ */ l("div", { className: "checkbox-wrapper-30", children: [
+  /* @__PURE__ */ l("span", { className: "checkbox", children: [
+    /* @__PURE__ */ r(
       "input",
       {
         type: "checkbox",
         style: { pointerEvents: "none" },
-        checked: c
+        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",
@@ -1125,58 +466,58 @@ const kn = ({ ...c }) => /* @__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: 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);
+    positionDropdown: a,
+    dropdownLists: i,
+    isComponentVisible: t,
+    searchAble: c,
+    onSearch: o,
+    value: e,
+    handleChangeValue: h,
+    multiSelect: p,
+    searchValue: v
+  }, I) => {
+    const [C, R] = y(0), [$, z] = y(), w = k(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;
         }
-      }) : D(void 0);
-    }, [f, p]), /* @__PURE__ */ t.jsx(t.Fragment, { children: x ? /* @__PURE__ */ t.jsxs(
+      }) : z(void 0);
+    }, [v, i]), /* @__PURE__ */ r(q, { children: t ? /* @__PURE__ */ l(
       "div",
       {
         className: "starasia-input-dropdown-lists-container",
-        onClick: (o) => o.stopPropagation(),
-        ref: F,
+        onClick: (n) => n.stopPropagation(),
+        ref: I,
         children: [
-          b ? /* @__PURE__ */ t.jsxs(
+          c ? /* @__PURE__ */ l(
             "div",
             {
               className: "starasia-input-dropdown-container-dropdown-search",
               style: {
-                order: c == "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) => {
-                      u && u(o.target.value);
+                    onChange: (n) => {
+                      o && o(n.target.value);
                     },
-                    value: f,
+                    value: v,
                     autoFocus: !0,
                     style: { width: "100%" }
                   }
@@ -1184,54 +525,54 @@ const kn = ({ ...c }) => /* @__PURE__ */ t.jsx(
               ]
             }
           ) : null,
-          /* @__PURE__ */ t.jsx(
+          /* @__PURE__ */ r(
             "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(
+              className: `starasia-input-dropdwon-item-container ${p ? "multi" : ""}`,
+              ref: w,
+              children: i.map((n, x) => {
+                const f = !!(e != null && e.find((E) => E.value === n.value));
+                return /* @__PURE__ */ l(
                   "div",
                   {
-                    className: `starasia-input-dropdwon-item ${S ? "active" : " "} ${o.disable ? "starasia-input-dropdwon-item-disable" : null}`,
-                    onClick: () => O(o.label, o.value),
+                    className: `starasia-input-dropdwon-item ${f ? "active" : " "} ${n.disable ? "starasia-input-dropdwon-item-disable" : null}`,
+                    onClick: () => h(n.label, n.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, {
+                      p ? /* @__PURE__ */ r("div", { style: { marginRight: "8px" }, children: /* @__PURE__ */ r(K, { isChecked: f }) }) : null,
+                      n.icon ? /* @__PURE__ */ r("div", { children: F.cloneElement(n.icon, {
                         width: 16
                       }) }) : null,
-                      /* @__PURE__ */ t.jsxs("div", { children: [
-                        /* @__PURE__ */ t.jsx(
+                      /* @__PURE__ */ l("div", { children: [
+                        /* @__PURE__ */ r(
                           "p",
                           {
-                            className: `starasia-input-dropdwon-item-text ${S ? "active" : null} ${o.disable ? "starasia-input-dropdwon-item-disable" : null}`,
+                            className: `starasia-input-dropdwon-item-text ${f ? "active" : null} ${n.disable ? "starasia-input-dropdwon-item-disable" : null}`,
                             style: {
                               textWrap: "nowrap",
-                              width: `${y - 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 ${S ? "active" : null} ${o.disable ? "starasia-input-dropdwon-item-disable" : null}`,
+                            className: `starasia-input-dropdwon-item-text-description ${f ? "active" : null} ${n.disable ? "starasia-input-dropdwon-item-disable" : null}`,
                             style: {
                               textWrap: "nowrap",
-                              width: `${y - 12}px`,
+                              width: `${C - 12}px`,
                               overflow: "hidden",
                               textOverflow: "ellipsis"
                             },
-                            children: o.description
+                            children: n.description
                           }
                         ) : null
                       ] })
                     ]
                   },
-                  $
+                  x
                 );
               })
             }
@@ -1240,149 +581,149 @@ const kn = ({ ...c }) => /* @__PURE__ */ t.jsx(
       }
     ) : null });
   }
-), jn = ({
-  children: c,
-  handleChangePosition: p
+), T = ({
+  children: a,
+  handleChangePosition: i
 }) => {
-  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();
+  const t = k(null);
+  b(() => {
+    var h;
+    const o = () => {
+      if (t.current) {
+        let p = t.current.parentElement;
+        for (; p && !c(p); )
+          p = p.parentElement;
+        p && i();
       }
     };
-    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);
+    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 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);
+  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: 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
+U(P);
+const _ = ({
+  dropdownLists: a,
+  onChange: i,
+  defaultValue: t,
+  size: c = "md",
+  multiSelect: o,
+  searchAble: e,
+  iconLeft: h,
+  placeholder: p,
+  onSearch: v,
+  error: I,
+  onBlur: C,
+  onFocus: R,
+  disable: $,
+  searchValue: z
 }) => {
-  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) : []
+  const w = k(), [n, x] = y([]), [f, E] = y(""), g = k(null), { isComponentVisible: B, ref: L, setIsComponentVisible: N } = V(!1), H = () => {
+    N((s) => !s);
+  }, j = (s, d) => {
+    if (!o)
+      x([{ 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) : []
       ];
-      $(E), p(E);
+      x(u), i(u);
     } else {
-      const E = [...o || [], { label: R, value: k }];
-      $(E), p(E);
+      const u = [...n || [], { label: s, value: d }];
+      x(u), i(u);
     }
   };
-  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,
+  b(() => {
+    JSON.stringify(w.current) === JSON.stringify(t) || (w.current = t, x(w.current || []));
+  }, [t]);
+  const O = () => n.length ? o ? n == null ? void 0 : n.map((s, d) => /* @__PURE__ */ l("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(R.label, R.value)
+        onClick: () => j(s.label, s.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"));
+  ] })) : /* @__PURE__ */ r("p", { style: { minWidth: "max-content" }, children: n == null ? void 0 : n[0].label }) : /* @__PURE__ */ r("p", { className: "starasia-input-dropdown-placeholder", children: p }), 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 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(
+  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__ */ l(
     "div",
     {
-      className: `starasia-input-dropdown-container ${A ? "disable" : ""} starasia-input-dropdown-size-${b} ${V ? "active" : ""} ${F ? "error" : ""}`,
-      ref: U,
-      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: [
-          O ? /* @__PURE__ */ t.jsx(t.Fragment, { children: or.cloneElement(O, {
-            width: Yr(b),
+        /* @__PURE__ */ l("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: y,
-              onFocus: T,
-              children: rr()
+              onBlur: C,
+              onFocus: R,
+              children: O()
             }
           ),
-          /* @__PURE__ */ t.jsx(
-            kn,
+          /* @__PURE__ */ r(
+            J,
             {
               strokeWidth: 2,
-              width: Yr(b),
+              width: S(c),
               style: { color: "#939E99" }
             }
           )
         ] }),
-        /* @__PURE__ */ t.jsx(
-          _n,
+        /* @__PURE__ */ r(
+          Q,
           {
-            dropdownLists: c,
-            handleChangeValue: Q,
-            isComponentVisible: V,
-            positionDropdown: S,
-            searchAble: !!v,
-            value: o,
-            onSearch: f,
-            ref: W,
-            multiSelect: u,
-            searchValue: D
+            dropdownLists: a,
+            handleChangeValue: j,
+            isComponentVisible: B,
+            positionDropdown: f,
+            searchAble: !!e,
+            value: n,
+            onSearch: v,
+            ref: g,
+            multiSelect: o,
+            searchValue: z
           }
         )
       ]
     }
   ) });
-}, Yr = (c) => {
-  if (c === "sm")
+}, S = (a) => {
+  if (a === "sm")
     return 16;
-  if (c === "md")
+  if (a === "md")
     return 16;
-  if (c === "lg")
+  if (a === "lg")
     return 20;
-}, On = (c) => /* @__PURE__ */ t.jsx(
+}, X = (a) => /* @__PURE__ */ r(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1390,8 +731,8 @@ const Sn = ({
     height: "18",
     viewBox: "0 0 18 18",
     fill: "none",
-    ...c,
-    children: /* @__PURE__ */ t.jsx(
+    ...a,
+    children: /* @__PURE__ */ r(
       "path",
       {
         d: "M12 6L6 12M6.00001 6L12 12",
@@ -1404,5 +745,5 @@ const Sn = ({
   }
 );
 export {
-  Sn as Dropdown
+  _ as Dropdown
 };