diff --git a/404.html b/404.html index c14bffb..0f223c8 100644 --- a/404.html +++ b/404.html @@ -4,7 +4,7 @@ Page Not Found | React Spinners - + diff --git a/assets/js/bd7a4b37.9496100c.js b/assets/js/bd7a4b37.9496100c.js deleted file mode 100644 index a849b78..0000000 --- a/assets/js/bd7a4b37.9496100c.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[5653],{2284:(e,l,r)=>{r.r(l),r.d(l,{assets:()=>m,contentTitle:()=>u,default:()=>j,frontMatter:()=>f,metadata:()=>x,toc:()=>b});var o=r(5893),i=r(1151),s=r(5305),t=r(1992),a=r(5888),n=(r(7294),r(9789));const c=n.d,d=n.y,h=n.d.sunset,p=e=>{let{colors:l=h,backgroundColor:r="#fff",speed:i=2,width:s=100,height:t=100,visible:a=!0,ariaLabel:n="Hairball loading",wrapperClass:d="",wrapperStyle:p={},preset:f}=e;const{fillColor1:u=c.dawn.fillColor1,fillColor2:x=c.dawn.fillColor2,fillColor3:m=c.dawn.fillColor3,fillColor4:b=c.dawn.fillColor4}=f?c?.[f]:l;return a?(0,o.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",style:{margin:"auto",background:r,display:"block",...p},width:s,height:t,"aria-label":n,className:d,viewBox:"0 0 100 100",preserveAspectRatio:"xMidYMid",role:"progressbar","data-testid":"hairball",children:(0,o.jsx)("g",{transform:"translate(50,50)",children:(0,o.jsx)("g",{transform:"scale(0.8)",children:(0,o.jsx)("g",{transform:"translate(-50,-50)",children:(0,o.jsxs)("g",{children:[(0,o.jsx)("animateTransform",{attributeName:"transform",type:"rotate",repeatCount:"indefinite",values:"0 50 50;360 50 50",keyTimes:"0;1",dur:`${i}s`,keySplines:"0.5 0.5 0.5 0.5",calcMode:"spline"}),(0,o.jsx)("path",{fill:u,d:"M51.8,9.9c-8.2-6.6-20.5-4.3-26,4.5c1.9-0.3,3.8-0.4,5.7-0.1c9.9-5.7,22.9-0.9,26.9,9.8 C58.5,18.7,56.1,13.4,51.8,9.9z"}),(0,o.jsx)("path",{fill:x,d:"M44.1,23c-4-6.9-12.3-10.3-20-8.1c-7.4,2-12.6,8.8-12.8,16.5c1.5-1.2,3.1-2.2,4.9-2.9 c5.7-9.8,19.4-12.2,28.1-5C44.3,23.3,44.2,23.1,44.1,23z"}),(0,o.jsx)("path",{fill:m,d:"M31.4,29.5c-6.8-3.9-15.6-2.8-21.1,2.7c-5.6,5.4-6.8,14.1-3.1,20.9c0.7-1.8,1.6-3.5,2.8-5 c0-11.4,10.7-20.3,21.9-18.4C31.7,29.7,31.5,29.6,31.4,29.5z"}),(0,o.jsx)("path",{fill:b,d:"M12.1,57c0.8-7.1,5.6-13,12.1-15.4c-8.1-0.2-15.4,5.2-17.5,13c-2,7.5,1.2,15.5,7.8,19.6 c-0.3-1.9-0.4-3.8-0.1-5.7C12.4,65,11.6,61,12.1,57z"}),(0,o.jsx)("path",{fill:u,d:"M28.4,83.8c-9.8-5.7-12.2-19.4-5-28.1c-7.1,3.8-10.7,12.2-8.6,20c2,7.5,8.8,12.8,16.5,13 C30.1,87.2,29.1,85.6,28.4,83.8z"}),(0,o.jsx)("path",{fill:x,d:"M48.2,90.1c-11.4,0-20.3-10.7-18.4-21.9c-4.2,6.8-3.2,15.6,2.3,21.4c5.4,5.7,14.2,7,21.1,3.3 C51.4,92.2,49.7,91.2,48.2,90.1z"}),(0,o.jsx)("path",{fill:m,d:"M68.5,85.6c-9.9,5.7-22.9,0.9-26.9-9.8c-0.2,8.1,5.2,15.4,13,17.5c7.5,2,15.5-1.2,19.6-7.8 C72.3,85.8,70.4,85.9,68.5,85.6z"}),(0,o.jsx)("path",{fill:b,d:"M83.8,71.6c-5.7,9.8-19.4,12.2-28.1,5c3.8,7.1,12.2,10.7,20,8.6c7.5-2,12.8-8.8,13-16.5 C87.2,69.9,85.6,70.9,83.8,71.6z"}),(0,o.jsx)("path",{fill:u,d:"M92.9,46.8c-0.7,1.8-1.6,3.5-2.8,5c0,11.4-10.7,20.3-21.9,18.4c6.8,4.2,15.6,3.2,21.4-2.3 C95.3,62.5,96.6,53.7,92.9,46.8z"}),(0,o.jsx)("path",{fill:x,d:"M85.5,25.8c0.3,1.9,0.4,3.8,0.1,5.7c5.7,9.9,0.9,22.9-9.8,26.9c8.1,0.2,15.4-5.2,17.5-13 C95.3,37.9,92.1,29.8,85.5,25.8z"}),(0,o.jsx)("path",{fill:m,d:"M71.6,16.2C67.8,6.4,56,2.2,46.8,7.1c1.8,0.7,3.5,1.6,5,2.8c11.4,0,20.3,10.7,18.4,21.9 C73.1,27.1,73.6,21.3,71.6,16.2z"}),(0,o.jsx)("path",{fill:b,d:"M85.5,25.8c-1.4-8.2-8.6-14.3-16.9-14.5c1.2,1.5,2.2,3.1,2.9,4.9c9.8,5.7,12.2,19.4,5,28.1 C83.2,40.7,86.8,33.2,85.5,25.8z"})]})})})})}):null},f={},u="Hairball",x={id:"experimental/hairball",title:"Hairball",description:"\n )\n\n",scope:{Hairball:p},noInline:!0,children:[(0,o.jsx)(t.i5,{}),(0,o.jsx)("br",{}),(0,o.jsx)(t.uz,{}),(0,o.jsx)(t.IF,{})]}),"\n",(0,o.jsx)(l.hr,{}),"\n",(0,o.jsx)(l.h2,{id:"more-example",children:"More Example:"}),"\n",(0,o.jsxs)(l.p,{children:["Here are some more examples of the Hairball component using different presets. It\nis recommended that you use the presets, as they are designed to work well with\nthe Hairball component. However, you can also pass your own colors to the Hairball\ncomponent. See the ",(0,o.jsx)(l.code,{children:"colors"})," props section for more information."]}),"\n",(0,o.jsxs)("div",{style:{display:"flex"},children:[(0,o.jsx)(p,{}),(0,o.jsx)(p,{preset:d.midnight}),(0,o.jsx)(p,{preset:d.midday}),(0,o.jsx)(p,{preset:d.rainbow}),(0,o.jsx)(p,{preset:d.forest}),(0,o.jsx)(p,{preset:d.dawn}),(0,o.jsx)(p,{preset:d.dusk}),(0,o.jsx)(p,{preset:d.sunrise})]}),"\n",(0,o.jsx)(l.hr,{}),"\n",(0,o.jsx)(l.h2,{id:"props",children:"Props"}),"\n",(0,o.jsx)(s.Z,{properties:[...(0,a.oD)("Hairball",["colors"]),{name:"preset",type:Object.keys(d).map((e=>`'${e}'`)).join(" | "),default:"undefined",description:"The preset color schema to use. Please see Preset section for more information."},{name:"colors",type:"{fillColor1: string, fillColor2: string, fillColor3:string, fillColor4:string}",default:"undefined",description:"An objects of colors to use in given structure. If this prop is provided, the preset prop will be ignored."}]}),"\n",(0,o.jsx)(l.h2,{id:"presets",children:"Presets"}),"\n",(0,o.jsx)(l.p,{children:"The following presets are available:"}),"\n",(0,o.jsxs)("table",{children:[(0,o.jsx)("thead",{children:(0,o.jsxs)("tr",{children:[(0,o.jsx)("th",{children:"Preset"}),(0,o.jsx)("th",{children:"Colors"}),(0,o.jsx)("th",{children:"Name"})]})}),(0,o.jsx)("tbody",{children:Object.keys(c).map(((e,r)=>(0,o.jsxs)(l.tr,{children:[(0,o.jsx)(l.td,{children:e}),(0,o.jsx)(l.td,{children:(0,o.jsxs)(l.div,{style:{display:"flex"},children:[(0,o.jsx)(l.div,{style:{backgroundColor:c[e].fillColor1,width:"20px",height:"20px"}}),(0,o.jsx)(l.div,{style:{backgroundColor:c[e].fillColor2,width:"20px",height:"20px"}}),(0,o.jsx)(l.div,{style:{backgroundColor:c[e].fillColor3,width:"20px",height:"20px"}}),(0,o.jsx)(l.div,{style:{backgroundColor:c[e].fillColor4,width:"20px",height:"20px"}})]})}),(0,o.jsx)(l.td,{children:`preset={HairballPreset.${e}}`})]},e)))})]}),"\n",(0,o.jsxs)(l.p,{children:["Each preset corresponds to a unique color schema. You can use these presets to easily change the color scheme of the Hairball component. Simply pass the name of the preset to the ",(0,o.jsx)(l.code,{children:"preset"})," prop of the Hairball component, like this: ",(0,o.jsx)(l.code,{children:""}),"."]}),"\n",(0,o.jsx)(l.hr,{}),"\n",(0,o.jsx)(l.h2,{id:"custom-colors",children:"Custom Colors"}),"\n",(0,o.jsxs)(l.p,{children:["You can also pass your own colors to the Hairball component. To do this, pass an object to the ",(0,o.jsx)(l.code,{children:"colors"})," prop of the Hairball component, like this:"]}),"\n",(0,o.jsx)(p,{colors:{fillColor1:"#ff0000",fillColor2:"#00ff00",fillColor3:"#0000ff",fillColor4:"#ffff00"}}),"\n",(0,o.jsx)(l.pre,{children:(0,o.jsx)(l.code,{className:"language-jsx",children:"\n"})}),"\n",(0,o.jsxs)(l.p,{children:["The ",(0,o.jsx)(l.code,{children:"colors"})," prop takes an object with the following properties:"]}),"\n",(0,o.jsxs)(l.ul,{children:["\n",(0,o.jsxs)(l.li,{children:[(0,o.jsx)(l.code,{children:"fillColor1"})," - The color of the first fill."]}),"\n",(0,o.jsxs)(l.li,{children:[(0,o.jsx)(l.code,{children:"fillColor2"})," - The color of the second fill."]}),"\n",(0,o.jsxs)(l.li,{children:[(0,o.jsx)(l.code,{children:"fillColor3"})," - The color of the third fill."]}),"\n",(0,o.jsxs)(l.li,{children:[(0,o.jsx)(l.code,{children:"fillColor4"})," - The color of the fourth fill."]}),"\n"]})]})}function j(e={}){const{wrapper:l}={...(0,i.a)(),...e.components};return l?(0,o.jsx)(l,{...e,children:(0,o.jsx)(C,{...e})}):C(e)}},5888:(e,l,r)=>{r.d(l,{oD:()=>t});const o=e=>({height:`Specifies the height of the ${e} SVG. For additional customization, employ the wrapper className.`,width:`Specifies the width of the ${e} SVG. For further customization, utilize the wrapper className.`,colors:`Defines the colors of the ${e} SVG. Accepts multiple color objects. If a comprehensive list of colors is not provided, defaults will be applied. Refer to the example.`,color:`Sets the color of the ${e} SVG.`,ariaLabel:`Specifies the Aria label of the ${e}. This label will be applied to the aria-label attribute in the wrapper element.`,wrapperStyle:"Applies styles to the wrapper. It should be a valid CSS object and can be used for custom styling, overriding the default style.",wrapperClass:"Assigns a className to the wrapper for custom styling, overriding the default style.",visible:`Controls the visibility of the ${e}. If set to false, the ${e} will not be rendered.`,radius:`Determines the radius of the circle(s) in the ${e} component. For further customization, use the wrapper className.`}),i={height:"number | string",width:"number | string",colors:"Array",color:"string: #hex-code",secondaryColor:"string: #hex-code",ariaLabel:"string",wrapperStyle:"object",wrapperClass:"string",visible:"boolean",radius:"number | string",strokeWidth:"number | string",strokeColor:"string"},s=e=>({height:"80",width:"80",color:"#4fa94d",secondaryColor:"#4fa94d",ariaLabel:`${e}-loading`,wrapperStyle:JSON.stringify({},null,2),wrapperClass:"undefined",visible:"true"}),t=function(e,l){return void 0===l&&(l=[]),[{name:"height",type:i.height,default:s(e).height,description:o(e).height},{name:"width",type:i.width,default:s(e).width,description:o(e).width},{name:"colors",type:i.colors,default:JSON.stringify(["#4fa94d","#4fa94d","#4fa94d"]),description:o(e).colors},{name:"ariaLabel",type:i.ariaLabel,default:s(e).ariaLabel,description:o(e).ariaLabel},{name:"wrapperStyle",type:i.wrapperStyle,default:s(e).wrapperStyle,description:o(e).wrapperStyle},{name:"wrapperClass",type:i.wrapperClass,default:s(e).wrapperClass,description:o(e).wrapperClass},{name:"visible",type:i.visible,default:s(e).visible,description:o(e).visible}].filter((e=>!l.includes(e.name)))}},9789:(e,l,r)=>{r.d(l,{d:()=>i,y:()=>o});const o={sunset:"sunset",ocean:"ocean",forest:"forest",twilight:"twilight",dawn:"dawn",dusk:"dusk",midday:"midday",midnight:"midnight",sunrise:"sunrise",rainbow:"rainbow"},i={[o.sunset]:{fillColor1:"#e15b64",fillColor2:"#f47e60",fillColor3:"#f8b26a",fillColor4:"#abbd81"},[o.ocean]:{fillColor1:"#3498db",fillColor2:"#2ecc71",fillColor3:"#1abc9c",fillColor4:"#9b59b6"},[o.forest]:{fillColor1:"#27ae60",fillColor2:"#16a085",fillColor3:"#f39c12",fillColor4:"#d35400"},[o.twilight]:{fillColor1:"#8e44ad",fillColor2:"#c0392b",fillColor3:"#d35400",fillColor4:"#f39c12"},[o.dawn]:{fillColor1:"#c0392b",fillColor2:"#d35400",fillColor3:"#f39c12",fillColor4:"#16a085"},[o.dusk]:{fillColor1:"#9b59b6",fillColor2:"#34495e",fillColor3:"#16a085",fillColor4:"#27ae60"},[o.midday]:{fillColor1:"#2ecc71",fillColor2:"#3498db",fillColor3:"#9b59b6",fillColor4:"#34495e"},[o.midnight]:{fillColor1:"#34495e",fillColor2:"#16a085",fillColor3:"#27ae60",fillColor4:"#8e44ad"},[o.sunrise]:{fillColor1:"#f1c40f",fillColor2:"#e67e22",fillColor3:"#e74c3c",fillColor4:"#ecf0f1"},[o.rainbow]:{fillColor1:"#16a085",fillColor2:"#27ae60",fillColor3:"#3498db",fillColor4:"#8e44ad"}}}}]); \ No newline at end of file diff --git a/assets/js/bd7a4b37.99bff616.js b/assets/js/bd7a4b37.99bff616.js new file mode 100644 index 0000000..68645c6 --- /dev/null +++ b/assets/js/bd7a4b37.99bff616.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[5653],{2284:(e,l,r)=>{r.r(l),r.d(l,{assets:()=>m,contentTitle:()=>u,default:()=>j,frontMatter:()=>f,metadata:()=>x,toc:()=>b});var o=r(5893),i=r(1151),s=r(5305),t=r(1992),a=r(5888),n=(r(7294),r(9789));const d=n.d,c=n.y,h=n.d.sunset,p=e=>{let{colors:l=h,backgroundColor:r="#fff",speed:i=2,width:s=100,height:t=100,visible:a=!0,ariaLabel:n="Hairball loading",wrapperClass:c="",wrapperStyle:p={},preset:f}=e;const{fillColor1:u=d.dawn.fillColor1,fillColor2:x=d.dawn.fillColor2,fillColor3:m=d.dawn.fillColor3,fillColor4:b=d.dawn.fillColor4}=f?d?.[f]:l;return a?(0,o.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",style:{margin:"auto",background:r,display:"block",...p},width:s,height:t,"aria-label":n,className:c,viewBox:"0 0 100 100",preserveAspectRatio:"xMidYMid",role:"progressbar","data-testid":"hairball",children:(0,o.jsx)("g",{transform:"translate(50,50)",children:(0,o.jsx)("g",{transform:"scale(0.8)",children:(0,o.jsx)("g",{transform:"translate(-50,-50)",children:(0,o.jsxs)("g",{children:[(0,o.jsx)("animateTransform",{attributeName:"transform",type:"rotate",repeatCount:"indefinite",values:"0 50 50;360 50 50",keyTimes:"0;1",dur:`${i}s`,keySplines:"0.5 0.5 0.5 0.5",calcMode:"spline"}),(0,o.jsx)("path",{fill:u,d:"M51.8,9.9c-8.2-6.6-20.5-4.3-26,4.5c1.9-0.3,3.8-0.4,5.7-0.1c9.9-5.7,22.9-0.9,26.9,9.8 C58.5,18.7,56.1,13.4,51.8,9.9z"}),(0,o.jsx)("path",{fill:x,d:"M44.1,23c-4-6.9-12.3-10.3-20-8.1c-7.4,2-12.6,8.8-12.8,16.5c1.5-1.2,3.1-2.2,4.9-2.9 c5.7-9.8,19.4-12.2,28.1-5C44.3,23.3,44.2,23.1,44.1,23z"}),(0,o.jsx)("path",{fill:m,d:"M31.4,29.5c-6.8-3.9-15.6-2.8-21.1,2.7c-5.6,5.4-6.8,14.1-3.1,20.9c0.7-1.8,1.6-3.5,2.8-5 c0-11.4,10.7-20.3,21.9-18.4C31.7,29.7,31.5,29.6,31.4,29.5z"}),(0,o.jsx)("path",{fill:b,d:"M12.1,57c0.8-7.1,5.6-13,12.1-15.4c-8.1-0.2-15.4,5.2-17.5,13c-2,7.5,1.2,15.5,7.8,19.6 c-0.3-1.9-0.4-3.8-0.1-5.7C12.4,65,11.6,61,12.1,57z"}),(0,o.jsx)("path",{fill:u,d:"M28.4,83.8c-9.8-5.7-12.2-19.4-5-28.1c-7.1,3.8-10.7,12.2-8.6,20c2,7.5,8.8,12.8,16.5,13 C30.1,87.2,29.1,85.6,28.4,83.8z"}),(0,o.jsx)("path",{fill:x,d:"M48.2,90.1c-11.4,0-20.3-10.7-18.4-21.9c-4.2,6.8-3.2,15.6,2.3,21.4c5.4,5.7,14.2,7,21.1,3.3 C51.4,92.2,49.7,91.2,48.2,90.1z"}),(0,o.jsx)("path",{fill:m,d:"M68.5,85.6c-9.9,5.7-22.9,0.9-26.9-9.8c-0.2,8.1,5.2,15.4,13,17.5c7.5,2,15.5-1.2,19.6-7.8 C72.3,85.8,70.4,85.9,68.5,85.6z"}),(0,o.jsx)("path",{fill:b,d:"M83.8,71.6c-5.7,9.8-19.4,12.2-28.1,5c3.8,7.1,12.2,10.7,20,8.6c7.5-2,12.8-8.8,13-16.5 C87.2,69.9,85.6,70.9,83.8,71.6z"}),(0,o.jsx)("path",{fill:u,d:"M92.9,46.8c-0.7,1.8-1.6,3.5-2.8,5c0,11.4-10.7,20.3-21.9,18.4c6.8,4.2,15.6,3.2,21.4-2.3 C95.3,62.5,96.6,53.7,92.9,46.8z"}),(0,o.jsx)("path",{fill:x,d:"M85.5,25.8c0.3,1.9,0.4,3.8,0.1,5.7c5.7,9.9,0.9,22.9-9.8,26.9c8.1,0.2,15.4-5.2,17.5-13 C95.3,37.9,92.1,29.8,85.5,25.8z"}),(0,o.jsx)("path",{fill:m,d:"M71.6,16.2C67.8,6.4,56,2.2,46.8,7.1c1.8,0.7,3.5,1.6,5,2.8c11.4,0,20.3,10.7,18.4,21.9 C73.1,27.1,73.6,21.3,71.6,16.2z"}),(0,o.jsx)("path",{fill:b,d:"M85.5,25.8c-1.4-8.2-8.6-14.3-16.9-14.5c1.2,1.5,2.2,3.1,2.9,4.9c9.8,5.7,12.2,19.4,5,28.1 C83.2,40.7,86.8,33.2,85.5,25.8z"})]})})})})}):null},f={},u="Hairball",x={id:"experimental/hairball",title:"Hairball",description:"\n )\n\n",scope:{Hairball:p},noInline:!0,children:[(0,o.jsx)(t.i5,{}),(0,o.jsx)("br",{}),(0,o.jsx)(t.uz,{}),(0,o.jsx)(t.IF,{})]}),"\n",(0,o.jsx)(l.hr,{}),"\n",(0,o.jsx)(l.h2,{id:"more-example",children:"More Example:"}),"\n",(0,o.jsxs)(l.p,{children:["Here are some more examples of the Hairball component using different presets. It\nis recommended that you use the presets, as they are designed to work well with\nthe Hairball component. However, you can also pass your own colors to the Hairball\ncomponent. See the ",(0,o.jsx)(l.code,{children:"colors"})," props section for more information."]}),"\n",(0,o.jsxs)("div",{style:{display:"flex"},children:[(0,o.jsx)(p,{}),(0,o.jsx)(p,{preset:c.midnight}),(0,o.jsx)(p,{preset:c.midday}),(0,o.jsx)(p,{preset:c.rainbow}),(0,o.jsx)(p,{preset:c.forest}),(0,o.jsx)(p,{preset:c.dawn}),(0,o.jsx)(p,{preset:c.dusk}),(0,o.jsx)(p,{preset:c.sunrise})]}),"\n",(0,o.jsx)(l.hr,{}),"\n",(0,o.jsx)(l.h2,{id:"props",children:"Props"}),"\n",(0,o.jsx)(s.Z,{properties:[...(0,a.oD)("Hairball",["colors"]),{name:"preset",type:Object.keys(c).map((e=>`'${e}'`)).join(" | "),default:"undefined",description:"The preset color schema to use. Please see Preset section for more information."},{name:"colors",type:"{fillColor1: string, fillColor2: string, fillColor3:string, fillColor4:string}",default:"undefined",description:"An objects of colors to use in given structure. If this prop is provided, the preset prop will be ignored."}]}),"\n",(0,o.jsx)(l.h2,{id:"presets",children:"Presets"}),"\n",(0,o.jsx)(l.p,{children:"The following presets are available:"}),"\n",(0,o.jsxs)("table",{children:[(0,o.jsx)("thead",{children:(0,o.jsxs)("tr",{children:[(0,o.jsx)("th",{children:"Preset"}),(0,o.jsx)("th",{children:"Colors"}),(0,o.jsx)("th",{children:"Name"})]})}),(0,o.jsx)("tbody",{children:Object.keys(d).map(((e,r)=>(0,o.jsxs)(l.tr,{children:[(0,o.jsx)(l.td,{children:e}),(0,o.jsx)(l.td,{children:(0,o.jsxs)(l.div,{style:{display:"flex"},children:[(0,o.jsx)(l.div,{style:{backgroundColor:d[e].fillColor1,width:"20px",height:"20px"}}),(0,o.jsx)(l.div,{style:{backgroundColor:d[e].fillColor2,width:"20px",height:"20px"}}),(0,o.jsx)(l.div,{style:{backgroundColor:d[e].fillColor3,width:"20px",height:"20px"}}),(0,o.jsx)(l.div,{style:{backgroundColor:d[e].fillColor4,width:"20px",height:"20px"}})]})}),(0,o.jsx)(l.td,{children:`preset={HairballPreset.${e}}`})]},e)))})]}),"\n",(0,o.jsxs)(l.p,{children:["Each preset corresponds to a unique color schema. You can use these presets to easily change the color scheme of the Hairball component. Simply pass the name of the preset to the ",(0,o.jsx)(l.code,{children:"preset"})," prop of the Hairball component, like this: ",(0,o.jsx)(l.code,{children:""}),"."]}),"\n",(0,o.jsx)(l.hr,{}),"\n",(0,o.jsx)(l.h2,{id:"custom-colors",children:"Custom Colors"}),"\n",(0,o.jsxs)(l.p,{children:["You can also pass your own colors to the Hairball component. To do this, pass an object to the ",(0,o.jsx)(l.code,{children:"colors"})," prop of the Hairball component, like this:"]}),"\n",(0,o.jsx)(p,{colors:{fillColor1:"#ff0000",fillColor2:"#00ff00",fillColor3:"#0000ff",fillColor4:"#ffff00"}}),"\n",(0,o.jsx)(l.pre,{children:(0,o.jsx)(l.code,{className:"language-jsx",children:"\n"})}),"\n",(0,o.jsxs)(l.p,{children:["The ",(0,o.jsx)(l.code,{children:"colors"})," prop takes an object with the following properties:"]}),"\n",(0,o.jsxs)(l.ul,{children:["\n",(0,o.jsxs)(l.li,{children:[(0,o.jsx)(l.code,{children:"fillColor1"})," - The color of the first fill."]}),"\n",(0,o.jsxs)(l.li,{children:[(0,o.jsx)(l.code,{children:"fillColor2"})," - The color of the second fill."]}),"\n",(0,o.jsxs)(l.li,{children:[(0,o.jsx)(l.code,{children:"fillColor3"})," - The color of the third fill."]}),"\n",(0,o.jsxs)(l.li,{children:[(0,o.jsx)(l.code,{children:"fillColor4"})," - The color of the fourth fill."]}),"\n"]})]})}function j(e={}){const{wrapper:l}={...(0,i.a)(),...e.components};return l?(0,o.jsx)(l,{...e,children:(0,o.jsx)(C,{...e})}):C(e)}},5888:(e,l,r)=>{r.d(l,{oD:()=>t});const o=e=>({height:`Specifies the height of the ${e} SVG. For additional customization, employ the wrapper className.`,width:`Specifies the width of the ${e} SVG. For further customization, utilize the wrapper className.`,colors:`Defines the colors of the ${e} SVG. Accepts multiple color objects. If a comprehensive list of colors is not provided, defaults will be applied. Refer to the example.`,color:`Sets the color of the ${e} SVG.`,ariaLabel:`Specifies the Aria label of the ${e}. This label will be applied to the aria-label attribute in the wrapper element.`,wrapperStyle:"Applies styles to the wrapper. It should be a valid CSS object and can be used for custom styling, overriding the default style.",wrapperClass:"Assigns a className to the wrapper for custom styling, overriding the default style.",visible:`Controls the visibility of the ${e}. If set to false, the ${e} will not be rendered.`,radius:`Determines the radius of the circle(s) in the ${e} component. For further customization, use the wrapper className.`}),i={height:"number | string",width:"number | string",colors:"Array",color:"string: #hex-code",secondaryColor:"string: #hex-code",ariaLabel:"string",wrapperStyle:"object",wrapperClass:"string",visible:"boolean",radius:"number | string",strokeWidth:"number | string",strokeColor:"string"},s=e=>({height:"80",width:"80",color:"#4fa94d",secondaryColor:"#4fa94d",ariaLabel:`${e}-loading`,wrapperStyle:JSON.stringify({},null,2),wrapperClass:"undefined",visible:"true"}),t=function(e,l){return void 0===l&&(l=[]),[{name:"height",type:i.height,default:s(e).height,description:o(e).height},{name:"width",type:i.width,default:s(e).width,description:o(e).width},{name:"colors",type:i.colors,default:JSON.stringify(["#4fa94d","#4fa94d","#4fa94d"]),description:o(e).colors},{name:"ariaLabel",type:i.ariaLabel,default:s(e).ariaLabel,description:o(e).ariaLabel},{name:"wrapperStyle",type:i.wrapperStyle,default:s(e).wrapperStyle,description:o(e).wrapperStyle},{name:"wrapperClass",type:i.wrapperClass,default:s(e).wrapperClass,description:o(e).wrapperClass},{name:"visible",type:i.visible,default:s(e).visible,description:o(e).visible}].filter((e=>!l.includes(e.name)))}},9789:(e,l,r)=>{r.d(l,{d:()=>i,y:()=>o});const o={sunset:"sunset",ocean:"ocean",forest:"forest",twilight:"twilight",dawn:"dawn",dusk:"dusk",midday:"midday",midnight:"midnight",sunrise:"sunrise",rainbow:"rainbow"},i={[o.sunset]:{fillColor1:"#e15b64",fillColor2:"#f47e60",fillColor3:"#f8b26a",fillColor4:"#abbd81"},[o.ocean]:{fillColor1:"#3498db",fillColor2:"#2ecc71",fillColor3:"#1abc9c",fillColor4:"#9b59b6"},[o.forest]:{fillColor1:"#27ae60",fillColor2:"#16a085",fillColor3:"#f39c12",fillColor4:"#d35400"},[o.twilight]:{fillColor1:"#8e44ad",fillColor2:"#c0392b",fillColor3:"#d35400",fillColor4:"#f39c12"},[o.dawn]:{fillColor1:"#c0392b",fillColor2:"#d35400",fillColor3:"#f39c12",fillColor4:"#16a085"},[o.dusk]:{fillColor1:"#9b59b6",fillColor2:"#34495e",fillColor3:"#16a085",fillColor4:"#27ae60"},[o.midday]:{fillColor1:"#2ecc71",fillColor2:"#3498db",fillColor3:"#9b59b6",fillColor4:"#34495e"},[o.midnight]:{fillColor1:"#34495e",fillColor2:"#16a085",fillColor3:"#27ae60",fillColor4:"#8e44ad"},[o.sunrise]:{fillColor1:"#f1c40f",fillColor2:"#e67e22",fillColor3:"#e74c3c",fillColor4:"#ecf0f1"},[o.rainbow]:{fillColor1:"#16a085",fillColor2:"#27ae60",fillColor3:"#3498db",fillColor4:"#8e44ad"}}}}]); \ No newline at end of file diff --git a/assets/js/e7d113e3.994593c3.js b/assets/js/e7d113e3.994593c3.js new file mode 100644 index 0000000..020f1a7 --- /dev/null +++ b/assets/js/e7d113e3.994593c3.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[5817],{4058:(e,l,r)=>{r.r(l),r.d(l,{assets:()=>x,contentTitle:()=>u,default:()=>C,frontMatter:()=>f,metadata:()=>m,toc:()=>b});var o=r(5893),i=r(1151),s=r(5305),t=r(1992),n=r(5888),a=(r(7294),r(9789));const d=a.d.sunset,c=a.y,h=a.d,p=e=>{let{height:l=100,width:r=100,wrapperClass:i="",wrapperStyle:s={},visible:t=!0,background:n="transparent",colors:c=d,speedInSecond:h=1,preset:p}=e;if(!t)return null;const{fillColor1:f,fillColor2:u,fillColor3:m,fillColor4:x}=p?a.d?.[p]??c:c;return(0,o.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",style:{margin:"auto",background:n,display:"block",...s},width:r,height:l,viewBox:"0 0 100 100",className:i,preserveAspectRatio:"xMidYMid","data-testid":"whirl",children:(0,o.jsx)("g",{transform:"translate(50,50)",children:(0,o.jsx)("g",{transform:"scale(0.8)",children:(0,o.jsx)("g",{transform:"translate(-50,-50)",children:(0,o.jsxs)("g",{children:[(0,o.jsx)("animateTransform",{attributeName:"transform",type:"rotate",repeatCount:"indefinite",values:"360 50 50;0 50 50",keyTimes:"0;1",dur:`${h}s`,keySplines:"0.5 0.5 0.5 0.5",calcMode:"spline"}),(0,o.jsx)("path",{fill:f,d:"M52.5,5c-0.8,0-1.7,0.1-2.5,0.1c9,1.2,16,10.8,16,22.4s-7,21.1-16,22.4c0.8,0.1,1.7,0.1,2.5,0.1 C64.9,50,75,39.9,75,27.5S64.9,5,52.5,5z"}),(0,o.jsx)("path",{fill:u,d:"M83.6,19.9c-0.6-0.6-1.2-1.2-1.9-1.7c5.5,7.2,3.7,18.9-4.5,27.1s-19.9,10-27.1,4.5c0.5,0.6,1.1,1.3,1.7,1.9 c8.8,8.8,23,8.8,31.8,0S92.4,28.7,83.6,19.9z"}),(0,o.jsx)("path",{fill:m,d:"M95,52.5c0-0.8-0.1-1.7-0.1-2.5c-1.2,9-10.8,16-22.4,16s-21.1-7-22.4-16c-0.1,0.8-0.1,1.7-0.1,2.5 C50,64.9,60.1,75,72.5,75S95,64.9,95,52.5z"}),(0,o.jsx)("path",{fill:x,d:"M80.1,83.6c0.6-0.6,1.2-1.2,1.7-1.9c-7.2,5.5-18.9,3.7-27.1-4.5s-10-19.9-4.5-27.1c-0.6,0.5-1.3,1.1-1.9,1.7 c-8.8,8.8-8.8,23,0,31.8S71.3,92.4,80.1,83.6z"}),(0,o.jsx)("path",{fill:f,d:"M47.5,95c0.8,0,1.7-0.1,2.5-0.1c-9-1.2-16-10.8-16-22.4s7-21.1,16-22.4c-0.8-0.1-1.7-0.1-2.5-0.1 C35.1,50,25,60.1,25,72.5S35.1,95,47.5,95z"}),(0,o.jsx)("path",{fill:u,d:"M16.4,80.1c0.6,0.6,1.2,1.2,1.9,1.7c-5.5-7.2-3.7-18.9,4.5-27.1s19.9-10,27.1-4.5c-0.5-0.6-1.1-1.3-1.7-1.9 c-8.8-8.8-23-8.8-31.8,0S7.6,71.3,16.4,80.1z"}),(0,o.jsx)("path",{fill:m,d:"M5,47.5c0,0.8,0.1,1.7,0.1,2.5c1.2-9,10.8-16,22.4-16s21.1,7,22.4,16c0.1-0.8,0.1-1.7,0.1-2.5 C50,35.1,39.9,25,27.5,25S5,35.1,5,47.5z"}),(0,o.jsx)("path",{fill:x,d:"M19.9,16.4c-0.6,0.6-1.2,1.2-1.7,1.9c7.2-5.5,18.9-3.7,27.1,4.5s10,19.9,4.5,27.1c0.6-0.5,1.3-1.1,1.9-1.7 c8.8-8.8,8.8-23,0-31.8S28.7,7.6,19.9,16.4z"})]})})})})})},f={},u="Whirl",m={id:"experimental/whirl",title:"Whirl",description:")\n",scope:{Whirl:p},noInline:!0,children:[(0,o.jsx)(t.i5,{}),(0,o.jsx)("br",{}),(0,o.jsx)(t.uz,{}),(0,o.jsx)(t.IF,{})]}),"\n",(0,o.jsx)(l.hr,{}),"\n",(0,o.jsx)(l.h2,{id:"more-example",children:"More Example:"}),"\n",(0,o.jsxs)(l.p,{children:["Here are some more examples of the Whirl component using different presets. It\nis recommended that you use the presets, as they are designed to work well with\nthe Whirl component. However, you can also pass your own colors to the Whirl\ncomponent. See the ",(0,o.jsx)(l.code,{children:"colors"})," props section for more information."]}),"\n",(0,o.jsxs)("div",{style:{display:"flex"},children:[(0,o.jsx)(p,{}),(0,o.jsx)(p,{speedInSecond:1,preset:c.midnight}),(0,o.jsx)(p,{speedInSecond:2,preset:c.midday}),(0,o.jsx)(p,{speedInSecond:3,preset:c.rainbow}),(0,o.jsx)(p,{speedInSecond:4,preset:c.forest}),(0,o.jsx)(p,{speedInSecond:5,preset:c.dawn}),(0,o.jsx)(p,{speedInSecond:6,preset:c.dusk}),(0,o.jsx)(p,{speedInSecond:7,preset:c.sunrise})]}),"\n",(0,o.jsx)(l.h2,{id:"props",children:"Props"}),"\n",(0,o.jsx)(s.Z,{properties:[...(0,n.oD)("Whirl",["colors","color"]),{name:"preset",type:Object.keys(c).map((e=>`'${e}'`)).join(" | "),default:"undefined",description:"The preset to use for the Whirl component. See the presets section for more information."},{name:"speedInSecond",type:"number",default:"1",description:"The speed of the whirl in seconds. The higher the number, the slower the whirl."},{name:"colors",type:"object",default:"undefined",description:"An object containing the colors to use for the Whirl component. See the custom colors section for more information."}]}),"\n",(0,o.jsx)(l.h2,{id:"presets",children:"Presets"}),"\n",(0,o.jsx)(l.hr,{}),"\n",(0,o.jsx)(l.p,{children:"The following presets are available:"}),"\n",(0,o.jsxs)("table",{children:[(0,o.jsx)("thead",{children:(0,o.jsxs)("tr",{children:[(0,o.jsx)("th",{children:"Preset"}),(0,o.jsx)("th",{children:"Colors"}),(0,o.jsx)("th",{children:"Name"})]})}),(0,o.jsx)("tbody",{children:Object.keys(c).map((e=>(0,o.jsxs)(l.tr,{children:[console.log(h[e]),(0,o.jsx)(l.td,{children:e}),(0,o.jsx)(l.td,{children:(0,o.jsxs)(l.div,{style:{display:"flex"},children:[(0,o.jsx)(l.div,{style:{backgroundColor:h[e].fillColor1,width:"20px",height:"20px"}}),(0,o.jsx)(l.div,{style:{backgroundColor:h[e].fillColor2,width:"20px",height:"20px"}}),(0,o.jsx)(l.div,{style:{backgroundColor:h[e].fillColor3,width:"20px",height:"20px"}}),(0,o.jsx)(l.div,{style:{backgroundColor:h[e].fillColor4,width:"20px",height:"20px"}})]})}),(0,o.jsx)(l.td,{children:`preset={WhirlPreset.${e}}`})]},e)))})]}),"\n",(0,o.jsxs)(l.p,{children:["Each preset corresponds to a unique color schema. You can use these presets to easily change the color scheme of the Hairball component. Simply pass the name of the preset to the ",(0,o.jsx)(l.code,{children:"preset"})," prop of the Hairball component, like this: ",(0,o.jsx)(l.code,{children:""}),"."]}),"\n",(0,o.jsx)(l.hr,{}),"\n",(0,o.jsx)(l.h2,{id:"custom-colors",children:"Custom Colors"}),"\n",(0,o.jsxs)(l.p,{children:["You can also pass your own colors to the Hairball component. To do this, pass an object to the ",(0,o.jsx)(l.code,{children:"colors"})," prop of the Hairball component, like this:"]}),"\n",(0,o.jsx)(p,{colors:{fillColor1:"#ff0000",fillColor2:"#00ff00",fillColor3:"#0000ff",fillColor4:"#ffff00"},speedInSecond:3}),"\n",(0,o.jsx)(l.pre,{children:(0,o.jsx)(l.code,{className:"language-jsx",children:"\n"})}),"\n",(0,o.jsxs)(l.p,{children:["The ",(0,o.jsx)(l.code,{children:"colors"})," prop takes an object with the following properties:"]}),"\n",(0,o.jsxs)(l.ul,{children:["\n",(0,o.jsxs)(l.li,{children:[(0,o.jsx)(l.code,{children:"fillColor1"})," - The color of the first fill."]}),"\n",(0,o.jsxs)(l.li,{children:[(0,o.jsx)(l.code,{children:"fillColor2"})," - The color of the second fill."]}),"\n",(0,o.jsxs)(l.li,{children:[(0,o.jsx)(l.code,{children:"fillColor3"})," - The color of the third fill."]}),"\n",(0,o.jsxs)(l.li,{children:[(0,o.jsx)(l.code,{children:"fillColor4"})," - The color of the fourth fill."]}),"\n"]})]})}function C(e={}){const{wrapper:l}={...(0,i.a)(),...e.components};return l?(0,o.jsx)(l,{...e,children:(0,o.jsx)(j,{...e})}):j(e)}},5888:(e,l,r)=>{r.d(l,{oD:()=>t});const o=e=>({height:`Specifies the height of the ${e} SVG. For additional customization, employ the wrapper className.`,width:`Specifies the width of the ${e} SVG. For further customization, utilize the wrapper className.`,colors:`Defines the colors of the ${e} SVG. Accepts multiple color objects. If a comprehensive list of colors is not provided, defaults will be applied. Refer to the example.`,color:`Sets the color of the ${e} SVG.`,ariaLabel:`Specifies the Aria label of the ${e}. This label will be applied to the aria-label attribute in the wrapper element.`,wrapperStyle:"Applies styles to the wrapper. It should be a valid CSS object and can be used for custom styling, overriding the default style.",wrapperClass:"Assigns a className to the wrapper for custom styling, overriding the default style.",visible:`Controls the visibility of the ${e}. If set to false, the ${e} will not be rendered.`,radius:`Determines the radius of the circle(s) in the ${e} component. For further customization, use the wrapper className.`}),i={height:"number | string",width:"number | string",colors:"Array",color:"string: #hex-code",secondaryColor:"string: #hex-code",ariaLabel:"string",wrapperStyle:"object",wrapperClass:"string",visible:"boolean",radius:"number | string",strokeWidth:"number | string",strokeColor:"string"},s=e=>({height:"80",width:"80",color:"#4fa94d",secondaryColor:"#4fa94d",ariaLabel:`${e}-loading`,wrapperStyle:JSON.stringify({},null,2),wrapperClass:"undefined",visible:"true"}),t=function(e,l){return void 0===l&&(l=[]),[{name:"height",type:i.height,default:s(e).height,description:o(e).height},{name:"width",type:i.width,default:s(e).width,description:o(e).width},{name:"colors",type:i.colors,default:JSON.stringify(["#4fa94d","#4fa94d","#4fa94d"]),description:o(e).colors},{name:"ariaLabel",type:i.ariaLabel,default:s(e).ariaLabel,description:o(e).ariaLabel},{name:"wrapperStyle",type:i.wrapperStyle,default:s(e).wrapperStyle,description:o(e).wrapperStyle},{name:"wrapperClass",type:i.wrapperClass,default:s(e).wrapperClass,description:o(e).wrapperClass},{name:"visible",type:i.visible,default:s(e).visible,description:o(e).visible}].filter((e=>!l.includes(e.name)))}},9789:(e,l,r)=>{r.d(l,{d:()=>i,y:()=>o});const o={sunset:"sunset",ocean:"ocean",forest:"forest",twilight:"twilight",dawn:"dawn",dusk:"dusk",midday:"midday",midnight:"midnight",sunrise:"sunrise",rainbow:"rainbow"},i={[o.sunset]:{fillColor1:"#e15b64",fillColor2:"#f47e60",fillColor3:"#f8b26a",fillColor4:"#abbd81"},[o.ocean]:{fillColor1:"#3498db",fillColor2:"#2ecc71",fillColor3:"#1abc9c",fillColor4:"#9b59b6"},[o.forest]:{fillColor1:"#27ae60",fillColor2:"#16a085",fillColor3:"#f39c12",fillColor4:"#d35400"},[o.twilight]:{fillColor1:"#8e44ad",fillColor2:"#c0392b",fillColor3:"#d35400",fillColor4:"#f39c12"},[o.dawn]:{fillColor1:"#c0392b",fillColor2:"#d35400",fillColor3:"#f39c12",fillColor4:"#16a085"},[o.dusk]:{fillColor1:"#9b59b6",fillColor2:"#34495e",fillColor3:"#16a085",fillColor4:"#27ae60"},[o.midday]:{fillColor1:"#2ecc71",fillColor2:"#3498db",fillColor3:"#9b59b6",fillColor4:"#34495e"},[o.midnight]:{fillColor1:"#34495e",fillColor2:"#16a085",fillColor3:"#27ae60",fillColor4:"#8e44ad"},[o.sunrise]:{fillColor1:"#f1c40f",fillColor2:"#e67e22",fillColor3:"#e74c3c",fillColor4:"#ecf0f1"},[o.rainbow]:{fillColor1:"#16a085",fillColor2:"#27ae60",fillColor3:"#3498db",fillColor4:"#8e44ad"}}}}]); \ No newline at end of file diff --git a/assets/js/e7d113e3.af9e0517.js b/assets/js/e7d113e3.af9e0517.js deleted file mode 100644 index fb61888..0000000 --- a/assets/js/e7d113e3.af9e0517.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[5817],{4058:(e,l,r)=>{r.r(l),r.d(l,{assets:()=>x,contentTitle:()=>u,default:()=>b,frontMatter:()=>f,metadata:()=>m,toc:()=>j});var o=r(5893),i=r(1151),s=r(5305),t=r(1992),n=r(5888),a=(r(7294),r(9789));const d=a.d.sunset,c=a.y,h=a.d,p=e=>{let{height:l=100,width:r=100,wrapperClass:i="",wrapperStyle:s={},visible:t=!0,background:n="transparent",colors:c=d,speedInSecond:h=1,preset:p}=e;if(!t)return null;const{fillColor1:f,fillColor2:u,fillColor3:m,fillColor4:x}=p?a.d?.[p]??c:c;return(0,o.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",style:{margin:"auto",background:n,display:"block",...s},width:r,height:l,viewBox:"0 0 100 100",className:i,preserveAspectRatio:"xMidYMid","data-testid":"whirl",children:(0,o.jsx)("g",{transform:"translate(50,50)",children:(0,o.jsx)("g",{transform:"scale(0.8)",children:(0,o.jsx)("g",{transform:"translate(-50,-50)",children:(0,o.jsxs)("g",{children:[(0,o.jsx)("animateTransform",{attributeName:"transform",type:"rotate",repeatCount:"indefinite",values:"360 50 50;0 50 50",keyTimes:"0;1",dur:`${h}s`,keySplines:"0.5 0.5 0.5 0.5",calcMode:"spline"}),(0,o.jsx)("path",{fill:f,d:"M52.5,5c-0.8,0-1.7,0.1-2.5,0.1c9,1.2,16,10.8,16,22.4s-7,21.1-16,22.4c0.8,0.1,1.7,0.1,2.5,0.1 C64.9,50,75,39.9,75,27.5S64.9,5,52.5,5z"}),(0,o.jsx)("path",{fill:u,d:"M83.6,19.9c-0.6-0.6-1.2-1.2-1.9-1.7c5.5,7.2,3.7,18.9-4.5,27.1s-19.9,10-27.1,4.5c0.5,0.6,1.1,1.3,1.7,1.9 c8.8,8.8,23,8.8,31.8,0S92.4,28.7,83.6,19.9z"}),(0,o.jsx)("path",{fill:m,d:"M95,52.5c0-0.8-0.1-1.7-0.1-2.5c-1.2,9-10.8,16-22.4,16s-21.1-7-22.4-16c-0.1,0.8-0.1,1.7-0.1,2.5 C50,64.9,60.1,75,72.5,75S95,64.9,95,52.5z"}),(0,o.jsx)("path",{fill:x,d:"M80.1,83.6c0.6-0.6,1.2-1.2,1.7-1.9c-7.2,5.5-18.9,3.7-27.1-4.5s-10-19.9-4.5-27.1c-0.6,0.5-1.3,1.1-1.9,1.7 c-8.8,8.8-8.8,23,0,31.8S71.3,92.4,80.1,83.6z"}),(0,o.jsx)("path",{fill:f,d:"M47.5,95c0.8,0,1.7-0.1,2.5-0.1c-9-1.2-16-10.8-16-22.4s7-21.1,16-22.4c-0.8-0.1-1.7-0.1-2.5-0.1 C35.1,50,25,60.1,25,72.5S35.1,95,47.5,95z"}),(0,o.jsx)("path",{fill:u,d:"M16.4,80.1c0.6,0.6,1.2,1.2,1.9,1.7c-5.5-7.2-3.7-18.9,4.5-27.1s19.9-10,27.1-4.5c-0.5-0.6-1.1-1.3-1.7-1.9 c-8.8-8.8-23-8.8-31.8,0S7.6,71.3,16.4,80.1z"}),(0,o.jsx)("path",{fill:m,d:"M5,47.5c0,0.8,0.1,1.7,0.1,2.5c1.2-9,10.8-16,22.4-16s21.1,7,22.4,16c0.1-0.8,0.1-1.7,0.1-2.5 C50,35.1,39.9,25,27.5,25S5,35.1,5,47.5z"}),(0,o.jsx)("path",{fill:x,d:"M19.9,16.4c-0.6,0.6-1.2,1.2-1.7,1.9c7.2-5.5,18.9-3.7,27.1,4.5s10,19.9,4.5,27.1c0.6-0.5,1.3-1.1,1.9-1.7 c8.8-8.8,8.8-23,0-31.8S28.7,7.6,19.9,16.4z"})]})})})})})},f={},u="Whirl",m={id:"experimental/whirl",title:"Whirl",description:")\n",scope:{Whirl:p},noInline:!0,children:[(0,o.jsx)(t.i5,{}),(0,o.jsx)("br",{}),(0,o.jsx)(t.uz,{}),(0,o.jsx)(t.IF,{})]}),"\n",(0,o.jsx)(l.hr,{}),"\n",(0,o.jsx)(l.h2,{id:"more-example",children:"More Example:"}),"\n",(0,o.jsxs)(l.p,{children:["Here are some more examples of the Whirl component using different presets. It\nis recommended that you use the presets, as they are designed to work well with\nthe Whirl component. However, you can also pass your own colors to the Whirl\ncomponent. See the ",(0,o.jsx)(l.code,{children:"colors"})," props section for more information."]}),"\n",(0,o.jsxs)("div",{style:{display:"flex"},children:[(0,o.jsx)(p,{}),(0,o.jsx)(p,{speedInSecond:1,preset:c.midnight}),(0,o.jsx)(p,{speedInSecond:2,preset:c.midday}),(0,o.jsx)(p,{speedInSecond:3,preset:c.rainbow}),(0,o.jsx)(p,{speedInSecond:4,preset:c.forest}),(0,o.jsx)(p,{speedInSecond:5,preset:c.dawn}),(0,o.jsx)(p,{speedInSecond:6,preset:c.dusk}),(0,o.jsx)(p,{speedInSecond:7,preset:c.sunrise})]}),"\n",(0,o.jsx)(l.h2,{id:"props",children:"Props"}),"\n",(0,o.jsx)(s.Z,{properties:[...(0,n.oD)("Whirl",["colors","color"]),{name:"preset",type:Object.keys(c).map((e=>`'${e}'`)).join(" | "),default:"undefined",description:"The preset to use for the Whirl component. See the presets section for more information."},{name:"speedInSecond",type:"number",default:"1",description:"The speed of the whirl in seconds. The higher the number, the slower the whirl."},{name:"colors",type:"object",default:"undefined",description:"An object containing the colors to use for the Whirl component. See the custom colors section for more information."}]}),"\n",(0,o.jsx)(l.h2,{id:"presets",children:"Presets"}),"\n",(0,o.jsx)(l.hr,{}),"\n",(0,o.jsx)(l.p,{children:"The following presets are available:"}),"\n",(0,o.jsxs)("table",{children:[(0,o.jsx)("thead",{children:(0,o.jsxs)("tr",{children:[(0,o.jsx)("th",{children:"Preset"}),(0,o.jsx)("th",{children:"Colors"}),(0,o.jsx)("th",{children:"Name"})]})}),(0,o.jsx)("tbody",{children:Object.keys(c).map((e=>(0,o.jsxs)(l.tr,{children:[console.log(h[e]),(0,o.jsx)(l.td,{children:e}),(0,o.jsx)(l.td,{children:(0,o.jsxs)(l.div,{style:{display:"flex"},children:[(0,o.jsx)(l.div,{style:{backgroundColor:h[e].fillColor1,width:"20px",height:"20px"}}),(0,o.jsx)(l.div,{style:{backgroundColor:h[e].fillColor2,width:"20px",height:"20px"}}),(0,o.jsx)(l.div,{style:{backgroundColor:h[e].fillColor3,width:"20px",height:"20px"}}),(0,o.jsx)(l.div,{style:{backgroundColor:h[e].fillColor4,width:"20px",height:"20px"}})]})}),(0,o.jsx)(l.td,{children:`preset={WhirlPreset.${e}}`})]},e)))})]}),"\n",(0,o.jsxs)(l.p,{children:["Each preset corresponds to a unique color schema. You can use these presets to easily change the color scheme of the Hairball component. Simply pass the name of the preset to the ",(0,o.jsx)(l.code,{children:"preset"})," prop of the Hairball component, like this: ",(0,o.jsx)(l.code,{children:""}),"."]}),"\n",(0,o.jsx)(l.hr,{}),"\n",(0,o.jsx)(l.h2,{id:"custom-colors",children:"Custom Colors"}),"\n",(0,o.jsxs)(l.p,{children:["You can also pass your own colors to the Hairball component. To do this, pass an object to the ",(0,o.jsx)(l.code,{children:"colors"})," prop of the Hairball component, like this:"]}),"\n",(0,o.jsx)(p,{colors:{fillColor1:"#ff0000",fillColor2:"#00ff00",fillColor3:"#0000ff",fillColor4:"#ffff00"},speedInSecond:3}),"\n",(0,o.jsx)(l.pre,{children:(0,o.jsx)(l.code,{className:"language-jsx",children:"\n"})}),"\n",(0,o.jsxs)(l.p,{children:["The ",(0,o.jsx)(l.code,{children:"colors"})," prop takes an object with the following properties:"]}),"\n",(0,o.jsxs)(l.ul,{children:["\n",(0,o.jsxs)(l.li,{children:[(0,o.jsx)(l.code,{children:"fillColor1"})," - The color of the first fill."]}),"\n",(0,o.jsxs)(l.li,{children:[(0,o.jsx)(l.code,{children:"fillColor2"})," - The color of the second fill."]}),"\n",(0,o.jsxs)(l.li,{children:[(0,o.jsx)(l.code,{children:"fillColor3"})," - The color of the third fill."]}),"\n",(0,o.jsxs)(l.li,{children:[(0,o.jsx)(l.code,{children:"fillColor4"})," - The color of the fourth fill."]}),"\n"]})]})}function b(e={}){const{wrapper:l}={...(0,i.a)(),...e.components};return l?(0,o.jsx)(l,{...e,children:(0,o.jsx)(C,{...e})}):C(e)}},5888:(e,l,r)=>{r.d(l,{oD:()=>t});const o=e=>({height:`Specifies the height of the ${e} SVG. For additional customization, employ the wrapper className.`,width:`Specifies the width of the ${e} SVG. For further customization, utilize the wrapper className.`,colors:`Defines the colors of the ${e} SVG. Accepts multiple color objects. If a comprehensive list of colors is not provided, defaults will be applied. Refer to the example.`,color:`Sets the color of the ${e} SVG.`,ariaLabel:`Specifies the Aria label of the ${e}. This label will be applied to the aria-label attribute in the wrapper element.`,wrapperStyle:"Applies styles to the wrapper. It should be a valid CSS object and can be used for custom styling, overriding the default style.",wrapperClass:"Assigns a className to the wrapper for custom styling, overriding the default style.",visible:`Controls the visibility of the ${e}. If set to false, the ${e} will not be rendered.`,radius:`Determines the radius of the circle(s) in the ${e} component. For further customization, use the wrapper className.`}),i={height:"number | string",width:"number | string",colors:"Array",color:"string: #hex-code",secondaryColor:"string: #hex-code",ariaLabel:"string",wrapperStyle:"object",wrapperClass:"string",visible:"boolean",radius:"number | string",strokeWidth:"number | string",strokeColor:"string"},s=e=>({height:"80",width:"80",color:"#4fa94d",secondaryColor:"#4fa94d",ariaLabel:`${e}-loading`,wrapperStyle:JSON.stringify({},null,2),wrapperClass:"undefined",visible:"true"}),t=function(e,l){return void 0===l&&(l=[]),[{name:"height",type:i.height,default:s(e).height,description:o(e).height},{name:"width",type:i.width,default:s(e).width,description:o(e).width},{name:"colors",type:i.colors,default:JSON.stringify(["#4fa94d","#4fa94d","#4fa94d"]),description:o(e).colors},{name:"ariaLabel",type:i.ariaLabel,default:s(e).ariaLabel,description:o(e).ariaLabel},{name:"wrapperStyle",type:i.wrapperStyle,default:s(e).wrapperStyle,description:o(e).wrapperStyle},{name:"wrapperClass",type:i.wrapperClass,default:s(e).wrapperClass,description:o(e).wrapperClass},{name:"visible",type:i.visible,default:s(e).visible,description:o(e).visible}].filter((e=>!l.includes(e.name)))}},9789:(e,l,r)=>{r.d(l,{d:()=>i,y:()=>o});const o={sunset:"sunset",ocean:"ocean",forest:"forest",twilight:"twilight",dawn:"dawn",dusk:"dusk",midday:"midday",midnight:"midnight",sunrise:"sunrise",rainbow:"rainbow"},i={[o.sunset]:{fillColor1:"#e15b64",fillColor2:"#f47e60",fillColor3:"#f8b26a",fillColor4:"#abbd81"},[o.ocean]:{fillColor1:"#3498db",fillColor2:"#2ecc71",fillColor3:"#1abc9c",fillColor4:"#9b59b6"},[o.forest]:{fillColor1:"#27ae60",fillColor2:"#16a085",fillColor3:"#f39c12",fillColor4:"#d35400"},[o.twilight]:{fillColor1:"#8e44ad",fillColor2:"#c0392b",fillColor3:"#d35400",fillColor4:"#f39c12"},[o.dawn]:{fillColor1:"#c0392b",fillColor2:"#d35400",fillColor3:"#f39c12",fillColor4:"#16a085"},[o.dusk]:{fillColor1:"#9b59b6",fillColor2:"#34495e",fillColor3:"#16a085",fillColor4:"#27ae60"},[o.midday]:{fillColor1:"#2ecc71",fillColor2:"#3498db",fillColor3:"#9b59b6",fillColor4:"#34495e"},[o.midnight]:{fillColor1:"#34495e",fillColor2:"#16a085",fillColor3:"#27ae60",fillColor4:"#8e44ad"},[o.sunrise]:{fillColor1:"#f1c40f",fillColor2:"#e67e22",fillColor3:"#e74c3c",fillColor4:"#ecf0f1"},[o.rainbow]:{fillColor1:"#16a085",fillColor2:"#27ae60",fillColor3:"#3498db",fillColor4:"#8e44ad"}}}}]); \ No newline at end of file diff --git a/assets/js/runtime~main.50141424.js b/assets/js/runtime~main.d1b858aa.js similarity index 60% rename from assets/js/runtime~main.50141424.js rename to assets/js/runtime~main.d1b858aa.js index 8e91127..5ddc72b 100644 --- a/assets/js/runtime~main.50141424.js +++ b/assets/js/runtime~main.d1b858aa.js @@ -1 +1 @@ -(()=>{"use strict";var e,a,d,f,t,r={},c={};function o(e){var a=c[e];if(void 0!==a)return a.exports;var d=c[e]={id:e,loaded:!1,exports:{}};return r[e].call(d.exports,d,d.exports,o),d.loaded=!0,d.exports}o.m=r,o.c=c,e=[],o.O=(a,d,f,t)=>{if(!d){var r=1/0;for(i=0;i=t)&&Object.keys(o.O).every((e=>o.O[e](d[n])))?d.splice(n--,1):(c=!1,t0&&e[i-1][2]>t;i--)e[i]=e[i-1];e[i]=[d,f,t]},o.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return o.d(a,{a:a}),a},d=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,o.t=function(e,f){if(1&f&&(e=this(e)),8&f)return e;if("object"==typeof e&&e){if(4&f&&e.__esModule)return e;if(16&f&&"function"==typeof e.then)return e}var t=Object.create(null);o.r(t);var r={};a=a||[null,d({}),d([]),d(d)];for(var c=2&f&&e;"object"==typeof c&&!~a.indexOf(c);c=d(c))Object.getOwnPropertyNames(c).forEach((a=>r[a]=()=>e[a]));return r.default=()=>e,o.d(t,r),t},o.d=(e,a)=>{for(var d in a)o.o(a,d)&&!o.o(e,d)&&Object.defineProperty(e,d,{enumerable:!0,get:a[d]})},o.f={},o.e=e=>Promise.all(Object.keys(o.f).reduce(((a,d)=>(o.f[d](e,a),a)),[])),o.u=e=>"assets/js/"+({53:"935f2afb",288:"d2e449c6",343:"7e6238c4",835:"d1e1070f",914:"1d1a202d",963:"ea5e7c81",1102:"e0179848",1199:"f255bc04",1212:"cf2298ba",1802:"d708e0fe",2387:"ed99fc8f",2424:"ffb38051",3071:"7d461cda",3237:"1df93b7f",3281:"455f4071",3284:"e8850f31",3500:"b09315e3",4368:"a94703ab",4402:"1025851d",4404:"057c4e7f",4844:"c4efebd0",5244:"a3c7ece9",5612:"3cca11bf",5653:"bd7a4b37",5817:"e7d113e3",5894:"93f782fd",6030:"dd4cad61",6582:"3af35e7b",6618:"db75658b",6938:"075da891",7474:"30dc16e3",7687:"1c6fd88f",7797:"6fa92755",7918:"17896441",7991:"fa02a251",8051:"1308ec5d",8331:"f1f68d4f",8518:"a7bd4aaa",8592:"common",8873:"dc2c1838",9147:"5cf51f92",9425:"31db0c59",9459:"9185a931",9661:"5e95c892",9671:"0e384e19",9817:"14eb3368",9820:"54927c76",9951:"09d1618d",9958:"3ef44aaa"}[e]||e)+"."+{53:"e44476c6",103:"4e8a50a9",288:"7d75be47",343:"719452e4",835:"560d4266",914:"73497dba",963:"7df9a464",1102:"4d605c8f",1199:"509f1b39",1212:"2a1ce962",1772:"9ec2822e",1802:"890655f0",2387:"a428751a",2424:"d0212d71",3071:"20bced60",3237:"417122eb",3281:"06f3de9d",3284:"8bbef406",3500:"f63f8da5",4368:"05d03d93",4402:"d2a9204d",4404:"bd871858",4844:"5bc6fc82",5244:"61a4265e",5612:"92eaf6a0",5653:"9496100c",5817:"af9e0517",5894:"164bf5f7",6030:"0c9865a3",6582:"4374b9e6",6618:"335df768",6938:"ef22e4a9",7474:"bd4e0f92",7687:"0fa9b78e",7797:"fa7b387d",7918:"7c25f754",7991:"71aa78d7",8051:"05ccd2d0",8331:"1b0af46c",8518:"f93b23a7",8592:"9da3999d",8873:"f96429b4",9147:"2b5132a6",9425:"fcd6d2ba",9459:"5a2b5de3",9661:"638d5986",9671:"72e1fc4b",9817:"0eeb4e7b",9820:"93f21ede",9951:"0ac49df8",9958:"7876f69d"}[e]+".js",o.miniCssF=e=>{},o.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),o.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),f={},t="docs:",o.l=(e,a,d,r)=>{if(f[e])f[e].push(a);else{var c,n;if(void 0!==d)for(var b=document.getElementsByTagName("script"),i=0;i{c.onerror=c.onload=null,clearTimeout(s);var t=f[e];if(delete f[e],c.parentNode&&c.parentNode.removeChild(c),t&&t.forEach((e=>e(d))),a)return a(d)},s=setTimeout(u.bind(null,void 0,{type:"timeout",target:c}),12e4);c.onerror=u.bind(null,c.onerror),c.onload=u.bind(null,c.onload),n&&document.head.appendChild(c)}},o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.nmd=e=>(e.paths=[],e.children||(e.children=[]),e),o.p="/react-loader-spinner/",o.gca=function(e){return e={17896441:"7918","935f2afb":"53",d2e449c6:"288","7e6238c4":"343",d1e1070f:"835","1d1a202d":"914",ea5e7c81:"963",e0179848:"1102",f255bc04:"1199",cf2298ba:"1212",d708e0fe:"1802",ed99fc8f:"2387",ffb38051:"2424","7d461cda":"3071","1df93b7f":"3237","455f4071":"3281",e8850f31:"3284",b09315e3:"3500",a94703ab:"4368","1025851d":"4402","057c4e7f":"4404",c4efebd0:"4844",a3c7ece9:"5244","3cca11bf":"5612",bd7a4b37:"5653",e7d113e3:"5817","93f782fd":"5894",dd4cad61:"6030","3af35e7b":"6582",db75658b:"6618","075da891":"6938","30dc16e3":"7474","1c6fd88f":"7687","6fa92755":"7797",fa02a251:"7991","1308ec5d":"8051",f1f68d4f:"8331",a7bd4aaa:"8518",common:"8592",dc2c1838:"8873","5cf51f92":"9147","31db0c59":"9425","9185a931":"9459","5e95c892":"9661","0e384e19":"9671","14eb3368":"9817","54927c76":"9820","09d1618d":"9951","3ef44aaa":"9958"}[e]||e,o.p+o.u(e)},(()=>{var e={1303:0,532:0};o.f.j=(a,d)=>{var f=o.o(e,a)?e[a]:void 0;if(0!==f)if(f)d.push(f[2]);else if(/^(1303|532)$/.test(a))e[a]=0;else{var t=new Promise(((d,t)=>f=e[a]=[d,t]));d.push(f[2]=t);var r=o.p+o.u(a),c=new Error;o.l(r,(d=>{if(o.o(e,a)&&(0!==(f=e[a])&&(e[a]=void 0),f)){var t=d&&("load"===d.type?"missing":d.type),r=d&&d.target&&d.target.src;c.message="Loading chunk "+a+" failed.\n("+t+": "+r+")",c.name="ChunkLoadError",c.type=t,c.request=r,f[1](c)}}),"chunk-"+a,a)}},o.O.j=a=>0===e[a];var a=(a,d)=>{var f,t,r=d[0],c=d[1],n=d[2],b=0;if(r.some((a=>0!==e[a]))){for(f in c)o.o(c,f)&&(o.m[f]=c[f]);if(n)var i=n(o)}for(a&&a(d);b{"use strict";var e,a,f,d,t,r={},c={};function o(e){var a=c[e];if(void 0!==a)return a.exports;var f=c[e]={id:e,loaded:!1,exports:{}};return r[e].call(f.exports,f,f.exports,o),f.loaded=!0,f.exports}o.m=r,o.c=c,e=[],o.O=(a,f,d,t)=>{if(!f){var r=1/0;for(i=0;i=t)&&Object.keys(o.O).every((e=>o.O[e](f[n])))?f.splice(n--,1):(c=!1,t0&&e[i-1][2]>t;i--)e[i]=e[i-1];e[i]=[f,d,t]},o.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return o.d(a,{a:a}),a},f=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,o.t=function(e,d){if(1&d&&(e=this(e)),8&d)return e;if("object"==typeof e&&e){if(4&d&&e.__esModule)return e;if(16&d&&"function"==typeof e.then)return e}var t=Object.create(null);o.r(t);var r={};a=a||[null,f({}),f([]),f(f)];for(var c=2&d&&e;"object"==typeof c&&!~a.indexOf(c);c=f(c))Object.getOwnPropertyNames(c).forEach((a=>r[a]=()=>e[a]));return r.default=()=>e,o.d(t,r),t},o.d=(e,a)=>{for(var f in a)o.o(a,f)&&!o.o(e,f)&&Object.defineProperty(e,f,{enumerable:!0,get:a[f]})},o.f={},o.e=e=>Promise.all(Object.keys(o.f).reduce(((a,f)=>(o.f[f](e,a),a)),[])),o.u=e=>"assets/js/"+({53:"935f2afb",288:"d2e449c6",343:"7e6238c4",835:"d1e1070f",914:"1d1a202d",963:"ea5e7c81",1102:"e0179848",1199:"f255bc04",1212:"cf2298ba",1802:"d708e0fe",2387:"ed99fc8f",2424:"ffb38051",3071:"7d461cda",3237:"1df93b7f",3281:"455f4071",3284:"e8850f31",3500:"b09315e3",4368:"a94703ab",4402:"1025851d",4404:"057c4e7f",4844:"c4efebd0",5244:"a3c7ece9",5612:"3cca11bf",5653:"bd7a4b37",5817:"e7d113e3",5894:"93f782fd",6030:"dd4cad61",6582:"3af35e7b",6618:"db75658b",6938:"075da891",7474:"30dc16e3",7687:"1c6fd88f",7797:"6fa92755",7918:"17896441",7991:"fa02a251",8051:"1308ec5d",8331:"f1f68d4f",8518:"a7bd4aaa",8592:"common",8873:"dc2c1838",9147:"5cf51f92",9425:"31db0c59",9459:"9185a931",9661:"5e95c892",9671:"0e384e19",9817:"14eb3368",9820:"54927c76",9951:"09d1618d",9958:"3ef44aaa"}[e]||e)+"."+{53:"e44476c6",103:"4e8a50a9",288:"7d75be47",343:"719452e4",835:"560d4266",914:"73497dba",963:"7df9a464",1102:"4d605c8f",1199:"509f1b39",1212:"2a1ce962",1772:"9ec2822e",1802:"890655f0",2387:"a428751a",2424:"d0212d71",3071:"20bced60",3237:"417122eb",3281:"06f3de9d",3284:"8bbef406",3500:"f63f8da5",4368:"05d03d93",4402:"d2a9204d",4404:"bd871858",4844:"5bc6fc82",5244:"61a4265e",5612:"92eaf6a0",5653:"99bff616",5817:"994593c3",5894:"164bf5f7",6030:"0c9865a3",6582:"4374b9e6",6618:"335df768",6938:"ef22e4a9",7474:"bd4e0f92",7687:"0fa9b78e",7797:"fa7b387d",7918:"7c25f754",7991:"71aa78d7",8051:"05ccd2d0",8331:"1b0af46c",8518:"f93b23a7",8592:"9da3999d",8873:"f96429b4",9147:"2b5132a6",9425:"fcd6d2ba",9459:"5a2b5de3",9661:"638d5986",9671:"72e1fc4b",9817:"0eeb4e7b",9820:"93f21ede",9951:"0ac49df8",9958:"7876f69d"}[e]+".js",o.miniCssF=e=>{},o.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),o.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),d={},t="docs:",o.l=(e,a,f,r)=>{if(d[e])d[e].push(a);else{var c,n;if(void 0!==f)for(var b=document.getElementsByTagName("script"),i=0;i{c.onerror=c.onload=null,clearTimeout(s);var t=d[e];if(delete d[e],c.parentNode&&c.parentNode.removeChild(c),t&&t.forEach((e=>e(f))),a)return a(f)},s=setTimeout(u.bind(null,void 0,{type:"timeout",target:c}),12e4);c.onerror=u.bind(null,c.onerror),c.onload=u.bind(null,c.onload),n&&document.head.appendChild(c)}},o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.nmd=e=>(e.paths=[],e.children||(e.children=[]),e),o.p="/react-loader-spinner/",o.gca=function(e){return e={17896441:"7918","935f2afb":"53",d2e449c6:"288","7e6238c4":"343",d1e1070f:"835","1d1a202d":"914",ea5e7c81:"963",e0179848:"1102",f255bc04:"1199",cf2298ba:"1212",d708e0fe:"1802",ed99fc8f:"2387",ffb38051:"2424","7d461cda":"3071","1df93b7f":"3237","455f4071":"3281",e8850f31:"3284",b09315e3:"3500",a94703ab:"4368","1025851d":"4402","057c4e7f":"4404",c4efebd0:"4844",a3c7ece9:"5244","3cca11bf":"5612",bd7a4b37:"5653",e7d113e3:"5817","93f782fd":"5894",dd4cad61:"6030","3af35e7b":"6582",db75658b:"6618","075da891":"6938","30dc16e3":"7474","1c6fd88f":"7687","6fa92755":"7797",fa02a251:"7991","1308ec5d":"8051",f1f68d4f:"8331",a7bd4aaa:"8518",common:"8592",dc2c1838:"8873","5cf51f92":"9147","31db0c59":"9425","9185a931":"9459","5e95c892":"9661","0e384e19":"9671","14eb3368":"9817","54927c76":"9820","09d1618d":"9951","3ef44aaa":"9958"}[e]||e,o.p+o.u(e)},(()=>{var e={1303:0,532:0};o.f.j=(a,f)=>{var d=o.o(e,a)?e[a]:void 0;if(0!==d)if(d)f.push(d[2]);else if(/^(1303|532)$/.test(a))e[a]=0;else{var t=new Promise(((f,t)=>d=e[a]=[f,t]));f.push(d[2]=t);var r=o.p+o.u(a),c=new Error;o.l(r,(f=>{if(o.o(e,a)&&(0!==(d=e[a])&&(e[a]=void 0),d)){var t=f&&("load"===f.type?"missing":f.type),r=f&&f.target&&f.target.src;c.message="Loading chunk "+a+" failed.\n("+t+": "+r+")",c.name="ChunkLoadError",c.type=t,c.request=r,d[1](c)}}),"chunk-"+a,a)}},o.O.j=a=>0===e[a];var a=(a,f)=>{var d,t,r=f[0],c=f[1],n=f[2],b=0;if(r.some((a=>0!==e[a]))){for(d in c)o.o(c,d)&&(o.m[d]=c[d]);if(n)var i=n(o)}for(a&&a(f);b Components | React Spinners - + diff --git a/docs/category/experimental-components/index.html b/docs/category/experimental-components/index.html index 94b0d0e..0cb17da 100644 --- a/docs/category/experimental-components/index.html +++ b/docs/category/experimental-components/index.html @@ -4,7 +4,7 @@ Experimental Components | React Spinners - + diff --git a/docs/components/audio/index.html b/docs/components/audio/index.html index c98b896..09db123 100644 --- a/docs/components/audio/index.html +++ b/docs/components/audio/index.html @@ -4,7 +4,7 @@ Audio | React Spinners - + diff --git a/docs/components/ball-triangle/index.html b/docs/components/ball-triangle/index.html index a4600cd..5625061 100644 --- a/docs/components/ball-triangle/index.html +++ b/docs/components/ball-triangle/index.html @@ -4,7 +4,7 @@ Ball Triangle | React Spinners - + diff --git a/docs/components/bars/index.html b/docs/components/bars/index.html index 08c4d0f..20054d5 100644 --- a/docs/components/bars/index.html +++ b/docs/components/bars/index.html @@ -4,7 +4,7 @@ Bars | React Spinners - + diff --git a/docs/components/blocks/index.html b/docs/components/blocks/index.html index e80555f..6a36b6b 100644 --- a/docs/components/blocks/index.html +++ b/docs/components/blocks/index.html @@ -4,7 +4,7 @@ Blocks | React Spinners - + diff --git a/docs/components/circles-with-bar/index.html b/docs/components/circles-with-bar/index.html index b0ba89e..53e7127 100644 --- a/docs/components/circles-with-bar/index.html +++ b/docs/components/circles-with-bar/index.html @@ -4,7 +4,7 @@ Circles With Bar | React Spinners - + diff --git a/docs/components/circles/index.html b/docs/components/circles/index.html index 1ba225f..2473c39 100644 --- a/docs/components/circles/index.html +++ b/docs/components/circles/index.html @@ -4,7 +4,7 @@ Circles | React Spinners - + diff --git a/docs/components/color-ring/index.html b/docs/components/color-ring/index.html index aa5f260..683e346 100644 --- a/docs/components/color-ring/index.html +++ b/docs/components/color-ring/index.html @@ -4,7 +4,7 @@ Color Ring | React Spinners - + diff --git a/docs/components/comment/index.html b/docs/components/comment/index.html index 33890a2..6b74ece 100644 --- a/docs/components/comment/index.html +++ b/docs/components/comment/index.html @@ -4,7 +4,7 @@ Comment | React Spinners - + diff --git a/docs/components/discuss/index.html b/docs/components/discuss/index.html index 79c4539..d9dc541 100644 --- a/docs/components/discuss/index.html +++ b/docs/components/discuss/index.html @@ -4,7 +4,7 @@ Discuss | React Spinners - + diff --git a/docs/components/dna/index.html b/docs/components/dna/index.html index cd76ec6..1588fbb 100644 --- a/docs/components/dna/index.html +++ b/docs/components/dna/index.html @@ -4,7 +4,7 @@ DNA | React Spinners - + diff --git a/docs/components/falling-lines/index.html b/docs/components/falling-lines/index.html index a504c5a..0c66cbd 100644 --- a/docs/components/falling-lines/index.html +++ b/docs/components/falling-lines/index.html @@ -4,7 +4,7 @@ Falling Lines | React Spinners - + diff --git a/docs/components/fidget-spinner/index.html b/docs/components/fidget-spinner/index.html index 0803a71..e6e0b4f 100644 --- a/docs/components/fidget-spinner/index.html +++ b/docs/components/fidget-spinner/index.html @@ -4,7 +4,7 @@ Fidget Spinner | React Spinners - + diff --git a/docs/components/grid/index.html b/docs/components/grid/index.html index f18d180..16cd1ed 100644 --- a/docs/components/grid/index.html +++ b/docs/components/grid/index.html @@ -4,7 +4,7 @@ Grid | React Spinners - + diff --git a/docs/components/hearts/index.html b/docs/components/hearts/index.html index 99215e4..cb5abb1 100644 --- a/docs/components/hearts/index.html +++ b/docs/components/hearts/index.html @@ -4,7 +4,7 @@ Hearts | React Spinners - + diff --git a/docs/components/hourglass/index.html b/docs/components/hourglass/index.html index 9f5ffad..2b1cbc8 100644 --- a/docs/components/hourglass/index.html +++ b/docs/components/hourglass/index.html @@ -4,7 +4,7 @@ Hourglass | React Spinners - + diff --git a/docs/components/infinity-spin/index.html b/docs/components/infinity-spin/index.html index dc74631..b460c15 100644 --- a/docs/components/infinity-spin/index.html +++ b/docs/components/infinity-spin/index.html @@ -4,7 +4,7 @@ Infinity Spin | React Spinners - + diff --git a/docs/components/line-wave/index.html b/docs/components/line-wave/index.html index aa375c3..8a3fdd7 100644 --- a/docs/components/line-wave/index.html +++ b/docs/components/line-wave/index.html @@ -4,7 +4,7 @@ LineWave | React Spinners - + diff --git a/docs/components/magnifying-glass/index.html b/docs/components/magnifying-glass/index.html index 208d303..a351cbc 100644 --- a/docs/components/magnifying-glass/index.html +++ b/docs/components/magnifying-glass/index.html @@ -4,7 +4,7 @@ MagnifyingGlass | React Spinners - + diff --git a/docs/components/mutating-dots/index.html b/docs/components/mutating-dots/index.html index 4be47ac..b67e4cc 100644 --- a/docs/components/mutating-dots/index.html +++ b/docs/components/mutating-dots/index.html @@ -4,7 +4,7 @@ Mutating Dots | React Spinners - + diff --git a/docs/components/oval/index.html b/docs/components/oval/index.html index bc0f3b3..c489848 100644 --- a/docs/components/oval/index.html +++ b/docs/components/oval/index.html @@ -4,7 +4,7 @@ Oval | React Spinners - + diff --git a/docs/components/progress-bar/index.html b/docs/components/progress-bar/index.html index 31c142f..db596d1 100644 --- a/docs/components/progress-bar/index.html +++ b/docs/components/progress-bar/index.html @@ -4,7 +4,7 @@ Progress Bar | React Spinners - + diff --git a/docs/components/puff/index.html b/docs/components/puff/index.html index da07c3b..1243d80 100644 --- a/docs/components/puff/index.html +++ b/docs/components/puff/index.html @@ -4,7 +4,7 @@ Puff | React Spinners - + diff --git a/docs/components/radio/index.html b/docs/components/radio/index.html index c3fb566..b211a84 100644 --- a/docs/components/radio/index.html +++ b/docs/components/radio/index.html @@ -4,7 +4,7 @@ Radio | React Spinners - + diff --git a/docs/components/revolving-dot/index.html b/docs/components/revolving-dot/index.html index 7e6fb03..f6b20a1 100644 --- a/docs/components/revolving-dot/index.html +++ b/docs/components/revolving-dot/index.html @@ -4,7 +4,7 @@ RevolvingDot | React Spinners - + diff --git a/docs/components/rings/index.html b/docs/components/rings/index.html index cc935c1..ddb9674 100644 --- a/docs/components/rings/index.html +++ b/docs/components/rings/index.html @@ -4,7 +4,7 @@ Rings | React Spinners - + diff --git a/docs/components/rotating-lines/index.html b/docs/components/rotating-lines/index.html index 28a1036..29a9664 100644 --- a/docs/components/rotating-lines/index.html +++ b/docs/components/rotating-lines/index.html @@ -4,7 +4,7 @@ Rotating Lines | React Spinners - + diff --git a/docs/components/rotating-square/index.html b/docs/components/rotating-square/index.html index c7dc620..8eec61e 100644 --- a/docs/components/rotating-square/index.html +++ b/docs/components/rotating-square/index.html @@ -4,7 +4,7 @@ Rotating Square | React Spinners - + diff --git a/docs/components/rotating-triangles/index.html b/docs/components/rotating-triangles/index.html index cd93ccc..4b329c7 100644 --- a/docs/components/rotating-triangles/index.html +++ b/docs/components/rotating-triangles/index.html @@ -4,7 +4,7 @@ Rotating Triangles | React Spinners - + diff --git a/docs/components/tail-spin/index.html b/docs/components/tail-spin/index.html index ddb7029..24cfc7e 100644 --- a/docs/components/tail-spin/index.html +++ b/docs/components/tail-spin/index.html @@ -4,7 +4,7 @@ Tail Spin | React Spinners - + diff --git a/docs/components/three-circles/index.html b/docs/components/three-circles/index.html index ae026c2..dff0464 100644 --- a/docs/components/three-circles/index.html +++ b/docs/components/three-circles/index.html @@ -4,7 +4,7 @@ Three Circles | React Spinners - + diff --git a/docs/components/three-dots/index.html b/docs/components/three-dots/index.html index c578cf2..ae9a62b 100644 --- a/docs/components/three-dots/index.html +++ b/docs/components/three-dots/index.html @@ -4,7 +4,7 @@ Three Dots | React Spinners - + diff --git a/docs/components/triangle/index.html b/docs/components/triangle/index.html index a8b4e02..e003aa4 100644 --- a/docs/components/triangle/index.html +++ b/docs/components/triangle/index.html @@ -4,7 +4,7 @@ Triangle | React Spinners - + diff --git a/docs/components/vortex/index.html b/docs/components/vortex/index.html index 3d1e3b9..7a15ad6 100644 --- a/docs/components/vortex/index.html +++ b/docs/components/vortex/index.html @@ -4,7 +4,7 @@ Vortex | React Spinners - + diff --git a/docs/components/watch/index.html b/docs/components/watch/index.html index d2dad2b..59ac968 100644 --- a/docs/components/watch/index.html +++ b/docs/components/watch/index.html @@ -4,7 +4,7 @@ Watch | React Spinners - + diff --git a/docs/experimental/hairball/index.html b/docs/experimental/hairball/index.html index 36269dc..d520b9e 100644 --- a/docs/experimental/hairball/index.html +++ b/docs/experimental/hairball/index.html @@ -4,13 +4,13 @@ Hairball | React Spinners - +

Hairball



-    // import { Hairball, HairballPreset } from 'react-loader-spinner';
+    // import { Hairball, HairballPreset } from 'react-loader-spinner/dist/beta';
 
       render(
         <Hairball
diff --git a/docs/experimental/whirl/index.html b/docs/experimental/whirl/index.html
index deb3f30..b5ce5cb 100644
--- a/docs/experimental/whirl/index.html
+++ b/docs/experimental/whirl/index.html
@@ -4,12 +4,15 @@
 
 
 Whirl | React Spinners
-
+
 
 
 
 
Whirl

 


+  // import { Hairball, HairballPreset } from 'react-loader-spinner/dist/beta';
+
+
   render(
     <Whirl
       preset='rainbow'
diff --git a/docs/intro/index.html b/docs/intro/index.html
index 27f8abd..e716571 100644
--- a/docs/intro/index.html
+++ b/docs/intro/index.html
@@ -4,7 +4,7 @@
 
 
 Welcome | React Spinners
-
+
 
 
 
diff --git a/index.html b/index.html
index 97efa33..74dc4f3 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
 
 
 Hello from React Spinners | React Spinners
-
+