react-hook-time - npm Package Compare versions

Comparing version 0.0.1-alpha.2 to 0.0.1-alpha.3

dist/index.d.ts

@@ -1,1 +0,2 @@
-export { useTimer, useStopwatch, useStatelessTimer, } from './src/ReactTimer';
+import useTimer from './src/useTimer';
+export default useTimer;

dist/index.es.js

@@ -1,173 +0,169 @@
-import { useEffect as k, useRef as j, useState as E } from "react";
-function J(e) {
-  k(() => {
-    e();
+import { useEffect as E, useRef as C, useState as V } from "react";
+function A(t) {
+  E(() => {
+    t();
   }, []);
 }
-function V(e) {
-  k(() => e, []);
+function G(t) {
+  E(() => t, []);
 }
-const z = (e) => {
-  const d = new Date(e);
-  return isNaN(d.getTime()) ? void 0 : d.getTime() - Date.now();
-}, v = (e, d) => {
-  const f = typeof e != "number", s = f ? z(e) : e;
-  if (typeof s != "number")
+const J = (t) => {
+  const a = new Date(t);
+  return isNaN(a.getTime()) ? void 0 : a.getTime() - Date.now();
+}, H = (t, a) => {
+  const l = typeof t != "number", c = l ? J(t) : t;
+  if (typeof c != "number")
     return 0;
-  if (f)
-    return s;
-  switch (d) {
+  if (l)
+    return c;
+  switch (a) {
     case "ms":
-      return s;
+      return c;
     case "sec":
-      return s * 1e3;
+      return c * 1e3;
     case "min":
-      return s * 6e4;
+      return c * 6e4;
     case "hour":
-      return s * 36e5;
+      return c * 36e5;
     case "day":
-      return s * 864e5;
+      return c * 864e5;
   }
-}, m = (e) => e / 1e3, q = (e) => {
-  const p = e / 1e3 / 60 / 60 / 24, l = p / 365, y = Math.floor(l), c = p % 365, M = Math.floor(c), o = (c - M) * 24, S = Math.floor(o), n = (o - S) * 60, r = Math.floor(n), i = (n - r) * 60, D = Math.round(i);
-  return { years: y, days: M, hours: S, minutes: r, seconds: D };
+}, m = (t) => t / 1e3, K = (t) => {
+  const M = t / 1e3 / 60 / 60 / 24, R = M / 365, d = Math.floor(R), b = M % 365, h = Math.floor(b), i = (b - h) * 24, y = Math.floor(i), g = (i - y) * 60, U = Math.floor(g), w = (g - U) * 60, T = Math.round(w);
+  return {
+    years: d,
+    days: h,
+    hours: y,
+    minutes: U,
+    seconds: T
+  };
 };
-function G(e, d) {
+function $(t, a) {
+  let l = t, c = a;
+  !["number", "string"].includes(typeof t) && !(t instanceof Date) && (l = 0, c = t);
   const {
-    autostart: f,
-    speedUpFirstSecond: s,
-    onPause: p,
-    onStart: l,
-    onReset: y,
-    onUpdate: c,
-    onTimeSet: M,
-    onEnd: o,
-    timeUnit: S = "sec",
-    stepInMs: n = 1e3
-  } = d || {}, r = j(null), i = j(null), D = j(!0), h = j(v(e, S)), [u, U] = E(h.current), [w, B] = E(!!f), H = () => {
-    i.current && (B(!1), r.current && (clearInterval(r.current), r.current = null), clearTimeout(i.current), i.current = null);
+    autostart: M,
+    preventUpdate: R,
+    stopwatch: d,
+    speedUpFirstSecond: b,
+    onPause: h,
+    onStart: i,
+    onCancel: y,
+    onReset: g,
+    onUpdate: U,
+    onTimeSet: w,
+    onEnd: T,
+    timeUnit: Y = "sec",
+    stepInMs: N = 1e3
+  } = c || {}, o = C(null), f = C(null), k = C(!0), F = H(l, Y), p = C(F), [n, v] = V(p.current), [B, S] = V(!!M), q = () => {
+    o.current && (y && y(), I());
+  }, I = () => {
+    if (R) {
+      if (!o.current)
+        return;
+      S(!1), clearInterval(o.current), o.current = null;
+      return;
+    }
+    f.current && (S(!1), o.current && (clearInterval(o.current), o.current = null), clearTimeout(f.current), f.current = null);
   };
-  k(() => {
-    if (D.current) {
-      D.current = !1;
+  E(() => {
+    if (k.current) {
+      k.current = !1;
       return;
     }
-    u === 0 && (o && o(), H()), c && c(m(u));
-  }, [u]);
-  const x = (t) => {
-    i.current = setTimeout(
-      () => {
-        const T = t - 1e3;
-        U(T), T !== 0 && (r.current = setInterval(() => {
-          U((I) => I - 1e3);
-        }, n));
-      },
-      s ? 300 : n
-    );
-  }, Y = (t) => {
-    r.current || i.current || (l && l(m(u)), B(!0), U(t), x(t));
-  }, F = () => {
-    r.current || i.current || u === 0 || (l && l(m(u)), B(!0), x(u));
-  };
-  J(() => f && F()), V(H);
-  const O = ({
-    updatedTime: t,
-    continueIfWasRunning: T,
-    startIfWasStopped: I
-  }) => {
-    T && w ? U(t) : I && !w ? Y(t) : (H(), U(t));
-  };
-  return {
-    start: F,
-    pause: () => {
-      i.current && (H(), p && p(m(u)));
-    },
-    reset: (t) => {
-      const { startIfWasStopped: T, continueIfWasRunning: I } = t || {};
-      y && y(m(h.current)), O({ updatedTime: h.current, continueIfWasRunning: I, startIfWasStopped: T });
-    },
-    setTime: (t, T) => {
-      const { timeUnit: I = "sec", continueIfWasRunning: N, startIfWasStopped: P } = T || {}, R = v(t, I);
-      M && M(m(R)), h.current = R, O({ updatedTime: R, continueIfWasRunning: N, startIfWasStopped: P });
-    },
-    incTimeBy: (t, T) => {
-      const { timeUnit: I = "sec", continueIfWasRunning: N, startIfWasStopped: P } = T || {}, R = u + v(t, I);
-      h.current = R, O({ updatedTime: R, continueIfWasRunning: N, startIfWasStopped: P });
-    },
-    decTimeBy: (t, T) => {
-      const { timeUnit: I = "sec", continueIfWasRunning: N, startIfWasStopped: P } = T || {};
-      let R = u - v(t, I);
-      R < 0 && (R = 0), h.current = R, O({ updatedTime: R, continueIfWasRunning: N, startIfWasStopped: P });
-    },
-    isRunning: w,
-    currentTime: m(u),
-    formattedCurrentTime: q(u)
-  };
-}
-function K(e) {
-  const { initialTime: d = 0, autostart: f, onPause: s, onStart: p, onReset: l, onTimeSet: y, onUpdate: c, stepInMs: M = 1e3 } = e || {}, o = j(null), S = v(d, "sec"), [n, r] = E(S), [i, D] = E(!!f), [h, u] = E(!0), U = () => {
-    o.current && (D(!1), clearInterval(o.current), o.current = null);
-  };
-  k(() => {
-    if (h)
-      return u(!1);
-    c && c(m(n));
+    !d && n === 0 && (T && T(), I()), U && U(m(n));
   }, [n]);
-  const w = () => {
-    o.current || (p && p(m(n)), D(!0), o.current = setInterval(() => {
-      r((a) => a + 1e3);
-    }, M));
+  const P = (e) => {
+    f.current = setTimeout(() => {
+      const r = d ? e + 1e3 : Math.max(e - 1e3, 0);
+      v(r), r !== 0 && (o.current = setInterval(() => {
+        v((s) => d ? s + 1e3 : Math.max(s - 1e3, 0));
+      }, N));
+    }, b ? 300 : N);
+  }, z = (e) => {
+    o.current || f.current || !e || (i && i(m(n)), S(!0), v(e), P(e));
+  }, j = () => {
+    if (!o.current) {
+      if (R) {
+        i && i(), S(!0), o.current = setTimeout(() => {
+          T && T(), I();
+        }, F);
+        return;
+      }
+      f.current || !d && n === 0 || (i && i(m(n)), S(!0), P(n));
+    }
   };
-  J(() => f && w()), V(U);
-  const B = ({
-    updatedTime: a,
-    continueIfWasRunning: g,
-    startIfWasStopped: W
+  A(() => M && j()), G(I);
+  const x = ({
+    updatedTime: e,
+    continueIfWasRunning: r,
+    startIfWasStopped: s
   }) => {
-    g && i ? r(a) : W && !i ? (setTimeout(() => r(a), 0), w()) : (U(), r(a));
+    r && B ? v(e) : s && !B ? z(e) : (I(), v(e));
   };
-  return {
-    start: w,
+  return R ? {
+    start: j,
+    cancel: q,
+    isRunning: B
+  } : {
+    start: j,
     pause: () => {
-      o.current && (U(), s && s(m(n)));
+      f.current && (I(), h && h(m(n)));
     },
-    reset: (a) => {
-      const { startIfWasStopped: g, continueIfWasRunning: W } = a || {};
-      l && l(m(S)), B({ updatedTime: S, continueIfWasRunning: W, startIfWasStopped: g });
+    reset: (e) => {
+      const {
+        startIfWasStopped: r,
+        continueIfWasRunning: s
+      } = e || {};
+      g && g(m(p.current)), x({
+        updatedTime: p.current,
+        continueIfWasRunning: s,
+        startIfWasStopped: r
+      });
     },
-    setTime: (a, g) => {
-      const { timeUnit: W = "sec", continueIfWasRunning: C, startIfWasStopped: b } = g || {}, t = v(a, W);
-      y && y(m(t)), B({ updatedTime: t, continueIfWasRunning: C, startIfWasStopped: b });
+    setTime: (e, r) => {
+      const {
+        timeUnit: s = "sec",
+        continueIfWasRunning: W,
+        startIfWasStopped: D
+      } = r || {}, u = H(e, s);
+      w && w(m(u)), p.current = u, x({
+        updatedTime: u,
+        continueIfWasRunning: W,
+        startIfWasStopped: D
+      });
     },
-    incTimeBy: (a, g) => {
-      const { timeUnit: W = "sec", continueIfWasRunning: C, startIfWasStopped: b } = g || {}, t = n + v(a, W);
-      B({ updatedTime: t, continueIfWasRunning: C, startIfWasStopped: b });
+    incTimeBy: (e, r) => {
+      const {
+        timeUnit: s = "sec",
+        continueIfWasRunning: W,
+        startIfWasStopped: D
+      } = r || {}, u = n + H(e, s);
+      p.current = u, x({
+        updatedTime: u,
+        continueIfWasRunning: W,
+        startIfWasStopped: D
+      });
     },
-    decTimeBy: (a, g) => {
-      const { timeUnit: W = "sec", continueIfWasRunning: C, startIfWasStopped: b } = g || {};
-      let t = n - v(a, W);
-      t < 0 && (t = 0), B({ updatedTime: t, continueIfWasRunning: C, startIfWasStopped: b });
+    decTimeBy: (e, r) => {
+      const {
+        timeUnit: s = "sec",
+        continueIfWasRunning: W,
+        startIfWasStopped: D
+      } = r || {};
+      let u = n - H(e, s);
+      u < 0 && (u = 0), p.current = u, x({
+        updatedTime: u,
+        continueIfWasRunning: W,
+        startIfWasStopped: D
+      });
     },
-    isRunning: i,
+    isRunning: B,
     currentTime: m(n),
-    formattedCurrentTime: q(n)
+    formattedCurrentTime: K(n)
   };
 }
-function L(e, d) {
-  const { autostart: f, onStart: s, onCancel: p, onEnd: l, timeUnit: y = "sec" } = d || {}, c = j(null), [M, o] = E(!!f), S = v(e, y), n = () => {
-    c.current && (o(!1), clearInterval(c.current), c.current = null);
-  }, r = () => {
-    c.current || (s && s(), o(!0), c.current = setTimeout(() => {
-      l && l(), n();
-    }, S));
-  };
-  return J(() => f && r()), V(n), { start: r, cancel: () => {
-    c.current && (p && p(), n());
-  }, isRunning: M };
-}
 export {
-  L as useStatelessTimer,
-  K as useStopwatch,
-  G as useTimer
+  $ as default
 };
 //# sourceMappingURL=index.es.js.map

dist/index.umd.js

@@ -1,2 +0,2 @@
-(function(M,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],t):(M=typeof globalThis<"u"?globalThis:M||self,t(M["react-hook-time"]={},M.React))})(this,function(M,t){"use strict";function N(n){t.useEffect(()=>{n()},[])}function q(n){t.useEffect(()=>n,[])}const x=n=>{const p=new Date(n);return isNaN(p.getTime())?void 0:p.getTime()-Date.now()},h=(n,p)=>{const l=typeof n!="number",u=l?x(n):n;if(typeof u!="number")return 0;if(l)return u;switch(p){case"ms":return u;case"sec":return u*1e3;case"min":return u*6e4;case"hour":return u*36e5;case"day":return u*864e5}},m=n=>n/1e3,V=n=>{const R=n/1e3/60/60/24,d=R/365,U=Math.floor(d),o=R%365,v=Math.floor(o),i=(o-v)*24,g=Math.floor(i),s=(i-g)*60,r=Math.floor(s),c=(s-r)*60,D=Math.round(c);return{years:U,days:v,hours:g,minutes:r,seconds:D}};function z(n,p){const{autostart:l,speedUpFirstSecond:u,onPause:R,onStart:d,onReset:U,onUpdate:o,onTimeSet:v,onEnd:i,timeUnit:g="sec",stepInMs:s=1e3}=p||{},r=t.useRef(null),c=t.useRef(null),D=t.useRef(!0),b=t.useRef(h(n,g)),[a,B]=t.useState(b.current),[E,w]=t.useState(!!l),O=()=>{c.current&&(w(!1),r.current&&(clearInterval(r.current),r.current=null),clearTimeout(c.current),c.current=null)};t.useEffect(()=>{if(D.current){D.current=!1;return}a===0&&(i&&i(),O()),o&&o(m(a))},[a]);const F=e=>{c.current=setTimeout(()=>{const T=e-1e3;B(T),T!==0&&(r.current=setInterval(()=>{B(S=>S-1e3)},s))},u?300:s)},Y=e=>{r.current||c.current||(d&&d(m(a)),w(!0),B(e),F(e))},J=()=>{r.current||c.current||a===0||(d&&d(m(a)),w(!0),F(a))};N(()=>l&&J()),q(O);const H=({updatedTime:e,continueIfWasRunning:T,startIfWasStopped:S})=>{T&&E?B(e):S&&!E?Y(e):(O(),B(e))};return{start:J,pause:()=>{c.current&&(O(),R&&R(m(a)))},reset:e=>{const{startIfWasStopped:T,continueIfWasRunning:S}=e||{};U&&U(m(b.current)),H({updatedTime:b.current,continueIfWasRunning:S,startIfWasStopped:T})},setTime:(e,T)=>{const{timeUnit:S="sec",continueIfWasRunning:P,startIfWasStopped:k}=T||{},I=h(e,S);v&&v(m(I)),b.current=I,H({updatedTime:I,continueIfWasRunning:P,startIfWasStopped:k})},incTimeBy:(e,T)=>{const{timeUnit:S="sec",continueIfWasRunning:P,startIfWasStopped:k}=T||{},I=a+h(e,S);b.current=I,H({updatedTime:I,continueIfWasRunning:P,startIfWasStopped:k})},decTimeBy:(e,T)=>{const{timeUnit:S="sec",continueIfWasRunning:P,startIfWasStopped:k}=T||{};let I=a-h(e,S);I<0&&(I=0),b.current=I,H({updatedTime:I,continueIfWasRunning:P,startIfWasStopped:k})},isRunning:E,currentTime:m(a),formattedCurrentTime:V(a)}}function A(n){const{initialTime:p=0,autostart:l,onPause:u,onStart:R,onReset:d,onTimeSet:U,onUpdate:o,stepInMs:v=1e3}=n||{},i=t.useRef(null),g=h(p,"sec"),[s,r]=t.useState(g),[c,D]=t.useState(!!l),[b,a]=t.useState(!0),B=()=>{i.current&&(D(!1),clearInterval(i.current),i.current=null)};t.useEffect(()=>{if(b)return a(!1);o&&o(m(s))},[s]);const E=()=>{i.current||(R&&R(m(s)),D(!0),i.current=setInterval(()=>{r(f=>f+1e3)},v))};N(()=>l&&E()),q(B);const w=({updatedTime:f,continueIfWasRunning:y,startIfWasStopped:W})=>{y&&c?r(f):W&&!c?(setTimeout(()=>r(f),0),E()):(B(),r(f))};return{start:E,pause:()=>{i.current&&(B(),u&&u(m(s)))},reset:f=>{const{startIfWasStopped:y,continueIfWasRunning:W}=f||{};d&&d(m(g)),w({updatedTime:g,continueIfWasRunning:W,startIfWasStopped:y})},setTime:(f,y)=>{const{timeUnit:W="sec",continueIfWasRunning:j,startIfWasStopped:C}=y||{},e=h(f,W);U&&U(m(e)),w({updatedTime:e,continueIfWasRunning:j,startIfWasStopped:C})},incTimeBy:(f,y)=>{const{timeUnit:W="sec",continueIfWasRunning:j,startIfWasStopped:C}=y||{},e=s+h(f,W);w({updatedTime:e,continueIfWasRunning:j,startIfWasStopped:C})},decTimeBy:(f,y)=>{const{timeUnit:W="sec",continueIfWasRunning:j,startIfWasStopped:C}=y||{};let e=s-h(f,W);e<0&&(e=0),w({updatedTime:e,continueIfWasRunning:j,startIfWasStopped:C})},isRunning:c,currentTime:m(s),formattedCurrentTime:V(s)}}function G(n,p){const{autostart:l,onStart:u,onCancel:R,onEnd:d,timeUnit:U="sec"}=p||{},o=t.useRef(null),[v,i]=t.useState(!!l),g=h(n,U),s=()=>{o.current&&(i(!1),clearInterval(o.current),o.current=null)},r=()=>{o.current||(u&&u(),i(!0),o.current=setTimeout(()=>{d&&d(),s()},g))};return N(()=>l&&r()),q(s),{start:r,cancel:()=>{o.current&&(R&&R(),s())},isRunning:v}}M.useStatelessTimer=G,M.useStopwatch=A,M.useTimer=z,Object.defineProperty(M,Symbol.toStringTag,{value:"Module"})});
+(function(n,I){typeof exports=="object"&&typeof module<"u"?module.exports=I(require("react")):typeof define=="function"&&define.amd?define(["react"],I):(n=typeof globalThis<"u"?globalThis:n||self,n["react-hook-time"]=I(n.React))})(this,function(n){"use strict";function I(e){n.useEffect(()=>{e()},[])}function P(e){n.useEffect(()=>e,[])}const V=e=>{const m=new Date(e);return isNaN(m.getTime())?void 0:m.getTime()-Date.now()},x=(e,m)=>{const l=typeof e!="number",u=l?V(e):e;if(typeof u!="number")return 0;if(l)return u;switch(m){case"ms":return u;case"sec":return u*1e3;case"min":return u*6e4;case"hour":return u*36e5;case"day":return u*864e5}},f=e=>e/1e3,Y=e=>{const M=e/1e3/60/60/24,y=M/365,T=Math.floor(y),B=M%365,S=Math.floor(B),a=(B-S)*24,U=Math.floor(a),g=(a-U)*60,v=Math.floor(g),E=(g-v)*60,p=Math.round(E);return{years:T,days:S,hours:U,minutes:v,seconds:p}};function z(e,m){let l=e,u=m;!["number","string"].includes(typeof e)&&!(e instanceof Date)&&(l=0,u=e);const{autostart:M,preventUpdate:y,stopwatch:T,speedUpFirstSecond:B,onPause:S,onStart:a,onCancel:U,onReset:g,onUpdate:v,onTimeSet:E,onEnd:p,timeUnit:A="sec",stepInMs:k=1e3}=u||{},c=n.useRef(null),d=n.useRef(null),N=n.useRef(!0),q=x(l,A),R=n.useRef(q),[r,W]=n.useState(R.current),[j,D]=n.useState(!!M),G=()=>{c.current&&(U&&U(),h())},h=()=>{if(y){if(!c.current)return;D(!1),clearInterval(c.current),c.current=null;return}d.current&&(D(!1),c.current&&(clearInterval(c.current),c.current=null),clearTimeout(d.current),d.current=null)};n.useEffect(()=>{if(N.current){N.current=!1;return}!T&&r===0&&(p&&p(),h()),v&&v(f(r))},[r]);const F=t=>{d.current=setTimeout(()=>{const s=T?t+1e3:Math.max(t-1e3,0);W(s),s!==0&&(c.current=setInterval(()=>{W(o=>T?o+1e3:Math.max(o-1e3,0))},k))},B?300:k)},J=t=>{c.current||d.current||!t||(a&&a(f(r)),D(!0),W(t),F(t))},H=()=>{if(!c.current){if(y){a&&a(),D(!0),c.current=setTimeout(()=>{p&&p(),h()},q);return}d.current||!T&&r===0||(a&&a(f(r)),D(!0),F(r))}};I(()=>M&&H()),P(h);const C=({updatedTime:t,continueIfWasRunning:s,startIfWasStopped:o})=>{s&&j?W(t):o&&!j?J(t):(h(),W(t))};return y?{start:H,cancel:G,isRunning:j}:{start:H,pause:()=>{d.current&&(h(),S&&S(f(r)))},reset:t=>{const{startIfWasStopped:s,continueIfWasRunning:o}=t||{};g&&g(f(R.current)),C({updatedTime:R.current,continueIfWasRunning:o,startIfWasStopped:s})},setTime:(t,s)=>{const{timeUnit:o="sec",continueIfWasRunning:b,startIfWasStopped:w}=s||{},i=x(t,o);E&&E(f(i)),R.current=i,C({updatedTime:i,continueIfWasRunning:b,startIfWasStopped:w})},incTimeBy:(t,s)=>{const{timeUnit:o="sec",continueIfWasRunning:b,startIfWasStopped:w}=s||{},i=r+x(t,o);R.current=i,C({updatedTime:i,continueIfWasRunning:b,startIfWasStopped:w})},decTimeBy:(t,s)=>{const{timeUnit:o="sec",continueIfWasRunning:b,startIfWasStopped:w}=s||{};let i=r-x(t,o);i<0&&(i=0),R.current=i,C({updatedTime:i,continueIfWasRunning:b,startIfWasStopped:w})},isRunning:j,currentTime:f(r),formattedCurrentTime:Y(r)}}return z});
 //# sourceMappingURL=index.umd.js.map

package.json

 {
   "name": "react-hook-time",
-  "version": "0.0.1-alpha.2",
+  "version": "0.0.1-alpha.3",
   "type": "module",
@@ -36,2 +36,5 @@ "description": "A React timer library",
   "license": "MIT",
+  "dependencies": {
+    "styled-components": "^6.0.4"
+  },
   "devDependencies": {
@@ -41,2 +44,3 @@ "@types/react": "^18.0.27",
     "@vitejs/plugin-react": "^3.1.0",
+    "babel-plugin-styled-components": "^2.1.4",
     "eslint": "^8.34.0",
@@ -43,0 +47,0 @@ "eslint-config-airbnb-typescript": "^17.0.0",

README.md

@@ -18,3 +18,3 @@
     <div>
-      <div>Currnet time {currentTime}</div>
+      <div>Current time {currentTime}</div>
       <button onClick={start}>start</button>
@@ -21,0 +21,0 @@ <button onClick={pause}>pause</button>

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

43649

decreased by-25.38%

Dependency count

3

increased by50%

Dev dependency count

16

increased by6.67%

Number of package files

13

decreased by-18.75%

Lines of code

272

decreased by-9.03%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedstyled-components@^6.0.4

• + Added@emotion/is-prop-valid@1.2.2(transitive)

• + Added@emotion/memoize@0.8.1(transitive)

• + Added@emotion/unitless@0.8.1(transitive)

• + Added@types/stylis@4.2.5(transitive)

• + Addedcamelize@1.0.1(transitive)

• + Addedcss-color-keywords@1.0.0(transitive)

• + Addedcss-to-react-native@3.2.0(transitive)

• + Addedcsstype@3.1.3(transitive)

• + Addednanoid@3.3.8(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedpostcss@8.4.49(transitive)

• + Addedpostcss-value-parser@4.2.0(transitive)

• + Addedshallowequal@1.1.0(transitive)

• + Addedsource-map-js@1.2.1(transitive)

• + Addedstyled-components@6.1.15(transitive)

• + Addedstylis@4.3.2(transitive)

• + Addedtslib@2.6.2(transitive)