@starasia/badges 1.0.1 → 1.0.3

package/dist/badges.es.js

@@ -1,631 +1,29 @@
-import U from "react";
-var Z = { exports: {} }, I = {};
-/**
- * @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 Tr;
-function fe() {
-  if (Tr) return I;
-  Tr = 1;
-  var v = U, g = Symbol.for("react.element"), R = Symbol.for("react.fragment"), y = Object.prototype.hasOwnProperty, p = v.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, C = { key: !0, ref: !0, __self: !0, __source: !0 };
-  function x(S, c, P) {
-    var h, E = {}, T = null, Y = null;
-    P !== void 0 && (T = "" + P), c.key !== void 0 && (T = "" + c.key), c.ref !== void 0 && (Y = c.ref);
-    for (h in c) y.call(c, h) && !C.hasOwnProperty(h) && (E[h] = c[h]);
-    if (S && S.defaultProps) for (h in c = S.defaultProps, c) E[h] === void 0 && (E[h] = c[h]);
-    return { $$typeof: g, type: S, key: T, ref: Y, props: E, _owner: p.current };
-  }
-  return I.Fragment = R, I.jsx = x, I.jsxs = x, I;
-}
-var $ = {};
-/**
- * @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 Or;
-function de() {
-  return Or || (Or = 1, process.env.NODE_ENV !== "production" && function() {
-    var v = U, g = Symbol.for("react.element"), R = Symbol.for("react.portal"), y = Symbol.for("react.fragment"), p = Symbol.for("react.strict_mode"), C = Symbol.for("react.profiler"), x = Symbol.for("react.provider"), S = Symbol.for("react.context"), c = Symbol.for("react.forward_ref"), P = Symbol.for("react.suspense"), h = Symbol.for("react.suspense_list"), E = Symbol.for("react.memo"), T = Symbol.for("react.lazy"), Y = Symbol.for("react.offscreen"), Q = Symbol.iterator, Cr = "@@iterator";
-    function Pr(r) {
-      if (r === null || typeof r != "object")
-        return null;
-      var e = Q && r[Q] || r[Cr];
-      return typeof e == "function" ? e : null;
-    }
-    var j = v.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-    function f(r) {
-      {
-        for (var e = arguments.length, a = new Array(e > 1 ? e - 1 : 0), n = 1; n < e; n++)
-          a[n - 1] = arguments[n];
-        jr("error", r, a);
-      }
-    }
-    function jr(r, e, a) {
-      {
-        var n = j.ReactDebugCurrentFrame, s = n.getStackAddendum();
-        s !== "" && (e += "%s", a = a.concat([s]));
-        var o = a.map(function(i) {
-          return String(i);
-        });
-        o.unshift("Warning: " + e), Function.prototype.apply.call(console[r], console, o);
-      }
-    }
-    var kr = !1, Dr = !1, Ar = !1, Fr = !1, Ir = !1, rr;
-    rr = Symbol.for("react.module.reference");
-    function $r(r) {
-      return !!(typeof r == "string" || typeof r == "function" || r === y || r === C || Ir || r === p || r === P || r === h || Fr || r === Y || kr || Dr || Ar || typeof r == "object" && r !== null && (r.$$typeof === T || r.$$typeof === E || r.$$typeof === x || r.$$typeof === S || r.$$typeof === c || // 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 Yr(r, e, a) {
-      var n = r.displayName;
-      if (n)
-        return n;
-      var s = e.displayName || e.name || "";
-      return s !== "" ? a + "(" + s + ")" : a;
-    }
-    function er(r) {
-      return r.displayName || "Context";
-    }
-    function _(r) {
-      if (r == null)
-        return null;
-      if (typeof r.tag == "number" && f("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 y:
-          return "Fragment";
-        case R:
-          return "Portal";
-        case C:
-          return "Profiler";
-        case p:
-          return "StrictMode";
-        case P:
-          return "Suspense";
-        case h:
-          return "SuspenseList";
-      }
-      if (typeof r == "object")
-        switch (r.$$typeof) {
-          case S:
-            var e = r;
-            return er(e) + ".Consumer";
-          case x:
-            var a = r;
-            return er(a._context) + ".Provider";
-          case c:
-            return Yr(r, r.render, "ForwardRef");
-          case E:
-            var n = r.displayName || null;
-            return n !== null ? n : _(r.type) || "Memo";
-          case T: {
-            var s = r, o = s._payload, i = s._init;
-            try {
-              return _(i(o));
-            } catch {
-              return null;
-            }
-          }
-        }
-      return null;
-    }
-    var O = Object.assign, A = 0, ar, nr, tr, ir, sr, or, ur;
-    function lr() {
-    }
-    lr.__reactDisabledLog = !0;
-    function Wr() {
-      {
-        if (A === 0) {
-          ar = console.log, nr = console.info, tr = console.warn, ir = console.error, sr = console.group, or = console.groupCollapsed, ur = console.groupEnd;
-          var r = {
-            configurable: !0,
-            enumerable: !0,
-            value: lr,
-            writable: !0
-          };
-          Object.defineProperties(console, {
-            info: r,
-            log: r,
-            warn: r,
-            error: r,
-            group: r,
-            groupCollapsed: r,
-            groupEnd: r
-          });
-        }
-        A++;
-      }
-    }
-    function Lr() {
-      {
-        if (A--, A === 0) {
-          var r = {
-            configurable: !0,
-            enumerable: !0,
-            writable: !0
-          };
-          Object.defineProperties(console, {
-            log: O({}, r, {
-              value: ar
-            }),
-            info: O({}, r, {
-              value: nr
-            }),
-            warn: O({}, r, {
-              value: tr
-            }),
-            error: O({}, r, {
-              value: ir
-            }),
-            group: O({}, r, {
-              value: sr
-            }),
-            groupCollapsed: O({}, r, {
-              value: or
-            }),
-            groupEnd: O({}, r, {
-              value: ur
-            })
-          });
-        }
-        A < 0 && f("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
-      }
-    }
-    var B = j.ReactCurrentDispatcher, z;
-    function W(r, e, a) {
-      {
-        if (z === void 0)
-          try {
-            throw Error();
-          } catch (s) {
-            var n = s.stack.trim().match(/\n( *(at )?)/);
-            z = n && n[1] || "";
-          }
-        return `
-` + z + r;
-      }
-    }
-    var J = !1, L;
-    {
-      var Vr = typeof WeakMap == "function" ? WeakMap : Map;
-      L = new Vr();
-    }
-    function cr(r, e) {
-      if (!r || J)
-        return "";
-      {
-        var a = L.get(r);
-        if (a !== void 0)
-          return a;
-      }
-      var n;
-      J = !0;
-      var s = Error.prepareStackTrace;
-      Error.prepareStackTrace = void 0;
-      var o;
-      o = B.current, B.current = null, Wr();
-      try {
-        if (e) {
-          var i = function() {
-            throw Error();
-          };
-          if (Object.defineProperty(i.prototype, "props", {
-            set: function() {
-              throw Error();
-            }
-          }), typeof Reflect == "object" && Reflect.construct) {
-            try {
-              Reflect.construct(i, []);
-            } catch (b) {
-              n = b;
-            }
-            Reflect.construct(r, [], i);
-          } else {
-            try {
-              i.call();
-            } catch (b) {
-              n = b;
-            }
-            r.call(i.prototype);
-          }
-        } else {
-          try {
-            throw Error();
-          } catch (b) {
-            n = b;
-          }
-          r();
-        }
-      } catch (b) {
-        if (b && n && typeof b.stack == "string") {
-          for (var t = b.stack.split(`
-`), d = n.stack.split(`
-`), u = t.length - 1, l = d.length - 1; u >= 1 && l >= 0 && t[u] !== d[l]; )
-            l--;
-          for (; u >= 1 && l >= 0; u--, l--)
-            if (t[u] !== d[l]) {
-              if (u !== 1 || l !== 1)
-                do
-                  if (u--, l--, l < 0 || t[u] !== d[l]) {
-                    var m = `
-` + t[u].replace(" at new ", " at ");
-                    return r.displayName && m.includes("<anonymous>") && (m = m.replace("<anonymous>", r.displayName)), typeof r == "function" && L.set(r, m), m;
-                  }
-                while (u >= 1 && l >= 0);
-              break;
-            }
-        }
-      } finally {
-        J = !1, B.current = o, Lr(), Error.prepareStackTrace = s;
-      }
-      var D = r ? r.displayName || r.name : "", w = D ? W(D) : "";
-      return typeof r == "function" && L.set(r, w), w;
-    }
-    function Mr(r, e, a) {
-      return cr(r, !1);
-    }
-    function Nr(r) {
-      var e = r.prototype;
-      return !!(e && e.isReactComponent);
-    }
-    function V(r, e, a) {
-      if (r == null)
-        return "";
-      if (typeof r == "function")
-        return cr(r, Nr(r));
-      if (typeof r == "string")
-        return W(r);
-      switch (r) {
-        case P:
-          return W("Suspense");
-        case h:
-          return W("SuspenseList");
-      }
-      if (typeof r == "object")
-        switch (r.$$typeof) {
-          case c:
-            return Mr(r.render);
-          case E:
-            return V(r.type, e, a);
-          case T: {
-            var n = r, s = n._payload, o = n._init;
-            try {
-              return V(o(s), e, a);
-            } catch {
-            }
-          }
-        }
-      return "";
-    }
-    var F = Object.prototype.hasOwnProperty, fr = {}, dr = j.ReactDebugCurrentFrame;
-    function M(r) {
-      if (r) {
-        var e = r._owner, a = V(r.type, r._source, e ? e.type : null);
-        dr.setExtraStackFrame(a);
-      } else
-        dr.setExtraStackFrame(null);
-    }
-    function Ur(r, e, a, n, s) {
-      {
-        var o = Function.call.bind(F);
-        for (var i in r)
-          if (o(r, i)) {
-            var t = void 0;
-            try {
-              if (typeof r[i] != "function") {
-                var d = Error((n || "React class") + ": " + a + " type `" + i + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof r[i] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
-                throw d.name = "Invariant Violation", d;
-              }
-              t = r[i](e, i, n, a, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
-            } catch (u) {
-              t = u;
-            }
-            t && !(t instanceof Error) && (M(s), f("%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).", n || "React class", a, i, typeof t), M(null)), t instanceof Error && !(t.message in fr) && (fr[t.message] = !0, M(s), f("Failed %s type: %s", a, t.message), M(null));
-          }
-      }
-    }
-    var Br = Array.isArray;
-    function q(r) {
-      return Br(r);
-    }
-    function zr(r) {
-      {
-        var e = typeof Symbol == "function" && Symbol.toStringTag, a = e && r[Symbol.toStringTag] || r.constructor.name || "Object";
-        return a;
-      }
-    }
-    function Jr(r) {
-      try {
-        return vr(r), !1;
-      } catch {
-        return !0;
-      }
-    }
-    function vr(r) {
-      return "" + r;
-    }
-    function gr(r) {
-      if (Jr(r))
-        return f("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", zr(r)), vr(r);
-    }
-    var pr = j.ReactCurrentOwner, qr = {
-      key: !0,
-      ref: !0,
-      __self: !0,
-      __source: !0
-    }, br, hr;
-    function Gr(r) {
-      if (F.call(r, "ref")) {
-        var e = Object.getOwnPropertyDescriptor(r, "ref").get;
-        if (e && e.isReactWarning)
-          return !1;
-      }
-      return r.ref !== void 0;
-    }
-    function Kr(r) {
-      if (F.call(r, "key")) {
-        var e = Object.getOwnPropertyDescriptor(r, "key").get;
-        if (e && e.isReactWarning)
-          return !1;
-      }
-      return r.key !== void 0;
-    }
-    function Xr(r, e) {
-      typeof r.ref == "string" && pr.current;
-    }
-    function Hr(r, e) {
-      {
-        var a = function() {
-          br || (br = !0, f("%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)", e));
-        };
-        a.isReactWarning = !0, Object.defineProperty(r, "key", {
-          get: a,
-          configurable: !0
-        });
-      }
-    }
-    function Zr(r, e) {
-      {
-        var a = function() {
-          hr || (hr = !0, f("%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)", e));
-        };
-        a.isReactWarning = !0, Object.defineProperty(r, "ref", {
-          get: a,
-          configurable: !0
-        });
-      }
-    }
-    var Qr = function(r, e, a, n, s, o, i) {
-      var t = {
-        // This tag allows us to uniquely identify this as a React Element
-        $$typeof: g,
-        // Built-in properties that belong on the element
-        type: r,
-        key: e,
-        ref: a,
-        props: i,
-        // Record the component responsible for creating this element.
-        _owner: o
-      };
-      return t._store = {}, Object.defineProperty(t._store, "validated", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: !1
-      }), Object.defineProperty(t, "_self", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !1,
-        value: n
-      }), Object.defineProperty(t, "_source", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !1,
-        value: s
-      }), Object.freeze && (Object.freeze(t.props), Object.freeze(t)), t;
-    };
-    function re(r, e, a, n, s) {
-      {
-        var o, i = {}, t = null, d = null;
-        a !== void 0 && (gr(a), t = "" + a), Kr(e) && (gr(e.key), t = "" + e.key), Gr(e) && (d = e.ref, Xr(e, s));
-        for (o in e)
-          F.call(e, o) && !qr.hasOwnProperty(o) && (i[o] = e[o]);
-        if (r && r.defaultProps) {
-          var u = r.defaultProps;
-          for (o in u)
-            i[o] === void 0 && (i[o] = u[o]);
-        }
-        if (t || d) {
-          var l = typeof r == "function" ? r.displayName || r.name || "Unknown" : r;
-          t && Hr(i, l), d && Zr(i, l);
-        }
-        return Qr(r, t, d, s, n, pr.current, i);
-      }
-    }
-    var G = j.ReactCurrentOwner, mr = j.ReactDebugCurrentFrame;
-    function k(r) {
-      if (r) {
-        var e = r._owner, a = V(r.type, r._source, e ? e.type : null);
-        mr.setExtraStackFrame(a);
-      } else
-        mr.setExtraStackFrame(null);
-    }
-    var K;
-    K = !1;
-    function X(r) {
-      return typeof r == "object" && r !== null && r.$$typeof === g;
-    }
-    function yr() {
-      {
-        if (G.current) {
-          var r = _(G.current.type);
-          if (r)
-            return `
-
-Check the render method of \`` + r + "`.";
-        }
-        return "";
-      }
-    }
-    function ee(r) {
-      return "";
-    }
-    var Er = {};
-    function ae(r) {
-      {
-        var e = yr();
-        if (!e) {
-          var a = typeof r == "string" ? r : r.displayName || r.name;
-          a && (e = `
-
-Check the top-level render call using <` + a + ">.");
-        }
-        return e;
-      }
-    }
-    function _r(r, e) {
-      {
-        if (!r._store || r._store.validated || r.key != null)
-          return;
-        r._store.validated = !0;
-        var a = ae(e);
-        if (Er[a])
-          return;
-        Er[a] = !0;
-        var n = "";
-        r && r._owner && r._owner !== G.current && (n = " It was passed a child from " + _(r._owner.type) + "."), k(r), f('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', a, n), k(null);
-      }
-    }
-    function Rr(r, e) {
-      {
-        if (typeof r != "object")
-          return;
-        if (q(r))
-          for (var a = 0; a < r.length; a++) {
-            var n = r[a];
-            X(n) && _r(n, e);
-          }
-        else if (X(r))
-          r._store && (r._store.validated = !0);
-        else if (r) {
-          var s = Pr(r);
-          if (typeof s == "function" && s !== r.entries)
-            for (var o = s.call(r), i; !(i = o.next()).done; )
-              X(i.value) && _r(i.value, e);
-        }
-      }
-    }
-    function ne(r) {
-      {
-        var e = r.type;
-        if (e == null || typeof e == "string")
-          return;
-        var a;
-        if (typeof e == "function")
-          a = e.propTypes;
-        else if (typeof e == "object" && (e.$$typeof === c || // Note: Memo only checks outer props here.
-        // Inner props are checked in the reconciler.
-        e.$$typeof === E))
-          a = e.propTypes;
-        else
-          return;
-        if (a) {
-          var n = _(e);
-          Ur(a, r.props, "prop", n, r);
-        } else if (e.PropTypes !== void 0 && !K) {
-          K = !0;
-          var s = _(e);
-          f("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", s || "Unknown");
-        }
-        typeof e.getDefaultProps == "function" && !e.getDefaultProps.isReactClassApproved && f("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
-      }
-    }
-    function te(r) {
-      {
-        for (var e = Object.keys(r.props), a = 0; a < e.length; a++) {
-          var n = e[a];
-          if (n !== "children" && n !== "key") {
-            k(r), f("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", n), k(null);
-            break;
-          }
-        }
-        r.ref !== null && (k(r), f("Invalid attribute `ref` supplied to `React.Fragment`."), k(null));
-      }
-    }
-    var xr = {};
-    function Sr(r, e, a, n, s, o) {
-      {
-        var i = $r(r);
-        if (!i) {
-          var t = "";
-          (r === void 0 || typeof r == "object" && r !== null && Object.keys(r).length === 0) && (t += " 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 d = ee();
-          d ? t += d : t += yr();
-          var u;
-          r === null ? u = "null" : q(r) ? u = "array" : r !== void 0 && r.$$typeof === g ? (u = "<" + (_(r.type) || "Unknown") + " />", t = " Did you accidentally export a JSX literal instead of a component?") : u = typeof r, f("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", u, t);
-        }
-        var l = re(r, e, a, s, o);
-        if (l == null)
-          return l;
-        if (i) {
-          var m = e.children;
-          if (m !== void 0)
-            if (n)
-              if (q(m)) {
-                for (var D = 0; D < m.length; D++)
-                  Rr(m[D], r);
-                Object.freeze && Object.freeze(m);
-              } else
-                f("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
-              Rr(m, r);
-        }
-        if (F.call(e, "key")) {
-          var w = _(r), b = Object.keys(e).filter(function(ce) {
-            return ce !== "key";
-          }), H = b.length > 0 ? "{key: someKey, " + b.join(": ..., ") + ": ...}" : "{key: someKey}";
-          if (!xr[w + H]) {
-            var le = b.length > 0 ? "{" + b.join(": ..., ") + ": ...}" : "{}";
-            f(`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} />`, H, w, le, w), xr[w + H] = !0;
-          }
-        }
-        return r === y ? te(l) : ne(l), l;
-      }
-    }
-    function ie(r, e, a) {
-      return Sr(r, e, a, !0);
-    }
-    function se(r, e, a) {
-      return Sr(r, e, a, !1);
-    }
-    var oe = se, ue = ie;
-    $.Fragment = y, $.jsx = oe, $.jsxs = ue;
-  }()), $;
+import { jsxs as b } from "react/jsx-runtime";
+import o from "react";
+const l = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");
+
+:root {
+  /* info (semantic blue) */
+  --starasia-ui-badges-color-info-bg: var(--starasia-ui-color-blue-50, rgba(227, 242, 253, 1));
+  --starasia-ui-badges-color-info-text: var(--starasia-ui-color-blue-700, rgba(25, 118, 210, 1));
+  --starasia-ui-badges-color-info-border: var(--starasia-ui-color-blue-300, rgba(100, 181, 246, 1));
+  /* success */
+  --starasia-ui-badges-color-success-bg: var(--starasia-ui-color-green-50, rgba(220, 246, 234, 1));
+  --starasia-ui-badges-color-success-text: var(--starasia-ui-color-green-700, rgba(32, 137, 88, 1));
+  /* danger */
+  --starasia-ui-badges-color-danger-bg: var(--starasia-ui-color-red-50, rgba(255, 240, 243, 1));
+  --starasia-ui-badges-color-danger-text: var(--starasia-ui-color-red-700, rgba(164, 19, 60, 1));
+  /* warning */
+  --starasia-ui-badges-color-warning-bg: var(--starasia-ui-color-orange-50, rgba(250, 246, 224, 1));
+  --starasia-ui-badges-color-warning-text: var(--starasia-ui-color-orange-700, rgba(152, 104, 0, 1));
+  /* dark */
+  --starasia-ui-badges-color-dark-bg: var(--starasia-ui-color-gray-100, rgba(239, 243, 248, 1));
+  --starasia-ui-badges-color-dark-text: var(--starasia-ui-color-gray-700, rgba(72, 80, 76, 1));
+  /* neutral */
+  --starasia-ui-badges-color-neutral-border: var(--starasia-ui-color-gray-50, rgba(249, 250, 251, 1));
+  --starasia-ui-badges-color-neutral-bg: var(--starasia-ui-color-purple-50, rgba(233, 222, 245, 1));
+  --starasia-ui-badges-color-neutral-text: var(--starasia-ui-color-purple-500, rgba(126, 57, 197, 1));
 }
