@asphalt-react/loader - npm Package Compare versions

Comparing version 2.0.1 to 2.1.0

dist/index.cjs

@@ -10,16 +10,9 @@ 'use strict';
 function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
-
-    return target;
-  };
-  return _extends.apply(this, arguments);
+    return n;
+  }, _extends.apply(null, arguments);
 }
@@ -54,5 +47,5 @@
 
-var css_248z$1 = ".Loader__KgYkI {\n  --surface-active: var(--interactive-accent, #5070fd);\n  --surface: var(--static-surface-tertiary, #e8ebef);\n\n  --loader-s-size: 0.5rem;\n  --loader-m-size: 0.75rem;\n  --loader-l-size: 1rem;\n  --loader-animation-duration: 1.1s;\n  --loader-animation-delay: 120ms;\n}\n\n.dot__N72ab {\n  border-radius: var(--roundness-full, 62rem);\n  margin-right: 8px;\n  display: inline-block;\n  background-color: var(--surface);\n}\n\n.dot__N72ab:nth-child(1) {\n  -webkit-animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out infinite;\n          animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out infinite;\n}\n\n.dot__N72ab:nth-child(2) {\n  -webkit-animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 1) infinite;\n          animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 1) infinite;\n}\n\n.dot__N72ab:nth-child(3) {\n  -webkit-animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 2) infinite;\n          animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 2) infinite;\n}\n\n.dot__N72ab:nth-child(4) {\n  -webkit-animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 3) infinite;\n          animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 3) infinite;\n}\n\n.dot__N72ab:nth-child(5) {\n  -webkit-animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 4) infinite;\n          animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 4) infinite;\n}\n\n@-webkit-keyframes changeColors__8ngtm {\n  0%,\n  49% {\n    background-color: var(--surface-active);\n  }\n\n  50%,\n  100% {\n    background-color: var(--surface);\n  }\n}\n\n@keyframes changeColors__8ngtm {\n  0%,\n  49% {\n    background-color: var(--surface-active);\n  }\n\n  50%,\n  100% {\n    background-color: var(--surface);\n  }\n}\n\n/*\n  If the user has expressed their preference for\n  reduced motion, then reduce animations on loader.\n*/\n@media (prefers-reduced-motion: reduce) {\n  .Loader__KgYkI {\n    /* overridden styles here */\n    --loader-animation-duration: 10s;\n    --loader-animation-delay: 1s;\n  }\n}\n\n.s__T-98r {\n  width: var(--loader-s-size);\n  height: var(--loader-s-size);\n}\n\n.m__QunAE {\n  width: var(--loader-m-size);\n  height: var(--loader-m-size);\n}\n\n.l__7RW4Y {\n  width: var(--loader-l-size);\n  height: var(--loader-l-size);\n}\n\n/* support rtl styles */\n\n*[dir=\"rtl\"] {\n  -webkit-animation-direction: alternate;\n          animation-direction: alternate;\n}\n";
+var css_248z$1 = ".Loader__KgYkI {\n  --surface-active: var(--interactive-accent, #5070fd);\n  --surface: var(--static-surface-tertiary, #e8ebef);\n\n  --loader-s-size: 0.5rem;\n  --loader-m-size: 0.75rem;\n  --loader-l-size: 1rem;\n  --loader-animation-duration: 1.1s;\n  --loader-animation-delay: 120ms;\n}\n\n.dot__N72ab {\n  border-radius: var(--roundness-full, 62rem);\n  margin-right: 8px;\n  display: inline-block;\n  background-color: var(--surface);\n}\n\n.dot__N72ab:nth-child(1) {\n  animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out infinite;\n}\n\n.dot__N72ab:nth-child(2) {\n  animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 1) infinite;\n}\n\n.dot__N72ab:nth-child(3) {\n  animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 2) infinite;\n}\n\n.dot__N72ab:nth-child(4) {\n  animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 3) infinite;\n}\n\n.dot__N72ab:nth-child(5) {\n  animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 4) infinite;\n}\n\n@keyframes changeColors__8ngtm {\n  0%,\n  49% {\n    background-color: var(--surface-active);\n  }\n\n  50%,\n  100% {\n    background-color: var(--surface);\n  }\n}\n\n/*\n  If the user has expressed their preference for\n  reduced motion, then reduce animations on loader.\n*/\n@media (prefers-reduced-motion: reduce) {\n  .Loader__KgYkI {\n    /* overridden styles here */\n    --loader-animation-duration: 10s;\n    --loader-animation-delay: 1s;\n  }\n}\n\n.s__T-98r {\n  width: var(--loader-s-size);\n  height: var(--loader-s-size);\n}\n\n.m__QunAE {\n  width: var(--loader-m-size);\n  height: var(--loader-m-size);\n}\n\n.l__7RW4Y {\n  width: var(--loader-l-size);\n  height: var(--loader-l-size);\n}\n\n/* support rtl styles */\n\n*[dir=\"rtl\"] {\n  animation-direction: alternate;\n}\n";
 var styles$1 = {"Loader":"Loader__KgYkI","dot":"dot__N72ab","changeColors":"changeColors__8ngtm","s":"s__T-98r","m":"m__QunAE","l":"l__7RW4Y"};
