svg-loaders-react 2.1.0 → 3.0.1

package/.eslintrc.js

@@ -55,5 +55,9 @@ module.exports = {
 
     // Switching off default exports
     'import/prefer-default-export': 'off',
+
+    // Switching off prop-types, which is disabled in React 18 and removed in React 19
+    // See https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-proptypes-and-defaultprops
+    "react/prop-types": "off"
   },
 };

package/.github/workflows/publish.yml

@@ -0,0 +1,21 @@
+name: Publish Package to npmjs
+on:
+  release:
+    types: [published]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm ci
+      - run: npm publish --provenance --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.nvmrc

@@ -1 +1 @@
-v10.15.0
+v20

package/.travis.yml

@@ -10,6 +10,7 @@ script:
 - npm run build
 deploy:
   provider: npm
+  edge: true
   email: ajwann@ajwann.com
   api_key:
     secure: YkxXF6wD7aSq0jR9kxORYNd01dakfOGyCJnXYiZZSAZQCByKIULw3clXaUo6dIWVyOy/uMU4/sAFmov2HIzrJ4yin2AeoLUKhSPaxKa7C/7/rar1m5jgw4B5vskrCdfsdoyalbnZquWjh+hdA8YV6YMyPyrS19coXdFRFiabIPyAzljiuv+Iquips7HJQuA12FbTsrVyLYloOkUvBLMUv+0JtJxDBJPFRq9RYwt+9jrdh2YADjf2gcpUHyaw7p8gIkNRAsNyWtFi6uPJ5fOP4XWGDoKh7IUMxdP+siN3jsqYR2nPkfFpaO1S4X/4r9R3VpHln4G79B5R/l1k47ZiroHuLQMoC9azUHc+qoLnbBYcCJl9te6JItrfDB4JXqOyNuF3AF6NLhXNeywbuoxcc+ypXGOVkSgTXWbtfsVzuvAN+b5a0Hj6Fkzu5hyYkJ8a4gL/4WxsPK7GoCwzw9CbdXvQR9K3kQpeRFv1vRrdGhKjLbbU+DDZUhojxGIP8CYAJESA/fpKJ7+PiQUQj/tIfu+Hx1mAn5iZIFwKDYuEpMLPGOxIdxj4Nilb8fujCJOSrVqzpo75gpah5yjtE/1T9aRvJN8LuulbaZmJcyxtMoqGwl6KrDGhnXWzsFabZkSQypxuM1+zfJBXyyU0TAh7mx+NpF6EaWz5dXNKgjwbVYs=

package/README.md

