@starasia/toast 1.0.1 → 1.0.3

package/dist/toast.es.js

@@ -1,648 +1,7 @@
-import z, { useState as Cr, useRef as pe, useEffect as Sr } from "react";
-import me from "react-dom";
-var nr = { exports: {} }, Y = {};
-/**
- * @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 jr;
-function be() {
-  if (jr)
-    return Y;
-  jr = 1;
-  var l = z, a = Symbol.for("react.element"), b = Symbol.for("react.fragment"), y = Object.prototype.hasOwnProperty, v = l.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, w = { key: !0, ref: !0, __self: !0, __source: !0 };
-  function T(E, d, C) {
-    var p, k = {}, j = null, x = null;
-    C !== void 0 && (j = "" + C), d.key !== void 0 && (j = "" + d.key), d.ref !== void 0 && (x = d.ref);
-    for (p in d)
-      y.call(d, p) && !w.hasOwnProperty(p) && (k[p] = d[p]);
-    if (E && E.defaultProps)
-      for (p in d = E.defaultProps, d)
-        k[p] === void 0 && (k[p] = d[p]);
-    return { $$typeof: a, type: E, key: j, ref: x, props: k, _owner: v.current };
-  }
-  return Y.Fragment = b, Y.jsx = T, Y.jsxs = T, Y;
-}
-var N = {};
-/**
- * @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 he() {
-  return Or || (Or = 1, process.env.NODE_ENV !== "production" && function() {
-    var l = z, a = Symbol.for("react.element"), b = Symbol.for("react.portal"), y = Symbol.for("react.fragment"), v = Symbol.for("react.strict_mode"), w = Symbol.for("react.profiler"), T = Symbol.for("react.provider"), E = Symbol.for("react.context"), d = Symbol.for("react.forward_ref"), C = Symbol.for("react.suspense"), p = Symbol.for("react.suspense_list"), k = Symbol.for("react.memo"), j = Symbol.for("react.lazy"), x = Symbol.for("react.offscreen"), I = Symbol.iterator, Ar = "@@iterator";
-    function Dr(r) {
-      if (r === null || typeof r != "object")
-        return null;
-      var e = I && r[I] || r[Ar];
-      return typeof e == "function" ? e : null;
-    }
-    var D = l.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-    function m(r) {
-      {
-        for (var e = arguments.length, n = new Array(e > 1 ? e - 1 : 0), t = 1; t < e; t++)
-          n[t - 1] = arguments[t];
-        Fr("error", r, n);
-      }
-    }
-    function Fr(r, e, n) {
-      {
-        var t = D.ReactDebugCurrentFrame, s = t.getStackAddendum();
-        s !== "" && (e += "%s", n = n.concat([s]));
-        var u = n.map(function(i) {
-          return String(i);
-        });
-        u.unshift("Warning: " + e), Function.prototype.apply.call(console[r], console, u);
-      }
-    }
-    var Lr = !1, Ir = !1, $r = !1, Wr = !1, Mr = !1, tr;
-    tr = Symbol.for("react.module.reference");
-    function Yr(r) {
-      return !!(typeof r == "string" || typeof r == "function" || r === y || r === w || Mr || r === v || r === C || r === p || Wr || r === x || Lr || Ir || $r || typeof r == "object" && r !== null && (r.$$typeof === j || r.$$typeof === k || r.$$typeof === T || r.$$typeof === E || r.$$typeof === d || // 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 === tr || r.getModuleId !== void 0));
-    }
-    function Nr(r, e, n) {
-      var t = r.displayName;
-      if (t)
-        return t;
-      var s = e.displayName || e.name || "";
-      return s !== "" ? n + "(" + s + ")" : n;
-    }
-    function ar(r) {
-      return r.displayName || "Context";
-    }
-    function S(r) {
-      if (r == null)
-        return null;
-      if (typeof r.tag == "number" && m("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 b:
-          return "Portal";
-        case w:
-          return "Profiler";
-        case v:
-          return "StrictMode";
-        case C:
-          return "Suspense";
-        case p:
-          return "SuspenseList";
-      }
-      if (typeof r == "object")
-        switch (r.$$typeof) {
-          case E:
-            var e = r;
-            return ar(e) + ".Consumer";
-          case T:
-            var n = r;
-            return ar(n._context) + ".Provider";
-          case d:
-            return Nr(r, r.render, "ForwardRef");
-          case k:
-            var t = r.displayName || null;
-            return t !== null ? t : S(r.type) || "Memo";
-          case j: {
-            var s = r, u = s._payload, i = s._init;
-            try {
-              return S(i(u));
-            } catch {
-              return null;
-            }
-          }
-        }
-      return null;
-    }
-    var P = Object.assign, $ = 0, or, ir, sr, ur, lr, cr, fr;
-    function dr() {
-    }
-    dr.__reactDisabledLog = !0;
-    function Ur() {
-      {
-        if ($ === 0) {
-          or = console.log, ir = console.info, sr = console.warn, ur = console.error, lr = console.group, cr = console.groupCollapsed, fr = console.groupEnd;
-          var r = {
-            configurable: !0,
-            enumerable: !0,
-            value: dr,
-            writable: !0
-          };
-          Object.defineProperties(console, {
-            info: r,
-            log: r,
-            warn: r,
-            error: r,
-            group: r,
-            groupCollapsed: r,
-            groupEnd: r
-          });
-        }
-        $++;
-      }
-    }
-    function Br() {
-      {
-        if ($--, $ === 0) {
-          var r = {
-            configurable: !0,
-            enumerable: !0,
-            writable: !0
-          };
-          Object.defineProperties(console, {
-            log: P({}, r, {
-              value: or
-            }),
-            info: P({}, r, {
-              value: ir
-            }),
-            warn: P({}, r, {
-              value: sr
-            }),
-            error: P({}, r, {
-              value: ur
-            }),
-            group: P({}, r, {
-              value: lr
-            }),
-            groupCollapsed: P({}, r, {
-              value: cr
-            }),
-            groupEnd: P({}, r, {
-              value: fr
-            })
-          });
-        }
-        $ < 0 && m("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
-      }
-    }
-    var G = D.ReactCurrentDispatcher, J;
-    function U(r, e, n) {
-      {
-        if (J === void 0)
-          try {
-            throw Error();
-          } catch (s) {
-            var t = s.stack.trim().match(/\n( *(at )?)/);
-            J = t && t[1] || "";
-          }
-        return `
-` + J + r;
-      }
-    }
-    var q = !1, B;
-    {
-      var Vr = typeof WeakMap == "function" ? WeakMap : Map;
-      B = new Vr();
-    }
-    function vr(r, e) {
-      if (!r || q)
-        return "";
-      {
-        var n = B.get(r);
-        if (n !== void 0)
-          return n;
-      }
-      var t;
-      q = !0;
-      var s = Error.prepareStackTrace;
-      Error.prepareStackTrace = void 0;
-      var u;
-      u = G.current, G.current = null, Ur();
-      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 (R) {
-              t = R;
-            }
-            Reflect.construct(r, [], i);
-          } else {
-            try {
-              i.call();
-            } catch (R) {
-              t = R;
-            }
-            r.call(i.prototype);
-          }
-        } else {
-          try {
-            throw Error();
-          } catch (R) {
-            t = R;
-          }
-          r();
-        }
-      } catch (R) {
-        if (R && t && typeof R.stack == "string") {
-          for (var o = R.stack.split(`
-`), h = t.stack.split(`
-`), c = o.length - 1, f = h.length - 1; c >= 1 && f >= 0 && o[c] !== h[f]; )
-            f--;
-          for (; c >= 1 && f >= 0; c--, f--)
-            if (o[c] !== h[f]) {
-              if (c !== 1 || f !== 1)
-                do
-                  if (c--, f--, f < 0 || o[c] !== h[f]) {
-                    var _ = `
-` + o[c].replace(" at new ", " at ");
-                    return r.displayName && _.includes("<anonymous>") && (_ = _.replace("<anonymous>", r.displayName)), typeof r == "function" && B.set(r, _), _;
-                  }
-                while (c >= 1 && f >= 0);
-              break;
-            }
-        }
-      } finally {
-        q = !1, G.current = u, Br(), Error.prepareStackTrace = s;
-      }
-      var L = r ? r.displayName || r.name : "", A = L ? U(L) : "";
-      return typeof r == "function" && B.set(r, A), A;
-    }
-    function Xr(r, e, n) {
-      return vr(r, !1);
-    }
-    function zr(r) {
-      var e = r.prototype;
-      return !!(e && e.isReactComponent);
-    }
-    function V(r, e, n) {
-      if (r == null)
-        return "";
-      if (typeof r == "function")
-        return vr(r, zr(r));
-      if (typeof r == "string")
-        return U(r);
-      switch (r) {
-        case C:
-          return U("Suspense");
-        case p:
-          return U("SuspenseList");
-      }
-      if (typeof r == "object")
-        switch (r.$$typeof) {
-          case d:
-            return Xr(r.render);
-          case k:
-            return V(r.type, e, n);
-          case j: {
-            var t = r, s = t._payload, u = t._init;
-            try {
-              return V(u(s), e, n);
-            } catch {
-            }
-          }
-        }
-      return "";
-    }
-    var W = Object.prototype.hasOwnProperty, gr = {}, pr = D.ReactDebugCurrentFrame;
-    function X(r) {
-      if (r) {
-        var e = r._owner, n = V(r.type, r._source, e ? e.type : null);
-        pr.setExtraStackFrame(n);
-      } else
-        pr.setExtraStackFrame(null);
-    }
-    function Gr(r, e, n, t, s) {
-      {
-        var u = Function.call.bind(W);
-        for (var i in r)
-          if (u(r, i)) {
-            var o = void 0;
-            try {
-              if (typeof r[i] != "function") {
-                var h = Error((t || "React class") + ": " + n + " 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 h.name = "Invariant Violation", h;
-              }
-              o = r[i](e, i, t, n, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
-            } catch (c) {
-              o = c;
-            }
-            o && !(o instanceof Error) && (X(s), m("%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).", t || "React class", n, i, typeof o), X(null)), o instanceof Error && !(o.message in gr) && (gr[o.message] = !0, X(s), m("Failed %s type: %s", n, o.message), X(null));
-          }
-      }
-    }
-    var Jr = Array.isArray;
-    function K(r) {
-      return Jr(r);
-    }
-    function qr(r) {
-      {
-        var e = typeof Symbol == "function" && Symbol.toStringTag, n = e && r[Symbol.toStringTag] || r.constructor.name || "Object";
-        return n;
-      }
-    }
-    function Kr(r) {
-      try {
-        return mr(r), !1;
-      } catch {
-        return !0;
-      }
-    }
-    function mr(r) {
-      return "" + r;
-    }
-    function br(r) {
-      if (Kr(r))
-        return m("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", qr(r)), mr(r);
-    }
-    var M = D.ReactCurrentOwner, Hr = {
-      key: !0,
-      ref: !0,
-      __self: !0,
-      __source: !0
-    }, hr, yr, H;
-    H = {};
-    function Zr(r) {
-      if (W.call(r, "ref")) {
-        var e = Object.getOwnPropertyDescriptor(r, "ref").get;
-        if (e && e.isReactWarning)
-          return !1;
-      }
-      return r.ref !== void 0;
-    }
-    function Qr(r) {
-      if (W.call(r, "key")) {
-        var e = Object.getOwnPropertyDescriptor(r, "key").get;
-        if (e && e.isReactWarning)
-          return !1;
-      }
-      return r.key !== void 0;
-    }
-    function re(r, e) {
-      if (typeof r.ref == "string" && M.current && e && M.current.stateNode !== e) {
-        var n = S(M.current.type);
-        H[n] || (m('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', S(M.current.type), r.ref), H[n] = !0);
-      }
-    }
-    function ee(r, e) {
-      {
-        var n = function() {
-          hr || (hr = !0, m("%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));
-        };
-        n.isReactWarning = !0, Object.defineProperty(r, "key", {
-          get: n,
-          configurable: !0
-        });
-      }
-    }
-    function ne(r, e) {
-      {
-        var n = function() {
-          yr || (yr = !0, m("%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));
-        };
-        n.isReactWarning = !0, Object.defineProperty(r, "ref", {
-          get: n,
-          configurable: !0
-        });
-      }
-    }
-    var te = function(r, e, n, t, s, u, i) {
-      var o = {
-        // This tag allows us to uniquely identify this as a React Element
-        $$typeof: a,
-        // Built-in properties that belong on the element
-        type: r,
-        key: e,
-        ref: n,
-        props: i,
-        // Record the component responsible for creating this element.
-        _owner: u
-      };
-      return o._store = {}, Object.defineProperty(o._store, "validated", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: !1
-      }), Object.defineProperty(o, "_self", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !1,
-        value: t
-      }), Object.defineProperty(o, "_source", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !1,
-        value: s
-      }), Object.freeze && (Object.freeze(o.props), Object.freeze(o)), o;
-    };
-    function ae(r, e, n, t, s) {
-      {
-        var u, i = {}, o = null, h = null;
-        n !== void 0 && (br(n), o = "" + n), Qr(e) && (br(e.key), o = "" + e.key), Zr(e) && (h = e.ref, re(e, s));
-        for (u in e)
-          W.call(e, u) && !Hr.hasOwnProperty(u) && (i[u] = e[u]);
-        if (r && r.defaultProps) {
-          var c = r.defaultProps;
-          for (u in c)
-            i[u] === void 0 && (i[u] = c[u]);
-        }
-        if (o || h) {
-          var f = typeof r == "function" ? r.displayName || r.name || "Unknown" : r;
-          o && ee(i, f), h && ne(i, f);
-        }
-        return te(r, o, h, s, t, M.current, i);
-      }
-    }
-    var Z = D.ReactCurrentOwner, Er = D.ReactDebugCurrentFrame;
-    function F(r) {
-      if (r) {
-        var e = r._owner, n = V(r.type, r._source, e ? e.type : null);
-        Er.setExtraStackFrame(n);
-      } else
-        Er.setExtraStackFrame(null);
-    }
-    var Q;
-    Q = !1;
-    function rr(r) {
-      return typeof r == "object" && r !== null && r.$$typeof === a;
-    }
-    function Rr() {
-      {
-        if (Z.current) {
-          var r = S(Z.current.type);
-          if (r)
-            return `
-
-Check the render method of \`` + r + "`.";
-        }
-        return "";
-      }
-    }
-    function oe(r) {
-      {
-        if (r !== void 0) {
-          var e = r.fileName.replace(/^.*[\\\/]/, ""), n = r.lineNumber;
-          return `
-
-Check your code at ` + e + ":" + n + ".";
-        }
-        return "";
-      }
-    }
-    var wr = {};
-    function ie(r) {
-      {
-        var e = Rr();
-        if (!e) {
-          var n = typeof r == "string" ? r : r.displayName || r.name;
-          n && (e = `
-
-Check the top-level render call using <` + n + ">.");
-        }
-        return e;
-      }
-    }
-    function _r(r, e) {
-      {
-        if (!r._store || r._store.validated || r.key != null)
-          return;
-        r._store.validated = !0;
-        var n = ie(e);
-        if (wr[n])
-          return;
-        wr[n] = !0;
-        var t = "";
-        r && r._owner && r._owner !== Z.current && (t = " It was passed a child from " + S(r._owner.type) + "."), F(r), m('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', n, t), F(null);
-      }
-    }
-    function kr(r, e) {
-      {
-        if (typeof r != "object")
-          return;
-        if (K(r))
-          for (var n = 0; n < r.length; n++) {
-            var t = r[n];
-            rr(t) && _r(t, e);
-          }
-        else if (rr(r))
-          r._store && (r._store.validated = !0);
-        else if (r) {
-          var s = Dr(r);
-          if (typeof s == "function" && s !== r.entries)
-            for (var u = s.call(r), i; !(i = u.next()).done; )
-              rr(i.value) && _r(i.value, e);
-        }
-      }
-    }
-    function se(r) {
-      {
-        var e = r.type;
-        if (e == null || typeof e == "string")
-          return;
-        var n;
-        if (typeof e == "function")
-          n = e.propTypes;
-        else if (typeof e == "object" && (e.$$typeof === d || // Note: Memo only checks outer props here.
-        // Inner props are checked in the reconciler.
-        e.$$typeof === k))
-          n = e.propTypes;
-        else
-          return;
-        if (n) {
-          var t = S(e);
-          Gr(n, r.props, "prop", t, r);
-        } else if (e.PropTypes !== void 0 && !Q) {
-          Q = !0;
-          var s = S(e);
-          m("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", s || "Unknown");
-        }
-        typeof e.getDefaultProps == "function" && !e.getDefaultProps.isReactClassApproved && m("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
-      }
-    }
-    function ue(r) {
-      {
-        for (var e = Object.keys(r.props), n = 0; n < e.length; n++) {
-          var t = e[n];
-          if (t !== "children" && t !== "key") {
-            F(r), m("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", t), F(null);
-            break;
-          }
-        }
-        r.ref !== null && (F(r), m("Invalid attribute `ref` supplied to `React.Fragment`."), F(null));
-      }
-    }
-    var xr = {};
-    function Tr(r, e, n, t, s, u) {
-      {
-        var i = Yr(r);
-        if (!i) {
-          var o = "";
-          (r === void 0 || typeof r == "object" && r !== null && Object.keys(r).length === 0) && (o += " 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 h = oe(s);
-          h ? o += h : o += Rr();
-          var c;
-          r === null ? c = "null" : K(r) ? c = "array" : r !== void 0 && r.$$typeof === a ? (c = "<" + (S(r.type) || "Unknown") + " />", o = " Did you accidentally export a JSX literal instead of a component?") : c = typeof r, m("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", c, o);
-        }
-        var f = ae(r, e, n, s, u);
-        if (f == null)
-          return f;
-        if (i) {
-          var _ = e.children;
-          if (_ !== void 0)
-            if (t)
-              if (K(_)) {
-                for (var L = 0; L < _.length; L++)
-                  kr(_[L], r);
-                Object.freeze && Object.freeze(_);
-              } else
-                m("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
-              kr(_, r);
-        }
-        if (W.call(e, "key")) {
-          var A = S(r), R = Object.keys(e).filter(function(ge) {
-            return ge !== "key";
-          }), er = R.length > 0 ? "{key: someKey, " + R.join(": ..., ") + ": ...}" : "{key: someKey}";
-          if (!xr[A + er]) {
-            var ve = R.length > 0 ? "{" + R.join(": ..., ") + ": ...}" : "{}";
-            m(`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} />`, er, A, ve, A), xr[A + er] = !0;
-          }
-        }
-        return r === y ? ue(f) : se(f), f;
-      }
-    }
-    function le(r, e, n) {
-      return Tr(r, e, n, !0);
-    }
-    function ce(r, e, n) {
-      return Tr(r, e, n, !1);
-    }
-    var fe = ce, de = le;
-    N.Fragment = y, N.jsx = fe, N.jsxs = de;
-  }()), N;
-}
-process.env.NODE_ENV === "production" ? nr.exports = be() : nr.exports = he();
-var g = nr.exports;
-const ye = `@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
+import { jsx as t, jsxs as k } from "react/jsx-runtime";
+import f, { useState as p, useRef as x, useEffect as h } from "react";
+import C from "react-dom";
+const L = `@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
 
 * {
   margin: 0;
@@ -652,61 +11,63 @@ const ye = `@import url("https://fonts.googleapis.com/css2?family=Poppins&displa
 }
 
 :root {
+  /* white */
+  --starasia-ui-toast-color-white: var(--starasia-ui-color-gray-50, rgba(255, 254, 255, 1));
+
   /* color solid default */