-process.env.NODE_ENV === "production" ? Z.exports = fe() : Z.exports = de();
-var ve = Z.exports;
-const ge = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");
 
 .starasia-badges {
   display: flex;
@@ -684,104 +82,104 @@ const ge = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@4
 
 /* STYLES FOR BADGE VARIANT */
 .starasia-badges-info {
-  border-color: var(--starasia-ui-color-blue-50, #e3f2fd);
-  background: var(--starasia-ui-color-blue-50, #e3f2fd);
-  color: var(--starasia-ui-color-blue-700, #1976d2);
+  border-color: var(--starasia-ui-badges-color-info-bg);
+  background: var(--starasia-ui-badges-color-info-bg);
+  color: var(--starasia-ui-badges-color-info-text);
 }
 
 .starasia-badges-info.starasia-badges-border {
-  border-color: var(--starasia-ui-color-blue-700, #64b5f6);
+  border-color: var(--starasia-ui-badges-color-info-border);
 }
 
 .starasia-badges-success {
-  border-color: var(--starasia-ui-color-green-50, #dcf6ea);
-  background: var(--starasia-ui-color-green-50, #dcf6ea);
-  color: var(--starasia-ui-color-green-700, #208958);
+  border-color: var(--starasia-ui-badges-color-success-bg);
+  background: var(--starasia-ui-badges-color-success-bg);
+  color: var(--starasia-ui-badges-color-success-text);
 }
 
 .starasia-badges-success.starasia-badges-border {
-  border-color: var(--starasia-ui-color-green-700, #208958);
+  border-color: var(--starasia-ui-badges-color-success-text);
 }
 
 .starasia-badges-danger {
-  border-color: var(--starasia-ui-color-red-50, #fff0f3);
-  background: var(--starasia-ui-color-red-50, #fff0f3);
-  color: var(--starasia-ui-color-red-700, #a4133c);
+  border-color: var(--starasia-ui-badges-color-danger-bg);
+  background: var(--starasia-ui-badges-color-danger-bg);
+  color: var(--starasia-ui-badges-color-danger-text);
 }
 
 .starasia-badges-danger.starasia-badges-border {
-  border-color: var(--starasia-ui-color-red-700, #a4133c);
+  border-color: var(--starasia-ui-badges-color-danger-text);
 }
 
 .starasia-badges-warning {
-  border-color: var(--starasia-ui-color-orange-50, #faf6e0);
-  background: var(--starasia-ui-color-orange-50, #faf6e0);
-  color: var(--starasia-ui-color-orange-700, #986800);
+  border-color: var(--starasia-ui-badges-color-warning-bg);
+  background: var(--starasia-ui-badges-color-warning-bg);
+  color: var(--starasia-ui-badges-color-warning-text);
 }
 
 .starasia-badges-warning.starasia-badges-border {
-  border-color: var(--starasia-ui-color-orange-700, #986800);
+  border-color: var(--starasia-ui-badges-color-warning-text);
 }
 
 .starasia-badges-dark {
-  border-color: var(--starasia-ui-color-gray-100, #eff3f8);
-  background: var(--starasia-ui-color-gray-100, #eff3f8);
-  color: var(--starasia-ui-color-gray-700, #48504c);
+  border-color: var(--starasia-ui-badges-color-dark-bg);
+  background: var(--starasia-ui-badges-color-dark-bg);
+  color: var(--starasia-ui-badges-color-dark-text);
 }
 
 .starasia-badges-dark.starasia-badges-border {
-  border-color: var(--starasia-ui-color-gray-700, #48504c);
+  border-color: var(--starasia-ui-badges-color-dark-text);
 }
 
 .starasia-badges-neutral {
-  border-color: var(--starasia-ui-color-gray-50, #f9fafb);
-  background: var(--starasia-ui-color-purple-50, #e9def5);
-  color: var(--starasia-ui-color-purple-500, #7e39c5);
+  border-color: var(--starasia-ui-badges-color-neutral-border);
+  background: var(--starasia-ui-badges-color-neutral-bg);
+  color: var(--starasia-ui-badges-color-neutral-text);
 }
 
 .starasia-badges-neutral.starasia-badges-border {
-  border-color: var(--starasia-ui-color-purple-500, #7e39c5);
+  border-color: var(--starasia-ui-badges-color-neutral-text);
 }
-`, wr = "starasia-badges-styles", pe = (v) => {
-  if (!document.getElementById(wr)) {
-    const g = document.createElement("style");
-    g.id = wr, g.textContent = v, document.head.appendChild(g);
+`, t = "starasia-badges-styles", c = (a) => {
+  if (!document.getElementById(t)) {
+    const s = document.createElement("style");
+    s.id = t, s.textContent = a, document.head.appendChild(s);
   }
 };
-pe(ge);
-const N = {
+c(l);
+const n = {
   xs: 14,
   sm: 16,
   md: 18,
   lg: 18
-}, me = ({
-  size: v = "md",
-  variant: g = "info",
-  text: R,
-  LeftIcon: y,
-  RightIcon: p,
-  border: C,
-  corners: x = "rounded"
-}) => /* @__PURE__ */ ve.jsxs("div", { className: be(v, g, C, x), children: [
-  y ? U.cloneElement(y, {
-    width: N[v],
-    height: N[v],
+}, x = ({
+  size: a = "md",
+  variant: s = "info",
+  text: e,
+  LeftIcon: i,
+  RightIcon: r,
+  border: d,
+  corners: g = "rounded"
+}) => /* @__PURE__ */ b("div", { className: u(a, s, d, g), children: [
+  i ? o.cloneElement(i, {
+    width: n[a],
+    height: n[a],
     style: {
       color: "inherit"
     }
   }) : null,
-  R,
-  p ? U.cloneElement(p, {
-    width: N[v],
-    height: N[v],
+  e,
+  r ? o.cloneElement(r, {
+    width: n[a],
+    height: n[a],
     style: {
       color: "inherit"
     }
   }) : null
-] }), be = (v, g, R, y) => {
-  let p = ["starasia-badges"];
-  return v && p.push(`starasia-badges-${v}`), g && p.push(`starasia-badges-${g}`), R && p.push("starasia-badges-border"), y === "rounded" ? p.push("starasia-badges-rounded") : p.push("starasia-badges-circular"), p.join(" ");
+] }), u = (a, s, e, i) => {
+  let r = ["starasia-badges"];
+  return a && r.push(`starasia-badges-${a}`), s && r.push(`starasia-badges-${s}`), e && r.push("starasia-badges-border"), i === "rounded" ? r.push("starasia-badges-rounded") : r.push("starasia-badges-circular"), r.join(" ");
 };
 export {
-  me as Badges
+  x as Badges
 };

package/dist/badges.umd.js

@@ -1,33 +1,27 @@
-(function(x,R){typeof exports=="object"&&typeof module<"u"?R(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],R):(x=typeof globalThis<"u"?globalThis:x||self,R(x.Badges={},x.React))})(this,function(x,R){"use strict";var z={exports:{}},I={};/**
- * @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 rr;function Cr(){if(rr)return I;rr=1;var v=R,p=Symbol.for("react.element"),S=Symbol.for("react.fragment"),y=Object.prototype.hasOwnProperty,g=v.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,j={key:!0,ref:!0,__self:!0,__source:!0};function T(O,c,k){var h,E={},w=null,V=null;k!==void 0&&(w=""+k),c.key!==void 0&&(w=""+c.key),c.ref!==void 0&&(V=c.ref);for(h in c)y.call(c,h)&&!j.hasOwnProperty(h)&&(E[h]=c[h]);if(O&&O.defaultProps)for(h in c=O.defaultProps,c)E[h]===void 0&&(E[h]=c[h]);return{$$typeof:p,type:O,key:w,ref:V,props:E,_owner:g.current}}return I.Fragment=S,I.jsx=T,I.jsxs=T,I}var Y={};/**
- * @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 er;function jr(){return er||(er=1,process.env.NODE_ENV!=="production"&&function(){var v=R,p=Symbol.for("react.element"),S=Symbol.for("react.portal"),y=Symbol.for("react.fragment"),g=Symbol.for("react.strict_mode"),j=Symbol.for("react.profiler"),T=Symbol.for("react.provider"),O=Symbol.for("react.context"),c=Symbol.for("react.forward_ref"),k=Symbol.for("react.suspense"),h=Symbol.for("react.suspense_list"),E=Symbol.for("react.memo"),w=Symbol.for("react.lazy"),V=Symbol.for("react.offscreen"),nr=Symbol.iterator,Ir="@@iterator";function Yr(r){if(r===null||typeof r!="object")return null;var e=nr&&r[nr]||r[Ir];return typeof e=="function"?e:null}var D=v.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function f(r){{for(var e=arguments.length,a=new Array(e>1?e-1:0),n=1;n<e;n++)a[n-1]=arguments[n];Wr("error",r,a)}}function Wr(r,e,a){{var n=D.ReactDebugCurrentFrame,s=n.getStackAddendum();s!==""&&(e+="%s",a=a.concat([s]));var o=a.map(function(i){return String(i)});o.unshift("Warning: "+e),Function.prototype.apply.call(console[r],console,o)}}var $r=!1,Lr=!1,Vr=!1,Mr=!1,Nr=!1,tr;tr=Symbol.for("react.module.reference");function Ur(r){return!!(typeof r=="string"||typeof r=="function"||r===y||r===j||Nr||r===g||r===k||r===h||Mr||r===V||$r||Lr||Vr||typeof r=="object"&&r!==null&&(r.$$typeof===w||r.$$typeof===E||r.$$typeof===T||r.$$typeof===O||r.$$typeof===c||r.$$typeof===tr||r.getModuleId!==void 0))}function Br(r,e,a){var n=r.displayName;if(n)return n;var s=e.displayName||e.name||"";return s!==""?a+"("+s+")":a}function ir(r){return r.displayName||"Context"}function _(r){if(r==null)return null;if(typeof r.tag=="number"&&f("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 y:return"Fragment";case S:return"Portal";case j:return"Profiler";case g:return"StrictMode";case k:return"Suspense";case h:return"SuspenseList"}if(typeof r=="object")switch(r.$$typeof){case O:var e=r;return ir(e)+".Consumer";case T:var a=r;return ir(a._context)+".Provider";case c:return Br(r,r.render,"ForwardRef");case E:var n=r.displayName||null;return n!==null?n:_(r.type)||"Memo";case w:{var s=r,o=s._payload,i=s._init;try{return _(i(o))}catch{return null}}}return null}var P=Object.assign,W=0,sr,or,ur,lr,cr,fr,dr;function vr(){}vr.__reactDisabledLog=!0;function zr(){{if(W===0){sr=console.log,or=console.info,ur=console.warn,lr=console.error,cr=console.group,fr=console.groupCollapsed,dr=console.groupEnd;var r={configurable:!0,enumerable:!0,value:vr,writable:!0};Object.defineProperties(console,{info:r,log:r,warn:r,error:r,group:r,groupCollapsed:r,groupEnd:r})}W++}}function Jr(){{if(W--,W===0){var r={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:P({},r,{value:sr}),info:P({},r,{value:or}),warn:P({},r,{value:ur}),error:P({},r,{value:lr}),group:P({},r,{value:cr}),groupCollapsed:P({},r,{value:fr}),groupEnd:P({},r,{value:dr})})}W<0&&f("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}}var J=D.ReactCurrentDispatcher,G;function M(r,e,a){{if(G===void 0)try{throw Error()}catch(s){var n=s.stack.trim().match(/\n( *(at )?)/);G=n&&n[1]||""}return`
-`+G+r}}var K=!1,N;{var Gr=typeof WeakMap=="function"?WeakMap:Map;N=new Gr}function pr(r,e){if(!r||K)return"";{var a=N.get(r);if(a!==void 0)return a}var n;K=!0;var s=Error.prepareStackTrace;Error.prepareStackTrace=void 0;var o;o=J.current,J.current=null,zr();try{if(e){var i=function(){throw Error()};if(Object.defineProperty(i.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(i,[])}catch(b){n=b}Reflect.construct(r,[],i)}else{try{i.call()}catch(b){n=b}r.call(i.prototype)}}else{try{throw Error()}catch(b){n=b}r()}}catch(b){if(b&&n&&typeof b.stack=="string"){for(var t=b.stack.split(`
-`),d=n.stack.split(`
-`),u=t.length-1,l=d.length-1;u>=1&&l>=0&&t[u]!==d[l];)l--;for(;u>=1&&l>=0;u--,l--)if(t[u]!==d[l]){if(u!==1||l!==1)do if(u--,l--,l<0||t[u]!==d[l]){var m=`
-`+t[u].replace(" at new "," at ");return r.displayName&&m.includes("<anonymous>")&&(m=m.replace("<anonymous>",r.displayName)),typeof r=="function"&&N.set(r,m),m}while(u>=1&&l>=0);break}}}finally{K=!1,J.current=o,Jr(),Error.prepareStackTrace=s}var F=r?r.displayName||r.name:"",C=F?M(F):"";return typeof r=="function"&&N.set(r,C),C}function Kr(r,e,a){return pr(r,!1)}function qr(r){var e=r.prototype;return!!(e&&e.isReactComponent)}function U(r,e,a){if(r==null)return"";if(typeof r=="function")return pr(r,qr(r));if(typeof r=="string")return M(r);switch(r){case k:return M("Suspense");case h:return M("SuspenseList")}if(typeof r=="object")switch(r.$$typeof){case c:return Kr(r.render);case E:return U(r.type,e,a);case w:{var n=r,s=n._payload,o=n._init;try{return U(o(s),e,a)}catch{}}}return""}var $=Object.prototype.hasOwnProperty,gr={},br=D.ReactDebugCurrentFrame;function B(r){if(r){var e=r._owner,a=U(r.type,r._source,e?e.type:null);br.setExtraStackFrame(a)}else br.setExtraStackFrame(null)}function Xr(r,e,a,n,s){{var o=Function.call.bind($);for(var i in r)if(o(r,i)){var t=void 0;try{if(typeof r[i]!="function"){var d=Error((n||"React class")+": "+a+" type `"+i+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof r[i]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw d.name="Invariant Violation",d}t=r[i](e,i,n,a,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(u){t=u}t&&!(t instanceof Error)&&(B(s),f("%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).",n||"React class",a,i,typeof t),B(null)),t instanceof Error&&!(t.message in gr)&&(gr[t.message]=!0,B(s),f("Failed %s type: %s",a,t.message),B(null))}}}var Hr=Array.isArray;function q(r){return Hr(r)}function Zr(r){{var e=typeof Symbol=="function"&&Symbol.toStringTag,a=e&&r[Symbol.toStringTag]||r.constructor.name||"Object";return a}}function Qr(r){try{return hr(r),!1}catch{return!0}}function hr(r){return""+r}function mr(r){if(Qr(r))return f("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",Zr(r)),hr(r)}var yr=D.ReactCurrentOwner,re={key:!0,ref:!0,__self:!0,__source:!0},Er,Rr;function ee(r){if($.call(r,"ref")){var e=Object.getOwnPropertyDescriptor(r,"ref").get;if(e&&e.isReactWarning)return!1}return r.ref!==void 0}function ae(r){if($.call(r,"key")){var e=Object.getOwnPropertyDescriptor(r,"key").get;if(e&&e.isReactWarning)return!1}return r.key!==void 0}function ne(r,e){typeof r.ref=="string"&&yr.current}function te(r,e){{var a=function(){Er||(Er=!0,f("%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)",e))};a.isReactWarning=!0,Object.defineProperty(r,"key",{get:a,configurable:!0})}}function ie(r,e){{var a=function(){Rr||(Rr=!0,f("%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)",e))};a.isReactWarning=!0,Object.defineProperty(r,"ref",{get:a,configurable:!0})}}var se=function(r,e,a,n,s,o,i){var t={$$typeof:p,type:r,key:e,ref:a,props:i,_owner:o};return t._store={},Object.defineProperty(t._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(t,"_self",{configurable:!1,enumerable:!1,writable:!1,value:n}),Object.defineProperty(t,"_source",{configurable:!1,enumerable:!1,writable:!1,value:s}),Object.freeze&&(Object.freeze(t.props),Object.freeze(t)),t};function oe(r,e,a,n,s){{var o,i={},t=null,d=null;a!==void 0&&(mr(a),t=""+a),ae(e)&&(mr(e.key),t=""+e.key),ee(e)&&(d=e.ref,ne(e,s));for(o in e)$.call(e,o)&&!re.hasOwnProperty(o)&&(i[o]=e[o]);if(r&&r.defaultProps){var u=r.defaultProps;for(o in u)i[o]===void 0&&(i[o]=u[o])}if(t||d){var l=typeof r=="function"?r.displayName||r.name||"Unknown":r;t&&te(i,l),d&&ie(i,l)}return se(r,t,d,s,n,yr.current,i)}}var X=D.ReactCurrentOwner,_r=D.ReactDebugCurrentFrame;function A(r){if(r){var e=r._owner,a=U(r.type,r._source,e?e.type:null);_r.setExtraStackFrame(a)}else _r.setExtraStackFrame(null)}var H;H=!1;function Z(r){return typeof r=="object"&&r!==null&&r.$$typeof===p}function xr(){{if(X.current){var r=_(X.current.type);if(r)return`
-
-Check the render method of \``+r+"`."}return""}}function ue(r){return""}var Sr={};function le(r){{var e=xr();if(!e){var a=typeof r=="string"?r:r.displayName||r.name;a&&(e=`
-
-Check the top-level render call using <`+a+">.")}return e}}function Tr(r,e){{if(!r._store||r._store.validated||r.key!=null)return;r._store.validated=!0;var a=le(e);if(Sr[a])return;Sr[a]=!0;var n="";r&&r._owner&&r._owner!==X.current&&(n=" It was passed a child from "+_(r._owner.type)+"."),A(r),f('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',a,n),A(null)}}function Or(r,e){{if(typeof r!="object")return;if(q(r))for(var a=0;a<r.length;a++){var n=r[a];Z(n)&&Tr(n,e)}else if(Z(r))r._store&&(r._store.validated=!0);else if(r){var s=Yr(r);if(typeof s=="function"&&s!==r.entries)for(var o=s.call(r),i;!(i=o.next()).done;)Z(i.value)&&Tr(i.value,e)}}}function ce(r){{var e=r.type;if(e==null||typeof e=="string")return;var a;if(typeof e=="function")a=e.propTypes;else if(typeof e=="object"&&(e.$$typeof===c||e.$$typeof===E))a=e.propTypes;else return;if(a){var n=_(e);Xr(a,r.props,"prop",n,r)}else if(e.PropTypes!==void 0&&!H){H=!0;var s=_(e);f("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",s||"Unknown")}typeof e.getDefaultProps=="function"&&!e.getDefaultProps.isReactClassApproved&&f("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function fe(r){{for(var e=Object.keys(r.props),a=0;a<e.length;a++){var n=e[a];if(n!=="children"&&n!=="key"){A(r),f("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",n),A(null);break}}r.ref!==null&&(A(r),f("Invalid attribute `ref` supplied to `React.Fragment`."),A(null))}}var wr={};function Pr(r,e,a,n,s,o){{var i=Ur(r);if(!i){var t="";(r===void 0||typeof r=="object"&&r!==null&&Object.keys(r).length===0)&&(t+=" 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 d=ue();d?t+=d:t+=xr();var u;r===null?u="null":q(r)?u="array":r!==void 0&&r.$$typeof===p?(u="<"+(_(r.type)||"Unknown")+" />",t=" Did you accidentally export a JSX literal instead of a component?"):u=typeof r,f("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",u,t)}var l=oe(r,e,a,s,o);if(l==null)return l;if(i){var m=e.children;if(m!==void 0)if(n)if(q(m)){for(var F=0;F<m.length;F++)Or(m[F],r);Object.freeze&&Object.freeze(m)}else f("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 Or(m,r)}if($.call(e,"key")){var C=_(r),b=Object.keys(e).filter(function(he){return he!=="key"}),Q=b.length>0?"{key: someKey, "+b.join(": ..., ")+": ...}":"{key: someKey}";if(!wr[C+Q]){var be=b.length>0?"{"+b.join(": ..., ")+": ...}":"{}";f(`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} />`,Q,C,be,C),wr[C+Q]=!0}}return r===y?fe(l):ce(l),l}}function de(r,e,a){return Pr(r,e,a,!0)}function ve(r,e,a){return Pr(r,e,a,!1)}var pe=ve,ge=de;Y.Fragment=y,Y.jsx=pe,Y.jsxs=ge}()),Y}process.env.NODE_ENV==="production"?z.exports=Cr():z.exports=jr();var kr=z.exports;const Dr=`@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");
+(function(r,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],i):(r=typeof globalThis<"u"?globalThis:r||self,i(r.Badges={},r.jsxRuntime,r.React))})(this,function(r,i,d){"use strict";const b=`@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");
+
+:root {
+  /* info (semantic blue) */
+  --starasia-ui-badges-color-info-bg: var(--starasia-ui-color-blue-50, rgba(227, 242, 253, 1));
+  --starasia-ui-badges-color-info-text: var(--starasia-ui-color-blue-700, rgba(25, 118, 210, 1));
+  --starasia-ui-badges-color-info-border: var(--starasia-ui-color-blue-300, rgba(100, 181, 246, 1));
+  /* success */
+  --starasia-ui-badges-color-success-bg: var(--starasia-ui-color-green-50, rgba(220, 246, 234, 1));
+  --starasia-ui-badges-color-success-text: var(--starasia-ui-color-green-700, rgba(32, 137, 88, 1));
+  /* danger */
+  --starasia-ui-badges-color-danger-bg: var(--starasia-ui-color-red-50, rgba(255, 240, 243, 1));
+  --starasia-ui-badges-color-danger-text: var(--starasia-ui-color-red-700, rgba(164, 19, 60, 1));
+  /* warning */
+  --starasia-ui-badges-color-warning-bg: var(--starasia-ui-color-orange-50, rgba(250, 246, 224, 1));
+  --starasia-ui-badges-color-warning-text: var(--starasia-ui-color-orange-700, rgba(152, 104, 0, 1));
+  /* dark */
+  --starasia-ui-badges-color-dark-bg: var(--starasia-ui-color-gray-100, rgba(239, 243, 248, 1));
+  --starasia-ui-badges-color-dark-text: var(--starasia-ui-color-gray-700, rgba(72, 80, 76, 1));
+  /* neutral */
+  --starasia-ui-badges-color-neutral-border: var(--starasia-ui-color-gray-50, rgba(249, 250, 251, 1));
+  --starasia-ui-badges-color-neutral-bg: var(--starasia-ui-color-purple-50, rgba(233, 222, 245, 1));
+  --starasia-ui-badges-color-neutral-text: var(--starasia-ui-color-purple-500, rgba(126, 57, 197, 1));
+}
 
 .starasia-badges {
   display: flex;
@@ -86,62 +80,62 @@ React keys must be passed directly to JSX without using spread:
 
 /* STYLES FOR BADGE VARIANT */
 .starasia-badges-info {
-  border-color: var(--starasia-ui-color-blue-50, #e3f2fd);
-  background: var(--starasia-ui-color-blue-50, #e3f2fd);
-  color: var(--starasia-ui-color-blue-700, #1976d2);
+  border-color: var(--starasia-ui-badges-color-info-bg);
+  background: var(--starasia-ui-badges-color-info-bg);
+  color: var(--starasia-ui-badges-color-info-text);
 }
 
 .starasia-badges-info.starasia-badges-border {
-  border-color: var(--starasia-ui-color-blue-700, #64b5f6);
+  border-color: var(--starasia-ui-badges-color-info-border);
 }
 
 .starasia-badges-success {
-  border-color: var(--starasia-ui-color-green-50, #dcf6ea);
-  background: var(--starasia-ui-color-green-50, #dcf6ea);
-  color: var(--starasia-ui-color-green-700, #208958);
+  border-color: var(--starasia-ui-badges-color-success-bg);
+  background: var(--starasia-ui-badges-color-success-bg);
+  color: var(--starasia-ui-badges-color-success-text);
 }
 
 .starasia-badges-success.starasia-badges-border {
-  border-color: var(--starasia-ui-color-green-700, #208958);
+  border-color: var(--starasia-ui-badges-color-success-text);
 }
 
 .starasia-badges-danger {
-  border-color: var(--starasia-ui-color-red-50, #fff0f3);
-  background: var(--starasia-ui-color-red-50, #fff0f3);
-  color: var(--starasia-ui-color-red-700, #a4133c);
+  border-color: var(--starasia-ui-badges-color-danger-bg);
+  background: var(--starasia-ui-badges-color-danger-bg);
+  color: var(--starasia-ui-badges-color-danger-text);
 }
 
 .starasia-badges-danger.starasia-badges-border {
-  border-color: var(--starasia-ui-color-red-700, #a4133c);
+  border-color: var(--starasia-ui-badges-color-danger-text);
 }
 
 .starasia-badges-warning {
-  border-color: var(--starasia-ui-color-orange-50, #faf6e0);
-  background: var(--starasia-ui-color-orange-50, #faf6e0);
-  color: var(--starasia-ui-color-orange-700, #986800);
+  border-color: var(--starasia-ui-badges-color-warning-bg);
+  background: var(--starasia-ui-badges-color-warning-bg);
+  color: var(--starasia-ui-badges-color-warning-text);
 }
 
 .starasia-badges-warning.starasia-badges-border {
-  border-color: var(--starasia-ui-color-orange-700, #986800);
+  border-color: var(--starasia-ui-badges-color-warning-text);
 }
 
 .starasia-badges-dark {
-  border-color: var(--starasia-ui-color-gray-100, #eff3f8);
-  background: var(--starasia-ui-color-gray-100, #eff3f8);
-  color: var(--starasia-ui-color-gray-700, #48504c);
+  border-color: var(--starasia-ui-badges-color-dark-bg);
+  background: var(--starasia-ui-badges-color-dark-bg);
+  color: var(--starasia-ui-badges-color-dark-text);
 }
 
 .starasia-badges-dark.starasia-badges-border {
-  border-color: var(--starasia-ui-color-gray-700, #48504c);
+  border-color: var(--starasia-ui-badges-color-dark-text);
 }
 
 .starasia-badges-neutral {
-  border-color: var(--starasia-ui-color-gray-50, #f9fafb);
-  background: var(--starasia-ui-color-purple-50, #e9def5);
-  color: var(--starasia-ui-color-purple-500, #7e39c5);
+  border-color: var(--starasia-ui-badges-color-neutral-border);
+  background: var(--starasia-ui-badges-color-neutral-bg);
+  color: var(--starasia-ui-badges-color-neutral-text);
 }
 
 .starasia-badges-neutral.starasia-badges-border {
-  border-color: var(--starasia-ui-color-purple-500, #7e39c5);
+  border-color: var(--starasia-ui-badges-color-neutral-text);
 }
-`,ar="starasia-badges-styles";(v=>{if(!document.getElementById(ar)){const p=document.createElement("style");p.id=ar,p.textContent=v,document.head.appendChild(p)}})(Dr);const L={xs:14,sm:16,md:18,lg:18},Ar=({size:v="md",variant:p="info",text:S,LeftIcon:y,RightIcon:g,border:j,corners:T="rounded"})=>kr.jsxs("div",{className:Fr(v,p,j,T),children:[y?R.cloneElement(y,{width:L[v],height:L[v],style:{color:"inherit"}}):null,S,g?R.cloneElement(g,{width:L[v],height:L[v],style:{color:"inherit"}}):null]}),Fr=(v,p,S,y)=>{let g=["starasia-badges"];return v&&g.push(`starasia-badges-${v}`),p&&g.push(`starasia-badges-${p}`),S&&g.push("starasia-badges-border"),y==="rounded"?g.push("starasia-badges-rounded"):g.push("starasia-badges-circular"),g.join(" ")};x.Badges=Ar,Object.defineProperty(x,Symbol.toStringTag,{value:"Module"})});
+`,g="starasia-badges-styles";(a=>{if(!document.getElementById(g)){const n=document.createElement("style");n.id=g,n.textContent=a,document.head.appendChild(n)}})(b);const e={xs:14,sm:16,md:18,lg:18},u=({size:a="md",variant:n="info",text:t,LeftIcon:o,RightIcon:s,border:l,corners:p="rounded"})=>i.jsxs("div",{className:c(a,n,l,p),children:[o?d.cloneElement(o,{width:e[a],height:e[a],style:{color:"inherit"}}):null,t,s?d.cloneElement(s,{width:e[a],height:e[a],style:{color:"inherit"}}):null]}),c=(a,n,t,o)=>{let s=["starasia-badges"];return a&&s.push(`starasia-badges-${a}`),n&&s.push(`starasia-badges-${n}`),t&&s.push("starasia-badges-border"),o==="rounded"?s.push("starasia-badges-rounded"):s.push("starasia-badges-circular"),s.join(" ")};r.Badges=u,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@starasia/badges",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Badges component for starasia UI",
   "author": "Prawito Hudoro",
   "main": "dist/badges.umd.js",