anim-3d-obj 1.0.9

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 JTL (Saman)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,159 @@
+# React Typescript Cuboid Builder
+
+This project allows a user to create Cuboids of any size simply by entering a set of parameters.  
+The program does the leg work with regard to calculating translationZ depth and config on the fly.
+
+## Deployment
+
+Install sequence
+
+```
+npm install anim-3d-objs
+```
+
+## Examples
+
+All sided simple https://codesandbox.io/s/anim-3d-obj-all-sides-simple-sdy1q0
+
+Two sided simple https://codesandbox.io/s/anim-3d-obj-2-sides-simple-9wognm
+
+90 degree wobble on X axis https://codesandbox.io/s/anim-3d-obj-wobblex-08mxqe
+
+speed wobble(y) 3 sides https://codesandbox.io/s/anim-3d-obj-3-sides-wobble-y-axis-dceqdp
+
+## usage
+
+```
+         <Cuboid
+            width={300}
+            height={200}
+            depth={100}
+            perspectiveOrigin='50% 50%'
+            zIndex={10}
+            animSpecs={animSpecs}
+            custom={custom}
+            faces={faceprops}
+            global={global}
+         >
+            {}
+         </Cuboid>
+```
+
+example spec for global config and 6 sided cuboid
+
+```
+   const faceprops = {
+      front: true,
+      back: true,
+      left: true,
+      right: true,
+      top: true,
+      bottom: true,
+   };
+
+   const global: object = {
+      // // face individual styles (over rides global)
+      css: `
+         border: 1px solid #00f;
+         background-color: red;
+         color:white;
+         opacity: 0.9;
+         backface-visibility: visible;
+         font-family: Arial, Helvetica, sans-serif;
+         `,
+      body: "Hi I am global",
+   };
+   const animSpecs: object = {
+      anim1: "Y360",
+      anim2: "X360",
+      anim1duration: 5,
+      anim2duration: 23,
+      anim1count: "infinite",
+      anim1low: "-120",
+      anim2hi: "120",
+      anim2low: "-81",
+      anim2count: "infinite",
+      anim1direction: "normal",
+      anim2direction: "normal",
+   };
+
+   const custom: object = {
+      // // face individual styles (over rides global)
+      bottom: {
+         css: `
+         border: 1px solid #00f;
+         background-color: red;
+         opacity: 0.9;
+         color:white;
+         fontFace:sans;
+         line-
+         backface-visibility: visible;
+         font-family: Arial, Helvetica, sans-serif;
+         fontFamily: Cochin;
+
+         `,
+         body: "BOTTOMs UP!",
+      },
+      front: {
+         css: `
+         border: 1px solid #00f;
+         background-color: blue;
+         opacity: 0.9;
+         backface-visibility: visible;
+         color:white;
+         font-family: Arial, Helvetica, sans-serif;
+         line-height:10;
+         text-align:center;
+         `,
+         body: "FRONT FACING!",
+      },
+      left: {
+         css: `
+         border: 1px solid #00f;
+         background-color: green;
+         opacity: 0.9;
+         backface-visibility: visible;
+         color:white;
+         font-family: Arial, Helvetica, sans-serif;
+         line-height:10;
+         text-align:center;
+         `,
+         body: "LEFTY",
+      },
+      top: {
+         css: `
+         border: 1px solid #00f;
+         background-color: purple;
+         opacity: 0.9;
+         backface-visibility: visible;
+         color:white;
+         font-family: Arial, Helvetica, sans-serif;
+         line-height:6;
+         text-align:center;
+         `,
+         body: "TOP DAWG",
+      },
+      right: {
+         css: `
+         border: 1px solid #00f;
+         background-color: orange;
+         opacity: 0.9;
+         backface-visibility: visible;
+         color:blue;
+         font-family: Arial, Helvetica, sans-serif;
+         line-height:10;
+         text-align:center;
+         `,
+         body: "RIGHT SIDE",
+      },
+      back: {},
+   };
+```
+
+## Authors
+
+-   [@mdnelles](https://github.com/mdnelles)
+
+## Keywords
+
+3d animate react css styles cuboid cube box spin

package/dist/cjs/components/Button.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface IButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+    backgroundColor?: string;
+    color?: string;
+}
+export declare const Button: React.FunctionComponent<IButtonProps>;