-var stylesheet$1=".Loader__KgYkI {\n  --surface-active: var(--interactive-accent, #5070fd);\n  --surface: var(--static-surface-tertiary, #e8ebef);\n\n  --loader-s-size: 0.5rem;\n  --loader-m-size: 0.75rem;\n  --loader-l-size: 1rem;\n  --loader-animation-duration: 1.1s;\n  --loader-animation-delay: 120ms;\n}\n\n.dot__N72ab {\n  border-radius: var(--roundness-full, 62rem);\n  margin-right: 8px;\n  display: inline-block;\n  background-color: var(--surface);\n}\n\n.dot__N72ab:nth-child(1) {\n  -webkit-animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out infinite;\n          animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out infinite;\n}\n\n.dot__N72ab:nth-child(2) {\n  -webkit-animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 1) infinite;\n          animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 1) infinite;\n}\n\n.dot__N72ab:nth-child(3) {\n  -webkit-animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 2) infinite;\n          animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 2) infinite;\n}\n\n.dot__N72ab:nth-child(4) {\n  -webkit-animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 3) infinite;\n          animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 3) infinite;\n}\n\n.dot__N72ab:nth-child(5) {\n  -webkit-animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 4) infinite;\n          animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 4) infinite;\n}\n\n@-webkit-keyframes changeColors__8ngtm {\n  0%,\n  49% {\n    background-color: var(--surface-active);\n  }\n\n  50%,\n  100% {\n    background-color: var(--surface);\n  }\n}\n\n@keyframes changeColors__8ngtm {\n  0%,\n  49% {\n    background-color: var(--surface-active);\n  }\n\n  50%,\n  100% {\n    background-color: var(--surface);\n  }\n}\n\n/*\n  If the user has expressed their preference for\n  reduced motion, then reduce animations on loader.\n*/\n@media (prefers-reduced-motion: reduce) {\n  .Loader__KgYkI {\n    /* overridden styles here */\n    --loader-animation-duration: 10s;\n    --loader-animation-delay: 1s;\n  }\n}\n\n.s__T-98r {\n  width: var(--loader-s-size);\n  height: var(--loader-s-size);\n}\n\n.m__QunAE {\n  width: var(--loader-m-size);\n  height: var(--loader-m-size);\n}\n\n.l__7RW4Y {\n  width: var(--loader-l-size);\n  height: var(--loader-l-size);\n}\n\n/* support rtl styles */\n\n*[dir=\"rtl\"] {\n  -webkit-animation-direction: alternate;\n          animation-direction: alternate;\n}\n";
+var stylesheet$1=".Loader__KgYkI {\n  --surface-active: var(--interactive-accent, #5070fd);\n  --surface: var(--static-surface-tertiary, #e8ebef);\n\n  --loader-s-size: 0.5rem;\n  --loader-m-size: 0.75rem;\n  --loader-l-size: 1rem;\n  --loader-animation-duration: 1.1s;\n  --loader-animation-delay: 120ms;\n}\n\n.dot__N72ab {\n  border-radius: var(--roundness-full, 62rem);\n  margin-right: 8px;\n  display: inline-block;\n  background-color: var(--surface);\n}\n\n.dot__N72ab:nth-child(1) {\n  animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out infinite;\n}\n\n.dot__N72ab:nth-child(2) {\n  animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 1) infinite;\n}\n\n.dot__N72ab:nth-child(3) {\n  animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 2) infinite;\n}\n\n.dot__N72ab:nth-child(4) {\n  animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 3) infinite;\n}\n\n.dot__N72ab:nth-child(5) {\n  animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 4) infinite;\n}\n\n@keyframes changeColors__8ngtm {\n  0%,\n  49% {\n    background-color: var(--surface-active);\n  }\n\n  50%,\n  100% {\n    background-color: var(--surface);\n  }\n}\n\n/*\n  If the user has expressed their preference for\n  reduced motion, then reduce animations on loader.\n*/\n@media (prefers-reduced-motion: reduce) {\n  .Loader__KgYkI {\n    /* overridden styles here */\n    --loader-animation-duration: 10s;\n    --loader-animation-delay: 1s;\n  }\n}\n\n.s__T-98r {\n  width: var(--loader-s-size);\n  height: var(--loader-s-size);\n}\n\n.m__QunAE {\n  width: var(--loader-m-size);\n  height: var(--loader-m-size);\n}\n\n.l__7RW4Y {\n  width: var(--loader-l-size);\n  height: var(--loader-l-size);\n}\n\n/* support rtl styles */\n\n*[dir=\"rtl\"] {\n  animation-direction: alternate;\n}\n";
 styleInject(css_248z$1);
@@ -66,5 +59,5 @@
 
