react-loader-spinner - npm Package Compare versions

Comparing version 5.1.5 to 5.1.6-0

dist/esm/index.d.ts

@@ -6,9 +6,8 @@ import Audio from './loader/Audio';
 import CirclesWithBar from './loader/CirclesWithBar';
-import CradleLoader from './loader/CradleLoader';
 import Grid from './loader/Grid';
 import Hearts from './loader/Hearts';
+import InfinitySpin from './loader/InfinitySpin';
 import LineWave from './loader/LineWave';
 import MutatingDots from './loader/MutatingDots';
 import Oval from './loader/Oval';
-import Plane from './loader/Plane';
 import Puff from './loader/Puff';
@@ -23,2 +22,2 @@ import RevolvingDot from './loader/RevolvingDot';
 import Watch from './loader/Watch';
-export { Audio, BallTriangle, Bars, CradleLoader, Circles, CirclesWithBar, Grid, Hearts, LineWave, MutatingDots, Oval, Plane, Puff, RevolvingDot, RotatingSquare, Rings, TailSpin, ThreeDots, ThreeCircles, Triangle, Watch };
+export { Audio, BallTriangle, Bars, Circles, CirclesWithBar, Grid, Hearts, InfinitySpin, LineWave, MutatingDots, Oval, Puff, RevolvingDot, RotatingSquare, Rings, TailSpin, ThreeDots, ThreeCircles, Triangle, Watch };

dist/esm/index.js

@@ -6,9 +6,8 @@ import Audio from './loader/Audio';
 import CirclesWithBar from './loader/CirclesWithBar';
-import CradleLoader from './loader/CradleLoader';
 import Grid from './loader/Grid';
 import Hearts from './loader/Hearts';
+import InfinitySpin from './loader/InfinitySpin';
 import LineWave from './loader/LineWave';
 import MutatingDots from './loader/MutatingDots';
 import Oval from './loader/Oval';
-import Plane from './loader/Plane';
 import Puff from './loader/Puff';
@@ -23,2 +22,2 @@ import RevolvingDot from './loader/RevolvingDot';
 import Watch from './loader/Watch';
-export { Audio, BallTriangle, Bars, CradleLoader, Circles, CirclesWithBar, Grid, Hearts, LineWave, MutatingDots, Oval, Plane, Puff, RevolvingDot, RotatingSquare, Rings, TailSpin, ThreeDots, ThreeCircles, Triangle, Watch };
+export { Audio, BallTriangle, Bars, Circles, CirclesWithBar, Grid, Hearts, InfinitySpin, LineWave, MutatingDots, Oval, Puff, RevolvingDot, RotatingSquare, Rings, TailSpin, ThreeDots, ThreeCircles, Triangle, Watch };

dist/esm/loader/Audio.js