package/dist/cjs/components/Button.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const react_1 = __importDefault(require("react"));
+const Button = (props) => {
+    const { children, backgroundColor, color, style } = props;
+    let _style = style || {};
+    /** Override Defaults */
+    if (backgroundColor && _style)
+        _style.backgroundColor = backgroundColor;
+    if (color && _style)
+        _style.color = color;
+    return (react_1.default.createElement("button", Object.assign({ style: _style }, props), children));
+};
+exports.Button = Button;
+//# sourceMappingURL=Button.js.map

package/dist/cjs/components/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAOnB,MAAM,MAAM,GAA0C,CAAC,KAAK,EAAE,EAAE;IACnE,MAAM,EAAE,QAAQ,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAE1D,IAAI,MAAM,GAAwB,KAAK,IAAI,EAAE,CAAC;IAE9C,wBAAwB;IACxB,IAAI,eAAe,IAAI,MAAM;QAAE,MAAM,CAAC,eAAe,GAAG,eAAe,CAAC;IACxE,IAAI,KAAK,IAAI,MAAM;QAAE,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC;IAE1C,OAAO,CACH,wDAAQ,KAAK,EAAE,MAAM,IAAM,KAAK,GAC3B,QAAQ,CACJ,CACZ,CAAC;AACN,CAAC,CAAC;AAdW,QAAA,MAAM,UAcjB"}

package/dist/cjs/components/Cuboid.d.ts

@@ -0,0 +1,2 @@
+import { CuboidProps } from './Faces/FaceInter';
+export declare const Cuboid: (props: CuboidProps) => any;

package/dist/cjs/components/Cuboid.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Cuboid = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const AnimWrap_1 = require("./styles/AnimWrap");
+const Scene_1 = require("./styles/Scene");
+const Face_1 = __importDefault(require("./Faces/Face"));
+const react_1 = __importDefault(require("react"));
+const CuboidWrapper = styled_components_1.default.div `
+    width: 100%;
+    height: 100%;
+    position: relative;
+    transform-style: preserve-3d;
+`;
+const Cuboid = (props) => {
+    let color = '#eee', fontWeight = 800, fontFamily = 'helvetica', textShadow = '1px 1px #555', lineHeight = 1.2, fontSize = 20, textAlign = 'center';
+    let { animSpecs = {}, width = 5, height = 5, depth = 5, faces, globalStyles, indivStyles, tranz = (+height / 2) | 0, perspectiveOrigin, zIndex } = props;
+    const buildFace = (faceType, child) => {
+        //const { faceType, child } = props;
+        return (react_1.default.createElement(Face_1.default, { width: width, height: height, depth: depth, faceType: faceType, id: faceType, tranz: tranz, 
+            // if specified opac / bgc / border will over-ride globalStyles
+            globalStyles: globalStyles, indivStyles: indivStyles },
+            react_1.default.createElement("div", { style: {
+                    color,
+                    fontWeight,
+                    textShadow,
+                    lineHeight,
+                    fontSize,
+                    fontFamily,
+                    textAlign
+                } }, child)));
+    };
+    return (react_1.default.createElement(Scene_1.SceneStyle, { width: width, height: height, perspectiveOrigin: perspectiveOrigin, zIndex: zIndex },
+        react_1.default.createElement(AnimWrap_1.AnimWrap, { duration: animSpecs.anim1duration, iterationCount: animSpecs.anim1count, animName: animSpecs.anim1, animLow: animSpecs.anim1low, animHi: animSpecs.anim1hi, animDirection: animSpecs.anim1direction },
+            react_1.default.createElement(AnimWrap_1.AnimWrap, { duration: animSpecs.anim2duration, iterationCount: animSpecs.anim2count, animName: animSpecs.anim2, animLow: animSpecs.anim2low, animHi: animSpecs.anim2hi, animDirection: animSpecs.anim2direction },
+                react_1.default.createElement(CuboidWrapper, null,
+                    !!faces && !!faces.front ? buildFace('front', 'FRONT') : null,
+                    !!faces && !!faces.right ? buildFace('right', 'RIGHT') : null,
+                    !!faces && !!faces.back ? buildFace('back', 'BACK') : null,
+                    !!faces && !!faces.left ? buildFace('left', 'LEFT') : null,
+                    !!faces && !!faces.top ? buildFace('top', 'TOP') : null,
+                    !!faces && !!faces.bottom ? buildFace('bottom', 'BOTTOM') : null)))));
+};
+exports.Cuboid = Cuboid;
+//# sourceMappingURL=Cuboid.js.map