-  --starasia-ui-solid-background-default: #111827;
-  --starasia-ui-solid-color-default: #fff;
-  --starasia-ui-solid-border-default: #e5e7eb;
+  --starasia-ui-solid-background-default: rgba(17, 24, 39, 1);
+  --starasia-ui-solid-color-default: rgba(255, 255, 255, 1);
+  --starasia-ui-solid-border-default: rgba(229, 231, 235, 1);
 
   /* color outline default */
-  --starasia-ui-outline-background-default: #f9fafb;
-  --starasia-ui-outline-color-default: #111827;
-  --starasia-ui-outline-border-default: #e5e7eb;
-  --starasia-ui-outline-progress-default: #181a19;
+  --starasia-ui-outline-background-default: rgba(249, 250, 251, 1);
+  --starasia-ui-outline-color-default: rgba(17, 24, 39, 1);
+  --starasia-ui-outline-border-default: rgba(229, 231, 235, 1);
+  --starasia-ui-outline-progress-default: rgba(24, 26, 25, 1);
 
   /* color outline red */
-  --starasia-ui-outline-background-danger: #fef2f2;
-  --starasia-ui-outline-color-danger: #dc2626;
-  --starasia-ui-outline-border-danger: #fecaca;
-  --starasia-ui-outline-progress-danger: #181a19;
-  --starasia-ui-outline-progress-danger: #c9184a;
+  --starasia-ui-outline-background-danger: rgba(254, 242, 242, 1);
+  --starasia-ui-outline-color-danger: rgba(220, 38, 38, 1);
+  --starasia-ui-outline-border-danger: rgba(254, 202, 202, 1);
+  --starasia-ui-outline-progress-danger: rgba(201, 24, 74, 1);
 
   /* color solid red */