-var css_248z = ".Spinner__4r1yM {\n  --animation-duration: 2s;\n  --animation-delay: calc(var(--animation-duration) / -2);\n\n  display: inline-flex;\n  width: var(--spinner-size);\n  height: var(--spinner-size);\n  -webkit-animation: spin__67Zqi var(--animation-duration) infinite;\n          animation: spin__67Zqi var(--animation-duration) infinite;\n  -webkit-animation-delay: var(--animation-delay);\n          animation-delay: var(--animation-delay);\n}\n\n.circle__X4fB1 {\n  stroke: var(--stroke-color);\n  stroke-width: 0.5rem;\n  stroke-linecap: round;\n  stroke-dasharray: 150;\n  -webkit-animation: dash__eCH98 var(--animation-duration) linear infinite;\n          animation: dash__eCH98 var(--animation-duration) linear infinite;\n}\n\n@-webkit-keyframes spin__67Zqi {\n  0% {\n    transform: rotate(0deg);\n    -webkit-animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n            animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n  }\n  50.85% {\n    transform: rotate(360deg);\n    -webkit-animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n            animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n  }\n  100% {\n    transform: rotate(720deg);\n  }\n}\n\n@keyframes spin__67Zqi {\n  0% {\n    transform: rotate(0deg);\n    -webkit-animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n            animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n  }\n  50.85% {\n    transform: rotate(360deg);\n    -webkit-animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n            animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n  }\n  100% {\n    transform: rotate(720deg);\n  }\n}\n@-webkit-keyframes dash__eCH98 {\n  0% {\n    stroke-dashoffset: 148.2;\n  }\n  50% {\n    stroke-dashoffset: 0;\n  }\n  100% {\n    stroke-dashoffset: -148.2;\n  }\n}\n@keyframes dash__eCH98 {\n  0% {\n    stroke-dashoffset: 148.2;\n  }\n  50% {\n    stroke-dashoffset: 0;\n  }\n  100% {\n    stroke-dashoffset: -148.2;\n  }\n}\n\n/*\n  If the user has expressed their preference for\n  reduced motion, then reduce animations on spinner.\n*/\n@media (prefers-reduced-motion: reduce) {\n  .Spinner__4r1yM {\n    --animation-duration: 5s;\n  }\n  .circle__X4fB1 {\n    --animation-duration: 5s;\n  }\n}\n\n.xs__xhV9q {\n  --spinner-size: 0.75rem;\n}\n\n.s__rFE1i {\n  --spinner-size: 0.875rem;\n}\n\n.m__uhjyw {\n  --spinner-size: 1rem;\n}\n\n.l__op3T8 {\n  --spinner-size: 1.125rem;\n}\n\n.xl__o64nI {\n  --spinner-size: 2rem;\n}\n\n.xxl__PcWyX {\n  --spinner-size: 2.5rem;\n}\n\n.brand__jjN3I {\n  --stroke-color: var(--content-brand, #00aa13);\n}\n\n.inverse__9ryB7 {\n  --stroke-color: var(--content-on-inverse, #ffffff);\n}\n\n.neutral__CYh5w {\n  --stroke-color: var(--content-primary, #2d2e34);\n}\n";
+var css_248z = ".Spinner__4r1yM {\n  --animation-duration: 2s;\n  --animation-delay: calc(var(--animation-duration) / -2);\n\n  display: inline-flex;\n  width: var(--spinner-size);\n  height: var(--spinner-size);\n  animation: spin__67Zqi var(--animation-duration) infinite;\n  animation-delay: var(--animation-delay);\n}\n\n.circle__X4fB1 {\n  stroke: var(--stroke-color);\n  stroke-width: 0.5rem;\n  stroke-linecap: round;\n  stroke-dasharray: 150;\n  animation: dash__eCH98 var(--animation-duration) linear infinite;\n}\n\n@keyframes spin__67Zqi {\n  0% {\n    transform: rotate(0deg);\n    animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n  }\n  50.85% {\n    transform: rotate(360deg);\n    animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n  }\n  100% {\n    transform: rotate(720deg);\n  }\n}\n@keyframes dash__eCH98 {\n  0% {\n    stroke-dashoffset: 148.2;\n  }\n  50% {\n    stroke-dashoffset: 0;\n  }\n  100% {\n    stroke-dashoffset: -148.2;\n  }\n}\n\n/*\n  If the user has expressed their preference for\n  reduced motion, then reduce animations on spinner.\n*/\n@media (prefers-reduced-motion: reduce) {\n  .Spinner__4r1yM {\n    --animation-duration: 5s;\n  }\n  .circle__X4fB1 {\n    --animation-duration: 5s;\n  }\n}\n\n.xs__xhV9q {\n  --spinner-size: 0.75rem;\n}\n\n.s__rFE1i {\n  --spinner-size: 0.875rem;\n}\n\n.m__uhjyw {\n  --spinner-size: 1rem;\n}\n\n.l__op3T8 {\n  --spinner-size: 1.125rem;\n}\n\n.xl__o64nI {\n  --spinner-size: 2rem;\n}\n\n.xxl__PcWyX {\n  --spinner-size: 2.5rem;\n}\n\n.brand__jjN3I {\n  --stroke-color: var(--content-brand, #00aa13);\n}\n\n.inverse__9ryB7 {\n  --stroke-color: var(--content-on-inverse, #ffffff);\n}\n\n.neutral__CYh5w {\n  --stroke-color: var(--content-primary, #2d2e34);\n}\n";
 var styles = {"Spinner":"Spinner__4r1yM","spin":"spin__67Zqi","circle":"circle__X4fB1","dash":"dash__eCH98","xs":"xs__xhV9q","s":"s__rFE1i","m":"m__uhjyw","l":"l__op3T8","xl":"xl__o64nI","xxl":"xxl__PcWyX","brand":"brand__jjN3I","inverse":"inverse__9ryB7","neutral":"neutral__CYh5w"};