package/dist/cjs/components/Cuboid.js.map

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

package/dist/cjs/components/Faces/Face.d.ts

@@ -0,0 +1,3 @@
+import { FaceProps } from './FaceInter';
+declare const Face: (props: FaceProps) => any;
+export default Face;

package/dist/cjs/components/Faces/Face.js

@@ -0,0 +1,96 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Face = (props) => {
+    let { bfv = false, bgc = false, border = false, children, depth = 10, faceType, globalStyles = {}, fontFamily, height = 10, indivStyles = false, left = 0, margin = 0, opac = false, padding = 20, position = 'absolute', top = 0, tranz = 80, width = 10 } = props;
+    let transform;
+    const setCustomVars = (vars, props) => {
+        bfv = !!vars && !!vars.bfv ? vars.bfv : props.bfv;
+        bgc = !!vars && !!vars.bgc ? vars.bgc : props.bgc;
+        opac = !!vars && !!vars.opac ? vars.opac : props.opac;
+        border = !!vars && !!vars.border ? vars.border : props.border;
+        fontFamily = !!vars && !!vars.fontFamily ? vars.fontFamily : props.fontFamily;
+        return true;
+    };
+    if (faceType === 'bottom') {
+        tranz = +height - +depth / 2;
+        height = +depth;
+        transform = `transform: rotateX(-90deg) translateZ(${tranz}px);`;
+        setCustomVars(indivStyles['bottom'], props);
+    }
+    else if (faceType === 'front') {
+        if (!!depth)
+            tranz = +depth / 2;
+        transform = `transform: rotateY(0deg) translateZ(${tranz}px);`;
+        setCustomVars(indivStyles['front'], props);
+    }
+    else if (faceType === 'back') {
+        if (!!depth)
+            tranz = +depth / 2;
+        transform = `transform: rotateY(180deg) translateZ(${tranz}px);`;
+        setCustomVars(indivStyles['back'], props);
+    }
+    else if (faceType === 'top') {
+        height = +depth;
+        if (!!depth)
+            tranz = +depth / 2;
+        transform = `transform: rotateX(90deg) translateZ(${tranz}px);`;
+        setCustomVars(indivStyles['top'], props);
+    }
+    else if (faceType === 'right') {
+        if (height > width && !depth) {
+            tranz = -(+height / 2 - +width);
+            width = +height;
+        }
+        else if (width > height && !depth) {
+            tranz = +height / 2;
+            height = +width;
+        }
+        else {
+            tranz = +width - +depth / 2;
+            width = +depth;
+        }
+        transform = `transform: rotateY(90deg) translateZ(${tranz}px);`;
+        setCustomVars(indivStyles['right'], props);
+    }
+    else {
+        if (height > width && !depth) {
+            console.log(1);
+            tranz = -(+height / 2 - +width);
+            width = +height;
+        }
+        else if (width > height && !depth) {
+            console.log(2);
+            tranz = +height / 2;
+            height = +width;
+        }
+        else {
+            tranz = +depth / 2;
+            width = +depth;
+        }
+        transform = `transform: rotateY(-90deg) translateZ(${tranz}px);`;
+        setCustomVars(indivStyles['left'], props);
+    }
+    const Specs = styled_components_1.default.div `
+        opacity: ${!!opac ? opac : globalStyles.opac};
+        position: ${position};
+        left: ${left};
+        margin: ${margin};
+        padding: ${padding};
+        width: ${width}px;
+        font-family: ${fontFamily};
+        height: ${height}px;
+        background-color: ${!!bgc ? bgc : globalStyles.bgc};
+        border: ${!!border ? border : globalStyles.border};
+        backface-visibility: ${!!bfv ? bfv : globalStyles.bfv};
+        ${transform}
+        top: ${top};
+    `;
+    return react_1.default.createElement(Specs, null, children);
+};
+exports.default = Face;
+//# sourceMappingURL=Face.js.map

package/dist/cjs/components/Faces/Face.js.map

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

package/dist/cjs/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Button';
+export * from './Cuboid';