-  --starasia-ui-solid-background-danger: #c9184a;
-  --starasia-ui-solid-color-danger: #fff0f3;
-  --starasia-ui-solid-border-danger: #c9184a;
+  --starasia-ui-solid-background-danger: rgba(201, 24, 74, 1);
+  --starasia-ui-solid-color-danger: rgba(255, 240, 243, 1);
+  --starasia-ui-solid-border-danger: rgba(201, 24, 74, 1);
 
   /* color outline success */
-  --starasia-ui-outline-background-success: #dcf6ea;
-  --starasia-ui-outline-color-success: #28ac6e;
-  --starasia-ui-outline-border-success: #97e6c1;
-  --starasia-ui-outline-progress-success: #28ac6e;
+  --starasia-ui-outline-background-success: rgba(220, 246, 234, 1);
+  --starasia-ui-outline-color-success: rgba(40, 172, 110, 1);
+  --starasia-ui-outline-border-success: rgba(151, 230, 193, 1);
+  --starasia-ui-outline-progress-success: rgba(40, 172, 110, 1);
 
   /* color solid success */
-  --starasia-ui-solid-background-success: #28ac6e;
-  --starasia-ui-solid-color-success: #dcf6ea;
-  --starasia-ui-solid-border-success: #28ac6e;
+  --starasia-ui-solid-background-success: rgba(40, 172, 110, 1);
+  --starasia-ui-solid-color-success: rgba(220, 246, 234, 1);
+  --starasia-ui-solid-border-success: rgba(40, 172, 110, 1);
 
-  /* color outline info */
-  --starasia-ui-outline-background-info: #e3f2fd;
-  --starasia-ui-outline-color-info: #1976d2;
-  --starasia-ui-outline-border-info: #64b5f6;
-  --starasia-ui-outline-progress-info: #1976d2;
+  /* color outline info (semantic blue) */
+  --starasia-ui-outline-background-info: rgba(227, 242, 253, 1);
+  --starasia-ui-outline-color-info: rgba(25, 118, 210, 1);
+  --starasia-ui-outline-border-info: rgba(100, 181, 246, 1);
+  --starasia-ui-outline-progress-info: rgba(25, 118, 210, 1);
 
-  /* color solid info */
-  --starasia-ui-solid-background-info: #1976d2;
-  --starasia-ui-solid-color-info: #e3f2fd;
-  --starasia-ui-solid-border-info: #1976d2;
+  /* color solid info (semantic blue) */
+  --starasia-ui-solid-background-info: rgba(25, 118, 210, 1);
+  --starasia-ui-solid-color-info: rgba(227, 242, 253, 1);
+  --starasia-ui-solid-border-info: rgba(25, 118, 210, 1);
 
   /* color outline warning */