-var stylesheet=".Spinner__4r1yM {\n  --animation-duration: 2s;\n  --animation-delay: calc(var(--animation-duration) / -2);\n\n  display: inline-flex;\n  width: var(--spinner-size);\n  height: var(--spinner-size);\n  -webkit-animation: spin__67Zqi var(--animation-duration) infinite;\n          animation: spin__67Zqi var(--animation-duration) infinite;\n  -webkit-animation-delay: var(--animation-delay);\n          animation-delay: var(--animation-delay);\n}\n\n.circle__X4fB1 {\n  stroke: var(--stroke-color);\n  stroke-width: 0.5rem;\n  stroke-linecap: round;\n  stroke-dasharray: 150;\n  -webkit-animation: dash__eCH98 var(--animation-duration) linear infinite;\n          animation: dash__eCH98 var(--animation-duration) linear infinite;\n}\n\n@-webkit-keyframes spin__67Zqi {\n  0% {\n    transform: rotate(0deg);\n    -webkit-animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n            animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n  }\n  50.85% {\n    transform: rotate(360deg);\n    -webkit-animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n            animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n  }\n  100% {\n    transform: rotate(720deg);\n  }\n}\n\n@keyframes spin__67Zqi {\n  0% {\n    transform: rotate(0deg);\n    -webkit-animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n            animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n  }\n  50.85% {\n    transform: rotate(360deg);\n    -webkit-animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n            animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n  }\n  100% {\n    transform: rotate(720deg);\n  }\n}\n@-webkit-keyframes dash__eCH98 {\n  0% {\n    stroke-dashoffset: 148.2;\n  }\n  50% {\n    stroke-dashoffset: 0;\n  }\n  100% {\n    stroke-dashoffset: -148.2;\n  }\n}\n@keyframes dash__eCH98 {\n  0% {\n    stroke-dashoffset: 148.2;\n  }\n  50% {\n    stroke-dashoffset: 0;\n  }\n  100% {\n    stroke-dashoffset: -148.2;\n  }\n}\n\n/*\n  If the user has expressed their preference for\n  reduced motion, then reduce animations on spinner.\n*/\n@media (prefers-reduced-motion: reduce) {\n  .Spinner__4r1yM {\n    --animation-duration: 5s;\n  }\n  .circle__X4fB1 {\n    --animation-duration: 5s;\n  }\n}\n\n.xs__xhV9q {\n  --spinner-size: 0.75rem;\n}\n\n.s__rFE1i {\n  --spinner-size: 0.875rem;\n}\n\n.m__uhjyw {\n  --spinner-size: 1rem;\n}\n\n.l__op3T8 {\n  --spinner-size: 1.125rem;\n}\n\n.xl__o64nI {\n  --spinner-size: 2rem;\n}\n\n.xxl__PcWyX {\n  --spinner-size: 2.5rem;\n}\n\n.brand__jjN3I {\n  --stroke-color: var(--content-brand, #00aa13);\n}\n\n.inverse__9ryB7 {\n  --stroke-color: var(--content-on-inverse, #ffffff);\n}\n\n.neutral__CYh5w {\n  --stroke-color: var(--content-primary, #2d2e34);\n}\n";
+var stylesheet=".Spinner__4r1yM {\n  --animation-duration: 2s;\n  --animation-delay: calc(var(--animation-duration) / -2);\n\n  display: inline-flex;\n  width: var(--spinner-size);\n  height: var(--spinner-size);\n  animation: spin__67Zqi var(--animation-duration) infinite;\n  animation-delay: var(--animation-delay);\n}\n\n.circle__X4fB1 {\n  stroke: var(--stroke-color);\n  stroke-width: 0.5rem;\n  stroke-linecap: round;\n  stroke-dasharray: 150;\n  animation: dash__eCH98 var(--animation-duration) linear infinite;\n}\n\n@keyframes spin__67Zqi {\n  0% {\n    transform: rotate(0deg);\n    animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n  }\n  50.85% {\n    transform: rotate(360deg);\n    animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n  }\n  100% {\n    transform: rotate(720deg);\n  }\n}\n@keyframes dash__eCH98 {\n  0% {\n    stroke-dashoffset: 148.2;\n  }\n  50% {\n    stroke-dashoffset: 0;\n  }\n  100% {\n    stroke-dashoffset: -148.2;\n  }\n}\n\n/*\n  If the user has expressed their preference for\n  reduced motion, then reduce animations on spinner.\n*/\n@media (prefers-reduced-motion: reduce) {\n  .Spinner__4r1yM {\n    --animation-duration: 5s;\n  }\n  .circle__X4fB1 {\n    --animation-duration: 5s;\n  }\n}\n\n.xs__xhV9q {\n  --spinner-size: 0.75rem;\n}\n\n.s__rFE1i {\n  --spinner-size: 0.875rem;\n}\n\n.m__uhjyw {\n  --spinner-size: 1rem;\n}\n\n.l__op3T8 {\n  --spinner-size: 1.125rem;\n}\n\n.xl__o64nI {\n  --spinner-size: 2rem;\n}\n\n.xxl__PcWyX {\n  --spinner-size: 2.5rem;\n}\n\n.brand__jjN3I {\n  --stroke-color: var(--content-brand, #00aa13);\n}\n\n.inverse__9ryB7 {\n  --stroke-color: var(--content-on-inverse, #ffffff);\n}\n\n.neutral__CYh5w {\n  --stroke-color: var(--content-primary, #2d2e34);\n}\n";
 styleInject(css_248z);
@@ -71,0 +64,0 @@

dist/index.js

@@ -8,16 +8,9 @@ import React from 'react';
 function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
-
-    return target;
-  };
-  return _extends.apply(this, arguments);
+    return n;
+  }, _extends.apply(null, arguments);
 }
@@ -52,5 +45,5 @@
 