package/dist/cjs/components/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Button"), exports);
+__exportStar(require("./Cuboid"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,2CAAyB;AACzB,2CAAyB"}

package/dist/cjs/components/styles/AnimWrap.d.ts

@@ -0,0 +1,2 @@
+import { AnimStylesProps } from './Anim';
+export declare const AnimWrap: (props: AnimStylesProps) => JSX.Element;

package/dist/cjs/components/styles/AnimWrap.js

@@ -0,0 +1,71 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnimWrap = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const react_1 = __importDefault(require("react"));
+const Anims_1 = require("./Anims");
+const AnimWrap = (props) => {
+    const { duration = 0, iterationCount = 0, animName = 'noAnim', fillMode = 'forward', children = '', borderColor = '', animLow = 0, animHi = 0, animDirection = 'normal' } = props;
+    const { X360, Y360, fadeInkf, wobY, wobX, fwdx018, fwdx1836, fwdx09, fwdx918, fwdx1827, fwdx2736, fwdy018, fwdy1836, fwdy09, fwdy918, fwdy1827, fwdy2736, noAnim } = (0, Anims_1.allAnims)({ animLow, animHi });
+    let theAnim = 'noAnim';
+    // need to iterate through all animation posibilities and not use eval() to satisfy TS
+    if (animName === 'X360')
+        theAnim = X360;
+    else if (animName === 'Y360')
+        theAnim = Y360;
+    else if (animName === 'fadeInkf')
+        theAnim = fadeInkf;
+    else if (animName === 'wobX')
+        theAnim = wobX;
+    else if (animName === 'wobY')
+        theAnim = wobY;
+    else if (animName === 'fwdx018')
+        theAnim = fwdx018;
+    else if (animName === 'fwdx1836')
+        theAnim = fwdx1836;
+    else if (animName === 'fwdx09')
+        theAnim = fwdx09;
+    else if (animName === 'fwdx918')
+        theAnim = fwdx918;
+    else if (animName === 'fwdx1827')
+        theAnim = fwdx1827;
+    else if (animName === 'fwdx2736')
+        theAnim = fwdx2736;
+    else if (animName === 'fwdy018')
+        theAnim = fwdy018;
+    else if (animName === 'fwdy1836')
+        theAnim = fwdy1836;
+    else if (animName === 'fwdy09')
+        theAnim = fwdy09;
+    else if (animName === 'fwdy918')
+        theAnim = fwdy918;
+    else if (animName === 'fwdy1827')
+        theAnim = fwdy1827;
+    else if (animName === 'fwdy2736')
+        theAnim = fwdy2736;
+    else
+        theAnim = noAnim;
+    const AnimWrapDiv = styled_components_1.default.div `
+        width: 100%;
+        height: 100%;
+        position: relative;
+        border: 0px dotted ${borderColor};
+        transform-style: preserve-3d;
+        -webkit-animation-duration: ${duration}s;
+        animation-duration: ${duration}s;
+        -webkit-animation-iteration-count: ${iterationCount};
+        animation-iteration-count: ${iterationCount};
+        -webkit-animation-name: ${theAnim};
+        animation-name: ${theAnim};
+        -webkit-animation-fill-mode: ${fillMode};
+        animation-fill-mode: ${fillMode};
+        animation-direction: ${animDirection};
+        -webkit-animation-direction: ${animDirection};
+    `;
+    return react_1.default.createElement(AnimWrapDiv, null, children);
+};
+exports.AnimWrap = AnimWrap;
+//# sourceMappingURL=AnimWrap.js.map

package/dist/cjs/components/styles/AnimWrap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimWrap.js","sourceRoot":"","sources":["../../../../src/components/styles/AnimWrap.tsx"],"names":[],"mappings":";;;;;;AAAA,0EAAuC;AACvC,kDAA0B;AAE1B,mCAAmC;AAE5B,MAAM,QAAQ,GAAG,CAAC,KAAsB,EAAE,EAAE;IAC/C,MAAM,EAAE,QAAQ,GAAG,CAAC,EAAE,cAAc,GAAG,CAAC,EAAE,QAAQ,GAAG,QAAQ,EAAE,QAAQ,GAAG,SAAS,EAAE,QAAQ,GAAG,EAAE,EAAE,WAAW,GAAG,EAAE,EAAE,OAAO,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,aAAa,GAAG,QAAQ,EAAE,GAAG,KAAK,CAAC;IAElL,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,IAAA,gBAAQ,EAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC;IACnM,IAAI,OAAO,GAAQ,QAAQ,CAAC;IAC5B,sFAAsF;IACtF,IAAI,QAAQ,KAAK,MAAM;QAAE,OAAO,GAAG,IAAI,CAAC;SACnC,IAAI,QAAQ,KAAK,MAAM;QAAE,OAAO,GAAG,IAAI,CAAC;SACxC,IAAI,QAAQ,KAAK,UAAU;QAAE,OAAO,GAAG,QAAQ,CAAC;SAChD,IAAI,QAAQ,KAAK,MAAM;QAAE,OAAO,GAAG,IAAI,CAAC;SACxC,IAAI,QAAQ,KAAK,MAAM;QAAE,OAAO,GAAG,IAAI,CAAC;SACxC,IAAI,QAAQ,KAAK,SAAS;QAAE,OAAO,GAAG,OAAO,CAAC;SAC9C,IAAI,QAAQ,KAAK,UAAU;QAAE,OAAO,GAAG,QAAQ,CAAC;SAChD,IAAI,QAAQ,KAAK,QAAQ;QAAE,OAAO,GAAG,MAAM,CAAC;SAC5C,IAAI,QAAQ,KAAK,SAAS;QAAE,OAAO,GAAG,OAAO,CAAC;SAC9C,IAAI,QAAQ,KAAK,UAAU;QAAE,OAAO,GAAG,QAAQ,CAAC;SAChD,IAAI,QAAQ,KAAK,UAAU;QAAE,OAAO,GAAG,QAAQ,CAAC;SAChD,IAAI,QAAQ,KAAK,SAAS;QAAE,OAAO,GAAG,OAAO,CAAC;SAC9C,IAAI,QAAQ,KAAK,UAAU;QAAE,OAAO,GAAG,QAAQ,CAAC;SAChD,IAAI,QAAQ,KAAK,QAAQ;QAAE,OAAO,GAAG,MAAM,CAAC;SAC5C,IAAI,QAAQ,KAAK,SAAS;QAAE,OAAO,GAAG,OAAO,CAAC;SAC9C,IAAI,QAAQ,KAAK,UAAU;QAAE,OAAO,GAAG,QAAQ,CAAC;SAChD,IAAI,QAAQ,KAAK,UAAU;QAAE,OAAO,GAAG,QAAQ,CAAC;;QAChD,OAAO,GAAG,MAAM,CAAC;IAEtB,MAAM,WAAW,GAAQ,2BAAM,CAAC,GAAG,CAAA;;;;6BAIV,WAAW;;sCAEF,QAAQ;8BAChB,QAAQ;6CACO,cAAc;qCACtB,cAAc;kCACjB,OAAO;0BACf,OAAO;uCACM,QAAQ;+BAChB,QAAQ;+BACR,aAAa;uCACL,aAAa;KAC/C,CAAC;IAEF,OAAO,8BAAC,WAAW,QAAE,QAAQ,CAAe,CAAC;AACjD,CAAC,CAAC;AA5CW,QAAA,QAAQ,YA4CnB"}

package/dist/cjs/components/styles/Anims.d.ts

@@ -0,0 +1,25 @@
+interface AllAnimsProps {
+    animLow?: number;
+    animHi?: number;
+}
+export declare const allAnims: (props: AllAnimsProps) => {
+    X360: import("styled-components").Keyframes;
+    Y360: import("styled-components").Keyframes;
+    fadeInkf: import("styled-components").Keyframes;
+    wobY: import("styled-components").Keyframes;
+    wobX: import("styled-components").Keyframes;
+    fwdx018: import("styled-components").Keyframes;
+    fwdx1836: import("styled-components").Keyframes;
+    fwdx09: import("styled-components").Keyframes;
+    fwdx918: import("styled-components").Keyframes;
+    fwdx1827: import("styled-components").Keyframes;
+    fwdx2736: import("styled-components").Keyframes;
+    fwdy018: import("styled-components").Keyframes;
+    fwdy1836: import("styled-components").Keyframes;
+    fwdy09: import("styled-components").Keyframes;
+    fwdy918: import("styled-components").Keyframes;
+    fwdy1827: import("styled-components").Keyframes;
+    fwdy2736: import("styled-components").Keyframes;
+    noAnim: import("styled-components").Keyframes;
+};
+export {};