-  --starasia-ui-outline-background-warning: #fdf3e4;
-  --starasia-ui-outline-color-warning: #181a19;
-  --starasia-ui-outline-border-warning: #f4c583;
-  --starasia-ui-outline-progress-warning: #ed9f30;
+  --starasia-ui-outline-background-warning: rgba(253, 243, 228, 1);
+  --starasia-ui-outline-color-warning: rgba(24, 26, 25, 1);
+  --starasia-ui-outline-border-warning: rgba(244, 197, 131, 1);
+  --starasia-ui-outline-progress-warning: rgba(237, 159, 48, 1);
 
   /* color solid warning */
-  --starasia-ui-solid-background-warning: #ed9f30;
-  --starasia-ui-solid-color-warning: #fffeff;
-  --starasia-ui-solid-border-warning: #ed9f30;
+  --starasia-ui-solid-background-warning: rgba(237, 159, 48, 1);
+  --starasia-ui-solid-color-warning: var(--starasia-ui-toast-color-white);
+  --starasia-ui-solid-border-warning: rgba(237, 159, 48, 1);
 
   /* height */
   --starasia-ui-h-0-5: 0.125rem; /* 2px */
@@ -942,123 +303,123 @@ const ye = `@import url("https://fonts.googleapis.com/css2?family=Poppins&displa
   }
 }
 `;
-let Ee = 1;
-class Re {
+let E = 1;
+class T {
   constructor() {
     this.subscribe = (a) => (this.subscribers.push(a), () => {
-      const b = this.subscribers.indexOf(a);
-      this.subscribers.splice(b, 1);
+      const s = this.subscribers.indexOf(a);
+      this.subscribers.splice(s, 1);
     }), this.publish = (a) => {
-      this.subscribers.forEach((b) => b(a));
+      this.subscribers.forEach((s) => s(a));
     }, this.addToast = (a) => {
       this.publish(a), this.toasts = [...this.toasts, a];
     }, this.create = (a) => {
-      const { message: b, type: y } = a, v = Ee++;
-      return this.addToast({ title: b, type: y, id: v }), v;
-    }, this.dismiss = (a) => (this.subscribers.forEach((b) => b({ id: a, dismiss: !0 })), a), this.danger = (a) => this.create({ message: a, type: "danger" }), this.warning = (a) => this.create({ message: a, type: "warning" }), this.success = (a) => this.create({ type: "success", message: a }), this.info = (a) => this.create({ type: "info", message: a }), this.default = (a) => this.create({ type: "default", message: a }), this.subscribers = [], this.toasts = [];
+      const { message: s, type: i } = a, r = E++;
+      return this.addToast({ title: s, type: i, id: r }), r;
+    }, this.dismiss = (a) => (this.subscribers.forEach((s) => s({ id: a, dismiss: !0 })), a), this.danger = (a) => this.create({ message: a, type: "danger" }), this.warning = (a) => this.create({ message: a, type: "warning" }), this.success = (a) => this.create({ type: "success", message: a }), this.info = (a) => this.create({ type: "info", message: a }), this.default = (a) => this.create({ type: "default", message: a }), this.subscribers = [], this.toasts = [];
   }
 }