-var css_248z$1 = ".Loader__KgYkI {\n  --surface-active: var(--interactive-accent, #5070fd);\n  --surface: var(--static-surface-tertiary, #e8ebef);\n\n  --loader-s-size: 0.5rem;\n  --loader-m-size: 0.75rem;\n  --loader-l-size: 1rem;\n  --loader-animation-duration: 1.1s;\n  --loader-animation-delay: 120ms;\n}\n\n.dot__N72ab {\n  border-radius: var(--roundness-full, 62rem);\n  margin-right: 8px;\n  display: inline-block;\n  background-color: var(--surface);\n}\n\n.dot__N72ab:nth-child(1) {\n  -webkit-animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out infinite;\n          animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out infinite;\n}\n\n.dot__N72ab:nth-child(2) {\n  -webkit-animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 1) infinite;\n          animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 1) infinite;\n}\n\n.dot__N72ab:nth-child(3) {\n  -webkit-animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 2) infinite;\n          animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 2) infinite;\n}\n\n.dot__N72ab:nth-child(4) {\n  -webkit-animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 3) infinite;\n          animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 3) infinite;\n}\n\n.dot__N72ab:nth-child(5) {\n  -webkit-animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 4) infinite;\n          animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 4) infinite;\n}\n\n@-webkit-keyframes changeColors__8ngtm {\n  0%,\n  49% {\n    background-color: var(--surface-active);\n  }\n\n  50%,\n  100% {\n    background-color: var(--surface);\n  }\n}\n\n@keyframes changeColors__8ngtm {\n  0%,\n  49% {\n    background-color: var(--surface-active);\n  }\n\n  50%,\n  100% {\n    background-color: var(--surface);\n  }\n}\n\n/*\n  If the user has expressed their preference for\n  reduced motion, then reduce animations on loader.\n*/\n@media (prefers-reduced-motion: reduce) {\n  .Loader__KgYkI {\n    /* overridden styles here */\n    --loader-animation-duration: 10s;\n    --loader-animation-delay: 1s;\n  }\n}\n\n.s__T-98r {\n  width: var(--loader-s-size);\n  height: var(--loader-s-size);\n}\n\n.m__QunAE {\n  width: var(--loader-m-size);\n  height: var(--loader-m-size);\n}\n\n.l__7RW4Y {\n  width: var(--loader-l-size);\n  height: var(--loader-l-size);\n}\n\n/* support rtl styles */\n\n*[dir=\"rtl\"] {\n  -webkit-animation-direction: alternate;\n          animation-direction: alternate;\n}\n";
+var css_248z$1 = ".Loader__KgYkI {\n  --surface-active: var(--interactive-accent, #5070fd);\n  --surface: var(--static-surface-tertiary, #e8ebef);\n\n  --loader-s-size: 0.5rem;\n  --loader-m-size: 0.75rem;\n  --loader-l-size: 1rem;\n  --loader-animation-duration: 1.1s;\n  --loader-animation-delay: 120ms;\n}\n\n.dot__N72ab {\n  border-radius: var(--roundness-full, 62rem);\n  margin-right: 8px;\n  display: inline-block;\n  background-color: var(--surface);\n}\n\n.dot__N72ab:nth-child(1) {\n  animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out infinite;\n}\n\n.dot__N72ab:nth-child(2) {\n  animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 1) infinite;\n}\n\n.dot__N72ab:nth-child(3) {\n  animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 2) infinite;\n}\n\n.dot__N72ab:nth-child(4) {\n  animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 3) infinite;\n}\n\n.dot__N72ab:nth-child(5) {\n  animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 4) infinite;\n}\n\n@keyframes changeColors__8ngtm {\n  0%,\n  49% {\n    background-color: var(--surface-active);\n  }\n\n  50%,\n  100% {\n    background-color: var(--surface);\n  }\n}\n\n/*\n  If the user has expressed their preference for\n  reduced motion, then reduce animations on loader.\n*/\n@media (prefers-reduced-motion: reduce) {\n  .Loader__KgYkI {\n    /* overridden styles here */\n    --loader-animation-duration: 10s;\n    --loader-animation-delay: 1s;\n  }\n}\n\n.s__T-98r {\n  width: var(--loader-s-size);\n  height: var(--loader-s-size);\n}\n\n.m__QunAE {\n  width: var(--loader-m-size);\n  height: var(--loader-m-size);\n}\n\n.l__7RW4Y {\n  width: var(--loader-l-size);\n  height: var(--loader-l-size);\n}\n\n/* support rtl styles */\n\n*[dir=\"rtl\"] {\n  animation-direction: alternate;\n}\n";
 var styles$1 = {"Loader":"Loader__KgYkI","dot":"dot__N72ab","changeColors":"changeColors__8ngtm","s":"s__T-98r","m":"m__QunAE","l":"l__7RW4Y"};
