@asphalt-react/loader - npm Package Compare versions

Comparing version 2.0.0-rc.4 to 2.0.0-rc.11

dist/index.cjs

@@ -7,2 +7,3 @@ 'use strict';
 var context = require('@asphalt-react/context');
+var helper = require('@asphalt-react/helper');
 
@@ -53,11 +54,21 @@ function _extends() {
 
-var css_248z = ".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: 50%;\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 styles = {"Loader":"Loader__KgYkI","dot":"dot__N72ab","changeColors":"changeColors__8ngtm","s":"s__T-98r","m":"m__QunAE","l":"l__7RW4Y"};
-var stylesheet=".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: 50%;\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  -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 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";
+styleInject(css_248z$1);
+
+const count=5;const sizesLoader=["s","m","l"];const sizesSpinner=["xs","s","m","l","xl","xxl"];
+
+const resolveSizeLoader=size=>{if(sizesLoader.includes(size)){return size}return "m"};const resolveSizeSpinner=size=>{if(sizesSpinner.includes(size)){return size}return "m"};
+
+const Loader=({size,...props})=>{context.sendStyles(stylesheet$1);const{style,className,...rest}=props;const dotClass=cn(styles$1.dot,styles$1[resolveSizeLoader(size)]);const isAriaBusy=typeof rest["aria-busy"]!=="undefined"?rest["aria-busy"]:true;return React.createElement("span",_extends({},rest,{role:"progressbar",className:cn(styles$1.Loader),"aria-busy":isAriaBusy}),[...Array(count)].map((_,i)=>React.createElement("span",{key:i,className:dotClass,"data-testid":`loader-dot_${i}`})))};Loader.displayName="Loader";Loader.propTypes={size:PropTypes.oneOf(["s","m","l"])};Loader.defaultProps={size:"m"};
+
+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 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";
 styleInject(css_248z);
 
-const count=5;const sizeClass=size=>{const sizes=["s","m","l"];if(sizes.includes(size)){return size}return "m"};
+const{resolvePropCollision}=helper.propsUtil;const Spinner=({size,neutral,brand,inverse,...props})=>{context.sendStyles(stylesheet);const{style,className,...rest}=props;const{collision,value:intent}=resolvePropCollision({neutral,brand,inverse},"neutral");if(collision){console.warn(`Spinner: Multiple intents detected. Falling back to "neutral"`);}const spinnerClass=cn(styles.Spinner,styles[resolveSizeSpinner(size)],styles[intent]);return React.createElement("svg",_extends({"aria-label":"Loading"},rest,{role:"progress-bar",viewBox:"0 0 71 71",className:spinnerClass}),React.createElement("circle",{cx:"35.5",cy:"35.5",r:"30",className:styles.circle,fill:"none"}))};Spinner.displayName="Spinner";Spinner.propTypes={size:PropTypes.oneOf(["xs","s","m","l","xl","xxl"]),neutral:PropTypes.bool,brand:PropTypes.bool,inverse:PropTypes.bool};Spinner.defaultProps={size:"m",neutral:false,brand:false,inverse:false};
 
-const Loader=({size,...props})=>{context.sendStyles(stylesheet);const{style,className,...rest}=props;const dotClass=cn(styles.dot,styles[sizeClass(size)]);const isAriaBusy=typeof rest["aria-busy"]!=="undefined"?rest["aria-busy"]:true;return React.createElement("span",_extends({},rest,{role:"progressbar",className:cn(styles.Loader),"aria-busy":isAriaBusy}),[...Array(count)].map((_,i)=>React.createElement("span",{key:i,className:dotClass,"data-testid":`loader-dot_${i}`})))};Loader.displayName="Loader";Loader.propTypes={size:PropTypes.oneOf(["s","m","l"])};Loader.defaultProps={size:"m"};
-
 exports.Loader = Loader;
+exports.Spinner = Spinner;

dist/index.js

@@ -5,2 +5,3 @@ import React from 'react';
 import { sendStyles } from '@asphalt-react/context';
+import { propsUtil } from '@asphalt-react/helper';
 
@@ -51,11 +52,20 @@ function _extends() {
 
-var css_248z = ".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: 50%;\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 styles = {"Loader":"Loader__KgYkI","dot":"dot__N72ab","changeColors":"changeColors__8ngtm","s":"s__T-98r","m":"m__QunAE","l":"l__7RW4Y"};
-var stylesheet=".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: 50%;\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  -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 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";
+styleInject(css_248z$1);
+
+const count=5;const sizesLoader=["s","m","l"];const sizesSpinner=["xs","s","m","l","xl","xxl"];
+
+const resolveSizeLoader=size=>{if(sizesLoader.includes(size)){return size}return "m"};const resolveSizeSpinner=size=>{if(sizesSpinner.includes(size)){return size}return "m"};
+
+const Loader=({size,...props})=>{sendStyles(stylesheet$1);const{style,className,...rest}=props;const dotClass=cn(styles$1.dot,styles$1[resolveSizeLoader(size)]);const isAriaBusy=typeof rest["aria-busy"]!=="undefined"?rest["aria-busy"]:true;return React.createElement("span",_extends({},rest,{role:"progressbar",className:cn(styles$1.Loader),"aria-busy":isAriaBusy}),[...Array(count)].map((_,i)=>React.createElement("span",{key:i,className:dotClass,"data-testid":`loader-dot_${i}`})))};Loader.displayName="Loader";Loader.propTypes={size:PropTypes.oneOf(["s","m","l"])};Loader.defaultProps={size:"m"};
+
+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 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";
 styleInject(css_248z);
 
-const count=5;const sizeClass=size=>{const sizes=["s","m","l"];if(sizes.includes(size)){return size}return "m"};
+const{resolvePropCollision}=propsUtil;const Spinner=({size,neutral,brand,inverse,...props})=>{sendStyles(stylesheet);const{style,className,...rest}=props;const{collision,value:intent}=resolvePropCollision({neutral,brand,inverse},"neutral");if(collision){console.warn(`Spinner: Multiple intents detected. Falling back to "neutral"`);}const spinnerClass=cn(styles.Spinner,styles[resolveSizeSpinner(size)],styles[intent]);return React.createElement("svg",_extends({"aria-label":"Loading"},rest,{role:"progress-bar",viewBox:"0 0 71 71",className:spinnerClass}),React.createElement("circle",{cx:"35.5",cy:"35.5",r:"30",className:styles.circle,fill:"none"}))};Spinner.displayName="Spinner";Spinner.propTypes={size:PropTypes.oneOf(["xs","s","m","l","xl","xxl"]),neutral:PropTypes.bool,brand:PropTypes.bool,inverse:PropTypes.bool};Spinner.defaultProps={size:"m",neutral:false,brand:false,inverse:false};
 
-const Loader=({size,...props})=>{sendStyles(stylesheet);const{style,className,...rest}=props;const dotClass=cn(styles.dot,styles[sizeClass(size)]);const isAriaBusy=typeof rest["aria-busy"]!=="undefined"?rest["aria-busy"]:true;return React.createElement("span",_extends({},rest,{role:"progressbar",className:cn(styles.Loader),"aria-busy":isAriaBusy}),[...Array(count)].map((_,i)=>React.createElement("span",{key:i,className:dotClass,"data-testid":`loader-dot_${i}`})))};Loader.displayName="Loader";Loader.propTypes={size:PropTypes.oneOf(["s","m","l"])};Loader.defaultProps={size:"m"};
-
-export { Loader };
+export { Loader, Spinner };

package.json

 {
   "name": "@asphalt-react/loader",
-  "version": "2.0.0-rc.4",
+  "version": "2.0.0-rc.11",
   "description": "Loader",
@@ -40,7 +40,7 @@ "keywords": [
   "devDependencies": {
-    "@asphalt-react/build": "^2.0.0-rc.4",
+    "@asphalt-react/build": "^2.0.0-rc.11",
     "@testing-library/react": "^11.2.7"
   },
   "dependencies": {
-    "@asphalt-react/context": "^2.0.0-rc.4",
+    "@asphalt-react/context": "^2.0.0-rc.11",
     "classnames": "^2.5.1",
@@ -50,3 +50,3 @@ "prop-types": "^15.8.1"
   "license": "UNLICENSED",
-  "gitHead": "c2caf6ecdc6eed699abc68114432ffc0fc0a369b"
+  "gitHead": "5f9823f7793020d3dbeb89829f9cba467236e7ca"
 }

README.md

@@ -5,16 +5,27 @@ # Loader
 
-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.
+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:
 
-## Accessibility
+* Loader (Dot)
+* Spinner
 
-* Loader supports [preferred reduce motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) accessibility feature. When `Reduce Motion` is enabled, the animation slows down.
+Loaders come in different sizes and intents.
 
 ## Usage
 
-```
-import { Loader } from "@asphalt-react/loader
+```jsx
+import { Loader, Spinner } from "@asphalt-react/loader"
 
 <Loader />
+<Spinner />
 ```
 
+## Accessibility
+
+* Loader and Spinner supports [preferred reduce motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) accessibility feature. Enabling the `Reduce Motion` setting slows down the animation.
+* Loaders (both Dot and Spinner) have the [ARIA "progressbar" role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role).
+
+## Sizes
+
+* Loader supports 3 sizes - small (s), medium (m) (Default) and large (l).
+
 [comment]: # "Loader Props"
@@ -27,3 +38,3 @@
 Size of the Loader.
-Accepts s, m and l for small, medium & large respectively
+Accepts "s", "m" and "l" for small, medium & large respectively
 
@@ -33,1 +44,74 @@ | 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.
+
+* Text field size XS = Spinner size XS
+* Text field size S = Spinner size S
+* Button size XS = Spinner size XS
+
+```jsx
+import { Textfield } from "@asphalt-react/textfield"
+import { Spinner } from "@asphalt-react/loader"
+
+<Textfield addonEnd={<Spinner >} />
+```
+
+## Sizes
+
+Spinner support 6 sizes:
+
+* extra small (xs)
+* small (s)
+* medium (m) (Default)
+* large (l)
+* extra large (xl)
+* double extra large (xxl)
+
+## Intents
+
+Spinner support 3 intents:
+
+* neutral (Default)
+* brand
+* inverse
+
+[comment]: # "Spinner Props"
+
+## Props
+
+### size
+
+Size of the Spinner.
+Accepts "xs", "s", "m", "l", "xl", "xxl".
+
+| type | required | default |
+| ---- | -------- | ------- |
+| enum | false    | "m"     |
+
+### neutral
+
+Applies neutral intent.
+
+| type | required | default |
+| ---- | -------- | ------- |
+| bool | false    | false   |
+
+### brand
+
+Applies brand intent.
+
+| type | required | default |
+| ---- | -------- | ------- |
+| bool | false    | false   |
+
+### inverse
+
+Applies inverse intent.
+
+| type | required | default |
+| ---- | -------- | ------- |
+| bool | false    | false   |

New alerts

Explicitly Unlicensed Item

License

Something was found which is explicitly marked as unlicensed.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

Total package byte prevSize

33830

89.95%

Lines of code

198

42.45%

Number of lines in readme file

115

270.97%

Worsened metrics

Number of low supply chain risk alerts

9

80%

Dependency changes

• Updated

  @asphalt-react/context@^2.0.0-rc.11