-const O = new Re(), je = Object.assign({
-  success: O.success,
-  info: O.info,
-  default: O.default,
-  danger: O.danger,
-  warning: O.warning
-}), Pr = "starasia-toast-styles", we = (l) => {
-  if (!document.getElementById(Pr)) {
+const o = new T(), D = Object.assign({
+  success: o.success,
+  info: o.info,
+  default: o.default,
+  danger: o.danger,
+  warning: o.warning
+}), v = "starasia-toast-styles", S = (n) => {
+  if (!document.getElementById(v)) {
     const a = document.createElement("style");
-    a.id = Pr, a.textContent = l, document.head.appendChild(a);
+    a.id = v, a.textContent = n, document.head.appendChild(a);
   }
 };
-we(ye);
-const Oe = ({
-  type: l = "outline",
+S(L);
+const N = ({
+  type: n = "outline",
   direction: a = "bottom-right"
 }) => {
-  const [b, y] = z.useState([]);
-  return z.useEffect(() => O.subscribe((v) => {
-    if (v.dismiss) {
-      y((w) => w.filter((T) => T.id !== v.id));
+  const [s, i] = f.useState([]);
+  return f.useEffect(() => o.subscribe((r) => {
+    if (r.dismiss) {
+      i((e) => e.filter((c) => c.id !== r.id));
       return;
     }
     setTimeout(() => {
-      me.flushSync(() => {
-        y((w) => [v, ...w]);
+      C.flushSync(() => {
+        i((e) => [r, ...e]);
       });
     });
-  }), []), /* @__PURE__ */ g.jsx(
+  }), []), /* @__PURE__ */ t(
     "div",
     {
       className: `starasia-toast-container starasia-toast-container-${a}`,
-      children: b.map((v) => /* @__PURE__ */ g.jsx(
-        _e,
+      children: s.map((r) => /* @__PURE__ */ t(
+        R,
         {
-          data: v,
-          type: l,
+          data: r,
+          type: n,
           direction: a
         },
-        v.id
+        r.id
       ))
     }
   );
-}, _e = ({ data: l, type: a = "solid", direction: b }) => {
-  const [y, v] = Cr(null), [w, T] = Cr(!1), E = pe(null), d = () => {
-    const x = setTimeout(() => {
-      p();
+}, R = ({ data: n, type: a = "solid", direction: s }) => {
+  const [i, r] = p(null), [e, c] = p(!1), l = x(null), g = () => {
+    const u = setTimeout(() => {
+      m();
     }, 5e3);
-    v(x);
-  }, C = () => {
-    y && (clearTimeout(y), v(null));
-  }, p = () => {
-    O.dismiss(l.id);
+    r(u);
+  }, d = () => {
+    i && (clearTimeout(i), r(null));
+  }, m = () => {
+    o.dismiss(n.id);
   };
-  Sr(() => (w ? C() : d(), () => {
-    C();
-  }), [w]), Sr(() => {
-    const x = E.current, I = () => {
-      p();
+  h(() => (e ? d() : g(), () => {
+    d();
+  }), [e]), h(() => {
+    const u = l.current, b = () => {
+      m();
     };
-    return x && x.addEventListener("animationend", I), () => {
-      x && x.removeEventListener("animationend", I);
+    return u && u.addEventListener("animationend", b), () => {
+      u && u.removeEventListener("animationend", b);
     };
   }, []);
-  const k = () => {
-    T(!0), C(), E.current && (E.current.style.animationPlayState = "paused");
-  }, j = () => {
-    T(!1), d(), E.current && (E.current.style.animationPlayState = "running");
+  const y = () => {
+    c(!0), d(), l.current && (l.current.style.animationPlayState = "paused");
+  }, w = () => {
+    c(!1), g(), l.current && (l.current.style.animationPlayState = "running");
   };
-  return /* @__PURE__ */ g.jsxs(
+  return /* @__PURE__ */ k(
     "div",
     {
-      className: `starasia-toast-item-container starasia-toast-item-container-${a}-${l.type} starasia-toast-item-container-animation-${b}`,
-      onMouseEnter: k,
-      onMouseLeave: j,
+      className: `starasia-toast-item-container starasia-toast-item-container-${a}-${n.type} starasia-toast-item-container-animation-${s}`,
+      onMouseEnter: y,
+      onMouseLeave: w,
       children: [
-        /* @__PURE__ */ g.jsx("div", { style: { display: "flex" }, children: l.type === "success" ? /* @__PURE__ */ g.jsx(xe, { style: { color: "inherit" } }) : /* @__PURE__ */ g.jsx(ke, { style: { color: "inherit" } }) }),
-        /* @__PURE__ */ g.jsx("div", { style: { flex: 1 }, children: l.title }),
-        /* @__PURE__ */ g.jsx(
+        /* @__PURE__ */ t("div", { style: { display: "flex" }, children: n.type === "success" ? /* @__PURE__ */ t(M, { style: { color: "inherit" } }) : /* @__PURE__ */ t(I, { style: { color: "inherit" } }) }),
+        /* @__PURE__ */ t("div", { style: { flex: 1 }, children: n.title }),
+        /* @__PURE__ */ t(
           "div",
           {
             style: { display: "flex", cursor: "pointer" },
-            onClick: () => O.dismiss(l.id),
-            children: /* @__PURE__ */ g.jsx(Te, { style: { color: "inherit" } })
+            onClick: () => o.dismiss(n.id),
+            children: /* @__PURE__ */ t(A, { style: { color: "inherit" } })
           }
         ),
-        a === "outline" ? /* @__PURE__ */ g.jsx(
+        a === "outline" ? /* @__PURE__ */ t(
           "div",
           {
-            ref: E,
-            className: `starasia-toast-item-progress starasia-toast-item-progress-outline-${l.type}`,
+            ref: l,
+            className: `starasia-toast-item-progress starasia-toast-item-progress-outline-${n.type}`,
             style: {
               animation: "progressBarr 5s linear forwards",
-              animationPlayState: w ? "paused" : "running"
+              animationPlayState: e ? "paused" : "running"
             }
           }
         ) : null
       ]
     }
   );
-}, ke = (l) => /* @__PURE__ */ g.jsx(
+}, I = (n) => /* @__PURE__ */ t(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1066,8 +427,8 @@ const Oe = ({
     height: "20",
     viewBox: "0 0 24 24",
     fill: "none",
-    ...l,
-    children: /* @__PURE__ */ g.jsx(
+    ...n,
+    children: /* @__PURE__ */ t(
       "path",
       {
         d: "M12 7.01001V7.00002M12 17L12 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z",
@@ -1079,7 +440,7 @@ const Oe = ({
       }
     )
   }
-), xe = (l) => /* @__PURE__ */ g.jsx(
+), M = (n) => /* @__PURE__ */ t(
   "svg",
   {
     width: "20",
@@ -1087,8 +448,8 @@ const Oe = ({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    ...l,
-    children: /* @__PURE__ */ g.jsx("g", { id: "Curved/Basic-actions-and-state", children: /* @__PURE__ */ g.jsx(
+    ...n,
+    children: /* @__PURE__ */ t("g", { id: "Curved/Basic-actions-and-state", children: /* @__PURE__ */ t(
       "path",
       {
         id: "shape",
@@ -1100,7 +461,7 @@ const Oe = ({
       }
     ) })
   }
-), Te = (l) => /* @__PURE__ */ g.jsx(
+), A = (n) => /* @__PURE__ */ t(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1108,8 +469,8 @@ const Oe = ({
     height: "20",
     viewBox: "0 0 24 24",
     fill: "none",
-    ...l,
-    children: /* @__PURE__ */ g.jsx(
+    ...n,
+    children: /* @__PURE__ */ t(
       "path",
       {
         d: "M19 5L5 19M5.00003 5L19 19",
@@ -1122,6 +483,6 @@ const Oe = ({
   }
 );
 export {
-  Oe as ToastContainer,
-  je as toast
+  N as ToastContainer,
+  D as toast
 };

package/dist/toast.umd.js

@@ -1,35 +1,4 @@
-(function(O,w){typeof exports=="object"&&typeof module<"u"?w(exports,require("react"),require("react-dom")):typeof define=="function"&&define.amd?define(["exports","react","react-dom"],w):(O=typeof globalThis<"u"?globalThis:O||self,w(O.Toast={},O.React,O.ReactDOM))})(this,function(O,w,Pr){"use strict";var J={exports:{}},W={};/**
- * @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 ar;function Ar(){if(ar)return W;ar=1;var l=w,a=Symbol.for("react.element"),b=Symbol.for("react.fragment"),y=Object.prototype.hasOwnProperty,p=l.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,_={key:!0,ref:!0,__self:!0,__source:!0};function C(E,d,S){var g,x={},P=null,T=null;S!==void 0&&(P=""+S),d.key!==void 0&&(P=""+d.key),d.ref!==void 0&&(T=d.ref);for(g in d)y.call(d,g)&&!_.hasOwnProperty(g)&&(x[g]=d[g]);if(E&&E.defaultProps)for(g in d=E.defaultProps,d)x[g]===void 0&&(x[g]=d[g]);return{$$typeof:a,type:E,key:P,ref:T,props:x,_owner:p.current}}return W.Fragment=b,W.jsx=C,W.jsxs=C,W}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 or;function Dr(){return or||(or=1,process.env.NODE_ENV!=="production"&&function(){var l=w,a=Symbol.for("react.element"),b=Symbol.for("react.portal"),y=Symbol.for("react.fragment"),p=Symbol.for("react.strict_mode"),_=Symbol.for("react.profiler"),C=Symbol.for("react.provider"),E=Symbol.for("react.context"),d=Symbol.for("react.forward_ref"),S=Symbol.for("react.suspense"),g=Symbol.for("react.suspense_list"),x=Symbol.for("react.memo"),P=Symbol.for("react.lazy"),T=Symbol.for("react.offscreen"),N=Symbol.iterator,Vr="@@iterator";function Xr(r){if(r===null||typeof r!="object")return null;var e=N&&r[N]||r[Vr];return typeof e=="function"?e:null}var L=l.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function m(r){{for(var e=arguments.length,n=new Array(e>1?e-1:0),t=1;t<e;t++)n[t-1]=arguments[t];$r("error",r,n)}}function $r(r,e,n){{var t=L.ReactDebugCurrentFrame,s=t.getStackAddendum();s!==""&&(e+="%s",n=n.concat([s]));var u=n.map(function(i){return String(i)});u.unshift("Warning: "+e),Function.prototype.apply.call(console[r],console,u)}}var zr=!1,Gr=!1,Jr=!1,Kr=!1,Hr=!1,sr;sr=Symbol.for("react.module.reference");function Zr(r){return!!(typeof r=="string"||typeof r=="function"||r===y||r===_||Hr||r===p||r===S||r===g||Kr||r===T||zr||Gr||Jr||typeof r=="object"&&r!==null&&(r.$$typeof===P||r.$$typeof===x||r.$$typeof===C||r.$$typeof===E||r.$$typeof===d||r.$$typeof===sr||r.getModuleId!==void 0))}function qr(r,e,n){var t=r.displayName;if(t)return t;var s=e.displayName||e.name||"";return s!==""?n+"("+s+")":n}function ur(r){return r.displayName||"Context"}function j(r){if(r==null)return null;if(typeof r.tag=="number"&&m("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 b:return"Portal";case _:return"Profiler";case p:return"StrictMode";case S:return"Suspense";case g:return"SuspenseList"}if(typeof r=="object")switch(r.$$typeof){case E:var e=r;return ur(e)+".Consumer";case C:var n=r;return ur(n._context)+".Provider";case d:return qr(r,r.render,"ForwardRef");case x:var t=r.displayName||null;return t!==null?t:j(r.type)||"Memo";case P:{var s=r,u=s._payload,i=s._init;try{return j(i(u))}catch{return null}}}return null}var D=Object.assign,U=0,lr,cr,fr,dr,vr,pr,gr;function mr(){}mr.__reactDisabledLog=!0;function Qr(){{if(U===0){lr=console.log,cr=console.info,fr=console.warn,dr=console.error,vr=console.group,pr=console.groupCollapsed,gr=console.groupEnd;var r={configurable:!0,enumerable:!0,value:mr,writable:!0};Object.defineProperties(console,{info:r,log:r,warn:r,error:r,group:r,groupCollapsed:r,groupEnd:r})}U++}}function re(){{if(U--,U===0){var r={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:D({},r,{value:lr}),info:D({},r,{value:cr}),warn:D({},r,{value:fr}),error:D({},r,{value:dr}),group:D({},r,{value:vr}),groupCollapsed:D({},r,{value:pr}),groupEnd:D({},r,{value:gr})})}U<0&&m("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}}var K=L.ReactCurrentDispatcher,H;function X(r,e,n){{if(H===void 0)try{throw Error()}catch(s){var t=s.stack.trim().match(/\n( *(at )?)/);H=t&&t[1]||""}return`
-`+H+r}}var Z=!1,$;{var ee=typeof WeakMap=="function"?WeakMap:Map;$=new ee}function br(r,e){if(!r||Z)return"";{var n=$.get(r);if(n!==void 0)return n}var t;Z=!0;var s=Error.prepareStackTrace;Error.prepareStackTrace=void 0;var u;u=K.current,K.current=null,Qr();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(R){t=R}Reflect.construct(r,[],i)}else{try{i.call()}catch(R){t=R}r.call(i.prototype)}}else{try{throw Error()}catch(R){t=R}r()}}catch(R){if(R&&t&&typeof R.stack=="string"){for(var o=R.stack.split(`
-`),h=t.stack.split(`
-`),c=o.length-1,f=h.length-1;c>=1&&f>=0&&o[c]!==h[f];)f--;for(;c>=1&&f>=0;c--,f--)if(o[c]!==h[f]){if(c!==1||f!==1)do if(c--,f--,f<0||o[c]!==h[f]){var k=`
-`+o[c].replace(" at new "," at ");return r.displayName&&k.includes("<anonymous>")&&(k=k.replace("<anonymous>",r.displayName)),typeof r=="function"&&$.set(r,k),k}while(c>=1&&f>=0);break}}}finally{Z=!1,K.current=u,re(),Error.prepareStackTrace=s}var M=r?r.displayName||r.name:"",F=M?X(M):"";return typeof r=="function"&&$.set(r,F),F}function ne(r,e,n){return br(r,!1)}function te(r){var e=r.prototype;return!!(e&&e.isReactComponent)}function z(r,e,n){if(r==null)return"";if(typeof r=="function")return br(r,te(r));if(typeof r=="string")return X(r);switch(r){case S:return X("Suspense");case g:return X("SuspenseList")}if(typeof r=="object")switch(r.$$typeof){case d:return ne(r.render);case x:return z(r.type,e,n);case P:{var t=r,s=t._payload,u=t._init;try{return z(u(s),e,n)}catch{}}}return""}var B=Object.prototype.hasOwnProperty,hr={},yr=L.ReactDebugCurrentFrame;function G(r){if(r){var e=r._owner,n=z(r.type,r._source,e?e.type:null);yr.setExtraStackFrame(n)}else yr.setExtraStackFrame(null)}function ae(r,e,n,t,s){{var u=Function.call.bind(B);for(var i in r)if(u(r,i)){var o=void 0;try{if(typeof r[i]!="function"){var h=Error((t||"React class")+": "+n+" 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 h.name="Invariant Violation",h}o=r[i](e,i,t,n,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(c){o=c}o&&!(o instanceof Error)&&(G(s),m("%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).",t||"React class",n,i,typeof o),G(null)),o instanceof Error&&!(o.message in hr)&&(hr[o.message]=!0,G(s),m("Failed %s type: %s",n,o.message),G(null))}}}var oe=Array.isArray;function q(r){return oe(r)}function ie(r){{var e=typeof Symbol=="function"&&Symbol.toStringTag,n=e&&r[Symbol.toStringTag]||r.constructor.name||"Object";return n}}function se(r){try{return Er(r),!1}catch{return!0}}function Er(r){return""+r}function Rr(r){if(se(r))return m("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",ie(r)),Er(r)}var V=L.ReactCurrentOwner,ue={key:!0,ref:!0,__self:!0,__source:!0},wr,_r,Q;Q={};function le(r){if(B.call(r,"ref")){var e=Object.getOwnPropertyDescriptor(r,"ref").get;if(e&&e.isReactWarning)return!1}return r.ref!==void 0}function ce(r){if(B.call(r,"key")){var e=Object.getOwnPropertyDescriptor(r,"key").get;if(e&&e.isReactWarning)return!1}return r.key!==void 0}function fe(r,e){if(typeof r.ref=="string"&&V.current&&e&&V.current.stateNode!==e){var n=j(V.current.type);Q[n]||(m('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(V.current.type),r.ref),Q[n]=!0)}}function de(r,e){{var n=function(){wr||(wr=!0,m("%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))};n.isReactWarning=!0,Object.defineProperty(r,"key",{get:n,configurable:!0})}}function ve(r,e){{var n=function(){_r||(_r=!0,m("%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))};n.isReactWarning=!0,Object.defineProperty(r,"ref",{get:n,configurable:!0})}}var pe=function(r,e,n,t,s,u,i){var o={$$typeof:a,type:r,key:e,ref:n,props:i,_owner:u};return o._store={},Object.defineProperty(o._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(o,"_self",{configurable:!1,enumerable:!1,writable:!1,value:t}),Object.defineProperty(o,"_source",{configurable:!1,enumerable:!1,writable:!1,value:s}),Object.freeze&&(Object.freeze(o.props),Object.freeze(o)),o};function ge(r,e,n,t,s){{var u,i={},o=null,h=null;n!==void 0&&(Rr(n),o=""+n),ce(e)&&(Rr(e.key),o=""+e.key),le(e)&&(h=e.ref,fe(e,s));for(u in e)B.call(e,u)&&!ue.hasOwnProperty(u)&&(i[u]=e[u]);if(r&&r.defaultProps){var c=r.defaultProps;for(u in c)i[u]===void 0&&(i[u]=c[u])}if(o||h){var f=typeof r=="function"?r.displayName||r.name||"Unknown":r;o&&de(i,f),h&&ve(i,f)}return pe(r,o,h,s,t,V.current,i)}}var rr=L.ReactCurrentOwner,kr=L.ReactDebugCurrentFrame;function I(r){if(r){var e=r._owner,n=z(r.type,r._source,e?e.type:null);kr.setExtraStackFrame(n)}else kr.setExtraStackFrame(null)}var er;er=!1;function nr(r){return typeof r=="object"&&r!==null&&r.$$typeof===a}function xr(){{if(rr.current){var r=j(rr.current.type);if(r)return`
-
-Check the render method of \``+r+"`."}return""}}function me(r){{if(r!==void 0){var e=r.fileName.replace(/^.*[\\\/]/,""),n=r.lineNumber;return`
-
-Check your code at `+e+":"+n+"."}return""}}var Tr={};function be(r){{var e=xr();if(!e){var n=typeof r=="string"?r:r.displayName||r.name;n&&(e=`
-
-Check the top-level render call using <`+n+">.")}return e}}function Cr(r,e){{if(!r._store||r._store.validated||r.key!=null)return;r._store.validated=!0;var n=be(e);if(Tr[n])return;Tr[n]=!0;var t="";r&&r._owner&&r._owner!==rr.current&&(t=" It was passed a child from "+j(r._owner.type)+"."),I(r),m('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',n,t),I(null)}}function Sr(r,e){{if(typeof r!="object")return;if(q(r))for(var n=0;n<r.length;n++){var t=r[n];nr(t)&&Cr(t,e)}else if(nr(r))r._store&&(r._store.validated=!0);else if(r){var s=Xr(r);if(typeof s=="function"&&s!==r.entries)for(var u=s.call(r),i;!(i=u.next()).done;)nr(i.value)&&Cr(i.value,e)}}}function he(r){{var e=r.type;if(e==null||typeof e=="string")return;var n;if(typeof e=="function")n=e.propTypes;else if(typeof e=="object"&&(e.$$typeof===d||e.$$typeof===x))n=e.propTypes;else return;if(n){var t=j(e);ae(n,r.props,"prop",t,r)}else if(e.PropTypes!==void 0&&!er){er=!0;var s=j(e);m("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",s||"Unknown")}typeof e.getDefaultProps=="function"&&!e.getDefaultProps.isReactClassApproved&&m("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function ye(r){{for(var e=Object.keys(r.props),n=0;n<e.length;n++){var t=e[n];if(t!=="children"&&t!=="key"){I(r),m("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",t),I(null);break}}r.ref!==null&&(I(r),m("Invalid attribute `ref` supplied to `React.Fragment`."),I(null))}}var jr={};function Or(r,e,n,t,s,u){{var i=Zr(r);if(!i){var o="";(r===void 0||typeof r=="object"&&r!==null&&Object.keys(r).length===0)&&(o+=" 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 h=me(s);h?o+=h:o+=xr();var c;r===null?c="null":q(r)?c="array":r!==void 0&&r.$$typeof===a?(c="<"+(j(r.type)||"Unknown")+" />",o=" Did you accidentally export a JSX literal instead of a component?"):c=typeof r,m("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",c,o)}var f=ge(r,e,n,s,u);if(f==null)return f;if(i){var k=e.children;if(k!==void 0)if(t)if(q(k)){for(var M=0;M<k.length;M++)Sr(k[M],r);Object.freeze&&Object.freeze(k)}else m("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 Sr(k,r)}if(B.call(e,"key")){var F=j(r),R=Object.keys(e).filter(function(xe){return xe!=="key"}),tr=R.length>0?"{key: someKey, "+R.join(": ..., ")+": ...}":"{key: someKey}";if(!jr[F+tr]){var ke=R.length>0?"{"+R.join(": ..., ")+": ...}":"{}";m(`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} />`,tr,F,ke,F),jr[F+tr]=!0}}return r===y?ye(f):he(f),f}}function Ee(r,e,n){return Or(r,e,n,!0)}function Re(r,e,n){return Or(r,e,n,!1)}var we=Re,_e=Ee;Y.Fragment=y,Y.jsx=we,Y.jsxs=_e}()),Y}process.env.NODE_ENV==="production"?J.exports=Ar():J.exports=Dr();var v=J.exports;const Fr=`@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
+(function(o,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react/jsx-runtime"),require("react"),require("react-dom")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","react-dom"],n):(o=typeof globalThis<"u"?globalThis:o||self,n(o.Toast={},o.jsxRuntime,o.React,o.ReactDOM))})(this,function(o,n,e,v){"use strict";const y=`@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
 
 * {
   margin: 0;
@@ -39,61 +8,63 @@ React keys must be passed directly to JSX without using spread:
 }
 
 :root {
+  /* white */
+  --starasia-ui-toast-color-white: var(--starasia-ui-color-gray-50, rgba(255, 254, 255, 1));
+
   /* color solid default */
-  --starasia-ui-solid-background-default: #111827;
-  --starasia-ui-solid-color-default: #fff;
-  --starasia-ui-solid-border-default: #e5e7eb;
+  --starasia-ui-solid-background-default: rgba(17, 24, 39, 1);
+  --starasia-ui-solid-color-default: rgba(255, 255, 255, 1);
+  --starasia-ui-solid-border-default: rgba(229, 231, 235, 1);
 
   /* color outline default */
-  --starasia-ui-outline-background-default: #f9fafb;
-  --starasia-ui-outline-color-default: #111827;
-  --starasia-ui-outline-border-default: #e5e7eb;
-  --starasia-ui-outline-progress-default: #181a19;
+  --starasia-ui-outline-background-default: rgba(249, 250, 251, 1);
+  --starasia-ui-outline-color-default: rgba(17, 24, 39, 1);
+  --starasia-ui-outline-border-default: rgba(229, 231, 235, 1);
+  --starasia-ui-outline-progress-default: rgba(24, 26, 25, 1);
 
   /* color outline red */
-  --starasia-ui-outline-background-danger: #fef2f2;
-  --starasia-ui-outline-color-danger: #dc2626;
-  --starasia-ui-outline-border-danger: #fecaca;
-  --starasia-ui-outline-progress-danger: #181a19;
-  --starasia-ui-outline-progress-danger: #c9184a;
+  --starasia-ui-outline-background-danger: rgba(254, 242, 242, 1);
+  --starasia-ui-outline-color-danger: rgba(220, 38, 38, 1);
+  --starasia-ui-outline-border-danger: rgba(254, 202, 202, 1);
+  --starasia-ui-outline-progress-danger: rgba(201, 24, 74, 1);
 
   /* color solid red */
-  --starasia-ui-solid-background-danger: #c9184a;
-  --starasia-ui-solid-color-danger: #fff0f3;
-  --starasia-ui-solid-border-danger: #c9184a;
+  --starasia-ui-solid-background-danger: rgba(201, 24, 74, 1);
+  --starasia-ui-solid-color-danger: rgba(255, 240, 243, 1);
+  --starasia-ui-solid-border-danger: rgba(201, 24, 74, 1);
 
   /* color outline success */
-  --starasia-ui-outline-background-success: #dcf6ea;
-  --starasia-ui-outline-color-success: #28ac6e;
-  --starasia-ui-outline-border-success: #97e6c1;
-  --starasia-ui-outline-progress-success: #28ac6e;
+  --starasia-ui-outline-background-success: rgba(220, 246, 234, 1);
+  --starasia-ui-outline-color-success: rgba(40, 172, 110, 1);
+  --starasia-ui-outline-border-success: rgba(151, 230, 193, 1);
+  --starasia-ui-outline-progress-success: rgba(40, 172, 110, 1);
 
   /* color solid success */
-  --starasia-ui-solid-background-success: #28ac6e;
-  --starasia-ui-solid-color-success: #dcf6ea;
-  --starasia-ui-solid-border-success: #28ac6e;
+  --starasia-ui-solid-background-success: rgba(40, 172, 110, 1);
+  --starasia-ui-solid-color-success: rgba(220, 246, 234, 1);
+  --starasia-ui-solid-border-success: rgba(40, 172, 110, 1);
 
-  /* color outline info */
-  --starasia-ui-outline-background-info: #e3f2fd;
-  --starasia-ui-outline-color-info: #1976d2;
-  --starasia-ui-outline-border-info: #64b5f6;
-  --starasia-ui-outline-progress-info: #1976d2;
+  /* color outline info (semantic blue) */
+  --starasia-ui-outline-background-info: rgba(227, 242, 253, 1);
+  --starasia-ui-outline-color-info: rgba(25, 118, 210, 1);
+  --starasia-ui-outline-border-info: rgba(100, 181, 246, 1);
+  --starasia-ui-outline-progress-info: rgba(25, 118, 210, 1);
 
-  /* color solid info */
-  --starasia-ui-solid-background-info: #1976d2;
-  --starasia-ui-solid-color-info: #e3f2fd;
-  --starasia-ui-solid-border-info: #1976d2;
+  /* color solid info (semantic blue) */
+  --starasia-ui-solid-background-info: rgba(25, 118, 210, 1);
+  --starasia-ui-solid-color-info: rgba(227, 242, 253, 1);
+  --starasia-ui-solid-border-info: rgba(25, 118, 210, 1);
 
   /* color outline warning */
-  --starasia-ui-outline-background-warning: #fdf3e4;
-  --starasia-ui-outline-color-warning: #181a19;
-  --starasia-ui-outline-border-warning: #f4c583;
-  --starasia-ui-outline-progress-warning: #ed9f30;
+  --starasia-ui-outline-background-warning: rgba(253, 243, 228, 1);
+  --starasia-ui-outline-color-warning: rgba(24, 26, 25, 1);
+  --starasia-ui-outline-border-warning: rgba(244, 197, 131, 1);
+  --starasia-ui-outline-progress-warning: rgba(237, 159, 48, 1);
 
   /* color solid warning */
-  --starasia-ui-solid-background-warning: #ed9f30;
-  --starasia-ui-solid-color-warning: #fffeff;
-  --starasia-ui-solid-border-warning: #ed9f30;
+  --starasia-ui-solid-background-warning: rgba(237, 159, 48, 1);
+  --starasia-ui-solid-color-warning: var(--starasia-ui-toast-color-white);
+  --starasia-ui-solid-border-warning: rgba(237, 159, 48, 1);
 
   /* height */
   --starasia-ui-h-0-5: 0.125rem; /* 2px */
@@ -328,4 +299,4 @@ React keys must be passed directly to JSX without using spread:
     width: 0px;
   }
 }
-`;let Lr=1;class Ir{constructor(){this.subscribe=a=>(this.subscribers.push(a),()=>{const b=this.subscribers.indexOf(a);this.subscribers.splice(b,1)}),this.publish=a=>{this.subscribers.forEach(b=>b(a))},this.addToast=a=>{this.publish(a),this.toasts=[...this.toasts,a]},this.create=a=>{const{message:b,type:y}=a,p=Lr++;return this.addToast({title:b,type:y,id:p}),p},this.dismiss=a=>(this.subscribers.forEach(b=>b({id:a,dismiss:!0})),a),this.danger=a=>this.create({message:a,type:"danger"}),this.warning=a=>this.create({message:a,type:"warning"}),this.success=a=>this.create({type:"success",message:a}),this.info=a=>this.create({type:"info",message:a}),this.default=a=>this.create({type:"default",message:a}),this.subscribers=[],this.toasts=[]}}const A=new Ir,Mr=Object.assign({success:A.success,info:A.info,default:A.default,danger:A.danger,warning:A.warning}),ir="starasia-toast-styles";(l=>{if(!document.getElementById(ir)){const a=document.createElement("style");a.id=ir,a.textContent=l,document.head.appendChild(a)}})(Fr);const Wr=({type:l="outline",direction:a="bottom-right"})=>{const[b,y]=w.useState([]);return w.useEffect(()=>A.subscribe(p=>{if(p.dismiss){y(_=>_.filter(C=>C.id!==p.id));return}setTimeout(()=>{Pr.flushSync(()=>{y(_=>[p,..._])})})}),[]),v.jsx("div",{className:`starasia-toast-container starasia-toast-container-${a}`,children:b.map(p=>v.jsx(Yr,{data:p,type:l,direction:a},p.id))})},Yr=({data:l,type:a="solid",direction:b})=>{const[y,p]=w.useState(null),[_,C]=w.useState(!1),E=w.useRef(null),d=()=>{const T=setTimeout(()=>{g()},5e3);p(T)},S=()=>{y&&(clearTimeout(y),p(null))},g=()=>{A.dismiss(l.id)};w.useEffect(()=>(_?S():d(),()=>{S()}),[_]),w.useEffect(()=>{const T=E.current,N=()=>{g()};return T&&T.addEventListener("animationend",N),()=>{T&&T.removeEventListener("animationend",N)}},[]);const x=()=>{C(!0),S(),E.current&&(E.current.style.animationPlayState="paused")},P=()=>{C(!1),d(),E.current&&(E.current.style.animationPlayState="running")};return v.jsxs("div",{className:`starasia-toast-item-container starasia-toast-item-container-${a}-${l.type} starasia-toast-item-container-animation-${b}`,onMouseEnter:x,onMouseLeave:P,children:[v.jsx("div",{style:{display:"flex"},children:l.type==="success"?v.jsx(Ur,{style:{color:"inherit"}}):v.jsx(Nr,{style:{color:"inherit"}})}),v.jsx("div",{style:{flex:1},children:l.title}),v.jsx("div",{style:{display:"flex",cursor:"pointer"},onClick:()=>A.dismiss(l.id),children:v.jsx(Br,{style:{color:"inherit"}})}),a==="outline"?v.jsx("div",{ref:E,className:`starasia-toast-item-progress starasia-toast-item-progress-outline-${l.type}`,style:{animation:"progressBarr 5s linear forwards",animationPlayState:_?"paused":"running"}}):null]})},Nr=l=>v.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",...l,children:v.jsx("path",{d:"M12 7.01001V7.00002M12 17L12 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",cursor:"pointer"})}),Ur=l=>v.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...l,children:v.jsx("g",{id:"Curved/Basic-actions-and-state",children:v.jsx("path",{id:"shape",d:"M14.1667 7.5L8.33332 13.3333L5.83328 10.8333M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}),Br=l=>v.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",...l,children:v.jsx("path",{d:"M19 5L5 19M5.00003 5L19 19",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})});O.ToastContainer=Wr,O.toast=Mr,Object.defineProperty(O,Symbol.toStringTag,{value:"Module"})});
+`;let w=1;class k{constructor(){this.subscribe=a=>(this.subscribers.push(a),()=>{const s=this.subscribers.indexOf(a);this.subscribers.splice(s,1)}),this.publish=a=>{this.subscribers.forEach(s=>s(a))},this.addToast=a=>{this.publish(a),this.toasts=[...this.toasts,a]},this.create=a=>{const{message:s,type:l}=a,r=w++;return this.addToast({title:s,type:l,id:r}),r},this.dismiss=a=>(this.subscribers.forEach(s=>s({id:a,dismiss:!0})),a),this.danger=a=>this.create({message:a,type:"danger"}),this.warning=a=>this.create({message:a,type:"warning"}),this.success=a=>this.create({type:"success",message:a}),this.info=a=>this.create({type:"info",message:a}),this.default=a=>this.create({type:"default",message:a}),this.subscribers=[],this.toasts=[]}}const i=new k,x=Object.assign({success:i.success,info:i.info,default:i.default,danger:i.danger,warning:i.warning}),b="starasia-toast-styles";(t=>{if(!document.getElementById(b)){const a=document.createElement("style");a.id=b,a.textContent=t,document.head.appendChild(a)}})(y);const C=({type:t="outline",direction:a="bottom-right"})=>{const[s,l]=e.useState([]);return e.useEffect(()=>i.subscribe(r=>{if(r.dismiss){l(u=>u.filter(g=>g.id!==r.id));return}setTimeout(()=>{v.flushSync(()=>{l(u=>[r,...u])})})}),[]),n.jsx("div",{className:`starasia-toast-container starasia-toast-container-${a}`,children:s.map(r=>n.jsx(T,{data:r,type:t,direction:a},r.id))})},T=({data:t,type:a="solid",direction:s})=>{const[l,r]=e.useState(null),[u,g]=e.useState(!1),c=e.useRef(null),m=()=>{const d=setTimeout(()=>{p()},5e3);r(d)},f=()=>{l&&(clearTimeout(l),r(null))},p=()=>{i.dismiss(t.id)};e.useEffect(()=>(u?f():m(),()=>{f()}),[u]),e.useEffect(()=>{const d=c.current,h=()=>{p()};return d&&d.addEventListener("animationend",h),()=>{d&&d.removeEventListener("animationend",h)}},[]);const M=()=>{g(!0),f(),c.current&&(c.current.style.animationPlayState="paused")},j=()=>{g(!1),m(),c.current&&(c.current.style.animationPlayState="running")};return n.jsxs("div",{className:`starasia-toast-item-container starasia-toast-item-container-${a}-${t.type} starasia-toast-item-container-animation-${s}`,onMouseEnter:M,onMouseLeave:j,children:[n.jsx("div",{style:{display:"flex"},children:t.type==="success"?n.jsx(E,{style:{color:"inherit"}}):n.jsx(L,{style:{color:"inherit"}})}),n.jsx("div",{style:{flex:1},children:t.title}),n.jsx("div",{style:{display:"flex",cursor:"pointer"},onClick:()=>i.dismiss(t.id),children:n.jsx(S,{style:{color:"inherit"}})}),a==="outline"?n.jsx("div",{ref:c,className:`starasia-toast-item-progress starasia-toast-item-progress-outline-${t.type}`,style:{animation:"progressBarr 5s linear forwards",animationPlayState:u?"paused":"running"}}):null]})},L=t=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",...t,children:n.jsx("path",{d:"M12 7.01001V7.00002M12 17L12 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",cursor:"pointer"})}),E=t=>n.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:n.jsx("g",{id:"Curved/Basic-actions-and-state",children:n.jsx("path",{id:"shape",d:"M14.1667 7.5L8.33332 13.3333L5.83328 10.8333M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}),S=t=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",...t,children:n.jsx("path",{d:"M19 5L5 19M5.00003 5L19 19",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})});o.ToastContainer=C,o.toast=x,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});

package/package.json

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