-var stylesheet$1=".Loader__KgYkI {\n  --surface-active: var(--interactive-accent, #5070fd);\n  --surface: var(--static-surface-tertiary, #e8ebef);\n\n  --loader-s-size: 0.5rem;\n  --loader-m-size: 0.75rem;\n  --loader-l-size: 1rem;\n  --loader-animation-duration: 1.1s;\n  --loader-animation-delay: 120ms;\n}\n\n.dot__N72ab {\n  border-radius: var(--roundness-full, 62rem);\n  margin-right: 8px;\n  display: inline-block;\n  background-color: var(--surface);\n}\n\n.dot__N72ab:nth-child(1) {\n  -webkit-animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out infinite;\n          animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out infinite;\n}\n\n.dot__N72ab:nth-child(2) {\n  -webkit-animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 1) infinite;\n          animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 1) infinite;\n}\n\n.dot__N72ab:nth-child(3) {\n  -webkit-animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 2) infinite;\n          animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 2) infinite;\n}\n\n.dot__N72ab:nth-child(4) {\n  -webkit-animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 3) infinite;\n          animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 3) infinite;\n}\n\n.dot__N72ab:nth-child(5) {\n  -webkit-animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 4) infinite;\n          animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 4) infinite;\n}\n\n@-webkit-keyframes changeColors__8ngtm {\n  0%,\n  49% {\n    background-color: var(--surface-active);\n  }\n\n  50%,\n  100% {\n    background-color: var(--surface);\n  }\n}\n\n@keyframes changeColors__8ngtm {\n  0%,\n  49% {\n    background-color: var(--surface-active);\n  }\n\n  50%,\n  100% {\n    background-color: var(--surface);\n  }\n}\n\n/*\n  If the user has expressed their preference for\n  reduced motion, then reduce animations on loader.\n*/\n@media (prefers-reduced-motion: reduce) {\n  .Loader__KgYkI {\n    /* overridden styles here */\n    --loader-animation-duration: 10s;\n    --loader-animation-delay: 1s;\n  }\n}\n\n.s__T-98r {\n  width: var(--loader-s-size);\n  height: var(--loader-s-size);\n}\n\n.m__QunAE {\n  width: var(--loader-m-size);\n  height: var(--loader-m-size);\n}\n\n.l__7RW4Y {\n  width: var(--loader-l-size);\n  height: var(--loader-l-size);\n}\n\n/* support rtl styles */\n\n*[dir=\"rtl\"] {\n  -webkit-animation-direction: alternate;\n          animation-direction: alternate;\n}\n";
+var stylesheet$1=".Loader__KgYkI {\n  --surface-active: var(--interactive-accent, #5070fd);\n  --surface: var(--static-surface-tertiary, #e8ebef);\n\n  --loader-s-size: 0.5rem;\n  --loader-m-size: 0.75rem;\n  --loader-l-size: 1rem;\n  --loader-animation-duration: 1.1s;\n  --loader-animation-delay: 120ms;\n}\n\n.dot__N72ab {\n  border-radius: var(--roundness-full, 62rem);\n  margin-right: 8px;\n  display: inline-block;\n  background-color: var(--surface);\n}\n\n.dot__N72ab:nth-child(1) {\n  animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out infinite;\n}\n\n.dot__N72ab:nth-child(2) {\n  animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 1) infinite;\n}\n\n.dot__N72ab:nth-child(3) {\n  animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 2) infinite;\n}\n\n.dot__N72ab:nth-child(4) {\n  animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 3) infinite;\n}\n\n.dot__N72ab:nth-child(5) {\n  animation: changeColors__8ngtm var(--loader-animation-duration) ease-in-out\n    calc(var(--loader-animation-delay) * 4) infinite;\n}\n\n@keyframes changeColors__8ngtm {\n  0%,\n  49% {\n    background-color: var(--surface-active);\n  }\n\n  50%,\n  100% {\n    background-color: var(--surface);\n  }\n}\n\n/*\n  If the user has expressed their preference for\n  reduced motion, then reduce animations on loader.\n*/\n@media (prefers-reduced-motion: reduce) {\n  .Loader__KgYkI {\n    /* overridden styles here */\n    --loader-animation-duration: 10s;\n    --loader-animation-delay: 1s;\n  }\n}\n\n.s__T-98r {\n  width: var(--loader-s-size);\n  height: var(--loader-s-size);\n}\n\n.m__QunAE {\n  width: var(--loader-m-size);\n  height: var(--loader-m-size);\n}\n\n.l__7RW4Y {\n  width: var(--loader-l-size);\n  height: var(--loader-l-size);\n}\n\n/* support rtl styles */\n\n*[dir=\"rtl\"] {\n  animation-direction: alternate;\n}\n";
 styleInject(css_248z$1);
@@ -64,5 +57,5 @@
 