@@ -64,14 +64,14 @@ Each of these components should be able to accept any [SVG tag presentation attr
 
 # Common Usage
 ```Javascript
-// render the Puff loader with a fill opacity of .125
-<Puff fill-opacity=".125" />
+// render the Puff loader with a stroke opacity of .125
+<Puff strokeOpacity=".125" />
 
-// render the Puff loader with a fill of mint green
-<Puff fill="#98ff98" />
+// render the Puff loader with a stroke of mint green
+<Puff stroke="#98ff98" />
 
-// render the Puff loader with a fill of mint green and a fill opactiy of .125
-<Puff fill="#98ff98" fill-opacity=".125" />
+// render the Puff loader with a stroke of mint green and a stroke opactiy of .125
+<Puff stroke="#98ff98" strokeOpacity=".125"/>
 ```
 
 

package/dist/index.js

@@ -1 +1 @@
-module.exports=function(e){var t={};function a(r){if(t[r])return t[r].exports;var n=t[r]={i:r,l:!1,exports:{}};return e[r].call(n.exports,n,n.exports,a),n.l=!0,n.exports}return a.m=e,a.c=t,a.d=function(e,t,r){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(a.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)a.d(r,n,function(t){return e[t]}.bind(null,n));return r},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="",a(a.s=1)}([function(e,t){e.exports=require("react")},function(e,t,a){"use strict";a.r(t);var r=a(0),n=a.n(r);function i(){return(i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(this,arguments)}var c=function(e){return n.a.createElement("svg",i({width:55,height:80,fill:"#FFF"},e),n.a.createElement("g",{transform:"matrix(1 0 0 -1 0 80)"},n.a.createElement("rect",{width:10,height:20,rx:3},n.a.createElement("animate",{attributeName:"height",begin:"0s",dur:"4.3s",values:"20;45;57;80;64;32;66;45;64;23;66;13;64;56;34;34;2;23;76;79;20",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("rect",{x:15,width:10,height:80,rx:3},n.a.createElement("animate",{attributeName:"height",begin:"0s",dur:"2s",values:"80;55;33;5;75;23;73;33;12;14;60;80",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("rect",{x:30,width:10,height:50,rx:3},n.a.createElement("animate",{attributeName:"height",begin:"0s",dur:"1.4s",values:"50;34;78;23;56;23;34;76;80;54;21;50",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("rect",{x:45,width:10,height:30,rx:3},n.a.createElement("animate",{attributeName:"height",begin:"0s",dur:"2s",values:"30;45;13;80;56;72;45;76;34;23;67;30",calcMode:"linear",repeatCount:"indefinite"}))))};function l(){return(l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(this,arguments)}var o=function(e){return n.a.createElement("svg",l({width:57,height:57,stroke:"#fff"},e),n.a.createElement("g",{transform:"translate(1 1)",strokeWidth:2,fill:"none",fillRule:"evenodd"},n.a.createElement("circle",{cx:5,cy:50,r:5},n.a.createElement("animate",{attributeName:"cy",begin:"0s",dur:"2.2s",values:"50;5;50;50",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"cx",begin:"0s",dur:"2.2s",values:"5;27;49;5",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:27,cy:5,r:5},n.a.createElement("animate",{attributeName:"cy",begin:"0s",dur:"2.2s",from:5,to:5,values:"5;50;50;5",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"cx",begin:"0s",dur:"2.2s",from:27,to:27,values:"27;49;5;27",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:49,cy:50,r:5},n.a.createElement("animate",{attributeName:"cy",begin:"0s",dur:"2.2s",values:"50;50;5;50",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"cx",from:49,to:49,begin:"0s",dur:"2.2s",values:"49;5;27;49",calcMode:"linear",repeatCount:"indefinite"}))))};function u(){return(u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(this,arguments)}var s=function(e){return n.a.createElement("svg",u({width:135,height:140,fill:"#fff"},e),n.a.createElement("rect",{y:10,width:15,height:120,rx:6},n.a.createElement("animate",{attributeName:"height",begin:"0.5s",dur:"1s",values:"120;110;100;90;80;70;60;50;40;140;120",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"y",begin:"0.5s",dur:"1s",values:"10;15;20;25;30;35;40;45;50;0;10",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("rect",{x:30,y:10,width:15,height:120,rx:6},n.a.createElement("animate",{attributeName:"height",begin:"0.25s",dur:"1s",values:"120;110;100;90;80;70;60;50;40;140;120",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"y",begin:"0.25s",dur:"1s",values:"10;15;20;25;30;35;40;45;50;0;10",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("rect",{x:60,width:15,height:140,rx:6},n.a.createElement("animate",{attributeName:"height",begin:"0s",dur:"1s",values:"120;110;100;90;80;70;60;50;40;140;120",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"y",begin:"0s",dur:"1s",values:"10;15;20;25;30;35;40;45;50;0;10",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("rect",{x:90,y:10,width:15,height:120,rx:6},n.a.createElement("animate",{attributeName:"height",begin:"0.25s",dur:"1s",values:"120;110;100;90;80;70;60;50;40;140;120",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"y",begin:"0.25s",dur:"1s",values:"10;15;20;25;30;35;40;45;50;0;10",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("rect",{x:120,y:10,width:15,height:120,rx:6},n.a.createElement("animate",{attributeName:"height",begin:"0.5s",dur:"1s",values:"120;110;100;90;80;70;60;50;40;140;120",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"y",begin:"0.5s",dur:"1s",values:"10;15;20;25;30;35;40;45;50;0;10",calcMode:"linear",repeatCount:"indefinite"})))};function m(){return(m=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(this,arguments)}var f=function(e){return n.a.createElement("svg",m({width:135,height:135,fill:"#fff"},e),n.a.createElement("path",{d:"M67.447 58c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10zm9.448 9.447c0 5.523 4.477 10 10 10 5.522 0 10-4.477 10-10s-4.478-10-10-10c-5.523 0-10 4.477-10 10zm-9.448 9.448c-5.523 0-10 4.477-10 10 0 5.522 4.477 10 10 10s10-4.478 10-10c0-5.523-4.477-10-10-10zM58 67.447c0-5.523-4.477-10-10-10s-10 4.477-10 10 4.477 10 10 10 10-4.477 10-10z"},n.a.createElement("animateTransform",{attributeName:"transform",type:"rotate",from:"0 67 67",to:"-360 67 67",dur:"2.5s",repeatCount:"indefinite"})),n.a.createElement("path",{d:"M28.19 40.31c6.627 0 12-5.374 12-12 0-6.628-5.373-12-12-12-6.628 0-12 5.372-12 12 0 6.626 5.372 12 12 12zm30.72-19.825c4.686 4.687 12.284 4.687 16.97 0 4.686-4.686 4.686-12.284 0-16.97-4.686-4.687-12.284-4.687-16.97 0-4.687 4.686-4.687 12.284 0 16.97zm35.74 7.705c0 6.627 5.37 12 12 12 6.626 0 12-5.373 12-12 0-6.628-5.374-12-12-12-6.63 0-12 5.372-12 12zm19.822 30.72c-4.686 4.686-4.686 12.284 0 16.97 4.687 4.686 12.285 4.686 16.97 0 4.687-4.686 4.687-12.284 0-16.97-4.685-4.687-12.283-4.687-16.97 0zm-7.704 35.74c-6.627 0-12 5.37-12 12 0 6.626 5.373 12 12 12s12-5.374 12-12c0-6.63-5.373-12-12-12zm-30.72 19.822c-4.686-4.686-12.284-4.686-16.97 0-4.686 4.687-4.686 12.285 0 16.97 4.686 4.687 12.284 4.687 16.97 0 4.687-4.685 4.687-12.283 0-16.97zm-35.74-7.704c0-6.627-5.372-12-12-12-6.626 0-12 5.373-12 12s5.374 12 12 12c6.628 0 12-5.373 12-12zm-19.823-30.72c4.687-4.686 4.687-12.284 0-16.97-4.686-4.686-12.284-4.686-16.97 0-4.687 4.686-4.687 12.284 0 16.97 4.686 4.687 12.284 4.687 16.97 0z"},n.a.createElement("animateTransform",{attributeName:"transform",type:"rotate",from:"0 67 67",to:"360 67 67",dur:"8s",repeatCount:"indefinite"})))};function d(){return(d=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(this,arguments)}var p=function(e){return n.a.createElement("svg",d({width:105,height:105,fill:"#fff"},e),n.a.createElement("circle",{cx:12.5,cy:12.5,r:12.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:12.5,cy:52.5,r:12.5,fillOpacity:.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"100ms",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:52.5,cy:12.5,r:12.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"300ms",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:52.5,cy:52.5,r:12.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"600ms",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:92.5,cy:12.5,r:12.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"800ms",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:92.5,cy:52.5,r:12.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"400ms",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:12.5,cy:92.5,r:12.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"700ms",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:52.5,cy:92.5,r:12.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"500ms",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:92.5,cy:92.5,r:12.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"200ms",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})))};function b(){return(b=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(this,arguments)}var y=function(e){return n.a.createElement("svg",b({width:140,height:64,fill:"#fff"},e),n.a.createElement("path",{d:"M30.262 57.02L7.195 40.723c-5.84-3.976-7.56-12.06-3.842-18.063 3.715-6 11.467-7.65 17.306-3.68l4.52 3.76 2.6-5.274c3.717-6.002 11.47-7.65 17.305-3.68 5.84 3.97 7.56 12.054 3.842 18.062L34.49 56.118c-.897 1.512-2.793 1.915-4.228.9z",fillOpacity:.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.4s",values:"0.5;1;0.5",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("path",{d:"M105.512 56.12l-14.44-24.272c-3.716-6.008-1.996-14.093 3.843-18.062 5.835-3.97 13.588-2.322 17.306 3.68l2.6 5.274 4.52-3.76c5.84-3.97 13.592-2.32 17.307 3.68 3.718 6.003 1.998 14.088-3.842 18.064L109.74 57.02c-1.434 1.014-3.33.61-4.228-.9z",fillOpacity:.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0.7s",dur:"1.4s",values:"0.5;1;0.5",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("path",{d:"M67.408 57.834l-23.01-24.98c-5.864-6.15-5.864-16.108 0-22.248 5.86-6.14 15.37-6.14 21.234 0L70 16.168l4.368-5.562c5.863-6.14 15.375-6.14 21.235 0 5.863 6.14 5.863 16.098 0 22.247l-23.007 24.98c-1.43 1.556-3.757 1.556-5.188 0z"}))};function g(){return(g=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(this,arguments)}var h=function(e){return n.a.createElement("svg",g({width:38,height:38,stroke:"#fff"},e),n.a.createElement("g",{transform:"translate(1 1)",strokeWidth:2,fill:"none",fillRule:"evenodd"},n.a.createElement("circle",{strokeOpacity:.5,cx:18,cy:18,r:18}),n.a.createElement("path",{d:"M36 18c0-9.94-8.06-18-18-18"},n.a.createElement("animateTransform",{attributeName:"transform",type:"rotate",from:"0 18 18",to:"360 18 18",dur:"1s",repeatCount:"indefinite"}))))};function v(){return(v=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(this,arguments)}var E=function(e){return n.a.createElement("svg",v({width:44,height:44,stroke:"#fff"},e),n.a.createElement("g",{fill:"none",fillRule:"evenodd",strokeWidth:2},n.a.createElement("circle",{cx:22,cy:22,r:1},n.a.createElement("animate",{attributeName:"r",begin:"0s",dur:"1.8s",values:"1; 20",calcMode:"spline",keyTimes:"0; 1",keySplines:"0.165, 0.84, 0.44, 1",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"stroke-opacity",begin:"0s",dur:"1.8s",values:"1; 0",calcMode:"spline",keyTimes:"0; 1",keySplines:"0.3, 0.61, 0.355, 1",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:22,cy:22,r:1},n.a.createElement("animate",{attributeName:"r",begin:"-0.9s",dur:"1.8s",values:"1; 20",calcMode:"spline",keyTimes:"0; 1",keySplines:"0.165, 0.84, 0.44, 1",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"stroke-opacity",begin:"-0.9s",dur:"1.8s",values:"1; 0",calcMode:"spline",keyTimes:"0; 1",keySplines:"0.3, 0.61, 0.355, 1",repeatCount:"indefinite"}))))};function M(){return(M=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(this,arguments)}var C=function(e){return n.a.createElement("svg",M({width:45,height:45,stroke:"#fff"},e),n.a.createElement("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:2},n.a.createElement("circle",{cx:22,cy:22,r:6,strokeOpacity:0},n.a.createElement("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:22,cy:22,r:6,strokeOpacity:0},n.a.createElement("animate",{attributeName:"r",begin:"3s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"stroke-opacity",begin:"3s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"stroke-width",begin:"3s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:22,cy:22,r:8},n.a.createElement("animate",{attributeName:"r",begin:"0s",dur:"1.5s",values:"6;1;2;3;4;5;6",calcMode:"linear",repeatCount:"indefinite"}))))};function x(){return(x=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(this,arguments)}var N=function(e){return n.a.createElement("svg",x({width:58,height:58},e),n.a.createElement("g",{transform:"translate(2 1)",stroke:"#FFF",strokeWidth:1.5,fill:"#fff",fillRule:"evenodd"},n.a.createElement("circle",{cx:42.601,cy:11.462,r:5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.3s",values:"1;0;0;0;0;0;0;0",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:49.063,cy:27.063,r:5,fillOpacity:0},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.3s",values:"0;1;0;0;0;0;0;0",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:42.601,cy:42.663,r:5,fillOpacity:0},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.3s",values:"0;0;1;0;0;0;0;0",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:27,cy:49.125,r:5,fillOpacity:0},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.3s",values:"0;0;0;1;0;0;0;0",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:11.399,cy:42.663,r:5,fillOpacity:0},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.3s",values:"0;0;0;0;1;0;0;0",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:4.938,cy:27.063,r:5,fillOpacity:0},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.3s",values:"0;0;0;0;0;1;0;0",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:11.399,cy:11.462,r:5,fillOpacity:0},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.3s",values:"0;0;0;0;0;0;1;0",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:27,cy:5,r:5,fillOpacity:0},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.3s",values:"0;0;0;0;0;0;0;1",calcMode:"linear",repeatCount:"indefinite"}))))};function O(){return(O=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(this,arguments)}var w=function(e){return n.a.createElement("svg",O({width:38,height:38},e),n.a.createElement("defs",null,n.a.createElement("linearGradient",{x1:"8.042%",y1:"0%",x2:"65.682%",y2:"23.865%",id:"prefix__a"},n.a.createElement("stop",{stopColor:"#fff",stopOpacity:0,offset:"0%"}),n.a.createElement("stop",{stopColor:"#fff",stopOpacity:.631,offset:"63.146%"}),n.a.createElement("stop",{stopColor:"#fff",offset:"100%"}))),n.a.createElement("g",{transform:"translate(1 1)",fill:"none",fillRule:"evenodd"},n.a.createElement("path",{d:"M36 18c0-9.94-8.06-18-18-18",stroke:"url(#prefix__a)",strokeWidth:2},n.a.createElement("animateTransform",{attributeName:"transform",type:"rotate",from:"0 18 18",to:"360 18 18",dur:"0.9s",repeatCount:"indefinite"})),n.a.createElement("circle",{fill:"#fff",cx:36,cy:18,r:1},n.a.createElement("animateTransform",{attributeName:"transform",type:"rotate",from:"0 18 18",to:"360 18 18",dur:"0.9s",repeatCount:"indefinite"}))))};function j(){return(j=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(this,arguments)}var k=function(e){return n.a.createElement("svg",j({width:120,height:30,fill:"#fff"},e),n.a.createElement("circle",{cx:15,cy:15,r:15},n.a.createElement("animate",{attributeName:"r",from:15,to:15,begin:"0s",dur:"0.8s",values:"15;9;15",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"fill-opacity",from:1,to:1,begin:"0s",dur:"0.8s",values:"1;.5;1",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:60,cy:15,r:9,fillOpacity:.3},n.a.createElement("animate",{attributeName:"r",from:9,to:9,begin:"0s",dur:"0.8s",values:"9;15;9",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"fill-opacity",from:.5,to:.5,begin:"0s",dur:"0.8s",values:".5;1;.5",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:105,cy:15,r:15},n.a.createElement("animate",{attributeName:"r",from:15,to:15,begin:"0s",dur:"0.8s",values:"15;9;15",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"fill-opacity",from:1,to:1,begin:"0s",dur:"0.8s",values:"1;.5;1",calcMode:"linear",repeatCount:"indefinite"})))};a.d(t,"Audio",function(){return c}),a.d(t,"BallTriangle",function(){return o}),a.d(t,"Bars",function(){return s}),a.d(t,"Circles",function(){return f}),a.d(t,"Grid",function(){return p}),a.d(t,"Hearts",function(){return y}),a.d(t,"Oval",function(){return h}),a.d(t,"Puff",function(){return E}),a.d(t,"Rings",function(){return C}),a.d(t,"SpinningCircles",function(){return N}),a.d(t,"TailSpin",function(){return w}),a.d(t,"ThreeDots",function(){return k})}]);
+module.exports=function(e){var t={};function a(r){if(t[r])return t[r].exports;var n=t[r]={i:r,l:!1,exports:{}};return e[r].call(n.exports,n,n.exports,a),n.l=!0,n.exports}return a.m=e,a.c=t,a.d=function(e,t,r){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(a.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)a.d(r,n,function(t){return e[t]}.bind(null,n));return r},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="",a(a.s=1)}([function(e,t){e.exports=require("react")},function(e,t,a){"use strict";a.r(t),a.d(t,"Audio",(function(){return l})),a.d(t,"BallTriangle",(function(){return o})),a.d(t,"Bars",(function(){return s})),a.d(t,"Circles",(function(){return m})),a.d(t,"Grid",(function(){return v})),a.d(t,"Hearts",(function(){return b})),a.d(t,"Oval",(function(){return y})),a.d(t,"Puff",(function(){return E})),a.d(t,"Rings",(function(){return N})),a.d(t,"SpinningCircles",(function(){return x})),a.d(t,"TailSpin",(function(){return C})),a.d(t,"ThreeDots",(function(){return P}));var r=a(0),n=a.n(r);function i(){return(i=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)({}).hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(null,arguments)}var l=function(e){var t=e.className,a=void 0===t?void 0:t,r=function(e,t){if(null==e)return{};var a,r,n=function(e,t){if(null==e)return{};var a={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;a[r]=e[r]}return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)a=i[r],t.includes(a)||{}.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}(e,["className"]);return n.a.createElement("svg",i({width:55,height:80,fill:"#FFF",viewBox:"0 0 55 80",className:"svg-loaders-svg".concat(a?" ".concat(a):"")},r),n.a.createElement("g",{transform:"matrix(1 0 0 -1 0 80)"},n.a.createElement("rect",{width:10,height:20,rx:3},n.a.createElement("animate",{attributeName:"height",begin:"0s",dur:"4.3s",values:"20;45;57;80;64;32;66;45;64;23;66;13;64;56;34;34;2;23;76;79;20",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("rect",{x:15,width:10,height:80,rx:3},n.a.createElement("animate",{attributeName:"height",begin:"0s",dur:"2s",values:"80;55;33;5;75;23;73;33;12;14;60;80",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("rect",{x:30,width:10,height:50,rx:3},n.a.createElement("animate",{attributeName:"height",begin:"0s",dur:"1.4s",values:"50;34;78;23;56;23;34;76;80;54;21;50",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("rect",{x:45,width:10,height:30,rx:3},n.a.createElement("animate",{attributeName:"height",begin:"0s",dur:"2s",values:"30;45;13;80;56;72;45;76;34;23;67;30",calcMode:"linear",repeatCount:"indefinite"}))))};function c(){return(c=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)({}).hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(null,arguments)}var o=function(e){var t=e.className,a=void 0===t?void 0:t,r=function(e,t){if(null==e)return{};var a,r,n=function(e,t){if(null==e)return{};var a={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;a[r]=e[r]}return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)a=i[r],t.includes(a)||{}.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}(e,["className"]);return n.a.createElement("svg",c({width:57,height:57,stroke:"#fff",viewBox:"0 0 57 57",className:"svg-loaders-svg".concat(a?" ".concat(a):"")},r),n.a.createElement("g",{transform:"translate(1 1)",strokeWidth:2,fill:"none",fillRule:"evenodd"},n.a.createElement("circle",{cx:5,cy:50,r:5},n.a.createElement("animate",{attributeName:"cy",begin:"0s",dur:"2.2s",values:"50;5;50;50",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"cx",begin:"0s",dur:"2.2s",values:"5;27;49;5",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:27,cy:5,r:5},n.a.createElement("animate",{attributeName:"cy",begin:"0s",dur:"2.2s",from:5,to:5,values:"5;50;50;5",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"cx",begin:"0s",dur:"2.2s",from:27,to:27,values:"27;49;5;27",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:49,cy:50,r:5},n.a.createElement("animate",{attributeName:"cy",begin:"0s",dur:"2.2s",values:"50;50;5;50",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"cx",from:49,to:49,begin:"0s",dur:"2.2s",values:"49;5;27;49",calcMode:"linear",repeatCount:"indefinite"}))))};function u(){return(u=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)({}).hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(null,arguments)}var s=function(e){var t=e.className,a=void 0===t?void 0:t,r=function(e,t){if(null==e)return{};var a,r,n=function(e,t){if(null==e)return{};var a={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;a[r]=e[r]}return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)a=i[r],t.includes(a)||{}.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}(e,["className"]);return n.a.createElement("svg",u({width:135,height:140,fill:"#fff",viewBox:"0 0 135 140",className:"svg-loaders-svg".concat(a?" ".concat(a):"")},r),n.a.createElement("rect",{y:10,width:15,height:120,rx:6},n.a.createElement("animate",{attributeName:"height",begin:"0.5s",dur:"1s",values:"120;110;100;90;80;70;60;50;40;140;120",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"y",begin:"0.5s",dur:"1s",values:"10;15;20;25;30;35;40;45;50;0;10",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("rect",{x:30,y:10,width:15,height:120,rx:6},n.a.createElement("animate",{attributeName:"height",begin:"0.25s",dur:"1s",values:"120;110;100;90;80;70;60;50;40;140;120",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"y",begin:"0.25s",dur:"1s",values:"10;15;20;25;30;35;40;45;50;0;10",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("rect",{x:60,width:15,height:140,rx:6},n.a.createElement("animate",{attributeName:"height",begin:"0s",dur:"1s",values:"120;110;100;90;80;70;60;50;40;140;120",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"y",begin:"0s",dur:"1s",values:"10;15;20;25;30;35;40;45;50;0;10",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("rect",{x:90,y:10,width:15,height:120,rx:6},n.a.createElement("animate",{attributeName:"height",begin:"0.25s",dur:"1s",values:"120;110;100;90;80;70;60;50;40;140;120",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"y",begin:"0.25s",dur:"1s",values:"10;15;20;25;30;35;40;45;50;0;10",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("rect",{x:120,y:10,width:15,height:120,rx:6},n.a.createElement("animate",{attributeName:"height",begin:"0.5s",dur:"1s",values:"120;110;100;90;80;70;60;50;40;140;120",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"y",begin:"0.5s",dur:"1s",values:"10;15;20;25;30;35;40;45;50;0;10",calcMode:"linear",repeatCount:"indefinite"})))};function f(){return(f=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)({}).hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(null,arguments)}var m=function(e){var t=e.className,a=void 0===t?void 0:t,r=function(e,t){if(null==e)return{};var a,r,n=function(e,t){if(null==e)return{};var a={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;a[r]=e[r]}return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)a=i[r],t.includes(a)||{}.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}(e,["className"]);return n.a.createElement("svg",f({width:135,height:135,fill:"#fff",viewBox:"0 0 135 135",className:"svg-loaders-svg".concat(a?" ".concat(a):"")},r),n.a.createElement("path",{d:"M67.447 58c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10zm9.448 9.447c0 5.523 4.477 10 10 10 5.522 0 10-4.477 10-10s-4.478-10-10-10c-5.523 0-10 4.477-10 10zm-9.448 9.448c-5.523 0-10 4.477-10 10 0 5.522 4.477 10 10 10s10-4.478 10-10c0-5.523-4.477-10-10-10zM58 67.447c0-5.523-4.477-10-10-10s-10 4.477-10 10 4.477 10 10 10 10-4.477 10-10z"},n.a.createElement("animateTransform",{attributeName:"transform",type:"rotate",from:"0 67 67",to:"-360 67 67",dur:"2.5s",repeatCount:"indefinite"})),n.a.createElement("path",{d:"M28.19 40.31c6.627 0 12-5.374 12-12 0-6.628-5.373-12-12-12-6.628 0-12 5.372-12 12 0 6.626 5.372 12 12 12zm30.72-19.825c4.686 4.687 12.284 4.687 16.97 0 4.686-4.686 4.686-12.284 0-16.97-4.686-4.687-12.284-4.687-16.97 0-4.687 4.686-4.687 12.284 0 16.97zm35.74 7.705c0 6.627 5.37 12 12 12 6.626 0 12-5.373 12-12 0-6.628-5.374-12-12-12-6.63 0-12 5.372-12 12zm19.822 30.72c-4.686 4.686-4.686 12.284 0 16.97 4.687 4.686 12.285 4.686 16.97 0 4.687-4.686 4.687-12.284 0-16.97-4.685-4.687-12.283-4.687-16.97 0zm-7.704 35.74c-6.627 0-12 5.37-12 12 0 6.626 5.373 12 12 12s12-5.374 12-12c0-6.63-5.373-12-12-12zm-30.72 19.822c-4.686-4.686-12.284-4.686-16.97 0-4.686 4.687-4.686 12.285 0 16.97 4.686 4.687 12.284 4.687 16.97 0 4.687-4.685 4.687-12.283 0-16.97zm-35.74-7.704c0-6.627-5.372-12-12-12-6.626 0-12 5.373-12 12s5.374 12 12 12c6.628 0 12-5.373 12-12zm-19.823-30.72c4.687-4.686 4.687-12.284 0-16.97-4.686-4.686-12.284-4.686-16.97 0-4.687 4.686-4.687 12.284 0 16.97 4.686 4.687 12.284 4.687 16.97 0z"},n.a.createElement("animateTransform",{attributeName:"transform",type:"rotate",from:"0 67 67",to:"360 67 67",dur:"8s",repeatCount:"indefinite"})))};function d(){return(d=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)({}).hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(null,arguments)}var v=function(e){var t=e.className,a=void 0===t?void 0:t,r=function(e,t){if(null==e)return{};var a,r,n=function(e,t){if(null==e)return{};var a={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;a[r]=e[r]}return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)a=i[r],t.includes(a)||{}.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}(e,["className"]);return n.a.createElement("svg",d({width:105,height:105,fill:"#fff",viewBox:"0 0 105 105",className:"svg-loaders-svg".concat(a?" ".concat(a):"")},r),n.a.createElement("circle",{cx:12.5,cy:12.5,r:12.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:12.5,cy:52.5,r:12.5,fillOpacity:.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"100ms",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:52.5,cy:12.5,r:12.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"300ms",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:52.5,cy:52.5,r:12.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"600ms",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:92.5,cy:12.5,r:12.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"800ms",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:92.5,cy:52.5,r:12.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"400ms",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:12.5,cy:92.5,r:12.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"700ms",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:52.5,cy:92.5,r:12.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"500ms",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:92.5,cy:92.5,r:12.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"200ms",dur:"1s",values:"1;.2;1",calcMode:"linear",repeatCount:"indefinite"})))};function p(){return(p=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)({}).hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(null,arguments)}var b=function(e){var t=e.className,a=void 0===t?void 0:t,r=function(e,t){if(null==e)return{};var a,r,n=function(e,t){if(null==e)return{};var a={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;a[r]=e[r]}return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)a=i[r],t.includes(a)||{}.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}(e,["className"]);return n.a.createElement("svg",p({width:140,height:64,fill:"#fff",viewBox:"0 0 140 64",className:"svg-loaders-svg".concat(a?" ".concat(a):"")},r),n.a.createElement("path",{d:"M30.262 57.02L7.195 40.723c-5.84-3.976-7.56-12.06-3.842-18.063 3.715-6 11.467-7.65 17.306-3.68l4.52 3.76 2.6-5.274c3.717-6.002 11.47-7.65 17.305-3.68 5.84 3.97 7.56 12.054 3.842 18.062L34.49 56.118c-.897 1.512-2.793 1.915-4.228.9z",fillOpacity:.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.4s",values:"0.5;1;0.5",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("path",{d:"M105.512 56.12l-14.44-24.272c-3.716-6.008-1.996-14.093 3.843-18.062 5.835-3.97 13.588-2.322 17.306 3.68l2.6 5.274 4.52-3.76c5.84-3.97 13.592-2.32 17.307 3.68 3.718 6.003 1.998 14.088-3.842 18.064L109.74 57.02c-1.434 1.014-3.33.61-4.228-.9z",fillOpacity:.5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0.7s",dur:"1.4s",values:"0.5;1;0.5",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("path",{d:"M67.408 57.834l-23.01-24.98c-5.864-6.15-5.864-16.108 0-22.248 5.86-6.14 15.37-6.14 21.234 0L70 16.168l4.368-5.562c5.863-6.14 15.375-6.14 21.235 0 5.863 6.14 5.863 16.098 0 22.247l-23.007 24.98c-1.43 1.556-3.757 1.556-5.188 0z"}))};function g(){return(g=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)({}).hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(null,arguments)}var y=function(e){var t=e.className,a=void 0===t?void 0:t,r=function(e,t){if(null==e)return{};var a,r,n=function(e,t){if(null==e)return{};var a={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;a[r]=e[r]}return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)a=i[r],t.includes(a)||{}.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}(e,["className"]);return n.a.createElement("svg",g({width:38,height:38,stroke:"#fff",viewBox:"0 0 38 38",className:"svg-loaders-svg".concat(a?" ".concat(a):"")},r),n.a.createElement("g",{transform:"translate(1 1)",strokeWidth:2,fill:"none",fillRule:"evenodd"},n.a.createElement("circle",{strokeOpacity:.5,cx:18,cy:18,r:18}),n.a.createElement("path",{d:"M36 18c0-9.94-8.06-18-18-18"},n.a.createElement("animateTransform",{attributeName:"transform",type:"rotate",from:"0 18 18",to:"360 18 18",dur:"1s",repeatCount:"indefinite"}))))};function h(){return(h=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)({}).hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(null,arguments)}var E=function(e){var t=e.className,a=void 0===t?void 0:t,r=function(e,t){if(null==e)return{};var a,r,n=function(e,t){if(null==e)return{};var a={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;a[r]=e[r]}return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)a=i[r],t.includes(a)||{}.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}(e,["className"]);return n.a.createElement("svg",h({width:44,height:44,stroke:"#fff",viewBox:"0 0 44 44",className:"svg-loaders-svg".concat(a?" ".concat(a):"")},r),n.a.createElement("g",{fill:"none",fillRule:"evenodd",strokeWidth:2},n.a.createElement("circle",{cx:22,cy:22,r:1},n.a.createElement("animate",{attributeName:"r",begin:"0s",dur:"1.8s",values:"1; 20",calcMode:"spline",keyTimes:"0; 1",keySplines:"0.165, 0.84, 0.44, 1",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"stroke-opacity",begin:"0s",dur:"1.8s",values:"1; 0",calcMode:"spline",keyTimes:"0; 1",keySplines:"0.3, 0.61, 0.355, 1",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:22,cy:22,r:1},n.a.createElement("animate",{attributeName:"r",begin:"-0.9s",dur:"1.8s",values:"1; 20",calcMode:"spline",keyTimes:"0; 1",keySplines:"0.165, 0.84, 0.44, 1",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"stroke-opacity",begin:"-0.9s",dur:"1.8s",values:"1; 0",calcMode:"spline",keyTimes:"0; 1",keySplines:"0.3, 0.61, 0.355, 1",repeatCount:"indefinite"}))))};function O(){return(O=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)({}).hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(null,arguments)}var N=function(e){var t=e.className,a=void 0===t?void 0:t,r=function(e,t){if(null==e)return{};var a,r,n=function(e,t){if(null==e)return{};var a={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;a[r]=e[r]}return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)a=i[r],t.includes(a)||{}.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}(e,["className"]);return n.a.createElement("svg",O({width:45,height:45,stroke:"#fff",viewBox:"0 0 45 45",className:"svg-loaders-svg".concat(a?" ".concat(a):"")},r),n.a.createElement("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:2},n.a.createElement("circle",{cx:22,cy:22,r:6,strokeOpacity:0},n.a.createElement("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:22,cy:22,r:6,strokeOpacity:0},n.a.createElement("animate",{attributeName:"r",begin:"3s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"stroke-opacity",begin:"3s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"stroke-width",begin:"3s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:22,cy:22,r:8},n.a.createElement("animate",{attributeName:"r",begin:"0s",dur:"1.5s",values:"6;1;2;3;4;5;6",calcMode:"linear",repeatCount:"indefinite"}))))};function w(){return(w=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)({}).hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(null,arguments)}var x=function(e){var t=e.className,a=void 0===t?void 0:t,r=function(e,t){if(null==e)return{};var a,r,n=function(e,t){if(null==e)return{};var a={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;a[r]=e[r]}return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)a=i[r],t.includes(a)||{}.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}(e,["className"]);return n.a.createElement("svg",w({width:58,height:58,viewBox:"0 0 58 58",className:"svg-loaders-svg".concat(a?" ".concat(a):"")},r),n.a.createElement("g",{transform:"translate(2 1)",stroke:"#FFF",strokeWidth:1.5,fill:"#fff",fillRule:"evenodd"},n.a.createElement("circle",{cx:42.601,cy:11.462,r:5},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.3s",values:"1;0;0;0;0;0;0;0",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:49.063,cy:27.063,r:5,fillOpacity:0},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.3s",values:"0;1;0;0;0;0;0;0",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:42.601,cy:42.663,r:5,fillOpacity:0},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.3s",values:"0;0;1;0;0;0;0;0",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:27,cy:49.125,r:5,fillOpacity:0},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.3s",values:"0;0;0;1;0;0;0;0",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:11.399,cy:42.663,r:5,fillOpacity:0},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.3s",values:"0;0;0;0;1;0;0;0",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:4.938,cy:27.063,r:5,fillOpacity:0},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.3s",values:"0;0;0;0;0;1;0;0",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:11.399,cy:11.462,r:5,fillOpacity:0},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.3s",values:"0;0;0;0;0;0;1;0",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:27,cy:5,r:5,fillOpacity:0},n.a.createElement("animate",{attributeName:"fill-opacity",begin:"0s",dur:"1.3s",values:"0;0;0;0;0;0;0;1",calcMode:"linear",repeatCount:"indefinite"}))))};function M(){return(M=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)({}).hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(null,arguments)}var C=function(e){var t=e.className,a=void 0===t?void 0:t,r=function(e,t){if(null==e)return{};var a,r,n=function(e,t){if(null==e)return{};var a={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;a[r]=e[r]}return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)a=i[r],t.includes(a)||{}.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}(e,["className"]);return n.a.createElement("svg",M({width:38,height:38,viewBox:"0 0 38 38",className:"svg-loaders-svg".concat(a?" ".concat(a):"")},r),n.a.createElement("defs",null,n.a.createElement("linearGradient",{x1:"8.042%",y1:"0%",x2:"65.682%",y2:"23.865%",id:"prefix__a"},n.a.createElement("stop",{stopColor:"#fff",stopOpacity:0,offset:"0%"}),n.a.createElement("stop",{stopColor:"#fff",stopOpacity:.631,offset:"63.146%"}),n.a.createElement("stop",{stopColor:"#fff",offset:"100%"}))),n.a.createElement("g",{transform:"translate(1 1)",fill:"none",fillRule:"evenodd"},n.a.createElement("path",{d:"M36 18c0-9.94-8.06-18-18-18",stroke:"url(#prefix__a)",strokeWidth:2},n.a.createElement("animateTransform",{attributeName:"transform",type:"rotate",from:"0 18 18",to:"360 18 18",dur:"0.9s",repeatCount:"indefinite"})),n.a.createElement("circle",{fill:"#fff",cx:36,cy:18,r:1},n.a.createElement("animateTransform",{attributeName:"transform",type:"rotate",from:"0 18 18",to:"360 18 18",dur:"0.9s",repeatCount:"indefinite"}))))};function j(){return(j=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)({}).hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(null,arguments)}var P=function(e){var t=e.className,a=void 0===t?void 0:t,r=function(e,t){if(null==e)return{};var a,r,n=function(e,t){if(null==e)return{};var a={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;a[r]=e[r]}return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)a=i[r],t.includes(a)||{}.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}(e,["className"]);return n.a.createElement("svg",j({width:120,height:30,fill:"#fff",viewBox:"0 0 120 30",className:"svg-loaders-svg".concat(a?" ".concat(a):"")},r),n.a.createElement("circle",{cx:15,cy:15,r:15},n.a.createElement("animate",{attributeName:"r",from:15,to:15,begin:"0s",dur:"0.8s",values:"15;9;15",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"fill-opacity",from:1,to:1,begin:"0s",dur:"0.8s",values:"1;.5;1",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:60,cy:15,r:9,fillOpacity:.3},n.a.createElement("animate",{attributeName:"r",from:9,to:9,begin:"0s",dur:"0.8s",values:"9;15;9",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"fill-opacity",from:.5,to:.5,begin:"0s",dur:"0.8s",values:".5;1;.5",calcMode:"linear",repeatCount:"indefinite"})),n.a.createElement("circle",{cx:105,cy:15,r:15},n.a.createElement("animate",{attributeName:"r",from:15,to:15,begin:"0s",dur:"0.8s",values:"15;9;15",calcMode:"linear",repeatCount:"indefinite"}),n.a.createElement("animate",{attributeName:"fill-opacity",from:1,to:1,begin:"0s",dur:"0.8s",values:"1;.5;1",calcMode:"linear",repeatCount:"indefinite"})))}}]);

package/package.json

@@ -1,39 +1,42 @@
 {
   "name": "svg-loaders-react",
-  "version": "2.1.0",
+  "version": "3.0.1",
   "description": "React implementation of the SVG Loaders library by Sam Herbert",
   "repository": {
     "type": "git",
-    "ur;": "https://github.com/ajwann/svg-loaders-react"
+    "url": "https://github.com/ajwann/svg-loaders-react"
   },
   "main": "dist/index.js",
   "peerDependendies": {
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0"
+    "react": ">=18",
+    "react-dom": ">=18"
   },
-  "dependencies": {},
   "devDependencies": {
     "@babel/core": "^7.4.5",
     "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
     "@babel/preset-env": "^7.4.5",
     "@babel/preset-react": "^7.0.0",
+    "@cfaester/enzyme-adapter-react-18": "^0.8.0",
+    "@testing-library/react": "^16.1.0",
     "babel-cli": "^6.26.0",
     "babel-eslint": "^10.0.2",
-    "babel-jest": "^24.8.0",
+    "babel-jest": "^29.7.0",
     "babel-loader": "^8.0.6",
     "babel-plugin-transform-react-jsx": "^6.24.1",
     "babel-preset-env": "^1.7.0",
     "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.14.0",
     "eslint": "^6.0.0",
     "eslint-config-airbnb": "^17.1.0",
     "eslint-plugin-import": "^2.17.3",
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-react": "^7.13.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^24.8.0",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
+    "jest": "^29.7.0",
+    "jsdom": "^25.0.1",
+    "jsdom-global": "^3.0.2",
+    "prop-types": "^15.8.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "webpack": "^4.29.0",
     "webpack-cli": "^3.2.1"
   },

package/src/setupTests.js

@@ -1,4 +1,6 @@
+import 'jsdom-global/register';
+
 import { configure } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@cfaester/enzyme-adapter-react-18';
 
 configure({ adapter: new Adapter() });

package/src/svg-loader-components/audio.js

@@ -1,8 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
-const Audio = ({ className, ...props }) => (
-  <svg width={55} height={80} fill="#FFF" className={`svg-loaders-svg${className ? ` ${className}` : ''}`} {...props}>
+const Audio = ({
+  className = undefined, // String
+  ...props
+}) => (
+  <svg width={55} height={80} fill="#FFF" viewBox="0 0 55 80" className={`svg-loaders-svg${className ? ` ${className}` : ''}`} {...props}>
     <g transform="matrix(1 0 0 -1 0 80)">
       <rect width={10} height={20} rx={3}>
         <animate
@@ -48,12 +50,4 @@ const Audio = ({ className, ...props }) => (
   </svg>
 );
 
-Audio.propTypes = {
-  className: PropTypes.string,
-};
-
-Audio.defaultProps = {
-  className: undefined,
-};
-
 export { Audio };

package/src/svg-loader-components/ball-triangle.js

@@ -1,8 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
-const BallTriangle = ({ className, ...props }) => (
-  <svg width={57} height={57} stroke="#fff" className={`svg-loaders-svg${className ? ` ${className}` : ''}`} {...props}>
+const BallTriangle = ({
+  className = undefined, // String
+  ...props
+}) => (
+  <svg width={57} height={57} stroke="#fff" viewBox="0 0 57 57" className={`svg-loaders-svg${className ? ` ${className}` : ''}`} {...props}>
     <g
       transform="translate(1 1)"
       strokeWidth={2}
@@ -73,12 +75,4 @@ const BallTriangle = ({ className, ...props }) => (
   </svg>
 );
 
-BallTriangle.propTypes = {
-  className: PropTypes.string,
-};
-
-BallTriangle.defaultProps = {
-  className: undefined,
-};
-
 export { BallTriangle };

package/src/svg-loader-components/bars.js

@@ -1,8 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
-const Bars = ({ className, ...props }) => (
-  <svg width={135} height={140} fill="#fff" className={`svg-loaders-svg${className ? ` ${className}` : ''}`} {...props}>
+const Bars = ({
+  className = undefined, // String
+  ...props
+}) => (
+  <svg width={135} height={140} fill="#fff" viewBox="0 0 135 140" className={`svg-loaders-svg${className ? ` ${className}` : ''}`} {...props}>
     <rect y={10} width={15} height={120} rx={6}>
       <animate
         attributeName="height"
@@ -96,12 +98,4 @@ const Bars = ({ className, ...props }) => (
   </svg>
 );
 
-Bars.propTypes = {
-  className: PropTypes.string,
-};
-
-Bars.defaultProps = {
-  className: undefined,
-};
-
 export { Bars };

package/src/svg-loader-components/circles.js

@@ -1,8 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
-const Circles = ({ className, ...props }) => (
-  <svg width={135} height={135} fill="#fff" className={`svg-loaders-svg${className ? ` ${className}` : ''}`} {...props}>
+const Circles = ({
+  className = undefined, // String
+  ...props
+}) => (
+  <svg width={135} height={135} fill="#fff" viewBox="0 0 135 135" className={`svg-loaders-svg${className ? ` ${className}` : ''}`} {...props}>
     <path d="M67.447 58c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10zm9.448 9.447c0 5.523 4.477 10 10 10 5.522 0 10-4.477 10-10s-4.478-10-10-10c-5.523 0-10 4.477-10 10zm-9.448 9.448c-5.523 0-10 4.477-10 10 0 5.522 4.477 10 10 10s10-4.478 10-10c0-5.523-4.477-10-10-10zM58 67.447c0-5.523-4.477-10-10-10s-10 4.477-10 10 4.477 10 10 10 10-4.477 10-10z">
       <animateTransform
         attributeName="transform"
@@ -26,12 +28,4 @@ const Circles = ({ className, ...props }) => (
   </svg>
 );
 
-Circles.propTypes = {
-  className: PropTypes.string,
-};
-
-Circles.defaultProps = {
-  className: undefined,
-};
-
 export { Circles };

package/src/svg-loader-components/grid.js

@@ -1,8 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
-const Grid = ({ className, ...props }) => (
-  <svg width={105} height={105} fill="#fff" className={`svg-loaders-svg${className ? ` ${className}` : ''}`} {...props}>
+const Grid = ({
+  className = undefined, // String
+  ...props
+}) => (
+  <svg width={105} height={105} fill="#fff" viewBox="0 0 105 105" className={`svg-loaders-svg${className ? ` ${className}` : ''}`} {...props}>
     <circle cx={12.5} cy={12.5} r={12.5}>
       <animate
         attributeName="fill-opacity"
@@ -96,12 +98,4 @@ const Grid = ({ className, ...props }) => (
   </svg>
 );
 
-Grid.propTypes = {
-  className: PropTypes.string,
-};
-
-Grid.defaultProps = {
-  className: undefined,
-};
-
 export { Grid };

package/src/svg-loader-components/hearts.js

@@ -1,8 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
-const Hearts = ({ className, ...props }) => (
-  <svg width={140} height={64} fill="#fff" className={`svg-loaders-svg${className ? ` ${className}` : ''}`} {...props}>
+const Hearts = ({
+  className = undefined, // String
+  ...props
+}) => (
+  <svg width={140} height={64} fill="#fff" viewBox="0 0 140 64" className={`svg-loaders-svg${className ? ` ${className}` : ''}`} {...props}>
     <path
       d="M30.262 57.02L7.195 40.723c-5.84-3.976-7.56-12.06-3.842-18.063 3.715-6 11.467-7.65 17.306-3.68l4.52 3.76 2.6-5.274c3.717-6.002 11.47-7.65 17.305-3.68 5.84 3.97 7.56 12.054 3.842 18.062L34.49 56.118c-.897 1.512-2.793 1.915-4.228.9z"
       fillOpacity={0.5}
@@ -32,12 +34,5 @@ const Hearts = ({ className, ...props }) => (
     <path d="M67.408 57.834l-23.01-24.98c-5.864-6.15-5.864-16.108 0-22.248 5.86-6.14 15.37-6.14 21.234 0L70 16.168l4.368-5.562c5.863-6.14 15.375-6.14 21.235 0 5.863 6.14 5.863 16.098 0 22.247l-23.007 24.98c-1.43 1.556-3.757 1.556-5.188 0z" />
   </svg>
 );
-Hearts.propTypes = {
-  className: PropTypes.string,
-};
-
-Hearts.defaultProps = {
-  className: undefined,
-};
 
 export { Hearts };

package/src/svg-loader-components/oval.js

@@ -1,8 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
-const Oval = ({ className, ...props }) => (
-  <svg width={38} height={38} stroke="#fff" className={`svg-loaders-svg${className ? ` ${className}` : ''}`} {...props}>
+const Oval = ({
+  className = undefined, // String
+  ...props
+}) => (
+  <svg width={38} height={38} stroke="#fff" viewBox="0 0 38 38" className={`svg-loaders-svg${className ? ` ${className}` : ''}`} {...props}>
     <g
       transform="translate(1 1)"
       strokeWidth={2}
@@ -24,13 +26,4 @@ const Oval = ({ className, ...props }) => (
   </svg>
 );
 
-
-Oval.propTypes = {
-  className: PropTypes.string,
-};
-
-Oval.defaultProps = {
-  className: undefined,
-};
-
 export { Oval };

package/src/svg-loader-components/puff.js

@@ -1,8 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
-const Puff = ({ className, ...props }) => (
-  <svg width={44} height={44} stroke="#fff" className={`svg-loaders-svg${className ? ` ${className}` : ''}`} {...props}>
+const Puff = ({
+  className = undefined, // String
+  ...props
+}) => (
+  <svg width={44} height={44} stroke="#fff" viewBox="0 0 44 44" className={`svg-loaders-svg${className ? ` ${className}` : ''}`} {...props}>
     <g fill="none" fillRule="evenodd" strokeWidth={2}>
       <circle cx={22} cy={22} r={1}>
         <animate
@@ -52,12 +54,4 @@ const Puff = ({ className, ...props }) => (
   </svg>
 );
 
-Puff.propTypes = {
-  className: PropTypes.string,
-};
-
-Puff.defaultProps = {
-  className: undefined,
-};
-
 export { Puff };

package/src/svg-loader-components/rings.js

@@ -1,8 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
-const Rings = ({ className, ...props }) => (
-  <svg width={45} height={45} stroke="#fff" className={`svg-loaders-svg${className ? ` ${className}` : ''}`} {...props}>
+const Rings = ({
+  className = undefined, // String
+  ...props
+}) => (
+  <svg width={45} height={45} stroke="#fff" viewBox="0 0 45 45" className={`svg-loaders-svg${className ? ` ${className}` : ''}`} {...props}>
     <g
       fill="none"
       fillRule="evenodd"
@@ -75,12 +77,4 @@ const Rings = ({ className, ...props }) => (
   </svg>
 );
 
-Rings.propTypes = {
-  className: PropTypes.string,
-};
-
-Rings.defaultProps = {
-  className: undefined,
-};
-
 export { Rings };

package/src/svg-loader-components/spinning-circles.js

@@ -1,8 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
-const SpinningCircles = ({ className, ...props }) => (
-  <svg width={58} height={58} className={`svg-loaders-svg${className ? ` ${className}` : ''}`} {...props}>
+const SpinningCircles = ({
+  className = undefined, // String
+  ...props
+}) => (
+  <svg width={58} height={58} viewBox="0 0 58 58" className={`svg-loaders-svg${className ? ` ${className}` : ''}`} {...props}>
     <g
       transform="translate(2 1)"
       stroke="#FFF"
@@ -94,12 +96,4 @@ const SpinningCircles = ({ className, ...props }) => (
   </svg>
 );
 
-SpinningCircles.propTypes = {
-  className: PropTypes.string,
-};
-
-SpinningCircles.defaultProps = {
-  className: undefined,
-};
-
 export { SpinningCircles };

package/src/svg-loader-components/tail-spin.js

@@ -1,8 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
-const TailSpin = ({ className, ...props }) => (
-  <svg width={38} height={38} className={`svg-loaders-svg${className ? ` ${className}` : ''}`} {...props}>
+const TailSpin = ({
+  className = undefined, // String
+  ...props
+}) => (
+  <svg width={38} height={38} viewBox="0 0 38 38" className={`svg-loaders-svg${className ? ` ${className}` : ''}`} {...props}>
     <defs>
       <linearGradient
         x1="8.042%"
@@ -45,12 +47,4 @@ const TailSpin = ({ className, ...props }) => (
   </svg>
 );
 
-TailSpin.propTypes = {
-  className: PropTypes.string,
-};
-
-TailSpin.defaultProps = {
-  className: undefined,
-};
-
 export { TailSpin };

package/src/svg-loader-components/three-dots.js

@@ -1,8 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
-const ThreeDots = ({ className, ...props }) => (
-  <svg width={120} height={30} fill="#fff" className={`svg-loaders-svg${className ? ` ${className}` : ''}`} {...props}>
+const ThreeDots = ({
+  className = undefined, // String
+  ...props
+}) => (
+  <svg width={120} height={30} fill="#fff" viewBox="0 0 120 30" className={`svg-loaders-svg${className ? ` ${className}` : ''}`} {...props}>
     <circle cx={15} cy={15} r={15}>
       <animate
         attributeName="r"
@@ -72,12 +74,4 @@ const ThreeDots = ({ className, ...props }) => (
   </svg>
 );
 
-ThreeDots.propTypes = {
-  className: PropTypes.string,
-};
-
-ThreeDots.defaultProps = {
-  className: undefined,
-};
-
 export { ThreeDots };

package/test/audio.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 
 import { Audio } from '../src/svg-loader-components/audio';
 
@@ -7,4 +7,8 @@ describe('Test <Audio />', () => {
   it('renders without crashing', () => {
     shallow(<Audio />);
   });
+  it('viewBox property is defined', () => {
+    const AudioComponent = mount(<Audio />).find('svg');
+    expect(AudioComponent.prop('viewBox')).toBeDefined();
+  });
 });

package/test/ball-triangle.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 
 import { BallTriangle } from '../src/svg-loader-components/ball-triangle';
 
@@ -7,4 +7,8 @@ describe('Test <BallTriangle />', () => {
   it('renders without crashing', () => {
     shallow(<BallTriangle />);
   });
+  it('viewBox property is defined', () => {
+    const BallTriangleComponent = mount(<BallTriangle />).find('svg');
+    expect(BallTriangleComponent.prop('viewBox')).toBeDefined();
+  });
 });

package/test/bars.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 
 import { Bars } from '../src/svg-loader-components/bars';
 
@@ -7,4 +7,8 @@ describe('Test <Bars />', () => {
   it('renders without crashing', () => {
     shallow(<Bars />);
   });
+  it('viewBox property is defined', () => {
+    const BarsComponent = mount(<Bars />).find('svg');
+    expect(BarsComponent.prop('viewBox')).toBeDefined();
+  });
 });

package/test/circles.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 
 import { Circles } from '../src/svg-loader-components/circles';
 
@@ -7,4 +7,8 @@ describe('Test <Circles />', () => {
   it('renders without crashing', () => {
     shallow(<Circles />);
   });
+  it('viewBox property is defined', () => {
+    const CirclesComponent = mount(<Circles />).find('svg');
+    expect(CirclesComponent.prop('viewBox')).toBeDefined();
+  });
 });

package/test/grid.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 
 import { Grid } from '../src/svg-loader-components/grid';
 
@@ -7,4 +7,8 @@ describe('Test <Grid />', () => {
   it('renders without crashing', () => {
     shallow(<Grid />);
   });
+  it('viewBox property is defined', () => {
+    const GridComponent = mount(<Grid />).find('svg');
+    expect(GridComponent.prop('viewBox')).toBeDefined();
+  });
 });

package/test/hearts.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 
 import { Hearts } from '../src/svg-loader-components/hearts';
 
@@ -7,4 +7,8 @@ describe('Test <Hearts />', () => {
   it('renders without crashing', () => {
     shallow(<Hearts />);
   });
+  it('viewBox property is defined', () => {
+    const HeartsComponent = mount(<Hearts />).find('svg');
+    expect(HeartsComponent.prop('viewBox')).toBeDefined();
+  });
 });

package/test/oval.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 
 import { Oval } from '../src/svg-loader-components/oval';
 
@@ -7,4 +7,8 @@ describe('Test <Oval />', () => {
   it('renders without crashing', () => {
     shallow(<Oval />);
   });
+  it('viewBox property is defined', () => {
+    const OvalComponent = mount(<Oval />).find('svg');
+    expect(OvalComponent.prop('viewBox')).toBeDefined();
+  });
 });

package/test/puff.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 
 import { Puff } from '../src/svg-loader-components/puff';
 
@@ -7,4 +7,8 @@ describe('Test <Puff />', () => {
   it('renders without crashing', () => {
     shallow(<Puff />);
   });
+  it('viewBox property is defined', () => {
+    const PuffComponent = mount(<Puff />).find('svg');
+    expect(PuffComponent.prop('viewBox')).toBeDefined();
+  });
 });

package/test/rings.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 
 import { Rings } from '../src/svg-loader-components/rings';
 
@@ -7,4 +7,8 @@ describe('Test <Rings />', () => {
   it('renders without crashing', () => {
     shallow(<Rings />);
   });
+  it('viewBox property is defined', () => {
+    const RingsComponent = mount(<Rings />).find('svg');
+    expect(RingsComponent.prop('viewBox')).toBeDefined();
+  });
 });

package/test/spinning-circles.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 
 import { SpinningCircles } from '../src/svg-loader-components/spinning-circles';
 
@@ -7,4 +7,8 @@ describe('Test <SpinningCircles />', () => {
   it('renders without crashing', () => {
     shallow(<SpinningCircles />);
   });
+  it('viewBox property is defined', () => {
+    const SpinningCirclesComponent = mount(<SpinningCircles />).find('svg');
+    expect(SpinningCirclesComponent.prop('viewBox')).toBeDefined();
+  });
 });

package/test/tail-spin.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 
 import { TailSpin } from '../src/svg-loader-components/tail-spin';
 
@@ -7,4 +7,8 @@ describe('Test <TailSpin />', () => {
   it('renders without crashing', () => {
     shallow(<TailSpin />);
   });
+  it('viewBox property is defined', () => {
+    const TailSpinComponent = mount(<TailSpin />).find('svg');
+    expect(TailSpinComponent.prop('viewBox')).toBeDefined();
+  });
 });

package/test/three-dots.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 
 import { ThreeDots } from '../src/svg-loader-components/three-dots';
 
@@ -7,4 +7,8 @@ describe('Test <ThreeDots />', () => {
   it('renders without crashing', () => {
     shallow(<ThreeDots />);
   });
+  it('viewBox property is defined', () => {
+    const ThreeDotsComponent = mount(<ThreeDots />).find('svg');
+    expect(ThreeDotsComponent.prop('viewBox')).toBeDefined();
+  });
 });