@starasia/input 1.0.0

package/dist/input.es.js

@@ -0,0 +1,1231 @@
+import tr, { forwardRef as Br, useState as H, useRef as Mr, useEffect as U } from "react";
+var mr = { exports: {} }, J = {};
+/**
+ * @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 Nr;
+function xn() {
+  if (Nr)
+    return J;
+  Nr = 1;
+  var t = tr, u = Symbol.for("react.element"), b = Symbol.for("react.fragment"), w = Object.prototype.hasOwnProperty, x = t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, f = { key: !0, ref: !0, __self: !0, __source: !0 };
+  function A(I, l, _) {
+    var p, E = {}, T = null, D = null;
+    _ !== void 0 && (T = "" + _), l.key !== void 0 && (T = "" + l.key), l.ref !== void 0 && (D = l.ref);
+    for (p in l)
+      w.call(l, p) && !f.hasOwnProperty(p) && (E[p] = l[p]);
+    if (I && I.defaultProps)
+      for (p in l = I.defaultProps, l)
+        E[p] === void 0 && (E[p] = l[p]);
+    return { $$typeof: u, type: I, key: T, ref: D, props: E, _owner: x.current };
+  }
+  return J.Fragment = b, J.jsx = A, J.jsxs = A, J;
+}
+var G = {};
+/**
+ * @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 Wr;
+function En() {
+  return Wr || (Wr = 1, process.env.NODE_ENV !== "production" && function() {
+    var t = tr, u = Symbol.for("react.element"), b = Symbol.for("react.portal"), w = Symbol.for("react.fragment"), x = Symbol.for("react.strict_mode"), f = Symbol.for("react.profiler"), A = Symbol.for("react.provider"), I = Symbol.for("react.context"), l = Symbol.for("react.forward_ref"), _ = Symbol.for("react.suspense"), p = Symbol.for("react.suspense_list"), E = Symbol.for("react.memo"), T = Symbol.for("react.lazy"), D = Symbol.for("react.offscreen"), X = Symbol.iterator, N = "@@iterator";
+    function ir(r) {
+      if (r === null || typeof r != "object")
+        return null;
+      var n = X && r[X] || r[N];
+      return typeof n == "function" ? n : null;
+    }
+    var c = t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    function R(r) {
+      {
+        for (var n = arguments.length, a = new Array(n > 1 ? n - 1 : 0), e = 1; e < n; e++)
+          a[e - 1] = arguments[e];
+        W("error", r, a);
+      }
+    }
+    function W(r, n, a) {
+      {
+        var e = c.ReactDebugCurrentFrame, s = e.getStackAddendum();
+        s !== "" && (n += "%s", a = a.concat([s]));
+        var d = a.map(function(o) {
+          return String(o);
+        });
+        d.unshift("Warning: " + n), Function.prototype.apply.call(console[r], console, d);
+      }
+    }
+    var F = !1, Y = !1, or = !1, Z = !1, Q = !1, B;
+    B = Symbol.for("react.module.reference");
+    function sr(r) {
+      return !!(typeof r == "string" || typeof r == "function" || r === w || r === f || Q || r === x || r === _ || r === p || Z || r === D || F || Y || or || typeof r == "object" && r !== null && (r.$$typeof === T || r.$$typeof === E || r.$$typeof === A || r.$$typeof === I || r.$$typeof === l || // 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 === B || r.getModuleId !== void 0));
+    }
+    function ur(r, n, a) {
+      var e = r.displayName;
+      if (e)
+        return e;
+      var s = n.displayName || n.name || "";
+      return s !== "" ? a + "(" + s + ")" : a;
+    }
+    function y(r) {
+      return r.displayName || "Context";
+    }
+    function v(r) {
+      if (r == null)
+        return null;
+      if (typeof r.tag == "number" && R("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 w:
+          return "Fragment";
+        case b:
+          return "Portal";
+        case f:
+          return "Profiler";
+        case x:
+          return "StrictMode";
+        case _:
+          return "Suspense";
+        case p:
+          return "SuspenseList";
+      }
+      if (typeof r == "object")
+        switch (r.$$typeof) {
+          case I:
+            var n = r;
+            return y(n) + ".Consumer";
+          case A:
+            var a = r;
+            return y(a._context) + ".Provider";
+          case l:
+            return ur(r, r.render, "ForwardRef");
+          case E:
+            var e = r.displayName || null;
+            return e !== null ? e : v(r.type) || "Memo";
+          case T: {
+            var s = r, d = s._payload, o = s._init;
+            try {
+              return v(o(d));
+            } catch {
+              return null;
+            }
+          }
+        }
+      return null;
+    }
+    var m = Object.assign, j = 0, L, O, $, wr, xr, Er, Rr;
+    function _r() {
+    }
+    _r.__reactDisabledLog = !0;
+    function Kr() {
+      {
+        if (j === 0) {
+          L = console.log, O = console.info, $ = console.warn, wr = console.error, xr = console.group, Er = console.groupCollapsed, Rr = console.groupEnd;
+          var r = {
+            configurable: !0,
+            enumerable: !0,
+            value: _r,
+            writable: !0
+          };
+          Object.defineProperties(console, {
+            info: r,
+            log: r,
+            warn: r,
+            error: r,
+            group: r,
+            groupCollapsed: r,
+            groupEnd: r
+          });
+        }
+        j++;
+      }
+    }
+    function Jr() {
+      {
+        if (j--, j === 0) {
+          var r = {
+            configurable: !0,
+            enumerable: !0,
+            writable: !0
+          };
+          Object.defineProperties(console, {
+            log: m({}, r, {
+              value: L
+            }),
+            info: m({}, r, {
+              value: O
+            }),
+            warn: m({}, r, {
+              value: $
+            }),
+            error: m({}, r, {
+              value: wr
+            }),
+            group: m({}, r, {
+              value: xr
+            }),
+            groupCollapsed: m({}, r, {
+              value: Er
+            }),
+            groupEnd: m({}, r, {
+              value: Rr
+            })
+          });
+        }
+        j < 0 && R("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
+      }
+    }
+    var lr = c.ReactCurrentDispatcher, cr;
+    function rr(r, n, a) {
+      {
+        if (cr === void 0)
+          try {
+            throw Error();
+          } catch (s) {
+            var e = s.stack.trim().match(/\n( *(at )?)/);
+            cr = e && e[1] || "";
+          }
+        return `
+` + cr + r;
+      }
+    }
+    var dr = !1, nr;
+    {
+      var Gr = typeof WeakMap == "function" ? WeakMap : Map;
+      nr = new Gr();
+    }
+    function Cr(r, n) {
+      if (!r || dr)
+        return "";
+      {
+        var a = nr.get(r);
+        if (a !== void 0)
+          return a;
+      }
+      var e;
+      dr = !0;
+      var s = Error.prepareStackTrace;
+      Error.prepareStackTrace = void 0;
+      var d;
+      d = lr.current, lr.current = null, Kr();
+      try {
+        if (n) {
+          var o = function() {
+            throw Error();
+          };
+          if (Object.defineProperty(o.prototype, "props", {
+            set: function() {
+              throw Error();
+            }
+          }), typeof Reflect == "object" && Reflect.construct) {
+            try {
+              Reflect.construct(o, []);
+            } catch (k) {
+              e = k;
+            }
+            Reflect.construct(r, [], o);
+          } else {
+            try {
+              o.call();
+            } catch (k) {
+              e = k;
+            }
+            r.call(o.prototype);
+          }
+        } else {
+          try {
+            throw Error();
+          } catch (k) {
+            e = k;
+          }
+          r();
+        }
+      } catch (k) {
+        if (k && e && typeof k.stack == "string") {
+          for (var i = k.stack.split(`
+`), C = e.stack.split(`
+`), g = i.length - 1, h = C.length - 1; g >= 1 && h >= 0 && i[g] !== C[h]; )
+            h--;
+          for (; g >= 1 && h >= 0; g--, h--)
+            if (i[g] !== C[h]) {
+              if (g !== 1 || h !== 1)
+                do
+                  if (g--, h--, h < 0 || i[g] !== C[h]) {
+                    var P = `
+` + i[g].replace(" at new ", " at ");
+                    return r.displayName && P.includes("<anonymous>") && (P = P.replace("<anonymous>", r.displayName)), typeof r == "function" && nr.set(r, P), P;
+                  }
+                while (g >= 1 && h >= 0);
+              break;
+            }
+        }
+      } finally {
+        dr = !1, lr.current = d, Jr(), Error.prepareStackTrace = s;
+      }
+      var z = r ? r.displayName || r.name : "", V = z ? rr(z) : "";
+      return typeof r == "function" && nr.set(r, V), V;
+    }
+    function Hr(r, n, a) {
+      return Cr(r, !1);
+    }
+    function Xr(r) {
+      var n = r.prototype;
+      return !!(n && n.isReactComponent);
+    }
+    function ar(r, n, a) {
+      if (r == null)
+        return "";
+      if (typeof r == "function")
+        return Cr(r, Xr(r));
+      if (typeof r == "string")
+        return rr(r);
+      switch (r) {
+        case _:
+          return rr("Suspense");
+        case p:
+          return rr("SuspenseList");
+      }
+      if (typeof r == "object")
+        switch (r.$$typeof) {
+          case l:
+            return Hr(r.render);
+          case E:
+            return ar(r.type, n, a);
+          case T: {
+            var e = r, s = e._payload, d = e._init;
+            try {
+              return ar(d(s), n, a);
+            } catch {
+            }
+          }
+        }
+      return "";
+    }
+    var M = Object.prototype.hasOwnProperty, Sr = {}, kr = c.ReactDebugCurrentFrame;
+    function er(r) {
+      if (r) {
+        var n = r._owner, a = ar(r.type, r._source, n ? n.type : null);
+        kr.setExtraStackFrame(a);
+      } else
+        kr.setExtraStackFrame(null);
+    }
+    function Zr(r, n, a, e, s) {
+      {
+        var d = Function.call.bind(M);
+        for (var o in r)
+          if (d(r, o)) {
+            var i = void 0;
+            try {
+              if (typeof r[o] != "function") {
+                var C = Error((e || "React class") + ": " + a + " type `" + o + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof r[o] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
+                throw C.name = "Invariant Violation", C;
+              }
+              i = r[o](n, o, e, a, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
+            } catch (g) {
+              i = g;
+            }
+            i && !(i instanceof Error) && (er(s), R("%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).", e || "React class", a, o, typeof i), er(null)), i instanceof Error && !(i.message in Sr) && (Sr[i.message] = !0, er(s), R("Failed %s type: %s", a, i.message), er(null));
+          }
+      }
+    }
+    var Qr = Array.isArray;
+    function fr(r) {
+      return Qr(r);
+    }
+    function rn(r) {
+      {
+        var n = typeof Symbol == "function" && Symbol.toStringTag, a = n && r[Symbol.toStringTag] || r.constructor.name || "Object";
+        return a;
+      }
+    }
+    function nn(r) {
+      try {
+        return Tr(r), !1;
+      } catch {
+        return !0;
+      }
+    }
+    function Tr(r) {
+      return "" + r;
+    }
+    function jr(r) {
+      if (nn(r))
+        return R("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", rn(r)), Tr(r);
+    }
+    var K = c.ReactCurrentOwner, an = {
+      key: !0,
+      ref: !0,
+      __self: !0,
+      __source: !0
+    }, Or, Pr, pr;
+    pr = {};
+    function en(r) {
+      if (M.call(r, "ref")) {
+        var n = Object.getOwnPropertyDescriptor(r, "ref").get;
+        if (n && n.isReactWarning)
+          return !1;
+      }
+      return r.ref !== void 0;
+    }
+    function tn(r) {
+      if (M.call(r, "key")) {
+        var n = Object.getOwnPropertyDescriptor(r, "key").get;
+        if (n && n.isReactWarning)
+          return !1;
+      }
+      return r.key !== void 0;
+    }
+    function on(r, n) {
+      if (typeof r.ref == "string" && K.current && n && K.current.stateNode !== n) {
+        var a = v(K.current.type);
+        pr[a] || (R('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', v(K.current.type), r.ref), pr[a] = !0);
+      }
+    }
+    function sn(r, n) {
+      {
+        var a = function() {
+          Or || (Or = !0, R("%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));
+        };
+        a.isReactWarning = !0, Object.defineProperty(r, "key", {
+          get: a,
+          configurable: !0
+        });
+      }
+    }
+    function un(r, n) {
+      {
+        var a = function() {
+          Pr || (Pr = !0, R("%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));
+        };
+        a.isReactWarning = !0, Object.defineProperty(r, "ref", {
+          get: a,
+          configurable: !0
+        });
+      }
+    }
+    var ln = function(r, n, a, e, s, d, o) {
+      var i = {
+        // This tag allows us to uniquely identify this as a React Element
+        $$typeof: u,
+        // Built-in properties that belong on the element
+        type: r,
+        key: n,
+        ref: a,
+        props: o,
+        // Record the component responsible for creating this element.
+        _owner: d
+      };
+      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: e
+      }), Object.defineProperty(i, "_source", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !1,
+        value: s
+      }), Object.freeze && (Object.freeze(i.props), Object.freeze(i)), i;
+    };
+    function cn(r, n, a, e, s) {
+      {
+        var d, o = {}, i = null, C = null;
+        a !== void 0 && (jr(a), i = "" + a), tn(n) && (jr(n.key), i = "" + n.key), en(n) && (C = n.ref, on(n, s));
+        for (d in n)
+          M.call(n, d) && !an.hasOwnProperty(d) && (o[d] = n[d]);
+        if (r && r.defaultProps) {
+          var g = r.defaultProps;
+          for (d in g)
+            o[d] === void 0 && (o[d] = g[d]);
+        }
+        if (i || C) {
+          var h = typeof r == "function" ? r.displayName || r.name || "Unknown" : r;
+          i && sn(o, h), C && un(o, h);
+        }
+        return ln(r, i, C, s, e, K.current, o);
+      }
+    }
+    var vr = c.ReactCurrentOwner, Ir = c.ReactDebugCurrentFrame;
+    function q(r) {
+      if (r) {
+        var n = r._owner, a = ar(r.type, r._source, n ? n.type : null);
+        Ir.setExtraStackFrame(a);
+      } else
+        Ir.setExtraStackFrame(null);
+    }
+    var gr;
+    gr = !1;
+    function hr(r) {
+      return typeof r == "object" && r !== null && r.$$typeof === u;
+    }
+    function Dr() {
+      {
+        if (vr.current) {
+          var r = v(vr.current.type);
+          if (r)
+            return `
+
+Check the render method of \`` + r + "`.";
+        }
+        return "";
+      }
+    }
+    function dn(r) {
+      {
+        if (r !== void 0) {
+          var n = r.fileName.replace(/^.*[\\\/]/, ""), a = r.lineNumber;
+          return `
+
+Check your code at ` + n + ":" + a + ".";
+        }
+        return "";
+      }
+    }
+    var Ar = {};
+    function fn(r) {
+      {
+        var n = Dr();
+        if (!n) {
+          var a = typeof r == "string" ? r : r.displayName || r.name;
+          a && (n = `
+
+Check the top-level render call using <` + a + ">.");
+        }
+        return n;
+      }
+    }
+    function Fr(r, n) {
+      {
+        if (!r._store || r._store.validated || r.key != null)
+          return;
+        r._store.validated = !0;
+        var a = fn(n);
+        if (Ar[a])
+          return;
+        Ar[a] = !0;
+        var e = "";
+        r && r._owner && r._owner !== vr.current && (e = " It was passed a child from " + v(r._owner.type) + "."), q(r), R('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', a, e), q(null);
+      }
+    }
+    function Lr(r, n) {
+      {
+        if (typeof r != "object")
+          return;
+        if (fr(r))
+          for (var a = 0; a < r.length; a++) {
+            var e = r[a];
+            hr(e) && Fr(e, n);
+          }
+        else if (hr(r))
+          r._store && (r._store.validated = !0);
+        else if (r) {
+          var s = ir(r);
+          if (typeof s == "function" && s !== r.entries)
+            for (var d = s.call(r), o; !(o = d.next()).done; )
+              hr(o.value) && Fr(o.value, n);
+        }
+      }
+    }
+    function pn(r) {
+      {
+        var n = r.type;
+        if (n == null || typeof n == "string")
+          return;
+        var a;
+        if (typeof n == "function")
+          a = n.propTypes;
+        else if (typeof n == "object" && (n.$$typeof === l || // Note: Memo only checks outer props here.
+        // Inner props are checked in the reconciler.
+        n.$$typeof === E))
+          a = n.propTypes;
+        else
+          return;
+        if (a) {
+          var e = v(n);
+          Zr(a, r.props, "prop", e, r);
+        } else if (n.PropTypes !== void 0 && !gr) {
+          gr = !0;
+          var s = v(n);
+          R("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", s || "Unknown");
+        }
+        typeof n.getDefaultProps == "function" && !n.getDefaultProps.isReactClassApproved && R("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
+      }
+    }
+    function vn(r) {
+      {
+        for (var n = Object.keys(r.props), a = 0; a < n.length; a++) {
+          var e = n[a];
+          if (e !== "children" && e !== "key") {
+            q(r), R("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", e), q(null);
+            break;
+          }
+        }
+        r.ref !== null && (q(r), R("Invalid attribute `ref` supplied to `React.Fragment`."), q(null));
+      }
+    }
+    var $r = {};
+    function Vr(r, n, a, e, s, d) {
+      {
+        var o = sr(r);
+        if (!o) {
+          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 C = dn(s);
+          C ? i += C : i += Dr();
+          var g;
+          r === null ? g = "null" : fr(r) ? g = "array" : r !== void 0 && r.$$typeof === u ? (g = "<" + (v(r.type) || "Unknown") + " />", i = " Did you accidentally export a JSX literal instead of a component?") : g = typeof r, R("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", g, i);
+        }
+        var h = cn(r, n, a, s, d);
+        if (h == null)
+          return h;
+        if (o) {
+          var P = n.children;
+          if (P !== void 0)
+            if (e)
+              if (fr(P)) {
+                for (var z = 0; z < P.length; z++)
+                  Lr(P[z], r);
+                Object.freeze && Object.freeze(P);
+              } else
+                R("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
+              Lr(P, r);
+        }
+        if (M.call(n, "key")) {
+          var V = v(r), k = Object.keys(n).filter(function(wn) {
+            return wn !== "key";
+          }), br = k.length > 0 ? "{key: someKey, " + k.join(": ..., ") + ": ...}" : "{key: someKey}";
+          if (!$r[V + br]) {
+            var mn = k.length > 0 ? "{" + k.join(": ..., ") + ": ...}" : "{}";
+            R(`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} />`, br, V, mn, V), $r[V + br] = !0;
+          }
+        }
+        return r === w ? vn(h) : pn(h), h;
+      }
+    }
+    function gn(r, n, a) {
+      return Vr(r, n, a, !0);
+    }
+    function hn(r, n, a) {
+      return Vr(r, n, a, !1);
+    }
+    var bn = hn, yn = gn;
+    G.Fragment = w, G.jsx = bn, G.jsxs = yn;
+  }()), G;
+}
+process.env.NODE_ENV === "production" ? mr.exports = xn() : mr.exports = En();
+var S = mr.exports;
+const Rn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  /* spacing */
+  --starasia-ui-input-spacing-xs: var(--starasia-ui-spacing-xs, 4px);
+  --starasia-ui-input-spacing-sm: var(--starasia-ui-spacing-sm, 8px);
+  --starasia-ui-input-spacing-ms: var(--starasia-ui-spacing-12, 12px);
+  --starasia-ui-input-spacing-md: var(--starasia-ui-spacing-lg, 16px);
+  --starasia-ui-input-spacing-lg: var(--starasia-ui-spacing-xl, 24px);
+
+  /* color */
+  /* blue */
+  --starasia-ui-input-color-primary-blue: var(
+    --starasia-ui-color-blue-700,
+    #1d4ed8
+  );
+  --starasia-ui-input-color-secondary-blue: var(
+    --starasia-ui-color-blue-500,
+    #3b82f6
+  );
+  --starasia-ui-input-color-tertiary-blue: var(
+    --starasia-ui-color-blue-300,
+    #93c5fd
+  );
+  --starasia-ui-input-color-quaternary-blue: var(
+    --starasia-ui-color-blue-100,
+    #dbeafe
+  );
+  --starasia-ui-input-color-quinary-blue: var(
+    --starasia-ui-color-blue-50,
+    #eff6ff
+  );
+  /* gray */
+  --starasia-ui-input-color-primary-gray: var(
+    --starasia-ui-color-gray-700,
+    #374151
+  );
+  --starasia-ui-input-color-secondary-gray: var(
+    --starasia-ui-color-gray-500,
+    #6b7280
+  );
+  --starasia-ui-input-color-tertiary-gray: var(
+    --starasia-ui-color-gray-300,
+    #d1d5db
+  );
+  --starasia-ui-input-color-quaternary-gray: var(
+    --starasia-ui-color-gray-100,
+    #f3f4f6
+  );
+  --starasia-ui-input-color-quinary-gray: var(
+    --starasia-ui-color-gray-50,
+    #f9fafb
+  );
+  /* red */
+  --starasia-ui-input-color-primary-red: var(
+    --starasia-ui-color-red-700,
+    #b91c1c
+  );
+  --starasia-ui-input-color-secondary-red: var(
+    --starasia-ui-color-red-500,
+    #ef4444
+  );
+  --starasia-ui-input-color-tertiary-red: var(
+    --starasia-ui-color-red-300,
+    #fca5a5
+  );
+  --starasia-ui-input-color-quaternary-red: var(
+    --starasia-ui-color-red-100,
+    #fee2e2
+  );
+  --starasia-ui-input-color-quinary-red: var(
+    --starasia-ui-color-red-50,
+    #fef2f2
+  );
+  /* yellow */
+  --starasia-ui-input-color-primary-yellow: var(
+    --starasia-ui-color-yellow-700,
+    #a16207
+  );
+  --starasia-ui-input-color-secondary-yellow: var(
+    --starasia-ui-color-yellow-500,
+    #eab308
+  );
+  --starasia-ui-input-color-tertiary-yellow: var(
+    --starasia-ui-color-yellow-300,
+    #fde047
+  );
+  --starasia-ui-input-color-quaternary-yellow: var(
+    --starasia-ui-color-yellow-100,
+    #fef9c3
+  );
+  --starasia-ui-input-color-quinary-yellow: var(
+    --starasia-ui-color-yellow-50,
+    #fefce8
+  );
+
+  /* text color */
+  --starasia-ui-text-default: var(--starasia-ui-color-gray-900);
+  --starasia-ui-color-text: var(--starasia-ui-text-default);
+
+  /* border width */
+  --starasia-ui-input-border-width: var(--starasia-ui-border, 1px);
+
+  /* border color  */
+  --starasia-ui-color-border: rgba(120, 134, 127, 0.2);
+
+  /* height */
+  --starasia-ui-input-height-sm: var(--starasia-ui-h-8, 32px);
+  /* --starasia-ui-input-height-md: var(--starasia-ui-h-10, 40px); */
+  --starasia-ui-input-height-md: 38px;
+  --starasia-ui-input-height-lg: var(--starasia-ui-h-12, 48px);
+
+  /* border radius */
+  --starasia-ui-input-border-radius-sm: var(--starasia-ui-radii-md, 8px);
+  --starasia-ui-input-border-radius-md: var(--starasia-ui-radii-md, 8px);
+  --starasia-ui-input-border-radius-lg: var(--starasia-ui-radii-lg, 12px);
+
+  --starasia-ui-input-placeholder-color: var(
+    --starasia-ui-color-gray-200,
+    #c9cecc
+  );
+}
+
+.starasia-input-container {
+  box-sizing: border-box;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  /* gap: var(--starasia-ui-input-spacing-sm); */
+}
+
+.starasia-input-container:has(input:focus) {
+  border-color: var(--starasia-ui-input-color-primary-blue);
+  box-shadow: 0px 0px 0px 2px var(--starasia-ui-input-color-quaternary-blue);
+}
+
+.starasia-input-container:has(input:disabled)
+  .starasia-input-container-icon-left {
+  background-color: #f2f3f2;
+}
+
+.starasia-input-container:has(input:disabled)
+  .starasia-input-container-icon-right {
+  background-color: #f2f3f2;
+}
+
+.starasia-input-container:has(input:disabled) {
+  /* border-color: var(--starasia-ui-input-color-tertiary-gray); */
+  /* background-color: var(--starasia-ui-input-color-tertiary-gray); */
+  border-color: rgba(120, 134, 127, 0.2);
+  background-color: #f2f3f2;
+}
+
+.starasia-input-container:has(input:disabled) input {
+  color: #939e99 !important;
+  border-color: rgba(120, 134, 127, 0.2);
+  background-color: #f2f3f2;
+}
+
+.starasia-input-outline.starasia-input-container-error {
+  border-color: var(--starasia-ui-input-color-secondary-red) !important;
+}
+
+.starasia-input-filled.starasia-input-container-error {
+  border-color: var(--starasia-ui-input-color-secondary-red) !important;
+  background-color: var(--starasia-ui-input-color-quinary-red);
+}
+
+.starasia-input-flushed.starasia-input-container-error {
+  border-color: var(--starasia-ui-input-color-secondary-red) !important;
+}
+
+.starasia-input-outline.starasia-input-container-warning {
+  border-color: var(--starasia-ui-input-color-secondary-yellow) !important;
+}
+
+.starasia-input-filled.starasia-input-container-warning {
+  border-color: var(--starasia-ui-input-color-secondary-yellow) !important;
+  background-color: var(--starasia-ui-input-color-quinary-yellow);
+}
+
+.starasia-input-flushed.starasia-input-container-warning {
+  border-color: var(--starasia-ui-input-color-secondary-yellow) !important;
+}
+
+.starasia-input-outline {
+  border-color: var(--starasia-ui-color-border);
+  background-color: transparent;
+  border-width: var(--starasia-ui-input-border-width);
+  border-style: solid;
+}
+
+.starasia-input-filled {
+  border-width: var(--starasia-ui-input-border-width);
+  border-style: solid;
+  border-color: var(--starasia-ui-input-color-quinary-gray);
+  background-color: var(--starasia-ui-input-color-quinary-gray);
+}
+
+.starasia-input-flushed.starasia-input-container:has(input:focus) {
+  box-shadow: none;
+}
+
+.starasia-input-flushed {
+  border-bottom: var(--starasia-ui-input-border-width) solid
+    var(--starasia-ui-input-color-tertiary-gray);
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
+.starasia-input-container.sm {
+  height: var(--starasia-ui-input-height-sm);
+  border-radius: var(--starasia-ui-input-border-radius-sm);
+  font-size: var(--starasia-ui-fontSizes-sm, 12px);
+  /* padding-inline: var(--starasia-ui-input-spacing-sm); */
+}
+
+.starasia-input-container.md {
+  height: var(--starasia-ui-input-height-md);
+  border-radius: var(--starasia-ui-input-border-radius-md);
+  font-size: var(--starasia-ui-fontSizes-md, 14px);
+  /* padding-inline: var(--starasia-ui-input-spacing-ms); */
+}
+
+.starasia-input-container.lg {
+  height: var(--starasia-ui-input-height-lg);
+  border-radius: var(--starasia-ui-input-border-radius-lg);
+  font-size: var(--starasia-ui-fontSizes-lg, 16px);
+  /* padding-inline: var(--starasia-ui-input-spacing-ms); */
+}
+
+.starasia-input-preview-container {
+  width: 100%;
+  position: relative;
+  z-index: 1;
+  height: 100%;
+}
+
+.starasia-input-placeholder {
+  position: absolute;
+  top: 50%;
+  left: 8px;
+  transform: translateY(-50%);
+  font-family: "Poppins", serif;
+  color: var(--starasia-ui-input-placeholder-color);
+  font-weight: var(--starasia-ui-fontWeights-normal, 300);
+  pointer-events: none;
+}
+
+.starasia-input-placeholder-highlighted {
+  color: var(--starasia-ui-input-color-primary-gray);
+}
+
+.starasia-input-preview-container
+  .starasia-input:focus
+  + .starasia-input-placeholder {
+  display: none;
+}
+
+.starasia-input {
+  width: 100%;
+  box-sizing: border-box;
+  height: 100%;
+  border: none;
+  outline: none;
+  font-family: "Poppins", serif;
+  font-size: inherit;
+  font-weight: var(--starasia-ui-fontWeights-medium, 400);
+  background: transparent;
+  color: var(--starasia-ui-color-text);
+  padding-inline: var(--starasia-ui-input-spacing-sm) !important;
+}
+
+/* .starasia-input-container:not(:has(.starasia-input-container-icon-left)) .starasia-input {
+  padding-inline: 12px !important;
+} */
+/* just icon */
+
+/* INPUT ICON */
+.starasia-input-container-icon-left {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  padding-left: 12px;
+  background: transparent;
+}
+
+.starasia-input-container-icon-right {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  padding-right: 12px;
+  background: transparent;
+}
+
+/* INPUT ADDONS */
+.starasia-input-container-addons-left {
+  background-color: rgba(120, 134, 127, 0.1);
+  height: 100%;
+  display: flex;
+  padding-inline: var(--starasia-ui-input-spacing-ms);
+  align-items: center;
+  justify-content: center;
+  font-family: "Poppins", serif;
+  color: var(--starasia-ui-input-color-secondary-gray);
+  border-right: 1px solid var(--starasia-ui-color-border);
+}
+
+.starasia-input-container-addons-right {
+  background-color: rgba(120, 134, 127, 0.1);
+  height: 100%;
+  display: flex;
+  padding-inline: var(--starasia-ui-input-spacing-ms);
+  align-items: center;
+  justify-content: center;
+  font-family: "Poppins", serif;
+  color: var(--starasia-ui-input-color-secondary-gray);
+  border-left: 1px solid var(--starasia-ui-color-border);
+}
+
+.starasia-input-container:has(input:disabled)
+  .starasia-input-container-addons-right {
+  background-color: rgba(120, 134, 127, 0.3) !important;
+}
+
+.starasia-input-container:has(input:disabled)
+  .starasia-input-container-addons-left {
+  background-color: rgba(120, 134, 127, 0.3) !important;
+}
+
+.starasia-input::placeholder {
+  color: var(--starasia-ui-input-placeholder-color);
+  font-weight: var(--starasia-ui-fontWeights-normal, 300);
+}
+`, Yr = (t) => {
+  if (t === "sm")
+    return 16;
+  if (t === "md")
+    return 16;
+  if (t === "lg")
+    return 20;
+}, qr = (t) => t === "default" ? "#939E99" : t === "error" ? "#EF4444" : t === "warning" ? "#EAB308" : "#939E99", zr = (t) => t === "default" ? "#939E99" : t === "error" ? "#EF4444" : t === "warning" ? "#EAB308" : "#939E99", _n = Br(
+  ({ options: t, value: u, setValue: b, isComponentVisible: w, onOptionChange: x }, f) => {
+    const [A, I] = H([]), l = Mr(null), _ = () => {
+      if (f != null && f.current && l.current) {
+        const p = window.innerHeight, E = f == null ? void 0 : f.current.getBoundingClientRect(), T = l.current.getBoundingClientRect(), D = E.bottom + T.height;
+        l.current.style.left = `${E.left}px`, l.current.style.width = `${E.width}px`, D >= p - 10 ? l.current.style.top = `${E.top - T.height - 5}px` : l.current.style.top = `${E.top + E.height}px`;
+      }
+    };
+    return U(() => (window.addEventListener("scroll", _), window.addEventListener("resize", _), () => {
+      window.removeEventListener("scroll", _), window.removeEventListener("resize", _);
+    }), [f, l]), U(() => {
+      _();
+    }, [w]), U(() => {
+      I(
+        (t == null ? void 0 : t.filter(
+          (p) => p.toLowerCase().startsWith(u.toLowerCase())
+        )) || []
+      );
+    }, [u, t]), /* @__PURE__ */ S.jsx(
+      "div",
+      {
+        ref: l,
+        style: {
+          position: "fixed",
+          padding: "8px",
+          boxSizing: "border-box",
+          boxShadow: "0px 8px 12px 0px rgba(0, 0, 0, 0.08)",
+          borderRadius: "8px",
+          background: "white",
+          overflow: "auto",
+          zIndex: 5e4
+        },
+        children: A == null ? void 0 : A.map(
+          (p) => Cn(p, u, b, x)
+        )
+      }
+    );
+  }
+), Cn = (t, u, b, w) => {
+  const x = t.toLowerCase().indexOf(u.toLowerCase());
+  return /* @__PURE__ */ S.jsxs(
+    "p",
+    {
+      style: {
+        fontFamily: "Poppins",
+        color: "#c9cecc",
+        fontWeight: 500,
+        padding: "8px 14px",
+        cursor: "pointer"
+      },
+      onClick: () => {
+        b(t), w && w(t);
+      },
+      children: [
+        t.slice(0, x),
+        /* @__PURE__ */ S.jsx("span", { style: { color: "#374151" }, children: t.slice(x, x + u.length) }),
+        t.slice(x + u.length)
+      ]
+    }
+  );
+};
+function Sn(t) {
+  const [u, b] = H(t), w = Mr(null), x = (f) => {
+    w.current && !w.current.contains(f.target) && b(!1);
+  };
+  return U(() => (document.addEventListener("click", x, !0), () => {
+    document.removeEventListener("click", x, !0);
+  }), []), { ref: w, isComponentVisible: u, setIsComponentVisible: b };
+}
+const Ur = "starasia-input-styles", kn = (t) => {
+  if (!document.getElementById(Ur)) {
+    const u = document.createElement("style");
+    u.id = Ur, u.textContent = t, document.head.appendChild(u);
+  }
+};
+kn(Rn);
+function Tn(t) {
+  return Number(t.replace(/\./g, ""));
+}
+const yr = (t) => {
+  let u = t.replace(/[^\d]/g, "");
+  return u = u.replace(/^0+(?=\d)/, ""), u.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+}, Pn = Br(
+  (t, u) => {
+    const {
+      leftIcon: b,
+      rightIcon: w,
+      size: x = "md",
+      status: f = "default",
+      inputUse: A = "icon",
+      variant: I = "outline",
+      leftAddons: l,
+      rightAddons: _,
+      onClickLeftIcon: p,
+      onClickRightIcon: E,
+      highlightPlaceholder: T,
+      currency: D,
+      fullWidth: X = !1,
+      options: N,
+      onOptionChange: ir,
+      ...c
+    } = t;
+    {
+      const [R, W] = H(!0), [F, Y] = H(""), [or, Z] = H(""), {
+        isComponentVisible: Q,
+        ref: B,
+        setIsComponentVisible: sr
+      } = Sn(!1), ur = () => {
+        sr((y) => !y);
+      };
+      return U(() => {
+        typeof c.value == "string" && c.value.length || c.defaultValue || typeof c.value == "number" ? W(!1) : W(!0);
+      }, [c.value, c.defaultValue]), U(() => {
+        Y(D ? yr(String(c.value)) : c.value || "");
+      }, [c]), /* @__PURE__ */ S.jsxs(
+        "div",
+        {
+          className: `starasia-input-container starasia-input-${I} starasia-input-container-${f} ${x} `,
+          style: {
+            width: X ? "auto" : "max-content",
+            position: "relative"
+          },
+          ref: B,
+          onClick: ur,
+          children: [
+            l ? /* @__PURE__ */ S.jsx("div", { className: "starasia-input-container-addons-left", children: l }) : null,
+            b ? /* @__PURE__ */ S.jsx("div", { className: "starasia-input-container-icon-left", children: tr.cloneElement(b, {
+              width: Yr(x),
+              color: qr(c.disabled ? "disable" : f),
+              onClick: p,
+              style: {
+                color: `${qr(
+                  c.disabled ? "disable" : f
+                )}`
+              }
+            }) }) : null,
+            /* @__PURE__ */ S.jsxs("div", { className: "starasia-input-preview-container", children: [
+              /* @__PURE__ */ S.jsx(
+                "input",
+                {
+                  className: "starasia-input",
+                  ...c,
+                  placeholder: "",
+                  disabled: f === "disable" ? !0 : c.disabled,
+                  ref: u,
+                  onChange: (y) => {
+                    let v = D ? yr(y.target.value) : y.target.value;
+                    const m = y.target.selectionStart;
+                    if (D)
+                      if (or === "Backspace")
+                        if (typeof m == "number" && F[m] === ".") {
+                          let j = v.slice(0, m - 1), L = v.slice(
+                            m,
+                            v.length
+                          );
+                          v = yr(j + L);
+                          const O = F.length - 1, $ = v.length - 1;
+                          setTimeout(
+                            () => y.target.setSelectionRange(
+                              m - (O - $) < 0 ? 0 : m - (O - $),
+                              m - (O - $) < 0 ? 0 : m - (O - $)
+                            ),
+                            0
+                          );
+                        } else {
+                          const j = F.length - 1, L = v.length - 1;
+                          let O = m + 1 - (j - L);
+                          setTimeout(
+                            () => y.target.setSelectionRange(
+                              O < 0 ? 0 : O,
+                              O < 0 ? 0 : O
+                            ),
+                            0
+                          );
+                        }
+                      else {
+                        const j = F.length - 1, L = v.length - 1;
+                        setTimeout(
+                          () => y.target.setSelectionRange(
+                            m + (L - j) - 1,
+                            m + (L - j) - 1
+                          ),
+                          0
+                        );
+                      }
+                    Y(v), y.target.value ? W(!1) : W(!0), c.onChange && c.onChange({
+                      ...y,
+                      target: {
+                        ...y.target,
+                        value: D ? String(Tn(v)) : v,
+                        name: y.target.name
+                      }
+                    }), Z("");
+                  },
+                  value: F,
+                  onKeyDown: (y) => {
+                    y.key === "Backspace" && Z(y.key), c.onKeyDown && c.onKeyDown(y);
+                  }
+                }
+              ),
+              R ? jn(c.placeholder, T) : null
+            ] }),
+            w ? /* @__PURE__ */ S.jsx("div", { className: "starasia-input-container-icon-right", children: tr.cloneElement(w, {
+              width: Yr(x),
+              color: zr(c.disabled ? "disable" : f),
+              onClick: E,
+              style: {
+                color: `${zr(
+                  c.disabled ? "disable" : f
+                )}`
+              }
+            }) }) : null,
+            _ ? /* @__PURE__ */ S.jsx("div", { className: "starasia-input-container-addons-right", children: _ }) : null,
+            F && Q && (N != null && N.length) ? /* @__PURE__ */ S.jsx(
+              _n,
+              {
+                options: N,
+                value: F,
+                setValue: Y,
+                ref: B,
+                isComponentVisible: Q,
+                onOptionChange: ir
+              }
+            ) : null
+          ]
+        }
+      );
+    }
+  }
+), jn = (t, u) => {
+  if (!t || !u)
+    return /* @__PURE__ */ S.jsx("p", { className: "starasia-input-placeholder", children: t || "" });
+  const b = t.toLowerCase().indexOf(u.toLowerCase());
+  return b === -1 ? /* @__PURE__ */ S.jsx("p", { className: "starasia-input-placeholder", children: t }) : /* @__PURE__ */ S.jsxs("p", { className: "starasia-input-placeholder", children: [
+    t.slice(0, b),
+    /* @__PURE__ */ S.jsx("span", { className: "starasia-input-placeholder-highlighted", children: t.slice(b, b + u.length) }),
+    t.slice(b + u.length)
+  ] });
+};
+export {
+  Pn as Input
+};