-var css_248z = ".Spinner__4r1yM {\n  --animation-duration: 2s;\n  --animation-delay: calc(var(--animation-duration) / -2);\n\n  display: inline-flex;\n  width: var(--spinner-size);\n  height: var(--spinner-size);\n  -webkit-animation: spin__67Zqi var(--animation-duration) infinite;\n          animation: spin__67Zqi var(--animation-duration) infinite;\n  -webkit-animation-delay: var(--animation-delay);\n          animation-delay: var(--animation-delay);\n}\n\n.circle__X4fB1 {\n  stroke: var(--stroke-color);\n  stroke-width: 0.5rem;\n  stroke-linecap: round;\n  stroke-dasharray: 150;\n  -webkit-animation: dash__eCH98 var(--animation-duration) linear infinite;\n          animation: dash__eCH98 var(--animation-duration) linear infinite;\n}\n\n@-webkit-keyframes spin__67Zqi {\n  0% {\n    transform: rotate(0deg);\n    -webkit-animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n            animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n  }\n  50.85% {\n    transform: rotate(360deg);\n    -webkit-animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n            animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n  }\n  100% {\n    transform: rotate(720deg);\n  }\n}\n\n@keyframes spin__67Zqi {\n  0% {\n    transform: rotate(0deg);\n    -webkit-animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n            animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n  }\n  50.85% {\n    transform: rotate(360deg);\n    -webkit-animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n            animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n  }\n  100% {\n    transform: rotate(720deg);\n  }\n}\n@-webkit-keyframes dash__eCH98 {\n  0% {\n    stroke-dashoffset: 148.2;\n  }\n  50% {\n    stroke-dashoffset: 0;\n  }\n  100% {\n    stroke-dashoffset: -148.2;\n  }\n}\n@keyframes dash__eCH98 {\n  0% {\n    stroke-dashoffset: 148.2;\n  }\n  50% {\n    stroke-dashoffset: 0;\n  }\n  100% {\n    stroke-dashoffset: -148.2;\n  }\n}\n\n/*\n  If the user has expressed their preference for\n  reduced motion, then reduce animations on spinner.\n*/\n@media (prefers-reduced-motion: reduce) {\n  .Spinner__4r1yM {\n    --animation-duration: 5s;\n  }\n  .circle__X4fB1 {\n    --animation-duration: 5s;\n  }\n}\n\n.xs__xhV9q {\n  --spinner-size: 0.75rem;\n}\n\n.s__rFE1i {\n  --spinner-size: 0.875rem;\n}\n\n.m__uhjyw {\n  --spinner-size: 1rem;\n}\n\n.l__op3T8 {\n  --spinner-size: 1.125rem;\n}\n\n.xl__o64nI {\n  --spinner-size: 2rem;\n}\n\n.xxl__PcWyX {\n  --spinner-size: 2.5rem;\n}\n\n.brand__jjN3I {\n  --stroke-color: var(--content-brand, #00aa13);\n}\n\n.inverse__9ryB7 {\n  --stroke-color: var(--content-on-inverse, #ffffff);\n}\n\n.neutral__CYh5w {\n  --stroke-color: var(--content-primary, #2d2e34);\n}\n";
+var css_248z = ".Spinner__4r1yM {\n  --animation-duration: 2s;\n  --animation-delay: calc(var(--animation-duration) / -2);\n\n  display: inline-flex;\n  width: var(--spinner-size);\n  height: var(--spinner-size);\n  animation: spin__67Zqi var(--animation-duration) infinite;\n  animation-delay: var(--animation-delay);\n}\n\n.circle__X4fB1 {\n  stroke: var(--stroke-color);\n  stroke-width: 0.5rem;\n  stroke-linecap: round;\n  stroke-dasharray: 150;\n  animation: dash__eCH98 var(--animation-duration) linear infinite;\n}\n\n@keyframes spin__67Zqi {\n  0% {\n    transform: rotate(0deg);\n    animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n  }\n  50.85% {\n    transform: rotate(360deg);\n    animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n  }\n  100% {\n    transform: rotate(720deg);\n  }\n}\n@keyframes dash__eCH98 {\n  0% {\n    stroke-dashoffset: 148.2;\n  }\n  50% {\n    stroke-dashoffset: 0;\n  }\n  100% {\n    stroke-dashoffset: -148.2;\n  }\n}\n\n/*\n  If the user has expressed their preference for\n  reduced motion, then reduce animations on spinner.\n*/\n@media (prefers-reduced-motion: reduce) {\n  .Spinner__4r1yM {\n    --animation-duration: 5s;\n  }\n  .circle__X4fB1 {\n    --animation-duration: 5s;\n  }\n}\n\n.xs__xhV9q {\n  --spinner-size: 0.75rem;\n}\n\n.s__rFE1i {\n  --spinner-size: 0.875rem;\n}\n\n.m__uhjyw {\n  --spinner-size: 1rem;\n}\n\n.l__op3T8 {\n  --spinner-size: 1.125rem;\n}\n\n.xl__o64nI {\n  --spinner-size: 2rem;\n}\n\n.xxl__PcWyX {\n  --spinner-size: 2.5rem;\n}\n\n.brand__jjN3I {\n  --stroke-color: var(--content-brand, #00aa13);\n}\n\n.inverse__9ryB7 {\n  --stroke-color: var(--content-on-inverse, #ffffff);\n}\n\n.neutral__CYh5w {\n  --stroke-color: var(--content-primary, #2d2e34);\n}\n";
 var styles = {"Spinner":"Spinner__4r1yM","spin":"spin__67Zqi","circle":"circle__X4fB1","dash":"dash__eCH98","xs":"xs__xhV9q","s":"s__rFE1i","m":"m__uhjyw","l":"l__op3T8","xl":"xl__o64nI","xxl":"xxl__PcWyX","brand":"brand__jjN3I","inverse":"inverse__9ryB7","neutral":"neutral__CYh5w"};
