mantine-tag-input - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

dist/mantine-tag-input.d.ts

@@ -6,2 +6,3 @@ import React from 'react';
     value?: string[];
+    error?: string;
     onChange?: (tags: string[]) => void;
@@ -19,3 +20,3 @@ onBlur?: any;
 }
-export declare const MantineTagInput: (props: TagsInputProps) => JSX.Element;
+export declare const TagInput: (props: TagsInputProps) => JSX.Element;
 //# sourceMappingURL=mantine-tag-input.d.ts.map

dist/mantine-tag-input.js

@@ -1,4 +0,4 @@
-import { Input as Oe, Group as ke, Badge as sr, Text as dr, CloseButton as vr, createStyles as gr, rem as G } from "@mantine/core";
-import pe, { useState as br } from "react";
-var re = { exports: {} }, I = {};
+import { Input as Oe, Group as ke, Badge as sr, Text as dr, CloseButton as vr, createStyles as gr, rem as J } from "@mantine/core";
+import Ae, { useState as br, useEffect as hr } from "react";
+var re = { exports: {} }, Y = {};
 /**
@@ -14,20 +14,20 @@ * @license React
 var Pe;
-function hr() {
+function yr() {
   if (Pe)
-    return I;
+    return Y;
   Pe = 1;
-  var n = pe, f = Symbol.for("react.element"), m = Symbol.for("react.fragment"), C = Object.prototype.hasOwnProperty, j = n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, O = { key: !0, ref: !0, __self: !0, __source: !0 };
-  function k(_, u, y) {
-    var g, R = {}, T = null, P = null;
-    y !== void 0 && (T = "" + y), u.key !== void 0 && (T = "" + u.key), u.ref !== void 0 && (P = u.ref);
-    for (g in u)
-      C.call(u, g) && !O.hasOwnProperty(g) && (R[g] = u[g]);
-    if (_ && _.defaultProps)
-      for (g in u = _.defaultProps, u)
-        R[g] === void 0 && (R[g] = u[g]);
-    return { $$typeof: f, type: _, key: T, ref: P, props: R, _owner: j.current };
+  var t = Ae, l = Symbol.for("react.element"), R = Symbol.for("react.fragment"), _ = Object.prototype.hasOwnProperty, j = t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, O = { key: !0, ref: !0, __self: !0, __source: !0 };
+  function k(T, b, s) {
+    var d, y = {}, m = null, P = null;
+    s !== void 0 && (m = "" + s), b.key !== void 0 && (m = "" + b.key), b.ref !== void 0 && (P = b.ref);
+    for (d in b)
+      _.call(b, d) && !O.hasOwnProperty(d) && (y[d] = b[d]);
+    if (T && T.defaultProps)
+      for (d in b = T.defaultProps, b)
+        y[d] === void 0 && (y[d] = b[d]);
+    return { $$typeof: l, type: T, key: m, ref: P, props: y, _owner: j.current };
   }
-  return I.Fragment = m, I.jsx = k, I.jsxs = k, I;
+  return Y.Fragment = R, Y.jsx = k, Y.jsxs = k, Y;
 }
-var W = {};
+var V = {};
 /**
@@ -43,40 +43,40 @@ * @license React
 var xe;
-function yr() {
+function Er() {
   return xe || (xe = 1, process.env.NODE_ENV !== "production" && function() {
-    var n = pe, f = Symbol.for("react.element"), m = Symbol.for("react.portal"), C = Symbol.for("react.fragment"), j = Symbol.for("react.strict_mode"), O = Symbol.for("react.profiler"), k = Symbol.for("react.provider"), _ = Symbol.for("react.context"), u = Symbol.for("react.forward_ref"), y = Symbol.for("react.suspense"), g = Symbol.for("react.suspense_list"), R = Symbol.for("react.memo"), T = Symbol.for("react.lazy"), P = Symbol.for("react.offscreen"), D = Symbol.iterator, V = "@@iterator";
-    function N(e) {
+    var t = Ae, l = Symbol.for("react.element"), R = Symbol.for("react.portal"), _ = Symbol.for("react.fragment"), j = Symbol.for("react.strict_mode"), O = Symbol.for("react.profiler"), k = Symbol.for("react.provider"), T = Symbol.for("react.context"), b = Symbol.for("react.forward_ref"), s = Symbol.for("react.suspense"), d = Symbol.for("react.suspense_list"), y = Symbol.for("react.memo"), m = Symbol.for("react.lazy"), P = Symbol.for("react.offscreen"), $ = Symbol.iterator, N = "@@iterator";
+    function U(e) {
       if (e === null || typeof e != "object")
         return null;
-      var r = D && e[D] || e[V];
+      var r = $ && e[$] || e[N];
       return typeof r == "function" ? r : null;
     }
-    var d = n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-    function b(e) {
+    var C = t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    function c(e) {
       {
-        for (var r = arguments.length, t = new Array(r > 1 ? r - 1 : 0), a = 1; a < r; a++)
-          t[a - 1] = arguments[a];
-        Ae("error", e, t);
+        for (var r = arguments.length, n = new Array(r > 1 ? r - 1 : 0), a = 1; a < r; a++)
+          n[a - 1] = arguments[a];
+        De("error", e, n);
       }
     }
-    function Ae(e, r, t) {
+    function De(e, r, n) {
       {
-        var a = d.ReactDebugCurrentFrame, l = a.getStackAddendum();
-        l !== "" && (r += "%s", t = t.concat([l]));
-        var c = t.map(function(o) {
+        var a = C.ReactDebugCurrentFrame, u = a.getStackAddendum();
+        u !== "" && (r += "%s", n = n.concat([u]));
+        var f = n.map(function(o) {
           return String(o);
         });
-        c.unshift("Warning: " + r), Function.prototype.apply.call(console[e], console, c);
+        f.unshift("Warning: " + r), Function.prototype.apply.call(console[e], console, f);
       }
     }
-    var De = !1, Fe = !1, $e = !1, Ie = !1, We = !1, te;
+    var Fe = !1, $e = !1, Ie = !1, We = !1, Ye = !1, te;
     te = Symbol.for("react.module.reference");
-    function Ye(e) {
-      return !!(typeof e == "string" || typeof e == "function" || e === C || e === O || We || e === j || e === y || e === g || Ie || e === P || De || Fe || $e || typeof e == "object" && e !== null && (e.$$typeof === T || e.$$typeof === R || e.$$typeof === k || e.$$typeof === _ || e.$$typeof === u || e.$$typeof === te || e.getModuleId !== void 0));
+    function Ve(e) {
+      return !!(typeof e == "string" || typeof e == "function" || e === _ || e === O || Ye || e === j || e === s || e === d || We || e === P || Fe || $e || Ie || typeof e == "object" && e !== null && (e.$$typeof === m || e.$$typeof === y || e.$$typeof === k || e.$$typeof === T || e.$$typeof === b || e.$$typeof === te || e.getModuleId !== void 0));
     }
-    function Ve(e, r, t) {
+    function Ne(e, r, n) {
       var a = e.displayName;
       if (a)
         return a;
-      var l = r.displayName || r.name || "";
-      return l !== "" ? t + "(" + l + ")" : t;
+      var u = r.displayName || r.name || "";
+      return u !== "" ? n + "(" + u + ")" : n;
     }
@@ -89,3 +89,3 @@ function ne(e) {
         return null;
-      if (typeof e.tag == "number" && b("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof e == "function")
+      if (typeof e.tag == "number" && c("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof e == "function")
         return e.displayName || e.name || null;
@@ -95,5 +95,5 @@ if (typeof e == "string")
       switch (e) {
-        case C:
+        case _:
           return "Fragment";
-        case m:
+        case R:
           return "Portal";
@@ -104,5 +104,5 @@ case O:
           return "StrictMode";
-        case y:
+        case s:
           return "Suspense";
-        case g:
+        case d:
           return "SuspenseList";
@@ -112,17 +112,17 @@ }
         switch (e.$$typeof) {
-          case _:
+          case T:
             var r = e;
             return ne(r) + ".Consumer";
           case k:
-            var t = e;
-            return ne(t._context) + ".Provider";
-          case u:
-            return Ve(e, e.render, "ForwardRef");
-          case R:
+            var n = e;
+            return ne(n._context) + ".Provider";
+          case b:
+            return Ne(e, e.render, "ForwardRef");
+          case y:
             var a = e.displayName || null;
             return a !== null ? a : S(e.type) || "Memo";
-          case T: {
-            var l = e, c = l._payload, o = l._init;
+          case m: {
+            var u = e, f = u._payload, o = u._init;
             try {
-              return S(o(c));
+              return S(o(f));
             } catch {
@@ -135,9 +135,9 @@ return null;
     }
-    var x = Object.assign, F = 0, ae, ie, oe, ue, le, ce, fe;
+    var x = Object.assign, I = 0, ae, ie, oe, ue, le, ce, fe;
     function se() {
     }
     se.__reactDisabledLog = !0;
-    function Ne() {
+    function Ue() {
       {
-        if (F === 0) {
+        if (I === 0) {
           ae = console.log, ie = console.info, oe = console.warn, ue = console.error, le = console.group, ce = console.groupCollapsed, fe = console.groupEnd;
@@ -160,8 +160,8 @@ var e = {
         }
-        F++;
+        I++;
       }
     }
-    function Ue() {
+    function Le() {
       {
-        if (F--, F === 0) {
+        if (I--, I === 0) {
           var e = {
@@ -196,38 +196,38 @@ configurable: !0,
         }
-        F < 0 && b("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
+        I < 0 && c("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
       }
     }
-    var J = d.ReactCurrentDispatcher, K;
-    function U(e, r, t) {
+    var K = C.ReactCurrentDispatcher, z;
+    function L(e, r, n) {
       {
-        if (K === void 0)
+        if (z === void 0)
           try {
             throw Error();
-          } catch (l) {
-            var a = l.stack.trim().match(/\n( *(at )?)/);
-            K = a && a[1] || "";
+          } catch (u) {
+            var a = u.stack.trim().match(/\n( *(at )?)/);
+            z = a && a[1] || "";
           }
         return `
-` + K + e;
+` + z + e;
       }
     }
-    var z = !1, L;
+    var H = !1, B;
     {
-      var Le = typeof WeakMap == "function" ? WeakMap : Map;
-      L = new Le();
+      var Be = typeof WeakMap == "function" ? WeakMap : Map;
+      B = new Be();
     }
     function de(e, r) {
-      if (!e || z)
+      if (!e || H)
         return "";
       {
-        var t = L.get(e);
-        if (t !== void 0)
-          return t;
+        var n = B.get(e);
+        if (n !== void 0)
+          return n;
       }
       var a;
-      z = !0;
-      var l = Error.prepareStackTrace;
+      H = !0;
+      var u = Error.prepareStackTrace;
       Error.prepareStackTrace = void 0;
-      var c;
-      c = J.current, J.current = null, Ne();
+      var f;
+      f = K.current, K.current = null, Ue();
       try {
@@ -269,14 +269,14 @@ if (r) {
 `), h = a.stack.split(`
-`), s = i.length - 1, v = h.length - 1; s >= 1 && v >= 0 && i[s] !== h[v]; )
-            v--;
-          for (; s >= 1 && v >= 0; s--, v--)
-            if (i[s] !== h[v]) {
-              if (s !== 1 || v !== 1)
+`), v = i.length - 1, g = h.length - 1; v >= 1 && g >= 0 && i[v] !== h[g]; )
+            g--;
+          for (; v >= 1 && g >= 0; v--, g--)
+            if (i[v] !== h[g]) {
+              if (v !== 1 || g !== 1)
                 do
-                  if (s--, v--, v < 0 || i[s] !== h[v]) {
+                  if (v--, g--, g < 0 || i[v] !== h[g]) {
                     var E = `
-` + i[s].replace(" at new ", " at ");
-                    return e.displayName && E.includes("<anonymous>") && (E = E.replace("<anonymous>", e.displayName)), typeof e == "function" && L.set(e, E), E;
+` + i[v].replace(" at new ", " at ");
+                    return e.displayName && E.includes("<anonymous>") && (E = E.replace("<anonymous>", e.displayName)), typeof e == "function" && B.set(e, E), E;
                   }
-                while (s >= 1 && v >= 0);
+                while (v >= 1 && g >= 0);
               break;
@@ -286,37 +286,37 @@ }
       } finally {
-        z = !1, J.current = c, Ue(), Error.prepareStackTrace = l;
+        H = !1, K.current = f, Le(), Error.prepareStackTrace = u;
       }
-      var A = e ? e.displayName || e.name : "", we = A ? U(A) : "";
-      return typeof e == "function" && L.set(e, we), we;
+      var D = e ? e.displayName || e.name : "", we = D ? L(D) : "";
+      return typeof e == "function" && B.set(e, we), we;
     }
-    function Me(e, r, t) {
+    function Me(e, r, n) {
       return de(e, !1);
     }
-    function Be(e) {
+    function qe(e) {
       var r = e.prototype;
       return !!(r && r.isReactComponent);
     }
-    function M(e, r, t) {
+    function M(e, r, n) {
       if (e == null)
         return "";
       if (typeof e == "function")
-        return de(e, Be(e));
+        return de(e, qe(e));
       if (typeof e == "string")
-        return U(e);
+        return L(e);
       switch (e) {
-        case y:
-          return U("Suspense");
-        case g:
-          return U("SuspenseList");
+        case s:
+          return L("Suspense");
+        case d:
+          return L("SuspenseList");
       }
       if (typeof e == "object")
         switch (e.$$typeof) {
-          case u:
+          case b:
             return Me(e.render);
-          case R:
-            return M(e.type, r, t);
-          case T: {
-            var a = e, l = a._payload, c = a._init;
+          case y:
+            return M(e.type, r, n);
+          case m: {
+            var a = e, u = a._payload, f = a._init;
             try {
-              return M(c(l), r, t);
+              return M(f(u), r, n);
             } catch {
@@ -328,40 +328,40 @@ }
     }
-    var B = Object.prototype.hasOwnProperty, ve = {}, ge = d.ReactDebugCurrentFrame;
-    function q(e) {
+    var q = Object.prototype.hasOwnProperty, ve = {}, ge = C.ReactDebugCurrentFrame;
+    function G(e) {
       if (e) {
-        var r = e._owner, t = M(e.type, e._source, r ? r.type : null);
-        ge.setExtraStackFrame(t);
+        var r = e._owner, n = M(e.type, e._source, r ? r.type : null);
+        ge.setExtraStackFrame(n);
       } else
         ge.setExtraStackFrame(null);
     }
-    function qe(e, r, t, a, l) {
+    function Ge(e, r, n, a, u) {
       {
-        var c = Function.call.bind(B);
+        var f = Function.call.bind(q);
         for (var o in e)
-          if (c(e, o)) {
+          if (f(e, o)) {
             var i = void 0;
             try {
               if (typeof e[o] != "function") {
-                var h = Error((a || "React class") + ": " + t + " type `" + o + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[o] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
+                var h = Error((a || "React class") + ": " + n + " type `" + o + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[o] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
                 throw h.name = "Invariant Violation", h;
               }
-              i = e[o](r, o, a, t, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
-            } catch (s) {
-              i = s;
+              i = e[o](r, o, a, n, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
+            } catch (v) {
+              i = v;
             }
-            i && !(i instanceof Error) && (q(l), b("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", a || "React class", t, o, typeof i), q(null)), i instanceof Error && !(i.message in ve) && (ve[i.message] = !0, q(l), b("Failed %s type: %s", t, i.message), q(null));
+            i && !(i instanceof Error) && (G(u), c("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", a || "React class", n, o, typeof i), G(null)), i instanceof Error && !(i.message in ve) && (ve[i.message] = !0, G(u), c("Failed %s type: %s", n, i.message), G(null));
           }
       }
     }
-    var Ge = Array.isArray;
-    function H(e) {
-      return Ge(e);
+    var Je = Array.isArray;
+    function X(e) {
+      return Je(e);
     }
-    function Je(e) {
+    function Ke(e) {
       {
-        var r = typeof Symbol == "function" && Symbol.toStringTag, t = r && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return t;
+        var r = typeof Symbol == "function" && Symbol.toStringTag, n = r && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return n;
       }
     }
-    function Ke(e) {
+    function ze(e) {
       try {
@@ -377,6 +377,6 @@ return be(e), !1;
     function he(e) {
-      if (Ke(e))
-        return b("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Je(e)), be(e);
+      if (ze(e))
+        return c("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Ke(e)), be(e);
     }
-    var $ = d.ReactCurrentOwner, ze = {
+    var W = C.ReactCurrentOwner, He = {
       key: !0,
@@ -386,6 +386,6 @@ ref: !0,
       __source: !0
-    }, ye, Re, X;
-    X = {};
-    function He(e) {
-      if (B.call(e, "ref")) {
+    }, ye, Ee, Z;
+    Z = {};
+    function Xe(e) {
+      if (q.call(e, "ref")) {
         var r = Object.getOwnPropertyDescriptor(e, "ref").get;
@@ -397,4 +397,4 @@ if (r && r.isReactWarning)
     }
-    function Xe(e) {
-      if (B.call(e, "key")) {
+    function Ze(e) {
+      if (q.call(e, "key")) {
         var r = Object.getOwnPropertyDescriptor(e, "key").get;
@@ -406,15 +406,15 @@ if (r && r.isReactWarning)
     }
-    function Ze(e, r) {
-      if (typeof e.ref == "string" && $.current && r && $.current.stateNode !== r) {
-        var t = S($.current.type);
-        X[t] || (b('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($.current.type), e.ref), X[t] = !0);
+    function Qe(e, r) {
+      if (typeof e.ref == "string" && W.current && r && W.current.stateNode !== r) {
+        var n = S(W.current.type);
+        Z[n] || (c('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(W.current.type), e.ref), Z[n] = !0);
       }
     }
-    function Qe(e, r) {
+    function pe(e, r) {
       {
-        var t = function() {
-          ye || (ye = !0, b("%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)", r));
+        var n = function() {
+          ye || (ye = !0, c("%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)", r));
         };
-        t.isReactWarning = !0, Object.defineProperty(e, "key", {
-          get: t,
+        n.isReactWarning = !0, Object.defineProperty(e, "key", {
+          get: n,
           configurable: !0
@@ -426,7 +426,7 @@ });
       {
-        var t = function() {
-          Re || (Re = !0, b("%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)", r));
+        var n = function() {
+          Ee || (Ee = !0, c("%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)", r));
         };
-        t.isReactWarning = !0, Object.defineProperty(e, "ref", {
-          get: t,
+        n.isReactWarning = !0, Object.defineProperty(e, "ref", {
+          get: n,
           configurable: !0
@@ -436,10 +436,10 @@ });
     }
-    var rr = function(e, r, t, a, l, c, o) {
+    var rr = function(e, r, n, a, u, f, o) {
       var i = {
-        $$typeof: f,
+        $$typeof: l,
         type: e,
         key: r,
-        ref: t,
+        ref: n,
         props: o,
-        _owner: c
+        _owner: f
       };
@@ -460,40 +460,40 @@ return i._store = {}, Object.defineProperty(i._store, "validated", {
         writable: !1,
-        value: l
+        value: u
       }), Object.freeze && (Object.freeze(i.props), Object.freeze(i)), i;
     };
-    function tr(e, r, t, a, l) {
+    function tr(e, r, n, a, u) {
       {
-        var c, o = {}, i = null, h = null;
-        t !== void 0 && (he(t), i = "" + t), Xe(r) && (he(r.key), i = "" + r.key), He(r) && (h = r.ref, Ze(r, l));
-        for (c in r)
-          B.call(r, c) && !ze.hasOwnProperty(c) && (o[c] = r[c]);
+        var f, o = {}, i = null, h = null;
+        n !== void 0 && (he(n), i = "" + n), Ze(r) && (he(r.key), i = "" + r.key), Xe(r) && (h = r.ref, Qe(r, u));
+        for (f in r)
+          q.call(r, f) && !He.hasOwnProperty(f) && (o[f] = r[f]);
         if (e && e.defaultProps) {
-          var s = e.defaultProps;
-          for (c in s)
-            o[c] === void 0 && (o[c] = s[c]);
+          var v = e.defaultProps;
+          for (f in v)
+            o[f] === void 0 && (o[f] = v[f]);
         }
         if (i || h) {
-          var v = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
-          i && Qe(o, v), h && er(o, v);
+          var g = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
+          i && pe(o, g), h && er(o, g);
         }
-        return rr(e, i, h, l, a, $.current, o);
+        return rr(e, i, h, u, a, W.current, o);
       }
     }
-    var Z = d.ReactCurrentOwner, Ee = d.ReactDebugCurrentFrame;
-    function p(e) {
+    var Q = C.ReactCurrentOwner, Re = C.ReactDebugCurrentFrame;
+    function A(e) {
       if (e) {
-        var r = e._owner, t = M(e.type, e._source, r ? r.type : null);
-        Ee.setExtraStackFrame(t);
+        var r = e._owner, n = M(e.type, e._source, r ? r.type : null);
+        Re.setExtraStackFrame(n);
       } else
-        Ee.setExtraStackFrame(null);
+        Re.setExtraStackFrame(null);
     }
-    var Q;
-    Q = !1;
+    var p;
+    p = !1;
     function ee(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === f;
+      return typeof e == "object" && e !== null && e.$$typeof === l;
     }
     function me() {
       {
-        if (Z.current) {
-          var e = S(Z.current.type);
+        if (Q.current) {
+          var e = S(Q.current.type);
           if (e)
@@ -510,6 +510,6 @@ return `
         if (e !== void 0) {
-          var r = e.fileName.replace(/^.*[\\\/]/, ""), t = e.lineNumber;
+          var r = e.fileName.replace(/^.*[\\\/]/, ""), n = e.lineNumber;
           return `
 
-Check your code at ` + r + ":" + t + ".";
+Check your code at ` + r + ":" + n + ".";
         }
@@ -524,6 +524,6 @@ return "";
         if (!r) {
-          var t = typeof e == "string" ? e : e.displayName || e.name;
-          t && (r = `
+          var n = typeof e == "string" ? e : e.displayName || e.name;
+          n && (r = `
 
-Check the top-level render call using <` + t + ">.");
+Check the top-level render call using <` + n + ">.");
         }
@@ -538,8 +538,8 @@ return r;
         e._store.validated = !0;
-        var t = ar(r);
-        if (_e[t])
+        var n = ar(r);
+        if (_e[n])
           return;
-        _e[t] = !0;
+        _e[n] = !0;
         var a = "";
-        e && e._owner && e._owner !== Z.current && (a = " It was passed a child from " + S(e._owner.type) + "."), p(e), b('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', t, a), p(null);
+        e && e._owner && e._owner !== Q.current && (a = " It was passed a child from " + S(e._owner.type) + "."), A(e), c('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', n, a), A(null);
       }
@@ -551,5 +551,5 @@ }
           return;
-        if (H(e))
-          for (var t = 0; t < e.length; t++) {
-            var a = e[t];
+        if (X(e))
+          for (var n = 0; n < e.length; n++) {
+            var a = e[n];
             ee(a) && Te(a, r);
@@ -560,5 +560,5 @@ }
         else if (e) {
-          var l = N(e);
-          if (typeof l == "function" && l !== e.entries)
-            for (var c = l.call(e), o; !(o = c.next()).done; )
+          var u = U(e);
+          if (typeof u == "function" && u !== e.entries)
+            for (var f = u.call(e), o; !(o = f.next()).done; )
               ee(o.value) && Te(o.value, r);
@@ -573,18 +573,18 @@ }
           return;
-        var t;
+        var n;
         if (typeof r == "function")
-          t = r.propTypes;
-        else if (typeof r == "object" && (r.$$typeof === u || r.$$typeof === R))
-          t = r.propTypes;
+          n = r.propTypes;
+        else if (typeof r == "object" && (r.$$typeof === b || r.$$typeof === y))
+          n = r.propTypes;
         else
           return;
-        if (t) {
+        if (n) {
           var a = S(r);
-          qe(t, e.props, "prop", a, e);
-        } else if (r.PropTypes !== void 0 && !Q) {
-          Q = !0;
-          var l = S(r);
-          b("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", l || "Unknown");
+          Ge(n, e.props, "prop", a, e);
+        } else if (r.PropTypes !== void 0 && !p) {
+          p = !0;
+          var u = S(r);
+          c("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", u || "Unknown");
         }
-        typeof r.getDefaultProps == "function" && !r.getDefaultProps.isReactClassApproved && b("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
+        typeof r.getDefaultProps == "function" && !r.getDefaultProps.isReactClassApproved && c("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
       }
@@ -594,26 +594,26 @@ }
       {
-        for (var r = Object.keys(e.props), t = 0; t < r.length; t++) {
-          var a = r[t];
+        for (var r = Object.keys(e.props), n = 0; n < r.length; n++) {
+          var a = r[n];
           if (a !== "children" && a !== "key") {
-            p(e), b("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", a), p(null);
+            A(e), c("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", a), A(null);
             break;
           }
         }
-        e.ref !== null && (p(e), b("Invalid attribute `ref` supplied to `React.Fragment`."), p(null));
+        e.ref !== null && (A(e), c("Invalid attribute `ref` supplied to `React.Fragment`."), A(null));
       }
     }
-    function Se(e, r, t, a, l, c) {
+    function Se(e, r, n, a, u, f) {
       {
-        var o = Ye(e);
+        var o = Ve(e);
         if (!o) {
           var i = "";
           (e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (i += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
-          var h = nr(l);
+          var h = nr(u);
           h ? i += h : i += me();
-          var s;
-          e === null ? s = "null" : H(e) ? s = "array" : e !== void 0 && e.$$typeof === f ? (s = "<" + (S(e.type) || "Unknown") + " />", i = " Did you accidentally export a JSX literal instead of a component?") : s = typeof e, b("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", s, i);
+          var v;
+          e === null ? v = "null" : X(e) ? v = "array" : e !== void 0 && e.$$typeof === l ? (v = "<" + (S(e.type) || "Unknown") + " />", i = " Did you accidentally export a JSX literal instead of a component?") : v = typeof e, c("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", v, i);
         }
-        var v = tr(e, r, t, l, c);
-        if (v == null)
-          return v;
+        var g = tr(e, r, n, u, f);
+        if (g == null)
+          return g;
         if (o) {
@@ -623,115 +623,130 @@ var E = r.children;
             if (a)
-              if (H(E)) {
-                for (var A = 0; A < E.length; A++)
-                  Ce(E[A], e);
+              if (X(E)) {
+                for (var D = 0; D < E.length; D++)
+                  Ce(E[D], e);
                 Object.freeze && Object.freeze(E);
               } else
-                b("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
+                c("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
               Ce(E, e);
         }
-        return e === C ? or(v) : ir(v), v;
+        return e === _ ? or(g) : ir(g), g;
       }
     }
-    function ur(e, r, t) {
-      return Se(e, r, t, !0);
+    function ur(e, r, n) {
+      return Se(e, r, n, !0);
     }
-    function lr(e, r, t) {
-      return Se(e, r, t, !1);
+    function lr(e, r, n) {
+      return Se(e, r, n, !1);
     }
     var cr = lr, fr = ur;
-    W.Fragment = C, W.jsx = cr, W.jsxs = fr;
-  }()), W;
+    V.Fragment = _, V.jsx = cr, V.jsxs = fr;
+  }()), V;
 }
-(function(n) {
-  process.env.NODE_ENV === "production" ? n.exports = hr() : n.exports = yr();
+(function(t) {
+  process.env.NODE_ENV === "production" ? t.exports = yr() : t.exports = Er();
 })(re);
-const Y = re.exports.jsx, je = re.exports.jsxs, _r = (n) => {
-  var _;
-  const [f, m] = br((_ = n.value) != null ? _ : []), {
-    classes: C
-  } = Rr(), {
+const F = re.exports.jsx, je = re.exports.jsxs, Tr = (t) => {
+  var b;
+  const [l, R] = br((b = t.value) != null ? b : []), {
+    classes: _
+  } = Rr({
+    error: (t == null ? void 0 : t.error) !== void 0
+  }), {
     disabled: j,
-    size: O
-  } = n;
-  function k(u) {
-    var R, T, P, D, V, N;
-    u.stopPropagation();
-    const y = u.currentTarget.value, g = (R = n == null ? void 0 : n.separators) != null ? R : [",", ";", "|", "/", "\\"];
-    if (u.key === "Enter") {
-      const d = u.currentTarget.value;
-      d && (n.beforeAddValidate ? n.beforeAddValidate(d, f) && (m([...f, d]), (T = n == null ? void 0 : n.onChange) == null || T.call(n, [...f, d])) : (m([...f, d]), (P = n == null ? void 0 : n.onChange) == null || P.call(n, [...f, d])), u.currentTarget.value = "");
+    size: O,
+    error: k
+  } = t;
+  function T(s) {
+    var m, P, $, N, U, C;
+    s.stopPropagation();
+    const d = s.currentTarget.value, y = (m = t == null ? void 0 : t.separators) != null ? m : [",", ";", "|", "/", "\\"];
+    if (s.key === "Enter") {
+      const c = s.currentTarget.value;
+      c && (t.beforeAddValidate ? t.beforeAddValidate(c, l) && (R([...l, c]), (P = t == null ? void 0 : t.onChange) == null || P.call(t, [...l, c])) : (R([...l, c]), ($ = t == null ? void 0 : t.onChange) == null || $.call(t, [...l, c])), s.currentTarget.value = "");
     }
-    if (!y && !n.disableBackspaceRemove && f.length > 0 && u.key === "Backspace" && (u.currentTarget.value = n.isEditOnRemove ? `${f[f.length - 1]}` : "", m(f.slice(0, f.length - 1))), y && g.includes(u.key)) {
-      const d = y.slice(0, y.length - 1);
-      d && (n.beforeAddValidate ? n.beforeAddValidate(d, f) && (m([...f, d]), (D = n == null ? void 0 : n.onChange) == null || D.call(n, [...f, d])) : (m([...f, d]), (V = n == null ? void 0 : n.onChange) == null || V.call(n, [...f, d])), u.currentTarget.value = "");
+    if (!d && !t.disableBackspaceRemove && l.length > 0 && s.key === "Backspace" && (s.currentTarget.value = t.isEditOnRemove ? `${l[l.length - 1]}` : "", R(l.slice(0, l.length - 1))), d && y.includes(s.key)) {
+      const c = d.slice(0, d.length - 1);
+      c && (t.beforeAddValidate ? t.beforeAddValidate(c, l) && (R([...l, c]), (N = t == null ? void 0 : t.onChange) == null || N.call(t, [...l, c])) : (R([...l, c]), (U = t == null ? void 0 : t.onChange) == null || U.call(t, [...l, c])), s.currentTarget.value = "");
     }
-    (N = n == null ? void 0 : n.onKeyUp) == null || N.call(n, u);
+    (C = t == null ? void 0 : t.onKeyUp) == null || C.call(t, s);
   }
-  return /* @__PURE__ */ je(Oe.Wrapper, {
-    className: C.tagsWrapper,
-    color: "red",
-    children: [/* @__PURE__ */ Y(ke, {
-      spacing: 5,
-      children: f.map((u) => /* @__PURE__ */ Y(sr, {
-        size: O,
-        children: /* @__PURE__ */ je(ke, {
-          position: "apart",
-          children: [/* @__PURE__ */ Y(dr, {
-            children: u
-          }), /* @__PURE__ */ Y(vr, {
-            onClick: () => {
-              var y;
-              m(f.filter((g) => g !== u)), (y = n == null ? void 0 : n.onRemoved) == null || y.call(n, u);
-            },
-            className: C.tagRemoveButton
-          })]
-        })
-      }, u))
-    }), /* @__PURE__ */ Y(Oe, {
-      disabled: j,
-      onKeyUp: k,
-      placeholder: n == null ? void 0 : n.placeHolder,
-      size: O
-    })]
+  return hr(() => {
+    var s, d;
+    (s = t == null ? void 0 : t.onBlur) == null || s.call(t, l), (d = t == null ? void 0 : t.onChange) == null || d.call(t, l);
+  }, [l]), /* @__PURE__ */ F(Oe.Wrapper, {
+    error: k,
+    children: /* @__PURE__ */ je("div", {
+      className: _.tagsWrapper,
+      children: [/* @__PURE__ */ F(ke, {
+        spacing: 5,
+        children: l.map((s) => /* @__PURE__ */ F(sr, {
+          size: O,
+          children: /* @__PURE__ */ je(ke, {
+            position: "apart",
+            children: [/* @__PURE__ */ F(dr, {
+              children: s
+            }), /* @__PURE__ */ F(vr, {
+              onClick: () => {
+                var d;
+                R(l.filter((y) => y !== s)), (d = t == null ? void 0 : t.onRemoved) == null || d.call(t, s);
+              },
+              className: _.tagRemoveButton
+            })]
+          })
+        }, s))
+      }), /* @__PURE__ */ F(Oe, {
+        disabled: j,
+        onKeyUp: T,
+        placeholder: t == null ? void 0 : t.placeHolder,
+        size: O
+      })]
+    })
   });
-}, Rr = gr((n) => ({
-  tagsWrapper: {
-    display: "flex",
-    flexWrap: "wrap",
-    width: "100%",
-    minWidth: "100%",
-    border: `${G(1)} solid ${n.colorScheme === "dark" ? n.colors.dark[4] : n.colors.gray[4]}`,
-    backgroundColor: n.colorScheme === "dark" ? n.colors.dark[6] : n.white,
-    transition: "border-color 100ms ease",
-    "&:focus, &:focus-within": n.focusRingStyles.inputStyles(n),
-    borderRadius: G(4),
-    color: n.colorScheme === "dark" ? n.colors.dark[0] : n.black,
-    outline: 0,
-    padding: `${G(4)} ${G(8)}`,
-    "&:disabled": {
-      backgroundColor: "transparent",
-      "&:focus, &:focus-within": {
-        outline: "none",
-        borderColor: "transparent"
+}, Rr = gr(
+  (t, {
+    error: l
+  }) => ({
+    tagsWrapper: {
+      display: "flex",
+      flexWrap: "wrap",
+      width: "100%",
+      minWidth: "100%",
+      border: `${J(1)} solid ${t.colorScheme === "dark" ? l ? t.colors.red[6] : t.colors.dark[6] : l ? t.colors.red[6] : t.colors.gray[2]}`,
+      backgroundColor: t.colorScheme === "dark" ? t.colors.dark[6] : t.white,
+      transition: "border-color 100ms ease",
+      "&:focus, &:focus-within": t.focusRingStyles.inputStyles(t),
+      borderRadius: J(4),
+      color: t.colorScheme === "dark" ? t.colors.dark[0] : t.black,
+      outline: 0,
+      padding: `${J(4)} ${J(8)}`,
+      "&:disabled": {
+        backgroundColor: "transparent",
+        "&:focus, &:focus-within": {
+          outline: "none",
+          borderColor: "transparent"
+        }
+      },
+      input: {
+        border: "none",
+        width: "100%",
+        display: "inline-block",
+        margin: 0,
+        outline: 0,
+        padding: 0
       }
     },
-    input: {
+    tagRemoveButton: {
+      color: t.colorScheme === "dark" ? t.colors.dark[0] : t.black,
+      backgroundColor: "transparent",
       border: "none",
-      width: "100%",
-      display: "inline-block"
+      "&:hover": {
+        backgroundColor: "transparent"
+      }
     }
-  },
-  tagRemoveButton: {
-    color: n.colorScheme === "dark" ? n.colors.dark[0] : n.black,
-    backgroundColor: "transparent",
-    border: "none",
-    "&:hover": {
-      backgroundColor: "transparent"
-    }
-  }
-}));
+  })
+);
 export {
-  _r as MantineTagInput,
+  Tr as TagInput,
   Rr as useTagStyles
 };

dist/mantine-tag-input.styles.d.ts

@@ -1,2 +0,5 @@
-export declare const useTagStyles: (params: void, options?: import("@mantine/core").UseStylesOptions<string> | undefined) => {
+import { ReactNode } from 'react';
+export declare const useTagStyles: (params: {
+    error?: ReactNode;
+}, options?: import("@mantine/core").UseStylesOptions<string> | undefined) => {
     classes: {
@@ -3,0 +6,0 @@ tagsWrapper: string;

package.json

 {
   "name": "mantine-tag-input",
   "private": false,
-  "version": "0.0.1",
+  "version": "0.0.2",
   "type": "module",
@@ -67,7 +67,7 @@ "scripts": {
   "peerDependencies": {
-    "react": "16.8.0 || >=17.x",
-    "react-dom": "16.8.0 || >=17.x",
+    "@emotion/react": "^11.11.1",
     "@mantine/core": "^6.0.16",
     "@mantine/hooks": "^6.0.16",
-    "@emotion/react": "^11.11.1"
+    "react": "16.8.0 || >=17.x",
+    "react-dom": "16.8.0 || >=17.x"
   },
@@ -94,4 +94,5 @@ "repository": {
     "@mantine/core": "^6.0.16",
-    "@mantine/hooks": "^6.0.16"
+    "@mantine/hooks": "^6.0.16",
+    "mantine-tag-input": "link:"
   }
 }

README.md

@@ -0,4 +1,191 @@
+# mantine-tag-input
+A react tag input built on mantine component library and it adapts well with the theme of the library.
+
 [![Publish package on NPM](https://github.com/Dellysn/mantine-tag-input/actions/workflows/publish.yml/badge.svg)](https://github.com/Dellysn/mantine-tag-input/actions/workflows/publish.yml)
 
-# mantine-tag-input
-A react tag input built on mantine component library
+
+![Mantine Tag Input](./src/tag-input-demo.gif)
+
+
+Installation
+------------
+
+To start using mantine Tag Input in your React project, follow these simple steps:
+
+1.  Install the package via npm or yarn:
+
+bash
+
+```bash
+npm install mantine-tag-input
+```
+
+or
+
+bash
+
+```bash
+yarn add mantine-tag-input
+```
+or
+
+bash
+
+```bash
+pnpm add mantine-tag-input
+```
+2.  Import the component in your desired file:
+
+javascript
+
+```javascript
+import { TagsInput } from 'mantine-tag-input';
+```
+
+Props
+-----
+
+### name (optional)
+
+*   Type: `string`
+*   Default: `undefined`
+
+The `name` prop allows you to specify the name attribute for the input field. This can be useful for form submission or accessing the input value via JavaScript.
+
+### placeHolder (optional)
+
+*   Type: `string`
+*   Default: `undefined`
+
+The `placeHolder` prop defines the placeholder text that appears in the input field when no tags are present.
+
+### value (optional)
+
+*   Type: `string[]`
+*   Default: `[]`
+
+The `value` prop accepts an array of strings representing the initial tags to be displayed in the input field.
+
+### onChange (optional)
+
+*   Type: `(tags: string[]) => void`
+*   Default: `undefined`
+
+The `onChange` prop is a callback function that is triggered whenever there is a change in the tags. It receives an array of strings representing the updated tags as a parameter.
+
+### onBlur (optional)
+
+*   Type: `any`
+*   Default: `undefined`
+
+The `onBlur` prop allows you to define a function that is called when the input field loses focus.
+
+### separators (optional)
+
+*   Type: `string[]`
+*   Default: `undefined`
+
+The `separators` prop allows you to specify an array of strings that will act as separators for creating multiple tags. By default, the tags are separated by commas.
+
+### disableBackspaceRemove (optional)
+
+*   Type: `boolean`
+*   Default: `false`
+
+The `disableBackspaceRemove` prop, when set to `true`, prevents the removal of tags by pressing the Backspace key.
+
+### onExisting (optional)
+
+*   Type: `(tag: string) => void`
+*   Default: `undefined`
+
+The `onExisting` prop is a callback function that is triggered when an existing tag is added. It receives the added tag as a parameter.
+
+### onRemoved (optional)
+
+*   Type: `(tag: string) => void`
+*   Default: `undefined`
+
+The `onRemoved` prop is a callback function that is triggered when a tag is removed. It receives the removed tag as a parameter.
+
+### disabled (optional)
+
+*   Type: `boolean`
+*   Default: `false`
+
+The `disabled` prop, when set to `true`, disables the input field and prevents any further interaction with the component.
+
+### isEditOnRemove (optional)
+
+*   Type: `boolean`
+*   Default: `false`
+
+The `isEditOnRemove` prop, when set to `true`, allows users to edit tags after they have been added.
+
+### beforeAddValidate (optional)
+
+*   Type: `(tag: string, existingTags: string[]) => boolean`
+*   Default: `undefined`
+
+The `beforeAddValidate` prop allows you to define a validation function that is called before a tag is added. The function receives the tag to be added and the existing tags as parameters, and should return a boolean value (`true` to allow the addition and `false` to prevent it).
+
+### onKeyUp (optional)
+
+*   Type: `(e: React.KeyboardEvent<HTMLInputElement>) => void`
+*   Default: `undefined`
+
+The `onKeyUp` prop is a callback function that is triggered when a key is released within the input field.
+
+### size (optional)
+
+*   Type: `'xs' | 'sm' | 'md' | 'lg' | 'xl'`
+*   Default: `undefined`
+
+The `size` prop allows you to specify the size of the input field. It accepts one of the following values: `'xs'`, `'sm'`, `'md'`, `'lg'`, or `'xl'`.
+
+### error (optional)
+
+*   Type: `React.ReactNode`
+*   Default: `undefined`
+
+The `error` prop allows you to display an error message below the input field. It accepts a React node as a value.
+
+Example Usage
+-------------
+
+Here's an example that demonstrates how you can utilize the mantine Tag Input component with some of the available props:
+
+javascript
+
+```javascript
+import { MantineTagsInput } from 'mantine-tag-input';
+
+const MyComponent = () => {
+  const handleTagChange = (tags) => {
+    // Handle tag change logic here
+  };
+
+  const handleTagRemove = (tag) => {
+    // Handle tag removal logic here
+  };
+
+  return (
+    <MantineTagsInput
+      name="tags"
+      placeHolder="Enter tags..."
+      value={['tag1', 'tag2', 'tag3']}
+      onChange={handleTagChange}
+      onRemoved={handleTagRemove}
+      separators={[' ', ',']}
+      disableBackspaceRemove={true}
+      isEditOnRemove={true}
+    />
+  );
+};
+```
+
+In this example, the `MyComponent` function renders the `TagsInput` component with several props configured. Adjust the prop values as per your requirements to fully customize the behavior of the mantine Tag Input component.
+
+Congratulations! You are now equipped with the knowledge to utilize the mantine Tag Input component effectively in your React applications. Feel free to explore additional props and experiment with different configurations to suit your specific use cases.
+
+Happy coding!

src/component/mantine-tag-input.styles.ts

 import { createStyles, rem } from '@mantine/core'
+import { ReactNode } from 'react'
 
-export const useTagStyles = createStyles((theme) => {
-  return {
-    tagsWrapper: {
-      display: 'flex',
-      flexWrap: 'wrap',
-      width: '100%',
-      minWidth: '100%',
-      border: `${rem(1)} solid ${
-        theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4]
-      }`,
-      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white,
-      transition: 'border-color 100ms ease',
-      '&:focus, &:focus-within': theme.focusRingStyles.inputStyles(theme),
-      borderRadius: rem(4),
-      color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
-      outline: 0,
-      padding: `${rem(4)} ${rem(8)}`,
-      '&:disabled': {
-        backgroundColor: 'transparent',
+export const useTagStyles = createStyles(
+  (
+    theme,
+    {
+      error,
+    }: {
+      error?: ReactNode
+    },
+  ) => {
+    return {
+      tagsWrapper: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        width: '100%',
+        minWidth: '100%',
+        border: `${rem(1)} solid ${
+          theme.colorScheme === 'dark'
+            ? error
+              ? theme.colors.red[6]
+              : theme.colors.dark[6]
+            : error
+            ? theme.colors.red[6]
+            : theme.colors.gray[2]
+        }`,
+        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white,
+        transition: 'border-color 100ms ease',
+        '&:focus, &:focus-within': theme.focusRingStyles.inputStyles(theme),
+        borderRadius: rem(4),
+        color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
+        outline: 0,
+        padding: `${rem(4)} ${rem(8)}`,
+        '&:disabled': {
+          backgroundColor: 'transparent',
+          '&:focus, &:focus-within': {
+            outline: 'none',
+            borderColor: 'transparent',
+          },
+        },
 
-        '&:focus, &:focus-within': {
-          outline: 'none',
-          borderColor: 'transparent',
+        input: {
+          border: 'none',
+          width: '100%',
+          display: 'inline-block',
+          margin: 0,
+          outline: 0,
+          padding: 0,
         },
       },
 
-      input: {
+      tagRemoveButton: {
+        color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
+        backgroundColor: 'transparent',
         border: 'none',
-        width: '100%',
-        display: 'inline-block',
+        '&:hover': {
+          backgroundColor: 'transparent',
+        },
       },
-    },
-
-    tagRemoveButton: {
-      color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
-      backgroundColor: 'transparent',
-      border: 'none',
-      '&:hover': {
-        backgroundColor: 'transparent',
-      },
-    },
-  }
-})
+    }
+  },
+)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

234196

increased by256.54%

Number of package files

16

increased by6.67%

Lines of code

1078

increased by4.76%

Number of lines in readme file

191

increased by3720%

Worsened metrics

Dependency count

9

increased by12.5%

Dependency changes

• + Addedmantine-tag-input@link: