trepur_components 1.0.60 → 2.1.0

package/README.md

@@ -1,11 +1,15 @@
 # Trepur Components
+
 Trepur compoments, the component store to many of my projects
 
 ## Available Scripts
+
 In the project directory, you can run:
 
 ### `npm run compile`
+
 compile the dist folder made from the lib directory as specified in the build script in package.json
 
 ### `npm publish`
+
 Publishes the new version of the package to npm - new version number to be updated in package.json before the publish is executed

package/dist/src/lib/components/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../../../src/lib/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,WAAW,MAAM,qCAAqC,CAAA;AAC7D,OAAO,UAAU,MAAM,YAAY,CAAA;AAUnC,MAAM,SAAS,GAAoB,CAAC,EAClC,EAAE,EACF,SAAS,EACT,KAAK,EACL,KAAK,GAAG,qBAAqB,EACvB,EAAe,EAAE;IACvB,OAAO,CACL,6BAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,KAAK,CAAC,IACjD,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,GAAG,CAAC,CAAC,IAAS,EAAE,CAAS,EAAE,EAAE;QACnC,OAAO,CACL,oBAAC,WAAW,kBACV,GAAG,EAAE,oBAAoB,CAAC,EAAE,IACxB,IAAI,GAEP,IAAI,CAAC,QAAQ,CACF,CACf,CAAA;IACH,CAAC,CAAC,CACE,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,SAAS,CAAA"}
+{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../../../src/lib/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,WAAW,MAAM,qCAAqC,CAAA;AAC7D,OAAO,UAAU,MAAM,YAAY,CAAA;AAUnC,MAAM,SAAS,GAAoB,CAAC,EAClC,EAAE,EACF,SAAS,EACT,KAAK,EACL,KAAK,GAAG,qBAAqB,EACvB,EAAe,EAAE;IACvB,OAAO,CACL,6BAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,KAAK,CAAC,IACjD,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,GAAG,CAAC,CAAC,IAAS,EAAE,CAAS,EAAE,EAAE;QACnC,OAAO,CACL,oBAAC,WAAW,kBAAC,GAAG,EAAE,oBAAoB,CAAC,EAAE,IAAM,IAAI,GAChD,IAAI,CAAC,QAAQ,CACF,CACf,CAAA;IACH,CAAC,CAAC,CACE,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,SAAS,CAAA"}

package/dist/src/lib/components/AlertBar/AlertBar.js

@@ -7,6 +7,8 @@ const AlertBar = ({ id, className, type = 'warning', text, leftIconProps, rightI
         state: 'open',
         display: true
     });
+    const iconLeft = leftIconProps != null && React.createElement(Icon, Object.assign({}, leftIconProps));
+    const iconRight = rightIconProps != null && React.createElement(Icon, Object.assign({}, rightIconProps));
     const bgColor = classNames({
         [style.success]: type === 'success',
         [style.warning]: type === 'warning',
@@ -21,7 +23,8 @@ const AlertBar = ({ id, className, type = 'warning', text, leftIconProps, rightI
     const classList = classNames(className, bgColor, alertBarState, [style.alertBar], theme, 'w-parent transition-opactiy');
     const textClassList = classNames({
         [style.textCenter]: textCenter,
-        [style.notTextCenter]: !textCenter
+        [style.textLeftWithIcon]: !textCenter && leftIconProps !== null,
+        [style.textLeft]: !textCenter && leftIconProps === null
     }, [style.textClassList]);
     const rightIconClasses = classNames({
         [style.dismissable]: isDismissable
@@ -31,28 +34,25 @@ const AlertBar = ({ id, className, type = 'warning', text, leftIconProps, rightI
             state: 'closed',
             display: alertBarStatus.display
         });
-        setTimeout(() => setAlertBarStatus({
-            state: 'closed',
-            display: false
-        }), 700);
+        setTimeout(() => {
+            setAlertBarStatus({
+                state: 'closed',
+                display: false
+            });
+        }, 700);
         if (onDismissClick != null) {
             onDismissClick(e);
         }
     };
-    const dismissIcon = (React.createElement(Icon, { type: 'multiply', colour: 'white' }));
-    const iconLeft = (leftIconProps != null) &&
-        React.createElement(Icon, Object.assign({}, leftIconProps));
-    const iconRight = (rightIconProps != null) &&
-        React.createElement(Icon, Object.assign({}, rightIconProps));
+    const dismissIcon = React.createElement(Icon, { type: 'multiply', colour: 'white' });
     return (React.createElement("div", { id: id, className: classList },
-        (leftIconProps != null) &&
-            React.createElement("span", { className: style.leftIconClassList }, iconLeft),
+        leftIconProps != null && (React.createElement("span", { className: style.leftIconClassList }, iconLeft)),
         React.createElement("h3", { className: textClassList }, text),
-        isDismissable &&
-            React.createElement("a", { className: rightIconClasses, onClick: (e) => closeAlertBar(e) },
-                React.createElement("span", null, dismissIcon)),
-        (iconRight != null) && !isDismissable &&
-            React.createElement("span", { className: rightIconClasses }, iconRight)));
+        isDismissable && (React.createElement("a", { className: rightIconClasses, onClick: (e) => {
+                closeAlertBar(e);
+            } },
+            React.createElement("span", null, dismissIcon))),
+        iconRight != null && !isDismissable && (React.createElement("span", { className: rightIconClasses }, iconRight))));
 };
 export default AlertBar;
 //# sourceMappingURL=AlertBar.js.map

package/dist/src/lib/components/AlertBar/AlertBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertBar.js","sourceRoot":"","sources":["../../../../../src/lib/components/AlertBar/AlertBar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"AlertBar.js","sourceRoot":"","sources":["../../../../../src/lib/components/AlertBar/AlertBar.tsx"],"names":[],"mappings":"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"}

package/dist/src/lib/components/AlertBar/style.module.css

@@ -28,7 +28,9 @@
 
 .rightIconClassList {
 
-    padding-left: 2rem;
+    position: absolute;
+
+    right: 0px;
 
     padding-right: 2rem;
 
@@ -37,6 +39,8 @@
 
 .leftIconClassList {
 
+    position: absolute;
+
     padding-top: 0.75rem;
 
     padding-left: 2rem
@@ -47,11 +51,16 @@
     text-align: center
 }
 
-.notTextCenter {
+.textLeft {
 
     padding-left: 1rem
 }
 
+.textLeftWithIcon {
+
+    padding-left: 5rem
+}
+
 .textClassList {
 
     width: 100%;
@@ -80,4 +89,5 @@
 
     background-color: var(--color-error)
 }
+
 /*# sourceMappingURL=style.module.css.map */

package/dist/src/lib/components/AlertBar/style.module.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/lib/components/AlertBar/style.module.css"],"names":[],"mappings":"AACI;;IAAA,aAAwC;;IAAxC,mBAAwC;;IAAxC,sBAAwC;;IAAxC,yBAAwC;;IAAxC;AAAwC;;AAIxC;;IAAA;AAAkB;;AAIlB;;IAAA;AAAgB;;AAIhB;;IAAA;AAAqB;;AAIrB;;IAAA,kBAAgB;;IAAhB,mBAAgB;;IAAhB;AAAgB;;AAIhB;;IAAA,oBAAgB;;IAAhB;AAAgB;;AAIhB;;IAAA;AAAkB;;AAIlB;;IAAA;AAAW;;AAIX;;IAAA,WAAkB;;IAAlB,oBAAkB;;IAAlB;AAAkB;;AAIlB;;IAAA;AAAiB;;AAIjB;;IAAA;AAAiB;;AAIjB;;IAAA;AAAoB;;AAIpB;;IAAA;AAAe","file":"style.module.css","sourcesContent":[".alertBar {\n    @apply text-white flex py-2 duration-700;\n}\n\n.visible {\n    @apply opacity-100;\n}\n\n.invisible {\n    @apply opacity-0;\n}\n\n.dismissable:hover {\n    @apply cursor-pointer;\n}\n\n.rightIconClassList {\n    @apply px-8 pt-3;\n}\n\n.leftIconClassList {\n    @apply pt-3 pl-8;\n}\n\n.textCenter {\n    @apply text-center;\n}\n\n.notTextCenter {\n    @apply pl-4;\n}\n\n.textClassList {\n    @apply w-full py-3;\n}\n\n.success {\n    @apply bg-success;\n}\n\n.warning {\n    @apply bg-warning;\n}\n\n.info {\n    @apply bg-info-light;\n}\n\n.error {\n    @apply bg-error;\n}"]}
+{"version":3,"sources":["../../../../../src/lib/components/AlertBar/style.module.css"],"names":[],"mappings":"AACE;;IAAA,aAAwC;;IAAxC,mBAAwC;;IAAxC,sBAAwC;;IAAxC,yBAAwC;;IAAxC;AAAwC;;AAIxC;;IAAA;AAAkB;;AAIlB;;IAAA;AAAgB;;AAIhB;;IAAA;AAAqB;;AAIrB;;IAAA,kBAAiC;;IAAjC,UAAiC;;IAAjC,mBAAiC;;IAAjC;AAAiC;;AAIjC;;IAAA,kBAAyB;;IAAzB,oBAAyB;;IAAzB;AAAyB;;AAIzB;;IAAA;AAAkB;;AAIlB;;IAAA;AAAW;;AAIX;;IAAA;AAAY;;AAIZ;;IAAA,WAAkB;;IAAlB,oBAAkB;;IAAlB;AAAkB;;AAIlB;;IAAA;AAAiB;;AAIjB;;IAAA;AAAiB;;AAIjB;;IAAA;AAAoB;;AAIpB;;IAAA;AAAe","file":"style.module.css","sourcesContent":[".alertBar {\n  @apply text-white flex py-2 duration-700;\n}\n\n.visible {\n  @apply opacity-100;\n}\n\n.invisible {\n  @apply opacity-0;\n}\n\n.dismissable:hover {\n  @apply cursor-pointer;\n}\n\n.rightIconClassList {\n  @apply absolute right-0 pr-8 pt-3;\n}\n\n.leftIconClassList {\n  @apply absolute pt-3 pl-8;\n}\n\n.textCenter {\n  @apply text-center;\n}\n\n.textLeft {\n  @apply pl-4;\n}\n\n.textLeftWithIcon {\n  @apply pl-20;\n}\n\n.textClassList {\n  @apply w-full py-3;\n}\n\n.success {\n  @apply bg-success;\n}\n\n.warning {\n  @apply bg-warning;\n}\n\n.info {\n  @apply bg-info-light;\n}\n\n.error {\n  @apply bg-error;\n}\n"]}

package/dist/src/lib/components/Avatar/Avatar.d.ts

@@ -1,3 +1,3 @@
-import React from "react";
+import React from 'react';
 declare const Avatar: React.FC;
 export default Avatar;

package/dist/src/lib/components/Avatar/Avatar.js

@@ -1,30 +1,30 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState } from 'react';
 let Snap;
-if (typeof window !== "undefined") {
-    Snap = require("snapsvg-cjs");
+if (typeof window !== 'undefined') {
+    Snap = require('snapsvg-cjs');
 }
 const Avatar = () => {
     const [s, setS] = useState(null);
     let rightEyeWhite, rightEyePupil, leftEyeWhite, leftEyePupil, avatar, armless, torso, face, legs, rightArm, leftArm, rightHand, leftHand, arms, straps, hands, leftThigh, rightThigh, leftShoe, rightShoe;
-    const leftShoulderRotationPoints = "175, 202";
-    const rightShoulderRotationPoints = "94, 202";
+    const leftShoulderRotationPoints = '175, 202';
+    const rightShoulderRotationPoints = '94, 202';
     const svgContainerHeight = 400;
     const svgContainerWidth = 265;
-    const skinColour = "#FFCC9A";
-    const zipColour = "#315107";
-    const eyeColour = "#1389BF";
-    const hairColour = "#F1B452";
-    const beardColour = "#F1B452";
-    const rucksackColour = "#072765";
-    const trouserColour = "#D3D3D3";
-    const jacketColour = "#416E0A";
-    const mouthColour = "#DC7144";
-    const shoeColour = "#000000";
-    const eyebrowColour = "#F1B452";
-    const noseColour = "#F1B452";
+    const skinColour = '#FFCC9A';
+    const zipColour = '#315107';
+    const eyeColour = '#1389BF';
+    const hairColour = '#F1B452';
+    const beardColour = '#F1B452';
+    const rucksackColour = '#072765';
+    const trouserColour = '#D3D3D3';
+    const jacketColour = '#416E0A';
+    const mouthColour = '#DC7144';
+    const shoeColour = '#000000';
+    const eyebrowColour = '#F1B452';
+    const noseColour = '#F1B452';
     const createAvatar = (s, callBack) => {
         var _a, _b, _c, _d;
-        if (typeof window === undefined)
+        if (typeof window === 'undefined')
             return;
         const head = s === null || s === void 0 ? void 0 : s.rect(103, 90, 68, 87, 50).attr({ fill: skinColour });
         const leftEyebrow = s === null || s === void 0 ? void 0 : s.rect(146, 122, 12, 3, 2);
@@ -35,40 +35,40 @@ const Avatar = () => {
         rightEyePupil = s === null || s === void 0 ? void 0 : s.ellipse(121, 132, 3, 3).attr({ fill: eyeColour });
         const leftEye = s === null || s === void 0 ? void 0 : s.group(leftEyeWhite, leftEyePupil);
         const rightEye = s === null || s === void 0 ? void 0 : s.group(rightEyeWhite, rightEyePupil);
-        const outerBeard = s === null || s === void 0 ? void 0 : s.rect(103, 90, 68, 87, 50).attr({ fill: "white" });
+        const outerBeard = s === null || s === void 0 ? void 0 : s.rect(103, 90, 68, 87, 50).attr({ fill: 'white' });
         const innerBeard = s === null || s === void 0 ? void 0 : s.rect(106, 105, 62, 62, 50);
         const beardGroup = s === null || s === void 0 ? void 0 : s.group(outerBeard, innerBeard);
         const beard = s === null || s === void 0 ? void 0 : s.rect(103, 140, 68, 60).attr({
             mask: beardGroup,
             fill: beardColour,
-            opacity: 0.6,
+            opacity: 0.6
         });
-        const outerHair = s === null || s === void 0 ? void 0 : s.rect(103, 90, 68, 60, 25).attr({ fill: "white" });
+        const outerHair = s === null || s === void 0 ? void 0 : s.rect(103, 90, 68, 60, 25).attr({ fill: 'white' });
         const innerHair = s === null || s === void 0 ? void 0 : s.rect(109, 105, 56, 40, 10);
         const hairGroup = s === null || s === void 0 ? void 0 : s.group(outerHair, innerHair);
         const baseHair = s === null || s === void 0 ? void 0 : s.rect(103, 90, 68, 40).attr({
             mask: hairGroup,
-            fill: hairColour,
+            fill: hairColour
         });
-        const hairLevel1 = s === null || s === void 0 ? void 0 : s.rect(113, 88, 50, 16, 10).attr({ fill: hairColour }).transform("r0");
+        const hairLevel1 = s === null || s === void 0 ? void 0 : s.rect(113, 88, 50, 16, 10).attr({ fill: hairColour }).transform('r0');
         const hair = s === null || s === void 0 ? void 0 : s.group(baseHair, hairLevel1);
-        const outerNose = (_a = s === null || s === void 0 ? void 0 : s.rect(129, 140, 12, 10, 30)) === null || _a === void 0 ? void 0 : _a.attr({ fill: "white" });
+        const outerNose = (_a = s === null || s === void 0 ? void 0 : s.rect(129, 140, 12, 10, 30)) === null || _a === void 0 ? void 0 : _a.attr({ fill: 'white' });
         const innerNose = s === null || s === void 0 ? void 0 : s.rect(130, 142, 10, 12, 30);
         const noseGroup = s === null || s === void 0 ? void 0 : s.group(outerNose, innerNose);
         const nose = (_b = s === null || s === void 0 ? void 0 : s.rect(129, 140, 12, 10)) === null || _b === void 0 ? void 0 : _b.attr({
             mask: noseGroup,
-            fill: noseColour,
+            fill: noseColour
         });
-        const leftEar = (_c = s === null || s === void 0 ? void 0 : s.circle(103, 135, 5)) === null || _c === void 0 ? void 0 : _c.attr({ fill: "white" });
+        const leftEar = (_c = s === null || s === void 0 ? void 0 : s.circle(103, 135, 5)) === null || _c === void 0 ? void 0 : _c.attr({ fill: 'white' });
         const leftEarMask = s === null || s === void 0 ? void 0 : s.rect(89, 120, 15, 30).attr({
             mask: leftEar,
-            fill: skinColour,
-        }).transform("r-2");
-        const rightEar = (_d = s === null || s === void 0 ? void 0 : s.circle(171, 135, 5)) === null || _d === void 0 ? void 0 : _d.attr({ fill: "white" });
+            fill: skinColour
+        }).transform('r-2');
+        const rightEar = (_d = s === null || s === void 0 ? void 0 : s.circle(171, 135, 5)) === null || _d === void 0 ? void 0 : _d.attr({ fill: 'white' });
         const rightEarMask = s === null || s === void 0 ? void 0 : s.rect(170, 120, 15, 30).attr({
             mask: rightEar,
-            fill: skinColour,
-        }).transform("r2");
+            fill: skinColour
+        }).transform('r2');
         const body = s === null || s === void 0 ? void 0 : s.rect(100, 188, 73, 105, 16, 16).attr({ fill: jacketColour });
         const hood = s === null || s === void 0 ? void 0 : s.ellipse(136, 182, 24, 10).attr({ fill: jacketColour });
         const rightShoulder = s === null || s === void 0 ? void 0 : s.rect(87, 190, 27, 14, 10);
@@ -81,27 +81,27 @@ const Avatar = () => {
         leftThigh = s === null || s === void 0 ? void 0 : s.rect(142, 300, 30, 90, 0, 0);
         rightThigh = s === null || s === void 0 ? void 0 : s.rect(98, 300, 30, 90, 0, 0);
         const bag = s === null || s === void 0 ? void 0 : s.rect(99, 180, 74, 78, 10);
-        const rightStrap = s === null || s === void 0 ? void 0 : s.rect(101, 185, 5, 100, 10).transform("r4.5");
-        const leftStrap = s === null || s === void 0 ? void 0 : s.rect(163, 185, 5, 100, 10).transform("r-4.5");
-        const mouth = s === null || s === void 0 ? void 0 : s.circle(136, 155, 10).attr({ fill: "white" });
+        const rightStrap = s === null || s === void 0 ? void 0 : s.rect(101, 185, 5, 100, 10).transform('r4.5');
+        const leftStrap = s === null || s === void 0 ? void 0 : s.rect(163, 185, 5, 100, 10).transform('r-4.5');
+        const mouth = s === null || s === void 0 ? void 0 : s.circle(136, 155, 10).attr({ fill: 'white' });
         const mouthCutOff = s === null || s === void 0 ? void 0 : s.rect(120, 155, 30, 15).attr({ fill: mouthColour });
         const leftShoeTop = s === null || s === void 0 ? void 0 : s.rect(142, 370, 30, 20, 10);
         const leftShoeSole = s === null || s === void 0 ? void 0 : s.rect(142, 378, 30, 12);
         const rightShoeTop = s === null || s === void 0 ? void 0 : s.rect(98, 370, 30, 20, 10);
         const rightShoeSole = s === null || s === void 0 ? void 0 : s.rect(98, 378, 30, 12);
         const mainZip = s === null || s === void 0 ? void 0 : s.rect(135, 199, 3, 94);
-        const leftZip = s === null || s === void 0 ? void 0 : s.rect(141, 188, 2, 15).transform("r44.5");
-        const rightZip = s === null || s === void 0 ? void 0 : s.rect(130, 188, 2, 15).transform("r-44.5");
+        const leftZip = s === null || s === void 0 ? void 0 : s.rect(141, 188, 2, 15).transform('r44.5');
+        const rightZip = s === null || s === void 0 ? void 0 : s.rect(130, 188, 2, 15).transform('r-44.5');
         const centerNeck = s === null || s === void 0 ? void 0 : s.rect(128, 170, 17, 21);
-        const leftNeck = s === null || s === void 0 ? void 0 : s.rect(139, 181, 10, 10).transform("r-33");
-        const rightNeck = s === null || s === void 0 ? void 0 : s.rect(124, 181, 10, 10).transform("r33");
-        const frontNeck = s === null || s === void 0 ? void 0 : s.rect(129, 182, 15, 15).transform("r45");
+        const leftNeck = s === null || s === void 0 ? void 0 : s.rect(139, 181, 10, 10).transform('r-33');
+        const rightNeck = s === null || s === void 0 ? void 0 : s.rect(124, 181, 10, 10).transform('r33');
+        const frontNeck = s === null || s === void 0 ? void 0 : s.rect(129, 182, 15, 15).transform('r45');
         const neck = s === null || s === void 0 ? void 0 : s.group(centerNeck, leftNeck, rightNeck, frontNeck).attr({ fill: skinColour });
         const zip = s === null || s === void 0 ? void 0 : s.group(mainZip, leftZip, rightZip).attr({ fill: zipColour });
         leftShoe = s === null || s === void 0 ? void 0 : s.group(leftShoeTop, leftShoeSole);
         rightShoe = s === null || s === void 0 ? void 0 : s.group(rightShoeTop, rightShoeSole);
         const rucksack = s === null || s === void 0 ? void 0 : s.group(leftStrap, rightStrap, bag).attr({ fill: rucksackColour });
-        const eyes = s === null || s === void 0 ? void 0 : s.group(leftEye, rightEye).attr({ fill: "white" });
+        const eyes = s === null || s === void 0 ? void 0 : s.group(leftEye, rightEye).attr({ fill: 'white' });
         const eyebrows = s === null || s === void 0 ? void 0 : s.group(leftEyebrow, rightEyebrow).attr({ fill: eyebrowColour });
         const shoes = s === null || s === void 0 ? void 0 : s.group(leftShoe, rightShoe).attr({ fill: shoeColour });
         const ears = s === null || s === void 0 ? void 0 : s.group(leftEarMask, rightEarMask);
@@ -114,7 +114,7 @@ const Avatar = () => {
         armless = s === null || s === void 0 ? void 0 : s.group(legs, torso, face);
         avatar = s === null || s === void 0 ? void 0 : s.group(armless, arms, straps, hands);
         mouthCutOff === null || mouthCutOff === void 0 ? void 0 : mouthCutOff.attr({
-            mask: mouth,
+            mask: mouth
         });
         callBack(avatar);
     };
@@ -132,7 +132,7 @@ const Avatar = () => {
             },
             from: 0,
             to: 170,
-            dur: 100,
+            dur: 100
         },
         {
             funct: function (val) {
@@ -141,7 +141,7 @@ const Avatar = () => {
             },
             from: 170,
             to: 120,
-            dur: 100,
+            dur: 100
         },
         {
             funct: function (val) {
@@ -150,7 +150,7 @@ const Avatar = () => {
             },
             from: 120,
             to: 170,
-            dur: 100,
+            dur: 100
         },
         {
             funct: function (val) {
@@ -159,7 +159,7 @@ const Avatar = () => {
             },
             from: 170,
             to: 120,
-            dur: 100,
+            dur: 100
         },
         {
             funct: function (val) {
@@ -168,7 +168,7 @@ const Avatar = () => {
             },
             from: 120,
             to: 170,
-            dur: 100,
+            dur: 100
         },
         {
             funct: function (val) {
@@ -177,7 +177,7 @@ const Avatar = () => {
             },
             from: 170,
             to: 120,
-            dur: 100,
+            dur: 100
         },
         {
             funct: function (val) {
@@ -186,8 +186,8 @@ const Avatar = () => {
             },
             from: 120,
             to: 0,
-            dur: 100,
-        },
+            dur: 100
+        }
     ];
     const leftWave = [
         {
@@ -197,7 +197,7 @@ const Avatar = () => {
             },
             from: 0,
             to: -150,
-            dur: 100,
+            dur: 100
         },
         {
             funct: function (val) {
@@ -206,7 +206,7 @@ const Avatar = () => {
             },
             from: -150,
             to: -120,
-            dur: 100,
+            dur: 100
         },
         {
             funct: function (val) {
@@ -215,7 +215,7 @@ const Avatar = () => {
             },
             from: -120,
             to: -150,
-            dur: 100,
+            dur: 100
         },
         {
             funct: function (val) {
@@ -224,7 +224,7 @@ const Avatar = () => {
             },
             from: -150,
             to: -120,
-            dur: 100,
+            dur: 100
         },
         {
             funct: function (val) {
@@ -233,7 +233,7 @@ const Avatar = () => {
             },
             from: -120,
             to: -150,
-            dur: 100,
+            dur: 100
         },
         {
             funct: function (val) {
@@ -242,7 +242,7 @@ const Avatar = () => {
             },
             from: -150,
             to: -120,
-            dur: 100,
+            dur: 100
         },
         {
             funct: function (val) {
@@ -251,41 +251,41 @@ const Avatar = () => {
             },
             from: -120,
             to: 0,
-            dur: 100,
-        },
+            dur: 100
+        }
     ];
     const jump = () => {
-        torso.animate({ transform: "t0,20" }, 500);
-        arms.animate({ transform: "t0,20" }, 500);
-        straps.animate({ transform: "t0,20" }, 500);
-        hands.animate({ transform: "t0,20" }, 500);
-        face.animate({ transform: "t0,20" }, 500, function () {
-            face.animate({ transform: "t0,-70" }, 200);
-            torso.animate({ transform: "t0,-70" }, 200);
-            arms.animate({ transform: "t0,-70" }, 200);
-            straps.animate({ transform: "t0,-70" }, 200);
-            hands.animate({ transform: "t0,-70" }, 200);
-            legs.animate({ transform: "t0,-70" }, 200, function () {
-                face.animate({ transform: "t0,0" }, 200);
-                torso.animate({ transform: "t0,0" }, 200);
-                arms.animate({ transform: "t0,0" }, 200);
-                straps.animate({ transform: "t0,0" }, 200);
-                hands.animate({ transform: "t0,0" }, 200);
-                legs.animate({ transform: "t0,0" }, 200);
+        torso.animate({ transform: 't0,20' }, 500);
+        arms.animate({ transform: 't0,20' }, 500);
+        straps.animate({ transform: 't0,20' }, 500);
+        hands.animate({ transform: 't0,20' }, 500);
+        face.animate({ transform: 't0,20' }, 500, function () {
+            face.animate({ transform: 't0,-70' }, 200);
+            torso.animate({ transform: 't0,-70' }, 200);
+            arms.animate({ transform: 't0,-70' }, 200);
+            straps.animate({ transform: 't0,-70' }, 200);
+            hands.animate({ transform: 't0,-70' }, 200);
+            legs.animate({ transform: 't0,-70' }, 200, function () {
+                face.animate({ transform: 't0,0' }, 200);
+                torso.animate({ transform: 't0,0' }, 200);
+                arms.animate({ transform: 't0,0' }, 200);
+                straps.animate({ transform: 't0,0' }, 200);
+                hands.animate({ transform: 't0,0' }, 200);
+                legs.animate({ transform: 't0,0' }, 200);
             });
         });
     };
     const eyesLeft = (duration) => {
-        leftEyePupil.animate({ transform: "t2,0" }, duration);
-        rightEyePupil.animate({ transform: "t2,0" }, duration);
+        leftEyePupil.animate({ transform: 't2,0' }, duration);
+        rightEyePupil.animate({ transform: 't2,0' }, duration);
     };
     const eyesRight = (duration) => {
-        leftEyePupil.animate({ transform: "t-2,0" }, duration);
-        rightEyePupil.animate({ transform: "t-2,0" }, duration);
+        leftEyePupil.animate({ transform: 't-2,0' }, duration);
+        rightEyePupil.animate({ transform: 't-2,0' }, duration);
     };
     const eyesCenter = (duration) => {
-        leftEyePupil.animate({ transform: "t0,0" }, duration);
-        rightEyePupil.animate({ transform: "t0,0" }, duration);
+        leftEyePupil.animate({ transform: 't0,0' }, duration);
+        rightEyePupil.animate({ transform: 't0,0' }, duration);
     };
     const blink = (times) => {
         if (times < 1)
@@ -298,12 +298,14 @@ const Avatar = () => {
                 leftEyeWhite === null || leftEyeWhite === void 0 ? void 0 : leftEyeWhite.animate({ ry: 4 }, 200);
                 leftEyePupil === null || leftEyePupil === void 0 ? void 0 : leftEyePupil.animate({ ry: 3 }, 200);
                 rightEyeWhite === null || rightEyeWhite === void 0 ? void 0 : rightEyeWhite.animate({ ry: 4 }, 200);
-                rightEyePupil === null || rightEyePupil === void 0 ? void 0 : rightEyePupil.animate({ ry: 3 }, 200, () => blink(times - 1));
+                rightEyePupil === null || rightEyePupil === void 0 ? void 0 : rightEyePupil.animate({ ry: 3 }, 200, () => {
+                    blink(times - 1);
+                });
             });
         });
     };
     const animate = (s, animation) => {
-        return nextFrame(s, animation, 0);
+        nextFrame(s, animation, 0);
     };
     // const drawPath = (s: any): void => {
     //   const linePath =
@@ -329,10 +331,10 @@ const Avatar = () => {
     //   );
     // };
     useEffect(() => {
-        if (typeof window === undefined)
+        if (typeof window === 'undefined')
             return;
         if (Snap) {
-            setS(Snap("#svg"));
+            setS(Snap('#svg'));
         }
         const makeBlinkHappen = () => {
             const randNum = Math.floor(Math.random() * 2) + 1;
@@ -351,17 +353,31 @@ const Avatar = () => {
             leftArm === null || leftArm === void 0 ? void 0 : leftArm.click(() => animate(s, leftWave));
             leftHand === null || leftHand === void 0 ? void 0 : leftHand.click(() => animate(s, leftWave));
             armless === null || armless === void 0 ? void 0 : armless.click(jump);
-            leftArm === null || leftArm === void 0 ? void 0 : leftArm.hover(() => eyesLeft(200));
-            leftThigh === null || leftThigh === void 0 ? void 0 : leftThigh.hover(() => eyesLeft(200));
-            leftShoe === null || leftShoe === void 0 ? void 0 : leftShoe.hover(() => eyesLeft(200));
-            torso === null || torso === void 0 ? void 0 : torso.hover(() => eyesCenter(200));
-            rightArm === null || rightArm === void 0 ? void 0 : rightArm.hover(() => eyesRight(200));
-            rightThigh === null || rightThigh === void 0 ? void 0 : rightThigh.hover(() => eyesRight(200));
-            rightShoe === null || rightShoe === void 0 ? void 0 : rightShoe.hover(() => eyesRight(200));
+            leftArm === null || leftArm === void 0 ? void 0 : leftArm.hover(() => {
+                eyesLeft(200);
+            });
+            leftThigh === null || leftThigh === void 0 ? void 0 : leftThigh.hover(() => {
+                eyesLeft(200);
+            });
+            leftShoe === null || leftShoe === void 0 ? void 0 : leftShoe.hover(() => {
+                eyesLeft(200);
+            });
+            torso === null || torso === void 0 ? void 0 : torso.hover(() => {
+                eyesCenter(200);
+            });
+            rightArm === null || rightArm === void 0 ? void 0 : rightArm.hover(() => {
+                eyesRight(200);
+            });
+            rightThigh === null || rightThigh === void 0 ? void 0 : rightThigh.hover(() => {
+                eyesRight(200);
+            });
+            rightShoe === null || rightShoe === void 0 ? void 0 : rightShoe.hover(() => {
+                eyesRight(200);
+            });
         };
         createAvatar(s, loadActions);
     }, [s]);
-    return (React.createElement("svg", { id: "svg", className: "mx-auto", height: `${svgContainerHeight.toString()}px`, width: `${svgContainerWidth.toString()}px`, version: "1.1", xmlns: "http://www.w3.org/2000/svg" }));
+    return (React.createElement("svg", { id: 'svg', className: 'mx-auto', height: `${svgContainerHeight.toString()}px`, width: `${svgContainerWidth.toString()}px`, version: '1.1', xmlns: 'http://www.w3.org/2000/svg' }));
 };
 export default Avatar;
 //# sourceMappingURL=Avatar.js.map