-var stylesheet=".Spinner__4r1yM {\n  --animation-duration: 2s;\n  --animation-delay: calc(var(--animation-duration) / -2);\n\n  display: inline-flex;\n  width: var(--spinner-size);\n  height: var(--spinner-size);\n  -webkit-animation: spin__67Zqi var(--animation-duration) infinite;\n          animation: spin__67Zqi var(--animation-duration) infinite;\n  -webkit-animation-delay: var(--animation-delay);\n          animation-delay: var(--animation-delay);\n}\n\n.circle__X4fB1 {\n  stroke: var(--stroke-color);\n  stroke-width: 0.5rem;\n  stroke-linecap: round;\n  stroke-dasharray: 150;\n  -webkit-animation: dash__eCH98 var(--animation-duration) linear infinite;\n          animation: dash__eCH98 var(--animation-duration) linear infinite;\n}\n\n@-webkit-keyframes spin__67Zqi {\n  0% {\n    transform: rotate(0deg);\n    -webkit-animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n            animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n  }\n  50.85% {\n    transform: rotate(360deg);\n    -webkit-animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n            animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n  }\n  100% {\n    transform: rotate(720deg);\n  }\n}\n\n@keyframes spin__67Zqi {\n  0% {\n    transform: rotate(0deg);\n    -webkit-animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n            animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n  }\n  50.85% {\n    transform: rotate(360deg);\n    -webkit-animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n            animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n  }\n  100% {\n    transform: rotate(720deg);\n  }\n}\n@-webkit-keyframes dash__eCH98 {\n  0% {\n    stroke-dashoffset: 148.2;\n  }\n  50% {\n    stroke-dashoffset: 0;\n  }\n  100% {\n    stroke-dashoffset: -148.2;\n  }\n}\n@keyframes dash__eCH98 {\n  0% {\n    stroke-dashoffset: 148.2;\n  }\n  50% {\n    stroke-dashoffset: 0;\n  }\n  100% {\n    stroke-dashoffset: -148.2;\n  }\n}\n\n/*\n  If the user has expressed their preference for\n  reduced motion, then reduce animations on spinner.\n*/\n@media (prefers-reduced-motion: reduce) {\n  .Spinner__4r1yM {\n    --animation-duration: 5s;\n  }\n  .circle__X4fB1 {\n    --animation-duration: 5s;\n  }\n}\n\n.xs__xhV9q {\n  --spinner-size: 0.75rem;\n}\n\n.s__rFE1i {\n  --spinner-size: 0.875rem;\n}\n\n.m__uhjyw {\n  --spinner-size: 1rem;\n}\n\n.l__op3T8 {\n  --spinner-size: 1.125rem;\n}\n\n.xl__o64nI {\n  --spinner-size: 2rem;\n}\n\n.xxl__PcWyX {\n  --spinner-size: 2.5rem;\n}\n\n.brand__jjN3I {\n  --stroke-color: var(--content-brand, #00aa13);\n}\n\n.inverse__9ryB7 {\n  --stroke-color: var(--content-on-inverse, #ffffff);\n}\n\n.neutral__CYh5w {\n  --stroke-color: var(--content-primary, #2d2e34);\n}\n";
+var stylesheet=".Spinner__4r1yM {\n  --animation-duration: 2s;\n  --animation-delay: calc(var(--animation-duration) / -2);\n\n  display: inline-flex;\n  width: var(--spinner-size);\n  height: var(--spinner-size);\n  animation: spin__67Zqi var(--animation-duration) infinite;\n  animation-delay: var(--animation-delay);\n}\n\n.circle__X4fB1 {\n  stroke: var(--stroke-color);\n  stroke-width: 0.5rem;\n  stroke-linecap: round;\n  stroke-dasharray: 150;\n  animation: dash__eCH98 var(--animation-duration) linear infinite;\n}\n\n@keyframes spin__67Zqi {\n  0% {\n    transform: rotate(0deg);\n    animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n  }\n  50.85% {\n    transform: rotate(360deg);\n    animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n  }\n  100% {\n    transform: rotate(720deg);\n  }\n}\n@keyframes dash__eCH98 {\n  0% {\n    stroke-dashoffset: 148.2;\n  }\n  50% {\n    stroke-dashoffset: 0;\n  }\n  100% {\n    stroke-dashoffset: -148.2;\n  }\n}\n\n/*\n  If the user has expressed their preference for\n  reduced motion, then reduce animations on spinner.\n*/\n@media (prefers-reduced-motion: reduce) {\n  .Spinner__4r1yM {\n    --animation-duration: 5s;\n  }\n  .circle__X4fB1 {\n    --animation-duration: 5s;\n  }\n}\n\n.xs__xhV9q {\n  --spinner-size: 0.75rem;\n}\n\n.s__rFE1i {\n  --spinner-size: 0.875rem;\n}\n\n.m__uhjyw {\n  --spinner-size: 1rem;\n}\n\n.l__op3T8 {\n  --spinner-size: 1.125rem;\n}\n\n.xl__o64nI {\n  --spinner-size: 2rem;\n}\n\n.xxl__PcWyX {\n  --spinner-size: 2.5rem;\n}\n\n.brand__jjN3I {\n  --stroke-color: var(--content-brand, #00aa13);\n}\n\n.inverse__9ryB7 {\n  --stroke-color: var(--content-on-inverse, #ffffff);\n}\n\n.neutral__CYh5w {\n  --stroke-color: var(--content-primary, #2d2e34);\n}\n";
 styleInject(css_248z);
@@ -69,0 +62,0 @@

package.json

 {
   "name": "@asphalt-react/loader",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "Loader",
@@ -51,3 +51,3 @@ "keywords": [
   "license": "UNLICENSED",
-  "gitHead": "d73f7d2b4114940b08c77f38636217e678f38dc5"
+  "gitHead": "07f7e46ca908cd5d4dea245ca87e61c8f8b956b5"
 }

README.md

 # Loader
 
 ![npm](https://img.shields.io/npm/dt/@asphalt-react/loader?style=flat-square)
+[![npm version](https://badge.fury.io/js/@asphalt-react%2Floader.svg)](https://badge.fury.io/js/@asphalt-react%2Floader)
 
@@ -30,19 +31,6 @@ Loaders provide a visual cue about tasks running in the background, like fetching data. Use Loaders when the progress of the task is non-deterministic. There are two types of loaders:
 
-[comment]: # "Loader Props"
+## Spinner
 
-## Props
+### Usage in other components
 
-### size
-
-Size of the Loader.
-Accepts "s", "m" and "l" for small, medium & large respectively
-
-| type | required | default |
-| ---- | -------- | ------- |
-| enum | false    | "m"     |
-
-# Spinner
-
-## Usage in other components
-
 Use Spinner in components like Textfield and Button to show a loading state. For consistent user-experience, ensure the size of the Spinner and the component are same.
@@ -61,3 +49,3 @@
 
-## Sizes
+### Sizes
 
@@ -73,3 +61,3 @@ Spinner support 6 sizes:
 
-## Intents
+### Intents
 
@@ -82,2 +70,21 @@ Spinner support 3 intents:
 
+[comment]: #usage
+
+# Loader component
+
+[comment]: # "Loader Props"
+
+## Props
+
+### size
+
+Size of the Loader.
+Accepts "s", "m" and "l" for small, medium & large respectively
+
+| type | required | default |
+| ---- | -------- | ------- |
+| enum | false    | "m"     |
+
+# Spinner component
+
 [comment]: # "Spinner Props"
@@ -84,0 +91,0 @@

New alerts

Explicitly Unlicensed Item

License

Something was found which is explicitly marked as unlicensed.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Explicitly Unlicensed Item

License

Something was found which is explicitly marked as unlicensed.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

122

6.09%

Worsened metrics

Total package byte prevSize

26794

-22.91%

Lines of code

198

-14.66%

No dependency changes