@@ -17,3 +17,3 @@ var __assign = (this && this.__assign) || function () {
 var Audio = function (_a) {
-    var _b = _a.height, height = _b === void 0 ? '100' : _b, _c = _a.width, width = _c === void 0 ? '100' : _c, _d = _a.color, color = _d === void 0 ? 'blue' : _d, _e = _a.ariaLabel, ariaLabel = _e === void 0 ? 'audio-loading' : _e, _f = _a.wrapperStyle, wrapperStyle = _f === void 0 ? {} : _f, wrapperClass = _a.wrapperClass, _g = _a.visible, visible = _g === void 0 ? true : _g;
+    var _b = _a.height, height = _b === void 0 ? '100' : _b, _c = _a.width, width = _c === void 0 ? '100' : _c, _d = _a.color, color = _d === void 0 ? '#4fa94d' : _d, _e = _a.ariaLabel, ariaLabel = _e === void 0 ? 'audio-loading' : _e, _f = _a.wrapperStyle, wrapperStyle = _f === void 0 ? {} : _f, wrapperClass = _a.wrapperClass, _g = _a.visible, visible = _g === void 0 ? true : _g;
     return (React.createElement("div", { style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: wrapperClass, "data-testid": "audio-loading" },
@@ -20,0 +20,0 @@ React.createElement("svg", { height: "".concat(height), width: "".concat(width), fill: color, viewBox: "0 0 55 80", xmlns: "http://www.w3.org/2000/svg", "aria-label": ariaLabel, "data-testid": "audio-svg" },

dist/esm/loader/BallTriangle.js

@@ -17,3 +17,3 @@ var __assign = (this && this.__assign) || function () {
 var BallTriangle = function (_a) {
-    var _b = _a.height, height = _b === void 0 ? 100 : _b, _c = _a.width, width = _c === void 0 ? 100 : _c, _d = _a.radius, radius = _d === void 0 ? 5 : _d, _e = _a.color, color = _e === void 0 ? 'blue' : _e, _f = _a.ariaLabel, ariaLabel = _f === void 0 ? 'ball-triangle-loading' : _f, wrapperClass = _a.wrapperClass, wrapperStyle = _a.wrapperStyle, _g = _a.visible, visible = _g === void 0 ? true : _g;
+    var _b = _a.height, height = _b === void 0 ? 100 : _b, _c = _a.width, width = _c === void 0 ? 100 : _c, _d = _a.radius, radius = _d === void 0 ? 5 : _d, _e = _a.color, color = _e === void 0 ? '#4fa94d' : _e, _f = _a.ariaLabel, ariaLabel = _f === void 0 ? 'ball-triangle-loading' : _f, wrapperClass = _a.wrapperClass, wrapperStyle = _a.wrapperStyle, _g = _a.visible, visible = _g === void 0 ? true : _g;
     return (React.createElement("div", { style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: wrapperClass, "data-testid": "ball-triangle-loading" },
@@ -20,0 +20,0 @@ React.createElement("svg", { height: height, width: width, stroke: color, viewBox: "0 0 57 57", xmlns: "http://www.w3.org/2000/svg", "data-testid": "ball-triangle-svg", "aria-label": ariaLabel },

dist/esm/loader/Bars.js

@@ -17,3 +17,3 @@ var __assign = (this && this.__assign) || function () {
 var Bars = function (_a) {
-    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.color, color = _d === void 0 ? 'blue' : _d, _e = _a.ariaLabel, ariaLabel = _e === void 0 ? 'bars-loading' : _e, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _f = _a.visible, visible = _f === void 0 ? true : _f;
+    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.color, color = _d === void 0 ? '#4fa94d' : _d, _e = _a.ariaLabel, ariaLabel = _e === void 0 ? 'bars-loading' : _e, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _f = _a.visible, visible = _f === void 0 ? true : _f;
     return (React.createElement("div", { style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: wrapperClass, "data-testid": "bars-loading" },
@@ -20,0 +20,0 @@ React.createElement("svg", { width: width, height: height, fill: color, viewBox: "0 0 135 140", xmlns: "http://www.w3.org/2000/svg", "data-testid": "bars-svg", "aria-label": ariaLabel },

dist/esm/loader/Circles.js

@@ -17,3 +17,3 @@ var __assign = (this && this.__assign) || function () {
 var Circles = function (_a) {
-    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.color, color = _d === void 0 ? 'green' : _d, _e = _a.ariaLabel, ariaLabel = _e === void 0 ? 'circles-loading' : _e, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _f = _a.visible, visible = _f === void 0 ? true : _f;
+    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.color, color = _d === void 0 ? '#4fa94d' : _d, _e = _a.ariaLabel, ariaLabel = _e === void 0 ? 'circles-loading' : _e, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _f = _a.visible, visible = _f === void 0 ? true : _f;
     return (React.createElement("div", { style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: wrapperClass, "data-testid": "circles-loading" },
@@ -20,0 +20,0 @@ React.createElement("svg", { width: width, height: height, viewBox: "0 0 135 135", xmlns: "http://www.w3.org/2000/svg", fill: color, "aria-label": ariaLabel, "data-testid": "circles-svg" },

dist/esm/loader/CirclesWithBar.d.ts

@@ -13,4 +13,5 @@ import React from 'react';
     barColor?: string;
+    ariaLabel?: string;
 };
 declare const CirclesWithBar: React.FunctionComponent<Props>;
 export default CirclesWithBar;

dist/esm/loader/CirclesWithBar.js

@@ -17,4 +17,4 @@ var __assign = (this && this.__assign) || function () {
 var CirclesWithBar = function (_a) {
-    var _b = _a.wrapperStyle, wrapperStyle = _b === void 0 ? {} : _b, _c = _a.visible, visible = _c === void 0 ? true : _c, _d = _a.wrapperClass, wrapperClass = _d === void 0 ? '' : _d, _e = _a.height, height = _e === void 0 ? 100 : _e, _f = _a.width, width = _f === void 0 ? 100 : _f, _g = _a.color, color = _g === void 0 ? 'red' : _g, outerCircleColor = _a.outerCircleColor, innerCircleColor = _a.innerCircleColor, barColor = _a.barColor;
-    return (React.createElement("div", { style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: wrapperClass, "data-testid": "circles-with-bar-wrapper" },
+    var _b = _a.wrapperStyle, wrapperStyle = _b === void 0 ? {} : _b, _c = _a.visible, visible = _c === void 0 ? true : _c, _d = _a.wrapperClass, wrapperClass = _d === void 0 ? '' : _d, _e = _a.height, height = _e === void 0 ? 100 : _e, _f = _a.width, width = _f === void 0 ? 100 : _f, _g = _a.color, color = _g === void 0 ? '#4fa94d' : _g, outerCircleColor = _a.outerCircleColor, innerCircleColor = _a.innerCircleColor, barColor = _a.barColor, _h = _a.ariaLabel, ariaLabel = _h === void 0 ? 'circles-with-bar-loading' : _h;
+    return (React.createElement("div", { style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: wrapperClass, "aria-label": ariaLabel, "data-testid": "circles-with-bar-wrapper" },
         React.createElement("svg", { version: "1.1", id: "L1", xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", height: "".concat(height), width: "".concat(width), viewBox: "0 0 100 100", enableBackground: "new 0 0 100 100", xmlSpace: "preserve", "data-testid": "circles-with-bar-svg" },
@@ -21,0 +21,0 @@ React.createElement("circle", { fill: "none", stroke: "".concat(outerCircleColor || color), strokeWidth: "6", strokeMiterlimit: "15", strokeDasharray: "14.2472,14.2472", cx: "50", cy: "50", r: "47", "data-testid": "circles-with-bar-svg-outer-circle" },

dist/esm/loader/Grid.js

@@ -17,3 +17,3 @@ var __assign = (this && this.__assign) || function () {
 export var Grid = function (_a) {
-    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.radius, radius = _d === void 0 ? 12.5 : _d, _e = _a.color, color = _e === void 0 ? 'green' : _e, _f = _a.ariaLabel, ariaLabel = _f === void 0 ? 'grid-loading' : _f, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _g = _a.visible, visible = _g === void 0 ? true : _g;
+    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.radius, radius = _d === void 0 ? 12.5 : _d, _e = _a.color, color = _e === void 0 ? '#4fa94d' : _e, _f = _a.ariaLabel, ariaLabel = _f === void 0 ? 'grid-loading' : _f, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _g = _a.visible, visible = _g === void 0 ? true : _g;
     return (React.createElement("div", { style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: wrapperClass, "data-testid": "grid-loading" },
@@ -20,0 +20,0 @@ React.createElement("svg", { width: width, height: height, viewBox: "0 0 105 105", fill: color, "aria-label": ariaLabel, "data-testid": "grid-svg" },

dist/esm/loader/Hearts.js

@@ -17,3 +17,3 @@ var __assign = (this && this.__assign) || function () {
 var Hearts = function (_a) {
-    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.color, color = _d === void 0 ? 'green' : _d, _e = _a.ariaLabel, ariaLabel = _e === void 0 ? 'hearts-loading' : _e, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _f = _a.visible, visible = _f === void 0 ? true : _f;
+    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.color, color = _d === void 0 ? '#4fa94d' : _d, _e = _a.ariaLabel, ariaLabel = _e === void 0 ? 'hearts-loading' : _e, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _f = _a.visible, visible = _f === void 0 ? true : _f;
     return (React.createElement("div", { style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: wrapperClass, "data-testid": "hearts-loading" },
@@ -20,0 +20,0 @@ React.createElement("svg", { width: width, height: height, viewBox: "0 0 140 64", xmlns: "http://www.w3.org/2000/svg", fill: color, "aria-label": ariaLabel, "data-testid": "hearts-svg" },

dist/esm/loader/LineWave.js

@@ -17,3 +17,3 @@ var __assign = (this && this.__assign) || function () {
 var LineWave = function (_a) {
-    var _b = _a.wrapperStyle, wrapperStyle = _b === void 0 ? {} : _b, _c = _a.visible, visible = _c === void 0 ? true : _c, _d = _a.wrapperClass, wrapperClass = _d === void 0 ? '' : _d, _e = _a.height, height = _e === void 0 ? 100 : _e, _f = _a.width, width = _f === void 0 ? 100 : _f, _g = _a.color, color = _g === void 0 ? 'red' : _g, _h = _a.ariaLabel, ariaLabel = _h === void 0 ? 'line-wave' : _h, firstLineColor = _a.firstLineColor, middleLineColor = _a.middleLineColor, lastLineColor = _a.lastLineColor;
+    var _b = _a.wrapperStyle, wrapperStyle = _b === void 0 ? {} : _b, _c = _a.visible, visible = _c === void 0 ? true : _c, _d = _a.wrapperClass, wrapperClass = _d === void 0 ? '' : _d, _e = _a.height, height = _e === void 0 ? 100 : _e, _f = _a.width, width = _f === void 0 ? 100 : _f, _g = _a.color, color = _g === void 0 ? '#4fa94d' : _g, _h = _a.ariaLabel, ariaLabel = _h === void 0 ? 'line-wave' : _h, firstLineColor = _a.firstLineColor, middleLineColor = _a.middleLineColor, lastLineColor = _a.lastLineColor;
     return (React.createElement("div", { style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: wrapperClass, "data-testid": "line-wave-wrapper" },
@@ -20,0 +20,0 @@ React.createElement("svg", { version: "1.1", height: "".concat(height), width: "".concat(width), xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", viewBox: "0 0 100 100", enableBackground: "new 0 0 0 0", xmlSpace: "preserve", "aria-label": ariaLabel, "data-testid": "line-wave-svg" },

dist/esm/loader/MutatingDots.js

@@ -17,3 +17,3 @@ var __assign = (this && this.__assign) || function () {
 var MutatingDots = function (_a) {
-    var _b = _a.height, height = _b === void 0 ? 90 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.radius, radius = _d === void 0 ? 12.5 : _d, _e = _a.color, color = _e === void 0 ? 'green' : _e, _f = _a.secondaryColor, secondaryColor = _f === void 0 ? 'blue' : _f, _g = _a.ariaLabel, ariaLabel = _g === void 0 ? 'mutating-dots-loading' : _g, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _h = _a.visible, visible = _h === void 0 ? true : _h;
+    var _b = _a.height, height = _b === void 0 ? 90 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.radius, radius = _d === void 0 ? 12.5 : _d, _e = _a.color, color = _e === void 0 ? '#4fa94d' : _e, _f = _a.secondaryColor, secondaryColor = _f === void 0 ? '#4fa94d' : _f, _g = _a.ariaLabel, ariaLabel = _g === void 0 ? 'mutating-dots-loading' : _g, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _h = _a.visible, visible = _h === void 0 ? true : _h;
     return (React.createElement("div", { style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: wrapperClass, "data-testid": "mutating-dots-loading" },
@@ -20,0 +20,0 @@ React.createElement("svg", { id: "goo-loader", width: width, height: height, "aria-label": ariaLabel, "data-testid": "mutating-dots-svg" },

dist/esm/loader/Oval.js

@@ -27,3 +27,3 @@ var __assign = (this && this.__assign) || function () {
 var Oval = function (_a) {
-    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.color, color = _d === void 0 ? 'green' : _d, _e = _a.secondaryColor, secondaryColor = _e === void 0 ? 'green' : _e, _f = _a.ariaLabel, ariaLabel = _f === void 0 ? 'oval-loading' : _f, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _g = _a.visible, visible = _g === void 0 ? true : _g, _h = _a.strokeWidth, strokeWidth = _h === void 0 ? 2 : _h, strokeWidthSecondary = _a.strokeWidthSecondary;
+    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.color, color = _d === void 0 ? '#4fa94d' : _d, _e = _a.secondaryColor, secondaryColor = _e === void 0 ? '#4fa94d' : _e, _f = _a.ariaLabel, ariaLabel = _f === void 0 ? 'oval-loading' : _f, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _g = _a.visible, visible = _g === void 0 ? true : _g, _h = _a.strokeWidth, strokeWidth = _h === void 0 ? 2 : _h, strokeWidthSecondary = _a.strokeWidthSecondary;
     return (React.createElement("div", { style: __assign(__assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), { padding: 3 }), className: wrapperClass, "data-testid": "oval-loading" },
@@ -30,0 +30,0 @@ React.createElement("svg", { width: width, height: height, viewBox: getViewBoxSize(Number(strokeWidth), Number(strokeWidthSecondary || strokeWidth), RADIUS), xmlns: "http://www.w3.org/2000/svg", stroke: color, "data-testid": "oval-svg", "aria-label": ariaLabel },

dist/esm/loader/Puff.js

@@ -17,3 +17,3 @@ var __assign = (this && this.__assign) || function () {
 export var Puff = function (_a) {
-    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.radius, radius = _d === void 0 ? 1 : _d, _e = _a.color, color = _e === void 0 ? 'green' : _e, _f = _a.ariaLabel, ariaLabel = _f === void 0 ? 'puff-loading' : _f, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _g = _a.visible, visible = _g === void 0 ? true : _g;
+    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.radius, radius = _d === void 0 ? 1 : _d, _e = _a.color, color = _e === void 0 ? '#4fa94d' : _e, _f = _a.ariaLabel, ariaLabel = _f === void 0 ? 'puff-loading' : _f, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _g = _a.visible, visible = _g === void 0 ? true : _g;
     return (React.createElement("div", { style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: wrapperClass, "data-testid": "puff-loading" },
@@ -20,0 +20,0 @@ React.createElement("svg", { width: width, height: height, viewBox: "0 0 44 44", xmlns: "http://www.w3.org/2000/svg", stroke: color, "aria-label": ariaLabel, "data-testid": "puff-svg" },

dist/esm/loader/RevolvingDot.js

@@ -17,3 +17,3 @@ var __assign = (this && this.__assign) || function () {
 var RevolvingDot = function (_a) {
-    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.radius, radius = _d === void 0 ? 6 : _d, _e = _a.color, color = _e === void 0 ? 'green' : _e, _f = _a.ariaLabel, ariaLabel = _f === void 0 ? 'revolving-dot-loading' : _f, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _g = _a.visible, visible = _g === void 0 ? true : _g;
+    var _b = _a.height, height = _b === void 0 ? 100 : _b, _c = _a.width, width = _c === void 0 ? 100 : _c, _d = _a.radius, radius = _d === void 0 ? 6 : _d, _e = _a.color, color = _e === void 0 ? '#4fa94d' : _e, _f = _a.ariaLabel, ariaLabel = _f === void 0 ? 'revolving-dot-loading' : _f, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _g = _a.visible, visible = _g === void 0 ? true : _g;
     return (React.createElement("div", { style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: wrapperClass, "data-testid": "revolving-dot-loading" },
@@ -20,0 +20,0 @@ React.createElement("svg", { version: "1.1", width: width, height: height, xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", "aria-label": ariaLabel, "data-testid": "revolving-dot-svg" },

dist/esm/loader/Rings.js

@@ -17,3 +17,3 @@ var __assign = (this && this.__assign) || function () {
 export var Rings = function (_a) {
-    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.radius, radius = _d === void 0 ? 6 : _d, _e = _a.color, color = _e === void 0 ? 'green' : _e, _f = _a.ariaLabel, ariaLabel = _f === void 0 ? 'rings-loading' : _f, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _g = _a.visible, visible = _g === void 0 ? true : _g;
+    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.radius, radius = _d === void 0 ? 6 : _d, _e = _a.color, color = _e === void 0 ? '#4fa94d' : _e, _f = _a.ariaLabel, ariaLabel = _f === void 0 ? 'rings-loading' : _f, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _g = _a.visible, visible = _g === void 0 ? true : _g;
     return (React.createElement("div", { style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: wrapperClass, "data-testid": "rings-loading" },
@@ -20,0 +20,0 @@ React.createElement("svg", { width: width, height: height, viewBox: "0 0 45 45", xmlns: "http://www.w3.org/2000/svg", stroke: color, "aria-label": ariaLabel, "data-testid": "rings-svg" },

dist/esm/loader/RotatingSquare.d.ts

 import React from 'react';
 import { Style } from '../type';
 declare type RotatingSquareProps = {
-    style?: Style;
     wrapperClass?: '';
@@ -6,0 +5,0 @@ color?: string;

dist/esm/loader/RotatingSquare.js

@@ -17,3 +17,3 @@ var __assign = (this && this.__assign) || function () {
 var RotatingSquare = function (_a) {
-    var _b = _a.style, style = _b === void 0 ? {} : _b, _c = _a.wrapperClass, wrapperClass = _c === void 0 ? '' : _c, _d = _a.color, color = _d === void 0 ? 'red' : _d, number = _a.strokeWidth, _e = _a.height, height = _e === void 0 ? 100 : _e, _f = _a.width, width = _f === void 0 ? 100 : _f, _g = _a.strokeWidth, strokeWidth = _g === void 0 ? 4 : _g, _h = _a.ariaLabel, ariaLabel = _h === void 0 ? 'rotating-square-loading' : _h, _j = _a.wrapperStyle, wrapperStyle = _j === void 0 ? {} : _j, _k = _a.visible, visible = _k === void 0 ? true : _k;
+    var _b = _a.wrapperClass, wrapperClass = _b === void 0 ? '' : _b, _c = _a.color, color = _c === void 0 ? '#4fa94d' : _c, _d = _a.height, height = _d === void 0 ? 100 : _d, _e = _a.width, width = _e === void 0 ? 100 : _e, _f = _a.strokeWidth, strokeWidth = _f === void 0 ? 4 : _f, _g = _a.ariaLabel, ariaLabel = _g === void 0 ? 'rotating-square-loading' : _g, _h = _a.wrapperStyle, wrapperStyle = _h === void 0 ? {} : _h, _j = _a.visible, visible = _j === void 0 ? true : _j;
     return (React.createElement("div", { style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: wrapperClass, "data-testid": "rotating-square-wrapper" },
@@ -20,0 +20,0 @@ React.createElement("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", viewBox: "0 0 100 100", enableBackground: "new 0 0 100 100", height: "".concat(height), width: "".concat(width), "aria-label": ariaLabel, "data-testid": "rotating-square-svg", xmlSpace: "preserve" },

dist/esm/loader/TailSpin.js

@@ -17,3 +17,3 @@ var __assign = (this && this.__assign) || function () {
 export var TailSpin = function (_a) {
-    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.radius, radius = _d === void 0 ? 1 : _d, _e = _a.color, color = _e === void 0 ? 'green' : _e, _f = _a.ariaLabel, ariaLabel = _f === void 0 ? 'tail-spin-loading' : _f, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _g = _a.visible, visible = _g === void 0 ? true : _g;
+    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.radius, radius = _d === void 0 ? 1 : _d, _e = _a.color, color = _e === void 0 ? '#4fa94d' : _e, _f = _a.ariaLabel, ariaLabel = _f === void 0 ? 'tail-spin-loading' : _f, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _g = _a.visible, visible = _g === void 0 ? true : _g;
     return (React.createElement("div", { style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: wrapperClass, "data-testid": "tail-spin-loading" },
@@ -20,0 +20,0 @@ React.createElement("svg", { width: width, height: height, viewBox: "0 0 38 38", xmlns: "http://www.w3.org/2000/svg", "aria-label": ariaLabel, "data-testid": "tail-spin-svg" },

dist/esm/loader/ThreeCircles.js

@@ -17,3 +17,3 @@ var __assign = (this && this.__assign) || function () {
 var ThreeCircles = function (_a) {
-    var _b = _a.wrapperStyle, wrapperStyle = _b === void 0 ? {} : _b, _c = _a.visible, visible = _c === void 0 ? true : _c, _d = _a.wrapperClass, wrapperClass = _d === void 0 ? '' : _d, _e = _a.height, height = _e === void 0 ? 100 : _e, _f = _a.width, width = _f === void 0 ? 100 : _f, _g = _a.color, color = _g === void 0 ? 'red' : _g, _h = _a.ariaLabel, ariaLabel = _h === void 0 ? 'rotating-three-circles' : _h, outerCircleColor = _a.outerCircleColor, innerCircleColor = _a.innerCircleColor, middleCircleColor = _a.middleCircleColor;
+    var _b = _a.wrapperStyle, wrapperStyle = _b === void 0 ? {} : _b, _c = _a.visible, visible = _c === void 0 ? true : _c, _d = _a.wrapperClass, wrapperClass = _d === void 0 ? '' : _d, _e = _a.height, height = _e === void 0 ? 100 : _e, _f = _a.width, width = _f === void 0 ? 100 : _f, _g = _a.color, color = _g === void 0 ? '#4fa94d' : _g, _h = _a.ariaLabel, ariaLabel = _h === void 0 ? 'rotating-three-circles' : _h, outerCircleColor = _a.outerCircleColor, innerCircleColor = _a.innerCircleColor, middleCircleColor = _a.middleCircleColor;
     return (React.createElement("div", { style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: wrapperClass, "data-testid": "three-circles-wrapper" },
@@ -20,0 +20,0 @@ React.createElement("svg", { version: "1.1", height: "".concat(height), width: "".concat(width), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 100", enableBackground: "new 0 0 100 100", xmlSpace: "preserve", "data-testid": "three-circles-svg", "aria-label": ariaLabel },

dist/esm/loader/ThreeDots.js

@@ -17,3 +17,3 @@ var __assign = (this && this.__assign) || function () {
 var ThreeDots = function (_a) {
-    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.radius, radius = _d === void 0 ? 9 : _d, _e = _a.color, color = _e === void 0 ? 'green' : _e, _f = _a.ariaLabel, ariaLabel = _f === void 0 ? 'three-dots-loading' : _f, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _g = _a.visible, visible = _g === void 0 ? true : _g;
+    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.radius, radius = _d === void 0 ? 9 : _d, _e = _a.color, color = _e === void 0 ? '4fa94d' : _e, _f = _a.ariaLabel, ariaLabel = _f === void 0 ? 'three-dots-loading' : _f, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _g = _a.visible, visible = _g === void 0 ? true : _g;
     return (React.createElement("div", { style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: wrapperClass, "data-testid": "three-dots-loading" },
@@ -20,0 +20,0 @@ React.createElement("svg", { width: width, height: height, viewBox: "0 0 120 30", xmlns: "http://www.w3.org/2000/svg", fill: color, "aria-label": ariaLabel, "data-testid": "three-dots-svg" },

dist/esm/loader/Triangle.d.ts

 import { FunctionComponent } from 'react';
 import { BaseProps } from '../type';
-interface TriangleProps extends BaseProps {
-}
+declare type TriangleProps = BaseProps;
 declare const Triangle: FunctionComponent<TriangleProps>;
 export default Triangle;

dist/esm/loader/Triangle.js

@@ -0,1 +1,5 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 var __assign = (this && this.__assign) || function () {
@@ -13,11 +17,16 @@ __assign = Object.assign || function(t) {
 import React from 'react';
+import styled, { keyframes } from 'styled-components';
+var dash = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n to {\n    stroke-dashoffset: 136;\n  }\n"], ["\n to {\n    stroke-dashoffset: 136;\n  }\n"])));
+var Polygon = styled.polygon(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  stroke-dasharray: 17;\n  animation: ", " 2.5s cubic-bezier(0.35, 0.04, 0.63, 0.95) infinite;\n"], ["\n  stroke-dasharray: 17;\n  animation: ", " 2.5s cubic-bezier(0.35, 0.04, 0.63, 0.95) infinite;\n"])), dash);
+var SVG = styled.svg(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  transform-origin: 50% 65%;\n"], ["\n  transform-origin: 50% 65%;\n"])));
 var getDefaultStyle = function (visible) { return ({
-    display: visible ? 'flex' : 'none'
+    display: visible ? 'flex' : 'none',
 }); };
 var Triangle = function (_a) {
     var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.color, color = _d === void 0 ? 'green' : _d, _e = _a.ariaLabel, ariaLabel = _e === void 0 ? 'triangle-loading' : _e, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _f = _a.visible, visible = _f === void 0 ? true : _f;
-    return (React.createElement("div", { role: "presentation", style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: "react-spinner-loader-svg ".concat(wrapperClass), "data-testid": "triangle-loading" },
-        React.createElement("svg", { id: "triangle", width: width, height: height, viewBox: "-3 -4 39 39", "aria-label": ariaLabel, "data-testid": "triangle-svg" },
-            React.createElement("polygon", { fill: "transparent", stroke: color, strokeWidth: "1", points: "16,0 32,32 0,32" }))));
+    return (React.createElement("div", { role: "presentation", style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: "".concat(wrapperClass), "data-testid": "triangle-loading" },
+        React.createElement(SVG, { id: "triangle", width: width, height: height, viewBox: "-3 -4 39 39", "aria-label": ariaLabel, "data-testid": "triangle-svg" },
+            React.createElement(Polygon, { fill: "transparent", stroke: color, strokeWidth: "1", points: "16,0 32,32 0,32" }))));
 };
 export default Triangle;
+var templateObject_1, templateObject_2, templateObject_3;

dist/esm/loader/Watch.js

@@ -17,3 +17,3 @@ var __assign = (this && this.__assign) || function () {
 var Watch = function (_a) {
-    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.radius, radius = _d === void 0 ? 48 : _d, _e = _a.color, color = _e === void 0 ? 'green' : _e, _f = _a.ariaLabel, ariaLabel = _f === void 0 ? 'watch-loading' : _f, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _g = _a.visible, visible = _g === void 0 ? true : _g;
+    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.radius, radius = _d === void 0 ? 48 : _d, _e = _a.color, color = _e === void 0 ? '#4fa94d' : _e, _f = _a.ariaLabel, ariaLabel = _f === void 0 ? 'watch-loading' : _f, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _g = _a.visible, visible = _g === void 0 ? true : _g;
     return (React.createElement("div", { style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: wrapperClass, "data-testid": "watch-loading" },
@@ -20,0 +20,0 @@ React.createElement("svg", { width: width, height: height, version: "1.1", id: "L2", xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", viewBox: "0 0 100 100", enableBackground: "new 0 0 100 100", xmlSpace: "preserve", "aria-label": ariaLabel, "data-testid": "watch-svg" },

dist/index.d.ts

@@ -6,9 +6,8 @@ import Audio from './loader/Audio';
 import CirclesWithBar from './loader/CirclesWithBar';
-import CradleLoader from './loader/CradleLoader';
 import Grid from './loader/Grid';
 import Hearts from './loader/Hearts';
+import InfinitySpin from './loader/InfinitySpin';
 import LineWave from './loader/LineWave';
 import MutatingDots from './loader/MutatingDots';
 import Oval from './loader/Oval';
-import Plane from './loader/Plane';
 import Puff from './loader/Puff';
@@ -23,2 +22,2 @@ import RevolvingDot from './loader/RevolvingDot';
 import Watch from './loader/Watch';
-export { Audio, BallTriangle, Bars, CradleLoader, Circles, CirclesWithBar, Grid, Hearts, LineWave, MutatingDots, Oval, Plane, Puff, RevolvingDot, RotatingSquare, Rings, TailSpin, ThreeDots, ThreeCircles, Triangle, Watch };
+export { Audio, BallTriangle, Bars, Circles, CirclesWithBar, Grid, Hearts, InfinitySpin, LineWave, MutatingDots, Oval, Puff, RevolvingDot, RotatingSquare, Rings, TailSpin, ThreeDots, ThreeCircles, Triangle, Watch };

dist/index.js

@@ -6,3 +6,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Watch = exports.Triangle = exports.ThreeCircles = exports.ThreeDots = exports.TailSpin = exports.Rings = exports.RotatingSquare = exports.RevolvingDot = exports.Puff = exports.Plane = exports.Oval = exports.MutatingDots = exports.LineWave = exports.Hearts = exports.Grid = exports.CirclesWithBar = exports.Circles = exports.CradleLoader = exports.Bars = exports.BallTriangle = exports.Audio = void 0;
+exports.Watch = exports.Triangle = exports.ThreeCircles = exports.ThreeDots = exports.TailSpin = exports.Rings = exports.RotatingSquare = exports.RevolvingDot = exports.Puff = exports.Oval = exports.MutatingDots = exports.LineWave = exports.InfinitySpin = exports.Hearts = exports.Grid = exports.CirclesWithBar = exports.Circles = exports.Bars = exports.BallTriangle = exports.Audio = void 0;
 var Audio_1 = __importDefault(require("./loader/Audio"));
@@ -18,4 +18,2 @@ exports.Audio = Audio_1.default;
 exports.CirclesWithBar = CirclesWithBar_1.default;
-var CradleLoader_1 = __importDefault(require("./loader/CradleLoader"));
-exports.CradleLoader = CradleLoader_1.default;
 var Grid_1 = __importDefault(require("./loader/Grid"));
@@ -25,2 +23,4 @@ exports.Grid = Grid_1.default;
 exports.Hearts = Hearts_1.default;
+var InfinitySpin_1 = __importDefault(require("./loader/InfinitySpin"));
+exports.InfinitySpin = InfinitySpin_1.default;
 var LineWave_1 = __importDefault(require("./loader/LineWave"));
@@ -32,4 +32,2 @@ exports.LineWave = LineWave_1.default;
 exports.Oval = Oval_1.default;
-var Plane_1 = __importDefault(require("./loader/Plane"));
-exports.Plane = Plane_1.default;
 var Puff_1 = __importDefault(require("./loader/Puff"));
@@ -36,0 +34,0 @@ exports.Puff = Puff_1.default;

dist/loader/Audio.js

@@ -22,3 +22,3 @@ "use strict";
 var Audio = function (_a) {
-    var _b = _a.height, height = _b === void 0 ? '100' : _b, _c = _a.width, width = _c === void 0 ? '100' : _c, _d = _a.color, color = _d === void 0 ? 'blue' : _d, _e = _a.ariaLabel, ariaLabel = _e === void 0 ? 'audio-loading' : _e, _f = _a.wrapperStyle, wrapperStyle = _f === void 0 ? {} : _f, wrapperClass = _a.wrapperClass, _g = _a.visible, visible = _g === void 0 ? true : _g;
+    var _b = _a.height, height = _b === void 0 ? '100' : _b, _c = _a.width, width = _c === void 0 ? '100' : _c, _d = _a.color, color = _d === void 0 ? '#4fa94d' : _d, _e = _a.ariaLabel, ariaLabel = _e === void 0 ? 'audio-loading' : _e, _f = _a.wrapperStyle, wrapperStyle = _f === void 0 ? {} : _f, wrapperClass = _a.wrapperClass, _g = _a.visible, visible = _g === void 0 ? true : _g;
     return (react_1.default.createElement("div", { style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: wrapperClass, "data-testid": "audio-loading" },
@@ -25,0 +25,0 @@ react_1.default.createElement("svg", { height: "".concat(height), width: "".concat(width), fill: color, viewBox: "0 0 55 80", xmlns: "http://www.w3.org/2000/svg", "aria-label": ariaLabel, "data-testid": "audio-svg" },

dist/loader/BallTriangle.js

@@ -22,3 +22,3 @@ "use strict";
 var BallTriangle = function (_a) {
-    var _b = _a.height, height = _b === void 0 ? 100 : _b, _c = _a.width, width = _c === void 0 ? 100 : _c, _d = _a.radius, radius = _d === void 0 ? 5 : _d, _e = _a.color, color = _e === void 0 ? 'blue' : _e, _f = _a.ariaLabel, ariaLabel = _f === void 0 ? 'ball-triangle-loading' : _f, wrapperClass = _a.wrapperClass, wrapperStyle = _a.wrapperStyle, _g = _a.visible, visible = _g === void 0 ? true : _g;
+    var _b = _a.height, height = _b === void 0 ? 100 : _b, _c = _a.width, width = _c === void 0 ? 100 : _c, _d = _a.radius, radius = _d === void 0 ? 5 : _d, _e = _a.color, color = _e === void 0 ? '#4fa94d' : _e, _f = _a.ariaLabel, ariaLabel = _f === void 0 ? 'ball-triangle-loading' : _f, wrapperClass = _a.wrapperClass, wrapperStyle = _a.wrapperStyle, _g = _a.visible, visible = _g === void 0 ? true : _g;
     return (react_1.default.createElement("div", { style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: wrapperClass, "data-testid": "ball-triangle-loading" },
@@ -25,0 +25,0 @@ react_1.default.createElement("svg", { height: height, width: width, stroke: color, viewBox: "0 0 57 57", xmlns: "http://www.w3.org/2000/svg", "data-testid": "ball-triangle-svg", "aria-label": ariaLabel },

dist/loader/Bars.js

@@ -22,3 +22,3 @@ "use strict";
 var Bars = function (_a) {
-    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.color, color = _d === void 0 ? 'blue' : _d, _e = _a.ariaLabel, ariaLabel = _e === void 0 ? 'bars-loading' : _e, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _f = _a.visible, visible = _f === void 0 ? true : _f;
+    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.color, color = _d === void 0 ? '#4fa94d' : _d, _e = _a.ariaLabel, ariaLabel = _e === void 0 ? 'bars-loading' : _e, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _f = _a.visible, visible = _f === void 0 ? true : _f;
     return (react_1.default.createElement("div", { style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: wrapperClass, "data-testid": "bars-loading" },
@@ -25,0 +25,0 @@ react_1.default.createElement("svg", { width: width, height: height, fill: color, viewBox: "0 0 135 140", xmlns: "http://www.w3.org/2000/svg", "data-testid": "bars-svg", "aria-label": ariaLabel },

dist/loader/Circles.js

@@ -22,3 +22,3 @@ "use strict";
 var Circles = function (_a) {
-    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.color, color = _d === void 0 ? 'green' : _d, _e = _a.ariaLabel, ariaLabel = _e === void 0 ? 'circles-loading' : _e, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _f = _a.visible, visible = _f === void 0 ? true : _f;
+    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.color, color = _d === void 0 ? '#4fa94d' : _d, _e = _a.ariaLabel, ariaLabel = _e === void 0 ? 'circles-loading' : _e, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _f = _a.visible, visible = _f === void 0 ? true : _f;
     return (react_1.default.createElement("div", { style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: wrapperClass, "data-testid": "circles-loading" },
@@ -25,0 +25,0 @@ react_1.default.createElement("svg", { width: width, height: height, viewBox: "0 0 135 135", xmlns: "http://www.w3.org/2000/svg", fill: color, "aria-label": ariaLabel, "data-testid": "circles-svg" },

dist/loader/CirclesWithBar.d.ts

@@ -13,4 +13,5 @@ import React from 'react';
     barColor?: string;
+    ariaLabel?: string;
 };
 declare const CirclesWithBar: React.FunctionComponent<Props>;
 export default CirclesWithBar;

dist/loader/CirclesWithBar.js

@@ -22,4 +22,4 @@ "use strict";
 var CirclesWithBar = function (_a) {
-    var _b = _a.wrapperStyle, wrapperStyle = _b === void 0 ? {} : _b, _c = _a.visible, visible = _c === void 0 ? true : _c, _d = _a.wrapperClass, wrapperClass = _d === void 0 ? '' : _d, _e = _a.height, height = _e === void 0 ? 100 : _e, _f = _a.width, width = _f === void 0 ? 100 : _f, _g = _a.color, color = _g === void 0 ? 'red' : _g, outerCircleColor = _a.outerCircleColor, innerCircleColor = _a.innerCircleColor, barColor = _a.barColor;
-    return (react_1.default.createElement("div", { style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: wrapperClass, "data-testid": "circles-with-bar-wrapper" },
+    var _b = _a.wrapperStyle, wrapperStyle = _b === void 0 ? {} : _b, _c = _a.visible, visible = _c === void 0 ? true : _c, _d = _a.wrapperClass, wrapperClass = _d === void 0 ? '' : _d, _e = _a.height, height = _e === void 0 ? 100 : _e, _f = _a.width, width = _f === void 0 ? 100 : _f, _g = _a.color, color = _g === void 0 ? '#4fa94d' : _g, outerCircleColor = _a.outerCircleColor, innerCircleColor = _a.innerCircleColor, barColor = _a.barColor, _h = _a.ariaLabel, ariaLabel = _h === void 0 ? 'circles-with-bar-loading' : _h;
+    return (react_1.default.createElement("div", { style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: wrapperClass, "aria-label": ariaLabel, "data-testid": "circles-with-bar-wrapper" },
         react_1.default.createElement("svg", { version: "1.1", id: "L1", xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", height: "".concat(height), width: "".concat(width), viewBox: "0 0 100 100", enableBackground: "new 0 0 100 100", xmlSpace: "preserve", "data-testid": "circles-with-bar-svg" },
@@ -26,0 +26,0 @@ react_1.default.createElement("circle", { fill: "none", stroke: "".concat(outerCircleColor || color), strokeWidth: "6", strokeMiterlimit: "15", strokeDasharray: "14.2472,14.2472", cx: "50", cy: "50", r: "47", "data-testid": "circles-with-bar-svg-outer-circle" },

dist/loader/Grid.js

@@ -23,3 +23,3 @@ "use strict";
 var Grid = function (_a) {
-    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.radius, radius = _d === void 0 ? 12.5 : _d, _e = _a.color, color = _e === void 0 ? 'green' : _e, _f = _a.ariaLabel, ariaLabel = _f === void 0 ? 'grid-loading' : _f, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _g = _a.visible, visible = _g === void 0 ? true : _g;
+    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.radius, radius = _d === void 0 ? 12.5 : _d, _e = _a.color, color = _e === void 0 ? '#4fa94d' : _e, _f = _a.ariaLabel, ariaLabel = _f === void 0 ? 'grid-loading' : _f, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _g = _a.visible, visible = _g === void 0 ? true : _g;
     return (react_1.default.createElement("div", { style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: wrapperClass, "data-testid": "grid-loading" },
@@ -26,0 +26,0 @@ react_1.default.createElement("svg", { width: width, height: height, viewBox: "0 0 105 105", fill: color, "aria-label": ariaLabel, "data-testid": "grid-svg" },

dist/loader/Hearts.js

@@ -22,3 +22,3 @@ "use strict";
 var Hearts = function (_a) {
-    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.color, color = _d === void 0 ? 'green' : _d, _e = _a.ariaLabel, ariaLabel = _e === void 0 ? 'hearts-loading' : _e, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _f = _a.visible, visible = _f === void 0 ? true : _f;
+    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.color, color = _d === void 0 ? '#4fa94d' : _d, _e = _a.ariaLabel, ariaLabel = _e === void 0 ? 'hearts-loading' : _e, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _f = _a.visible, visible = _f === void 0 ? true : _f;
     return (react_1.default.createElement("div", { style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: wrapperClass, "data-testid": "hearts-loading" },
@@ -25,0 +25,0 @@ react_1.default.createElement("svg", { width: width, height: height, viewBox: "0 0 140 64", xmlns: "http://www.w3.org/2000/svg", fill: color, "aria-label": ariaLabel, "data-testid": "hearts-svg" },

dist/loader/LineWave.js

@@ -22,3 +22,3 @@ "use strict";
 var LineWave = function (_a) {
-    var _b = _a.wrapperStyle, wrapperStyle = _b === void 0 ? {} : _b, _c = _a.visible, visible = _c === void 0 ? true : _c, _d = _a.wrapperClass, wrapperClass = _d === void 0 ? '' : _d, _e = _a.height, height = _e === void 0 ? 100 : _e, _f = _a.width, width = _f === void 0 ? 100 : _f, _g = _a.color, color = _g === void 0 ? 'red' : _g, _h = _a.ariaLabel, ariaLabel = _h === void 0 ? 'line-wave' : _h, firstLineColor = _a.firstLineColor, middleLineColor = _a.middleLineColor, lastLineColor = _a.lastLineColor;
+    var _b = _a.wrapperStyle, wrapperStyle = _b === void 0 ? {} : _b, _c = _a.visible, visible = _c === void 0 ? true : _c, _d = _a.wrapperClass, wrapperClass = _d === void 0 ? '' : _d, _e = _a.height, height = _e === void 0 ? 100 : _e, _f = _a.width, width = _f === void 0 ? 100 : _f, _g = _a.color, color = _g === void 0 ? '#4fa94d' : _g, _h = _a.ariaLabel, ariaLabel = _h === void 0 ? 'line-wave' : _h, firstLineColor = _a.firstLineColor, middleLineColor = _a.middleLineColor, lastLineColor = _a.lastLineColor;
     return (react_1.default.createElement("div", { style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: wrapperClass, "data-testid": "line-wave-wrapper" },
@@ -25,0 +25,0 @@ react_1.default.createElement("svg", { version: "1.1", height: "".concat(height), width: "".concat(width), xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", viewBox: "0 0 100 100", enableBackground: "new 0 0 0 0", xmlSpace: "preserve", "aria-label": ariaLabel, "data-testid": "line-wave-svg" },

dist/loader/MutatingDots.js

@@ -22,3 +22,3 @@ "use strict";
 var MutatingDots = function (_a) {
-    var _b = _a.height, height = _b === void 0 ? 90 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.radius, radius = _d === void 0 ? 12.5 : _d, _e = _a.color, color = _e === void 0 ? 'green' : _e, _f = _a.secondaryColor, secondaryColor = _f === void 0 ? 'blue' : _f, _g = _a.ariaLabel, ariaLabel = _g === void 0 ? 'mutating-dots-loading' : _g, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _h = _a.visible, visible = _h === void 0 ? true : _h;
+    var _b = _a.height, height = _b === void 0 ? 90 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.radius, radius = _d === void 0 ? 12.5 : _d, _e = _a.color, color = _e === void 0 ? '#4fa94d' : _e, _f = _a.secondaryColor, secondaryColor = _f === void 0 ? '#4fa94d' : _f, _g = _a.ariaLabel, ariaLabel = _g === void 0 ? 'mutating-dots-loading' : _g, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _h = _a.visible, visible = _h === void 0 ? true : _h;
     return (react_1.default.createElement("div", { style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: wrapperClass, "data-testid": "mutating-dots-loading" },
@@ -25,0 +25,0 @@ react_1.default.createElement("svg", { id: "goo-loader", width: width, height: height, "aria-label": ariaLabel, "data-testid": "mutating-dots-svg" },

dist/loader/Oval.js

@@ -32,3 +32,3 @@ "use strict";
 var Oval = function (_a) {
-    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.color, color = _d === void 0 ? 'green' : _d, _e = _a.secondaryColor, secondaryColor = _e === void 0 ? 'green' : _e, _f = _a.ariaLabel, ariaLabel = _f === void 0 ? 'oval-loading' : _f, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _g = _a.visible, visible = _g === void 0 ? true : _g, _h = _a.strokeWidth, strokeWidth = _h === void 0 ? 2 : _h, strokeWidthSecondary = _a.strokeWidthSecondary;
+    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.color, color = _d === void 0 ? '#4fa94d' : _d, _e = _a.secondaryColor, secondaryColor = _e === void 0 ? '#4fa94d' : _e, _f = _a.ariaLabel, ariaLabel = _f === void 0 ? 'oval-loading' : _f, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _g = _a.visible, visible = _g === void 0 ? true : _g, _h = _a.strokeWidth, strokeWidth = _h === void 0 ? 2 : _h, strokeWidthSecondary = _a.strokeWidthSecondary;
     return (react_1.default.createElement("div", { style: __assign(__assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), { padding: 3 }), className: wrapperClass, "data-testid": "oval-loading" },
@@ -35,0 +35,0 @@ react_1.default.createElement("svg", { width: width, height: height, viewBox: getViewBoxSize(Number(strokeWidth), Number(strokeWidthSecondary || strokeWidth), RADIUS), xmlns: "http://www.w3.org/2000/svg", stroke: color, "data-testid": "oval-svg", "aria-label": ariaLabel },

dist/loader/Puff.js

@@ -23,3 +23,3 @@ "use strict";
 var Puff = function (_a) {
-    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.radius, radius = _d === void 0 ? 1 : _d, _e = _a.color, color = _e === void 0 ? 'green' : _e, _f = _a.ariaLabel, ariaLabel = _f === void 0 ? 'puff-loading' : _f, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _g = _a.visible, visible = _g === void 0 ? true : _g;
+    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.radius, radius = _d === void 0 ? 1 : _d, _e = _a.color, color = _e === void 0 ? '#4fa94d' : _e, _f = _a.ariaLabel, ariaLabel = _f === void 0 ? 'puff-loading' : _f, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _g = _a.visible, visible = _g === void 0 ? true : _g;
     return (react_1.default.createElement("div", { style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: wrapperClass, "data-testid": "puff-loading" },
@@ -26,0 +26,0 @@ react_1.default.createElement("svg", { width: width, height: height, viewBox: "0 0 44 44", xmlns: "http://www.w3.org/2000/svg", stroke: color, "aria-label": ariaLabel, "data-testid": "puff-svg" },

dist/loader/RevolvingDot.js

@@ -22,3 +22,3 @@ "use strict";
 var RevolvingDot = function (_a) {
-    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.radius, radius = _d === void 0 ? 6 : _d, _e = _a.color, color = _e === void 0 ? 'green' : _e, _f = _a.ariaLabel, ariaLabel = _f === void 0 ? 'revolving-dot-loading' : _f, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _g = _a.visible, visible = _g === void 0 ? true : _g;
+    var _b = _a.height, height = _b === void 0 ? 100 : _b, _c = _a.width, width = _c === void 0 ? 100 : _c, _d = _a.radius, radius = _d === void 0 ? 6 : _d, _e = _a.color, color = _e === void 0 ? '#4fa94d' : _e, _f = _a.ariaLabel, ariaLabel = _f === void 0 ? 'revolving-dot-loading' : _f, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _g = _a.visible, visible = _g === void 0 ? true : _g;
     return (react_1.default.createElement("div", { style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: wrapperClass, "data-testid": "revolving-dot-loading" },
@@ -25,0 +25,0 @@ react_1.default.createElement("svg", { version: "1.1", width: width, height: height, xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", "aria-label": ariaLabel, "data-testid": "revolving-dot-svg" },

dist/loader/Rings.js

@@ -23,3 +23,3 @@ "use strict";
 var Rings = function (_a) {
-    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.radius, radius = _d === void 0 ? 6 : _d, _e = _a.color, color = _e === void 0 ? 'green' : _e, _f = _a.ariaLabel, ariaLabel = _f === void 0 ? 'rings-loading' : _f, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _g = _a.visible, visible = _g === void 0 ? true : _g;
+    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.radius, radius = _d === void 0 ? 6 : _d, _e = _a.color, color = _e === void 0 ? '#4fa94d' : _e, _f = _a.ariaLabel, ariaLabel = _f === void 0 ? 'rings-loading' : _f, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _g = _a.visible, visible = _g === void 0 ? true : _g;
     return (react_1.default.createElement("div", { style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: wrapperClass, "data-testid": "rings-loading" },
@@ -26,0 +26,0 @@ react_1.default.createElement("svg", { width: width, height: height, viewBox: "0 0 45 45", xmlns: "http://www.w3.org/2000/svg", stroke: color, "aria-label": ariaLabel, "data-testid": "rings-svg" },

dist/loader/RotatingSquare.d.ts

 import React from 'react';
 import { Style } from '../type';
 declare type RotatingSquareProps = {
-    style?: Style;
     wrapperClass?: '';
@@ -6,0 +5,0 @@ color?: string;

dist/loader/RotatingSquare.js

@@ -22,3 +22,3 @@ "use strict";
 var RotatingSquare = function (_a) {
-    var _b = _a.style, style = _b === void 0 ? {} : _b, _c = _a.wrapperClass, wrapperClass = _c === void 0 ? '' : _c, _d = _a.color, color = _d === void 0 ? 'red' : _d, number = _a.strokeWidth, _e = _a.height, height = _e === void 0 ? 100 : _e, _f = _a.width, width = _f === void 0 ? 100 : _f, _g = _a.strokeWidth, strokeWidth = _g === void 0 ? 4 : _g, _h = _a.ariaLabel, ariaLabel = _h === void 0 ? 'rotating-square-loading' : _h, _j = _a.wrapperStyle, wrapperStyle = _j === void 0 ? {} : _j, _k = _a.visible, visible = _k === void 0 ? true : _k;
+    var _b = _a.wrapperClass, wrapperClass = _b === void 0 ? '' : _b, _c = _a.color, color = _c === void 0 ? '#4fa94d' : _c, _d = _a.height, height = _d === void 0 ? 100 : _d, _e = _a.width, width = _e === void 0 ? 100 : _e, _f = _a.strokeWidth, strokeWidth = _f === void 0 ? 4 : _f, _g = _a.ariaLabel, ariaLabel = _g === void 0 ? 'rotating-square-loading' : _g, _h = _a.wrapperStyle, wrapperStyle = _h === void 0 ? {} : _h, _j = _a.visible, visible = _j === void 0 ? true : _j;
     return (react_1.default.createElement("div", { style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: wrapperClass, "data-testid": "rotating-square-wrapper" },
@@ -25,0 +25,0 @@ react_1.default.createElement("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", viewBox: "0 0 100 100", enableBackground: "new 0 0 100 100", height: "".concat(height), width: "".concat(width), "aria-label": ariaLabel, "data-testid": "rotating-square-svg", xmlSpace: "preserve" },

dist/loader/TailSpin.js

@@ -23,3 +23,3 @@ "use strict";
 var TailSpin = function (_a) {
-    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.radius, radius = _d === void 0 ? 1 : _d, _e = _a.color, color = _e === void 0 ? 'green' : _e, _f = _a.ariaLabel, ariaLabel = _f === void 0 ? 'tail-spin-loading' : _f, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _g = _a.visible, visible = _g === void 0 ? true : _g;
+    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.radius, radius = _d === void 0 ? 1 : _d, _e = _a.color, color = _e === void 0 ? '#4fa94d' : _e, _f = _a.ariaLabel, ariaLabel = _f === void 0 ? 'tail-spin-loading' : _f, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _g = _a.visible, visible = _g === void 0 ? true : _g;
     return (react_1.default.createElement("div", { style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: wrapperClass, "data-testid": "tail-spin-loading" },
@@ -26,0 +26,0 @@ react_1.default.createElement("svg", { width: width, height: height, viewBox: "0 0 38 38", xmlns: "http://www.w3.org/2000/svg", "aria-label": ariaLabel, "data-testid": "tail-spin-svg" },

dist/loader/ThreeCircles.js

@@ -22,3 +22,3 @@ "use strict";
 var ThreeCircles = function (_a) {
-    var _b = _a.wrapperStyle, wrapperStyle = _b === void 0 ? {} : _b, _c = _a.visible, visible = _c === void 0 ? true : _c, _d = _a.wrapperClass, wrapperClass = _d === void 0 ? '' : _d, _e = _a.height, height = _e === void 0 ? 100 : _e, _f = _a.width, width = _f === void 0 ? 100 : _f, _g = _a.color, color = _g === void 0 ? 'red' : _g, _h = _a.ariaLabel, ariaLabel = _h === void 0 ? 'rotating-three-circles' : _h, outerCircleColor = _a.outerCircleColor, innerCircleColor = _a.innerCircleColor, middleCircleColor = _a.middleCircleColor;
+    var _b = _a.wrapperStyle, wrapperStyle = _b === void 0 ? {} : _b, _c = _a.visible, visible = _c === void 0 ? true : _c, _d = _a.wrapperClass, wrapperClass = _d === void 0 ? '' : _d, _e = _a.height, height = _e === void 0 ? 100 : _e, _f = _a.width, width = _f === void 0 ? 100 : _f, _g = _a.color, color = _g === void 0 ? '#4fa94d' : _g, _h = _a.ariaLabel, ariaLabel = _h === void 0 ? 'rotating-three-circles' : _h, outerCircleColor = _a.outerCircleColor, innerCircleColor = _a.innerCircleColor, middleCircleColor = _a.middleCircleColor;
     return (react_1.default.createElement("div", { style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: wrapperClass, "data-testid": "three-circles-wrapper" },
@@ -25,0 +25,0 @@ react_1.default.createElement("svg", { version: "1.1", height: "".concat(height), width: "".concat(width), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 100", enableBackground: "new 0 0 100 100", xmlSpace: "preserve", "data-testid": "three-circles-svg", "aria-label": ariaLabel },

dist/loader/ThreeDots.js

@@ -22,3 +22,3 @@ "use strict";
 var ThreeDots = function (_a) {
-    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.radius, radius = _d === void 0 ? 9 : _d, _e = _a.color, color = _e === void 0 ? 'green' : _e, _f = _a.ariaLabel, ariaLabel = _f === void 0 ? 'three-dots-loading' : _f, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _g = _a.visible, visible = _g === void 0 ? true : _g;
+    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.radius, radius = _d === void 0 ? 9 : _d, _e = _a.color, color = _e === void 0 ? '4fa94d' : _e, _f = _a.ariaLabel, ariaLabel = _f === void 0 ? 'three-dots-loading' : _f, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _g = _a.visible, visible = _g === void 0 ? true : _g;
     return (react_1.default.createElement("div", { style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: wrapperClass, "data-testid": "three-dots-loading" },
@@ -25,0 +25,0 @@ react_1.default.createElement("svg", { width: width, height: height, viewBox: "0 0 120 30", xmlns: "http://www.w3.org/2000/svg", fill: color, "aria-label": ariaLabel, "data-testid": "three-dots-svg" },

dist/loader/Triangle.d.ts

 import { FunctionComponent } from 'react';
 import { BaseProps } from '../type';
-interface TriangleProps extends BaseProps {
-}
+declare type TriangleProps = BaseProps;
 declare const Triangle: FunctionComponent<TriangleProps>;
 export default Triangle;

dist/loader/Triangle.js

 "use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 var __assign = (this && this.__assign) || function () {
@@ -13,2 +17,21 @@ __assign = Object.assign || function(t) {
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -19,11 +42,16 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var dash = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n to {\n    stroke-dashoffset: 136;\n  }\n"], ["\n to {\n    stroke-dashoffset: 136;\n  }\n"])));
+var Polygon = styled_components_1.default.polygon(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  stroke-dasharray: 17;\n  animation: ", " 2.5s cubic-bezier(0.35, 0.04, 0.63, 0.95) infinite;\n"], ["\n  stroke-dasharray: 17;\n  animation: ", " 2.5s cubic-bezier(0.35, 0.04, 0.63, 0.95) infinite;\n"])), dash);
+var SVG = styled_components_1.default.svg(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  transform-origin: 50% 65%;\n"], ["\n  transform-origin: 50% 65%;\n"])));
 var getDefaultStyle = function (visible) { return ({
-    display: visible ? 'flex' : 'none'
+    display: visible ? 'flex' : 'none',
 }); };
 var Triangle = function (_a) {
     var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.color, color = _d === void 0 ? 'green' : _d, _e = _a.ariaLabel, ariaLabel = _e === void 0 ? 'triangle-loading' : _e, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _f = _a.visible, visible = _f === void 0 ? true : _f;
-    return (react_1.default.createElement("div", { role: "presentation", style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: "react-spinner-loader-svg ".concat(wrapperClass), "data-testid": "triangle-loading" },
-        react_1.default.createElement("svg", { id: "triangle", width: width, height: height, viewBox: "-3 -4 39 39", "aria-label": ariaLabel, "data-testid": "triangle-svg" },
-            react_1.default.createElement("polygon", { fill: "transparent", stroke: color, strokeWidth: "1", points: "16,0 32,32 0,32" }))));
+    return (react_1.default.createElement("div", { role: "presentation", style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: "".concat(wrapperClass), "data-testid": "triangle-loading" },
+        react_1.default.createElement(SVG, { id: "triangle", width: width, height: height, viewBox: "-3 -4 39 39", "aria-label": ariaLabel, "data-testid": "triangle-svg" },
+            react_1.default.createElement(Polygon, { fill: "transparent", stroke: color, strokeWidth: "1", points: "16,0 32,32 0,32" }))));
 };
 exports.default = Triangle;
+var templateObject_1, templateObject_2, templateObject_3;

dist/loader/Watch.js

@@ -22,3 +22,3 @@ "use strict";
 var Watch = function (_a) {
-    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.radius, radius = _d === void 0 ? 48 : _d, _e = _a.color, color = _e === void 0 ? 'green' : _e, _f = _a.ariaLabel, ariaLabel = _f === void 0 ? 'watch-loading' : _f, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _g = _a.visible, visible = _g === void 0 ? true : _g;
+    var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.radius, radius = _d === void 0 ? 48 : _d, _e = _a.color, color = _e === void 0 ? '#4fa94d' : _e, _f = _a.ariaLabel, ariaLabel = _f === void 0 ? 'watch-loading' : _f, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _g = _a.visible, visible = _g === void 0 ? true : _g;
     return (react_1.default.createElement("div", { style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: wrapperClass, "data-testid": "watch-loading" },
@@ -25,0 +25,0 @@ react_1.default.createElement("svg", { width: width, height: height, version: "1.1", id: "L2", xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", viewBox: "0 0 100 100", enableBackground: "new 0 0 100 100", xmlSpace: "preserve", "aria-label": ariaLabel, "data-testid": "watch-svg" },

package.json

 {
   "name": "react-loader-spinner",
-  "version": "5.1.5",
+  "version": "5.1.6-0",
   "description": " react-spinner-loader provides simple React.js spinner component which can be implemented for async wait operation before data load to the view.",
@@ -13,7 +13,3 @@ "unpkg": "dist/index.js",
       "import": "./dist/esm/index.js"
-    },
-    "./dist/loader/css/react-spinner-loader.css": "./dist/loader/css/react-spinner-loader.css",
-    "./dist/loader/css/cradleLoader.css": "./dist/loader/css/cradleLoader.css",
-    "./dist/loader/css/plane.css": "./dist/loader/css/plane.css",
-    "./dist/loader/css/triangle.css": "./dist/loader/css/triangle.css"
+    }
   },
@@ -45,8 +41,3 @@ "types": "dist/index.d.ts",
     "copy-files": "copyfiles -u 1 src/**/*.css dist/",
-    "test": "jest --no-cache",
-    "dev": "yarn clean:doc && docz dev",
-    "clean:doc": "rimraf .docz/",
-    "build:doc": "docz build",
-    "build:serve:doc": "docz build && docz serve",
-    "deploy:doc": "yarn build:doc && gh-pages -d ./.docz/dist/"
+    "test": "jest --no-cache"
   },
@@ -57,4 +48,5 @@ "devDependencies": {
     "@types/jest": "^27.0.3",
-    "@types/react": "^17.0.38",
+    "@types/react": "^17.0.47",
     "@types/react-dom": "^17.0.11",
+    "@types/styled-components": "^5.1.25",
     "@types/testing-library__jest-dom": "^5.14.2",
@@ -65,3 +57,2 @@ "@types/testing-library__react": "^10.2.0",
     "copyfiles": "^2.4.1",
-    "docz": "^2.3.1",
     "eslint": "^7.32.0",
@@ -73,4 +64,2 @@ "eslint-config-standard": "^16.0.3",
     "eslint-plugin-react": "^7.28.0",
-    "gh-pages": "^3.2.3",
-    "identity-obj-proxy": "^3.0.0",
     "jest": "^27.4.5",
@@ -86,3 +75,6 @@ "react": "16.8.0",
     "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+  },
+  "dependencies": {
+    "styled-components": "^5.3.5"
   }
 }

README.md

@@ -48,6 +48,9 @@ ![Node.js Package](https://github.com/mhnpd/react-loader-spinner/workflows/Node.js%20Package/badge.svg?branch=master)
 <Audio
-    height="100"
-    width="100"
-    color='grey'
-    ariaLabel='loading'
+    height = "80"
+    width = "80"
+    radius = "9"
+    color = 'green'
+    ariaLabel = 'three-dots-loading'     
+    wrapperStyle
+    wrapperClass
   />
@@ -54,0 +57,0 @@ ```

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

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

Dev dependency count

23

decreased by-8%

Number of lines in readme file

90

increased by3.45%

Number of low supply chain risk alerts

1

decreased by-66.67%

Worsened metrics

Total package byte prevSize

149107

decreased by-5.81%

Dependency count

3

increased by50%

Number of package files

93

decreased by-7.92%

Lines of code

1880

decreased by-13.12%

Number of medium maintenance alerts

1

increased byInfinity%

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• + Addedstyled-components@^5.3.5

• + Added@ampproject/remapping@2.3.0(transitive)

• + Added@babel/code-frame@7.25.9(transitive)

• + Added@babel/compat-data@7.25.9(transitive)

• + Added@babel/core@7.25.9(transitive)

• + Added@babel/generator@7.25.9(transitive)

• + Added@babel/helper-annotate-as-pure@7.25.9(transitive)

• + Added@babel/helper-compilation-targets@7.25.9(transitive)

• + Added@babel/helper-module-imports@7.25.9(transitive)

• + Added@babel/helper-module-transforms@7.25.9(transitive)

• + Added@babel/helper-plugin-utils@7.25.9(transitive)

• + Added@babel/helper-simple-access@7.25.9(transitive)

• + Added@babel/helper-string-parser@7.25.9(transitive)

• + Added@babel/helper-validator-identifier@7.25.9(transitive)

• + Added@babel/helper-validator-option@7.25.9(transitive)

• + Added@babel/helpers@7.25.9(transitive)

• + Added@babel/highlight@7.25.9(transitive)

• + Added@babel/parser@7.25.9(transitive)

• + Added@babel/plugin-syntax-jsx@7.25.9(transitive)

• + Added@babel/template@7.25.9(transitive)

• + Added@babel/traverse@7.25.9(transitive)

• + Added@babel/types@7.25.9(transitive)

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

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

• + Added@emotion/stylis@0.8.5(transitive)

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

• + Added@jridgewell/gen-mapping@0.3.5(transitive)

• + Added@jridgewell/resolve-uri@3.1.2(transitive)

• + Added@jridgewell/set-array@1.2.1(transitive)

• + Added@jridgewell/sourcemap-codec@1.5.0(transitive)

• + Added@jridgewell/trace-mapping@0.3.25(transitive)

• + Addedansi-styles@3.2.1(transitive)

• + Addedbabel-plugin-styled-components@2.1.4(transitive)

• + Addedbrowserslist@4.24.2(transitive)

• + Addedcamelize@1.0.1(transitive)

• + Addedcaniuse-lite@1.0.30001669(transitive)

• + Addedchalk@2.4.2(transitive)

• + Addedcolor-convert@1.9.3(transitive)

• + Addedcolor-name@1.1.3(transitive)

• + Addedconvert-source-map@2.0.0(transitive)

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

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

• + Addeddebug@4.3.7(transitive)

• + Addedelectron-to-chromium@1.5.43(transitive)

• + Addedescalade@3.2.0(transitive)

• + Addedescape-string-regexp@1.0.5(transitive)

• + Addedgensync@1.0.0-beta.2(transitive)

• + Addedglobals@11.12.0(transitive)

• + Addedhas-flag@3.0.0(transitive)

• + Addedhoist-non-react-statics@3.3.2(transitive)

• + Addedjsesc@3.0.2(transitive)

• + Addedjson5@2.2.3(transitive)

• + Addedlodash@4.17.21(transitive)

• + Addedlru-cache@5.1.1(transitive)

• + Addedms@2.1.3(transitive)

• + Addednode-releases@2.0.18(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedpicomatch@2.3.1(transitive)

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

• + Addedreact-is@16.13.118.3.1(transitive)

• + Addedsemver@6.3.1(transitive)

• + Addedshallowequal@1.1.0(transitive)

• + Addedstyled-components@5.3.11(transitive)

• + Addedsupports-color@5.5.0(transitive)

• + Addedupdate-browserslist-db@1.1.1(transitive)

• + Addedyallist@3.1.1(transitive)